/* ========================================================================
   WHMCS Modern Client Area & Domain Pricing Theme Customizations
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

/* --- Root Color Variables & Tailwind Base Border Reset --- */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e2e8f0;
}
[data-bs-theme="dark"] *, .dark * {
    border-color: #334155;
}

:root {
    --whmcs-font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-sans-serif: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --whmcs-font-mono: 'JetBrains Mono', monospace;
    
    --whmcs-primary: #6366f1;
    --whmcs-primary-dark: #4f46e5;
    --whmcs-primary-gradient: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    --whmcs-primary-glow: rgba(99, 102, 241, 0.25);
    
    --whmcs-success: #10b981;
    --whmcs-success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
    --whmcs-danger: #f43f5e;
    --whmcs-danger-gradient: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
    --whmcs-warning: #f59e0b;
    --whmcs-warning-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    
    --whmcs-dark: #0f172a;
    --whmcs-slate: #1e293b;
    --whmcs-muted: #64748b;
    --whmcs-light: #f8fafc;
    --whmcs-border: #e2e8f0;
    
    --whmcs-radius: 14px;
    --whmcs-radius-sm: 8px;
    --whmcs-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
    --whmcs-shadow-hover: 0 20px 40px -8px rgba(99, 102, 241, 0.16), 0 8px 16px -3px rgba(0, 0, 0, 0.06);
    --whmcs-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply Font Family globally across entire theme (preserving icon fonts) */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, input, select, textarea, button,
.btn, .form-control, .card, .card-header, .card-title,
.sidebar, .nav, .nav-link, .navbar, .navbar-nav, .dropdown-menu, .dropdown-item,
.table, .list-group, .list-group-item,
#order-standard_cart, .domain-pricing,
.tt-domain-hero-card, .tt-feat-card, .nx-side-widget, .nx-widget-title,
.badge, .alert, label {
    font-family: var(--whmcs-font-main) !important;
}

.font-display {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: -0.035em !important;
}

/* Ensure Font Awesome Pro icons (Light, Solid, Regular, Duotone, Brands) render perfectly */
.fa, .fas, .fa-solid {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.far, .fa-regular {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important;
}

/* Prevent horizontal viewport scroll leakage & eliminate gap below footer */
html, body, body.tt-body-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
#footer, .nx-footer-wrap, .nx-sub-footer {
    margin-bottom: 0 !important;
}
.fa, .fas, .fa-solid {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}
.far, .fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important;
}
.fal, .fa-light {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 300 !important;
}
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}
.fad, .fa-duotone {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}


/* ========================================================================
   1. DOMAIN CHECKER, PRICING & RESULTS MODERNIZATION
   ======================================================================== */

/* Hide redundant outside header on domain register page */
#order-standard_cart .cart-body > .header-lined {
    display: none !important;
}

.domain-pricing {
    padding: 20px 0;
}

/* Domain Checker Hero Banner (cart.php?a=add&domain=register) */
@keyframes ttPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.domain-checker-container,
.domain-checker-container.tt-domain-hero-card {
    border-radius: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 35px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 36px -10px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
    background: #ffffff !important;
}

.domain-checker-container.tt-domain-hero-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 50%, #10b981 100%) !important;
    z-index: 5 !important;
}

/* Light Mode Hero Banner */
.domain-checker-container .domain-checker-bg {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 38px 32px 30px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    overflow: visible !important;
}

.tt-domain-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    margin-bottom: 14px !important;
}

.tt-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    background: #10b981 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: ttPulse 2s infinite !important;
}

.tt-domain-hero-heading {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

.tt-domain-hero-sub {
    color: #64748b !important;
    font-size: 14px !important;
    max-width: 620px !important;
    margin: 0 auto 24px !important;
    line-height: 1.5 !important;
}

/* Precision Engineered Search Box */
.tt-domain-search-wrapper {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.tt-domain-search-box {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 5px 6px 5px 18px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    border: 2px solid #cbd5e1 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 auto !important;
}

.tt-domain-search-box:focus-within {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), 0 10px 25px -4px rgba(79, 70, 229, 0.18) !important;
}

.tt-domain-icon-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4f46e5 !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
}

.tt-domain-search-box #inputDomain,
.tt-domain-search-box #inputDomain:focus,
#order-standard_cart .tt-domain-search-box #inputDomain,
#order-standard_cart .tt-domain-search-box #inputDomain:focus,
#order-standard_cart .tt-transfer-box input,
#order-standard_cart .tt-transfer-box input:focus {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding: 0 8px !important;
    height: 100% !important;
    background: transparent !important;
    flex: 1 !important;
}

.tt-domain-search-box #inputDomain::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

.tt-search-clear-btn {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: color 0.15s ease !important;
    line-height: 1 !important;
}

.tt-search-clear-btn:hover {
    color: #0f172a !important;
}

.tt-search-action-slot {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
}

.tt-domain-search-box #btnCheckAvailability {
    border-radius: 9px !important;
    padding: 0 26px !important;
    height: 48px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.tt-domain-search-box #btnCheckAvailability:hover {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45) !important;
}

/* Trending Popular TLDs Bar */
.tt-domain-trending-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 14px !important;
    margin-bottom: 22px !important;
}

.tt-trending-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.tt-trending-chips {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.tt-tld-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #1e293b !important;
}

.tt-tld-chip:hover {
    background: #f8faff !important;
    border-color: #6366f1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

.tt-chip-ext {
    font-weight: 700 !important;
    color: #0f172a !important;
}

.tt-chip-price {
    font-weight: 600 !important;
    color: #4f46e5 !important;
    font-size: 12px !important;
}

.tt-chip-badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.tt-chip-badge.badge-hot {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.tt-chip-badge.badge-sale {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

.tt-chip-badge.badge-tech {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

/* Trust Badges Ribbon */
.tt-domain-trust-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 20px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.tt-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.tt-trust-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.tt-trust-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.tt-trust-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
}

.tt-trust-desc {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.2 !important;
}

.tt-trust-sep {
    width: 1px !important;
    height: 28px !important;
    background: #e2e8f0 !important;
}

@media (max-width: 768px) {
    .tt-trust-sep {
        display: none !important;
    }
    .tt-domain-trust-strip {
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    .tt-domain-search-box {
        height: auto !important;
        flex-wrap: wrap !important;
        padding: 10px !important;
    }
    .tt-search-action-slot {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
    }
    .tt-domain-search-box #btnCheckAvailability {
        width: 100% !important;
    }
}

/* Dark Mode Hero Banner */
[data-bs-theme="dark"] .domain-checker-container,
[data-bs-theme="dark"] .domain-checker-container.tt-domain-hero-card,
.dark .domain-checker-container,
.dark .domain-checker-container.tt-domain-hero-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7) !important;
}

[data-bs-theme="dark"] .domain-checker-container .domain-checker-bg,
.dark .domain-checker-container .domain-checker-bg {
    background: linear-gradient(180deg, #131b2e 0%, #0f172a 100%) !important;
}

[data-bs-theme="dark"] .tt-domain-badge,
.dark .tt-domain-badge {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-bs-theme="dark"] .tt-domain-hero-heading,
.dark .tt-domain-hero-heading {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-domain-hero-sub,
.dark .tt-domain-hero-sub {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .tt-domain-search-box,
.dark .tt-domain-search-box {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .tt-domain-search-box:focus-within,
.dark .tt-domain-search-box:focus-within {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25), 0 10px 25px -4px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .tt-domain-icon-slot,
.dark .tt-domain-icon-slot {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .tt-domain-search-box #inputDomain,
.dark .tt-domain-search-box #inputDomain {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-domain-search-box #inputDomain::placeholder,
.dark .tt-domain-search-box #inputDomain::placeholder {
    color: #64748b !important;
}

[data-bs-theme="dark"] .tt-search-clear-btn,
.dark .tt-search-clear-btn {
    color: #64748b !important;
}

[data-bs-theme="dark"] .tt-search-clear-btn:hover,
.dark .tt-search-clear-btn:hover {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-trending-title,
.dark .tt-trending-title {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .tt-tld-chip,
.dark .tt-tld-chip {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .tt-tld-chip:hover,
.dark .tt-tld-chip:hover {
    background: #334155 !important;
    border-color: #818cf8 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-chip-ext,
.dark .tt-chip-ext {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-chip-price,
.dark .tt-chip-price {
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .tt-domain-trust-strip,
.dark .tt-domain-trust-strip {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tt-trust-sep,
.dark .tt-trust-sep {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .tt-trust-icon,
.dark .tt-trust-icon {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tt-trust-title,
.dark .tt-trust-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .tt-trust-desc,
.dark .tt-trust-desc {
    color: #94a3b8 !important;
}

/* ========================================================================
   SEARCH RESULTS MODERNIZATION (#DomainSearchResults)
   ======================================================================== */

#DomainSearchResults {
    margin-top: 24px;
    margin-bottom: 35px;
}

/* Eliminate Default Dashed Box Around Headline */
#order-standard_cart .domain-checker-result-headline,
.domain-checker-result-headline {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    box-shadow: none !important;
}

.domain-lookup-primary-loader {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 30px !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="dark"] .domain-lookup-primary-loader,
.dark .domain-lookup-primary-loader {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #a5b4fc !important;
}

.domain-lookup-result {
    padding: 0 !important;
    border-radius: 20px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Strict Hiding for Domain Results */
.domain-checker-available[style*="display: none"],
.domain-checker-available[style*="display:none"],
.domain-checker-available.w-hidden,
.domain-checker-unavailable[style*="display: none"],
.domain-checker-unavailable[style*="display:none"],
.domain-checker-unavailable.w-hidden,
.domain-lookup-primary-loader[style*="display: none"],
.domain-lookup-primary-loader[style*="display:none"],
.domain-lookup-primary-loader.w-hidden {
    display: none !important;
}

/* Available Status Card */
.domain-checker-available {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #047857 !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.1) !important;
    margin-bottom: 16px !important;
}

[data-bs-theme="dark"] .domain-checker-available,
.dark .domain-checker-available {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

/* Unavailable & Taken Status Card */
.domain-checker-unavailable,
.domain-checker-invalid {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(244, 63, 94, 0.03) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #b91c1c !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.06) !important;
    margin-bottom: 16px !important;
}

[data-bs-theme="dark"] .domain-checker-unavailable,
.dark .domain-checker-unavailable,
[data-bs-theme="dark"] .domain-checker-invalid,
.dark .domain-checker-invalid {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* Domain Price & CTA (Controlled by jQuery show/hide) */
.domain-price {
    margin-top: 18px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.domain-price[style*="display: none"] {
    display: none !important;
}

.domain-price .price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

[data-bs-theme="dark"] .domain-price .price,
.dark .domain-price .price {
    color: #ffffff !important;
}

.domain-price .btn-add-to-cart {
    border-radius: 9999px !important;
    padding: 10px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.2s ease !important;
}

.domain-price .btn-add-to-cart:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

/* Spotlight TLD Cards */
.spotlight-tlds {
    margin: 24px 0 30px !important;
}

.spotlight-tlds-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
}

.spotlight-tld-container {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
}

.spotlight-tld {
    position: relative !important;
    height: auto !important;
    min-height: 145px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 20px 16px 18px !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.spotlight-tld:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12) !important;
    border-color: #818cf8 !important;
}

[data-bs-theme="dark"] .spotlight-tld,
.dark .spotlight-tld {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* While spotlight loader is active, hide result container completely */
.spotlight-tld .domain-lookup-spotlight-loader:not([style*="display: none"]) ~ .domain-lookup-result {
    display: none !important;
}

.spotlight-tld .domain-lookup-result[style*="display: none"] {
    display: none !important;
}

.spotlight-tld .domain-lookup-result {
    width: 100% !important;
    margin-top: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Strictly hide elements with display: none or unhandled w-hidden */
.spotlight-tld .domain-lookup-result [style*="display: none"],
.spotlight-tld .domain-lookup-result .btn[style*="display: none"],
.spotlight-tld .domain-lookup-result .price[style*="display: none"],
.spotlight-tld .domain-lookup-result .w-hidden:not([style*="display: block"]):not([style*="display: inline"]):not([style*="display: inline-block"]):not([style*="display: flex"]) {
    display: none !important;
}

.spotlight-tld .price:not([style*="display: none"]):not(.w-hidden) {
    display: block !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #4f46e5 !important;
    margin: 6px 0 10px !important;
}

[data-bs-theme="dark"] .spotlight-tld .price:not([style*="display: none"]):not(.w-hidden),
.dark .spotlight-tld .price:not([style*="display: none"]):not(.w-hidden) {
    color: #a5b4fc !important;
}

.spotlight-tld .btn {
    border-radius: 9999px !important;
    padding: 6px 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: 90% !important;
    margin: 6px auto 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: none !important;
    line-height: 1.5 !important;
}

.spotlight-tld .btn.unavailable,
.spotlight-tld .btn.invalid {
    margin: 6px auto 0 !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .spotlight-tld .btn.unavailable,
.dark .spotlight-tld .btn.unavailable,
[data-bs-theme="dark"] .spotlight-tld .btn.invalid,
.dark .spotlight-tld .btn.invalid {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.spotlight-tld .btn-add-to-cart {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

/* Suggested Domains Panel */
.suggested-domains {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    margin-top: 24px !important;
    border-top: none !important;
}

[data-bs-theme="dark"] .suggested-domains,
.dark .suggested-domains {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.suggested-domains .panel-heading,
.suggested-domains .card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-top: none !important;
}

[data-bs-theme="dark"] .suggested-domains .panel-heading,
[data-bs-theme="dark"] .suggested-domains .card-header,
.dark .suggested-domains .panel-heading,
.dark .suggested-domains .card-header {
    background: #1e293b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

/* Hide only the prototype template row (it does NOT have class 'clone') */
#domainSuggestions > .domain-suggestion:not(.clone) {
    display: none !important;
}

/* Render actual clones cleanly */
.domain-suggestion.clone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
}

.domain-suggestion.clone[style*="display: none"] {
    display: none !important;
}

.domain-suggestion.clone:last-child {
    border-bottom: none !important;
}

.domain-suggestion.clone:hover {
    background: rgba(99, 102, 241, 0.03) !important;
}

[data-bs-theme="dark"] .domain-suggestion.clone {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .domain-suggestion.clone:hover {
    background: rgba(99, 102, 241, 0.08) !important;
}

.domain-suggestion .domain {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.domain-suggestion .extension {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #6366f1 !important;
}

[data-bs-theme="dark"] .domain-suggestion .domain,
.dark .domain-suggestion .domain {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .domain-suggestion .extension,
.dark .domain-suggestion .extension {
    color: #818cf8 !important;
}

.domain-suggestion .actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.domain-suggestion .actions .price {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

[data-bs-theme="dark"] .domain-suggestion .actions .price,
.dark .domain-suggestion .actions .price {
    color: #ffffff !important;
}

.domain-suggestion .actions .btn-add-to-cart {
    border-radius: 9999px !important;
    padding: 8px 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.2s ease !important;
}

.domain-suggestion .actions .btn-add-to-cart:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

.suggested-domains .panel-footer,
.suggested-domains .card-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 18px 24px !important;
}

[data-bs-theme="dark"] .suggested-domains .panel-footer,
[data-bs-theme="dark"] .suggested-domains .card-footer,
.dark .suggested-domains .panel-footer,
.dark .suggested-domains .card-footer {
    background: #1e293b !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#moreSuggestions {
    font-weight: 700 !important;
    color: #4f46e5 !important;
    text-decoration: none !important;
    display: inline-block !important;
    padding: 4px 12px !important;
}

#moreSuggestions:hover {
    color: #3730a3 !important;
    text-decoration: underline !important;
}


/* ========================================================================
   CREATIVE HOSTING & TRANSFER PROMO CARDS
   ======================================================================== */

.tt-domain-promos-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 24px !important;
    margin-bottom: 28px !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    .tt-domain-promos-grid {
        grid-template-columns: 1fr !important;
    }
}

.tt-compact-promo-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.tt-compact-promo-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px -4px rgba(15, 23, 42, 0.1) !important;
    border-color: #cbd5e1 !important;
}

.tt-promo-hosting {
    border-left: 4px solid #6366f1 !important;
}

.tt-promo-transfer {
    border-left: 4px solid #06b6d4 !important;
}
.tt-promo-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.tt-promo-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.tt-icon-hosting {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.tt-icon-transfer {
    background: #ecfeff !important;
    color: #0891b2 !important;
}

.tt-promo-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 2px !important;
    letter-spacing: -0.2px !important;
}

.tt-promo-desc {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.tt-promo-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 16px !important;
    border-radius: 9999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.tt-btn-hosting {
    background: #6366f1 !important;
    color: #ffffff !important;
    border: 1px solid #6366f1 !important;
}

.tt-btn-hosting:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
}

.tt-btn-transfer {
    background: #0891b2 !important;
    color: #ffffff !important;
    border: 1px solid #0891b2 !important;
}

.tt-btn-transfer:hover {
    background: #0e7490 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(8, 145, 178, 0.25) !important;
}

/* Dark Mode */
[data-bs-theme="dark"] .tt-compact-promo-card,
.dark .tt-compact-promo-card {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .tt-promo-title,
.dark .tt-promo-title {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-promo-desc,
.dark .tt-promo-desc {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .tt-icon-hosting,
.dark .tt-icon-hosting {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .tt-icon-transfer,
.dark .tt-icon-transfer {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
}
/* Prevent stuck bootstrap tooltips from lingering on page */
body > .tooltip:not(.show),
.tooltip.fade:not(.show) {
    display: none !important;
}

/* ========================================================================
   KNOWLEDGEBASE MODERNIZATION
   ======================================================================== */

.tt-kb-search-container {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(139, 92, 246, 0.02) 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 28px !important;
}

.tt-kb-search-header .tt-kb-search-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 6px !important;
}

.tt-kb-search-header .tt-kb-search-subtitle {
    color: #64748b !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.tt-kb-search {
    display: flex !important;
    align-items: center !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    gap: 12px !important;
}

.tt-kb-search .tt-search-field {
    position: relative !important;
    flex: 1 !important;
}

.tt-kb-search-icon,
.tt-kb-search .tt-search-field > i {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6366f1 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    font-size: 16px !important;
}

.tt-kb-search #inputKnowledgebaseSearch,
.tt-kb-search #inputDownloadsSearch,
.tt-kb-search input.form-control {
    height: 52px !important;
    padding-left: 52px !important;
    padding-right: 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 14px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.tt-kb-search #inputKnowledgebaseSearch:focus,
.tt-kb-search #inputDownloadsSearch:focus,
.tt-kb-search input.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

.tt-kb-search #btnKnowledgebaseSearch,
.tt-kb-search #btnDownloadsSearch,
.tt-kb-search button[type="submit"] {
    height: 52px !important;
    padding: 0 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
    transition: all 0.2s ease !important;
}

.tt-kb-search #btnKnowledgebaseSearch:hover,
.tt-kb-search #btnDownloadsSearch:hover,
.tt-kb-search button[type="submit"]:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35) !important;
    transform: translateY(-1px) !important;
}

.tt-kb-search #btnKnowledgebaseSearch:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
}

/* Knowledgebase Empty State Card */
.tt-kb-empty-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 56px 32px !important;
    text-align: center !important;
    box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 24px !important;
}

.tt-kb-empty-icon-wrap {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%) !important;
    color: #4f46e5 !important;
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.2) !important;
}

.tt-kb-empty-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 8px !important;
}

.tt-kb-empty-desc {
    font-size: 14px !important;
    color: #64748b !important;
    max-width: 480px !important;
    margin: 0 auto 24px !important;
    line-height: 1.6 !important;
}

.tt-kb-empty-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.tt-kb-empty-btn {
    padding: 10px 24px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.tt-kb-empty-btn-secondary {
    padding: 10px 24px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.tt-kb-empty-btn-secondary:hover {
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
}

/* Category cards when articles exist */
.card.kb-category {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
}

.card.kb-category:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.12) !important;
    border-color: #818cf8 !important;
}

/* ========================================================================
   2. BUTTONS & UI COMPONENTS
   ======================================================================== */

.btn-primary {
    background: var(--whmcs-primary-gradient) !important;
    border: none !important;
    border-radius: var(--whmcs-radius-sm) !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 12px var(--whmcs-primary-glow) !important;
    transition: var(--whmcs-transition) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px var(--whmcs-primary-glow) !important;
}

.btn-success {
    background: var(--whmcs-success-gradient) !important;
    border: none !important;
    border-radius: var(--whmcs-radius-sm) !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
    transition: var(--whmcs-transition) !important;
}

.btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35) !important;
}

/* Cards & Panels */
.card, .panel {
    border-radius: var(--whmcs-radius) !important;
    border: 1px solid var(--whmcs-border) !important;
    box-shadow: var(--whmcs-shadow) !important;
    overflow: hidden !important;
}

/* Inputs & Form Controls */
.form-control {
    border-radius: var(--whmcs-radius-sm) !important;
    border: 1px solid var(--whmcs-border) !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
    transition: var(--whmcs-transition) !important;
}

.form-control:focus {
    border-color: var(--whmcs-primary) !important;
    box-shadow: 0 0 0 4px var(--whmcs-primary-glow) !important;
}

/* ========================================================================
   3. HEADER & NAVBAR MODERNIZATION & RESPONSIVENESS
   ======================================================================== */

.tt-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--whmcs-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    padding: 0.6rem 0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tt-header .navbar {
    padding: 0 !important;
    background: transparent !important;
}

.tt-header .navbar > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    position: relative !important;
}

/* Logo styling */
.tt-header .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.tt-header .logo-img {
    max-height: 44px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    position: static !important;
}

/* Main Navigation Menu (Desktop: >= 992px) */
@media (min-width: 992px) {
    /* Always hide mobile backdrop overlay and reset offcanvas on desktop */
    .tt-body-wrapper .overlay,
    .overlay,
    div.overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -9999 !important;
    }

    body,
    html,
    .tt-body-wrapper {
        overflow: visible !important;
        overflow-x: hidden !important;
    }

    /* Hide offcanvas hamburger button & mobile drawer elements on desktop (>=992px) */
    .tt-toolbar-wrap button[data-toggle="offcanvas"],
    .tt-toolbar-wrap li:has(button[data-toggle="offcanvas"]),
    .tt-toolbar-wrap li.d-lg-none,
    #mainNavbar > :not(ul#nav),
    .nx-mobile-drawer-only {
        display: none !important;
    }

    .main-navbar-wrapper.offcanvas-collapse,
    .main-navbar-wrapper {
        display: flex !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        position: static !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: auto !important;
        overflow: visible !important;
    }

    .main-navbar-wrapper #mainNavbar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
    }

    .main-navbar-wrapper ul#nav {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        gap: 2px !important;
    }

    .main-navbar-wrapper ul#nav > li {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    .main-navbar-wrapper ul#nav > li > a {
        font-family: var(--whmcs-font-main) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        padding: 7px 11px !important;
        border-radius: 8px !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
    }

    .main-navbar-wrapper ul#nav > li > a:hover {
        color: var(--whmcs-primary) !important;
        background: rgba(99, 102, 241, 0.08) !important;
    }

    .main-navbar-wrapper ul#nav > li.active > a {
        color: var(--whmcs-primary) !important;
        background: rgba(99, 102, 241, 0.12) !important;
    }

    /* Remove default focus/active outline & border on nav links */
    .main-navbar-wrapper ul#nav > li > a:focus,
    .main-navbar-wrapper ul#nav > li > a:active,
    .main-navbar-wrapper ul#nav > li > a:focus-visible,
    .main-navbar-wrapper ul#nav > li.dropdown.show > a,
    .main-navbar-wrapper ul#nav > li > a.dropdown-toggle:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .main-navbar-wrapper ul#nav > li.dropdown.show > a {
        color: var(--whmcs-primary) !important;
        background: rgba(99, 102, 241, 0.1) !important;
    }

    /* Never show the redundant More dropdown on desktop */
    .main-navbar-wrapper ul#nav > li.collapsable-dropdown {
        display: none !important;
    }

    /* Desktop Dropdown Menu (Positioned directly under parent item) */
    .tt-main-header #Primary_Navbar-Store,
    .main-navbar-wrapper ul#nav > li.dropdown {
        position: relative !important;
    }

    .tt-main-header #Primary_Navbar-Store .dropdown-menu,
    .main-navbar-wrapper ul#nav > li.dropdown > .dropdown-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: auto !important;
        min-width: 320px !important;
        width: 330px !important;
        max-width: 360px !important;
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14), 0 8px 18px -4px rgba(0, 0, 0, 0.04) !important;
        backdrop-filter: blur(12px) !important;
        z-index: 1050 !important;
        transform: none !important;
        display: none;
        flex-direction: column !important;
    }

    [data-bs-theme="dark"] .tt-main-header #Primary_Navbar-Store .dropdown-menu,
    [data-bs-theme="dark"] .main-navbar-wrapper ul#nav > li.dropdown > .dropdown-menu,
    .dark .main-navbar-wrapper ul#nav > li.dropdown > .dropdown-menu {
        background: #0f172a !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.5) !important;
    }

    .tt-main-header #Primary_Navbar-Store .dropdown-menu.show,
    .main-navbar-wrapper ul#nav > li.dropdown > .dropdown-menu.show {
        display: flex !important;
        animation: navDropdownFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .tt-main-header #Primary_Navbar-Store .dropdown-menu li,
    .main-navbar-wrapper ul#nav .dropdown-menu li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 1px 0 !important;
        display: block !important;
    }

    .tt-main-header #Primary_Navbar-Store .dropdown-menu li a,
    .main-navbar-wrapper ul#nav .dropdown-menu li a,
    .main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link {
        font-family: var(--whmcs-font-main) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        background: transparent !important;
        border: none !important;
        position: relative !important;
        margin-left: 0 !important;
    }

    .tt-main-header #Primary_Navbar-Store .dropdown-menu li a:hover,
    .main-navbar-wrapper ul#nav .dropdown-menu li a:hover,
    .main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link:hover {
        background: #f1f5f9 !important;
        color: #4f46e5 !important;
        transform: translateX(4px) !important;
        margin-left: 0 !important;
    }

    [data-bs-theme="dark"] .main-navbar-wrapper ul#nav .dropdown-menu li a,
    .dark .main-navbar-wrapper ul#nav .dropdown-menu li a {
        color: #cbd5e1 !important;
    }
    [data-bs-theme="dark"] .main-navbar-wrapper ul#nav .dropdown-menu li a:hover,
    .dark .main-navbar-wrapper ul#nav .dropdown-menu li a:hover {
        background: #1e293b !important;
        color: #818cf8 !important;
    }

    /* Attractive Icon Badge Boxes for Dropdown Items */
    .main-navbar-wrapper ul#nav .dropdown-menu li a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link:before {
        font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 13px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 12px !important;
        position: static !important;
        transition: transform 0.2s ease, background 0.2s ease !important;
        content: "\f009" !important;
        background: #eef2ff !important;
        color: #6366f1 !important;
    }

    .main-navbar-wrapper ul#nav .dropdown-menu li a:hover:before,
    .main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link:hover:before {
        transform: scale(1.08) !important;
    }

    /* 1. Browse All */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Browse"] a:before {
        content: "\f009" !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    /* 2. Business Cloud Hosting */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Cloud"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Business"] a:before {
        content: "\f0c2" !important;
        background: #f0f9ff !important;
        color: #0284c7 !important;
    }

    /* 3. Next Gen Hosting */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Next_Gen"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Next Gen"] a:before {
        content: "\f135" !important;
        background: #ecfdf5 !important;
        color: #059669 !important;
    }

    /* 4. Economy Shared Hosting */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Economy"] a:before {
        content: "\f233" !important;
        background: #fffbeb !important;
        color: #d97706 !important;
    }

    /* 5. NextGen Reseller Hosting */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Reseller"] a:before {
        content: "\f542" !important;
        background: #faf5ff !important;
        color: #7c3aed !important;
    }

    /* 6. Shared Hosting Test */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Shared"] a:before {
        content: "\f1c0" !important;
        background: #ecfeff !important;
        color: #0891b2 !important;
    }

    /* 7. Google Workspace */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Workspace"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Google"] a:before {
        content: "\f1a0" !important;
        font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        background: #fef2f2 !important;
        color: #ea4335 !important;
    }

    /* 8. Register a New Domain */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Register"] a:before {
        content: "\f0ac" !important;
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }

    /* 9. Transfer Domains to Us */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Transfer"] a:before {
        content: "\f0ec" !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    /* 10. My Domains */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname="My Domains"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="My_Domains"] a:before {
        content: "\f0ac" !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    /* 11. Renew Domains */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Renew"] a:before {
        content: "\f021" !important;
        background: #ecfdf5 !important;
        color: #059669 !important;
    }

    /* 12. Domain Search */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Domain Search"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Domain_Search"] a:before {
        content: "\f002" !important;
        background: #f5f3ff !important;
        color: #7c3aed !important;
    }

    /* 13. My Services */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname="My Services"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="My_Services"] a:before {
        content: "\f233" !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    /* 14. Order New Services */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Order"] a:before {
        content: "\f07a" !important;
        background: #fff7ed !important;
        color: #ea580c !important;
    }

    /* 15. View Available Addons */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Addon"] a:before {
        content: "\f1b2" !important;
        background: #ecfeff !important;
        color: #0891b2 !important;
    }

    /* 16. Invoices / My Invoices */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Invoice"] a:before {
        content: "\f571" !important;
        background: #fef2f2 !important;
        color: #dc2626 !important;
    }

    /* 17. Quotes / My Quotes */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Quote"] a:before {
        content: "\f56e" !important;
        background: #faf5ff !important;
        color: #7c3aed !important;
    }

    /* 18. Mass Payment */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Mass"] a:before {
        content: "\f09d" !important;
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }

    /* 19. Manage Credit Card */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Credit Card"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Credit_Card"] a:before {
        content: "\f283" !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    /* 20. Add Funds */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Funds"] a:before {
        content: "\f555" !important;
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }

    /* 21. Tickets / Support Tickets */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Ticket"] a:before {
        content: "\f3ff" !important;
        background: #f0f9ff !important;
        color: #0284c7 !important;
    }

    /* 22. Announcements */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname="Announcements"] a:before {
        content: "\f0a1" !important;
        background: #fff7ed !important;
        color: #ea580c !important;
    }

    /* 23. Knowledgebase */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname="Knowledgebase"] a:before {
        content: "\f02d" !important;
        background: #ecfdf5 !important;
        color: #059669 !important;
    }

    /* 24. Downloads */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname="Downloads"] a:before {
        content: "\f019" !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    /* 25. Network Status */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Network"] a:before {
        content: "\f012" !important;
        background: #ecfeff !important;
        color: #0891b2 !important;
    }

    /* 26. Open Ticket */
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Open Ticket"] a:before,
    .main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname*="Open_Ticket"] a:before {
        content: "\f0e0" !important;
        background: #faf5ff !important;
        color: #7c3aed !important;
    }

    /* Ensure icon inside badge is properly rendered and styled */
    .main-navbar-wrapper ul#nav .dropdown-menu li a .nx-nav-icon-badge i,
    .offcanvas-collapse ul#nav > li > a .nx-nav-icon-badge i,
    .offcanvas-collapse .dropdown-menu li a .nx-nav-icon-badge i,
    .dropdown-menu .dropdown-link .nx-nav-icon-badge i,
    .nx-nav-icon-badge i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 13.5px !important;
        line-height: 1 !important;
    }

    /* Subtle hover chevron arrow on right side */
    .main-navbar-wrapper ul#nav .dropdown-menu li a:after,
    .main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link:after {
        content: "\f054" !important;
        font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 9px !important;
        color: #cbd5e1 !important;
        opacity: 0 !important;
        transform: translateX(-4px) !important;
        transition: all 0.2s ease !important;
        margin-left: auto !important;
    }

    .main-navbar-wrapper ul#nav .dropdown-menu li a:hover:after,
    .main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link:hover:after {
        opacity: 1 !important;
        transform: translateX(0) !important;
        color: #4f46e5 !important;
    }

}

/* ========================================================================
   MODERN DROPDOWN DIVIDERS (PURE ELEGANT RULE - GLOBAL)
   ======================================================================== */

.dropdown-menu .dropdown-divider-pure,
.dropdown-menu li.dropdown-divider-pure,
.main-navbar-wrapper ul#nav .dropdown-menu li.dropdown-divider-pure,
.offcanvas-collapse .dropdown-menu li.dropdown-divider-pure,
.tt-main-header .dropdown-menu li.dropdown-divider-pure,
.dropdown-menu .dropdown-divider,
.dropdown-menu li.dropdown-divider {
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: 10px 14px !important;
    width: calc(100% - 28px) !important;
    min-width: calc(100% - 28px) !important;
    background: linear-gradient(90deg, transparent 0%, #cbd5e1 18%, #cbd5e1 82%, transparent 100%) !important;
    border: none !important;
    display: block !important;
    clear: both !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-divider-pure,
[data-bs-theme="dark"] .dropdown-menu li.dropdown-divider-pure,
[data-bs-theme="dark"] .main-navbar-wrapper ul#nav .dropdown-menu li.dropdown-divider-pure,
[data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li.dropdown-divider-pure,
[data-bs-theme="dark"] .tt-main-header .dropdown-menu li.dropdown-divider-pure,
[data-bs-theme="dark"] .dropdown-menu .dropdown-divider,
[data-bs-theme="dark"] .dropdown-menu li.dropdown-divider,
.dark .dropdown-menu .dropdown-divider-pure,
.dark .dropdown-menu li.dropdown-divider-pure,
.dark .main-navbar-wrapper ul#nav .dropdown-menu li.dropdown-divider-pure,
.dark .offcanvas-collapse .dropdown-menu li.dropdown-divider-pure,
.dark .tt-main-header .dropdown-menu li.dropdown-divider-pure,
.dark .dropdown-menu .dropdown-divider,
.dark .dropdown-menu li.dropdown-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.16) 82%, transparent 100%) !important;
    border: none !important;
}

.tt-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f054" !important;
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    color: var(--whmcs-muted) !important;
}

/* ========================================================================
   MODERN HEADER ACTION BUTTONS & TOOLBAR (PILLS & CIRCULAR ICONS)
   ======================================================================== */

.tt-toolbar-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 1. Icon Buttons: Search, Cart, Offcanvas Hamburger (Light Mode Default) */
.header-action-icon,
.tt-header .header-action-icon,
a.header-action-icon,
button.header-action-icon,
.tt-toolbar-wrap .header-action-icon,
.tt-toolbar-wrap .cart-btn,
.tt-toolbar-wrap #dropdownMenuButton,
.tt-toolbar-wrap button[data-toggle="offcanvas"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
}

.header-action-icon *,
.tt-header .header-action-icon *,
.tt-toolbar-wrap .header-action-icon *,
.tt-toolbar-wrap #dropdownMenuButton *,
.tt-toolbar-wrap .cart-btn *,
.tt-toolbar-wrap button[data-toggle="offcanvas"] * {
    color: #475569 !important;
    fill: #475569 !important;
}

.header-action-icon:hover,
.tt-header .header-action-icon:hover,
.tt-toolbar-wrap .header-action-icon:hover,
.tt-toolbar-wrap #dropdownMenuButton:hover,
.tt-toolbar-wrap .cart-btn:hover,
.tt-toolbar-wrap button[data-toggle="offcanvas"]:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    transform: translateY(-1px) !important;
}

.header-action-icon:hover *,
.tt-header .header-action-icon:hover *,
.tt-toolbar-wrap .header-action-icon:hover *,
.tt-toolbar-wrap #dropdownMenuButton:hover *,
.tt-toolbar-wrap .cart-btn:hover *,
.tt-toolbar-wrap button[data-toggle="offcanvas"]:hover * {
    color: #1e293b !important;
}

/* Ensure Cart Button has overflow: visible globally so cart badge is never clipped */
.tt-toolbar-wrap .cart-btn,
a.cart-btn,
.cart-btn,
.header-action-icon.cart-btn,
.tt-header .header-action-icon.cart-btn {
    position: relative !important;
    overflow: visible !important;
}

/* Floating Cart Badge */
.tt-toolbar-wrap .header-cart-badge,
.header-cart-badge,
.cart-btn .header-cart-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 19px !important;
    height: 19px !important;
    line-height: 19px !important;
    padding: 0 5px !important;
    border-radius: 9999px !important;
    border: 2px solid #ffffff !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}

/* 2. Register Pill Button (Vibrant Indigo Gradient Pill) */
.tt-toolbar-wrap a[href*="register.php"],
.header-action-register,
.tt-header .header-action-register,
a.header-action-register {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 38px !important;
    padding: 0 20px !important;
    border-radius: 9999px !important;
    background: #4f46e5 !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: var(--whmcs-font-main) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}

.tt-toolbar-wrap a[href*="register.php"] *,
.header-action-register *,
.header-action-register i,
.header-action-register span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.tt-toolbar-wrap a[href*="register.php"]:hover,
.header-action-register:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* 3. Login Pill Button (Light Mode: Clean White with Subtle Border) */
.tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item),
.header-action-login,
.tt-header .header-action-login,
a.header-action-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-family: var(--whmcs-font-main) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item) *,
.header-action-login *,
.header-action-login i,
.header-action-login span {
    color: #1e293b !important;
    font-weight: 700 !important;
}

.tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item):hover,
.header-action-login:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #4f46e5 !important;
    transform: translateY(-1px) !important;
}

.tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item):hover *,
.header-action-login:hover * {
    color: #4f46e5 !important;
}

/* --- Dark Mode Toolbar Adjustments --- */
[data-bs-theme="dark"] .header-action-icon,
.dark .header-action-icon,
[data-theme="dark"] .header-action-icon,
[data-bs-theme="dark"] .tt-header .header-action-icon,
.dark .tt-header .header-action-icon,
[data-theme="dark"] .tt-header .header-action-icon,
[data-bs-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton,
.dark .tt-toolbar-wrap #dropdownMenuButton,
[data-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton,
[data-bs-theme="dark"] #dropdownMenuButton,
.dark #dropdownMenuButton,
[data-theme="dark"] #dropdownMenuButton {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .header-action-icon *,
.dark .header-action-icon *,
[data-theme="dark"] .header-action-icon *,
[data-bs-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton *,
.dark .tt-toolbar-wrap #dropdownMenuButton *,
[data-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton *,
[data-bs-theme="dark"] #dropdownMenuButton *,
.dark #dropdownMenuButton *,
[data-theme="dark"] #dropdownMenuButton * {
    color: #f8fafc !important;
    fill: #f8fafc !important;
}

[data-bs-theme="dark"] .header-action-icon:hover,
.dark .header-action-icon:hover,
[data-theme="dark"] .header-action-icon:hover,
[data-bs-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton:hover,
.dark .tt-toolbar-wrap #dropdownMenuButton:hover,
[data-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton:hover,
[data-bs-theme="dark"] #dropdownMenuButton:hover,
.dark #dropdownMenuButton:hover,
[data-theme="dark"] #dropdownMenuButton:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .header-action-icon:hover *,
.dark .header-action-icon:hover *,
[data-theme="dark"] .header-action-icon:hover *,
[data-bs-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton:hover *,
.dark .tt-toolbar-wrap #dropdownMenuButton:hover *,
[data-theme="dark"] .tt-toolbar-wrap #dropdownMenuButton:hover *,
[data-bs-theme="dark"] #dropdownMenuButton:hover *,
.dark #dropdownMenuButton:hover *,
[data-theme="dark"] #dropdownMenuButton:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

[data-bs-theme="dark"] .header-action-login,
.dark .header-action-login,
[data-bs-theme="dark"] .tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item),
.dark .tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .header-action-login *,
.dark .header-action-login *,
[data-bs-theme="dark"] .tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item) *,
.dark .tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item) * {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .header-action-login:hover,
.dark .header-action-login:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

[data-bs-theme="dark"] .header-cart-badge,
.dark .header-cart-badge {
    border-color: #0f172a !important;
}


/* ========================================================================
   ROBUST OFFCANVAS MOBILE DRAWER & FULL-SCREEN OVERLAY ENGINE
   ======================================================================== */
@media (max-width: 991.98px) {
    /* 1. Opaque solid background on mobile so scrolled text never bleeds through header */
    header.header,
    .tt-header,
    header.header.affix,
    .tt-header.affix {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    [data-bs-theme="dark"] header.header,
    .dark header.header,
    [data-bs-theme="dark"] .tt-header,
    .dark .tt-header,
    [data-bs-theme="dark"] header.header.affix,
    .dark header.header.affix,
    [data-bs-theme="dark"] .tt-header.affix,
    .dark .tt-header.affix {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        background: #0f172a !important;
        background-color: #0f172a !important;
        border-bottom: 1px solid #1e293b !important;
    }

    /* 2. Elevate header above everything when offcanvas is active */
    body.active header.header,
    body.active .tt-header,
    body.offcanvas-open header.header,
    body.offcanvas-open .tt-header,
    .tt-body-wrapper.active header.header,
    .tt-body-wrapper.active .tt-header {
        z-index: 999999 !important;
    }

    /* 3. Full-Screen Backdrop Dimming Overlay */
    .tt-body-wrapper .overlay,
    .overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100% !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 999990 !important;
        cursor: pointer !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Full-Height Slide-Out Drawer (100vh from top edge of screen) */
    .offcanvas-collapse {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 315px !important;
        max-width: 88vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1000000 !important;
        padding: 22px 18px 30px 18px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background-color: #ffffff !important;
        box-shadow: 16px 0 48px rgba(0, 0, 0, 0.15) !important;
        transform: translateX(-110%) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        visibility: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .offcanvas-collapse::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .offcanvas-collapse.open {
        transform: translateX(0) !important;
        visibility: visible !important;
        z-index: 1000000 !important;
    }

    /* Dark Theme Drawer */
    [data-bs-theme="dark"] .offcanvas-collapse,
    .dark .offcanvas-collapse {
        background-color: #0b1120 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 16px 0 50px rgba(0, 0, 0, 0.8) !important;
    }

    .offcanvas-collapse #mainNavbar {
        width: 100% !important;
    }

    /* Attractive Integrated Mobile Drawer Search Bar */
    .drawer-search-form {
        margin-bottom: 16px !important;
    }

    .drawer-search-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 40px !important;
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-sizing: border-box !important;
    }

    .drawer-search-wrapper:focus-within {
        background: #ffffff !important;
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    }

    [data-bs-theme="dark"] .drawer-search-wrapper,
    .dark .drawer-search-wrapper {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    [data-bs-theme="dark"] .drawer-search-wrapper:focus-within,
    .dark .drawer-search-wrapper:focus-within {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: #818cf8 !important;
        box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25) !important;
    }

    .drawer-search-icon {
        position: absolute !important;
        left: 12px !important;
        font-size: 13px !important;
        color: #94a3b8 !important;
        pointer-events: none !important;
        transition: color 0.2s ease !important;
    }

    .drawer-search-wrapper:focus-within .drawer-search-icon {
        color: #6366f1 !important;
    }

    [data-bs-theme="dark"] .drawer-search-wrapper:focus-within .drawer-search-icon,
    .dark .drawer-search-wrapper:focus-within .drawer-search-icon {
        color: #818cf8 !important;
    }

    .drawer-search-input {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        padding: 0 12px 0 34px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        box-shadow: none !important;
        line-height: normal !important;
        box-sizing: border-box !important;
    }

    [data-bs-theme="dark"] .drawer-search-input,
    .dark .drawer-search-input {
        color: #f1f5f9 !important;
    }

    .drawer-search-input::placeholder {
        color: #94a3b8 !important;
        font-weight: 400 !important;
    }

    /* Clean, Elegant Mobile Drawer Navigation List - Guaranteed 100% Full Width */
    .offcanvas-collapse ul#nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        gap: 3px !important;
        box-sizing: border-box !important;
    }

    .offcanvas-collapse ul#nav > li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .offcanvas-collapse ul#nav > li > a {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        color: #334155 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transition: all 0.15s ease !important;
        text-decoration: none !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a,
    .dark .offcanvas-collapse ul#nav > li > a {
        color: #e2e8f0 !important;
    }

    .offcanvas-collapse ul#nav > li > a:hover,
    .offcanvas-collapse ul#nav > li.active > a,
    .offcanvas-collapse ul#nav > li.is-open > a {
        background: #f1f5f9 !important;
        color: #4f46e5 !important;
        width: 100% !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a:hover,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.active > a,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.is-open > a,
    .dark .offcanvas-collapse ul#nav > li > a:hover,
    .dark .offcanvas-collapse ul#nav > li.active > a,
    .dark .offcanvas-collapse ul#nav > li.is-open > a {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #818cf8 !important;
        width: 100% !important;
    }

    /* Clean, Attractive Top-Level Navigation Items in Mobile Drawer */
    .offcanvas-collapse ul#nav > li > a {
        display: flex !important;
        align-items: center !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
        font-family: var(--whmcs-font-main) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        margin-bottom: 3px !important;
    }

    .offcanvas-collapse ul#nav > li > a:hover,
    .offcanvas-collapse ul#nav > li.active > a,
    .offcanvas-collapse ul#nav > li.is-open > a {
        background: #f1f5f9 !important;
        color: #4f46e5 !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a,
    .dark .offcanvas-collapse ul#nav > li > a {
        color: #e2e8f0 !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a:hover,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.active > a,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.is-open > a,
    .dark .offcanvas-collapse ul#nav > li > a:hover,
    .dark .offcanvas-collapse ul#nav > li.active > a,
    .dark .offcanvas-collapse ul#nav > li.is-open > a {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #818cf8 !important;
    }

    /* Modern 28px Icon Badges for Top-Level Drawer Items */
    .offcanvas-collapse ul#nav > li > a::before {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 8px !important;
        font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 13px !important;
        color: #64748b !important;
        background: #f1f5f9 !important;
        margin-right: 12px !important;
        border: none !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    .offcanvas-collapse ul#nav > li > a:hover::before,
    .offcanvas-collapse ul#nav > li.active > a::before,
    .offcanvas-collapse ul#nav > li.is-open > a::before {
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a::before,
    .dark .offcanvas-collapse ul#nav > li > a::before {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #94a3b8 !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a:hover::before,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.active > a::before,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.is-open > a::before,
    .dark .offcanvas-collapse ul#nav > li > a:hover::before,
    .dark .offcanvas-collapse ul#nav > li.active > a::before,
    .dark .offcanvas-collapse ul#nav > li.is-open > a::before {
        background: rgba(99, 102, 241, 0.2) !important;
        color: #a5b4fc !important;
    }

    /* Top-level menu icon glyphs */
    .offcanvas-collapse ul#nav > li[menuItemName="Home"] > a::before {
        content: "\f015" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Store"] > a::before {
        content: "\f233" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Announcements"] > a::before {
        content: "\f0a1" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Knowledgebase"] > a::before {
        content: "\f02d" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Network Status"] > a::before {
        content: "\f012" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Affiliates"] > a::before {
        content: "\f0d6" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Contact Us"] > a::before {
        content: "\f095" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Services"] > a::before {
        content: "\f233" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Domains"] > a::before {
        content: "\f0ac" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Billing"] > a::before {
        content: "\f09d" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Support"] > a::before {
        content: "\f075" !important;
    }
    .offcanvas-collapse ul#nav > li[menuItemName="Open Ticket"] > a::before {
        content: "\f067" !important;
    }

    /* Never show the redundant empty "More" collapsable dropdown in mobile drawer */
    .collapsable-dropdown,
    li.collapsable-dropdown,
    .offcanvas-collapse ul#nav > li.collapsable-dropdown,
    .offcanvas-collapse ul#nav > li:has(.dropdown-menu:empty) {
        display: none !important;
    }

    /* Dropdown Toggle Caret - Aligned to Far Right Edge */
    .offcanvas-collapse ul#nav > li.dropdown > a::after {
        display: inline-block !important;
        content: "" !important;
        margin-left: auto !important;
        vertical-align: middle !important;
        border-top: 5px solid currentColor !important;
        border-right: 4px solid transparent !important;
        border-bottom: 0 !important;
        border-left: 4px solid transparent !important;
        opacity: 0.45 !important;
        transition: transform 0.25s ease, opacity 0.2s ease !important;
    }

    .offcanvas-collapse ul#nav > li.dropdown.is-open > a::after,
    .offcanvas-collapse ul#nav > li.dropdown.open > a::after,
    .offcanvas-collapse ul#nav > li.dropdown.show > a::after {
        transform: rotate(180deg) !important;
        opacity: 0.9 !important;
    }

    /* Sub-menu inside drawer: Attractive Recessed Card Container */
    .offcanvas-collapse .dropdown-menu {
        display: none;
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 6px !important;
        margin: 4px 0 10px 0 !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        transform: none !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu,
    .dark .offcanvas-collapse .dropdown-menu {
        background: rgba(15, 23, 42, 0.6) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .offcanvas-collapse .dropdown-menu li {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .offcanvas-collapse #Primary_Navbar-Store .dropdown-menu li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .offcanvas-collapse .dropdown-menu li a,
    .offcanvas-collapse .dropdown-menu .dropdown-link {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        font-family: var(--whmcs-font-main) !important;
        font-size: 13px !important;
        font-weight: 550 !important;
        color: #334155 !important;
        background: transparent !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
        position: relative !important;
        left: auto !important;
        margin-left: 0 !important;
    }

    .offcanvas-collapse .dropdown-menu li a:hover,
    .offcanvas-collapse .dropdown-menu .dropdown-link:hover {
        background: #ffffff !important;
        color: #4f46e5 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a,
    .dark .offcanvas-collapse .dropdown-menu li a {
        color: #cbd5e1 !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a:hover,
    .dark .offcanvas-collapse .dropdown-menu li a:hover {
        background: #1e293b !important;
        color: #818cf8 !important;
    }

    /* Submenu Icon Badges (Pastel, Crisp, Centered) */
    .offcanvas-collapse .dropdown-menu li a:before,
    .offcanvas-collapse .dropdown-menu .dropdown-link:before,
    .tt-main-header #Primary_Navbar-Store .dropdown-menu li a:before {
        font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 12px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 10px !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        opacity: 1 !important;
        content: "\f009" !important;
        background: #eef2ff !important;
        color: #6366f1 !important;
        flex-shrink: 0 !important;
    }

    /* Specific Item Badges */
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Browse"] a:before {
        content: "\f009" !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Cloud"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Business"] a:before {
        content: "\f0c2" !important;
        background: #f0f9ff !important;
        color: #0284c7 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Next_Gen"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Next Gen"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Next"] a:before {
        content: "\f135" !important;
        background: #ecfdf5 !important;
        color: #059669 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Economy"] a:before {
        content: "\f233" !important;
        background: #fffbeb !important;
        color: #d97706 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Reseller"] a:before {
        content: "\f542" !important;
        background: #faf5ff !important;
        color: #7c3aed !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Shared"] a:before {
        content: "\f1c0" !important;
        background: #ecfeff !important;
        color: #0891b2 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Workspace"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Google"] a:before {
        content: "\f1a0" !important;
        font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
        font-weight: 400 !important;
        font-size: 13px !important;
        background: #fef2f2 !important;
        color: #ea4335 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Register"] a:before {
        content: "\f0ac" !important;
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Transfer"] a:before {
        content: "\f0ec" !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname="My Domains"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="My_Domains"] a:before {
        content: "\f0ac" !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Renew"] a:before {
        content: "\f021" !important;
        background: #ecfdf5 !important;
        color: #059669 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Domain Search"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Domain_Search"] a:before {
        content: "\f002" !important;
        background: #f5f3ff !important;
        color: #7c3aed !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname="My Services"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="My_Services"] a:before {
        content: "\f233" !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Order"] a:before {
        content: "\f07a" !important;
        background: #fff7ed !important;
        color: #ea580c !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Addon"] a:before {
        content: "\f1b2" !important;
        background: #ecfeff !important;
        color: #0891b2 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Invoice"] a:before {
        content: "\f571" !important;
        background: #fef2f2 !important;
        color: #dc2626 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Quote"] a:before {
        content: "\f56e" !important;
        background: #faf5ff !important;
        color: #7c3aed !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Mass"] a:before {
        content: "\f09d" !important;
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Credit Card"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Credit_Card"] a:before {
        content: "\f283" !important;
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Funds"] a:before {
        content: "\f555" !important;
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Ticket"] a:before {
        content: "\f3ff" !important;
        background: #f0f9ff !important;
        color: #0284c7 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname="Announcements"] a:before {
        content: "\f0a1" !important;
        background: #fff7ed !important;
        color: #ea580c !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname="Knowledgebase"] a:before {
        content: "\f02d" !important;
        background: #ecfdf5 !important;
        color: #059669 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname="Downloads"] a:before {
        content: "\f019" !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Network"] a:before {
        content: "\f012" !important;
        background: #ecfeff !important;
        color: #0891b2 !important;
    }

    .offcanvas-collapse .dropdown-menu li[menuitemname*="Open Ticket"] a:before,
    .offcanvas-collapse .dropdown-menu li[menuitemname*="Open_Ticket"] a:before {
        content: "\f0e0" !important;
        background: #faf5ff !important;
        color: #7c3aed !important;
    }

    /* IMMUNIZATION AGAINST DOUBLE ICONS IN MOBILE OFFCANVAS DRAWER */
    .offcanvas-collapse ul#nav > li > a i:not(.nx-nav-icon-badge i),
    .offcanvas-collapse .dropdown-menu li a i:not(.nx-nav-icon-badge i) {
        display: none !important;
    }

    /* Subtle right chevron for drawer submenu items */
    .offcanvas-collapse .dropdown-menu li a:after,
    .offcanvas-collapse .dropdown-menu .dropdown-link:after {
        content: "\f054" !important;
        font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 9px !important;
        color: #cbd5e1 !important;
        opacity: 0.6 !important;
        margin-left: auto !important;
    }

    /* Submenu divider line */
    .offcanvas-collapse .dropdown-menu li.dropdown-divider,
    .offcanvas-collapse .dropdown-menu .dropdown-divider {
        height: 1px !important;
        min-height: 1px !important;
        margin: 6px 8px !important;
        background: #cbd5e1 !important;
        border-top: 1px solid #cbd5e1 !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        display: block !important;
        width: calc(100% - 16px) !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li.dropdown-divider,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu .dropdown-divider,
    .dark .offcanvas-collapse .dropdown-menu li.dropdown-divider,
    .dark .offcanvas-collapse .dropdown-menu .dropdown-divider {
        background: rgba(255, 255, 255, 0.12) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
}

/* ========================================================================
   RESPONSIVE TOOLBAR & MOBILE CONTROLS (< 992px, < 768px, < 480px)
   ======================================================================== */

/* 1. Medium/Tablet Screens (< 992px): Hide Desktop Search Icon from Toolbar */
@media (max-width: 991.98px) {
    .tt-toolbar-wrap #dropdownMenuButton,
    .tt-toolbar-wrap li:has(#dropdownMenuButton),
    .tt-toolbar-wrap li.dropdown:has(#dropdownMenuButton),
    .tt-toolbar-wrap li.d-none.d-lg-block {
        display: none !important;
    }
}

/* 2. Mobile Screens (< 768px): Hide text in Register & Login, convert to 36px circles */
@media (max-width: 767.98px) {
    .tt-header .navbar > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px !important;
    }

    .tt-toolbar-wrap .toolbar,
    .tt-secondary-list {
        gap: 6px !important;
    }

    .tt-toolbar-wrap .toolbar > li,
    .tt-secondary-list > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide text inside Register and Login pills */
    .header-action-register span,
    .header-action-login span,
    .tt-toolbar-wrap a[href*="register.php"] span,
    .tt-toolbar-wrap a[href*="clientarea.php"]:not(.dropdown-link):not(.dropdown-item) span {
        display: none !important;
    }

    /* Transform all action buttons into compact, perfectly-aligned 36px circular icon buttons */
    .header-action-register,
    .tt-header .header-action-register,
    a.header-action-register,
    .tt-toolbar-wrap a[href*="register.php"],
    .header-action-login,
    .tt-header .header-action-login,
    a.header-action-login,
    .tt-toolbar-wrap a[href*="clientarea.php"]:not(.cart-btn):not(.dropdown-link):not(.dropdown-item),
    .header-action-icon:not(.cart-btn),
    .tt-header .header-action-icon:not(.cart-btn),
    button.header-action-icon,
    .tt-toolbar-wrap button[data-toggle="offcanvas"] {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        gap: 0 !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Cart button MUST have overflow: visible so notification badge is never clipped */
    .tt-toolbar-wrap .cart-btn,
    a.cart-btn,
    .cart-btn,
    .header-action-icon.cart-btn,
    .tt-header .header-action-icon.cart-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        position: relative !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Notification badge positioning & styling (zero clip guarantee) */
    .header-cart-badge,
    .tt-cart-badge,
    .cart-btn .header-cart-badge,
    #cartItemCount,
    .cart-btn #cartItemCount {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 9999px !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ffffff !important;
        padding: 0 4px !important;
        line-height: 1 !important;
        z-index: 50 !important;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5) !important;
        pointer-events: none !important;
    }

    [data-bs-theme="dark"] .header-cart-badge,
    .dark .header-cart-badge,
    [data-bs-theme="dark"] .tt-cart-badge,
    .dark .tt-cart-badge {
        border-color: #0a0f1d !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    }

    .header-action-register i,
    .header-action-login i,
    .tt-toolbar-wrap a[href*="register.php"] i,
    .tt-toolbar-wrap a[href*="clientarea.php"] i {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

    .tt-header .logo-img {
        max-height: 32px !important;
        max-width: 130px !important;
        object-fit: contain !important;
    }

    /* User account menu pill on mobile: compact avatar icon only */
    .nx-user-pill-label,
    .nx-user-pill-caret {
        display: none !important;
    }
    .nx-user-pill-btn {
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .nx-user-pill-avatar {
        margin: 0 !important;
        width: 34px !important;
        height: 34px !important;
    }
}

/* 3. Small Mobile Phones (< 480px): Hide Register icon from header (available inside menu) */
@media (max-width: 479.98px) {
    .tt-toolbar-wrap li:has(a[href*="register.php"]),
    .tt-toolbar-wrap a[href*="register.php"],
    .header-action-register {
        display: none !important;
    }

    .tt-header .logo-img {
        max-height: 28px !important;
        max-width: 115px !important;
    }

    .tt-toolbar-wrap .toolbar,
    .tt-secondary-list {
        gap: 4px !important;
    }
}

/* ========================================================================
   4. TAILWIND MODERNIZATION UTILITIES & SYSTEM OVERRIDES
   ======================================================================== */

/* Global Smooth Rendering */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #f8fafc;
    color: #1e293b;
}

/* Modern Card Glow & Transitions */
.modern-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

/* Sticky Blurred Header */
.tt-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* Clean Form Controls */
.form-control {
    border-radius: 0.75rem !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.15s ease-in-out !important;
}

.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* Sleek Buttons */
.btn {
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:active {
    transform: scale(0.98) !important;
}

/* Reset default focus outlines across all interactive links */
a:focus, button:focus {
    outline: none !important;
}

/* Modern Glowing Hero & HUD Animations */
@keyframes ambientPulse {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.05); }
}

.ambient-pulse {
    animation: ambientPulse 8s ease-in-out infinite;
}

/* Glass Card Highlights */
.glass-hud {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Smooth Interactive Pricing Card Glow */
.pricing-card-featured {
    position: relative;
    border: 2px solid #6366f1 !important;
    box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.2) !important;
}

.pricing-card-featured::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1.5rem;
    padding: 2px;
    background: linear-gradient(135deg, #6366f1, #a855f7, #38bdf8);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Creative Floating Badge Animations */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

@keyframes floatDelay {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(7px); }
}

.animate-float-1 {
    animation: floatSlow 5s ease-in-out infinite;
}

.animate-float-2 {
    animation: floatDelay 6s ease-in-out infinite;
}

.animate-float-3 {
    animation: floatSlow 7s ease-in-out 1s infinite;
}

.animate-float-4 {
    animation: floatDelay 5.5s ease-in-out 0.5s infinite;
}

/* ========================================================================
   COMPREHENSIVE HOMEPAGE DARK THEME ENGINE & Z-INDEX STACKING
   ======================================================================== */

/* --- 1. Robust Z-Index Layer Hierarchy --- */
/*
   Layer Stack:
   - 1055: Modals & Backdrop
   - 1045: Offcanvas Mobile Drawer
   - 1040: Overlay Backdrop
   - 1035: Dropdown Menus
   - 1030: Sticky Navbar (.affix)
   - 1025: Floating Theme Switcher (.tt-color-switch)
   - 10-20: Relative Elevated Cards & Badges
   - 0-1: Ambient Blurs & Standard Content
*/

/* Modals & Backdrops Layer Hierarchy */
.modal-backdrop {
    z-index: 1050 !important;
    background-color: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.modal {
    z-index: 1060 !important;
}

.modal-dialog {
    position: relative !important;
    z-index: 1065 !important;
}

/* Localisation Modal Modern Enterprise Styling */
.modal-localisation .modal-content {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
    color: #f8fafc !important;
    overflow: hidden !important;
}

.modal-localisation .modal-body {
    background: #0f172a !important;
    color: #f8fafc !important;
    padding: 1.75rem !important;
}

.modal-localisation h5,
.modal-localisation .h5 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.modal-localisation .close {
    color: #94a3b8 !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
    font-size: 1.25rem !important;
    transition: all 0.2s ease !important;
}

.modal-localisation .close:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

.modal-localisation .item-selector .item {
    display: block !important;
    padding: 0.65rem 0.75rem !important;
    margin: 4px 0 !important;
    border-radius: 0.625rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: #cbd5e1 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-localisation .item-selector .item:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.modal-localisation .item-selector .item.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
}

.modal-localisation .btn-primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.65rem 1.75rem !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
    transition: all 0.2s ease !important;
}

.modal-localisation .btn-primary:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important;
}

.dropdown-menu {
    z-index: 1035 !important;
}

/* Sticky Header (.affix state on scroll) */
.tt-header.affix,
header.header.tt-header.affix {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    padding: 0.38rem 0 !important;
    animation: none !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="dark"] .tt-header.affix,
.dark .tt-header.affix,
[data-bs-theme="dark"] header.header.tt-header.affix,
.dark header.header.tt-header.affix {
    background-color: rgba(10, 15, 29, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Floating Color Switch Pill (Smooth bottom-right position) */
.tt-color-switch {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    top: auto !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    z-index: 1025 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tt-color-switch:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 16px 32px -4px rgba(99, 102, 241, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.3) !important;
}

.tt-color-switch a {
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

/* Navbar Theme Toggle Button */
.tt-theme-toggle {
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

.tt-theme-toggle:hover {
    color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.08) !important;
    transform: scale(1.06) !important;
}

/* --- 2. Dark Theme Global Overrides [data-bs-theme="dark"] --- */
[data-bs-theme="dark"] {
    color-scheme: dark;
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body.tt-body-wrapper,
[data-bs-theme="dark"] .bg-gray-light {
    background-color: #070a13 !important;
    color: #94a3b8 !important;
}

/* Theme Switcher in Dark Mode */
[data-bs-theme="dark"] .tt-color-switch {
    background: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .tt-color-switch:hover {
    box-shadow: 0 16px 32px -4px rgba(99, 102, 241, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.5) !important;
}

[data-bs-theme="dark"] .tt-theme-toggle {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .tt-theme-toggle:hover {
    color: #818cf8 !important;
    background: rgba(129, 140, 248, 0.12) !important;
}

/* Section Backgrounds in Dark Mode (Alternating Slate/Obsidian, Zero Sharp Dividers) */
section {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

[data-bs-theme="dark"] section {
    background-color: #090e1a !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

[data-bs-theme="dark"] section:nth-of-type(even) {
    background-color: #0d1322 !important;
}

/* Cards & Elevated Containers in Dark Mode */
[data-bs-theme="dark"] .bg-white {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] [class*="bg-slate-50"],
[data-bs-theme="dark"] [class*="bg-slate-100"] {
    background-color: #0f172a !important;
}

/* Shadows in Dark Mode */
[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow-md,
[data-bs-theme="dark"] .shadow-lg,
[data-bs-theme="dark"] .shadow-xl,
[data-bs-theme="dark"] .shadow-2xl,
[data-bs-theme="dark"] [class*="shadow-slate-"] {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6) !important;
}

/* Typography in Dark Mode */
[data-bs-theme="dark"] .text-slate-900,
[data-bs-theme="dark"] .text-slate-800 {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .text-slate-700,
[data-bs-theme="dark"] .text-slate-600 {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .text-slate-500,
[data-bs-theme="dark"] .text-slate-400 {
    color: #94a3b8 !important;
}

/* Dynamic Borders in Dark Mode (Subtle & Fluid, Zero Harsh Wireframes) */
[data-bs-theme="dark"] [class*="border-slate-"] {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .border-0,
[data-bs-theme="dark"] [class*="border-0"] {
    border: none !important;
}

[data-bs-theme="dark"] [class*="border-indigo-100"],
[data-bs-theme="dark"] [class*="border-indigo-200"] {
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Micro Capsules, Chips & Badges in Dark Mode */
[data-bs-theme="dark"] .bg-indigo-50,
[data-bs-theme="dark"] [class*="bg-indigo-50"] {
    background-color: rgba(99, 102, 241, 0.16) !important;
    border-color: transparent !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .bg-emerald-50,
[data-bs-theme="dark"] [class*="bg-emerald-50"] {
    background-color: rgba(16, 185, 129, 0.16) !important;
    border-color: transparent !important;
    color: #6ee7b7 !important;
}

[data-bs-theme="dark"] .bg-amber-50,
[data-bs-theme="dark"] [class*="bg-amber-50"] {
    background-color: rgba(245, 158, 11, 0.16) !important;
    border-color: transparent !important;
    color: #fcd34d !important;
}

[data-bs-theme="dark"] .bg-sky-50,
[data-bs-theme="dark"] .bg-blue-50,
[data-bs-theme="dark"] [class*="bg-sky-50"],
[data-bs-theme="dark"] [class*="bg-blue-50"] {
    background-color: rgba(14, 165, 233, 0.16) !important;
    border-color: transparent !important;
    color: #7dd3fc !important;
}

[data-bs-theme="dark"] .bg-purple-50,
[data-bs-theme="dark"] [class*="bg-purple-50"] {
    background-color: rgba(168, 85, 247, 0.16) !important;
    border-color: transparent !important;
    color: #d8b4fe !important;
}

/* Pricing Section Category & Billing Cycle Capsules in Dark Mode */
[data-bs-theme="dark"] #categoryTabs,
[data-bs-theme="dark"] #billingCycleCapsule {
    background-color: #111827 !important;
    border: none !important;
}

[data-bs-theme="dark"] #tabBtnCloud.bg-white,
[data-bs-theme="dark"] #tabBtnEconomy.bg-white,
[data-bs-theme="dark"] #btnCycleMonthly.bg-white,
[data-bs-theme="dark"] #btnCycleAnnually.bg-white {
    background-color: #1e293b !important;
    color: #818cf8 !important;
    border: none !important;
}

[data-bs-theme="dark"] #tabBtnCloud:not(.bg-white),
[data-bs-theme="dark"] #tabBtnEconomy:not(.bg-white),
[data-bs-theme="dark"] #btnCycleMonthly:not(.bg-white),
[data-bs-theme="dark"] #btnCycleAnnually:not(.bg-white) {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .border-indigo-600 {
    border-color: #6366f1 !important;
    background-color: #131a2e !important;
}

/* Domain Search Bar in Dark Mode */
[data-bs-theme="dark"] #frmDomainHomepage .bg-white {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] #frmDomainHomepage input {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] #frmDomainHomepage input::placeholder {
    color: #64748b !important;
}

/* ========================================================================
   TOP PROMO & ANNOUNCEMENT BAR (FLUSH TO TOP EDGE, 0PX GAP)
   ======================================================================== */
.top-announcement-bar {
    margin-top: 0 !important;
    padding: 7px 12px !important;
    background: linear-gradient(90deg, #1e1b4b 0%, #312e81 25%, #4338ca 50%, #4f46e5 75%, #6366f1 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
}

@media (max-width: 575.98px) {
    .top-announcement-bar {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* Ensure Body & Html have zero top margin or padding */
html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================================================
   HEADER & NAVBAR MODERNIZATION (PERFECT ALIGNMENT & SPACING)
   ======================================================================== */
.tt-header:not(.tt-double-header) {
    margin-top: 0 !important;
    padding: 0.5rem 0 !important;
    transition: all 0.25s ease-in-out !important;
}
.tt-header .navbar {
    padding: 0 !important;
}
.tt-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Nav links: clean typography and vertical centering */
.tt-header .tt-main-header ul#nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tt-header .tt-main-header ul#nav > li > a {
    padding: 7px 13px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tt-header .tt-main-header ul#nav > li > a:hover {
    background: #f1f5f9 !important;
    color: #4f46e5 !important;
}

/* ========================================================================
   DARK THEME HEADER & NAVIGATION OVERRIDES
   ======================================================================== */
[data-bs-theme="dark"] header.header,
.dark header.header,
[data-bs-theme="dark"] .tt-header,
.dark .tt-header {
    background-color: rgba(10, 15, 29, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.6) !important;
}

/* Invert dark logo to crisp white in Dark Mode */
[data-bs-theme="dark"] .navbar-brand .logo-img,
.dark .navbar-brand .logo-img,
[data-bs-theme="dark"] .logo-img,
.dark .logo-img {
    filter: brightness(0) invert(1) !important;
}

/* High Contrast Navigation Links in Dark Mode */
[data-bs-theme="dark"] .tt-header .tt-main-header ul#nav > li > a,
.dark .tt-header .tt-main-header ul#nav > li > a,
[data-bs-theme="dark"] .navbar .navbar-nav .nav-link,
.dark .navbar .navbar-nav .nav-link {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}
[data-bs-theme="dark"] .tt-header .tt-main-header ul#nav > li > a:hover,
.dark .tt-header .tt-main-header ul#nav > li > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #818cf8 !important;
}

/* Dark Mode Dropdown Menu */
[data-bs-theme="dark"] .dropdown-menu,
.dark .dropdown-menu {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}
[data-bs-theme="dark"] .dropdown-item,
.dark .dropdown-item {
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
.dark .dropdown-item:hover {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #ffffff !important;
}

/* ========================================================================
   HERO CLOUD INFRASTRUCTURE CONSOLE & TELEMETRY SHOWCASE
   ======================================================================== */
.nx-hero-console {
    background: linear-gradient(145deg, #0a0f1d 0%, #0d1527 60%, #111a33 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.5), 0 0 40px -10px rgba(99, 102, 241, 0.25) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nx-hero-console .p-3,
.nx-hero-console .p-3\.5 {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    transition: all 0.25s ease !important;
}

.nx-hero-console .p-3:hover,
.nx-hero-console .p-3\.5:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    transform: translateY(-1px);
}

@keyframes nxFloatSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.nx-float-badge {
    animation: nxFloatSlow 4s ease-in-out infinite;
}

.nx-float-badge-delay {
    animation: nxFloatSlow 4s ease-in-out infinite 2s;
}

@media (max-width: 639.98px) {
    .nx-hero-console {
        padding: 16px 14px !important;
        border-radius: 20px !important;
    }
}

.hero-telemetry-card {
    border-radius: 26px !important;
    border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 20px 45px -10px rgba(99, 102, 241, 0.12), 0 8px 20px -6px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
[data-bs-theme="dark"] .hero-telemetry-card {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

.hero-metric-row {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hero-metric-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(99, 102, 241, 0.12) !important;
}

.hero-cta-btn {
    position: relative;
    overflow: hidden;
    letter-spacing: -0.2px;
}
.hero-cta-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    transform: rotate(25deg);
    transition: all 0.75s ease;
}
.hero-cta-btn:hover::after {
    left: 120%;
}

/* ========================================================================
   MODERN HIGH-TECH PAGE HERO & BREADCRUMB (PURE AESTHETIC)
   ======================================================================== */

.tt-page-header {
    position: relative !important;
    display: block !important;
    padding: 50px 0 54px 0 !important;
    background: linear-gradient(180deg, #070913 0%, #0c1222 55%, #080b16 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    overflow: hidden !important;
}

@media (max-width: 767.98px) {
    .tt-page-header {
        padding: 36px 0 40px 0 !important;
    }
}

/* Luminous horizon sheen along the bottom edge */
.tt-page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.25) 15%, rgba(56, 189, 248, 0.8) 45%, rgba(129, 140, 248, 0.6) 75%, transparent 100%);
    box-shadow: 0 1px 12px rgba(56, 189, 248, 0.25);
    pointer-events: none;
}

[data-bs-theme="dark"] .tt-page-header,
.dark .tt-page-header {
    background: linear-gradient(180deg, #03050c 0%, #070b16 55%, #05070f 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Atmospheric Lighting & Background Environment */
.tt-page-header-ambient {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.tt-ambient-glow {
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.tt-ambient-glow.tt-glow-primary {
    top: -160px !important;
    left: 10% !important;
    width: 650px !important;
    height: 400px !important;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(99, 102, 241, 0.28) 0%, rgba(129, 140, 248, 0.1) 40%, transparent 70%) !important;
    filter: blur(75px) !important;
}

.tt-ambient-glow.tt-glow-secondary {
    top: -80px !important;
    right: 8% !important;
    width: 520px !important;
    height: 340px !important;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(56, 189, 248, 0.18) 0%, rgba(14, 165, 233, 0.05) 45%, transparent 70%) !important;
    filter: blur(70px) !important;
}

.tt-ambient-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 85%) !important;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 85%) !important;
    opacity: 0.65 !important;
}

/* Page Title Typography with sophisticated metallic white-to-slate gradient */
.tt-page-title {
    font-size: clamp(2rem, 3.4vw, 2.65rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.18 !important;
    background: linear-gradient(180deg, #FFFFFF 15%, #E2E8F0 60%, #94A3B8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 0 !important;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.4)) !important;
}

.tt-page-tagline {
    font-size: 15px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    font-weight: 400 !important;
}

/* Modern Wide Screen Container Scaling (1400px+ & 1600px+) */
@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1340px !important;
    }
}

@media (min-width: 1600px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1520px !important;
    }
}

/* Eliminate old retro triangle cutout and absolute positioning hack */
.tt-triangle-right {
    display: none !important;
}

.tt-breadcrumb {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Modern Frosted Capsule Breadcrumb */
.tt-breadcrumb-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.tt-modern-breadcrumb,
.breadcrumb.tt-modern-breadcrumb,
.tt-breadcrumb ol.breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 4px 14px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.tt-modern-breadcrumb .breadcrumb-item,
.tt-breadcrumb ol li {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tt-modern-breadcrumb .breadcrumb-item a,
.tt-breadcrumb ol li a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-family: inherit !important;
}

.tt-modern-breadcrumb .breadcrumb-item a:hover,
.tt-breadcrumb ol li a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.tt-modern-breadcrumb .breadcrumb-item.active,
.tt-breadcrumb ol li.active {
    color: #38bdf8 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
}

/* Crisp vector chevron divider between breadcrumbs (universal - never fails or shows missing glyph box) */
.tt-modern-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.tt-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 9px !important;
    margin: 0 9px !important;
    padding: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M1 1.5L4.5 5L1 8.5' stroke='rgba(255,255,255,0.45)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    vertical-align: middle !important;
    opacity: 0.85 !important;
    float: none !important;
}

/* ========================================================================
   MODERN SLEEK SIDEBAR (MATCHING ORDERFORM DESIGN ACROSS ALL PAGES)
   ======================================================================== */

.card.card-sidebar,
.panel.card-sidebar,
.panel-sidebar {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.card.card-sidebar:hover,
.panel.card-sidebar:hover {
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
    border-color: #d1d5db !important;
}

/* Sidebar Header */
.card-sidebar .card-header,
.card-sidebar .panel-heading {
    background: transparent !important;
    border: none !important;
    padding: 0 6px 12px 6px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.card-sidebar .card-title,
.card-sidebar .panel-title {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Category & Action Icons in Sidebar Header */
.card-sidebar .card-title i:not(.card-minimise):not(.panel-minimise),
.card-sidebar .panel-title i:not(.card-minimise):not(.panel-minimise) {
    color: #2563eb !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    text-align: center !important;
}

/* Hide Clunky Minimise Chevron (Matching Orderform Clean Look) */
.card-sidebar .card-minimise,
.card-sidebar .panel-minimise {
    display: none !important;
}

/* Sidebar List Group Container */
.card-sidebar .list-group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

/* Sidebar Menu Items (Icon & Label grouped together on left) */
.card-sidebar .list-group-item,
.card-sidebar a.list-group-item {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    margin: 0 !important;
}

/* Icons inside Sidebar Items */
.card-sidebar .list-group-item i:not(.fa-check) {
    width: 18px !important;
    text-align: center !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    transition: color 0.15s ease !important;
}

/* Specific Distinct Icon Colors */
.card-sidebar .list-group-item i.fa-ticket,
.card-sidebar .list-group-item i.fa-ticket-alt {
    color: #3b82f6 !important;
}
.card-sidebar .list-group-item i.fa-th-list,
.card-sidebar .list-group-item i.fa-list,
.card-sidebar .list-group-item i.fa-bullhorn {
    color: #f59e0b !important;
}
.card-sidebar .list-group-item i.fa-info,
.card-sidebar .list-group-item i.fa-info-circle,
.card-sidebar .list-group-item i.fa-book {
    color: #10b981 !important;
}
.card-sidebar .list-group-item i.fa-download {
    color: #6366f1 !important;
}
.card-sidebar .list-group-item i.fa-rocket,
.card-sidebar .list-group-item i.fa-server {
    color: #ec4899 !important;
}
.card-sidebar .list-group-item i.fa-comments,
.card-sidebar .list-group-item i.fa-comment-alt {
    color: #8b5cf6 !important;
}
.card-sidebar .list-group-item i.fa-globe {
    color: #10b981 !important;
}
.card-sidebar .list-group-item i.fa-exchange-alt,
.card-sidebar .list-group-item i.fa-random {
    color: #0ea5e9 !important;
}
.card-sidebar .list-group-item i.fa-shopping-cart {
    color: #6366f1 !important;
}

/* Hover State */
.card-sidebar .list-group-item:hover:not(.active) {
    background: #f8fafc !important;
    color: #0284c7 !important;
    transform: translateX(2px) !important;
}

.card-sidebar .list-group-item:hover:not(.active) i {
    color: #0284c7 !important;
}

/* Active State (Emerald Highlight & Accent Bar) */
.card-sidebar .list-group-item.active,
.card-sidebar a.list-group-item.active {
    background: #f0fdf4 !important;
    color: #059669 !important;
    font-weight: 700 !important;
    border-left: 3px solid #10b981 !important;
    border-radius: 4px 8px 8px 4px !important;
    box-shadow: none !important;
}

.card-sidebar .list-group-item.active i {
    color: #059669 !important;
}

/* Active Item (No Checkmark Needed) */
.card-sidebar .list-group-item.active::after,
.card-sidebar .list-group-item.active:not(:has(.fa-check))::after {
    display: none !important;
    content: none !important;
}

/* Badge in Sidebar (Pushed to far right) */
.card-sidebar .badge {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    padding: 2px 7.5px !important;
    margin-left: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
}

.card-sidebar .list-group-item.active .badge {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

/* Clean Empty State (e.g. "No categories exist") */
.card-sidebar .list-group-item:not(a),
.card-sidebar div.list-group-item {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: default !important;
    padding: 8px 12px !important;
    background: transparent !important;
    transform: none !important;
    justify-content: flex-start !important;
}

.card-sidebar .list-group-item:not(a):hover,
.card-sidebar div.list-group-item:hover {
    background: transparent !important;
    color: #94a3b8 !important;
    transform: none !important;
}

/* Sidebar Custom Body Content (e.g. Filter Sliders, Forms, Info) */
.card-sidebar .card-body {
    padding: 4px 6px !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.card-sidebar .card-body form .btn {
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

/* Dark Theme Support */
[data-bs-theme="dark"] .card.card-sidebar,
.dark .card.card-sidebar,
[data-bs-theme="dark"] .panel.card-sidebar,
.dark .panel.card-sidebar {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .card.card-sidebar:hover,
.dark .card.card-sidebar:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

[data-bs-theme="dark"] .card-sidebar .card-header,
.dark .card-sidebar .card-header,
[data-bs-theme="dark"] .card-sidebar .panel-heading,
.dark .card-sidebar .panel-heading {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .card-sidebar .card-title,
.dark .card-sidebar .card-title {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .card-sidebar .list-group-item,
.dark .card-sidebar .list-group-item {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .card-sidebar .list-group-item:hover:not(.active),
.dark .card-sidebar .list-group-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .card-sidebar .list-group-item.active,
.dark .card-sidebar .list-group-item.active {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34d399 !important;
    border-left-color: #10b981 !important;
}

[data-bs-theme="dark"] .card-sidebar .badge,
.dark .card-sidebar .badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .card-sidebar .list-group-item.active .badge,
.dark .card-sidebar .list-group-item.active .badge {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #6ee7b7 !important;
}

/* ========================================================================
   UNIFIED SIDEBAR WIDTH (280px) & CLEAN GRID GAPPINGS ACROSS ALL PAGES
   ======================================================================== */

section#main-body {
    padding: 36px 0 60px 0 !important;
    min-height: 450px !important;
}

@media (min-width: 992px) {
    /* Standard WHMCS Layout Pages (Knowledgebase, Support, Client Area, Announcements, etc.) */
    #main-body .col-lg-4.col-xl-3 {
        flex: 0 0 340px !important;
        max-width: 340px !important;
        width: 340px !important;
        padding-right: 20px !important;
    }

    #main-body .col-lg-4.col-xl-3 .sidebar,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
        float: none !important;
    }

    #main-body .col-lg-4.col-xl-3 .card.card-sidebar,
    .card.card-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        margin-bottom: 24px !important;
        clear: both !important;
        display: block !important;
    }

    #main-body .col-lg-8.col-xl-9.primary-content {
        flex: 1 1 calc(100% - 340px) !important;
        max-width: calc(100% - 340px) !important;
        width: calc(100% - 340px) !important;
        padding-left: 28px !important;
    }

    @media (min-width: 1440px) {
        #main-body .col-lg-4.col-xl-3 {
            flex: 0 0 325px !important;
            max-width: 325px !important;
            width: 325px !important;
        }
        #main-body .col-lg-8.col-xl-9.primary-content {
            flex: 1 1 calc(100% - 325px) !important;
            max-width: calc(100% - 325px) !important;
            width: calc(100% - 325px) !important;
        }
    }
}


/* ========================================================================
   FEATURED / SPOTLIGHT TLD SHOWCASE CARDS (.featured-tlds-container)
   ======================================================================== */
.featured-tlds-container {
    margin: 32px 0 35px !important;
}

.tt-featured-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 1200px) {
    .tt-featured-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .tt-featured-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .tt-featured-grid {
        grid-template-columns: 1fr !important;
    }
}

.tt-featured-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px 18px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tt-featured-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #6366f1, #38bdf8) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.tt-featured-card:hover {
    transform: translateY(-4px) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 14px 30px -8px rgba(99, 102, 241, 0.18), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

.tt-featured-card:hover::before {
    opacity: 1 !important;
}

.tt-feat-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}

.tt-feat-pill {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.tt-feat-pill.pill-popular {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.tt-feat-pill.pill-hot {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

.tt-feat-pill.pill-sale {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.tt-feat-pill.pill-tech {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

.tt-feat-pill.pill-biz {
    background: #faf5ff !important;
    color: #7c3aed !important;
    border: 1px solid #e9d5ff !important;
}

.tt-feat-pill.pill-default {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

.tt-feat-body {
    margin-bottom: 16px !important;
    text-align: left !important;
}

.tt-feat-logo-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 6px 14px !important;
    width: fit-content !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    transition: all 0.25s ease !important;
}

.tt-featured-card:hover .tt-feat-logo-box {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.tt-feat-logo-img {
    max-height: 34px !important;
    max-width: 130px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.25s ease !important;
}

.tt-featured-card:hover .tt-feat-logo-img {
    transform: scale(1.05) !important;
}

.tt-feat-ext-fallback {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.tt-feat-ext-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: -0.2px !important;
    margin-bottom: 3px !important;
}

.tt-feat-ext {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.6px !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
}

.tt-feat-tagline {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.35 !important;
}

.tt-feat-tagline {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    min-height: 34px !important;
}

.tt-feat-pricing {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
    margin-top: auto !important;
}

.tt-price-val {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #4f46e5 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
}

.tt-price-unit {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-left: 2px !important;
}

.tt-feat-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #6366f1 !important;
    background: #eef2ff !important;
    padding: 5px 10px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.tt-featured-card:hover .tt-feat-cta {
    background: #6366f1 !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

/* Spotlight search results logo styling */
.spotlight-tld-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    margin: 4px auto 10px !important;
    padding: 4px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    width: fit-content !important;
    min-width: 80px !important;
}

.spotlight-logo-img {
    max-height: 32px !important;
    max-width: 110px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   Modern Domain Pricing Table & Category Filters
   ========================================================================== */
.tt-pricing-heading {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px !important;
}

.tt-search-input-wrap {
    position: relative !important;
    width: 250px !important;
}

.tt-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
}

.tt-tld-filter-input {
    height: 38px !important;
    border-radius: 9999px !important;
    padding-left: 34px !important;
    padding-right: 14px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.tt-tld-filter-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* Category Filters Styling */
.tld-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 16px 0 24px !important;
}

.tld-filters a.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.tld-filters a.badge:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

.tld-filters a.badge.active,
.tld-filters a.badge.badge-success {
    background: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Modern Domain Pricing Table Wrapper */
.tt-domain-list-wrap {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 2.5rem !important;
}

/* Table Header */
.tt-table-header {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 14px 0 !important;
}

.tt-th-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

/* Table Row */
.tt-table-row {
    padding: 15px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.15s ease !important;
}

.tt-table-row:last-child {
    border-bottom: none !important;
}

.tt-table-row:hover {
    background: #f8fafc !important;
}

/* TLD Identity Column */
.tt-tld-identity {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tt-tld-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px !important;
}

.tt-tld-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.tt-tld-tag.tag-hot {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.tt-tld-tag.tag-sale {
    background: #dcfce7 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.tt-tld-tag.tag-new {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

/* Price Cells */
.tt-cell-price {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
}

.tt-price-amount {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
}

.tt-price-period {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin-left: 3px !important;
}

/* Registration Price Highlight */
.tt-price-register .tt-price-amount {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #4f46e5 !important;
}

/* Transfer & Renewal Prices */
.tt-price-transfer .tt-price-amount,
.tt-price-renew .tt-price-amount {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* Action CTA Button */
.tt-table-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    background: #eef2ff !important;
    border: 1.5px solid #e0e7ff !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    transition: all 0.2s ease !important;
}

.tt-table-row:hover .tt-table-cta {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */
[data-bs-theme="dark"] .tt-pricing-heading,
.dark .tt-pricing-heading {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-tld-filter-input,
.dark .tt-tld-filter-input {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-tld-filter-input:focus,
.dark .tt-tld-filter-input:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}

[data-bs-theme="dark"] .tld-filters a.badge,
.dark .tld-filters a.badge {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tld-filters a.badge:hover,
.dark .tld-filters a.badge:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tld-filters a.badge.active,
.dark .tld-filters a.badge.active,
[data-bs-theme="dark"] .tld-filters a.badge.badge-success,
.dark .tld-filters a.badge.badge-success {
    background: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important;
}

[data-bs-theme="dark"] .tt-domain-list-wrap,
.dark .tt-domain-list-wrap {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .tt-table-header,
.dark .tt-table-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tt-th-label,
.dark .tt-th-label {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .tt-table-row,
.dark .tt-table-row {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .tt-table-row:hover,
.dark .tt-table-row:hover {
    background: #1e293b !important;
}

[data-bs-theme="dark"] .tt-tld-name,
.dark .tt-tld-name {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-price-register .tt-price-amount,
.dark .tt-price-register .tt-price-amount {
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .tt-price-transfer .tt-price-amount,
.dark .tt-price-transfer .tt-price-amount,
[data-bs-theme="dark"] .tt-price-renew .tt-price-amount,
.dark .tt-price-renew .tt-price-amount {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .tt-price-period,
.dark .tt-price-period {
    color: #64748b !important;
}

[data-bs-theme="dark"] .tt-table-cta,
.dark .tt-table-cta {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .tt-table-row:hover .tt-table-cta,
.dark .tt-table-row:hover .tt-table-cta {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}
/* ==========================================================================
   Modern Cart Sidebar Components (.nx-side-widget, .nx-nav-list, .nx-action-btn)
   ========================================================================== */
.nx-side-widget {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.nx-side-widget:hover {
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
    border-color: #d1d5db !important;
}

.nx-widget-title {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #64748b !important;
    padding: 0 6px 12px 6px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.nx-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.nx-nav-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
}

.nx-nav-item a:hover {
    background: #f8fafc !important;
    color: #0284c7 !important;
    transform: translateX(2px) !important;
}

.nx-nav-item a.active {
    background: #f0fdf4 !important;
    color: #059669 !important;
    font-weight: 700 !important;
    border-left: 3px solid #10b981 !important;
    border-radius: 4px 8px 8px 4px !important;
}

.nx-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    margin-bottom: 4px !important;
}

.nx-action-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    transform: translateX(2px) !important;
}

.nx-action-btn.active {
    background: #f0fdf4 !important;
    color: #059669 !important;
    font-weight: 700 !important;
    border-left: 3px solid #10b981 !important;
    border-radius: 4px 8px 8px 4px !important;
}

.nx-action-btn i {
    width: 18px !important;
    text-align: center !important;
    font-size: 13px !important;
}

/* Dark Mode */
[data-bs-theme="dark"] .nx-side-widget,
.dark .nx-side-widget {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-widget-title,
.dark .nx-widget-title {
    color: #94a3b8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-nav-item a,
.dark .nx-nav-item a,
[data-bs-theme="dark"] .nx-action-btn,
.dark .nx-action-btn {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-nav-item a:hover,
.dark .nx-nav-item a:hover,
[data-bs-theme="dark"] .nx-action-btn:hover,
.dark .nx-action-btn:hover {
    background: #1e293b !important;
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .nx-nav-item a.active,
.dark .nx-nav-item a.active,
[data-bs-theme="dark"] .nx-action-btn.active,
.dark .nx-action-btn.active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border-left-color: #10b981 !important;
}

/* ==========================================================================
   PREMIUM SIDEBAR TRUST & SLA GUARANTEE CARD
   ========================================================================== */
.nx-trust-card {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 75%) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    border-radius: 16px !important;
    padding: 22px 18px 18px 18px !important;
    text-align: center !important;
    box-shadow: 0 4px 16px -4px rgba(16, 185, 129, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: none !important;
}

.nx-trust-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #06b6d4);
}

.nx-trust-icon-box {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px auto;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(6, 182, 212, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.nx-trust-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 5px 0 !important;
    text-transform: none !important;
    letter-spacing: -0.2px !important;
}

.nx-trust-paragraph {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
    text-transform: none !important;
}

.nx-trust-live-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #047857 !important;
    text-transform: none !important;
}

.nx-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.25);
    animation: nxPulseDot 2s infinite;
}

/* Dark Mode for Trust Card */
[data-bs-theme="dark"] .nx-trust-card,
.dark .nx-trust-card {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-trust-icon-box,
.dark .nx-trust-icon-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(6, 182, 212, 0.15) 100%) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.2) !important;
}

[data-bs-theme="dark"] .nx-trust-heading,
.dark .nx-trust-heading {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-trust-paragraph,
.dark .nx-trust-paragraph {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-trust-live-status,
.dark .nx-trust-live-status {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}

[data-bs-theme="dark"] .nx-trust-badge,
.dark .nx-trust-badge {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-trust-title,
.dark .nx-trust-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-trust-desc,
.dark .nx-trust-desc {
    color: #94a3b8 !important;
}

/* ==========================================================================
   Modern Auth Suite: Register, Login, Password Reset
   ========================================================================== */

/* 1. Main Auth Wrapper & Background */
.tt-auth-wrap {
    background: radial-gradient(circle at 10% 15%, rgba(99, 102, 241, 0.07) 0%, transparent 45%),
                radial-gradient(circle at 90% 85%, rgba(16, 185, 129, 0.06) 0%, transparent 45%),
                #f8fafc !important;
    min-height: calc(100vh - 140px) !important;
    padding: 50px 16px 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

[data-bs-theme="dark"] .tt-auth-wrap,
.dark .tt-auth-wrap {
    background: radial-gradient(circle at 10% 15%, rgba(99, 102, 241, 0.15) 0%, transparent 45%),
                radial-gradient(circle at 90% 85%, rgba(16, 185, 129, 0.1) 0%, transparent 45%),
                #0f172a !important;
}

/* 2. Critical Fix: Form Fields with Prepend Icons (No More Text Overlap) */
.prepend-icon,
.form-group.prepend-icon,
.tt-auth-wrap .prepend-icon,
#registration .prepend-icon,
.tt-registration-form .prepend-icon,
.nx-auth-card .prepend-icon {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 18px !important;
}

.tt-auth-wrap .prepend-icon .field-icon,
#registration .prepend-icon .field-icon,
.tt-registration-form .prepend-icon .field-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 14px !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    z-index: 6 !important;
    pointer-events: none !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

.tt-auth-wrap .prepend-icon .field-icon i,
#registration .prepend-icon .field-icon i,
.tt-registration-form .prepend-icon .field-icon i {
    font-size: 15px !important;
    color: #94a3b8 !important;
    line-height: 1 !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

/* Universal Input Height & Padding for Auth Forms */
.tt-auth-wrap .prepend-icon input.form-control,
.tt-auth-wrap .prepend-icon input.field,
.tt-auth-wrap .prepend-icon select.form-control,
.tt-auth-wrap .prepend-icon select.field,
#registration .prepend-icon input,
#registration .prepend-icon select,
.tt-registration-form .prepend-icon input,
.tt-registration-form .prepend-icon select,
.nx-auth-card .prepend-icon input,
.nx-auth-card .prepend-icon select {
    padding-left: 48px !important;
    padding-right: 16px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tt-auth-wrap .prepend-icon input::placeholder,
#registration .prepend-icon input::placeholder,
.tt-registration-form .prepend-icon input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.tt-auth-wrap .prepend-icon:focus-within input,
.tt-auth-wrap .prepend-icon:focus-within select,
#registration .prepend-icon:focus-within input,
#registration .prepend-icon:focus-within select,
.tt-registration-form .prepend-icon:focus-within input,
.tt-registration-form .prepend-icon:focus-within select {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

.tt-auth-wrap .prepend-icon:focus-within .field-icon,
.tt-auth-wrap .prepend-icon:focus-within .field-icon i,
#registration .prepend-icon:focus-within .field-icon,
#registration .prepend-icon:focus-within .field-icon i,
.tt-registration-form .prepend-icon:focus-within .field-icon,
.tt-registration-form .prepend-icon:focus-within .field-icon i {
    color: #4f46e5 !important;
}

/* Dark mode inputs */
[data-bs-theme="dark"] .tt-auth-wrap .prepend-icon input,
[data-bs-theme="dark"] .tt-auth-wrap .prepend-icon select,
.dark .tt-auth-wrap .prepend-icon input,
.dark .tt-auth-wrap .prepend-icon select {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .tt-auth-wrap .prepend-icon:focus-within input,
[data-bs-theme="dark"] .tt-auth-wrap .prepend-icon:focus-within select,
.dark .tt-auth-wrap .prepend-icon:focus-within input,
.dark .tt-auth-wrap .prepend-icon:focus-within select {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25) !important;
    background-color: #0f172a !important;
}

/* 3. Register Card & Modern Layout */
#registration.tt-registration-form {
    max-width: 860px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 44px 42px !important;
    box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.02) !important;
    width: 100% !important;
}

[data-bs-theme="dark"] #registration.tt-registration-form,
.dark #registration.tt-registration-form {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Auth Header Elements */
.nx-auth-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(124, 58, 237, 0.12) 100%);
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.nx-badge-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.12) 100%) !important;
    color: #d97706 !important;
}

.nx-badge-emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%) !important;
    color: #059669 !important;
}

.nx-auth-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 6px !important;
}

[data-bs-theme="dark"] .nx-auth-title,
.dark .nx-auth-title {
    color: #f8fafc !important;
}

.nx-auth-subtitle {
    font-size: 14.5px !important;
    color: #64748b !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

[data-bs-theme="dark"] .nx-auth-subtitle,
.dark .nx-auth-subtitle {
    color: #94a3b8 !important;
}

/* Divider with text */
.nx-auth-divider {
    display: flex;
    align-items: center;
    margin: 24px 0 28px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nx-auth-divider::before,
.nx-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

[data-bs-theme="dark"] .nx-auth-divider::before,
[data-bs-theme="dark"] .nx-auth-divider::after,
.dark .nx-auth-divider::before,
.dark .nx-auth-divider::after {
    background: rgba(255, 255, 255, 0.08);
}

.nx-auth-divider span {
    padding: 0 16px;
}

/* Section Cards in Register */
.nx-section-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 24px !important;
    margin-bottom: 26px !important;
    transition: all 0.2s ease !important;
}

.nx-section-card:hover {
    border-color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-section-card,
.dark .nx-section-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.nx-auth-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-auth-section-header,
.dark .nx-auth-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.nx-section-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: rgba(79, 70, 229, 0.1) !important;
    color: #4f46e5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

.nx-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

[data-bs-theme="dark"] .nx-section-title,
.dark .nx-section-title {
    color: #f1f5f9 !important;
}

.nx-section-sub {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 2px 0 0 !important;
}

/* 4. Sleek Auth Buttons */
.nx-auth-btn-primary {
    height: 50px !important;
    padding: 0 32px !important;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.nx-auth-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.45) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
}

.nx-auth-btn-primary:active {
    transform: translateY(0) !important;
}

/* 5. Login Layout Enhancements (Split Screen - Enterprise Showcase) */
.tt-form-wrap {
    max-width: 1040px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.tt-form-wrap .tt-form-container {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.02) !important;
    display: flex !important;
    min-height: 600px !important;
}

[data-bs-theme="dark"] .tt-form-wrap .tt-form-container,
.dark .tt-form-wrap .tt-form-container {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.tt-form-wrap .tt-form-container .tt-form-content {
    flex: 1 1 50% !important;
    padding: 44px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ========================================================================
   UNIVERSAL MODERN INPUT GROUPS & FORM INPUTS (Linear/Stripe Style)
   ======================================================================== */

.input-group-merge,
.tt-form-wrap .input-group-merge,
.nx-auth-card .input-group-merge,
.card .input-group-merge {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.input-group-merge .input-group-prepend,
.tt-form-wrap .input-group-merge .input-group-prepend,
.nx-auth-card .input-group-merge .input-group-prepend,
.card .input-group-merge .input-group-prepend {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    pointer-events: none !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.input-group-merge .input-group-prepend .input-group-text,
.tt-form-wrap .input-group-merge .input-group-text,
.nx-auth-card .input-group-merge .input-group-text,
.card .input-group-merge .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease !important;
}

.input-group-merge .input-group-prepend .input-group-text i,
.input-group-merge .input-group-text i {
    font-size: 15px !important;
    color: inherit !important;
    display: inline-block !important;
}

.input-group-merge input.form-control,
.input-group-merge .form-control,
.tt-form-wrap .input-group-merge input.form-control,
.nx-auth-card .input-group-merge input.form-control,
.card .input-group-merge input.form-control {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding-left: 48px !important;
    padding-right: 44px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.input-group-merge input.form-control::placeholder,
.input-group-merge .form-control::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.input-group-merge input.form-control:hover,
.input-group-merge .form-control:hover,
.tt-form-wrap .input-group-merge input.form-control:hover,
.nx-auth-card .input-group-merge input.form-control:hover,
.card .input-group-merge input.form-control:hover {
    border-color: #cbd5e1 !important;
    background-color: #ffffff !important;
}

.input-group-merge input.form-control:focus,
.input-group-merge .form-control:focus,
.tt-form-wrap .input-group-merge input.form-control:focus,
.nx-auth-card .input-group-merge input.form-control:focus,
.card .input-group-merge input.form-control:focus {
    background-color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14), 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    outline: none !important;
    color: #0f172a !important;
}

.input-group-merge:focus-within .input-group-prepend .input-group-text,
.input-group-merge:focus-within .input-group-prepend .input-group-text i,
.tt-form-wrap .input-group-merge:focus-within .input-group-text,
.nx-auth-card .input-group-merge:focus-within .input-group-text,
.card .input-group-merge:focus-within .input-group-text {
    color: #4f46e5 !important;
    transform: scale(1.05) !important;
}

/* Dark Mode Support for Input Group Merge & Global Form Controls */
[data-bs-theme="dark"] .input-group-merge input.form-control,
[data-bs-theme="dark"] .input-group-merge .form-control,
[data-bs-theme="dark"] .tt-form-wrap .input-group-merge input.form-control,
[data-bs-theme="dark"] .nx-auth-card .input-group-merge input.form-control,
[data-bs-theme="dark"] .card .input-group-merge input.form-control,
.dark .input-group-merge input.form-control,
.dark .input-group-merge .form-control,
.dark .tt-form-wrap .input-group-merge input.form-control,
.dark .nx-auth-card .input-group-merge input.form-control,
.dark .card .input-group-merge input.form-control {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .input-group-merge input.form-control::placeholder,
[data-bs-theme="dark"] .input-group-merge .form-control::placeholder,
.dark .input-group-merge input.form-control::placeholder,
.dark .input-group-merge .form-control::placeholder {
    color: #64748b !important;
}

[data-bs-theme="dark"] .input-group-merge input.form-control:hover,
[data-bs-theme="dark"] .input-group-merge .form-control:hover,
.dark .input-group-merge input.form-control:hover,
.dark .input-group-merge .form-control:hover {
    background-color: #243046 !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

[data-bs-theme="dark"] .input-group-merge input.form-control:focus,
[data-bs-theme="dark"] .input-group-merge .form-control:focus,
.dark .input-group-merge input.form-control:focus,
.dark .input-group-merge .form-control:focus {
    background-color: #0f172a !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .input-group-merge input.form-control:disabled,
[data-bs-theme="dark"] .input-group-merge input.form-control.disabled,
[data-bs-theme="dark"] .input-group-merge input.form-control[disabled],
[data-bs-theme="dark"] .input-group-merge input.form-control[readonly],
.dark .input-group-merge input.form-control:disabled,
.dark .input-group-merge input.form-control.disabled,
.dark .input-group-merge input.form-control[disabled],
.dark .input-group-merge input.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
}

[data-bs-theme="dark"] .input-group-merge .input-group-prepend .input-group-text,
[data-bs-theme="dark"] .input-group-merge .input-group-text,
.dark .input-group-merge .input-group-prepend .input-group-text,
.dark .input-group-merge .input-group-text {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .input-group-merge:focus-within .input-group-prepend .input-group-text,
[data-bs-theme="dark"] .input-group-merge:focus-within .input-group-prepend .input-group-text i,
.dark .input-group-merge:focus-within .input-group-prepend .input-group-text,
.dark .input-group-merge:focus-within .input-group-prepend .input-group-text i {
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .form-control:not(.input-group-merge input),
.dark .form-control:not(.input-group-merge input) {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .form-control:not(.input-group-merge input):hover,
.dark .form-control:not(.input-group-merge input):hover {
    background-color: #243046 !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

[data-bs-theme="dark"] .form-control:not(.input-group-merge input):focus,
.dark .form-control:not(.input-group-merge input):focus {
    background-color: #0f172a !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[disabled],
[data-bs-theme="dark"] .form-control.disabled,
.dark .form-control:disabled,
.dark .form-control[disabled],
.dark .form-control.disabled {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

.input-group-merge .input-group-append,
.tt-form-wrap .input-group-append,
.nx-auth-card .input-group-append,
.card .input-group-merge .input-group-append {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.btn-reveal-pw,
.tt-form-wrap .btn-reveal-pw,
.input-group-merge .btn-reveal-pw {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-reveal-pw:hover,
.tt-form-wrap .btn-reveal-pw:hover,
.input-group-merge .btn-reveal-pw:hover {
    color: #4f46e5 !important;
    background: rgba(79, 70, 229, 0.08) !important;
}

/* Fix standard Bootstrap input-group border radiuses (no double-rounded gaps) */
.input-group:not(.input-group-merge) > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group:not(.input-group-merge) > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group:not(.input-group-merge) > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-radius: 12px 0 0 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-right: none !important;
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.input-group:not(.input-group-merge) > .input-group-append > .input-group-text,
.input-group:not(.input-group-merge) > .input-group-append > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Polish All Form Labels in Auth and Standard Sections */
.form-group label.small.text-uppercase,
.form-group label.text-uppercase,
.nx-auth-card label,
.tt-form-content label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #475569 !important;
    margin-bottom: 7px !important;
    display: inline-block !important;
}

/* Right Column: Premium Enterprise Cloud Showcase */
.tt-form-wrap .tt-login-showcase-panel {
    flex: 1 1 50% !important;
    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.28) 0%, transparent 45%),
                radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.20) 0%, transparent 45%),
                linear-gradient(145deg, #0b0f19 0%, #111827 50%, #1e1b4b 100%) !important;
    padding: 44px 38px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    position: relative !important;
}

.nx-showcase-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    transition: all 0.2s ease !important;
}

.nx-showcase-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    transform: translateX(3px) !important;
}

.nx-showcase-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}

.nx-showcase-icon.indigo {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

.nx-showcase-icon.emerald {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

.nx-showcase-icon.amber {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fde68a !important;
}

.nx-showcase-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    margin-bottom: 2px !important;
}

.nx-showcase-sub {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.nx-showcase-quote {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    margin-top: 16px !important;
}

.nx-showcase-stars {
    color: #fbbf24 !important;
    font-size: 11px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    gap: 3px !important;
}

.nx-showcase-quote p {
    font-size: 12px !important;
    color: #e2e8f0 !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    font-style: italic !important;
}

.nx-showcase-author {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nx-showcase-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* 6. Password Reset Card */
.tt-auth-wrap .card.tt-custom-radius {
    max-width: 520px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.02) !important;
    padding: 8px !important;
}

[data-bs-theme="dark"] .tt-auth-wrap .card.tt-custom-radius,
.dark .tt-auth-wrap .card.tt-custom-radius {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Auth Footers */
.auth-footer {
    text-align: center !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    margin-top: 24px !important;
}

.auth-footer a {
    color: #4f46e5 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.auth-footer a:hover {
    color: #4338ca !important;
    text-decoration: underline !important;
}

[data-bs-theme="dark"] .auth-footer,
.dark .auth-footer {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .auth-footer a,
.dark .auth-footer a {
    color: #818cf8 !important;
}

/* Password Strength Bar */
.password-strength-meter .progress {
    height: 6px !important;
    border-radius: 9999px !important;
    background-color: #e2e8f0 !important;
    margin: 8px 0 6px !important;
    overflow: hidden !important;
}

.password-strength-meter .progress-bar {
    transition: width 0.3s ease !important;
}

/* Generate Password Button */
.generate-password {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
}

.generate-password:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ========================================================================
   ATTRACTIVE GOOGLE BUTTON, LANGUAGE SWITCHER & POPUP POLISH
   ======================================================================== */

/* 1. Google SSO Button & Social Container (Strict Single Border - Zero Outer Wrapper Rings) */
.nx-social-signin-box {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 14px 0 8px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.nx-social-signin-box .sub-heading,
.tt-registration-form .sub-heading,
.providerPreLinking .sub-heading {
    display: none !important;
}

.providerPreLinking {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.social-signin-btns {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.social-signin-btns .btn,
.social-signin-btns .g_id_signin,
.social-signin-btns #btnGoogleSignin1,
.social-signin-btns .btn-google {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
}

.social-signin-btns .g_id_signin:hover,
.social-signin-btns #btnGoogleSignin1:hover {
    transform: translateY(-1.5px) !important;
    filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.08)) !important;
}

.social-signin-btns iframe {
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
}

/* 2. Language & Currency Switcher Pill - Comfortable & Generous Sizing */
.nx-lang-switcher-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    min-height: 42px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    text-decoration: none !important;
}

.nx-lang-switcher-pill:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1) !important;
    transform: translateY(-1px) !important;
}

.nx-lang-switcher-pill .nx-lang-icon {
    color: #6366f1 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

.nx-lang-switcher-pill:hover .nx-lang-icon {
    transform: rotate(15deg) scale(1.1) !important;
}

.nx-lang-switcher-pill .nx-lang-name {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
}

.nx-lang-switcher-pill .nx-lang-sep {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.nx-lang-switcher-pill .nx-currency-code {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

.nx-lang-switcher-pill .nx-lang-caret {
    color: #94a3b8 !important;
    font-size: 10px !important;
    margin-left: 2px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.nx-lang-switcher-pill:hover .nx-lang-caret {
    color: #4f46e5 !important;
    transform: translateY(1.5px) !important;
}

/* ========================================================================
   ATTRACTIVE MODERN CHECKBOXES & TOGGLES (Universal)
   ======================================================================== */

.form-check {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    cursor: pointer !important;
}

input[type="checkbox"].form-check-input,
.form-check-input,
input[type="checkbox"].accepttos {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 6px !important;
    border: 2px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    cursor: pointer !important;
    margin: 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
}

input[type="checkbox"].form-check-input:hover,
.form-check-input:hover,
input[type="checkbox"].accepttos:hover {
    border-color: #6366f1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

input[type="checkbox"].form-check-input:checked,
.form-check-input:checked,
input[type="checkbox"].accepttos:checked {
    background-color: #4f46e5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
}

input[type="checkbox"].form-check-input:focus,
.form-check-input:focus,
input[type="checkbox"].accepttos:focus {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

/* Terms of Service Agreement Card Box */
.nx-tos-agreement-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    transition: all 0.2s ease !important;
}

.nx-tos-agreement-card:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.nx-tos-agreement-card .form-check {
    margin: 0 !important;
}

.nx-tos-agreement-card .nx-checkbox-text {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 1.4 !important;
}

.nx-tos-agreement-card .nx-tos-link {
    color: #4f46e5 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.15s ease !important;
}

.nx-tos-agreement-card .nx-tos-link:hover {
    color: #3730a3 !important;
}

/* Dark variant (Footer & Dark mode) */
.nx-lang-switcher-pill.nx-lang-pill-dark,
[data-bs-theme="dark"] .nx-lang-switcher-pill {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.nx-lang-switcher-pill.nx-lang-pill-dark:hover,
[data-bs-theme="dark"] .nx-lang-switcher-pill:hover {
    background: #1e293b !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

.nx-lang-switcher-pill.nx-lang-pill-dark .nx-lang-name,
[data-bs-theme="dark"] .nx-lang-switcher-pill .nx-lang-name {
    color: #cbd5e1 !important;
}

.nx-lang-switcher-pill.nx-lang-pill-dark .nx-currency-code,
[data-bs-theme="dark"] .nx-lang-switcher-pill .nx-currency-code {
    color: #ffffff !important;
}

.nx-lang-switcher-pill.nx-lang-pill-dark .nx-lang-sep,
[data-bs-theme="dark"] .nx-lang-switcher-pill .nx-lang-sep {
    color: #475569 !important;
}

/* 3. Password Generation Modal Polish */
.nx-modal-password .modal-content {
    border-radius: 1.25rem !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.nx-modal-password .modal-header {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
}

.nx-modal-password .modal-footer {
    border-bottom-left-radius: 1.25rem !important;
    border-bottom-right-radius: 1.25rem !important;
}

.nx-modal-header-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.nx-modal-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    font-size: 18px !important;
    color: #64748b !important;
}

.nx-modal-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    opacity: 1 !important;
}

/* 4. Localisation Modal Header & Icon */
.modal-localisation .nx-modal-header-icon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

@media (max-width: 991px) {
    .tt-form-wrap .tt-login-showcase-panel {
        display: none !important;
    }
    .tt-form-wrap .tt-form-container .tt-form-content {
        flex: 1 1 100% !important;
        padding: 36px 26px !important;
    }
}

@media (max-width: 767px) {
    #registration.tt-registration-form {
        padding: 28px 20px !important;
        border-radius: 20px !important;
    }
    .nx-section-card {
        padding: 18px 14px !important;
    }
    .nx-auth-title {
        font-size: 22px !important;
    }
}

/* Modern Color & Layout Utility Helpers */
.text-slate-900 { color: #0f172a !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-300 { color: #cbd5e1 !important; }

.bg-slate-50 { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }

.text-indigo-600 { color: #4f46e5 !important; }
.text-indigo-500 { color: #6366f1 !important; }
.bg-indigo-50 { background-color: #eef2ff !important; }

.text-emerald-900 { color: #064e3b !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-500 { color: #10b981 !important; }
.text-emerald-400 { color: #34d399 !important; }
.bg-emerald-50 { background-color: #ecfdf5 !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 2rem !important; }

/* ==========================================================================
   ENTERPRISE CONTACT & INTERACTIVE FAQ REDESIGN (.nx-contact-* & .nx-faq-*)
   ========================================================================== */

.nx-contact-wrapper {
    position: relative;
}

/* 1. Top Channel Highlight Cards with Gradient Accent Tops */
.nx-contact-channel-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 24px 22px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nx-card-accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4.5px;
}

.nx-card-indigo .nx-card-accent-bar { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.nx-card-emerald .nx-card-accent-bar { background: linear-gradient(90deg, #059669, #34d399); }
.nx-card-cyan .nx-card-accent-bar { background: linear-gradient(90deg, #0891b2, #38bdf8); }
.nx-card-amber .nx-card-accent-bar { background: linear-gradient(90deg, #d97706, #fbbf24); }

.nx-contact-channel-card:hover {
    transform: translateY(-5px);
}

.nx-card-indigo:hover {
    border-color: #c7d2fe;
    box-shadow: 0 20px 30px -8px rgba(79, 70, 229, 0.16), 0 8px 12px -4px rgba(79, 70, 229, 0.08);
}
.nx-card-emerald:hover {
    border-color: #a7f3d0;
    box-shadow: 0 20px 30px -8px rgba(16, 185, 129, 0.16), 0 8px 12px -4px rgba(16, 185, 129, 0.08);
}
.nx-card-cyan:hover {
    border-color: #bae6fd;
    box-shadow: 0 20px 30px -8px rgba(6, 182, 212, 0.16), 0 8px 12px -4px rgba(6, 182, 212, 0.08);
}
.nx-card-amber:hover {
    border-color: #fde68a;
    box-shadow: 0 20px 30px -8px rgba(245, 158, 11, 0.16), 0 8px 12px -4px rgba(245, 158, 11, 0.08);
}

.nx-channel-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.25s ease;
}

.nx-contact-channel-card:hover .nx-channel-icon {
    transform: scale(1.08);
}

.nx-icon-indigo { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
.nx-icon-emerald { background: rgba(16, 185, 129, 0.12); color: #059669; }
.nx-icon-cyan { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
.nx-icon-amber { background: rgba(245, 158, 11, 0.12); color: #d97706; }

.nx-channel-pill-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nx-tag-indigo { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
.nx-tag-emerald { background: rgba(16, 185, 129, 0.12); color: #059669; }
.nx-tag-cyan { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
.nx-tag-amber { background: rgba(245, 158, 11, 0.12); color: #d97706; }

.nx-channel-title {
    font-size: 17.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.015em;
}

.nx-channel-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 20px;
}

.nx-channel-metric {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.nx-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: nxStatusPulse 2s infinite;
}

@keyframes nxStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.nx-channel-btn {
    width: 100%;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-btn-indigo {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
}
.nx-btn-indigo:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.3) !important;
    transform: translateY(-2px) !important;
}

.nx-btn-emerald {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}
.nx-btn-emerald:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-2px) !important;
}

.nx-btn-cyan {
    background: #f0fdfa !important;
    color: #0f766e !important;
    border: 1px solid #99f6e4 !important;
}
.nx-btn-cyan:hover {
    background: #0891b2 !important;
    color: #ffffff !important;
    border-color: #0891b2 !important;
    box-shadow: 0 8px 18px rgba(6, 182, 212, 0.3) !important;
    transform: translateY(-2px) !important;
}

.nx-btn-amber {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}
.nx-btn-amber:hover {
    background: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* 2. Elevated Contact Form Card */
.nx-contact-form-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 22px;
    padding: 38px 34px;
    box-shadow: 0 14px 30px -6px rgba(15, 23, 42, 0.06), 0 8px 12px -4px rgba(15, 23, 42, 0.02);
}

.nx-form-badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.25);
    flex-shrink: 0;
}

.nx-live-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 20px;
    font-size: 12.5px;
    color: #065f46;
    font-weight: 500;
}

/* Department Selector Pills */
.nx-dept-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nx-dept-pill {
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    outline: none !important;
}

.nx-dept-pill:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    transform: translateY(-1px);
}

.nx-dept-pill.active {
    border-color: #4f46e5 !important;
    background: #eef2ff !important;
    color: #4338ca !important;
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.15) !important;
    font-weight: 700 !important;
}

.nx-field-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 7px;
    display: block;
}

.nx-msg-hint {
    font-size: 12px;
}

.nx-textarea {
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    color: #0f172a !important;
    background-color: #f8fafc !important;
    transition: all 0.2s ease !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

.nx-textarea:focus {
    background-color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12) !important;
    outline: none !important;
}

.nx-btn-send {
    height: 52px !important;
    font-size: 15.5px !important;
    border-radius: 14px !important;
    letter-spacing: -0.01em !important;
}

.nx-contact-success-banner {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.nx-success-icon {
    color: #10b981;
    font-size: 26px;
    line-height: 1;
}

/* 3. Featured WhatsApp Hero Card */
.nx-wa-hero-card {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 55%, #047857 100%) !important;
    border: 1.5px solid #059669 !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px -6px rgba(6, 78, 59, 0.3) !important;
    padding: 26px !important;
}

.nx-wa-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
    flex-shrink: 0;
}

.nx-wa-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
}

.nx-wa-status {
    font-size: 12px;
    color: #a7f3d0;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.nx-status-dot-emerald {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3);
    animation: nxStatusPulse 2s infinite;
    display: inline-block;
}

.nx-wa-desc {
    font-size: 13.5px;
    color: #d1fae5;
    line-height: 1.55;
    margin-bottom: 18px;
}

.nx-wa-cta-btn {
    background: #ffffff !important;
    color: #065f46 !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.nx-wa-cta-btn:hover {
    background: #f0fdf4 !important;
    color: #047857 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* 4. Direct Communication Sidebar Cards */
.nx-sidebar-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.04);
}

.nx-sidebar-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.nx-contact-method-list {
    display: flex;
    flex-direction: column;
}

.nx-contact-method-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

.nx-method-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nx-method-phone {
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}
.nx-method-email {
    color: #0284c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}
.nx-method-location {
    color: #d97706;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.nx-contact-method-item:hover .nx-method-icon {
    transform: scale(1.06);
}

.nx-method-info {
    flex: 1;
}

.nx-method-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 2px;
}

.nx-method-value {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.15s ease;
    line-height: 1.4;
}

.nx-method-value:hover {
    color: #4f46e5;
}

.nx-method-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.4;
}

.nx-dc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nx-dc-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11.5px;
    font-weight: 600;
    color: #334155;
}

/* Dark SLA Guarantee Banner */
.nx-card-highlight {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border: 1.5px solid #334155 !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.25) !important;
    color: #ffffff !important;
}

.nx-trust-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nx-trust-checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.nx-check-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.nx-client-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(79, 70, 229, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   5. ULTRA-ATTRACTIVE INTERACTIVE FAQ ACCORDION SECTION
   ========================================================================== */

.nx-contact-faq-section {
    position: relative;
}

.nx-faq-badge-top {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 24px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4338ca;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nx-faq-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 3px 6px -1px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.nx-faq-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 20px -3px rgba(15, 23, 42, 0.06);
}

.nx-faq-card.active {
    border-color: #818cf8;
    box-shadow: 0 14px 28px -4px rgba(79, 70, 229, 0.12), 0 4px 8px -2px rgba(79, 70, 229, 0.06);
}

.nx-faq-trigger {
    width: 100%;
    padding: 20px 22px;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.nx-faq-card.active .nx-faq-trigger {
    background: rgba(238, 242, 255, 0.35);
    border-bottom: 1px solid #f1f5f9;
}

.nx-faq-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.nx-faq-card:hover .nx-faq-icon-box {
    transform: scale(1.06);
}

.nx-faq-icon-indigo { background: #eef2ff; color: #4f46e5; }
.nx-faq-icon-emerald { background: #ecfdf5; color: #059669; }
.nx-faq-icon-cyan { background: #f0fdfa; color: #0891b2; }
.nx-faq-icon-purple { background: #faf5ff; color: #7c3aed; }
.nx-faq-icon-amber { background: #fffbeb; color: #d97706; }
.nx-faq-icon-rose { background: #fff1f2; color: #e11d48; }

.nx-faq-cat-tag {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #64748b;
    display: block;
    margin-bottom: 3px;
}

.nx-faq-question-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.nx-faq-chevron {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.nx-faq-card.active .nx-faq-chevron {
    transform: rotate(180deg);
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.nx-faq-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.3s ease;
    padding: 0 22px;
}

.nx-faq-card.active .nx-faq-body {
    max-height: 450px;
    opacity: 1;
    padding: 18px 22px 22px 22px;
}

.nx-faq-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 14px;
}

.nx-faq-highlights {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 6. Still Have Questions Help Hub Banner */
.nx-faq-help-hub {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 22px;
    padding: 28px 32px;
    box-shadow: 0 10px 25px -4px rgba(79, 70, 229, 0.08);
}

.nx-avatar-stack {
    display: flex;
    align-items: center;
}

.nx-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-right: -12px;
}

.nx-av-1 { background: linear-gradient(135deg, #4f46e5, #818cf8); color: #ffffff; z-index: 3; }
.nx-av-2 { background: linear-gradient(135deg, #059669, #34d399); color: #ffffff; z-index: 2; }
.nx-av-3 { background: linear-gradient(135deg, #d97706, #fbbf24); color: #ffffff; z-index: 1; }

.nx-hub-btn-wa {
    background: #25d366 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 11px 22px !important;
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
}

.nx-hub-btn-wa:hover {
    background: #20ba5a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4) !important;
    color: #ffffff !important;
}

.nx-hub-btn-ticket {
    background: #ffffff !important;
    color: #4f46e5 !important;
    border: 1.5px solid #c7d2fe !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 11px 22px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.nx-hub-btn-ticket:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.25) !important;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .nx-contact-channel-card {
        margin-bottom: 20px;
    }
    .nx-contact-sidebar {
        margin-top: 24px;
    }
    .nx-contact-form-card {
        padding: 28px 22px !important;
    }
    .nx-faq-help-hub {
        padding: 24px 20px !important;
    }
}

@media (max-width: 767px) {
    .nx-contact-channel-card {
        padding: 22px 18px !important;
    }
    .nx-contact-form-card {
        padding: 22px 16px !important;
        border-radius: 16px !important;
    }
    .nx-faq-trigger {
        padding: 16px 14px !important;
    }
    .nx-faq-card.active .nx-faq-body {
        padding: 14px 14px 18px 14px !important;
    }
}

/* ==========================================================================
   7. DARK THEME COMPATIBILITY FOR ALL CONTACT & FAQ ELEMENTS
   ========================================================================== */

[data-bs-theme="dark"] .nx-contact-channel-card,
.dark .nx-contact-channel-card,
[data-bs-theme="dark"] .nx-contact-form-card,
.dark .nx-contact-form-card,
[data-bs-theme="dark"] .nx-sidebar-card:not(.nx-card-highlight):not(.nx-wa-hero-card),
.dark .nx-sidebar-card:not(.nx-card-highlight):not(.nx-wa-hero-card),
[data-bs-theme="dark"] .nx-faq-card,
.dark .nx-faq-card {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-contact-channel-card:hover,
.dark .nx-contact-channel-card:hover,
[data-bs-theme="dark"] .nx-faq-card:hover,
.dark .nx-faq-card:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .nx-channel-title,
.dark .nx-channel-title,
[data-bs-theme="dark"] .nx-sidebar-card-title,
.dark .nx-sidebar-card-title,
[data-bs-theme="dark"] .nx-method-value,
.dark .nx-method-value,
[data-bs-theme="dark"] .nx-faq-question-title,
.dark .nx-faq-question-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-channel-desc,
.dark .nx-channel-desc,
[data-bs-theme="dark"] .nx-faq-text,
.dark .nx-faq-text,
[data-bs-theme="dark"] .nx-method-sub,
.dark .nx-method-sub {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-dept-pill,
.dark .nx-dept-pill {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-dept-pill.active,
.dark .nx-dept-pill.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: #818cf8 !important;
    color: #c7d2fe !important;
}

[data-bs-theme="dark"] .nx-method-icon,
.dark .nx-method-icon {
    background: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .nx-dc-pill,
.dark .nx-dc-pill {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-faq-card.active,
.dark .nx-faq-card.active {
    border-color: #6366f1 !important;
}

[data-bs-theme="dark"] .nx-faq-card.active .nx-faq-trigger,
.dark .nx-faq-card.active .nx-faq-trigger {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-faq-highlights,
.dark .nx-faq-highlights {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-faq-chevron,
.dark .nx-faq-chevron {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-faq-help-hub,
.dark .nx-faq-help-hub {
    background: linear-gradient(135deg, #111827 0%, #1e1b4b 100%) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-bs-theme="dark"] .nx-faq-help-hub h4,
.dark .nx-faq-help-hub h4 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-hub-btn-ticket,
.dark .nx-hub-btn-ticket {
    background: #1e293b !important;
    color: #c7d2fe !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

[data-bs-theme="dark"] .nx-textarea,
.dark .nx-textarea {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-textarea:focus,
.dark .nx-textarea:focus {
    background-color: #0f172a !important;
    border-color: #6366f1 !important;
}

[data-bs-theme="dark"] .nx-contact-method-item,
.dark .nx-contact-method-item {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-field-label,
.dark .nx-field-label {
    color: #e2e8f0 !important;
}

/* ==========================================================================
   ENTERPRISE SUPPORT TICKET SUBMISSION REDESIGN (.nx-ticket-*)
   ========================================================================== */

.nx-ticket-wrapper {
    position: relative;
}

.nx-ticket-badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.25);
    flex-shrink: 0;
}

.nx-ticket-form-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 22px;
    padding: 38px 34px;
    box-shadow: 0 14px 30px -6px rgba(15, 23, 42, 0.06), 0 8px 12px -4px rgba(15, 23, 42, 0.02);
}

.nx-form-subheading {
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    display: flex;
    align-items: center;
}

/* Modern Select Fields */
select.nx-select-field {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding-left: 48px !important;
    padding-right: 36px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}

select.nx-select-field:hover {
    border-color: #cbd5e1 !important;
    background-color: #ffffff !important;
}

select.nx-select-field:focus {
    background-color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12) !important;
    outline: none !important;
}

/* Markdown Editor Modern Theme */
.nx-editor-wrapper .md-editor,
.md-editor {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.nx-editor-wrapper .md-editor:focus-within,
.nx-editor-wrapper .md-editor.active,
.md-editor:focus-within,
.md-editor.active {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12) !important;
}

.nx-editor-wrapper .md-editor > .md-header,
.md-editor > .md-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
}

.nx-editor-wrapper .md-editor .btn-default,
.md-editor .btn-default {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.nx-editor-wrapper .md-editor .btn-default:hover,
.md-editor .btn-default:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.nx-editor-wrapper .md-editor .btn-primary,
.md-editor .btn-primary,
.md-editor button[data-name="cmdPreview"],
.md-editor [data-handler="bootstrap-markdown-cmdPreview"] {
    background: rgba(99, 102, 241, 0.08) !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
    color: #4f46e5 !important;
    border-radius: 8px !important;
    padding: 5px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
    line-height: 1.4 !important;
}

.nx-editor-wrapper .md-editor .btn-primary *,
.md-editor .btn-primary *,
.md-editor button[data-name="cmdPreview"] *,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"] * {
    color: inherit !important;
}

.md-editor button[data-name="cmdPreview"] .fa,
.md-editor button[data-name="cmdPreview"] .fas,
.md-editor button[data-name="cmdPreview"] .glyphicon,
.md-editor button[data-name="cmdPreview"] i,
.md-editor button[data-name="cmdPreview"] span,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"] .fa,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"] .fas,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"] .glyphicon,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"] i,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"] span {
    color: inherit !important;
}

/* Use modern eye icon for Preview using loaded Font Awesome */
.md-editor button[data-name="cmdPreview"] .fa-search,
.md-editor .btn-primary .fa-search {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

.md-editor button[data-name="cmdPreview"] .fa-search::before,
.md-editor .btn-primary .fa-search::before {
    content: "\f06e" !important; /* fa-eye icon */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

.nx-editor-wrapper .md-editor .btn-primary:hover,
.md-editor .btn-primary:hover,
.md-editor button[data-name="cmdPreview"]:hover,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"]:hover {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #4338ca !important;
}

/* When Preview is active/toggled on */
.nx-editor-wrapper .md-editor .btn-primary.active,
.md-editor .btn-primary.active,
.md-editor button[data-name="cmdPreview"].active,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"].active {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
}

.nx-editor-wrapper .md-editor .btn-primary.active *,
.md-editor .btn-primary.active *,
.md-editor button[data-name="cmdPreview"].active *,
.md-editor [data-handler="bootstrap-markdown-cmdPreview"].active * {
    color: #ffffff !important;
}

.nx-editor-wrapper .md-editor > textarea,
.md-editor > textarea {
    background: #ffffff !important;
    padding: 16px 18px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #0f172a !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    resize: vertical !important;
    min-height: 140px !important;
}

.nx-editor-wrapper .md-editor .md-footer,
.md-editor .md-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 6px 14px !important;
    font-size: 11.5px !important;
    color: #94a3b8 !important;
}

/* Attachment Upload Area */
.nx-ticket-attachment-box {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 16px;
    padding: 20px 22px;
    transition: all 0.2s ease;
}

.nx-ticket-attachment-box:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.nx-ticket-attachment-box .custom-file-label {
    border-radius: 12px 0 0 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-right: none !important;
    background: #ffffff !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    padding: 10px 14px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
}

.nx-ticket-attachment-box .custom-file-label::after {
    background: #e2e8f0 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
}

.nx-btn-add-file {
    border-radius: 0 12px 12px 0 !important;
    border: 1.5px solid #c7d2fe !important;
    border-left: none !important;
    background: #eef2ff !important;
    color: #4338ca !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    height: 46px !important;
    padding: 0 18px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

.nx-btn-add-file:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}

.nx-allowed-types {
    font-size: 12px;
    color: #64748b;
}

/* Submit and Cancel Buttons */
.nx-ticket-submit-btn {
    height: 50px !important;
    padding: 0 32px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    letter-spacing: -0.01em !important;
}

.nx-btn-cancel {
    height: 50px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.nx-btn-cancel:hover {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
}

/* Sidebar Tips List */
.nx-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nx-tips-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.nx-tip-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Step 1 Department Cards */
.nx-dept-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 24px 22px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nx-dept-card:hover {
    transform: translateY(-5px);
    border-color: #c7d2fe;
    box-shadow: 0 20px 30px -8px rgba(79, 70, 229, 0.16);
}

.nx-dept-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Dark Theme Support for Tickets */
[data-bs-theme="dark"] .nx-ticket-form-card,
.dark .nx-ticket-form-card,
[data-bs-theme="dark"] .nx-dept-card,
.dark .nx-dept-card {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-ticket-attachment-box,
.dark .nx-ticket-attachment-box {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] select.nx-select-field,
.dark select.nx-select-field {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] select.nx-select-field:focus,
.dark select.nx-select-field:focus {
    background-color: #0f172a !important;
    border-color: #6366f1 !important;
}

[data-bs-theme="dark"] .nx-ticket-form-card .form-control,
[data-bs-theme="dark"] .nx-ticket-form-card input.form-control,
[data-bs-theme="dark"] .nx-ticket-form-card .input-group-text,
[data-bs-theme="dark"] .nx-ticket-form-card .input-group-merge input,
.dark .nx-ticket-form-card .form-control,
.dark .nx-ticket-form-card input.form-control,
.dark .nx-ticket-form-card .input-group-text,
.dark .nx-ticket-form-card .input-group-merge input {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-ticket-form-card input.form-control::placeholder,
.dark .nx-ticket-form-card input.form-control::placeholder {
    color: #64748b !important;
}

[data-bs-theme="dark"] .nx-ticket-form-card input.form-control:focus,
.dark .nx-ticket-form-card input.form-control:focus {
    background-color: #0f172a !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .nx-ticket-form-card input.form-control:disabled,
[data-bs-theme="dark"] .nx-ticket-form-card input.form-control[disabled],
[data-bs-theme="dark"] .nx-ticket-form-card input.form-control.disabled,
.dark .nx-ticket-form-card input.form-control:disabled,
.dark .nx-ticket-form-card input.form-control[disabled],
.dark .nx-ticket-form-card input.form-control.disabled {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor,
[data-bs-theme="dark"] .md-editor,
.dark .nx-editor-wrapper .md-editor,
.dark .md-editor {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor > .md-header,
[data-bs-theme="dark"] .md-editor > .md-header,
.dark .nx-editor-wrapper .md-editor > .md-header,
.dark .md-editor > .md-header,
[data-bs-theme="dark"] .nx-editor-wrapper .md-editor .md-footer,
[data-bs-theme="dark"] .md-editor .md-footer,
.dark .nx-editor-wrapper .md-editor .md-footer,
.dark .md-editor .md-footer {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor > textarea,
[data-bs-theme="dark"] .md-editor > textarea,
.dark .nx-editor-wrapper .md-editor > textarea,
.dark .md-editor > textarea {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor .btn-default,
[data-bs-theme="dark"] .md-editor .btn-default,
.dark .nx-editor-wrapper .md-editor .btn-default,
.dark .md-editor .btn-default {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor .btn-default:hover,
[data-bs-theme="dark"] .md-editor .btn-default:hover,
.dark .nx-editor-wrapper .md-editor .btn-default:hover,
.dark .md-editor .btn-default:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor .btn-primary,
[data-bs-theme="dark"] .md-editor .btn-primary,
[data-bs-theme="dark"] .md-editor [data-handler="bootstrap-markdown-cmdPreview"],
.dark .nx-editor-wrapper .md-editor .btn-primary,
.dark .md-editor .btn-primary,
.dark .md-editor [data-handler="bootstrap-markdown-cmdPreview"] {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor .btn-primary:hover,
[data-bs-theme="dark"] .md-editor .btn-primary:hover,
[data-bs-theme="dark"] .md-editor [data-handler="bootstrap-markdown-cmdPreview"]:hover,
.dark .nx-editor-wrapper .md-editor .btn-primary:hover,
.dark .md-editor .btn-primary:hover,
.dark .md-editor [data-handler="bootstrap-markdown-cmdPreview"]:hover {
    background: rgba(99, 102, 241, 0.25) !important;
    color: #c7d2fe !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor .btn-primary.active,
[data-bs-theme="dark"] .md-editor .btn-primary.active,
[data-bs-theme="dark"] .md-editor [data-handler="bootstrap-markdown-cmdPreview"].active,
.dark .nx-editor-wrapper .md-editor .btn-primary.active,
.dark .md-editor .btn-primary.active,
.dark .md-editor [data-handler="bootstrap-markdown-cmdPreview"].active {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-editor-wrapper .md-editor .btn-primary.active *,
[data-bs-theme="dark"] .md-editor .btn-primary.active *,
[data-bs-theme="dark"] .md-editor [data-handler="bootstrap-markdown-cmdPreview"].active *,
.dark .nx-editor-wrapper .md-editor .btn-primary.active *,
.dark .md-editor .btn-primary.active *,
.dark .md-editor [data-handler="bootstrap-markdown-cmdPreview"].active * {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-btn-cancel,
.dark .nx-btn-cancel {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-btn-cancel:hover,
.dark .nx-btn-cancel:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-tip-num,
.dark .nx-tip-num {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #c7d2fe !important;
}

[data-bs-theme="dark"] .nx-form-subheading,
.dark .nx-form-subheading {
    color: #cbd5e1 !important;
}

@media (max-width: 991px) {
    .nx-ticket-form-card {
        padding: 28px 20px !important;
    }
    .nx-ticket-sidebar {
        margin-top: 24px !important;
    }
}

/* ==========================================================================
   ENTERPRISE CLIENT AREA DASHBOARD REDESIGN (.nx-dash-*, .client-home-cards)
   ========================================================================== */

/* 1. SaaS KPI Metric Tiles */
.nx-dashboard-tiles {
    position: relative;
}

.nx-dash-tile {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 24px 22px !important;
    display: block !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-dash-accent-line {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4.5px !important;
}

.nx-tile-indigo .nx-dash-accent-line { background: linear-gradient(90deg, #4f46e5, #818cf8) !important; }
.nx-tile-emerald .nx-dash-accent-line { background: linear-gradient(90deg, #059669, #34d399) !important; }
.nx-tile-amber .nx-dash-accent-line { background: linear-gradient(90deg, #d97706, #fbbf24) !important; }
.nx-tile-cyan .nx-dash-accent-line { background: linear-gradient(90deg, #0891b2, #38bdf8) !important; }

.nx-dash-tile:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    text-decoration: none !important;
}

.nx-tile-indigo:hover {
    border-color: #c7d2fe !important;
    box-shadow: 0 18px 28px -6px rgba(79, 70, 229, 0.16), 0 8px 12px -4px rgba(79, 70, 229, 0.08) !important;
}

.nx-tile-emerald:hover {
    border-color: #a7f3d0 !important;
    box-shadow: 0 18px 28px -6px rgba(16, 185, 129, 0.16), 0 8px 12px -4px rgba(16, 185, 129, 0.08) !important;
}

.nx-tile-amber:hover {
    border-color: #fde68a !important;
    box-shadow: 0 18px 28px -6px rgba(245, 158, 11, 0.16), 0 8px 12px -4px rgba(245, 158, 11, 0.08) !important;
}

.nx-tile-cyan:hover {
    border-color: #bae6fd !important;
    box-shadow: 0 18px 28px -6px rgba(6, 182, 212, 0.16), 0 8px 12px -4px rgba(6, 182, 212, 0.08) !important;
}

.nx-dash-tile-body {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.nx-dash-label {
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 700 !important;
    color: #64748b !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.nx-dash-count {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.02em !important;
}

.nx-dash-sub {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
}

.nx-dot-status {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.nx-dot-indigo { background: #4f46e5 !important; }
.nx-dot-emerald { background: #10b981 !important; }

.nx-dash-icon-box {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.nx-dash-tile:hover .nx-dash-icon-box {
    transform: scale(1.08) !important;
}

/* Specific pastel icon box styling for each KPI tile */
.nx-dash-tile .nx-icon-indigo {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border: 1px solid #e0e7ff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08) !important;
}

.nx-dash-tile .nx-icon-emerald {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #d1fae5 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08) !important;
}

.nx-dash-tile .nx-icon-amber {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fef3c7 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08) !important;
}

.nx-dash-tile .nx-icon-cyan {
    background: #ecfeff !important;
    color: #0891b2 !important;
    border: 1px solid #cffafe !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.08) !important;
}

/* 2. Client Area Dashboard Panels (.client-home-cards) */
.client-home-cards .card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    font-size: inherit !important;
    transition: all 0.25s ease !important;
}

.client-home-cards .card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.07) !important;
}

.client-home-cards .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.client-home-cards .card-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.client-home-cards .card-header-right {
    margin-left: auto !important;
}

.client-home-cards .card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
}

.client-home-cards .card-title i {
    color: #4f46e5 !important;
}

/* Panel Header Buttons */
.client-home-cards .card-header .btn,
.client-home-cards .nx-panel-btn {
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/* Specific Panel Header Button Colors */
.client-home-cards a[href*="action=services"] {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}
.client-home-cards a[href*="action=services"]:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}

.client-home-cards a[href*="action=domains"],
.client-home-cards a[href*="domains"] {
    background: #0f172a !important;
    color: #ffffff !important;
}
.client-home-cards a[href*="action=domains"]:hover,
.client-home-cards a[href*="domains"]:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

.client-home-cards a[href*="submitticket.php"] {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}
.client-home-cards a[href*="submitticket.php"]:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

.client-home-cards a[href*="announcements"] {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}
.client-home-cards a[href*="announcements"]:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Panel Body & List Groups */
.client-home-cards .card-body {
    padding: 16px 22px !important;
    max-height: none !important;
}

.client-home-cards .list-group {
    border: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}

.client-home-cards .list-group .list-group-item {
    padding: 18px 24px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: transparent !important;
    transition: background-color 0.15s ease !important;
}

.client-home-cards .list-group .list-group-item:hover {
    background-color: #f8fafc !important;
}

.client-home-cards .list-group .list-group-item:last-child {
    border-bottom: none !important;
}

/* Active Service List Item Typography */
.client-home-cards .list-group-item strong {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.client-home-cards .list-group-item .text-domain {
    font-size: 13px !important;
    color: #64748b !important;
    display: block !important;
    margin-top: 2px !important;
}

/* Modern Status Badges */
.client-home-cards .label.label-active,
.client-home-cards .badge-active,
.client-home-cards span.label-success,
.client-home-cards span.label-active,
.client-home-cards span.badge-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 8px !important;
}

/* Service Row Action Buttons */
.client-home-cards .btn-group > .btn {
    border-radius: 10px 0 0 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 7px 14px !important;
    transition: all 0.2s ease !important;
}

.client-home-cards .btn-group > .dropdown-toggle {
    border-radius: 0 10px 10px 0 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-left: none !important;
    background: #f8fafc !important;
    color: #64748b !important;
    padding: 7px 10px !important;
}

.client-home-cards .btn-group > .btn:hover,
.client-home-cards .btn-group > .dropdown-toggle:hover {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}

.client-home-cards .list-group-item a.btn:not(.dropdown-toggle) {
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 7px 14px !important;
    margin-left: 8px !important;
    transition: all 0.2s ease !important;
}

.client-home-cards .list-group-item a.btn:not(.dropdown-toggle):hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Card Footer / View More */
.client-home-cards .card-footer {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 12px 24px !important;
    text-align: right !important;
}

.client-home-cards .card-footer a {
    color: #4f46e5 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.client-home-cards .card-footer a:hover {
    color: #3730a3 !important;
    text-decoration: underline !important;
}

/* 3. Register a New Domain Modern Executive Search Bar */
.nx-domain-card-body {
    padding: 22px 24px !important;
}

.nx-domain-search-form {
    margin: 0 !important;
    width: 100% !important;
}

.nx-domain-search-box {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 6px 8px 6px 16px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    gap: 12px !important;
}

.nx-domain-search-box:focus-within {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(99, 102, 241, 0.08) !important;
    background: #ffffff !important;
}

.nx-domain-search-icon {
    font-size: 19px !important;
    color: #6366f1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.nx-domain-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: #0f172a !important;
    font-weight: 500 !important;
    padding: 6px 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 38px !important;
}

.nx-domain-input:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.nx-domain-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.nx-domain-btn-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.nx-btn-domain-register {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28) !important;
}

.nx-btn-domain-register:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.38) !important;
}

.nx-btn-domain-transfer {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.nx-btn-domain-transfer:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

.nx-domain-quick-tags {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.nx-quick-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.nx-tag-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.15s ease !important;
}

.nx-tag-pill:hover {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
    transform: translateY(-1px) !important;
}

/* 4. Left Sidebar Elevation */
.card-sidebar {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 22px !important;
}

.card-sidebar .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 20px !important;
}

.card-sidebar .card-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #334155 !important;
}

/* Update Button in Client Details Sidebar */
div[menuitemname="Client Details"] .card-footer .btn,
div[menuitemname="Client Details"] .btn-success {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border: 1.5px solid #c7d2fe !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

div[menuitemname="Client Details"] .card-footer .btn i,
div[menuitemname="Client Details"] .btn-success i {
    font-size: 12.5px !important;
    margin: 0 !important;
}

div[menuitemname="Client Details"] .card-footer .btn:hover,
div[menuitemname="Client Details"] .btn-success:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25) !important;
}

[data-bs-theme="dark"] div[menuitemname="Client Details"] .card-footer .btn,
[data-bs-theme="dark"] div[menuitemname="Client Details"] .btn-success,
.dark div[menuitemname="Client Details"] .card-footer .btn,
.dark div[menuitemname="Client Details"] .btn-success {
    background: rgba(79, 70, 229, 0.15) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-bs-theme="dark"] div[menuitemname="Client Details"] .card-footer .btn:hover,
[data-bs-theme="dark"] div[menuitemname="Client Details"] .btn-success:hover,
.dark div[menuitemname="Client Details"] .card-footer .btn:hover,
.dark div[menuitemname="Client Details"] .btn-success:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

div[menuitemname="Client Contacts"] .card-footer .btn {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    width: 100% !important;
}

div[menuitemname="Client Contacts"] .card-footer .btn:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Dark Theme Support for Client Area Dashboard */
[data-bs-theme="dark"] .nx-dash-tile,
.dark .nx-dash-tile,
[data-bs-theme="dark"] .client-home-cards .card,
.dark .client-home-cards .card,
[data-bs-theme="dark"] .card-sidebar,
.dark .card-sidebar {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-dash-tile:hover,
.dark .nx-dash-tile:hover,
[data-bs-theme="dark"] .client-home-cards .card:hover,
.dark .client-home-cards .card:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .nx-dash-tile .nx-icon-indigo,
.dark .nx-dash-tile .nx-icon-indigo {
    background: rgba(99, 102, 241, 0.16) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-bs-theme="dark"] .nx-dash-tile .nx-icon-emerald,
.dark .nx-dash-tile .nx-icon-emerald {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-bs-theme="dark"] .nx-dash-tile .nx-icon-amber,
.dark .nx-dash-tile .nx-icon-amber {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-bs-theme="dark"] .nx-dash-tile .nx-icon-cyan,
.dark .nx-dash-tile .nx-icon-cyan {
    background: rgba(6, 182, 212, 0.16) !important;
    color: #67e8f9 !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}

[data-bs-theme="dark"] .nx-dash-count,
.dark .nx-dash-count,
[data-bs-theme="dark"] .client-home-cards .card-title,
.dark .client-home-cards .card-title,
[data-bs-theme="dark"] .client-home-cards .list-group-item strong,
.dark .client-home-cards .list-group-item strong {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-dash-label,
.dark .nx-dash-label,
[data-bs-theme="dark"] .nx-dash-sub,
.dark .nx-dash-sub,
[data-bs-theme="dark"] .client-home-cards .list-group-item .text-domain,
.dark .client-home-cards .list-group-item .text-domain,
[data-bs-theme="dark"] .card-sidebar .card-title,
.dark .card-sidebar .card-title {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .client-home-cards .card-header,
.dark .client-home-cards .card-header,
[data-bs-theme="dark"] .client-home-cards .card-footer,
.dark .client-home-cards .card-footer,
[data-bs-theme="dark"] .card-sidebar .card-header,
.dark .card-sidebar .card-header {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .client-home-cards .list-group .list-group-item,
.dark .client-home-cards .list-group .list-group-item {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .client-home-cards .list-group .list-group-item:hover,
.dark .client-home-cards .list-group .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .client-home-cards .btn-group > .btn,
.dark .client-home-cards .btn-group > .btn,
[data-bs-theme="dark"] .client-home-cards .btn-group > .dropdown-toggle,
.dark .client-home-cards .btn-group > .dropdown-toggle,
[data-bs-theme="dark"] .client-home-cards .list-group-item a.btn:not(.dropdown-toggle),
.dark .client-home-cards .list-group-item a.btn:not(.dropdown-toggle) {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .client-home-cards .btn-group > .btn:hover,
.dark .client-home-cards .btn-group > .btn:hover,
[data-bs-theme="dark"] .client-home-cards .list-group-item a.btn:not(.dropdown-toggle):hover,
.dark .client-home-cards .list-group-item a.btn:not(.dropdown-toggle):hover {
    background: #334155 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] div[menuitemname="Register a New Domain"] form input[type="text"],
.dark div[menuitemname="Register a New Domain"] form input[type="text"] {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

/* ==========================================================================
   ENHANCED ACTIVE SERVICES & CLIENT DASHBOARD INTERFACES
   ========================================================================== */

/* Accent bars & Single Uniform Border on client home panels */
div[menuitemname="Active Products/Services"],
div[menuitemname="Expiring Domains"], 
div[menuitemname="Domains Expiring Soon"],
div[menuitemname="Recent Support Tickets"],
div[menuitemname="Register a New Domain"],
div[menuitemname="Recent News"] { 
    border-top: 1.5px solid #e2e8f0 !important; 
}

/* Dual Border Fix for Active Products/Services */
div[menuitemname="Active Products/Services"] .list-group .list-group-item {
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
}

div[menuitemname="Active Products/Services"] .list-group .list-group-item:last-child {
    border-bottom: none !important;
}

/* Enhanced Active Service Row - Clean Single Border and Padding */
.nx-service-row {
    display: flex !important;
    align-items: center !important;
    padding: 18px 24px !important;
    border: none !important;
    border-bottom: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    gap: 16px !important;
    background: transparent !important;
}

.nx-service-row:hover {
    background-color: #f8fafc !important;
}

.nx-service-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(79, 70, 229, 0.1) !important;
}

.nx-service-row:hover .nx-service-avatar {
    transform: scale(1.06) !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

.nx-service-row .div-service-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
}

.nx-service-title-wrap {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.nx-service-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
    display: inline-block !important;
}

.nx-service-domain {
    font-size: 13px !important;
    color: #64748b !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: -0.01em !important;
}

.div-service-status {
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

.div-service-status .label,
.div-service-status .label:not(.label-placeholder),
.client-home-cards .div-service-status .label,
.client-home-cards .div-service-status .label:not(.label-placeholder),
.div-service-status .nx-badge-status {
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.nx-badge-status.label-Active,
.nx-badge-status.label-active,
.label-Active,
.label-active {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.nx-status-dot-sm {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.nx-service-row .div-service-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.nx-btn-cpanel {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    padding: 0 12px !important;
    height: 32px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.btn-group > .nx-btn-cpanel,
.client-home-cards .btn-group > .nx-btn-cpanel {
    border-radius: 9px 0 0 9px !important;
    margin-right: 0 !important;
    height: 32px !important;
    padding: 0 12px !important;
}

.btn-group > .nx-btn-cpanel:only-child,
.client-home-cards .btn-group > .nx-btn-cpanel:only-child,
a.nx-btn-cpanel {
    border-radius: 9px !important;
}

.btn-group-service-action > .btn-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.nx-btn-cpanel-caret,
.client-home-cards .btn-group > .nx-btn-cpanel-caret {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-left: none !important;
    border-radius: 0 9px 9px 0 !important;
    color: #64748b !important;
    padding: 0 9px !important;
    height: 32px !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nx-btn-cpanel:hover,
.nx-btn-cpanel-caret:hover {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-color: #c7d2fe !important;
}

.nx-btn-details,
.btn-view-details {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    color: #475569 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.nx-btn-details:hover,
.btn-view-details:hover {
    background: #f1f5f9 !important;
    color: #4f46e5 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

/* Override WHMCS Twenty-One theme.css which hides the icon on screens >= 768px */
.div-service-buttons .btn-view-details i,
.div-service-buttons .nx-btn-details i,
.client-home-cards .div-service-buttons .btn-view-details i,
.client-home-cards .div-service-buttons .nx-btn-details i {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    color: inherit !important;
    line-height: 1 !important;
}

/* Ensure action button groups are visible on all screen sizes */
.div-service-buttons .btn-group,
.div-service-buttons .btn-group-secondary,
.div-service-buttons .btn-group-service-action,
.client-home-cards .div-service-buttons .btn-group {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
}
.client-home-cards .list-group-item .btn-group-service-action > .btn-group {
    margin-left: 0 !important;
}

/* 8. DEFINITIVE NAVIGATION MENU SINGLE-ICON ARCHITECTURE */
/* Disable legacy CSS pseudo-element icons on all menus so ONLY dynamic HTML icon badges render */
.main-navbar-wrapper ul#nav .dropdown-menu li a:before,
.main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link:before,
.offcanvas-collapse ul#nav > li > a::before,
.offcanvas-collapse ul#nav .dropdown-menu li a:before,
.offcanvas-collapse ul#nav .dropdown-menu .dropdown-link:before,
ul#nav .dropdown-menu li a:before,
ul#nav .dropdown-menu .dropdown-link:before {
    display: none !important;
    content: none !important;
}

/* Elegant Icon Badge for Dropdown & Drawer Menu Items */
.nx-nav-icon-badge {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-size: 13.5px !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.08) !important;
}

[data-bs-theme="dark"] .nx-nav-icon-badge,
.dark .nx-nav-icon-badge {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    box-shadow: none !important;
}

.dropdown-menu .dropdown-link:hover .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li > a:hover .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li.active > a .nx-nav-icon-badge {
    transform: scale(1.08) !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-link:hover .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li > a:hover .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li.active > a .nx-nav-icon-badge i {
    color: #ffffff !important;
}

/* On desktop horizontal bar (> 991px), keep top-level items typographic and uncluttered */
@media (min-width: 992px) {
    .main-navbar-wrapper ul#nav > li.nav-item > a.nav-link > .nx-nav-icon-badge {
        display: none !important;
    }
}

/* On mobile drawer (<= 991px), display the top-level icon badge with proper alignment */
@media (max-width: 991.98px) {
    .offcanvas-collapse ul#nav > li.nav-item > a.nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
    }
    .offcanvas-collapse ul#nav > li.nav-item > a.nav-link > .nx-nav-icon-badge {
        display: inline-flex !important;
    }
}

/* 9. HEADER CART BADGE SCROLLBAR PROTECTION */
.tt-toolbar-wrap .cart-btn,
.navbar-nav .cart-btn {
    margin-right: 8px !important;
}
.tt-toolbar-wrap .header-cart-badge,
.cart-btn .header-cart-badge,
#cartItemCount {
    right: -2px !important;
    top: -3px !important;
}

/* 10. TICKET TABLE BORDER GAP & SEARCH BOX PADDING */
.nx-tickets-table-wrapper {
    padding: 16px 18px !important;
    box-sizing: border-box !important;
}
.nx-tickets-table-wrapper .dataTables_filter {
    padding: 0 0 12px 0 !important;
    float: left !important;
    width: 100% !important;
}
.nx-tickets-table-wrapper .dataTables_filter label {
    margin: 0 !important;
    width: 100% !important;
    max-width: 260px !important;
}
@media (max-width: 767.98px) {
    .nx-tickets-table-wrapper .dataTables_filter label {
        max-width: 100% !important;
    }
    .nx-tickets-table-wrapper #tableTicketsList tbody tr {
        margin-bottom: 14px !important;
    }
}

/* 11. COMPACT CREATIVE HERO CONSOLE ENHANCEMENTS */
#heroGaugeCircle {
    transition: stroke-dasharray 0.7s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease;
}

@keyframes nxPulseSubtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.nx-hero-section .nx-float-badge,
.nx-hero-section .nx-float-badge-delay {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    animation: nxFloatSlow 4s ease-in-out infinite alternate !important;
}

.nx-hero-section .nx-float-badge-delay {
    animation-delay: 2s !important;
}

/* Pristine Segmented Control (Zero default browser button borders/bevels) */
.nx-segmented-control {
    display: flex !important;
    align-items: center !important;
    background: #f1f5f9 !important;
    padding: 3.5px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    gap: 3px !important;
    box-sizing: border-box !important;
}

[data-bs-theme="dark"] .nx-segmented-control,
.dark .nx-segmented-control {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.nx-segment-btn {
    flex: 1 1 0% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 6.5px 10px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    line-height: 1.25 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    white-space: nowrap !important;
}

.nx-segment-btn:hover {
    color: #4f46e5 !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

[data-bs-theme="dark"] .nx-segment-btn,
.dark .nx-segment-btn {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-segment-btn:hover,
.dark .nx-segment-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.nx-segment-btn.active {
    background: #ffffff !important;
    color: #4f46e5 !important;
    box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="dark"] .nx-segment-btn.active,
.dark .nx-segment-btn.active {
    background: #334155 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.4) !important;
}





/* Domains Expiring Alert Banner */
.nx-expiring-alert {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.5) 0%, rgba(253, 230, 138, 0.25) 100%) !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.nx-expiring-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #fef08a !important;
    color: #b45309 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.nx-expiring-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.nx-expiring-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #92400e !important;
    margin-bottom: 2px !important;
}

.nx-expiring-desc {
    font-size: 13px !important;
    color: #78350f !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.nx-btn-renew-quick {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 9px 16px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.nx-btn-renew-quick:hover {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35) !important;
}

/* Empty Support Tickets State */
.nx-empty-tickets-card {
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
}

.nx-empty-ticket-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.nx-empty-ticket-info {
    flex: 1 1 180px !important;
    min-width: 160px !important;
}

.nx-empty-ticket-heading {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 2px 0 !important;
}

.nx-empty-ticket-sub {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.nx-btn-ticket-create {
    background: #ffffff !important;
    color: #059669 !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 9px 16px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.nx-btn-ticket-create:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
}

/* News Empty State */
.nx-news-item {
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.nx-news-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.nx-news-heading {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 2px 0 !important;
}

.nx-news-sub {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Sidebar Info Formatting - Tight Balanced Layout */
div[menuitemname="Client Details"] .card-body {
    padding: 18px 20px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
}

div[menuitemname="Client Details"] .card-body strong,
.nx-client-info-details strong {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 3px !important;
    letter-spacing: -0.01em !important;
}

div[menuitemname="Client Details"] .card-body em,
.nx-client-info-details em {
    font-style: normal !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}

/* Ensure normal line breaks inside address lines */
div[menuitemname="Client Details"] .card-body br,
.nx-client-info-details br {
    display: inline !important;
}

/* Hide ONLY the redundant line breaks following the block-level strong and em */
div[menuitemname="Client Details"] .card-body strong + br,
div[menuitemname="Client Details"] .card-body strong + br + br,
.nx-client-info-details strong + br,
.nx-client-info-details strong + br + br,
div[menuitemname="Client Details"] .card-body em + br,
div[menuitemname="Client Details"] .card-body em + br + br,
.nx-client-info-details em + br,
.nx-client-info-details em + br + br {
    display: none !important;
}

.nx-client-info-details {
    line-height: 1.55 !important;
}

div[menuitemname="Client Details"] .card-footer {
    padding: 10px 22px 22px 22px !important;
    background: transparent !important;
    border-top: none !important;
}

/* Dark Theme for Service Rows & Dashboard Components */
[data-bs-theme="dark"] .nx-service-row:hover,
.dark .nx-service-row:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .nx-service-title,
.dark .nx-service-title,
[data-bs-theme="dark"] div[menuitemname="Client Details"] .card-body strong,
.dark div[menuitemname="Client Details"] .card-body strong {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-service-avatar,
.dark .nx-service-avatar {
    background: #1f2937 !important;
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .nx-btn-cpanel,
.dark .nx-btn-cpanel,
[data-bs-theme="dark"] .nx-btn-cpanel-caret,
.dark .nx-btn-cpanel-caret,
[data-bs-theme="dark"] .nx-btn-details,
.dark .nx-btn-details {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-btn-cpanel:hover,
.dark .nx-btn-cpanel:hover,
[data-bs-theme="dark"] .nx-btn-details:hover,
.dark .nx-btn-details:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-domain-search-box,
.dark .nx-domain-search-box {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .nx-domain-input,
.dark .nx-domain-input {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-btn-domain-transfer,
.dark .nx-btn-domain-transfer {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-tag-pill,
.dark .nx-tag-pill {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-expiring-alert,
.dark .nx-expiring-alert {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-bs-theme="dark"] .nx-expiring-title,
.dark .nx-expiring-title {
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .nx-expiring-desc,
.dark .nx-expiring-desc {
    color: #fde68a !important;
}

[data-bs-theme="dark"] .nx-empty-tickets-card,
.dark .nx-empty-tickets-card,
[data-bs-theme="dark"] .nx-news-item,
.dark .nx-news-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .nx-empty-ticket-heading,
.dark .nx-empty-ticket-heading,
[data-bs-theme="dark"] .nx-news-heading,
.dark .nx-news-heading {
    color: #f1f5f9 !important;
}

/* Mobile Responsiveness for Client Dashboard Components */
@media (max-width: 576px) {
    .nx-domain-search-box {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    .nx-domain-btn-group {
        width: 100% !important;
    }
    .nx-btn-domain-register,
    .nx-btn-domain-transfer {
        flex: 1 !important;
    }
    .nx-expiring-alert,
    .nx-empty-tickets-card,
    .nx-news-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .nx-btn-renew-quick,
    .nx-btn-ticket-create {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   MY PRODUCTS & SERVICES (SaaS Executive Overhaul)
   ========================================================================== */

/* 1. Sidebar Cards & View Filter Navigation */
.sidebar .card,
.card-sidebar {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    transition: box-shadow 0.2s ease !important;
}

.sidebar .card:hover,
.card-sidebar:hover {
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07) !important;
}

.sidebar .card .card-header,
.card-sidebar .card-header {
    background: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 13px 18px !important;
}

.sidebar .card .card-title,
.card-sidebar .card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sidebar .card .card-title i,
.card-sidebar .card-title i {
    color: #6366f1 !important;
    font-size: 12px !important;
}

.sidebar .card .list-group-item,
.card-sidebar .list-group-item {
    display: flex !important;
    align-items: center !important;
    padding: 11px 18px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.sidebar .card .list-group-item:last-child,
.card-sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

.sidebar .card .list-group-item:hover,
.card-sidebar .list-group-item:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

/* Modern Status Dots for Filter items (replacing wireframe font icons) */
.view-filter-btns .list-group-item i.fa-circle,
.view-filter-btns .list-group-item i.fa-dot-circle {
    width: 8.5px !important;
    height: 8.5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15) !important;
}

.view-filter-btns .list-group-item i.fa-circle::before,
.view-filter-btns .list-group-item i.fa-dot-circle::before {
    display: none !important;
}

.view-filter-btns .list-group-item[menuitemname="Active"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Active"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Active Services"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Active Services"] i.fa-dot-circle {
    background-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.view-filter-btns .list-group-item[menuitemname="Pending"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Pending"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Pending Services"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Pending Services"] i.fa-dot-circle {
    background-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}

.view-filter-btns .list-group-item[menuitemname="Suspended"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Suspended"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Suspended Services"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Suspended Services"] i.fa-dot-circle {
    background-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

/* Sidebar Item Label */
.sidebar .card .list-group-item .nx-sidebar-label,
.sidebar .card .list-group-item span:not(.badge):not(.loading),
.card-sidebar .list-group-item .nx-sidebar-label,
.card-sidebar .list-group-item span:not(.badge):not(.loading) {
    flex: 1 1 auto !important;
    font-weight: 500 !important;
    color: inherit !important;
}

/* Sidebar Item Badges */
.sidebar .card .list-group-item .badge,
.card-sidebar .list-group-item .badge {
    margin-left: auto !important;
    float: none !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 2.5px 8px !important;
    min-width: 24px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
}

/* Sidebar Active State (Selected Filter) */
.sidebar .card .list-group-item.active,
.card-sidebar .list-group-item.active {
    background: #f0f4ff !important;
    color: #4f46e5 !important;
    border-left: 3.5px solid #4f46e5 !important;
    font-weight: 600 !important;
}

.sidebar .card .list-group-item.active .nx-sidebar-label,
.sidebar .card .list-group-item.active span:not(.badge):not(.loading),
.card-sidebar .list-group-item.active .nx-sidebar-label,
.card-sidebar .list-group-item.active span:not(.badge):not(.loading) {
    color: #4f46e5 !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item.active,
.dark .sidebar .card .list-group-item.active,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active,
.dark .card-sidebar .list-group-item.active {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #a5b4fc !important;
    border-left-color: #818cf8 !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item.active .nx-sidebar-label,
.dark .sidebar .card .list-group-item.active .nx-sidebar-label,
[data-bs-theme="dark"] .sidebar .card .list-group-item.active span:not(.badge):not(.loading),
.dark .sidebar .card .list-group-item.active span:not(.badge):not(.loading),
[data-bs-theme="dark"] .card-sidebar .list-group-item.active .nx-sidebar-label,
.dark .card-sidebar .list-group-item.active .nx-sidebar-label,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active span:not(.badge):not(.loading),
.dark .card-sidebar .list-group-item.active span:not(.badge):not(.loading) {
    color: #ffffff !important;
}

.sidebar .card .list-group-item.active .badge,
.card-sidebar .list-group-item.active .badge {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.28) !important;
}

.sidebar .card .list-group-item i.fa-check,
.card-sidebar .list-group-item i.fa-check {
    color: #4f46e5 !important;
    font-size: 11px !important;
    margin-left: 8px !important;
    float: none !important;
}

/* Actions Card Mini-Avatar Badges */
div[menuitemname="Actions"] .list-group-item i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    margin-right: 12px !important;
    transition: all 0.2s ease !important;
}

div[menuitemname="Actions"] .list-group-item:first-child i,
div[menuitemname="Actions"] .list-group-item i.fa-shopping-cart {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border: 1px solid #e0e7ff !important;
}

div[menuitemname="Actions"] .list-group-item:last-child i,
div[menuitemname="Actions"] .list-group-item i.fa-cubes {
    background: #faf5ff !important;
    color: #7c3aed !important;
    border: 1px solid #f3e8ff !important;
}

div[menuitemname="Actions"] .list-group-item:hover i {
    transform: scale(1.08) !important;
}

div[menuitemname="Actions"] .list-group-item {
    font-weight: 600 !important;
    color: #334155 !important;
}

div[menuitemname="Actions"] .list-group-item:hover {
    color: #4f46e5 !important;
    background: #f8fafc !important;
    transform: translateX(2px) !important;
}

/* 2. Unified DataTables Container & SaaS Card Toolbar */
.dataTables_wrapper:not(#tableDomainsList_wrapper):not(#tableInvoicesList_wrapper):not(#tableQuotesList_wrapper):not(#tableTicketsList_wrapper):not(#tableServicesList_wrapper):not(#tableDomainPricing_wrapper) {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 2rem !important;
}

.dataTables_wrapper .listtable,
.nx-services-table-wrapper,
.nx-tickets-table-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_info {
    float: left !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 16px 22px !important;
    margin: 0 !important;
    line-height: 2 !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
    padding: 12px 20px !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_filter label {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input.form-control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f8fafc !important;
    padding: 8px 14px 8px 36px !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    outline: none !important;
    width: 230px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 11px center !important;
    background-size: 16px 16px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    background-color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.15) !important;
    width: 270px !important;
}

/* 3. Unified Bottom Footer Bar (Length Selector & Pagination) */
.dataTables_wrapper::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.dataTables_wrapper .dataTables_length {
    float: left !important;
    padding: 16px 22px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: transparent !important;
    border-top: 1px solid #f1f5f9 !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    padding: 5px 28px 5px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 6px !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px 12px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #6366f1 !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    padding: 14px 22px !important;
    margin: 0 !important;
    background: transparent !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
}

/* Eliminate dual border: Strip the wrapping <li> completely */
.dataTables_wrapper .dataTables_paginate ul.pagination li,
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button,
.dataTables_wrapper .dataTables_paginate ul.pagination li.page-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
}

/* Style only the inner <a> link element as the single clean button */
.dataTables_wrapper .dataTables_paginate ul.pagination .page-item .page-link,
.dataTables_wrapper .dataTables_paginate > a.paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.15s ease !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination .page-item .page-link:hover,
.dataTables_wrapper .dataTables_paginate > a.paginate_button:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Active Page Button (Single crisp border, Indigo gradient) */
.dataTables_wrapper .dataTables_paginate ul.pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.current,
.pagination > .active > a,
.pagination > .active > span {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border: 1px solid #4338ca !important;
    box-shadow: 0 4px 10px -1px rgba(79, 70, 229, 0.35) !important;
    font-weight: 700 !important;
}

/* Disabled Page Buttons */
.dataTables_wrapper .dataTables_paginate ul.pagination .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.disabled:hover {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

/* 4. Products & Services Table Styling */
.dataTables_wrapper table.table-list,
.nx-services-table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
}

.nx-services-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 13px 18px !important;
    border-top: 1.5px solid #e2e8f0 !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    position: relative !important;
    padding-right: 28px !important;
}

.nx-services-table thead th.nx-th-product,
.nx-services-table thead th.text-left {
    text-align: left !important;
    padding-left: 14px !important;
}

/* Subtle clean DataTables sorting arrows */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after {
    font-size: 8px !important;
    right: 10px !important;
    opacity: 0.22 !important;
    color: #64748b !important;
    line-height: 1 !important;
}

table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:after {
    opacity: 0.95 !important;
    color: #4f46e5 !important;
}

.nx-services-table tbody tr {
    background: #ffffff !important;
    transition: background-color 0.15s ease !important;
    cursor: pointer !important;
}

/* Eliminate jarring blue hover and replace with soft SaaS tint */
.dataTables_wrapper table.nx-services-table tbody tr:hover > td,
.dataTables_wrapper table.nx-services-table tbody tr:hover > *,
table.dataTable.nx-services-table tbody tr:hover > td,
table.dataTable.nx-services-table tbody tr:hover > *,
table.table-list.nx-services-table tbody tr:hover > td,
.nx-services-table tbody tr:hover > td,
.nx-services-table tbody tr:hover {
    background-color: #f8fafc !important;
    box-shadow: none !important;
}

.nx-services-table tbody td {
    padding: 15px 18px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-left: none !important;
    border-right: none !important;
}

.nx-services-table tbody td.nx-td-product,
.nx-services-table tbody td:nth-child(2) {
    text-align: left !important;
    padding-left: 14px !important;
}

.nx-services-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* SSL Tile Container */
.nx-ssl-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.nx-services-table tbody tr:hover .nx-ssl-tile {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.nx-ssl-tile img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Product & Domain Cell */
.nx-table-product-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 4px !important;
}

.nx-table-product-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

.nx-table-domain-link {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12.5px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    color: #4f46e5 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
    width: fit-content !important;
}

.nx-table-domain-link:hover {
    color: #3730a3 !important;
    text-decoration: underline !important;
}

.nx-table-domain-empty {
    font-size: 13px !important;
    color: #94a3b8 !important;
}

/* Pricing Cell */
.nx-table-pricing-cell {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.nx-table-amount {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.nx-table-cycle {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
}

.nx-table-cycle.is-free,
.nx-table-cycle {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

.nx-table-cycle.is-paid {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #e0e7ff !important;
}

/* Next Due Date Cell */
.nx-table-date-cell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}

.nx-date-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}

.nx-date-none {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    padding: 2px 9px !important;
    border-radius: 6px !important;
}

/* Status Badges with Pulse Dot */
.nx-badge-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    border-width: 1px !important;
    border-style: solid !important;
    text-transform: uppercase !important;
}

.nx-status-dot-sm {
    width: 6.5px !important;
    height: 6.5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.status-active.nx-badge-status,
.nx-badge-status.status-active,
.status-paid.nx-badge-status,
.nx-badge-status.status-paid {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.status-active .nx-status-dot-sm,
.status-paid .nx-status-dot-sm {
    background: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2) !important;
    animation: nxStatusPulse 2s infinite ease-in-out !important;
}

.status-pending.nx-badge-status,
.nx-badge-status.status-pending,
.status-unpaid.nx-badge-status,
.nx-badge-status.status-unpaid {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.status-pending .nx-status-dot-sm,
.status-unpaid .nx-status-dot-sm {
    background: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
    animation: nxStatusPulse 2s infinite ease-in-out !important;
}

.status-refunded.nx-badge-status,
.nx-badge-status.status-refunded {
    background: #faf5ff !important;
    border-color: #e9d5ff !important;
    color: #7e22ce !important;
}

.status-refunded .nx-status-dot-sm {
    background: #a855f7 !important;
}

.status-suspended.nx-badge-status,
.nx-badge-status.status-suspended {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.status-suspended .nx-status-dot-sm {
    background: #ef4444 !important;
}

.status-terminated.nx-badge-status,
.status-cancelled.nx-badge-status,
.nx-badge-status.status-terminated,
.nx-badge-status.status-cancelled {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

.status-terminated .nx-status-dot-sm,
.status-cancelled .nx-status-dot-sm {
    background: #94a3b8 !important;
}

@keyframes nxStatusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

/* Manage Action Button */
.nx-btn-table-manage {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.nx-btn-table-manage i {
    font-size: 10px !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
}

.nx-services-table tbody tr:hover .nx-btn-table-manage,
.nx-btn-table-manage:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.nx-services-table tbody tr:hover .nx-btn-table-manage i,
.nx-btn-table-manage:hover i {
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

/* 5. Dark Mode Overhauls for Services Page */
[data-bs-theme="dark"] .sidebar .card,
.dark .sidebar .card,
[data-bs-theme="dark"] .card-sidebar,
.dark .card-sidebar {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .sidebar .card .card-header,
.dark .sidebar .card .card-header,
[data-bs-theme="dark"] .card-sidebar .card-header,
.dark .card-sidebar .card-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .sidebar .card .card-title,
.dark .sidebar .card .card-title,
[data-bs-theme="dark"] .card-sidebar .card-title,
.dark .card-sidebar .card-title {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item,
.dark .sidebar .card .list-group-item,
[data-bs-theme="dark"] .card-sidebar .list-group-item,
.dark .card-sidebar .list-group-item {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item:hover,
.dark .sidebar .card .list-group-item:hover,
[data-bs-theme="dark"] .card-sidebar .list-group-item:hover,
.dark .card-sidebar .list-group-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item.active,
.dark .sidebar .card .list-group-item.active,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active,
.dark .card-sidebar .list-group-item.active {
    background: rgba(79, 70, 229, 0.15) !important;
    color: #818cf8 !important;
    border-left-color: #6366f1 !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item .badge,
.dark .sidebar .card .list-group-item .badge,
[data-bs-theme="dark"] .card-sidebar .list-group-item .badge,
.dark .card-sidebar .list-group-item .badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item.active .badge,
.dark .sidebar .card .list-group-item.active .badge,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active .badge,
.dark .card-sidebar .list-group-item.active .badge {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .listtable,
.dark .dataTables_wrapper .listtable,
[data-bs-theme="dark"] .nx-services-table-wrapper,
.dark .nx-services-table-wrapper {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-services-table thead th,
.dark .nx-services-table thead th {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-services-table tbody tr,
.dark .nx-services-table tbody tr {
    background: #0f172a !important;
}

[data-bs-theme="dark"] .nx-services-table tbody tr:hover,
.dark .nx-services-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .nx-services-table tbody td,
.dark .nx-services-table tbody td {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-table-product-title,
.dark .nx-table-product-title,
[data-bs-theme="dark"] .nx-table-amount,
.dark .nx-table-amount {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-table-cycle,
.dark .nx-table-cycle {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .nx-table-date-cell,
.dark .nx-table-date-cell {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-btn-table-manage,
.dark .nx-btn-table-manage {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_filter input {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_length {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .sidebar .card .card-header,
.dark .sidebar .card .card-header,
[data-bs-theme="dark"] .card-sidebar .card-header,
.dark .card-sidebar .card-header,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate,
.dark .dataTables_wrapper .dataTables_paginate {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
.dark .dataTables_wrapper .dataTables_length select {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate ul.pagination .page-item .page-link,
.dark .dataTables_wrapper .dataTables_paginate ul.pagination .page-item .page-link,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 6. Responsive Behavior for Tablet/Mobile */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100% !important;
        padding: 10px 16px !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .dataTables_wrapper .dataTables_filter label {
        width: 100% !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
    .nx-services-table-wrapper {
        overflow-x: auto !important;
    }
}

/* ==========================================================================
   PRODUCT / SERVICE DETAILS OVERVIEW (Executive SaaS Redesign - High Polish)
   ========================================================================== */

/* 1. Reset all column wrappers to eliminate dual borders */
.cpanel-feature-row > div,
.cpanel-feature-row [id^="cPanel"],
#cPanelQuickShortcutsPanel .cpanel-feature-row > div,
.nx-service-hero-row > div,
div[id^="cPanelEmail"],
div[id^="cPanelForward"],
div[id^="cPanelAuto"],
div[id^="cPanelFile"],
div[id^="cPanelBackup"],
div[id^="cPanelDomain"],
div[id^="cPanelCron"],
div[id^="cPanelMySQL"],
div[id^="cPanelPhp"],
div[id^="cPanelAwstat"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Top-Level Cards (Single 1px Crisp Border Only) */
.nx-card,
#cPanelPackagePanel.card,
#cPanelUsagePanel.card,
#cPanelExtrasPurchasePanel.card,
#cPanelQuickShortcutsPanel.card,
#cPanelQuickEmailPanel.card,
#cPanelBillingOverviewPanel.card,
#cPanelWordPress.card,
#cPanelSitejetPanel.card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.nx-card:hover,
#cPanelPackagePanel.card:hover,
#cPanelUsagePanel.card:hover,
#cPanelExtrasPurchasePanel.card:hover,
#cPanelQuickShortcutsPanel.card:hover,
#cPanelQuickEmailPanel.card:hover,
#cPanelBillingOverviewPanel.card:hover,
#cPanelWordPress.card:hover {
    box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* Card Headers */
.nx-card-header,
.nx-card .card-header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 24px !important;
}

.nx-card-header-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    letter-spacing: -0.01em !important;
}

.nx-service-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    background: #eef2ff !important;
    border: 1px solid #e0e7ff !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

.nx-status-pill.nx-status-active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #047857 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 9999px !important;
    padding: 3px 11px !important;
}

.nx-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
    animation: nxPulse 2s infinite !important;
    display: inline-block !important;
}

@keyframes nxPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.nx-card .card-body {
    padding: 24px 26px !important;
}

/* 3. Package & Domain Hero Card (#cPanelPackagePanel) */
.nx-hero-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.nx-hero-avatar:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

.nx-hero-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
}

.nx-hero-domain-link {
    display: inline-flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 4px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nx-hero-domain-link:hover {
    background: #ffffff !important;
    border-color: #6366f1 !important;
    color: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12) !important;
    text-decoration: none !important;
}

/* Unified Action Toolbar */
.nx-hero-actions {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.nx-btn-primary {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border: 1px solid #4338ca !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 7px 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.18s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.nx-btn-primary:hover {
    background: #4338ca !important;
    border-color: #3730a3 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
    text-decoration: none !important;
}

.nx-btn-secondary {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 7px 15px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.18s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.nx-btn-secondary:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    text-decoration: none !important;
}

/* Integrated Server Infrastructure Dock */
.nx-hero-specs-dock {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 16px !important;
    margin-top: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.nx-spec-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    margin-bottom: 3px !important;
}

.nx-spec-val {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* 4. Usage Statistics & Resource Allocation (#cPanelUsagePanel) */
.nx-sync-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    border: 1px solid #d1fae5 !important;
    border-radius: 9999px !important;
    padding: 3px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nx-metric-tile {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    padding: 15px 18px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

.nx-metric-tile:hover {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

.nx-metric-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.nx-metric-icon-disk {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border: 1px solid #e0e7ff !important;
}

.nx-metric-icon-bw {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #e0f2fe !important;
}

.nx-metric-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.nx-metric-subtitle {
    font-size: 11px !important;
    color: #64748b !important;
}

.nx-metric-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    padding: 3px 10px !important;
}

.nx-badge-success {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #d1fae5 !important;
}

.nx-badge-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fef3c7 !important;
}

.nx-badge-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fee2e2 !important;
}

.nx-badge-info {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #e0f2fe !important;
}

.nx-progress-bar-wrap {
    height: 9px !important;
    border-radius: 9999px !important;
    background: #e2e8f0 !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}

.nx-progress-disk {
    background: linear-gradient(90deg, #10b981 0%, #4f46e5 100%) !important;
    border-radius: 9999px !important;
}

.nx-progress-bw {
    background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%) !important;
    border-radius: 9999px !important;
}

.nx-metric-meta {
    font-size: 12px !important;
    margin-top: 6px !important;
}

.nx-sync-time {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.nx-upgrade-btn {
    background: #eef2ff !important;
    border: 1px solid #e0e7ff !important;
    color: #4f46e5 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 4px 11px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nx-upgrade-btn:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 5. Addons & Extras Dedicated Banner (#cPanelExtrasPurchasePanel) */
.nx-addons-banner {
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
    border: 1px solid #e9d5ff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px -2px rgba(147, 51, 234, 0.06) !important;
}

.nx-addons-icon-tile {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3) !important;
}

.nx-addons-banner-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #7e22ce !important;
    margin-bottom: 2px !important;
}

.nx-addons-banner-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.nx-addons-banner-subtitle {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.3 !important;
}

.nx-addon-select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 8px 14px !important;
    height: 42px !important;
    max-width: 380px !important;
}

/* 6. Quick Shortcuts 5-Column Grid (#cPanelQuickShortcutsPanel) */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

.nx-shortcuts-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 3px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nx-app-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 110px !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    outline: none !important;
}

.nx-app-tile:hover {
    background: #ffffff !important;
    border-color: #a5b4fc !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px -4px rgba(79, 70, 229, 0.16) !important;
    text-decoration: none !important;
}

.nx-tile-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease !important;
}

.nx-app-tile:hover .nx-tile-icon-box {
    transform: scale(1.08) !important;
}

/* Vibrant Modern Tile Variants for App Shortcut Tiles */
.nx-tile-icon-box.nx-tile-violet, .nx-app-tile.nx-tile-violet  { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; }
.nx-tile-icon-box.nx-tile-blue,   .nx-app-tile.nx-tile-blue    { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; }
.nx-tile-icon-box.nx-tile-amber,  .nx-app-tile.nx-tile-amber   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; }
.nx-tile-icon-box.nx-tile-emerald,.nx-app-tile.nx-tile-emerald { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; }
.nx-tile-icon-box.nx-tile-cyan,   .nx-app-tile.nx-tile-cyan    { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; }
.nx-tile-icon-box.nx-tile-purple, .nx-app-tile.nx-tile-purple  { background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important; }
.nx-tile-icon-box.nx-tile-orange, .nx-app-tile.nx-tile-orange  { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; }
.nx-tile-icon-box.nx-tile-teal,   .nx-app-tile.nx-tile-teal    { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important; }
.nx-tile-icon-box.nx-tile-rose,   .nx-app-tile.nx-tile-rose    { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; }
.nx-tile-icon-box.nx-tile-indigo, .nx-app-tile.nx-tile-indigo  { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important; }

.nx-tile-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    transition: color 0.15s ease !important;
}

.nx-app-tile:hover .nx-tile-title {
    color: #4338ca !important;
}

/* 7. Quick Create Email Account (#cPanelQuickEmailPanel) */
.nx-badge-neutral {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 3px 10px !important;
}

.nx-card-desc {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

.nx-form-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

#cPanelQuickEmailPanel input[type="text"],
#cPanelQuickEmailPanel input[type="password"] {
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    font-size: 13.5px !important;
    padding: 9px 14px !important;
    color: #0f172a !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

#cPanelQuickEmailPanel input[type="text"]:focus,
#cPanelQuickEmailPanel input[type="password"]:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.nx-input-domain-addon {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    border-radius: 0 9px 9px 0 !important;
    font-weight: 600 !important;
    color: #64748b !important;
    font-size: 13px !important;
}

#cPanelQuickEmailPanel .input-group input[type="text"] {
    border-radius: 9px 0 0 9px !important;
}

/* 8. Billing Overview Clean Key-Value List (#cPanelBillingOverviewPanel) */
.nx-billing-list {
    display: flex !important;
    flex-direction: column !important;
}

.nx-billing-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.nx-billing-row:last-child {
    border-bottom: none !important;
}

.nx-billing-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.nx-billing-val {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.nx-billing-amount {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #4f46e5 !important;
    letter-spacing: -0.01em !important;
}

.nx-cycle-badge {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #e0e7ff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
}

/* 9. Dark Mode Overhauls for Service Details */
[data-bs-theme="dark"] .nx-card,
.dark .nx-card,
[data-bs-theme="dark"] #cPanelPackagePanel.card,
.dark #cPanelPackagePanel.card,
[data-bs-theme="dark"] #cPanelUsagePanel.card,
.dark #cPanelUsagePanel.card,
[data-bs-theme="dark"] #cPanelExtrasPurchasePanel.card,
.dark #cPanelExtrasPurchasePanel.card,
[data-bs-theme="dark"] #cPanelQuickShortcutsPanel.card,
.dark #cPanelQuickShortcutsPanel.card,
[data-bs-theme="dark"] #cPanelQuickEmailPanel.card,
.dark #cPanelQuickEmailPanel.card,
[data-bs-theme="dark"] #cPanelBillingOverviewPanel.card,
.dark #cPanelBillingOverviewPanel.card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .nx-card-header,
.dark .nx-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-card-header-label,
.dark .nx-card-header-label {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-hero-title,
.dark .nx-hero-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-hero-avatar,
.dark .nx-hero-avatar {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-hero-domain-link,
.dark .nx-hero-domain-link {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-btn-secondary,
.dark .nx-btn-secondary {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .nx-hero-specs-dock,
.dark .nx-hero-specs-dock {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-spec-val,
.dark .nx-spec-val {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-metric-tile,
.dark .nx-metric-tile {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-metric-title,
.dark .nx-metric-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-progress-bar-wrap,
.dark .nx-progress-bar-wrap {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .nx-addons-banner,
.dark .nx-addons-banner {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-addons-banner-title,
.dark .nx-addons-banner-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-app-tile,
.dark .nx-app-tile {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-app-tile:hover,
.dark .nx-app-tile:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #6366f1 !important;
}

[data-bs-theme="dark"] .nx-tile-title,
.dark .nx-tile-title {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] #cPanelQuickEmailPanel input[type="text"],
.dark #cPanelQuickEmailPanel input[type="text"],
[data-bs-theme="dark"] #cPanelQuickEmailPanel input[type="password"],
.dark #cPanelQuickEmailPanel input[type="password"],
[data-bs-theme="dark"] .nx-addon-select,
.dark .nx-addon-select {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-input-domain-addon,
.dark .nx-input-domain-addon {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-billing-row,
.dark .nx-billing-row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-billing-val,
.dark .nx-billing-val {
    color: #f8fafc !important;
}

/* ==========================================================================
   DOMAINS MANAGEMENT (Executive SaaS Overhaul)
   ========================================================================== */

/* 1. Executive Domains & Invoices Card & Header */
.nx-domains-main-card,
.nx-invoices-main-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

.nx-domains-card-header,
.nx-invoices-card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 24px !important;
}

.nx-domains-header-icon,
.nx-invoices-header-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    flex-shrink: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.1) !important;
}

.nx-domains-card-title,
.nx-invoices-card-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
}

.nx-domains-card-subtitle,
.nx-invoices-card-subtitle {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

/* Bulk Actions Button Group */
.nx-bulk-btn-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.nx-bulk-btn-group .nx-btn-toolbar,
.nx-btn-toolbar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.18s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nx-bulk-btn-group .nx-btn-toolbar:hover,
.nx-btn-toolbar:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

.nx-bulk-btn-group .nx-btn-toolbar:focus,
.nx-bulk-btn-group .nx-btn-toolbar:active,
.nx-bulk-btn-group .nx-btn-toolbar:focus-visible,
.nx-btn-toolbar:focus,
.nx-btn-toolbar:active {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
    border-color: #cbd5e1 !important;
}

.nx-bulk-btn-group .dropdown {
    position: relative !important;
}

.nx-bulk-btn-group .dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
    padding: 6px !important;
    min-width: 210px !important;
    margin-top: 6px !important;
}

.nx-bulk-btn-group .dropdown-item {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s ease !important;
}

.nx-bulk-btn-group .dropdown-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.nx-bulk-btn-group .dropdown-item i {
    width: 20px !important;
    font-size: 13.5px !important;
    text-align: center !important;
}

/* 2. Seamless DataTables Inside Domains, Invoices & Quotes Card (Eliminate Dual Border) */
#tableDomainsList_wrapper,
#tableInvoicesList_wrapper,
#tableQuotesList_wrapper,
.nx-domains-main-card .dataTables_wrapper,
.nx-invoices-main-card .dataTables_wrapper,
.nx-quotes-main-card .dataTables_wrapper,
.nx-domains-table-wrapper .dataTables_wrapper,
.nx-invoices-table-wrapper .dataTables_wrapper,
.nx-quotes-table-wrapper .dataTables_wrapper,
div[id="tableDomainsList_wrapper"],
div[id="tableInvoicesList_wrapper"],
div[id="tableQuotesList_wrapper"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#tableDomainsList_wrapper .listtable,
#tableInvoicesList_wrapper .listtable,
#tableQuotesList_wrapper .listtable,
#tableTicketsList_wrapper .listtable,
#tableServicesList_wrapper .listtable,
.nx-domains-main-card .listtable,
.nx-invoices-main-card .listtable,
.nx-quotes-main-card .listtable,
.nx-tickets-main-card .listtable,
.nx-services-main-card .listtable,
.nx-domains-table-wrapper .listtable,
.nx-invoices-table-wrapper .listtable,
.nx-quotes-table-wrapper .listtable,
.nx-tickets-table-wrapper .listtable,
.nx-services-table-wrapper .listtable {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nx-domains-main-card .dataTables_wrapper .dataTables_info,
.nx-invoices-main-card .dataTables_wrapper .dataTables_info,
.nx-quotes-main-card .dataTables_wrapper .dataTables_info,
.nx-tickets-main-card .dataTables_wrapper .dataTables_info,
.nx-services-main-card .dataTables_wrapper .dataTables_info,
#tableDomainsList_wrapper .dataTables_info,
#tableInvoicesList_wrapper .dataTables_info,
#tableQuotesList_wrapper .dataTables_info,
#tableTicketsList_wrapper .dataTables_info,
#tableServicesList_wrapper .dataTables_info {
    padding: 14px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 2 !important;
    border: none !important;
}

.nx-domains-main-card .dataTables_wrapper .dataTables_filter,
.nx-invoices-main-card .dataTables_wrapper .dataTables_filter,
.nx-quotes-main-card .dataTables_wrapper .dataTables_filter,
.nx-tickets-main-card .dataTables_wrapper .dataTables_filter,
.nx-services-main-card .dataTables_wrapper .dataTables_filter,
#tableDomainsList_wrapper .dataTables_filter,
#tableInvoicesList_wrapper .dataTables_filter,
#tableQuotesList_wrapper .dataTables_filter,
#tableTicketsList_wrapper .dataTables_filter,
#tableServicesList_wrapper .dataTables_filter {
    padding: 12px 24px !important;
    margin: 0 !important;
    border: none !important;
}

.nx-domains-main-card .dataTables_wrapper .dataTables_length,
.nx-invoices-main-card .dataTables_wrapper .dataTables_length,
.nx-quotes-main-card .dataTables_wrapper .dataTables_length,
.nx-tickets-main-card .dataTables_wrapper .dataTables_length,
.nx-services-main-card .dataTables_wrapper .dataTables_length,
#tableDomainsList_wrapper .dataTables_length,
#tableInvoicesList_wrapper .dataTables_length,
#tableQuotesList_wrapper .dataTables_length,
#tableTicketsList_wrapper .dataTables_length,
#tableServicesList_wrapper .dataTables_length {
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 24px !important;
}

.nx-domains-main-card .dataTables_wrapper .dataTables_paginate,
.nx-invoices-main-card .dataTables_wrapper .dataTables_paginate,
.nx-quotes-main-card .dataTables_wrapper .dataTables_paginate,
.nx-tickets-main-card .dataTables_wrapper .dataTables_paginate,
.nx-services-main-card .dataTables_wrapper .dataTables_paginate,
#tableDomainsList_wrapper .dataTables_paginate,
#tableInvoicesList_wrapper .dataTables_paginate,
#tableQuotesList_wrapper .dataTables_paginate,
#tableTicketsList_wrapper .dataTables_paginate,
#tableServicesList_wrapper .dataTables_paginate {
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 24px !important;
}

/* 3. Domains, Invoices, Tickets & Services Table & Cells */
.nx-domains-table-wrapper,
.nx-invoices-table-wrapper,
.nx-tickets-table-wrapper,
.nx-services-table-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.nx-domains-table,
.nx-invoices-table {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 0 !important;
}

.nx-domains-table thead th,
.nx-invoices-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 13px 18px !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Date & Alignment Columns: Strictly Left Aligned */
.nx-domains-table thead th.nx-th-regdate,
.nx-domains-table thead th.nx-th-duedate,
.nx-domains-table thead th.text-left,
.nx-domains-table tbody td.nx-td-regdate,
.nx-domains-table tbody td.nx-td-duedate,
.nx-domains-table tbody td.text-left,
.nx-invoices-table thead th.nx-th-invnum,
.nx-invoices-table thead th.nx-th-invdate,
.nx-invoices-table thead th.nx-th-invdue,
.nx-invoices-table thead th.nx-th-invtotal,
.nx-invoices-table thead th.text-left,
.nx-invoices-table tbody td.nx-td-invnum,
.nx-invoices-table tbody td.nx-td-invdate,
.nx-invoices-table tbody td.nx-td-invdue,
.nx-invoices-table tbody td.nx-td-invtotal,
.nx-invoices-table tbody td.text-left {
    text-align: left !important;
}

.nx-domains-table .nx-table-date-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    gap: 3px !important;
}

.nx-domains-table tbody tr {
    cursor: pointer !important;
    transition: background-color 0.18s ease !important;
    background: #ffffff !important;
}

.nx-domains-table tbody tr:hover {
    background-color: #f8fafc !important;
}

.nx-custom-checkbox {
    width: 17px !important;
    height: 17px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    accent-color: #4f46e5 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.nx-table-domain-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
}

.nx-table-domain-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.nx-table-domain-sub {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nx-autorenew-pill {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.nx-autorenew-pill.is-active {
    color: #047857 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
}

.nx-autorenew-pill.is-inactive {
    color: #b91c1c !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}

.nx-expiring-badge {
    display: inline-block !important;
    width: fit-content !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    line-height: 1.3 !important;
}

/* 4. Sidebar Domains & Invoices Filter Dots */
.view-filter-btns .list-group-item[menuitemname="Active Domains"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Active Domains"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Active"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Active"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Paid"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Paid"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Paid Invoices"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Paid Invoices"] i.fa-dot-circle {
    background-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.view-filter-btns .list-group-item[menuitemname="Expired"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Expired"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Expired Domains"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Expired Domains"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Cancelled"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Cancelled"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Cancelled Invoices"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Cancelled Invoices"] i.fa-dot-circle {
    background-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.view-filter-btns .list-group-item[menuitemname="Expiring Soon"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Expiring Soon"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Expiring Soon Domains"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Expiring Soon Domains"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Unpaid"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Unpaid"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Unpaid Invoices"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Unpaid Invoices"] i.fa-dot-circle {
    background-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.view-filter-btns .list-group-item[menuitemname="Refunded"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Refunded"] i.fa-dot-circle,
.view-filter-btns .list-group-item[menuitemname="Refunded Invoices"] i.fa-circle,
.view-filter-btns .list-group-item[menuitemname="Refunded Invoices"] i.fa-dot-circle {
    background-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
}

/* 4b. Invoices Cell Typography & Components */
.nx-table-inv-cell {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nx-inv-tile {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    flex-shrink: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.1) !important;
}

.nx-inv-number {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.nx-table-amount-cell {
    display: flex !important;
    align-items: center !important;
}

.nx-inv-amount {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    font-feature-settings: "tnum" !important;
}

.nx-kpi-amber {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

/* 5. Dark Mode for Domains & Invoices */
[data-bs-theme="dark"] .nx-domains-main-card,
.dark .nx-domains-main-card,
[data-bs-theme="dark"] .nx-invoices-main-card,
.dark .nx-invoices-main-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .nx-domains-card-header,
.dark .nx-domains-card-header,
[data-bs-theme="dark"] .nx-invoices-card-header,
.dark .nx-invoices-card-header {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-domains-header-icon,
.dark .nx-domains-header-icon,
[data-bs-theme="dark"] .nx-invoices-header-icon,
.dark .nx-invoices-header-icon {
    background: rgba(79, 70, 229, 0.15) !important;
    color: #818cf8 !important;
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.2) !important;
}

[data-bs-theme="dark"] .nx-domains-card-title,
.dark .nx-domains-card-title,
[data-bs-theme="dark"] .nx-invoices-card-title,
.dark .nx-invoices-card-title,
[data-bs-theme="dark"] .nx-inv-number,
.dark .nx-inv-number,
[data-bs-theme="dark"] .nx-inv-amount,
.dark .nx-inv-amount {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-inv-tile,
.dark .nx-inv-tile {
    background: rgba(79, 70, 229, 0.15) !important;
    color: #818cf8 !important;
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.2) !important;
}

[data-bs-theme="dark"] .nx-domains-card-subtitle,
.dark .nx-domains-card-subtitle,
[data-bs-theme="dark"] .nx-invoices-card-subtitle,
.dark .nx-invoices-card-subtitle {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-bulk-btn-group .nx-btn-toolbar,
.dark .nx-bulk-btn-group .nx-btn-toolbar,
[data-bs-theme="dark"] .nx-btn-toolbar,
.dark .nx-btn-toolbar {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-bulk-btn-group .nx-btn-toolbar:hover,
.dark .nx-bulk-btn-group .nx-btn-toolbar:hover,
[data-bs-theme="dark"] .nx-btn-toolbar:hover,
.dark .nx-btn-toolbar:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-bulk-btn-group .nx-btn-toolbar:focus,
.dark .nx-bulk-btn-group .nx-btn-toolbar:focus,
[data-bs-theme="dark"] .nx-btn-toolbar:focus,
.dark .nx-btn-toolbar:focus {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .nx-bulk-btn-group .dropdown-menu,
.dark .nx-bulk-btn-group .dropdown-menu {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .nx-bulk-btn-group .dropdown-item,
.dark .nx-bulk-btn-group .dropdown-item {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-bulk-btn-group .dropdown-item:hover,
.dark .nx-bulk-btn-group .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #tableDomainsList_wrapper,
[data-bs-theme="dark"] #tableInvoicesList_wrapper,
[data-bs-theme="dark"] .nx-domains-main-card .dataTables_wrapper,
[data-bs-theme="dark"] .nx-invoices-main-card .dataTables_wrapper,
.dark #tableDomainsList_wrapper,
.dark #tableInvoicesList_wrapper,
.dark .nx-domains-main-card .dataTables_wrapper,
.dark .nx-invoices-main-card .dataTables_wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] #tableDomainsList_wrapper .listtable,
[data-bs-theme="dark"] #tableInvoicesList_wrapper .listtable,
[data-bs-theme="dark"] #tableQuotesList_wrapper .listtable,
[data-bs-theme="dark"] #tableTicketsList_wrapper .listtable,
[data-bs-theme="dark"] #tableServicesList_wrapper .listtable,
.dark #tableDomainsList_wrapper .listtable,
.dark #tableInvoicesList_wrapper .listtable,
.dark #tableQuotesList_wrapper .listtable,
.dark #tableTicketsList_wrapper .listtable,
.dark #tableServicesList_wrapper .listtable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] #tableDomainsList_wrapper .dataTables_length,
[data-bs-theme="dark"] #tableDomainsList_wrapper .dataTables_paginate,
[data-bs-theme="dark"] #tableInvoicesList_wrapper .dataTables_length,
[data-bs-theme="dark"] #tableInvoicesList_wrapper .dataTables_paginate,
[data-bs-theme="dark"] #tableTicketsList_wrapper .dataTables_length,
[data-bs-theme="dark"] #tableTicketsList_wrapper .dataTables_paginate,
[data-bs-theme="dark"] #tableServicesList_wrapper .dataTables_length,
[data-bs-theme="dark"] #tableServicesList_wrapper .dataTables_paginate,
[data-bs-theme="dark"] .nx-domains-main-card .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .nx-domains-main-card .dataTables_wrapper .dataTables_paginate,
[data-bs-theme="dark"] .nx-invoices-main-card .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .nx-invoices-main-card .dataTables_wrapper .dataTables_paginate,
[data-bs-theme="dark"] .nx-tickets-main-card .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .nx-tickets-main-card .dataTables_wrapper .dataTables_paginate,
[data-bs-theme="dark"] .nx-services-main-card .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .nx-services-main-card .dataTables_wrapper .dataTables_paginate,
.dark #tableDomainsList_wrapper .dataTables_length,
.dark #tableDomainsList_wrapper .dataTables_paginate,
.dark #tableInvoicesList_wrapper .dataTables_length,
.dark #tableInvoicesList_wrapper .dataTables_paginate,
.dark #tableTicketsList_wrapper .dataTables_length,
.dark #tableTicketsList_wrapper .dataTables_paginate,
.dark #tableServicesList_wrapper .dataTables_length,
.dark #tableServicesList_wrapper .dataTables_paginate,
.dark .nx-domains-main-card .dataTables_wrapper .dataTables_length,
.dark .nx-domains-main-card .dataTables_wrapper .dataTables_paginate,
.dark .nx-invoices-main-card .dataTables_wrapper .dataTables_length,
.dark .nx-invoices-main-card .dataTables_wrapper .dataTables_paginate,
.dark .nx-tickets-main-card .dataTables_wrapper .dataTables_length,
.dark .nx-tickets-main-card .dataTables_wrapper .dataTables_paginate,
.dark .nx-services-main-card .dataTables_wrapper .dataTables_length,
.dark .nx-services-main-card .dataTables_wrapper .dataTables_paginate {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-domains-table thead th,
[data-bs-theme="dark"] .nx-invoices-table thead th,
.dark .nx-domains-table thead th,
.dark .nx-invoices-table thead th {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr,
[data-bs-theme="dark"] .nx-invoices-table tbody tr,
.dark .nx-domains-table tbody tr,
.dark .nx-invoices-table tbody tr {
    background: #0f172a !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr:hover,
[data-bs-theme="dark"] .nx-invoices-table tbody tr:hover,
.dark .nx-domains-table tbody tr:hover,
.dark .nx-invoices-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody td,
[data-bs-theme="dark"] .nx-invoices-table tbody td,
.dark .nx-domains-table tbody td,
.dark .nx-invoices-table tbody td {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-table-domain-title,
.dark .nx-table-domain-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr,
.dark .nx-domains-table tbody tr {
    background: #0f172a !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr:hover,
.dark .nx-domains-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .nx-expiring-badge,
.dark .nx-expiring-badge {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* ==========================================================================
   DOMAIN DETAILS OVERVIEW (Executive SaaS Redesign - High Visual Polish)
   ========================================================================== */

/* 1. Hero Card & Identity */
.nx-domain-hero-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
}

.nx-domain-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    border: 1.5px solid #c7d2fe !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #4f46e5 !important;
    font-size: 24px !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12) !important;
}

.nx-domain-hero-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
}

.nx-domain-link-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}

.nx-domain-link-btn:hover {
    background: #ffffff !important;
    border-color: #6366f1 !important;
    color: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Unified Meta Information Bar */
.nx-domain-meta-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.nx-meta-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 9px !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em !important;
}

.nx-meta-badge.nx-badge-status-active {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.nx-meta-badge.nx-badge-status-inactive {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.nx-meta-sep {
    color: #cbd5e1 !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

.nx-meta-text {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.nx-meta-text strong {
    font-weight: 600 !important;
}

.nx-btn-hero-primary {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border: 1px solid #4338ca !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25) !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nx-btn-hero-primary:hover {
    background: #4338ca !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
    text-decoration: none !important;
}

.nx-btn-hero-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nx-btn-hero-secondary:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* 2. KPI Cards */
.nx-domain-kpi-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
}

.nx-domain-kpi-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-1.5px) !important;
}

.nx-kpi-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.nx-kpi-emerald { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #a7f3d0 !important; }
.nx-kpi-indigo { background: #eef2ff !important; color: #4f46e5 !important; border: 1px solid #c7d2fe !important; }
.nx-kpi-sky { background: #f0f9ff !important; color: #0284c7 !important; border: 1px solid #bae6fd !important; }
.nx-kpi-purple { background: #faf5ff !important; color: #7e22ce !important; border: 1px solid #e9d5ff !important; }

.nx-kpi-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    display: block !important;
}

.nx-kpi-val {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 1px 0 !important;
}

.nx-kpi-sub {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
}

/* 3. Detailed Information Cards */
.nx-card-header-icon-sm {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.nx-icon-emerald { background: #ecfdf5 !important; color: #059669 !important; }
.nx-icon-indigo { background: #eef2ff !important; color: #4f46e5 !important; }
.nx-icon-purple { background: #faf5ff !important; color: #7e22ce !important; }

.nx-badge-ssl {
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    padding: 3px 9px !important;
    border-radius: 9999px !important;
}

.nx-cycle-pill {
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 9px !important;
    border-radius: 9999px !important;
}

.nx-detail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.nx-detail-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13px !important;
}

.nx-detail-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.nx-detail-label {
    color: #64748b !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
}

.nx-detail-val {
    color: #0f172a !important;
    text-align: right !important;
}

/* 4. Domain Shortcuts Grid (Symmetric CSS Grid Layout) */
.nx-shortcuts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 991px) {
    .nx-shortcuts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .nx-shortcuts-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

.nx-shortcut-tile {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 204px !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.nx-shortcut-tile:hover {
    background: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.15), 0 4px 10px -2px rgba(15, 23, 42, 0.04) !important;
    transform: translateY(-3px) !important;
    text-decoration: none !important;
}

.nx-shortcut-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}

.nx-shortcut-tag {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 3px 9px !important;
    border-radius: 9999px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-shortcut-tag,
.dark .nx-shortcut-tag {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.nx-shortcut-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 0 !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-shortcut-tile:hover .nx-shortcut-icon-box {
    transform: scale(1.1) translateY(-1px) !important;
}

.nx-box-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -2px rgba(99, 102, 241, 0.35) !important;
    border: none !important;
}

.nx-box-sky {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.35) !important;
    border: none !important;
}

.nx-box-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -2px rgba(245, 158, 11, 0.35) !important;
    border: none !important;
}

.nx-box-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.35) !important;
    border: none !important;
}

.nx-box-purple {
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -2px rgba(168, 85, 247, 0.35) !important;
    border: none !important;
}

.nx-box-rose {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -2px rgba(244, 63, 94, 0.35) !important;
    border: none !important;
}

.nx-shortcut-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.01em !important;
}

.nx-shortcut-desc {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

.nx-shortcut-cta {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: auto !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

.nx-shortcut-tile:hover .nx-shortcut-cta {
    transform: translateX(4px) !important;
    color: #3730a3 !important;
}

/* 5. Dark Mode for Domain Details */
[data-bs-theme="dark"] .nx-domain-hero-card,
.dark .nx-domain-hero-card,
[data-bs-theme="dark"] .nx-domain-kpi-card,
.dark .nx-domain-kpi-card,
[data-bs-theme="dark"] .nx-shortcut-tile,
.dark .nx-shortcut-tile {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-shortcut-tile:hover,
.dark .nx-shortcut-tile:hover {
    border-color: #818cf8 !important;
    background: #1e293b !important;
    box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .nx-domain-avatar,
.dark .nx-domain-avatar {
    background: rgba(79, 70, 229, 0.15) !important;
    border-color: rgba(129, 140, 248, 0.25) !important;
}

[data-bs-theme="dark"] .nx-domain-hero-title,
.dark .nx-domain-hero-title,
[data-bs-theme="dark"] .nx-kpi-val,
.dark .nx-kpi-val,
[data-bs-theme="dark"] .nx-shortcut-title,
.dark .nx-shortcut-title,
[data-bs-theme="dark"] .nx-detail-val,
.dark .nx-detail-val {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-kpi-sub,
.dark .nx-kpi-sub,
[data-bs-theme="dark"] .nx-shortcut-desc,
.dark .nx-shortcut-desc,
[data-bs-theme="dark"] .nx-detail-label,
.dark .nx-detail-label {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-detail-row,
.dark .nx-detail-row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-cycle-pill,
.dark .nx-cycle-pill {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-domain-link-btn,
.dark .nx-domain-link-btn {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-domain-link-btn:hover,
.dark .nx-domain-link-btn:hover {
    background: #334155 !important;
    border-color: #818cf8 !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-meta-text,
.dark .nx-meta-text {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-meta-sep,
.dark .nx-meta-sep {
    color: #475569 !important;
}

[data-bs-theme="dark"] .nx-meta-badge.nx-badge-status-active,
.dark .nx-meta-badge.nx-badge-status-active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-bs-theme="dark"] .nx-meta-badge.nx-badge-status-inactive,
.dark .nx-meta-badge.nx-badge-status-inactive {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-bs-theme="dark"] .nx-btn-hero-secondary,
.dark .nx-btn-hero-secondary {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-btn-hero-secondary:hover,
.dark .nx-btn-hero-secondary:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   VIEW INVOICE / RECEIPT (Executive SaaS Redesign)
   ========================================================================== */

.nx-invoice-page-body {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
    min-height: 100vh !important;
}

/* 1. Floating Topbar */
.nx-invoice-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

.nx-invoice-topbar-inner {
    max-width: 900px !important;
}

.nx-topbar-back-link {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.15s ease !important;
}

.nx-topbar-back-link:hover {
    color: #4f46e5 !important;
    text-decoration: none !important;
}

/* 2. Main Invoice Paper Container (Eliminate Double Border) */
.invoice-container,
div.invoice-container,
body.nx-invoice-page-body .invoice-container,
.nx-invoice-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 860px !important;
    margin: 28px auto 60px auto !important;
}

.nx-invoice-paper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    padding: 40px 44px !important;
    position: relative !important;
}

/* 3. Header & Status Stamp */
.nx-inv-header {
    border-bottom-color: #f1f5f9 !important;
}

.nx-inv-logo {
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
}

.nx-inv-company-name {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
}

.nx-inv-number-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
}

.nx-inv-meta-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.nx-inv-meta-sep {
    color: #cbd5e1 !important;
    font-size: 11px !important;
}

/* Executive Status Stamps */
.nx-inv-status-stamp {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 18px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.nx-stamp-paid {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1.5px solid #a7f3d0 !important;
}

.nx-stamp-unpaid {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1.5px solid #fde68a !important;
}

.nx-stamp-refunded {
    background: #faf5ff !important;
    color: #7e22ce !important;
    border: 1.5px solid #e9d5ff !important;
}

.nx-stamp-cancelled {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
}

.nx-stamp-draft {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1.5px solid #e2e8f0 !important;
}

/* 4. Billing Entities Grid */
.nx-inv-party-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    transition: all 0.2s ease !important;
}

.nx-party-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.nx-party-company {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
}

.nx-party-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
}

.nx-party-address {
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
}

.nx-party-tax {
    font-size: 12.5px !important;
    color: #475569 !important;
}

.nx-party-custom {
    font-size: 12.5px !important;
    color: #475569 !important;
}

.nx-party-method {
    font-size: 13px !important;
    border-top-color: #e2e8f0 !important;
}

/* 5. Line Items Table */
.nx-inv-items-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.nx-inv-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 13px 22px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
}

.nx-inv-table tbody td {
    padding: 16px 22px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.nx-item-desc {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
}

.nx-tax-star {
    color: #ef4444 !important;
    font-weight: bold !important;
}

.nx-item-amount {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-feature-settings: "tnum" !important;
}

.nx-inv-summary-box {
    background: transparent !important;
    border-top: 1px solid #e2e8f0 !important;
}

.nx-summary-table-wrap {
    background: #f8fafc !important;
    border-left: 1px solid #e2e8f0 !important;
}

.nx-summary-mini-table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.nx-summary-mini-table td {
    padding: 8px 18px !important;
    border: none !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.nx-summary-mini-table tr.nx-summary-grand-total td {
    border-top: 1.5px solid #e2e8f0 !important;
    padding: 12px 18px !important;
    background: #f1f5f9 !important;
}

.nx-grand-label {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.nx-grand-val {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-feature-settings: "tnum" !important;
}

/* 6. Transactions Card & Header */
.nx-trans-section-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 28px !important;
    margin-bottom: 12px !important;
    padding: 0 2px !important;
}

.nx-trans-balance-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.nx-trans-balance-badge .badge {
    margin-left: 6px !important;
}

.nx-inv-transactions-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.nx-gateway-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 2px 9px !important;
    border-radius: 6px !important;
}

.nx-trans-table thead th {
    background: #f8fafc !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
}

.nx-trans-table tbody td {
    font-size: 13px !important;
    color: #334155 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.nx-trans-code {
    background: #f8fafc !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-family: 'JetBrains Mono', Consolas, monospace !important;
    color: #64748b !important;
}

/* 7. Dark Mode for View Invoice */
[data-bs-theme="dark"] .nx-invoice-page-body,
.dark .nx-invoice-page-body {
    background-color: #0b1120 !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-invoice-topbar,
.dark .nx-invoice-topbar {
    background: #0f172a !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-topbar-back-link,
.dark .nx-topbar-back-link {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-topbar-back-link:hover,
.dark .nx-topbar-back-link:hover {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .nx-invoice-paper,
.dark .nx-invoice-paper {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .nx-inv-header,
.dark .nx-inv-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-inv-number-title,
.dark .nx-inv-number-title,
[data-bs-theme="dark"] .nx-inv-company-name,
.dark .nx-inv-company-name,
[data-bs-theme="dark"] .nx-party-company,
.dark .nx-party-company,
[data-bs-theme="dark"] .nx-item-desc,
.dark .nx-item-desc,
[data-bs-theme="dark"] .nx-item-amount,
.dark .nx-item-amount,
[data-bs-theme="dark"] .nx-summary-val,
.dark .nx-summary-val,
[data-bs-theme="dark"] .nx-total-label,
.dark .nx-total-label,
[data-bs-theme="dark"] .nx-trans-title,
.dark .nx-trans-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-party-name,
.dark .nx-party-name {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-inv-meta-strip,
.dark .nx-inv-meta-strip,
[data-bs-theme="dark"] .nx-party-address,
.dark .nx-party-address,
[data-bs-theme="dark"] .nx-party-tax,
.dark .nx-party-tax,
[data-bs-theme="dark"] .nx-party-custom,
.dark .nx-party-custom {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-inv-party-card,
.dark .nx-inv-party-card {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-party-method,
.dark .nx-party-method {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-inv-items-card,
.dark .nx-inv-items-card,
[data-bs-theme="dark"] .nx-inv-transactions-card,
.dark .nx-inv-transactions-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-inv-table thead th,
.dark .nx-inv-table thead th,
[data-bs-theme="dark"] .nx-trans-header,
.dark .nx-trans-header,
[data-bs-theme="dark"] .nx-trans-table thead th,
.dark .nx-trans-table thead th {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-inv-table tbody td,
.dark .nx-inv-table tbody td,
[data-bs-theme="dark"] .nx-trans-table tbody td,
.dark .nx-trans-table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-inv-summary-box,
.dark .nx-inv-summary-box,
[data-bs-theme="dark"] .nx-summary-table-wrap,
.dark .nx-summary-table-wrap {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-summary-mini-table td,
.dark .nx-summary-mini-table td {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-summary-mini-table tr.nx-summary-grand-total td,
.dark .nx-summary-mini-table tr.nx-summary-grand-total td {
    background: rgba(255, 255, 255, 0.04) !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .nx-grand-label,
.dark .nx-grand-label,
[data-bs-theme="dark"] .nx-grand-val,
.dark .nx-grand-val {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-gateway-pill,
.dark .nx-gateway-pill {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-trans-code,
.dark .nx-trans-code {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

/* 8. Top-Level @page definition for standard A4 printing */
@page {
    size: A4 portrait !important;
    margin: 12mm 15mm 15mm 15mm !important;
}

/* Print Perfection */
@media print {
    @page {
        size: A4 portrait !important;
        margin: 12mm 15mm 15mm 15mm !important;
    }

    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html,
    body,
    body.nx-invoice-page-body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #0f172a !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Hide screen-only controls */
    .nx-invoice-topbar,
    .d-print-none,
    .payment-btn-container,
    #fullpage-overlay,
    .btn,
    button,
    p a[href*="clientarea.php"] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Expand to 100% printable width without Bootstrap container restrictions */
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .invoice-container,
    .nx-invoice-container,
    div.invoice-container,
    .nx-invoice-paper {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* Parties: Strictly Side-by-Side in Print */
    .nx-inv-parties-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .nx-inv-parties-row > [class*="col-"] {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
    }

    /* Prevent awkward page break splits */
    .nx-inv-header,
    .nx-inv-party-card,
    .nx-inv-items-card,
    .nx-inv-summary-box,
    .nx-inv-transactions-card,
    tr,
    .row {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .nx-inv-header {
        border-bottom: 1.5px solid #cbd5e1 !important;
        padding-bottom: 14px !important;
        margin-bottom: 18px !important;
    }

    .nx-inv-logo {
        max-height: 48px !important;
    }

    .nx-inv-number-title {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .nx-inv-meta-strip {
        font-size: 12.5px !important;
        color: #475569 !important;
    }

    .nx-inv-party-card {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        padding: 14px 18px !important;
    }

    .nx-party-company {
        font-size: 14.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .nx-party-name {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
    }

    .nx-party-address {
        font-size: 12.5px !important;
        color: #475569 !important;
        line-height: 1.5 !important;
    }

    .nx-trans-section-header {
        margin-top: 18px !important;
        margin-bottom: 8px !important;
    }

    .nx-inv-items-card,
    .nx-inv-transactions-card {
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
    }

    .nx-inv-table thead th,
    .nx-trans-table thead th {
        background: #f1f5f9 !important;
        color: #334155 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-bottom: 1.5px solid #cbd5e1 !important;
        padding: 10px 16px !important;
    }

    .nx-inv-table tbody td,
    .nx-trans-table tbody td {
        padding: 11px 16px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        font-size: 12.5px !important;
    }

    .nx-summary-table-wrap {
        background: #f8fafc !important;
        border-left: 1px solid #cbd5e1 !important;
    }

    .nx-summary-mini-table td {
        padding: 8px 16px !important;
        font-size: 12.5px !important;
    }

    .nx-summary-mini-table tr.nx-summary-grand-total td {
        border-top: 1.5px solid #cbd5e1 !important;
        padding: 11px 16px !important;
        background: #f1f5f9 !important;
    }

    .nx-grand-label {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .nx-grand-val {
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .nx-inv-status-stamp {
        border-radius: 8px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .nx-stamp-paid {
        background: #ecfdf5 !important;
        color: #047857 !important;
        border: 1.5px solid #059669 !important;
    }

    .nx-stamp-unpaid {
        background: #fffbeb !important;
        color: #b45309 !important;
        border: 1.5px solid #d97706 !important;
    }

    .nx-gateway-pill {
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
    }
}


/* ========================================================================
   MODERN EXECUTIVE ACCOUNT MENU & USER DROPDOWN (HELLO, USER)
   ======================================================================== */

/* Account Trigger Button in Top Navbar */
.nx-user-pill-btn,
.tt-toolbar-wrap #Secondary_Navbar-Account .dropdown-toggle,
#Secondary_Navbar-Account .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    padding: 3px 14px 3px 5px !important;
    border-radius: 9999px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    font-family: var(--whmcs-font-main) !important;
}

/* Suppress default Bootstrap / theme caret to prevent double-arrow */
.nx-user-pill-btn::after,
.nx-user-pill-btn.dropdown-toggle::after,
.nx-account-nav-item .dropdown-toggle::after,
.nx-account-nav-item > a::after,
.tt-toolbar-wrap #Secondary_Navbar-Account .dropdown-toggle::after,
#Secondary_Navbar-Account .dropdown-toggle::after,
#Secondary_Navbar-Account > a::after,
.nx-user-pill-btn .caret,
#Secondary_Navbar-Account .caret {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.nx-user-pill-btn:hover,
.show > .nx-user-pill-btn,
.tt-toolbar-wrap #Secondary_Navbar-Account:hover .dropdown-toggle,
.show > #Secondary_Navbar-Account .dropdown-toggle {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #4f46e5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.nx-user-pill-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35) !important;
}

.nx-user-pill-avatar i {
    font-size: 11px !important;
    color: #ffffff !important;
}

.nx-user-pill-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    letter-spacing: -0.01em !important;
}

.nx-user-pill-btn:hover .nx-user-pill-label,
.show > .nx-user-pill-btn .nx-user-pill-label {
    color: #4f46e5 !important;
}

.nx-user-pill-caret {
    font-size: 10px !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    margin-left: 2px !important;
}

.show > .nx-user-pill-btn .nx-user-pill-caret,
.show > a .nx-user-pill-caret {
    transform: rotate(180deg) !important;
    color: #4f46e5 !important;
}

/* User Dropdown Container */
.nx-user-dropdown-menu,
#Secondary_Navbar-Account .dropdown-menu {
    min-width: 280px !important;
    width: 280px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.16), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
    padding: 8px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
    list-style: none !important;
    animation: nxDropdownPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes nxDropdownPop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* User Card Header */
.nx-user-menu-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px 14px 12px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    border-radius: 14px !important;
    margin-bottom: 6px !important;
}

.nx-user-menu-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

.nx-user-menu-avatar i {
    font-size: 16px !important;
    color: #ffffff !important;
}

.nx-user-menu-meta {
    overflow: hidden !important;
    flex: 1 !important;
}

.nx-user-menu-name {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
}

.nx-user-menu-email {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
}

.nx-user-menu-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    margin-top: 5px !important;
    letter-spacing: 0.2px !important;
}

.nx-status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

/* Menu Items & Links */
.nx-user-dropdown-menu .dropdown-menu-item,
#Secondary_Navbar-Account .dropdown-menu .dropdown-menu-item {
    margin: 2px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.nx-user-menu-link,
#Secondary_Navbar-Account .dropdown-menu .dropdown-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.nx-user-menu-link:hover,
#Secondary_Navbar-Account .dropdown-menu .dropdown-link:hover {
    background: #f1f5f9 !important;
    color: #4f46e5 !important;
    transform: translateX(3px) !important;
    border: none !important;
}

/* Icon Badges */
.nx-item-icon-box {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    transition: transform 0.2s ease !important;
}

.nx-user-menu-link:hover .nx-item-icon-box,
#Secondary_Navbar-Account .dropdown-menu .dropdown-link:hover .nx-item-icon-box {
    transform: scale(1.08) !important;
}

/* Palette for Item Icons */
.nx-icon-accountdetails {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.nx-icon-usermanagement {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.nx-icon-contacts {
    background: #f0fdfa !important;
    color: #0d9488 !important;
}

.nx-icon-accountsecurity {
    background: #ecfdf5 !important;
    color: #059669 !important;
}

.nx-icon-emailhistory {
    background: #f5f3ff !important;
    color: #7c3aed !important;
}

.nx-icon-yourprofile,
.nx-icon-profile {
    background: #f0f9ff !important;
    color: #0284c7 !important;
}

.nx-icon-changepassword {
    background: #fffbeb !important;
    color: #d97706 !important;
}

.nx-icon-securitysettings {
    background: #fff7ed !important;
    color: #ea580c !important;
}

.nx-icon-logout {
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

/* Logout Special Highlight */
.nx-user-menu-logout:hover,
#Secondary_Navbar-Account .dropdown-menu li[menuitemname="Logout"] .dropdown-link:hover {
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

.nx-user-menu-logout:hover .nx-item-label,
#Secondary_Navbar-Account .dropdown-menu li[menuitemname="Logout"] .dropdown-link:hover {
    color: #e11d48 !important;
    font-weight: 600 !important;
}

/* Dividers */
.nx-user-dropdown-menu .dropdown-divider,
#Secondary_Navbar-Account .dropdown-menu .dropdown-divider {
    height: 1px !important;
    margin: 6px 4px !important;
    background: #f1f5f9 !important;
    border: none !important;
}

/* --- Dark Mode Support for Account Menu --- */
[data-bs-theme="dark"] .nx-user-pill-btn,
.dark .nx-user-pill-btn,
[data-bs-theme="dark"] #Secondary_Navbar-Account .dropdown-toggle,
.dark #Secondary_Navbar-Account .dropdown-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-user-pill-label,
.dark .nx-user-pill-label {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-user-pill-btn:hover,
.dark .nx-user-pill-btn:hover,
[data-bs-theme="dark"] .show > .nx-user-pill-btn,
.dark .show > .nx-user-pill-btn,
[data-bs-theme="dark"] .show > #Secondary_Navbar-Account .dropdown-toggle,
.dark .show > #Secondary_Navbar-Account .dropdown-toggle {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-user-dropdown-menu,
.dark .nx-user-dropdown-menu,
[data-bs-theme="dark"] #Secondary_Navbar-Account .dropdown-menu,
.dark #Secondary_Navbar-Account .dropdown-menu {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .nx-user-menu-header,
.dark .nx-user-menu-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%) !important;
}

[data-bs-theme="dark"] .nx-user-menu-name,
.dark .nx-user-menu-name {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-user-menu-email,
.dark .nx-user-menu-email {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-user-menu-status,
.dark .nx-user-menu-status {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .nx-user-menu-link,
.dark .nx-user-menu-link,
[data-bs-theme="dark"] #Secondary_Navbar-Account .dropdown-menu .dropdown-link,
.dark #Secondary_Navbar-Account .dropdown-menu .dropdown-link {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-user-menu-link:hover,
.dark .nx-user-menu-link:hover,
[data-bs-theme="dark"] #Secondary_Navbar-Account .dropdown-menu .dropdown-link:hover,
.dark #Secondary_Navbar-Account .dropdown-menu .dropdown-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-user-dropdown-menu .dropdown-divider,
.dark .nx-user-dropdown-menu .dropdown-divider,
[data-bs-theme="dark"] #Secondary_Navbar-Account .dropdown-menu .dropdown-divider,
.dark #Secondary_Navbar-Account .dropdown-menu .dropdown-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================================================
   Executive Notification Dot & Indicator Badge
   ======================================================================== */
.tt-toolbar-wrap .tt-notification,
.tt-notification {
    position: relative !important;
}

.header-action-icon#accountNotifications,
#accountNotifications.header-action-icon,
.tt-notification button#accountNotifications {
    position: relative !important;
    overflow: visible !important;
}

#accountNotifications .tt-circle,
.tt-notification .tt-circle,
.header-action-icon .tt-circle {
    position: absolute !important;
    top: 6px !important;
    right: 7px !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    background-color: #ef4444 !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.45) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transform: none !important;
    box-sizing: content-box !important;
}

[data-bs-theme="dark"] #accountNotifications .tt-circle,
.dark #accountNotifications .tt-circle,
[data-bs-theme="dark"] .tt-notification .tt-circle,
.dark .tt-notification .tt-circle {
    border-color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.6) !important;
}

/* Exclude tt-circle from generic color resets */
.header-action-icon .tt-circle {
    color: transparent !important;
}

/* ========================================================================
   Executive Notification Popover
   ======================================================================== */
.popover.popover-user-notifications,
.popover.bs-popover-bottom.popover-user-notifications,
.popover[class*="popover-user-notifications"] {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 92vw !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2), 0 0 1px 1px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1060 !important;
}

/* Hide Bootstrap default raw header and reset inner body */
.popover.popover-user-notifications .popover-header {
    display: none !important;
}

.popover.popover-user-notifications .popover-inner,
.popover.popover-user-notifications .popover-body {
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

.popover.popover-user-notifications .popover-body p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Popover Arrow */
.popover.popover-user-notifications .arrow {
    display: block !important;
}

.popover.popover-user-notifications .arrow::before {
    border-bottom-color: #e2e8f0 !important;
}

.popover.popover-user-notifications .arrow::after {
    border-bottom-color: #ffffff !important;
}

/* Custom Header inside Popover */
.nx-notify-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px 14px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.nx-notify-header-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -0.01em !important;
}

.nx-notify-header-title i {
    color: #4f46e5 !important;
    font-size: 14px !important;
}

.nx-notify-header-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ef4444 !important;
    background: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    padding: 2.5px 9px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Notification Feed List */
.popover-user-notifications ul.nx-notify-list,
.popover-user-notifications ul.client-alerts {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}

.nx-notify-item {
    border-bottom: 1px solid #f1f5f9 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nx-notify-item:last-child {
    border-bottom: none !important;
}

.nx-notify-link {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    padding: 14px 20px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    cursor: pointer !important;
}

.nx-notify-link:hover {
    background: #f8fafc !important;
    text-decoration: none !important;
}

/* Icon Box */
.nx-notify-icon-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.nx-icon-danger {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fee2e2 !important;
}

.nx-icon-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fef3c7 !important;
}

.nx-icon-info {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
}

.nx-icon-success {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #d1fae5 !important;
}

/* Notification Body Content */
.nx-notify-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.nx-notify-badge-row {
    margin-bottom: 3px !important;
}

.nx-notify-type-pill {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.nx-pill-danger {
    color: #ef4444 !important;
}

.nx-pill-warning {
    color: #d97706 !important;
}

.nx-pill-info {
    color: #2563eb !important;
}

.nx-pill-success {
    color: #059669 !important;
}

.nx-notify-message {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* Hover Action Arrow */
.nx-notify-arrow {
    color: #cbd5e1 !important;
    font-size: 11px !important;
    margin-top: 10px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.nx-notify-link:hover .nx-notify-arrow {
    color: #4f46e5 !important;
    transform: translateX(3px) !important;
}

/* Empty State */
.nx-notify-empty {
    padding: 30px 20px !important;
    text-align: center !important;
}

.nx-notify-empty-icon {
    font-size: 28px !important;
    color: #94a3b8 !important;
    margin-bottom: 8px !important;
}

.nx-notify-empty-text {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

/* Footer Row */
.nx-notify-dropdown-footer {
    padding: 12px 20px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center !important;
}

.nx-notify-view-all {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4f46e5 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.15s ease !important;
}

.nx-notify-view-all:hover {
    color: #3730a3 !important;
    text-decoration: underline !important;
}

/* Dark Mode Support for Notification Popover */
[data-bs-theme="dark"] .popover.popover-user-notifications,
.dark .popover.popover-user-notifications,
[data-bs-theme="dark"] .popover[class*="popover-user-notifications"],
.dark .popover[class*="popover-user-notifications"] {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

[data-bs-theme="dark"] .popover.popover-user-notifications .arrow::before,
.dark .popover.popover-user-notifications .arrow::before {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .popover.popover-user-notifications .arrow::after,
.dark .popover.popover-user-notifications .arrow::after {
    border-bottom-color: #0f172a !important;
}

[data-bs-theme="dark"] .nx-notify-dropdown-header,
.dark .nx-notify-dropdown-header {
    background: #0f172a !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-notify-header-title,
.dark .nx-notify-header-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-notify-header-count,
.dark .nx-notify-header-count {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .nx-notify-item,
.dark .nx-notify-item {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-notify-link,
.dark .nx-notify-link {
    background: #0f172a !important;
}

[data-bs-theme="dark"] .nx-notify-link:hover,
.dark .nx-notify-link:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .nx-notify-message,
.dark .nx-notify-message {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-icon-danger,
.dark .nx-icon-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .nx-icon-warning,
.dark .nx-icon-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .nx-icon-info,
.dark .nx-icon-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .nx-notify-dropdown-footer,
.dark .nx-notify-dropdown-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-notify-view-all,
.dark .nx-notify-view-all {
    color: #818cf8 !important;
}

/* ========================================================================
   Executive Header Search Dropdown
   ======================================================================== */
.nx-header-search-dropdown,
.tt-toolbar-wrap .dropdown-menu.nx-header-search-dropdown,
.tt-toolbar-wrap form.dropdown-menu[aria-labelledby="dropdownMenuButton"] {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 92vw !important;
    padding: 18px 20px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2), 0 0 1px 1px rgba(0, 0, 0, 0.04) !important;
    margin-top: 12px !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    z-index: 1050 !important;
    animation: nxSearchFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes nxSearchFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nx-search-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}

.nx-search-dropdown-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.nx-search-dropdown-title i {
    color: #4f46e5 !important;
    font-size: 14px !important;
}

.nx-search-header-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #4f46e5 !important;
    background: #eef2ff !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid #e0e7ff !important;
}

.nx-search-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 4px 6px 4px 14px !important;
    transition: all 0.2s ease !important;
}

.nx-search-input-wrapper:focus-within {
    background: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.15) !important;
}

.nx-search-input-wrapper .nx-search-icon {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
}

.nx-search-input-wrapper:focus-within .nx-search-icon {
    color: #4f46e5 !important;
}

.nx-search-input-field {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    padding: 8px 6px !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

.nx-search-input-field::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.nx-search-submit-btn {
    border: none !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 8px 15px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.nx-search-submit-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.4) !important;
}

.nx-search-submit-btn i {
    font-size: 11px !important;
    transition: transform 0.15s ease !important;
}

.nx-search-submit-btn:hover i {
    transform: translateX(2px) !important;
}

/* Quick Topic Pills */
.nx-search-tags-section {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.nx-search-tags-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 9px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nx-search-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.nx-search-tag-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    border-radius: 9999px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.nx-search-tag-chip:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
    transform: translateY(-1px) !important;
}

.nx-search-tag-chip i {
    font-size: 11px !important;
    color: #6366f1 !important;
}

.nx-search-dropdown-footer {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #64748b !important;
}

.nx-search-dropdown-footer a {
    color: #4f46e5 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: color 0.15s ease !important;
}

.nx-search-dropdown-footer a:hover {
    color: #3730a3 !important;
    text-decoration: underline !important;
}

/* Dark mode for search dropdown */
[data-bs-theme="dark"] .nx-header-search-dropdown,
.dark .nx-header-search-dropdown,
[data-bs-theme="dark"] .tt-toolbar-wrap .dropdown-menu.nx-header-search-dropdown,
.dark .tt-toolbar-wrap .dropdown-menu.nx-header-search-dropdown {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

[data-bs-theme="dark"] .nx-search-dropdown-title,
.dark .nx-search-dropdown-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-search-header-badge,
.dark .nx-search-header-badge {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-search-input-wrapper,
.dark .nx-search-input-wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .nx-search-input-wrapper:focus-within,
.dark .nx-search-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3.5px rgba(129, 140, 248, 0.25) !important;
}

[data-bs-theme="dark"] .nx-search-input-field,
.dark .nx-search-input-field {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-search-tags-section,
.dark .nx-search-tags-section,
[data-bs-theme="dark"] .nx-search-dropdown-footer,
.dark .nx-search-dropdown-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-search-tag-chip,
.dark .nx-search-tag-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-search-tag-chip:hover,
.dark .nx-search-tag-chip:hover {
    background: rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #e0e7ff !important;
}

[data-bs-theme="dark"] .nx-search-dropdown-footer,
.dark .nx-search-dropdown-footer,
[data-bs-theme="dark"] .nx-search-tags-label,
.dark .nx-search-tags-label {
    color: #94a3b8 !important;
}

/* ==========================================================================
   NEXTGEN MODERN ORDERFORM PRODUCTS - DARK THEME GLOBAL OVERRIDES
   ========================================================================== */

/* Main Hero Header */
[data-bs-theme="dark"] .nx-hero-tag,
.dark .nx-hero-tag {
    background: rgba(37, 99, 235, 0.18) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

[data-bs-theme="dark"] .nx-title-main,
.dark .nx-title-main {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-desc-main,
.dark .nx-desc-main {
    color: #94a3b8 !important;
}

/* Pricing Cards */
[data-bs-theme="dark"] .nx-pricing-card,
.dark .nx-pricing-card {
    background: #111827 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme="dark"] .nx-pricing-card:hover,
.dark .nx-pricing-card:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.65) !important;
    transform: translateY(-5px) !important;
}

/* Featured / Popular Card */
[data-bs-theme="dark"] .tier-color-2,
.dark .tier-color-2,
[data-bs-theme="dark"] .nx-pricing-card.is-featured,
.dark .nx-pricing-card.is-featured {
    border: 2px solid #6366f1 !important;
    box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.35) !important;
}

[data-bs-theme="dark"] .tier-color-2:hover,
.dark .tier-color-2:hover,
[data-bs-theme="dark"] .nx-pricing-card.is-featured:hover,
.dark .nx-pricing-card.is-featured:hover {
    box-shadow: 0 16px 40px -5px rgba(99, 102, 241, 0.5) !important;
}

/* Plan Title & Subtitle */
[data-bs-theme="dark"] .nx-plan-title,
.dark .nx-plan-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-plan-sub,
.dark .nx-plan-sub {
    color: #94a3b8 !important;
}

/* Price Area */
[data-bs-theme="dark"] .nx-price-area,
.dark .nx-price-area {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-price-subtext,
.dark .nx-price-subtext {
    color: #94a3b8 !important;
}

/* Brightened Prices for Dark Mode */
[data-bs-theme="dark"] .tier-color-1 .tier-price-val,
.dark .tier-color-1 .tier-price-val {
    color: #34d399 !important;
}

[data-bs-theme="dark"] .tier-color-2 .tier-price-val,
.dark .tier-color-2 .tier-price-val {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .tier-color-3 .tier-price-val,
.dark .tier-color-3 .tier-price-val {
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .tier-color-4 .tier-price-val,
.dark .tier-color-4 .tier-price-val {
    color: #fbbf24 !important;
}

/* Tier Icons in Dark Mode */
[data-bs-theme="dark"] .tier-color-1 .tier-icon,
.dark .tier-color-1 .tier-icon {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

[data-bs-theme="dark"] .tier-color-2 .tier-icon,
.dark .tier-color-2 .tier-icon {
    background: rgba(99, 102, 241, 0.16) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .tier-color-3 .tier-icon,
.dark .tier-color-3 .tier-icon {
    background: rgba(2, 132, 199, 0.16) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(2, 132, 199, 0.25) !important;
}

[data-bs-theme="dark"] .tier-color-4 .tier-icon,
.dark .tier-color-4 .tier-icon {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

/* Key Specs Box in Dark Mode */
[data-bs-theme="dark"] .nx-specs-pills,
.dark .nx-specs-pills {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-spec-chip,
.dark .nx-spec-chip {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-spec-text,
.dark .nx-spec-text {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-spec-text strong,
.dark .nx-spec-text strong {
    color: #f8fafc !important;
}

/* Feature Checklist in Dark Mode */
[data-bs-theme="dark"] .nx-check-item,
.dark .nx-check-item {
    color: #cbd5e1 !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07) !important;
}

[data-bs-theme="dark"] .tier-color-1 .tier-check,
.dark .tier-color-1 .tier-check {
    color: #34d399 !important;
}

[data-bs-theme="dark"] .tier-color-2 .tier-check,
.dark .tier-color-2 .tier-check {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .tier-color-3 .tier-check,
.dark .tier-color-3 .tier-check {
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .tier-color-4 .tier-check,
.dark .tier-color-4 .tier-check {
    color: #fbbf24 !important;
}

/* Guarantees Bar in Dark Mode */
[data-bs-theme="dark"] .nx-guarantees-bar,
.dark .nx-guarantees-bar {
    background: #111827 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .nx-guarantees-title,
.dark .nx-guarantees-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-guarantee-tag,
.dark .nx-guarantee-tag {
    color: #cbd5e1 !important;
}

/* Sidebar Categories & Widgets in Dark Mode */
[data-bs-theme="dark"] .nx-sidebar-column,
.dark .nx-sidebar-column {
    background: transparent !important;
}

[data-bs-theme="dark"] .nx-side-widget,
.dark .nx-side-widget {
    background: #111827 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="dark"] .nx-widget-title,
.dark .nx-widget-title {
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-nav-item a,
.dark .nx-nav-item a {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-nav-item a:hover,
.dark .nx-nav-item a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .nx-nav-item a.active,
.dark .nx-nav-item a.active {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border-left: 3px solid #10b981 !important;
}

[data-bs-theme="dark"] .nx-action-btn,
.dark .nx-action-btn {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-action-btn:hover,
.dark .nx-action-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
}


/* ==========================================================================
   NEXTGEN EXECUTIVE FOOTER REDESIGN
   ========================================================================== */

#footer.nx-executive-footer {
    position: relative;
    background: #030712 !important;
    color: #94a3b8 !important;
    overflow: hidden;
}

/* Ambient glow accents */
.nx-footer-glow-1 {
    position: absolute;
    top: -100px;
    left: 10%;
    width: 480px;
    height: 360px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.nx-footer-glow-2 {
    position: absolute;
    top: -80px;
    right: 10%;
    width: 480px;
    height: 360px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.11) 0%, rgba(56, 189, 248, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

/* 3-Pillar Executive Cards */
.nx-pillar-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 22px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.nx-pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nx-pillar-indigo::before {
    background: linear-gradient(90deg, #6366f1, #a855f7) !important;
}
.nx-pillar-emerald::before {
    background: linear-gradient(90deg, #10b981, #06b6d4) !important;
}
.nx-pillar-cyan::before {
    background: linear-gradient(90deg, #06b6d4, #3b82f6) !important;
}

.nx-pillar-card:hover {
    transform: translateY(-4px) !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.6), 0 0 25px -4px rgba(99, 102, 241, 0.2) !important;
}

.nx-pillar-card:hover::before {
    opacity: 1 !important;
}

.nx-pillar-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

.nx-pillar-card:hover .nx-pillar-icon {
    transform: scale(1.1) rotate(4deg) !important;
}

.nx-pillar-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
    line-height: 1.2 !important;
}

.nx-badge-indigo {
    background: rgba(99, 102, 241, 0.16) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

.nx-badge-emerald {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.nx-badge-cyan {
    background: rgba(6, 182, 212, 0.16) !important;
    color: #67e8f9 !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
}

/* Links and Navigation */
.nx-footer-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    transition: all 0.22s ease !important;
    padding: 3px 0 !important;
}

.nx-footer-link:hover {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.nx-footer-link i.fa-angle-right {
    font-size: 10px !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: all 0.22s ease !important;
    color: #818cf8 !important;
}

.nx-footer-link:hover i.fa-angle-right {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Micro tags on links */
.nx-link-tag {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    display: inline-block !important;
    margin-left: 6px !important;
}

.nx-tag-hot {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
}

.nx-tag-popular {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
}

.nx-tag-free {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.nx-tag-live {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #7dd3fc !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

/* Security & Trust Card */
.nx-trust-box {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.25s ease !important;
}

.nx-trust-box:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

.nx-pay-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 7px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.nx-pay-pill:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Live Status Badge */
.nx-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #34d399 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.nx-status-pill:hover {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

/* Back to Top button */
.nx-scroll-top-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.nx-scroll-top-btn:hover {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    transform: translateY(-2.5px) !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45) !important;
}

/* Contact micro-badges */
.nx-contact-chip {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nx-contact-chip:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #ffffff !important;
}

.nx-contact-chip i {
    color: #818cf8 !important;
    font-size: 13px !important;
}

/* Separate Copyright Bar */
.nx-separate-copyright-bar {
    background: #020617 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .nx-separate-copyright-bar,
.dark .nx-separate-copyright-bar {
    background: #010409 !important;
    border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* Server Genius Footer Logo */
.nx-footer-logo {
    max-height: 48px !important;
    height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

/* Visually Separate Standalone Copyright Bar */
.nx-separate-copyright-bar {
    background: #000000 !important;
    border-top: 1.5px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.7) !important;
    position: relative;
    z-index: 30;
}

/* Executive Trust & Payment Panel */
.nx-trust-panel {
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: all 0.25s ease !important;
}

.nx-trust-panel:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.nx-showcase-strip {
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 100%), rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}

.nx-showcase-strip:hover {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.12) 0%, transparent 100%), rgba(255, 255, 255, 0.035) !important;
}

.nx-showcase-hero img,
.nx-showcase-strip img {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-showcase-hero:hover img,
.nx-showcase-strip img:hover {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   NEXTGEN BALANCED EXECUTIVE FOOTER STYLING
   ========================================================================== */

.nx-footer-wrap {
    position: relative;
    background: #040711 !important;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nx-glow-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    max-width: 100vw;
    height: 240px;
    background: radial-gradient(ellipse 65% 100px at 50% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* 1. Trust Highlights Strip */
.nx-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 26px 0 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 991px) {
    .nx-trust-strip {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.nx-trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.35) 0%, rgba(15, 23, 42, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.nx-trust-item:hover {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.7) 100%);
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.15);
}

.nx-trust-item .nx-trust-icon-box {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

.nx-trust-item:hover .nx-trust-icon-box {
    transform: scale(1.08);
}

.nx-trust-indigo {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.nx-trust-emerald {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.nx-trust-cyan {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.35);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

.nx-trust-title {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nx-trust-badge {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2.5px 7px;
    border-radius: 5px;
    letter-spacing: 0.5px;
}

.badge-indigo { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.3); }
.badge-emerald { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-cyan { background: rgba(6, 182, 212, 0.2); color: #7dd3fc; border: 1px solid rgba(6, 182, 212, 0.3); }

.nx-trust-desc {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.45;
}

/* 2. Main 4-Column Navigation */
.nx-nav-section {
    padding: 38px 0 28px 0;
}

.nx-nav-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 40px;
}

@media (max-width: 991px) {
    .nx-nav-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 575px) {
    .nx-nav-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

.nx-brand-desc {
    font-size: 12.5px;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 14px 0;
    max-width: 300px;
}

.nx-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #34d399;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none !important;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1);
}

.nx-status-chip:hover {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
}

.nx-status-dot {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: nxPulseDot 2s infinite;
}

@keyframes nxPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.9); }
}

.nx-contact-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

.nx-contact-line {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.nx-contact-line:hover { color: #f8fafc !important; }
.nx-contact-line i { font-size: 13px; color: #818cf8; width: 14px; text-align: center; }

/* Social Icons - Modern Dark Glassmorphic Tiles with Brand Glow on Hover */
.nx-social-row {
    display: flex !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
}

.nx-social-row li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nx-social-row a.nx-soc-btn,
.nx-social-row a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    text-decoration: none !important;
    color: #cbd5e1 !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.nx-social-row a.nx-soc-facebook {
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
}
.nx-social-row a.nx-soc-facebook:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px -3px rgba(37, 99, 235, 0.55) !important;
}

.nx-social-row a.nx-soc-instagram {
    color: #f472b6 !important;
    border-color: rgba(236, 72, 153, 0.28) !important;
}
.nx-social-row a.nx-soc-instagram:hover {
    background: linear-gradient(135deg, #f43f5e 0%, #d946ef 55%, #6366f1 100%) !important;
    color: #ffffff !important;
    border-color: #f472b6 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px -3px rgba(217, 70, 239, 0.55) !important;
}

.nx-social-row a.nx-soc-linkedin {
    color: #38bdf8 !important;
    border-color: rgba(14, 165, 233, 0.28) !important;
}
.nx-social-row a.nx-soc-linkedin:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px -3px rgba(2, 132, 199, 0.55) !important;
}

.nx-social-row a.nx-soc-whatsapp {
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
}
.nx-social-row a.nx-soc-whatsapp:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px -3px rgba(16, 185, 129, 0.55) !important;
}

.nx-social-row a.nx-soc-twitter {
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}
.nx-social-row a.nx-soc-twitter:hover {
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border-color: #94a3b8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px -3px rgba(148, 163, 184, 0.35) !important;
}

.nx-social-row a.nx-soc-youtube {
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
}
.nx-social-row a.nx-soc-youtube:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px -3px rgba(239, 68, 68, 0.55) !important;
}

.nx-col-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ffffff;
    margin: 0 0 18px 0;
    display: block;
    line-height: 1.2;
}

.nx-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9.5px;
}

.nx-link-item a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 12px !important;
    transition: all 0.22s ease;
}

.nx-link-item a:hover {
    color: #ffffff !important;
    transform: translateX(4px);
}

.nx-link-item a i {
    font-size: 8.5px;
    color: #64748b;
    opacity: 0.85;
    margin-right: 2px;
    transform: translateX(0);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nx-link-item a:hover i {
    opacity: 1;
    color: #a5b4fc;
    transform: translateX(3px);
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.95), 0 0 20px rgba(129, 140, 248, 0.75);
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.85));
}

.nx-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 5.5px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: 5px;
    letter-spacing: 0.4px;
    line-height: 1;
}

.tag-hot { background: rgba(239, 68, 68, 0.16); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.tag-pop { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.35); }
.tag-free { background: rgba(16, 185, 129, 0.16); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.tag-live { background: rgba(14, 165, 233, 0.16); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }

/* 3. Full-Width Balanced Showcase Bar */
.nx-showcase-bar {
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(3, 7, 18, 0.8) 100%);
    backdrop-filter: blur(10px);
}

.nx-showcase-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.nx-partners-group {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.nx-partner-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 7px;
}

.nx-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.92;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.nx-partner-logo:hover {
    opacity: 1;
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 4px 14px rgba(99, 102, 241, 0.3));
}

.nx-payments-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.nx-ssl-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #34d399;
    padding: 5px 11px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.nx-pay-chips {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.nx-pay-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #cbd5e1;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.nx-pay-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nx-pay-cf-icon {
    height: 14px;
    width: auto;
    max-width: 24px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.nx-nb-icon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

[data-bs-theme="light"] .nx-nb-icon {
    filter: none;
    opacity: 0.75;
}

/* 4. Standalone Separate Copyright Bar */
.nx-sub-footer {
    background: #02040a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 0 !important;
    position: relative;
    z-index: 10;
}

.nx-sub-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 12px;
}

.nx-sub-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nx-sub-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nx-scroll-top {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s ease;
}

.nx-scroll-top:hover {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.nx-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nx-lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
}

/* ==========================================================================
   STICKY FLOATING ACTIONS (Theme Toggle & Go-To-Top with Circular Progress)
   ========================================================================== */
.nx-sticky-actions {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}

.nx-sticky-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: auto !important;
}

/* 1. Theme Toggle Button - Light Mode (Soft frosted mint/cyan glass like Image 2) */
.nx-sticky-theme-toggle {
    background: radial-gradient(130% 130% at 30% 20%, rgba(240, 253, 250, 0.96) 0%, rgba(224, 242, 254, 0.96) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.28) !important;
    box-shadow: 0 8px 22px -3px rgba(14, 165, 233, 0.25), 0 0 14px rgba(167, 243, 208, 0.35) !important;
    color: #0284c7 !important;
    /* Without scroll: sits at the bottom corner (offset by 60px) */
    transform: translateY(60px) scale(1) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.nx-sticky-theme-toggle:hover {
    transform: translateY(58px) scale(1.08) !important;
    box-shadow: 0 12px 26px -3px rgba(14, 165, 233, 0.35), 0 0 18px rgba(167, 243, 208, 0.55) !important;
}

/* When scrolled: shift upper to make room for Go To Top at the bottom! */
.nx-sticky-actions.has-scrolled .nx-sticky-theme-toggle {
    transform: translateY(0) scale(1) !important;
}

.nx-sticky-actions.has-scrolled .nx-sticky-theme-toggle:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 12px 26px -3px rgba(14, 165, 233, 0.35), 0 0 18px rgba(167, 243, 208, 0.55) !important;
}

.nx-theme-icon-light {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #0284c7 !important;
    font-size: 16px;
    filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.4));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.nx-sticky-theme-toggle:hover .nx-theme-icon-light {
    transform: rotate(20deg) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.65));
}

.nx-theme-icon-dark {
    display: none !important;
}

/* 2. Go To Top Button (Both modes use Sleek Dark Obsidian Circle like Image 2 & 3) */
.nx-sticky-scroll-top {
    background: #0d1527 !important;
    border: none !important;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(16px) scale(0.85) !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease !important;
}

.nx-sticky-scroll-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.nx-sticky-scroll-top.is-visible:hover {
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.65), 0 0 20px rgba(245, 158, 11, 0.35) !important;
}

/* SVG Progress Ring with Orange/Amber Stroke like Image 2 & 3 */
.nx-progress-ring {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 48px !important;
    height: 48px !important;
    transform: rotate(-90deg) !important;
    transform-origin: 50% 50% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.nx-progress-ring-track {
    stroke: rgba(255, 255, 255, 0.15) !important;
    stroke-width: 3px !important;
    pointer-events: none !important;
}

.nx-progress-ring-circle {
    stroke: #f59e0b !important;
    stroke-width: 3px !important;
    stroke-linecap: round !important;
    stroke-dasharray: 135.09;
    stroke-dashoffset: 135.09;
    transition: stroke-dashoffset 0.12s ease-out;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.85)) !important;
    pointer-events: none !important;
}

/* Scroll Icons: Arrow in resting, Rocket on hover (Image 2 & 3) */
.nx-scroll-icons,
.nx-scroll-icons * {
    pointer-events: none !important;
}

.nx-scroll-icons {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.nx-icon-arrow {
    color: #ffffff !important;
    font-size: 15px;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-icon-rocket {
    position: absolute;
    color: #38bdf8 !important;
    font-size: 16px;
    opacity: 0;
    transform: translateY(8px) scale(0.7);
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9));
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-sticky-scroll-top:hover .nx-icon-arrow {
    opacity: 0;
    transform: translateY(-8px) scale(0.7);
}

.nx-sticky-scroll-top:hover .nx-icon-rocket {
    opacity: 1;
    transform: translateY(0) scale(1.1);
}

/* --- Dark Theme Overrides for Sticky Actions --- */
[data-bs-theme="dark"] .nx-sticky-theme-toggle,
.dark .nx-sticky-theme-toggle {
    background: rgba(11, 19, 41, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.7), 0 0 18px rgba(245, 158, 11, 0.25) !important;
    transform: translateY(60px) scale(1) !important;
}

[data-bs-theme="dark"] .nx-sticky-theme-toggle:hover,
.dark .nx-sticky-theme-toggle:hover {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.85), 0 0 24px rgba(251, 191, 36, 0.55) !important;
    transform: translateY(58px) rotate(30deg) scale(1.1) !important;
}

[data-bs-theme="dark"] .nx-sticky-actions.has-scrolled .nx-sticky-theme-toggle,
.dark .nx-sticky-actions.has-scrolled .nx-sticky-theme-toggle {
    transform: translateY(0) scale(1) !important;
}

[data-bs-theme="dark"] .nx-sticky-actions.has-scrolled .nx-sticky-theme-toggle:hover,
.dark .nx-sticky-actions.has-scrolled .nx-sticky-theme-toggle:hover {
    transform: translateY(-2px) rotate(30deg) scale(1.1) !important;
}

[data-bs-theme="dark"] .nx-theme-icon-light,
.dark .nx-theme-icon-light {
    display: none !important;
}

[data-bs-theme="dark"] .nx-theme-icon-dark,
.dark .nx-theme-icon-dark {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fbbf24 !important;
    font-size: 17px;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.75));
    transition: transform 0.25s ease, filter 0.25s ease;
}

[data-bs-theme="dark"] .nx-sticky-theme-toggle:hover .nx-theme-icon-dark,
.dark .nx-sticky-theme-toggle:hover .nx-theme-icon-dark {
    transform: rotate(30deg) scale(1.1);
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.95));
}

[data-bs-theme="dark"] .nx-sticky-scroll-top,
.dark .nx-sticky-scroll-top {
    background: #090e1d !important;
    border: none !important;
}

/* ==========================================================================
   LANGUAGE & CURRENCY SWITCHER MODAL (Dark Theme High-End)
   ========================================================================== */
.modal-localisation .modal-content.nx-modal-localisation-content {
    background: #090d16 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(99, 102, 241, 0.25) !important;
    color: #f1f5f9 !important;
    overflow: hidden;
}

.nx-modal-section-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.nx-item-selector .nx-modal-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nx-item-selector .nx-modal-item .check-icon {
    font-size: 11px;
    opacity: 0.35;
    transition: all 0.2s ease;
}

.nx-item-selector .nx-modal-item:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.nx-item-selector .nx-modal-item.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(129, 140, 248, 0.2)) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.35) !important;
}

.nx-item-selector .nx-modal-item.active .check-icon {
    opacity: 1;
    color: #818cf8;
}

.nx-modal-btn-cancel {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    border-radius: 8px !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.nx-modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.nx-modal-btn-apply {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 7px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
    transition: all 0.2s ease !important;
}
.nx-modal-btn-apply:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.6) !important;
    transform: translateY(-1px);
}

.nx-custom-backdrop {
    background: rgba(3, 7, 18, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ==========================================================================
   FUTURISTIC 404 ERROR HUB & RECOVERY EXPERIENCE
   ========================================================================== */

.nx-error-body-wrap {
    padding: 0 !important;
    background: transparent !important;
    min-height: calc(100vh - 160px);
}

.nx-error-body-wrap .primary-content {
    padding: 0 !important;
    background: transparent !important;
}

.nx-error-hub {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 15%, rgba(99, 102, 241, 0.14) 0%, rgba(15, 23, 42, 0.6) 50%, #030712 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-bs-theme="light"] .nx-error-hub {
    background: radial-gradient(ellipse at 50% 15%, rgba(99, 102, 241, 0.08) 0%, #ffffff 60%, #f8fafc 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nx-error-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 1;
    max-width: 100vw;
}

.nx-glow-indigo {
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
}

.nx-glow-cyan {
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 380px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 70%);
}

.nx-error-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
    background-size: 36px 36px;
    pointer-events: none;
    opacity: 0.75;
    z-index: 1;
}

[data-bs-theme="light"] .nx-error-grid-overlay {
    background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 0);
}

/* Status Pill */
.nx-error-pill {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.15);
}

[data-bs-theme="light"] .nx-error-pill {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.nx-error-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
    animation: nxPulseErr 1.8s infinite;
}

@keyframes nxPulseErr {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Giant Futuristic 404 Visual */
.nx-404-visual-wrap {
    margin-bottom: 8px;
    display: inline-block;
}

.nx-404-big-number {
    font-size: clamp(90px, 15vw, 160px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, #c7d2fe 0%, #818cf8 35%, #38bdf8 70%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 12px 36px rgba(99, 102, 241, 0.4));
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-bs-theme="light"] .nx-404-big-number {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 35%, #0284c7 70%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 12px 30px rgba(99, 102, 241, 0.25));
}

.nx-404-floating-badge {
    position: absolute;
    top: 6%;
    right: 18%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #e0e7ff;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: nxFloatBadge 3.5s ease-in-out infinite;
}

@keyframes nxFloatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

[data-bs-theme="light"] .nx-404-floating-badge {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.nx-error-title {
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-bs-theme="light"] .nx-error-title {
    color: #0f172a;
}

.nx-error-lead {
    color: #94a3b8;
}

[data-bs-theme="light"] .nx-error-lead {
    color: #64748b;
}

.nx-referrer-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #fde68a;
    font-size: 13px;
}

/* Smart Search Input */
.nx-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 6px 7px 6px 18px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-bs-theme="light"] .nx-search-input-wrapper {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.nx-search-input-wrapper:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25), 0 10px 36px rgba(0, 0, 0, 0.5);
}

.nx-search-icon {
    font-size: 15px;
    color: #818cf8;
    margin-right: 12px;
}

.nx-search-field {
    flex-grow: 1;
    background: transparent;
    border: none !important;
    outline: none !important;
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
}

.nx-search-field::placeholder {
    color: #64748b;
}

[data-bs-theme="light"] .nx-search-field {
    color: #0f172a;
}

.nx-search-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 11px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.nx-search-submit-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5);
}

/* Primary Action Buttons */
.nx-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.nx-btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.nx-btn-primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(99, 102, 241, 0.55);
    color: #ffffff !important;
}

.nx-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0 !important;
    backdrop-filter: blur(8px);
}

[data-bs-theme="light"] .nx-btn-secondary {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nx-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(99, 102, 241, 0.4);
    color: #ffffff !important;
    transform: translateY(-2px);
}

[data-bs-theme="light"] .nx-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a !important;
}

/* Quick Recovery Destination Cards */
.nx-quick-destinations-border {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="light"] .nx-quick-destinations-border {
    border-color: rgba(0, 0, 0, 0.08);
}

.nx-section-kicker {
    color: #818cf8;
}

.nx-dest-card {
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.35) 0%, rgba(15, 23, 42, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="light"] .nx-dest-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.nx-dest-card:hover {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.15);
}

[data-bs-theme="light"] .nx-dest-card:hover {
    background: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 12px 30px -4px rgba(99, 102, 241, 0.15);
}

.nx-dest-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
    transition: transform 0.3s ease;
}

.nx-dest-card:hover .nx-dest-icon-box {
    transform: scale(1.1);
}

.nx-dest-indigo {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0.08) 100%);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.nx-dest-cyan {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0.08) 100%);
    color: #38bdf8;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.nx-dest-emerald {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.nx-dest-rose {
    background: radial-gradient(circle, rgba(244, 63, 94, 0.22) 0%, rgba(244, 63, 94, 0.08) 100%);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.nx-dest-title {
    font-size: 15px;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 6px 0;
    transition: color 0.2s ease;
}

[data-bs-theme="light"] .nx-dest-title {
    color: #0f172a;
}

.nx-dest-desc {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0 0 14px 0;
    flex-grow: 1;
}

[data-bs-theme="light"] .nx-dest-desc {
    color: #64748b;
}

.nx-dest-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #818cf8;
    transition: transform 0.2s ease;
}

.nx-dest-card:hover .nx-dest-arrow {
    transform: translateX(4px);
}

.nx-dest-subheading {
    color: #f1f5f9;
}

[data-bs-theme="light"] .nx-dest-subheading {
    color: #0f172a;
}

@media (max-width: 768px) {
    .nx-glow-top {
        display: none !important;
    }
    .nx-error-glow {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .nx-404-floating-badge {
        display: none !important;
    }
    .nx-404-big-number {
        font-size: 76px !important;
        line-height: 1 !important;
    }
    .nx-error-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    .nx-error-lead {
        font-size: 13px !important;
    }
    .nx-search-submit-btn span {
        display: none;
    }
    .nx-search-submit-btn {
        padding: 9px 14px !important;
    }
    .nx-search-field {
        font-size: 13px !important;
    }
    .nx-btn-action {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   CLIENT AREA: PREMIUM ACCOUNT SUITE (Details, Users, Contacts, Security, Emails)
   ========================================================================== */

/* Page Header & Badges */
.nx-page-header {
    background: transparent;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 24px;
}

[data-bs-theme="dark"] .nx-page-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nx-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.nx-page-badge.badge-indigo {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
}
[data-bs-theme="dark"] .nx-page-badge.badge-indigo {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

.nx-page-badge.badge-blue {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
}
[data-bs-theme="dark"] .nx-page-badge.badge-blue {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
    border-color: rgba(37, 99, 235, 0.3);
}

.nx-page-badge.badge-emerald {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
[data-bs-theme="dark"] .nx-page-badge.badge-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

.nx-page-badge.badge-cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.2);
}
[data-bs-theme="dark"] .nx-page-badge.badge-cyan {
    background: rgba(6, 182, 212, 0.15);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.nx-page-badge.badge-amber {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
[data-bs-theme="dark"] .nx-page-badge.badge-amber {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

.nx-page-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
}
[data-bs-theme="dark"] .nx-page-title {
    color: #ffffff !important;
}

.nx-page-subtitle {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
[data-bs-theme="dark"] .nx-page-subtitle {
    color: #94a3b8 !important;
}

/* Status Chips & Badges */
.nx-account-status-chip,
.nx-count-chip,
.nx-security-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-bs-theme="dark"] .nx-account-status-chip,
[data-bs-theme="dark"] .nx-count-chip,
[data-bs-theme="dark"] .nx-security-status-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    box-shadow: none;
}

.nx-status-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* Section Cards */
.nx-section-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
[data-bs-theme="dark"] .nx-section-card {
    background: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

.nx-section-header {
    background: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
[data-bs-theme="dark"] .nx-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.nx-section-icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.nx-section-icon-box.icon-indigo { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
[data-bs-theme="dark"] .nx-section-icon-box.icon-indigo { background: rgba(99, 102, 241, 0.2); color: #818cf8; }

.nx-section-icon-box.icon-emerald { background: rgba(16, 185, 129, 0.12); color: #059669; }
[data-bs-theme="dark"] .nx-section-icon-box.icon-emerald { background: rgba(16, 185, 129, 0.2); color: #34d399; }

.nx-section-icon-box.icon-cyan { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
[data-bs-theme="dark"] .nx-section-icon-box.icon-cyan { background: rgba(6, 182, 212, 0.2); color: #22d3ee; }

.nx-section-icon-box.icon-purple { background: rgba(168, 85, 247, 0.12); color: #7c3aed; }
[data-bs-theme="dark"] .nx-section-icon-box.icon-purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

.nx-section-icon-box.icon-amber { background: rgba(245, 158, 11, 0.12); color: #d97706; }
[data-bs-theme="dark"] .nx-section-icon-box.icon-amber { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }

.nx-section-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
[data-bs-theme="dark"] .nx-section-heading {
    color: #f1f5f9 !important;
}

.nx-section-subheading {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 0 !important;
}
[data-bs-theme="dark"] .nx-section-subheading {
    color: #94a3b8 !important;
}

.nx-section-body {
    padding: 22px !important;
}

/* Form Labels & Modern Input Groups */
.nx-form-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #475569 !important;
    margin-bottom: 7px !important;
    display: block !important;
}
[data-bs-theme="dark"] .nx-form-label {
    color: #94a3b8 !important;
}

.nx-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.nx-input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    pointer-events: none !important;
    z-index: 5 !important;
    transition: color 0.2s ease !important;
}

.nx-input-group input.nx-input,
.nx-input-group select.nx-input {
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 14px !important;
    height: 44px !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

[data-bs-theme="dark"] .nx-input-group input.nx-input,
[data-bs-theme="dark"] .nx-input-group select.nx-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

.nx-input-group input.nx-input:focus,
.nx-input-group select.nx-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}
.nx-input-group:focus-within .nx-input-icon {
    color: #6366f1 !important;
}

.nx-input-group input:disabled,
.nx-input-group select:disabled {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}
[data-bs-theme="dark"] .nx-input-group input:disabled,
[data-bs-theme="dark"] .nx-input-group select:disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #64748b !important;
}

/* Custom Select Dropdowns in WHMCS */
.nx-select-group select {
    cursor: pointer !important;
}

/* Notification Preference Tiles */
.nx-pref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.nx-pref-tile {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 14px 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-bs-theme="dark"] .nx-pref-tile {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-pref-tile:hover {
    border-color: #cbd5e1;
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
[data-bs-theme="dark"] .nx-pref-tile:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
}

.nx-pref-tile.is-active {
    background: rgba(99, 102, 241, 0.05);
    border-color: #6366f1;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}
[data-bs-theme="dark"] .nx-pref-tile.is-active {
    background: rgba(99, 102, 241, 0.12);
    border-color: #818cf8;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.25);
}

.nx-pref-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nx-pref-tile-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nx-pref-tile-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
[data-bs-theme="dark"] .nx-pref-tile-icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.nx-pref-tile-text {
    flex: 1;
}

.nx-pref-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
[data-bs-theme="dark"] .nx-pref-title {
    color: #f1f5f9;
}

.nx-pref-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.3;
    margin-top: 2px;
}
[data-bs-theme="dark"] .nx-pref-desc {
    color: #94a3b8;
}

.nx-pref-switch-visual {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.2s ease;
}
[data-bs-theme="dark"] .nx-pref-switch-visual {
    background: rgba(255, 255, 255, 0.12);
}

.nx-pref-tile.is-active .nx-pref-switch-visual {
    background: #6366f1;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* Action Buttons */
.nx-btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.nx-btn-primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
}

.nx-btn-secondary {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
[data-bs-theme="dark"] .nx-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}
.nx-btn-secondary:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .nx-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.nx-btn-danger {
    background: #ef4444 !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.nx-btn-danger:hover {
    background: #dc2626 !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.45) !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
}

/* User Management Styling */
.nx-user-list {
    display: flex;
    flex-direction: column;
}

.nx-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 18px;
    transition: all 0.2s ease;
}
[data-bs-theme="dark"] .nx-user-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.nx-user-row:last-child {
    border-bottom: none;
}
.nx-user-row:hover {
    background: #f8fafc;
}
[data-bs-theme="dark"] .nx-user-row:hover {
    background: rgba(255, 255, 255, 0.02);
}
.nx-user-row.is-owner {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.03) 0%, transparent 100%);
}
[data-bs-theme="dark"] .nx-user-row.is-owner {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, transparent 100%);
}

.nx-user-col-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nx-user-avatar-wrap {
    position: relative;
    display: inline-block;
}

.nx-user-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
    border: 2px solid #ffffff;
}
[data-bs-theme="dark"] .nx-user-avatar {
    border-color: #1e293b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.nx-user-avatar.is-pending {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.nx-avatar-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 13px;
    height: 13px;
    background: #10b981;
    border: 2.5px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
[data-bs-theme="dark"] .nx-avatar-status-dot {
    border-color: #0f172a;
}

.nx-user-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nx-user-primary-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nx-user-name {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
[data-bs-theme="dark"] .nx-user-name {
    color: #f8fafc;
}

.nx-badge-owner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
[data-bs-theme="dark"] .nx-badge-owner {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
}

.nx-badge-owner i {
    color: #f59e0b;
}

.nx-badge-member {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-size: 11px;
    font-weight: 600;
}
[data-bs-theme="dark"] .nx-badge-member {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

.nx-user-email-line {
    display: flex;
    align-items: center;
}

.nx-user-email {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}
[data-bs-theme="dark"] .nx-user-email {
    color: #94a3b8;
}

.nx-user-details-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.nx-meta-chip {
    font-size: 11.5px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 3px 9px;
    border-radius: 6px;
    font-weight: 500;
}
[data-bs-theme="dark"] .nx-meta-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.nx-meta-chip.is-success {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.25);
    font-weight: 600;
}
[data-bs-theme="dark"] .nx-meta-chip.is-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.nx-meta-chip.is-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.25);
    font-weight: 600;
}
[data-bs-theme="dark"] .nx-meta-chip.is-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.nx-owner-actions-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nx-owner-privilege-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.07);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
[data-bs-theme="dark"] .nx-owner-privilege-chip {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.35);
}

.nx-owner-notice-footer {
    padding: 16px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 14px;
}
[data-bs-theme="dark"] .nx-owner-notice-footer {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-top-color: rgba(255, 255, 255, 0.06);
}

.nx-notice-icon-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
[data-bs-theme="dark"] .nx-notice-icon-box {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

.nx-notice-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nx-notice-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
}
[data-bs-theme="dark"] .nx-notice-title {
    color: #f1f5f9;
}

.nx-notice-desc {
    font-size: 12px;
    color: #64748b;
}
[data-bs-theme="dark"] .nx-notice-desc {
    color: #94a3b8;
}

.nx-btn-action-perm {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}
[data-bs-theme="dark"] .nx-btn-action-perm {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}
.nx-btn-action-perm:hover:not(.disabled) {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-1px);
}
[data-bs-theme="dark"] .nx-btn-action-perm:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.nx-btn-action-remove {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #dc2626 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}
[data-bs-theme="dark"] .nx-btn-action-remove {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
.nx-btn-action-remove:hover:not(.disabled) {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.nx-btn-action-resend {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    color: #d97706 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}



/* Permission Level Selection Tiles */
.nx-perm-tile {
    position: relative;
    display: block;
    cursor: pointer;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
}
[data-bs-theme="dark"] .nx-perm-tile {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.nx-perm-tile.active {
    background: rgba(99, 102, 241, 0.06);
    border-color: #6366f1;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15);
}
[data-bs-theme="dark"] .nx-perm-tile.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: #818cf8;
}

.nx-perm-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nx-perm-tile-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nx-perm-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.nx-perm-icon.icon-key { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
.nx-perm-icon.icon-sliders { background: rgba(6, 182, 212, 0.12); color: #0891b2; }

.nx-perm-meta {
    flex: 1;
}
.nx-perm-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
[data-bs-theme="dark"] .nx-perm-title {
    color: #ffffff;
}
.nx-perm-desc {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
[data-bs-theme="dark"] .nx-perm-desc {
    color: #94a3b8;
}

.nx-perm-check {
    font-size: 18px;
    color: #cbd5e1;
    transition: all 0.2s ease;
}
.nx-perm-tile.active .nx-perm-check {
    color: #6366f1;
}

/* Granular Permissions */
.nx-granular-permissions-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}
[data-bs-theme="dark"] .nx-granular-permissions-box {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

.nx-permission-checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    margin: 0;
    height: 100%;
}
[data-bs-theme="dark"] .nx-permission-checkbox-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.nx-perm-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
[data-bs-theme="dark"] .nx-perm-name {
    color: #f1f5f9;
}
.nx-perm-explanation {
    font-size: 11.5px;
    color: #64748b;
}
[data-bs-theme="dark"] .nx-perm-explanation {
    color: #94a3b8;
}

/* Contact Toolbar */
.nx-contact-toolbar-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
[data-bs-theme="dark"] .nx-contact-toolbar-card {
    background: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.nx-toolbar-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}
[data-bs-theme="dark"] .nx-toolbar-title {
    color: #ffffff;
}
.nx-toolbar-subtitle {
    font-size: 12px;
    color: #64748b;
}
[data-bs-theme="dark"] .nx-toolbar-subtitle {
    color: #94a3b8;
}

/* Single Sign-On (SSO) Security */
.nx-sso-hero-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 14px;
    padding: 16px 20px;
}
[data-bs-theme="dark"] .nx-sso-hero-banner {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

.nx-sso-hero-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: #10b981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.nx-sso-hero-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #065f46 !important;
    margin: 0 0 2px 0 !important;
}
[data-bs-theme="dark"] .nx-sso-hero-title {
    color: #34d399 !important;
}

.nx-sso-hero-desc {
    font-size: 13px !important;
    color: #047857 !important;
    margin: 0 !important;
}
[data-bs-theme="dark"] .nx-sso-hero-desc {
    color: #a7f3d0 !important;
}

.nx-sso-toggle-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 14px;
}
[data-bs-theme="dark"] .nx-sso-toggle-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-sso-toggle-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Custom Modern Toggle Switch */
.nx-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    margin: 0;
}

.nx-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nx-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 34px;
    transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-bs-theme="dark"] .nx-toggle-slider {
    background-color: rgba(255, 255, 255, 0.15);
}

.nx-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.nx-toggle-switch input:checked + .nx-toggle-slider {
    background-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.nx-toggle-switch input:checked + .nx-toggle-slider:before {
    transform: translateX(24px);
}

.nx-sso-status-labels {
    font-size: 13.5px;
    font-weight: 600;
}
.nx-sso-active-label {
    color: #059669;
}
[data-bs-theme="dark"] .nx-sso-active-label {
    color: #34d399;
}
.nx-sso-disabled-label {
    color: #64748b;
}

.nx-status-chip-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
}
.nx-status-chip-live.is-on {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
[data-bs-theme="dark"] .nx-status-chip-live.is-on {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
.nx-status-chip-live.is-off {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.nx-sso-notice {
    font-size: 12.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 7px;
}
[data-bs-theme="dark"] .nx-sso-notice {
    color: #94a3b8;
}

/* Email History Table */
.nx-email-table-wrap {
    overflow-x: auto;
}

.nx-table-modern {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.nx-table-modern thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 14px 20px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-top: none !important;
}
[data-bs-theme="dark"] .nx-table-modern thead th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #94a3b8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.nx-email-row {
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.nx-email-row td {
    padding: 14px 20px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
}
[data-bs-theme="dark"] .nx-email-row td {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.nx-email-row:hover td {
    background: #f8fafc !important;
}
[data-bs-theme="dark"] .nx-email-row:hover td {
    background: rgba(255, 255, 255, 0.025) !important;
}

.nx-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
}
[data-bs-theme="dark"] .nx-date-pill {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
}

.nx-email-subject-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nx-mail-icon {
    font-size: 14px;
}

.nx-mail-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}
[data-bs-theme="dark"] .nx-mail-title {
    color: #ffffff;
}

.nx-attachment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    font-size: 11px;
    font-weight: 700;
}
[data-bs-theme="dark"] .nx-attachment-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.nx-btn-view-msg {
    background: rgba(99, 102, 241, 0.1) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    color: #4f46e5 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}
[data-bs-theme="dark"] .nx-btn-view-msg {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}
.nx-btn-view-msg:hover {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}

/* Modals */
.nx-modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}
[data-bs-theme="dark"] .nx-modal-content {
    background: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
}

/* DataTables Global Refinements for Clean Styling */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
.dataTables_wrapper .dataTables_info {
    font-size: 12.5px !important;
    color: #64748b !important;
    padding: 12px 20px !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: #94a3b8 !important;
}
.dataTables_wrapper .dataTables_filter {
    padding: 12px 20px !important;
}

/* Fix Sidebar Active Item Text Contrast in Dark Mode - Seamless, No Nested Box */
[data-bs-theme="dark"] .sidebar .card .list-group-item.active,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active,
.dark .sidebar .card .list-group-item.active,
.dark .card-sidebar .list-group-item.active {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
    border-left: 3.5px solid #818cf8 !important;
    border-radius: 4px 10px 10px 4px !important;
}

[data-bs-theme="dark"] .sidebar .card .list-group-item.active span,
[data-bs-theme="dark"] .sidebar .card .list-group-item.active i,
[data-bs-theme="dark"] .sidebar .card .list-group-item.active .nx-sidebar-label,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active span,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active i,
[data-bs-theme="dark"] .card-sidebar .list-group-item.active .nx-sidebar-label,
.dark .sidebar .card .list-group-item.active span,
.dark .sidebar .card .list-group-item.active i,
.dark .sidebar .card .list-group-item.active .nx-sidebar-label,
.dark .card-sidebar .list-group-item.active span,
.dark .card-sidebar .list-group-item.active i,
.dark .card-sidebar .list-group-item.active .nx-sidebar-label {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.sidebar .card .list-group-item.active i.fa-check,
.card-sidebar .list-group-item.active i.fa-check {
    color: #818cf8 !important;
    background: transparent !important;
    margin-left: auto !important;
}

/* Hide raw/duplicate bootstrap-switch wrappers if our custom toggle is active */
.nx-sso-form .bootstrap-switch.bootstrap-switch-wrapper,
.nx-optin-card .bootstrap-switch.bootstrap-switch-wrapper {
    display: none !important;
}

/* ========================================================
   3. Modern Mailing List / Marketing Opt-In Card
   ======================================================== */
.nx-optin-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1.5px solid #e0e7ff !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
}

.nx-optin-card:hover {
    border-color: #c7d2fe !important;
    box-shadow: 0 10px 25px -3px rgba(99, 102, 241, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .nx-optin-card,
.dark .nx-optin-card {
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
    border: 1.5px solid rgba(99, 102, 241, 0.22) !important;
    box-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-optin-card:hover,
.dark .nx-optin-card:hover {
    border-color: rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 10px 30px -3px rgba(99, 102, 241, 0.15) !important;
}

.nx-optin-icon-badge {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
    transition: transform 0.25s ease;
}

.nx-optin-card:hover .nx-optin-icon-badge {
    transform: scale(1.06) rotate(-3deg);
}

.nx-optin-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

[data-bs-theme="dark"] .nx-optin-tag,
.dark .nx-optin-tag {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.35);
}

.nx-optin-pill {
    font-size: 12px;
    color: #475569;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nx-optin-pill i {
    color: #10b981;
    font-size: 11px;
}

[data-bs-theme="dark"] .nx-optin-pill,
.dark .nx-optin-pill {
    color: #94a3b8;
}

.nx-optin-toggle-zone {
    padding: 6px 12px;
    background: rgba(241, 245, 249, 0.6);
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
}

[data-bs-theme="dark"] .nx-optin-toggle-zone,
.dark .nx-optin-toggle-zone {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}


/* ========================================================================
   SUPPORT TICKETS & CONVERSATION STREAM MODERNIZATION
   ======================================================================== */
.nx-ticket-tid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--whmcs-font-mono, monospace);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .nx-ticket-tid,
.dark .nx-ticket-tid {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}

.nx-ticket-subject-link {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}

.nx-ticket-subject-link:hover {
    color: #6366f1;
}

[data-bs-theme="dark"] .nx-ticket-subject-link,
.dark .nx-ticket-subject-link {
    color: #f8fafc;
}

[data-bs-theme="dark"] .nx-ticket-subject-link:hover,
.dark .nx-ticket-subject-link:hover {
    color: #818cf8;
}

.nx-dept-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: rgba(100, 116, 139, 0.08);
    padding: 3px 10px;
    border-radius: 9999px;
}

[data-bs-theme="dark"] .nx-dept-pill,
.dark .nx-dept-pill {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
}

.nx-ticket-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.nx-ticket-status-badge.status-open {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.nx-ticket-status-badge.status-answered {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.nx-ticket-status-badge.status-customer-reply {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.nx-ticket-status-badge.status-closed {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

[data-bs-theme="dark"] .nx-ticket-status-badge.status-open,
.dark .nx-ticket-status-badge.status-open {
    color: #fbbf24;
}

[data-bs-theme="dark"] .nx-ticket-status-badge.status-answered,
.dark .nx-ticket-status-badge.status-answered {
    color: #34d399;
}

[data-bs-theme="dark"] .nx-ticket-status-badge.status-customer-reply,
.dark .nx-ticket-status-badge.status-customer-reply {
    color: #a5b4fc;
}

/* Conversation Stream (viewticket.tpl) */
.nx-ticket-stream {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 25px 0;
}

.nx-ticket-message-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.nx-ticket-message-card.is-staff {
    border-left: 5px solid #6366f1;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.02) 0%, #ffffff 100%);
}

.nx-ticket-message-card.is-client {
    border-left: 5px solid #10b981;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.02) 0%, #ffffff 100%);
}

[data-bs-theme="dark"] .nx-ticket-message-card,
.dark .nx-ticket-message-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .nx-ticket-message-card.is-staff,
.dark .nx-ticket-message-card.is-staff {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, #111827 100%);
    border-left-color: #818cf8;
}

[data-bs-theme="dark"] .nx-ticket-message-card.is-client,
.dark .nx-ticket-message-card.is-client {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, #111827 100%);
    border-left-color: #34d399;
}

.nx-ticket-header-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

[data-bs-theme="dark"] .nx-ticket-header-meta,
.dark .nx-ticket-header-meta {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.nx-ticket-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-avatar, .client-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

.staff-avatar {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.client-avatar {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.nx-badge-staff-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.25);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    margin-left: 6px;
}

[data-bs-theme="dark"] .nx-badge-staff-role,
.dark .nx-badge-staff-role {
    background: rgba(99, 102, 241, 0.22);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.4);
}

.nx-ticket-body-content {
    font-size: 14.5px;
    line-height: 1.7;
    color: #334155;
}

[data-bs-theme="dark"] .nx-ticket-body-content,
.dark .nx-ticket-body-content {
    color: #cbd5e1;
}

/* Rating box */
.nx-rating-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 12px;
}

[data-bs-theme="dark"] .nx-rating-box,
.dark .nx-rating-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}


/* ========================================================================
   AFFILIATES DASHBOARD & ONBOARDING MODERNIZATION
   ======================================================================== */
.nx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

.nx-kpi-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.nx-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] .nx-kpi-card,
.dark .nx-kpi-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-kpi-card .nx-kpi-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.nx-kpi-card.kpi-cyan .nx-kpi-icon-wrap {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
}

.nx-kpi-card.kpi-emerald .nx-kpi-icon-wrap {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.nx-kpi-card.kpi-indigo .nx-kpi-icon-wrap {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.nx-kpi-card.kpi-amber .nx-kpi-icon-wrap {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.nx-kpi-card .nx-kpi-value {
    font-family: var(--whmcs-font-main);
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

[data-bs-theme="dark"] .nx-kpi-card .nx-kpi-value,
.dark .nx-kpi-card .nx-kpi-value {
    color: #f8fafc;
}

.nx-kpi-card .nx-kpi-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

[data-bs-theme="dark"] .nx-kpi-card .nx-kpi-label,
.dark .nx-kpi-card .nx-kpi-label {
    color: #94a3b8;
}

/* Copy group for referral link */
.nx-copy-group {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    padding: 6px;
    transition: border-color 0.2s ease;
}

.nx-copy-group:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

[data-bs-theme="dark"] .nx-copy-group,
.dark .nx-copy-group {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.nx-input-code {
    border: none !important;
    background: transparent !important;
    font-family: var(--whmcs-font-mono, monospace) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    padding: 8px 14px !important;
}

[data-bs-theme="dark"] .nx-input-code,
.dark .nx-input-code {
    color: #38bdf8 !important;
}

.nx-btn-copy {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.nx-btn-copy:hover {
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px);
}


/* ========================================================================
   PRODUCT & SERVICE DETAILS (clientareaproductdetails.tpl)
   ======================================================================== */
.nx-product-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1.5px solid #e2e8f0;
    border-radius: 22px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
}

[data-bs-theme="dark"] .nx-product-hero-card,
.dark .nx-product-hero-card {
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-product-icon-tile {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

.nx-group-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-bs-theme="dark"] .nx-group-tag,
.dark .nx-group-tag {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

.nx-service-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 800;
}

.nx-service-status-chip.is-active {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-bs-theme="dark"] .nx-service-status-chip.is-active,
.dark .nx-service-status-chip.is-active {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.nx-module-shortcuts-wrapper {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.nx-module-shortcuts-wrapper form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
}

.nx-module-shortcuts-wrapper .btn,
.nx-module-shortcuts-wrapper input[type="submit"],
.nx-module-shortcuts-wrapper input[type="button"],
.nx-module-shortcuts-wrapper button {
    margin: 4px 6px !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.nx-module-shortcuts-wrapper .btn-default,
.nx-module-shortcuts-wrapper input.btn-default {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.nx-module-shortcuts-wrapper .btn-default:hover,
.nx-module-shortcuts-wrapper input.btn-default:hover {
    border-color: #4f46e5 !important;
    color: #4f46e5 !important;
    transform: translateY(-1px) !important;
}

[data-bs-theme="dark"] .nx-module-shortcuts-wrapper,
.dark .nx-module-shortcuts-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .nx-module-shortcuts-wrapper .btn-default,
.dark .nx-module-shortcuts-wrapper .btn-default,
[data-bs-theme="dark"] .nx-module-shortcuts-wrapper input.btn-default,
.dark .nx-module-shortcuts-wrapper input.btn-default {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
}

.nx-resource-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
}

[data-bs-theme="dark"] .nx-resource-box,
.dark .nx-resource-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.nx-resource-progress {
    height: 8px;
    border-radius: 9999px;
    background: #e2e8f0;
    overflow: hidden;
    margin-top: 10px;
}

[data-bs-theme="dark"] .nx-resource-progress,
.dark .nx-resource-progress {
    background: rgba(255, 255, 255, 0.1);
}

.nx-resource-bar {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #6366f1 0%, #06b6d4 100%);
    transition: width 0.4s ease;
}

.nx-spec-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nx-spec-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
}

[data-bs-theme="dark"] .nx-spec-item,
.dark .nx-spec-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.nx-spec-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

[data-bs-theme="dark"] .nx-spec-label,
.dark .nx-spec-label {
    color: #94a3b8;
}

.nx-spec-value {
    font-family: var(--whmcs-font-mono, monospace);
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

[data-bs-theme="dark"] .nx-spec-value,
.dark .nx-spec-value {
    color: #f8fafc;
}


/* DataTables dark mode wrapper fix */
[data-bs-theme="dark"] .table-container,
.dark .table-container,
[data-bs-theme="dark"] .dataTables_wrapper,
.dark .dataTables_wrapper,
[data-bs-theme="dark"] .dataTables_wrapper .row,
.dark .dataTables_wrapper .row {
    background: transparent !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .dataTables_info,
.dark .dataTables_info,
[data-bs-theme="dark"] .dataTables_length,
.dark .dataTables_length {
    color: #94a3b8 !important;
}


/* ========================================================================
   VIEW TICKET & TICKET SIDEBAR ULTRA-MODERNIZATION
   ======================================================================== */

/* Sidebar: Ticket Information Panel */
.card-sidebar[menuItemName="Ticket Information"] {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"],
.dark .card-sidebar[menuItemName="Ticket Information"] {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================================
   Ticket Information Sidebar (Modern Vertical Micro-Cards)
   ======================================================== */
.card-sidebar[menuItemName="Ticket Information"] {
    border-radius: 18px !important;
    border: 1.5px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"],
.dark .card-sidebar[menuItemName="Ticket Information"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #0f172a !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3) !important;
}

.card-sidebar[menuItemName="Ticket Information"] .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 20px !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .card-header,
.dark .card-sidebar[menuItemName="Ticket Information"] .card-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.card-sidebar[menuItemName="Ticket Information"] .card-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .card-title,
.dark .card-sidebar[menuItemName="Ticket Information"] .card-title {
    color: #f8fafc !important;
}

.card-sidebar[menuItemName="Ticket Information"] .list-group-item.nx-ticket-meta-box,
.card-sidebar[menuItemName="Ticket Information"] .ticket-details-children {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 13px 20px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: default !important;
    transition: background 0.15s ease !important;
}

.card-sidebar[menuItemName="Ticket Information"] .list-group-item.nx-ticket-meta-box:last-child,
.card-sidebar[menuItemName="Ticket Information"] .ticket-details-children:last-child {
    border-bottom: none !important;
}

.card-sidebar[menuItemName="Ticket Information"] .list-group-item.nx-ticket-meta-box:hover,
.card-sidebar[menuItemName="Ticket Information"] .ticket-details-children:hover {
    background: #f8fafc !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .list-group-item.nx-ticket-meta-box,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .ticket-details-children,
.dark .card-sidebar[menuItemName="Ticket Information"] .list-group-item.nx-ticket-meta-box,
.dark .card-sidebar[menuItemName="Ticket Information"] .ticket-details-children {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .list-group-item.nx-ticket-meta-box:hover,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .ticket-details-children:hover,
.dark .card-sidebar[menuItemName="Ticket Information"] .list-group-item.nx-ticket-meta-box:hover,
.dark .card-sidebar[menuItemName="Ticket Information"] .ticket-details-children:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

.nx-ticket-meta-label {
    display: flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}

[data-bs-theme="dark"] .nx-ticket-meta-label,
.dark .nx-ticket-meta-label {
    color: #94a3b8 !important;
}

.nx-ticket-meta-value {
    width: 100% !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.5 !important;
    word-break: normal !important;
}

[data-bs-theme="dark"] .nx-ticket-meta-value,
.dark .nx-ticket-meta-value {
    color: #f1f5f9 !important;
}

.nx-ticket-meta-value .ticket-requestor-name {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 14px !important;
}

[data-bs-theme="dark"] .nx-ticket-meta-value .ticket-requestor-name,
.dark .nx-ticket-meta-value .ticket-requestor-name {
    color: #ffffff !important;
}

/* Owner badge */
.nx-ticket-meta-value .requestor-type-owner {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    margin-left: 6px !important;
}

/* Status / Priority pills in ticket info */
.nx-ticket-meta-value .label,
.ticket-details-children .status,
.ticket-details-children .label {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3.5px 12px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    background: rgba(16, 185, 129, 0.14) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    box-shadow: none !important;
    margin: 0 !important;
}

[data-bs-theme="dark"] .nx-ticket-meta-value .label,
[data-bs-theme="dark"] .ticket-details-children .label,
.dark .nx-ticket-meta-value .label,
.dark .ticket-details-children .label {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.nx-priority-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3.5px 11px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    margin: 0 !important;
}

[data-bs-theme="dark"] .nx-priority-badge,
.dark .nx-priority-badge {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}

.nx-priority-badge.nx-priority-high {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.nx-priority-badge.nx-priority-low {
    background: rgba(100, 116, 139, 0.1) !important;
    color: #475569 !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
}

/* Fix Ticket Sidebar Buttons */
.card-sidebar[menuItemName="Ticket Information"] .card-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .card-footer,
.dark .card-sidebar[menuItemName="Ticket Information"] .card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.card-sidebar[menuItemName="Ticket Information"] .card-footer .btn {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    margin: 0 !important;
    height: 42px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}

.card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-1px);
}

.card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-danger {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.25) !important;
    color: #dc2626 !important;
    box-shadow: none !important;
}

.card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-danger,
.dark .card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-danger:hover,
.dark .card-sidebar[menuItemName="Ticket Information"] .card-footer .btn-danger:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* ========================================================
   Recent Tickets Sidebar Panel (Modern Card List)
   ======================================================== */
.card-sidebar[menuItemName="Recent Tickets"] {
    border-radius: 18px !important;
    border: 1.5px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"],
.dark .card-sidebar[menuItemName="Recent Tickets"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #0f172a !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3) !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 20px !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .card-header,
.dark .card-sidebar[menuItemName="Recent Tickets"] .card-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .card-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .card-title,
.dark .card-sidebar[menuItemName="Recent Tickets"] .card-title {
    color: #f8fafc !important;
}

.card-sidebar[menuItemName="Recent Tickets"] a.list-group-item {
    display: block !important;
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.card-sidebar[menuItemName="Recent Tickets"] a.list-group-item:last-child {
    border-bottom: none !important;
}

.card-sidebar[menuItemName="Recent Tickets"] a.list-group-item:hover {
    background: #f8fafc !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] a.list-group-item,
.dark .card-sidebar[menuItemName="Recent Tickets"] a.list-group-item {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] a.list-group-item:hover,
.dark .card-sidebar[menuItemName="Recent Tickets"] a.list-group-item:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .recent-ticket,
.card-sidebar[menuItemName="Recent Tickets"] .nx-recent-ticket-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .recent-ticket .truncate,
.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-subject {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .recent-ticket .truncate,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-subject,
.dark .card-sidebar[menuItemName="Recent Tickets"] .recent-ticket .truncate,
.dark .card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-subject {
    color: #f8fafc !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-tid {
    display: inline-flex !important;
    align-items: center !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    margin-right: 6px !important;
    letter-spacing: 0.2px !important;
    vertical-align: middle !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-tid,
.dark .card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-tid {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.card-sidebar[menuItemName="Recent Tickets"] small,
.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    gap: 8px !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-tid,
.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-status,
.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-time,
.card-sidebar[menuItemName="Recent Tickets"] .list-group-item .badge,
.card-sidebar[menuItemName="Recent Tickets"] .list-group-item span {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
}

.card-sidebar[menuItemName="Recent Tickets"] small .pull-right,
.card-sidebar[menuItemName="Recent Tickets"] small .float-right,
.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-time {
    float: none !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    order: 2 !important;
    margin-left: auto !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] small .pull-right,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] small .float-right,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-time,
.dark .card-sidebar[menuItemName="Recent Tickets"] small .pull-right,
.dark .card-sidebar[menuItemName="Recent Tickets"] small .float-right,
.dark .card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-time {
    color: #94a3b8 !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .nx-ticket-status,
.card-sidebar[menuItemName="Recent Tickets"] small span:not(.pull-right):not(.float-right):not(.nx-ticket-time) {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 2.5px 9px !important;
    border-radius: 9999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.35px !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .nx-status-Open,
.card-sidebar[menuItemName="Recent Tickets"] small span:not(.pull-right):not(.float-right):not(.nx-ticket-time):not(.nx-status-Answered):not(.nx-status-Customer-Reply):not(.nx-status-Closed) {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .nx-status-Answered,
.card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Answered {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
    border: 1px solid rgba(59, 130, 246, 0.28) !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .nx-status-Customer-Reply,
.card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Customer-Reply {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
}

.card-sidebar[menuItemName="Recent Tickets"] .nx-status-Closed,
.card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Closed {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #64748b !important;
    border: 1px solid rgba(100, 116, 139, 0.28) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Open,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] small span:not(.pull-right):not(.float-right):not(.nx-ticket-time):not(.nx-status-Answered):not(.nx-status-Customer-Reply):not(.nx-status-Closed),
.dark .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Open,
.dark .card-sidebar[menuItemName="Recent Tickets"] small span:not(.pull-right):not(.float-right):not(.nx-ticket-time):not(.nx-status-Answered):not(.nx-status-Customer-Reply):not(.nx-status-Closed) {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Answered,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Answered,
.dark .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Answered,
.dark .card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Answered {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Customer-Reply,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Customer-Reply,
.dark .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Customer-Reply,
.dark .card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Customer-Reply {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Closed,
[data-bs-theme="dark"] .card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Closed,
.dark .card-sidebar[menuItemName="Recent Tickets"] .nx-status-Closed,
.dark .card-sidebar[menuItemName="Recent Tickets"] small span.nx-status-Closed {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(100, 116, 139, 0.35) !important;
}

/* ========================================================
   CC Recipients Sidebar Panel
   ======================================================== */
#sidebarTicketCc {
    border-radius: 18px !important;
    border: 1.5px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

[data-bs-theme="dark"] #sidebarTicketCc,
.dark #sidebarTicketCc {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #0f172a !important;
}

#sidebarTicketCc .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 20px !important;
}

[data-bs-theme="dark"] #sidebarTicketCc .card-header,
.dark #sidebarTicketCc .card-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

#sidebarTicketCc .card-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

[data-bs-theme="dark"] #sidebarTicketCc .card-title,
.dark #sidebarTicketCc .card-title {
    color: #f8fafc !important;
}

/* Suppress empty clone row and hidden elements completely */
#sidebarTicketCc #ccCloneRow,
#sidebarTicketCc .hidden,
#sidebarTicketCc .w-hidden,
.card-sidebar .hidden,
.card-sidebar .w-hidden {
    display: none !important;
}

#sidebarTicketCc .collapsable-card-body:empty,
#sidebarTicketCc .list-group:empty {
    display: none !important;
}

#sidebarTicketCc .card-footer {
    padding: 14px 16px !important;
    background: transparent !important;
    border-top: none !important;
}

#sidebarTicketCc #frmAddCcEmail {
    margin: 0 !important;
}

#sidebarTicketCc #containerAddCcEmail {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
}

#sidebarTicketCc input#inputAddCcEmail,
#sidebarTicketCc input.form-control {
    border-radius: 10px 0 0 10px !important;
    height: 40px !important;
    font-size: 11.5px !important;
    padding: 6px 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-right: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#sidebarTicketCc input#inputAddCcEmail::placeholder {
    font-size: 11px !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] #sidebarTicketCc input#inputAddCcEmail,
[data-bs-theme="dark"] #sidebarTicketCc input.form-control,
.dark #sidebarTicketCc input#inputAddCcEmail,
.dark #sidebarTicketCc input.form-control {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

#sidebarTicketCc .input-group-append .btn,
#sidebarTicketCc #btnAddCcEmail,
#sidebarTicketCc .btn-add-ticket-cc {
    border-radius: 0 10px 10px 0 !important;
    height: 40px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 0 14px !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

#sidebarTicketCc .input-group-append .btn:hover,
#sidebarTicketCc #btnAddCcEmail:hover,
#sidebarTicketCc .btn-add-ticket-cc:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

#sidebarTicketCc .ticket-cc-email {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] #sidebarTicketCc .ticket-cc-email,
.dark #sidebarTicketCc .ticket-cc-email {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Ticket Hero Card */
.nx-ticket-hero-card {
    border-radius: 20px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

.nx-ticket-hero-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #6366f1 0%, #06b6d4 50%, #10b981 100%) !important;
}

[data-bs-theme="dark"] .nx-ticket-hero-card,
.dark .nx-ticket-hero-card {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.nx-ticket-title {
    color: #0f172a !important;
}

[data-bs-theme="dark"] .nx-ticket-title,
.dark .nx-ticket-title {
    color: #f8fafc !important;
}

/* Message Stream Avatars & Badges */
.nx-msg-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
}

.nx-msg-avatar.staff-avatar {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.nx-msg-avatar.client-avatar {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.nx-badge-client-role,
.nx-ticket-message-card .nx-badge-owner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
}

[data-bs-theme="dark"] .nx-badge-client-role,
[data-bs-theme="dark"] .nx-ticket-message-card .nx-badge-owner,
.dark .nx-badge-client-role,
.dark .nx-ticket-message-card .nx-badge-owner {
    color: #fbbf24;
}

/* Reply Author Strip */
.nx-reply-author-strip {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 14px;
}

[data-bs-theme="dark"] .nx-reply-author-strip,
.dark .nx-reply-author-strip {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}

.nx-reply-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}

.nx-reply-author-name {
    color: #0f172a;
    font-size: 14.5px;
}

[data-bs-theme="dark"] .nx-reply-author-name,
.dark .nx-reply-author-name {
    color: #f8fafc;
}

/* Attachments in Stream */
.nx-attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.nx-attachment-pill:hover {
    background: #e2e8f0;
    color: #6366f1;
    border-color: #cbd5e1;
}

[data-bs-theme="dark"] .nx-attachment-pill,
.dark .nx-attachment-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

[data-bs-theme="dark"] .nx-attachment-pill:hover,
.dark .nx-attachment-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #818cf8;
}


/* Dark mode file input & CC button refinement */
[data-bs-theme="dark"] .custom-file-label,
.dark .custom-file-label {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .custom-file-label::after,
.dark .custom-file-label::after {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    border-left-color: rgba(255, 255, 255, 0.12) !important;
}

#sidebarTicketCc .btn,
#sidebarTicketCc .btn-add-ticket-cc {
    background: #6366f1 !important;
    color: #ffffff !important;
    border: 1px solid #6366f1 !important;
}

#sidebarTicketCc .btn:hover,
#sidebarTicketCc .btn-add-ticket-cc:hover {
    background: #4f46e5 !important;
}


/* ==========================================================================
   Bulk Domain Management Modern Styling (Light & Dark Theme)
   ========================================================================== */

.nx-domain-card {
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
    overflow: hidden;
    transition: all 0.25s ease;
}

[data-bs-theme="dark"] .nx-domain-card,
.dark .nx-domain-card {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3) !important;
}

.nx-domain-badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.nx-icon-indigo {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.nx-icon-emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.nx-icon-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.nx-icon-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

[data-bs-theme="dark"] .nx-icon-indigo,
.dark .nx-icon-indigo {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

[data-bs-theme="dark"] .nx-icon-emerald,
.dark .nx-icon-emerald {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-bs-theme="dark"] .nx-icon-amber,
.dark .nx-icon-amber {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-bs-theme="dark"] .nx-icon-blue,
.dark .nx-icon-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Affected Domains Bar */
.nx-affected-domains-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 20px;
}

[data-bs-theme="dark"] .nx-affected-domains-card,
.dark .nx-affected-domains-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-affected-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 8px;
}

[data-bs-theme="dark"] .nx-affected-label,
.dark .nx-affected-label {
    color: #94a3b8;
}

.nx-domain-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nx-domain-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

[data-bs-theme="dark"] .nx-domain-pill,
.dark .nx-domain-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

/* Modern Dual Choice Cards */
.nx-field-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    display: block;
}

[data-bs-theme="dark"] .nx-field-label,
.dark .nx-field-label {
    color: #cbd5e1;
}

.nx-choice-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 0;
    position: relative;
    user-select: none;
    height: 100%;
}

.nx-choice-card:hover {
    border-color: #cbd5e1;
    background: #fafafa;
    transform: translateY(-1px);
}

.nx-choice-card.active,
.nx-choice-card:has(input:checked) {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.03) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

[data-bs-theme="dark"] .nx-choice-card,
.dark .nx-choice-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .nx-choice-card:hover,
.dark .nx-choice-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .nx-choice-card.active,
[data-bs-theme="dark"] .nx-choice-card:has(input:checked),
.dark .nx-choice-card.active,
.dark .nx-choice-card:has(input:checked) {
    border-color: #818cf8 !important;
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

.nx-choice-radio-wrap {
    position: relative;
    padding-top: 3px;
}

.nx-choice-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.nx-radio-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.nx-choice-card:hover .nx-radio-indicator {
    border-color: #94a3b8;
}

.nx-choice-card.active .nx-radio-indicator,
.nx-choice-card:has(input:checked) .nx-radio-indicator {
    border-color: #6366f1;
    background: #6366f1;
}

.nx-choice-card.active .nx-radio-indicator::after,
.nx-choice-card:has(input:checked) .nx-radio-indicator::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
}

[data-bs-theme="dark"] .nx-radio-indicator,
.dark .nx-radio-indicator {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .nx-choice-card.active .nx-radio-indicator,
[data-bs-theme="dark"] .nx-choice-card:has(input:checked) .nx-radio-indicator,
.dark .nx-choice-card.active .nx-radio-indicator,
.dark .nx-choice-card:has(input:checked) .nx-radio-indicator {
    border-color: #818cf8;
    background: #818cf8;
}

.nx-choice-content {
    flex: 1;
}

.nx-choice-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 8px;
}

.nx-choice-icon-default {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.nx-choice-icon-custom {
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
}

[data-bs-theme="dark"] .nx-choice-icon-default,
.dark .nx-choice-icon-default {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

[data-bs-theme="dark"] .nx-choice-icon-custom,
.dark .nx-choice-icon-custom {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}

.nx-choice-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

[data-bs-theme="dark"] .nx-choice-title,
.dark .nx-choice-title {
    color: #f8fafc;
}

.nx-choice-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

[data-bs-theme="dark"] .nx-choice-desc,
.dark .nx-choice-desc {
    color: #94a3b8;
}

/* Nameserver Inputs */
.nx-ns-item .input-group-text.nx-ns-badge {
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1.5px solid #e2e8f0;
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 0 14px;
}

[data-bs-theme="dark"] .nx-ns-item .input-group-text.nx-ns-badge,
.dark .nx-ns-item .input-group-text.nx-ns-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.nx-ns-item .form-control.nx-ns-input {
    border-radius: 0 12px 12px 0 !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    font-size: 14px !important;
    height: 46px !important;
    color: #0f172a !important;
    transition: all 0.2s ease;
}

.nx-ns-item .form-control.nx-ns-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

[data-bs-theme="dark"] .nx-ns-item .form-control.nx-ns-input,
.dark .nx-ns-item .form-control.nx-ns-input {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-ns-item .form-control.nx-ns-input:focus,
.dark .nx-ns-item .form-control.nx-ns-input:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

.nx-ns-item .form-control.nx-ns-input:disabled,
.nx-ns-item .form-control.nx-ns-input[disabled] {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
    opacity: 0.75;
}

[data-bs-theme="dark"] .nx-ns-item .form-control.nx-ns-input:disabled,
[data-bs-theme="dark"] .nx-ns-item .form-control.nx-ns-input[disabled],
.dark .nx-ns-item .form-control.nx-ns-input:disabled,
.dark .nx-ns-item .form-control.nx-ns-input[disabled] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #64748b !important;
}

/* Notice Banners (Autorenew, Reglock) */
.nx-domain-notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
}

[data-bs-theme="dark"] .nx-domain-notice-banner,
.dark .nx-domain-notice-banner {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-notice-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.nx-notice-icon.text-emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.nx-notice-icon.text-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.nx-notice-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

[data-bs-theme="dark"] .nx-notice-title,
.dark .nx-notice-title {
    color: #f8fafc;
}

.nx-notice-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

[data-bs-theme="dark"] .nx-notice-desc,
.dark .nx-notice-desc {
    color: #94a3b8;
}

/* Status Action Buttons */
.nx-btn-status-toggle {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.nx-btn-status-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.nx-btn-toggle-enable {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

.nx-btn-toggle-disable {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}

/* Back Button & CTA Button */
.nx-back-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.nx-back-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .nx-back-btn,
.dark .nx-back-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-back-btn:hover,
.dark .nx-back-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.nx-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
    transition: all 0.2s ease;
}

.nx-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
    color: #ffffff !important;
}

/* Nav tabs in domain management */
.nx-domain-tabs .nav-link {
    border-radius: 10px !important;
    font-weight: 600;
    color: #64748b;
    padding: 10px 18px;
    transition: all 0.2s ease;
}

.nx-domain-tabs .nav-link.active {
    background: #6366f1 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-domain-tabs .nav-link {
    color: #94a3b8;
}

[data-bs-theme="dark"] .nx-domain-tabs .nav-link.active {
    background: #6366f1 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Dark Theme Contrast & Typography Refinements
   ========================================================================== */

[data-bs-theme="dark"] .text-slate-900,
.dark .text-slate-900,
[data-bs-theme="dark"] .nx-domain-card .text-slate-900,
.dark .nx-domain-card .text-slate-900,
[data-bs-theme="dark"] .nx-domain-card h3,
.dark .nx-domain-card h3,
[data-bs-theme="dark"] .nx-domain-card h4,
.dark .nx-domain-card h4 {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-domain-card label,
.dark .nx-domain-card label,
[data-bs-theme="dark"] .nx-ns-item label,
.dark .nx-ns-item label,
[data-bs-theme="dark"] .nx-ns-label,
.dark .nx-ns-label {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-domain-card .border-slate-100,
.dark .nx-domain-card .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-domain-notice-banner,
.dark .nx-domain-notice-banner {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-tips-list strong,
[data-bs-theme="dark"] .nx-tips-list .text-slate-900,
.dark .nx-tips-list strong,
.dark .nx-tips-list .text-slate-900 {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-tips-list .text-muted,
.dark .nx-tips-list .text-muted {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-affected-domains-card span,
.dark .nx-affected-domains-card span {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-btn-toggle-disable,
.dark .nx-btn-toggle-disable {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-bs-theme="dark"] .nx-btn-toggle-disable:hover,
.dark .nx-btn-toggle-disable:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   My Domains Table Dark Theme Polish & Row Selection/Hover Fix
   ========================================================================== */

/* 1. Prevent jarring white row background on hover or selection in dark mode */
[data-bs-theme="dark"] .dataTables_wrapper table.nx-services-table tbody tr:hover > td,
[data-bs-theme="dark"] .dataTables_wrapper table.nx-services-table tbody tr:hover > *,
[data-bs-theme="dark"] table.dataTable.nx-services-table tbody tr:hover > td,
[data-bs-theme="dark"] table.dataTable.nx-services-table tbody tr:hover > *,
[data-bs-theme="dark"] table.table-list.nx-services-table tbody tr:hover > td,
[data-bs-theme="dark"] .nx-services-table tbody tr:hover > td,
[data-bs-theme="dark"] .nx-services-table tbody tr:hover,
[data-bs-theme="dark"] .dataTables_wrapper table.nx-domains-table tbody tr:hover > td,
[data-bs-theme="dark"] .dataTables_wrapper table.nx-domains-table tbody tr:hover > *,
[data-bs-theme="dark"] table.dataTable.nx-domains-table tbody tr:hover > td,
[data-bs-theme="dark"] table.dataTable.nx-domains-table tbody tr:hover > *,
[data-bs-theme="dark"] table.table-list.nx-domains-table tbody tr:hover > td,
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover > td,
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover,
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected > td,
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected,
[data-bs-theme="dark"] table.dataTable > tbody > tr.selected > *,
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr.odd.selected > *,
[data-bs-theme="dark"] table.dataTable.table-hover > tbody > tr.selected:hover > *,
.dark .dataTables_wrapper table.nx-services-table tbody tr:hover > td,
.dark .dataTables_wrapper table.nx-services-table tbody tr:hover > *,
.dark table.dataTable.nx-services-table tbody tr:hover > td,
.dark table.dataTable.nx-services-table tbody tr:hover > *,
.dark table.table-list.nx-services-table tbody tr:hover > td,
.dark .nx-services-table tbody tr:hover > td,
.dark .nx-services-table tbody tr:hover,
.dark .dataTables_wrapper table.nx-domains-table tbody tr:hover > td,
.dark .dataTables_wrapper table.nx-domains-table tbody tr:hover > *,
.dark table.dataTable.nx-domains-table tbody tr:hover > td,
.dark table.dataTable.nx-domains-table tbody tr:hover > *,
.dark table.table-list.nx-domains-table tbody tr:hover > td,
.dark .nx-domains-table tbody tr:hover > td,
.dark .nx-domains-table tbody tr:hover,
.dark .nx-domains-table tbody tr.selected > td,
.dark .nx-domains-table tbody tr.selected,
.dark table.dataTable > tbody > tr.selected > *,
.dark table.dataTable.table-striped > tbody > tr.odd.selected > *,
.dark table.dataTable.table-hover > tbody > tr.selected:hover > * {
    background-color: #1e293b !important;
    background: #1e293b !important;
    box-shadow: none !important;
}

/* 2. Text contrast inside domain rows */
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-table-domain-title,
.dark .nx-domains-table tbody tr:hover .nx-table-domain-title,
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected .nx-table-domain-title,
.dark .nx-domains-table tbody tr.selected .nx-table-domain-title {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-date-badge,
.dark .nx-date-badge,
[data-bs-theme="dark"] .nx-table-date-cell,
.dark .nx-table-date-cell,
[data-bs-theme="dark"] .nx-td-regdate,
.dark .nx-td-regdate,
[data-bs-theme="dark"] .nx-td-duedate,
.dark .nx-td-duedate {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-date-badge i,
.dark .nx-date-badge i {
    color: #818cf8 !important;
    opacity: 0.9 !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-date-badge,
.dark .nx-domains-table tbody tr:hover .nx-date-badge {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-date-badge.is-expiring-soon,
.dark .nx-date-badge.is-expiring-soon {
    color: #fde68a !important;
}

/* 3. SSL tile pill in dark mode */
[data-bs-theme="dark"] .nx-ssl-tile,
.dark .nx-ssl-tile {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .nx-services-table tbody tr:hover .nx-ssl-tile,
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-ssl-tile,
.dark .nx-services-table tbody tr:hover .nx-ssl-tile,
.dark .nx-domains-table tbody tr:hover .nx-ssl-tile {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* 4. Auto-Renew tags */
[data-bs-theme="dark"] .nx-autorenew-pill.is-active,
.dark .nx-autorenew-pill.is-active {
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

[data-bs-theme="dark"] .nx-autorenew-pill.is-inactive,
.dark .nx-autorenew-pill.is-inactive {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* 5. Custom Checkbox styling */
.nx-custom-checkbox {
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    accent-color: #6366f1 !important;
    vertical-align: middle !important;
}

/* 6. DataTables search filter with search icon */
.dataTables_wrapper .dataTables_filter {
    position: relative !important;
    margin-bottom: 14px !important;
}

/* Removed broken icon pseudo-element */

.dataTables_wrapper .dataTables_filter input {
    height: 40px !important;
    padding: 8px 16px 8px 36px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease !important;
    min-width: 200px !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_filter input {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder,
.dark .dataTables_wrapper .dataTables_filter input::placeholder {
    color: #64748b !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
.dark .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #6366f1 !important;
    background: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* 7. Manage Action Button in table */
[data-bs-theme="dark"] .nx-btn-table-manage,
.dark .nx-btn-table-manage {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

[data-bs-theme="dark"] .nx-services-table tbody tr:hover .nx-btn-table-manage,
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-btn-table-manage,
[data-bs-theme="dark"] .nx-btn-table-manage:hover,
.dark .nx-services-table tbody tr:hover .nx-btn-table-manage,
.dark .nx-domains-table tbody tr:hover .nx-btn-table-manage,
.dark .nx-btn-table-manage:hover {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

[data-bs-theme="dark"] .nx-services-table tbody tr:hover .nx-btn-table-manage i,
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-btn-table-manage i,
[data-bs-theme="dark"] .nx-btn-table-manage:hover i,
.dark .nx-services-table tbody tr:hover .nx-btn-table-manage i,
.dark .nx-domains-table tbody tr:hover .nx-btn-table-manage i,
.dark .nx-btn-table-manage:hover i {
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

/* 8. DataTables info & length entries */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_length {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
.dark .dataTables_wrapper .dataTables_length select {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
}

/* ==========================================================================
   Domains Table Ultra-Clean Polish: No Extra Borders, SVG Search, Rich Hover
   ========================================================================== */

/* 1. Eliminate harsh extra borders & streamline table structure */
.nx-domains-main-card {
    border-radius: 18px !important;
    overflow: hidden !important;
}

.nx-domains-table,
#tableDomainsList {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.nx-domains-table thead th,
#tableDomainsList thead th {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 14px 18px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

[data-bs-theme="dark"] .nx-domains-table thead th,
.dark .nx-domains-table thead th,
[data-bs-theme="dark"] #tableDomainsList thead th,
.dark #tableDomainsList thead th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Row borders - soft & elegant, zero boxiness */
.nx-domains-table tbody td,
#tableDomainsList tbody td {
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f8fafc !important;
    transition: all 0.2s ease !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody td,
.dark .nx-domains-table tbody td,
[data-bs-theme="dark"] #tableDomainsList tbody td,
.dark #tableDomainsList tbody td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.nx-domains-table tbody tr:last-child td,
#tableDomainsList tbody tr:last-child td {
    border-bottom: none !important;
}

/* Remove clunky square box around SSL lock icon */
.nx-ssl-tile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nx-ssl-tile img {
    max-width: 20px !important;
    height: auto !important;
}

[data-bs-theme="dark"] .nx-ssl-tile,
.dark .nx-ssl-tile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove harsh line above pagination */
.nx-domains-main-card .dataTables_wrapper .dataTables_length,
.nx-domains-main-card .dataTables_wrapper .dataTables_paginate,
#tableDomainsList_wrapper .dataTables_length,
#tableDomainsList_wrapper .dataTables_paginate {
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 22px !important;
}

[data-bs-theme="dark"] .nx-domains-main-card .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .nx-domains-main-card .dataTables_wrapper .dataTables_paginate,
[data-bs-theme="dark"] #tableDomainsList_wrapper .dataTables_length,
[data-bs-theme="dark"] #tableDomainsList_wrapper .dataTables_paginate,
.dark .nx-domains-main-card .dataTables_wrapper .dataTables_length,
.dark .nx-domains-main-card .dataTables_wrapper .dataTables_paginate,
.dark #tableDomainsList_wrapper .dataTables_length,
.dark #tableDomainsList_wrapper .dataTables_paginate {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* 2. Search Input: Native Vector SVG Icon (No missing square glyphs) */
.dataTables_wrapper .dataTables_filter {
    position: relative !important;
    margin: 0 !important;
    padding: 12px 24px !important;
}

.dataTables_wrapper .dataTables_filter::before,
.dataTables_wrapper .dataTables_filter::after,
.dataTables_wrapper .dataTables_filter label::before,
.dataTables_wrapper .dataTables_filter label::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

.dataTables_wrapper .dataTables_filter label {
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_filter input {
    height: 38px !important;
    padding: 8px 16px 8px 36px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 11px center !important;
    background-size: 15px 15px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
    min-width: 220px !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_filter input {
    background-color: #1e293b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23818cf8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E") !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
.dark .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #6366f1 !important;
    background-color: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* 3. Rich, Responsive, Unmistakable Row Hover */
.nx-domains-table tbody tr,
#tableDomainsList tbody tr {
    cursor: pointer !important;
    background: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr,
.dark .nx-domains-table tbody tr,
[data-bs-theme="dark"] #tableDomainsList tbody tr,
.dark #tableDomainsList tbody tr {
    background: #0f172a !important;
}

/* Selected Row in Light Mode */
.nx-domains-table tbody tr.selected,
.nx-domains-table tbody tr.selected > td,
.nx-domains-table tbody tr:has(input:checked),
.nx-domains-table tbody tr:has(input:checked) > td,
#tableDomainsList tbody tr.selected,
#tableDomainsList tbody tr.selected > td,
#tableDomainsList tbody tr:has(input:checked),
#tableDomainsList tbody tr:has(input:checked) > td {
    background-color: #f0f4ff !important;
    background: #f0f4ff !important;
}

.nx-domains-table tbody tr.selected td:first-child,
.nx-domains-table tbody tr:has(input:checked) td:first-child,
#tableDomainsList tbody tr.selected td:first-child,
#tableDomainsList tbody tr:has(input:checked) td:first-child {
    box-shadow: inset 3px 0 0 #4f46e5 !important;
}

/* Selected Row in Dark Mode - Overrides jarring white background */
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected,
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected > td,
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected > *,
[data-bs-theme="dark"] .nx-domains-table tbody tr:has(input:checked),
[data-bs-theme="dark"] .nx-domains-table tbody tr:has(input:checked) > td,
[data-bs-theme="dark"] .nx-domains-table tbody tr:has(input:checked) > *,
[data-bs-theme="dark"] #tableDomainsList tbody tr.selected,
[data-bs-theme="dark"] #tableDomainsList tbody tr.selected > td,
[data-bs-theme="dark"] #tableDomainsList tbody tr.selected > *,
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked),
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked) > td,
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked) > *,
.dark .nx-domains-table tbody tr.selected,
.dark .nx-domains-table tbody tr.selected > td,
.dark .nx-domains-table tbody tr.selected > *,
.dark .nx-domains-table tbody tr:has(input:checked),
.dark .nx-domains-table tbody tr:has(input:checked) > td,
.dark .nx-domains-table tbody tr:has(input:checked) > *,
.dark #tableDomainsList tbody tr.selected,
.dark #tableDomainsList tbody tr.selected > td,
.dark #tableDomainsList tbody tr.selected > *,
.dark #tableDomainsList tbody tr:has(input:checked),
.dark #tableDomainsList tbody tr:has(input:checked) > td,
.dark #tableDomainsList tbody tr:has(input:checked) > * {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr.selected td:first-child,
[data-bs-theme="dark"] .nx-domains-table tbody tr:has(input:checked) td:first-child,
[data-bs-theme="dark"] #tableDomainsList tbody tr.selected td:first-child,
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked) td:first-child,
.dark .nx-domains-table tbody tr.selected td:first-child,
.dark .nx-domains-table tbody tr:has(input:checked) td:first-child,
.dark #tableDomainsList tbody tr.selected td:first-child,
.dark #tableDomainsList tbody tr:has(input:checked) td:first-child {
    box-shadow: inset 3px 0 0 #818cf8 !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr.selected .nx-table-domain-title,
[data-bs-theme="dark"] .nx-domains-table tbody tr:has(input:checked) .nx-table-domain-title,
[data-bs-theme="dark"] #tableDomainsList tbody tr.selected .nx-table-domain-title,
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked) .nx-table-domain-title,
.dark .nx-domains-table tbody tr.selected .nx-table-domain-title,
.dark .nx-domains-table tbody tr:has(input:checked) .nx-table-domain-title,
.dark #tableDomainsList tbody tr.selected .nx-table-domain-title,
.dark #tableDomainsList tbody tr:has(input:checked) .nx-table-domain-title {
    color: #ffffff !important;
}

/* Light Theme Hover */
.nx-domains-table tbody tr:hover,
.nx-domains-table tbody tr:hover > td,
#tableDomainsList tbody tr:hover,
#tableDomainsList tbody tr:hover > td {
    background-color: #f8fafc !important;
}

.nx-domains-table tbody tr:hover td:first-child,
#tableDomainsList tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #6366f1 !important;
}

.nx-domains-table tbody tr:hover .nx-table-domain-title,
#tableDomainsList tbody tr:hover .nx-table-domain-title {
    color: #4f46e5 !important;
    transform: translateX(2px);
}

/* Dark Theme Hover - Distinct contrast against #0f172a */
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover,
[data-bs-theme="dark"] .nx-domains-table tbody tr:hover > td,
[data-bs-theme="dark"] #tableDomainsList tbody tr:hover,
[data-bs-theme="dark"] #tableDomainsList tbody tr:hover > td,
.dark .nx-domains-table tbody tr:hover,
.dark .nx-domains-table tbody tr:hover > td,
.dark #tableDomainsList tbody tr:hover,
.dark #tableDomainsList tbody tr:hover > td {
    background-color: #1e293b !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr:hover td:first-child,
[data-bs-theme="dark"] #tableDomainsList tbody tr:hover td:first-child,
.dark .nx-domains-table tbody tr:hover td:first-child,
.dark #tableDomainsList tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #818cf8 !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-table-domain-title,
[data-bs-theme="dark"] #tableDomainsList tbody tr:hover .nx-table-domain-title,
.dark .nx-domains-table tbody tr:hover .nx-table-domain-title,
.dark #tableDomainsList tbody tr:hover .nx-table-domain-title {
    color: #ffffff !important;
    transform: translateX(2px);
}

[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-date-badge,
[data-bs-theme="dark"] #tableDomainsList tbody tr:hover .nx-date-badge,
.dark .nx-domains-table tbody tr:hover .nx-date-badge,
.dark #tableDomainsList tbody tr:hover .nx-date-badge {
    color: #ffffff !important;
}

/* 4. Streamlined Manage Button - Borderless ghost pill with instant hover lighting */
.nx-btn-table-manage {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-btn-table-manage i {
    font-size: 10px !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
}

[data-bs-theme="dark"] .nx-btn-table-manage,
.dark .nx-btn-table-manage {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    color: #cbd5e1 !important;
}

/* Row Hover lights up the button */
.nx-domains-table tbody tr:hover .nx-btn-table-manage,
#tableDomainsList tbody tr:hover .nx-btn-table-manage,
.nx-btn-table-manage:hover {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
    transform: translateX(2px) !important;
}

.nx-domains-table tbody tr:hover .nx-btn-table-manage i,
#tableDomainsList tbody tr:hover .nx-btn-table-manage i,
.nx-btn-table-manage:hover i {
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

[data-bs-theme="dark"] .nx-domains-table tbody tr:hover .nx-btn-table-manage,
[data-bs-theme="dark"] #tableDomainsList tbody tr:hover .nx-btn-table-manage,
[data-bs-theme="dark"] .nx-btn-table-manage:hover,
.dark .nx-domains-table tbody tr:hover .nx-btn-table-manage,
.dark #tableDomainsList tbody tr:hover .nx-btn-table-manage,
.dark .nx-btn-table-manage:hover {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
    transform: translateX(2px) !important;
}

/* Domain Title smooth transitions */
.nx-table-domain-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

[data-bs-theme="dark"] .nx-table-domain-title,
.dark .nx-table-domain-title {
    color: #f8fafc !important;
}

/* Search Filter Icon Repeat Fix */
.dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_filter input {
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 15px 15px !important;
    padding-left: 36px !important;
}

/* ==========================================================================
   DOMAIN MANAGEMENT SUITE REDESIGN (DNS, REGISTER NS, EPP, EMAIL FWD)
   ========================================================================== */

.nx-domain-dns-container,
.nx-registerns-container,
.nx-domain-emailfwd-container,
.nx-getepp-container {
    animation: fadeIn 0.25s ease-in-out;
}

/* DNS & Forwarding Tables */
.nx-dns-card,
.nx-emailfwd-card,
.nx-action-card {
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
}

.nx-dns-table th,
.nx-emailfwd-table th {
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 12px 14px !important;
    color: #64748b !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.nx-dns-table td,
.nx-emailfwd-table td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
}

.nx-dns-row:hover {
    background-color: rgba(99, 102, 241, 0.02) !important;
}

.nx-dns-input,
.nx-dns-select {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.825rem !important;
    transition: all 0.2s ease !important;
}

.nx-dns-input:focus,
.nx-dns-select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* Register NS Nav Pills */
.nx-ns-tabs-wrap .nav-pills {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.nx-ns-tabs-wrap .nav-pills .nav-link {
    color: #475569;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nx-ns-tabs-wrap .nav-pills .nav-link:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.nx-ns-tabs-wrap .nav-pills .nav-link.active {
    background: #ffffff !important;
    color: #4f46e5 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

/* ==========================================================================
   DARK THEME: DOMAIN MANAGEMENT SUITE
   ========================================================================== */

[data-bs-theme="dark"] .nx-dns-card,
[data-bs-theme="dark"] .nx-emailfwd-card,
[data-bs-theme="dark"] .nx-action-card,
[data-bs-theme="dark"] .nx-getepp-container .card {
    background: #111a2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .nx-dns-table th,
[data-bs-theme="dark"] .nx-emailfwd-table th {
    background-color: #0d1527 !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-dns-table td,
[data-bs-theme="dark"] .nx-emailfwd-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-dns-row:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

[data-bs-theme="dark"] .nx-dns-new-row {
    background-color: rgba(99, 102, 241, 0.12) !important;
}

[data-bs-theme="dark"] .nx-dns-input,
[data-bs-theme="dark"] .nx-dns-select,
[data-bs-theme="dark"] .nx-registerns-container .form-control,
[data-bs-theme="dark"] .nx-domain-emailfwd-container .form-control {
    background-color: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-dns-input:focus,
[data-bs-theme="dark"] .nx-dns-select:focus,
[data-bs-theme="dark"] .nx-registerns-container .form-control:focus,
[data-bs-theme="dark"] .nx-domain-emailfwd-container .form-control:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
    background-color: #0e172a !important;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #17233c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills {
    background: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link.active {
    background: #1e293b !important;
    color: #a5b4fc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-dns-priority[readonly] {
    background-color: #111a2e !important;
    color: #64748b !important;
}


/* Badge & Back button enhancements for domain suite */
.nx-count-badge {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nx-btn-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.nx-btn-back:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    transform: translateX(-2px) !important;
}

[data-bs-theme="dark"] .nx-count-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .nx-btn-back {
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-btn-back:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link.active {
    background: #1e293b !important;
    color: #818cf8 !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================================================
   QUOTES SUITE REDESIGN (clientareaquotes.tpl & viewquote.tpl)
   ========================================================================== */

.nx-quote-row {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.nx-quote-row:hover {
    background-color: rgba(99, 102, 241, 0.03) !important;
}

/* Quote Status Stamps */
.nx-stamp-accepted {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1.5px solid #059669 !important;
}

.nx-stamp-delivered {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1.5px solid #0284c7 !important;
}

.nx-stamp-onhold,
.nx-stamp-on\ hold {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1.5px solid #d97706 !important;
}

.nx-stamp-lost,
.nx-stamp-dead {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1.5px solid #cbd5e1 !important;
}

/* Dark Mode Quotes */
[data-bs-theme="dark"] .nx-quote-row:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

[data-bs-theme="dark"] .nx-stamp-accepted {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

[data-bs-theme="dark"] .nx-stamp-delivered {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #38bdf8 !important;
    border-color: rgba(14, 165, 233, 0.4) !important;
}

[data-bs-theme="dark"] .nx-stamp-onhold,
[data-bs-theme="dark"] .nx-stamp-on\ hold {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[data-bs-theme="dark"] .nx-stamp-lost,
[data-bs-theme="dark"] .nx-stamp-dead {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .nx-invoice-paper {
    background: #111a2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-invoice-topbar {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* DataTables transparent wrapper for Quotes */
.nx-quotes-table-wrapper .dataTables_wrapper,
div[id="tableQuotesList_wrapper"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

[data-bs-theme="dark"] div[id="tableQuotesList_wrapper"],
[data-bs-theme="dark"] .nx-quotes-table-wrapper .dataTables_wrapper,
[data-bs-theme="dark"] .nx-quotes-table-wrapper .dataTables_info,
[data-bs-theme="dark"] .nx-quotes-table-wrapper .dataTables_paginate,
[data-bs-theme="dark"] .nx-quotes-table-wrapper .dataTables_length,
[data-bs-theme="dark"] .nx-quotes-table-wrapper .listtable {
    background: transparent !important;
    color: #94a3b8 !important;
    border: none !important;
}

[data-bs-theme="dark"] .nx-quote-items-card {
    background: #111a2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-quote-items-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-quote-items-card thead th {
    background: #0d1527 !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-quote-items-card tbody td {
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .nx-quote-totals-block {
    background: #0b1120 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* ==========================================================================
   UPGRADE & DOWNGRADE WORKFLOW (upgrade.tpl & upgradesummary.tpl)
   ========================================================================== */

.nx-upgrade-container,
.nx-upgradesummary-container {
    animation: fadeIn 0.25s ease-in-out;
}

.nx-current-plan-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.nx-upgrade-package-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nx-upgrade-package-card:hover {
    border-color: #6366f1 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.04) !important;
}

.nx-upgrade-features span {
    display: inline-block;
    padding: 3px 0;
    font-size: 0.85rem;
}

.nx-upgrade-select {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

.nx-upgrade-select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Dark Mode Upgrades */
[data-bs-theme="dark"] .nx-current-plan-card,
[data-bs-theme="dark"] .nx-upgrade-package-card,
[data-bs-theme="dark"] .nx-upgradesummary-container .card {
    background: #111a2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .nx-upgrade-package-card:hover {
    border-color: #818cf8 !important;
    box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .nx-upgrade-select {
    background-color: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-upgrade-select:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .nx-upgrade-package-card .card-footer {
    background: #0d1527 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-upgrade-features {
    color: #cbd5e1 !important;
}


/* ==========================================================================
   FEEDBACK & KB SUGGESTIONS REDESIGN
   ========================================================================== */

.nx-rating-number {
    background: #f8fafc;
    border-color: #e2e8f0 !important;
    color: #475569;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.nx-rating-pill:hover .nx-rating-number {
    background: #eef2ff;
    border-color: #6366f1 !important;
    color: #4f46e5;
    transform: translateY(-2px);
}

.nx-rating-pill input:checked + .nx-rating-number {
    background: #6366f1 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
    transform: translateY(-2px);
}

.nx-kb-item {
    transition: all 0.2s ease;
}

.nx-kb-item:hover {
    background-color: rgba(99, 102, 241, 0.04) !important;
    transform: translateX(3px);
}

/* Dark Mode Feedback */
[data-bs-theme="dark"] .nx-rating-number {
    background: #0b1120;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8;
}

[data-bs-theme="dark"] .nx-rating-pill:hover .nx-rating-number {
    background: rgba(99, 102, 241, 0.15);
    border-color: #818cf8 !important;
    color: #e0e7ff;
}

[data-bs-theme="dark"] .nx-rating-pill input:checked + .nx-rating-number {
    background: #6366f1 !important;
    border-color: #818cf8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.5) !important;
}

[data-bs-theme="dark"] .nx-kb-item {
    background: transparent !important;
}

[data-bs-theme="dark"] .nx-kb-item:hover {
    background-color: rgba(99, 102, 241, 0.1) !important;
}


/* ==========================================================================
   User Permissions & Security Cards Suite
   ========================================================================== */
.nx-perm-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}

.nx-perm-card:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.nx-perm-card.is-checked {
    background: #f0f4ff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 1px #6366f1 !important;
}

.nx-perm-checkbox-wrap {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.nx-perm-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 2 !important;
}

.nx-perm-indicator {
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important;
    font-size: 11px !important;
    transition: all 0.15s ease !important;
}

.nx-perm-card.is-checked .nx-perm-indicator {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

.nx-perm-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
    letter-spacing: -0.01em !important;
}

.nx-perm-desc {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* Dark Mode for Permissions */
[data-bs-theme="dark"] .nx-perm-card,
.dark .nx-perm-card {
    background: #111a2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-perm-card:hover,
.dark .nx-perm-card:hover {
    background: #162036 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

[data-bs-theme="dark"] .nx-perm-card.is-checked,
.dark .nx-perm-card.is-checked {
    background: rgba(99, 102, 241, 0.14) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 1px #818cf8 !important;
}

[data-bs-theme="dark"] .nx-perm-indicator,
.dark .nx-perm-indicator {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .nx-perm-card.is-checked .nx-perm-indicator,
.dark .nx-perm-card.is-checked .nx-perm-indicator {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-perm-title,
.dark .nx-perm-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-perm-desc,
.dark .nx-perm-desc {
    color: #94a3b8 !important;
}

/* 2FA Status Banner */
.nx-2fa-status-banner {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-2fa-status-banner,
.dark .nx-2fa-status-banner {
    background: #111a2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.nx-status-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.nx-status-avatar.is-enabled {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
}

.nx-status-avatar.is-disabled {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
}


/* ==========================================================================
   Comprehensive Dark Mode Form Inputs & Controls Suite
   ========================================================================== */
[data-bs-theme="dark"] .nx-ticket-form-card .form-control,
[data-bs-theme="dark"] .nx-ticket-form-card input.form-control,
[data-bs-theme="dark"] .nx-ticket-form-card select.form-control,
[data-bs-theme="dark"] .input-group-merge input.form-control,
[data-bs-theme="dark"] .input-group-merge input,
[data-bs-theme="dark"] #inputName,
[data-bs-theme="dark"] #inputEmail,
[data-bs-theme="dark"] #inputSubject,
[data-bs-theme="dark"] #inputDepartment,
[data-bs-theme="dark"] #inputRelatedService,
[data-bs-theme="dark"] #inputPriority,
.dark .nx-ticket-form-card .form-control,
.dark .nx-ticket-form-card input.form-control,
.dark .nx-ticket-form-card select.form-control,
.dark .input-group-merge input.form-control,
.dark .input-group-merge input,
.dark #inputName,
.dark #inputEmail,
.dark #inputSubject,
.dark #inputDepartment,
.dark #inputRelatedService,
.dark #inputPriority {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .input-group-merge .input-group-text,
.dark .input-group-merge .input-group-text {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-ticket-form-card input.form-control:disabled,
[data-bs-theme="dark"] .nx-ticket-form-card input.form-control[disabled],
[data-bs-theme="dark"] #inputName[disabled],
[data-bs-theme="dark"] #inputEmail[disabled],
.dark .nx-ticket-form-card input.form-control:disabled,
.dark .nx-ticket-form-card input.form-control[disabled],
.dark #inputName[disabled],
.dark #inputEmail[disabled] {
    background-color: rgba(30, 41, 59, 0.7) !important;
    background: rgba(30, 41, 59, 0.7) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    cursor: not-allowed !important;
}

[data-bs-theme="dark"] .nx-ticket-form-card .form-control::placeholder,
.dark .nx-ticket-form-card .form-control::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* DataTables Selected Row in Dark Mode (Eliminate Inset 9999px Box Shadow) */
[data-bs-theme="dark"] table.dataTable tbody tr.selected > *,
[data-bs-theme="dark"] #tableDomainsList tbody tr.selected > *,
[data-bs-theme="dark"] #tableDomainsList tbody tr.selected > td,
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked) > *,
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked) > td,
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected > *,
[data-bs-theme="dark"] .nx-domains-table tbody tr.selected > td,
[data-bs-theme="dark"] .nx-domains-table tbody tr:has(input:checked) > *,
[data-bs-theme="dark"] .nx-domains-table tbody tr:has(input:checked) > td,
.dark table.dataTable tbody tr.selected > *,
.dark #tableDomainsList tbody tr.selected > *,
.dark #tableDomainsList tbody tr.selected > td,
.dark #tableDomainsList tbody tr:has(input:checked) > *,
.dark #tableDomainsList tbody tr:has(input:checked) > td,
.dark .nx-domains-table tbody tr.selected > *,
.dark .nx-domains-table tbody tr.selected > td,
.dark .nx-domains-table tbody tr:has(input:checked) > *,
.dark .nx-domains-table tbody tr:has(input:checked) > td {
    background-color: #1e293b !important;
    background: #1e293b !important;
    box-shadow: none !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] #tableDomainsList tbody tr.selected > td:first-child,
[data-bs-theme="dark"] #tableDomainsList tbody tr:has(input:checked) > td:first-child,
.dark #tableDomainsList tbody tr.selected > td:first-child,
.dark #tableDomainsList tbody tr:has(input:checked) > td:first-child {
    box-shadow: inset 4px 0 0 #818cf8 !important;
}

/* Light Mode Selected Row High Polish (Strictly Scoped to Light Mode) */
html:not(.dark):not([data-bs-theme="dark"]) #tableDomainsList tbody tr.selected > *,
html:not(.dark):not([data-bs-theme="dark"]) #tableDomainsList tbody tr.selected > td,
html:not(.dark):not([data-bs-theme="dark"]) #tableDomainsList tbody tr:has(input:checked) > *,
html:not(.dark):not([data-bs-theme="dark"]) #tableDomainsList tbody tr:has(input:checked) > td,
[data-bs-theme="light"] #tableDomainsList tbody tr.selected > *,
[data-bs-theme="light"] #tableDomainsList tbody tr.selected > td,
[data-bs-theme="light"] #tableDomainsList tbody tr:has(input:checked) > *,
[data-bs-theme="light"] #tableDomainsList tbody tr:has(input:checked) > td {
    background-color: #f0f4ff !important;
    background: #f0f4ff !important;
    box-shadow: none !important;
    color: #0f172a !important;
}

html:not(.dark):not([data-bs-theme="dark"]) #tableDomainsList tbody tr.selected > td:first-child,
html:not(.dark):not([data-bs-theme="dark"]) #tableDomainsList tbody tr:has(input:checked) > td:first-child,
[data-bs-theme="light"] #tableDomainsList tbody tr.selected > td:first-child,
[data-bs-theme="light"] #tableDomainsList tbody tr:has(input:checked) > td:first-child {
    box-shadow: inset 4px 0 0 #6366f1 !important;
}

/* Ensure DataTables filter label has no stray border, glyph, or outline */
.dataTables_wrapper .dataTables_filter label {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Contact Role Navigation Pills */
.nx-contact-role-pills {
    display: inline-flex;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 14px;
    gap: 4px;
    border: none !important;
}

.nx-contact-role-pills .nav-link {
    border-radius: 10px !important;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    border: none !important;
    background: transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
}

.nx-contact-role-pills .nav-link:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.nx-contact-role-pills .nav-link.active {
    background: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28) !important;
}

[data-bs-theme="dark"] .nx-contact-role-pills,
.dark .nx-contact-role-pills {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-contact-role-pills .nav-link,
.dark .nx-contact-role-pills .nav-link {
    color: #94a3b8;
}

[data-bs-theme="dark"] .nx-contact-role-pills .nav-link:hover,
.dark .nx-contact-role-pills .nav-link:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .nx-contact-role-pills .nav-link.active,
.dark .nx-contact-role-pills .nav-link.active {
    background: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

.nx-icon-sky {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.nx-icon-purple {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}

[data-bs-theme="dark"] .nx-icon-sky,
.dark .nx-icon-sky {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}

[data-bs-theme="dark"] .nx-icon-purple,
.dark .nx-icon-purple {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

[data-bs-theme="dark"] .nx-contact-custom-box label,
.dark .nx-contact-custom-box label,
[data-bs-theme="dark"] .nx-field-label,
.dark .nx-field-label {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-contact-custom-box .input-group-text,
.dark .nx-contact-custom-box .input-group-text {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .nx-contact-custom-box .form-control,
.dark .nx-contact-custom-box .form-control {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-contact-custom-box .form-control:focus,
.dark .nx-contact-custom-box .form-control:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}

.dataTables_wrapper .dataTables_filter label input {
    font-size: 13.5px !important;
    line-height: normal !important;
}

/* ==========================================================================
   Executive Contact Information Suite Polish
   ========================================================================== */
.nx-hero-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4);
}

.nx-domain-identity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #6366f1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
}

[data-bs-theme="dark"] .nx-domain-identity-pill,
.dark .nx-domain-identity-pill {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
}

.nx-contact-trust-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .nx-contact-trust-card,
.dark .nx-contact-trust-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-trust-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.nx-trust-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .nx-trust-badge-pill,
.dark .nx-trust-badge-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.nx-section-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

[data-bs-theme="dark"] .nx-section-eyebrow,
.dark .nx-section-eyebrow {
    color: #94a3b8;
}

.nx-input-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.01em;
}

[data-bs-theme="dark"] .nx-input-label,
.dark .nx-input-label {
    color: #e2e8f0;
}

.nx-custom-input-group .input-group-text {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-right: none !important;
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    padding-left: 14px;
    padding-right: 14px;
    color: #6366f1 !important;
}

.nx-custom-input-group .form-control {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    border-left: none !important;
    border-color: #cbd5e1 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    color: #0f172a !important;
}

.nx-custom-input-group .form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: none !important;
}

.nx-custom-input-group:focus-within .input-group-text,
.nx-custom-input-group:focus-within .form-control {
    border-color: #6366f1 !important;
}

.nx-custom-input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
    border-radius: 12px;
}

[data-bs-theme="dark"] .nx-custom-input-group .input-group-text,
.dark .nx-custom-input-group .input-group-text {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .nx-custom-input-group .form-control,
.dark .nx-custom-input-group .form-control {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-custom-input-group:focus-within .input-group-text,
.dark .nx-custom-input-group:focus-within .input-group-text,
[data-bs-theme="dark"] .nx-custom-input-group:focus-within .form-control,
.dark .nx-custom-input-group:focus-within .form-control {
    border-color: #818cf8 !important;
}

[data-bs-theme="dark"] .nx-custom-input-group:focus-within,
.dark .nx-custom-input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25) !important;
}

.nx-existing-dropdown-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
}

[data-bs-theme="dark"] .nx-existing-dropdown-card,
.dark .nx-existing-dropdown-card {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Domain Details Tabs (Auto-Renew & Reglock Spotlight Cards)
   ========================================================================== */
.nx-status-spotlight-card {
    padding: 24px 28px;
    border-radius: 18px;
    border: 1.5px solid;
    transition: all 0.2s ease;
}

.nx-status-spotlight-card.is-enabled {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.25) !important;
}

.nx-status-spotlight-card.is-disabled {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.25) !important;
}

[data-bs-theme="dark"] .nx-status-spotlight-card.is-enabled,
.dark .nx-status-spotlight-card.is-enabled {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-bs-theme="dark"] .nx-status-spotlight-card.is-disabled,
.dark .nx-status-spotlight-card.is-disabled {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.nx-status-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.nx-status-avatar.is-enabled {
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
}

.nx-status-avatar.is-disabled {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}

[data-bs-theme="dark"] .nx-status-avatar.is-enabled,
.dark .nx-status-avatar.is-enabled {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-bs-theme="dark"] .nx-status-avatar.is-disabled,
.dark .nx-status-avatar.is-disabled {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* ==========================================================================
   Mass Payment Suite Styles
   ========================================================================== */
.nx-masspay-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.nx-masspay-table thead th {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 20px;
}

[data-bs-theme="dark"] .nx-masspay-table thead th,
.dark .nx-masspay-table thead th {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.nx-masspay-invoice-hdr {
    background: #f1f5f9 !important;
    padding: 12px 20px !important;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .nx-masspay-invoice-hdr,
.dark .nx-masspay-invoice-hdr {
    background: rgba(15, 23, 42, 0.7) !important;
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-masspay-item-row td {
    padding: 14px 20px;
    font-size: 13.5px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

[data-bs-theme="dark"] .nx-masspay-item-row td,
.dark .nx-masspay-item-row td {
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.04);
}

.nx-masspay-summary-wrap {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px 24px;
    border: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .nx-masspay-summary-wrap,
.dark .nx-masspay-summary-wrap {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
}

.nx-masspay-total-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0.15) 100%);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[data-bs-theme="dark"] .nx-masspay-total-badge,
.dark .nx-masspay-total-badge {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.35);
}

/* ==========================================================================
   Bootstrap 5 Gutter Polyfill & Domain Shortcuts Grid Vertical Spacing
   ========================================================================== */
.row.g-1, .flex.g-1 { margin-right: -0.25rem; margin-left: -0.25rem; row-gap: 0.5rem; }
.row.g-1 > *, .flex.g-1 > * { padding-right: 0.25rem; padding-left: 0.25rem; }

.row.g-2, .flex.g-2 { margin-right: -0.5rem; margin-left: -0.5rem; row-gap: 0.75rem; }
.row.g-2 > *, .flex.g-2 > * { padding-right: 0.5rem; padding-left: 0.5rem; }

.row.g-3, .flex.g-3 { margin-right: -0.75rem; margin-left: -0.75rem; row-gap: 1.25rem; }
.row.g-3 > *, .flex.g-3 > * { padding-right: 0.75rem; padding-left: 0.75rem; }

.row.g-4, .flex.g-4 { margin-right: -1rem; margin-left: -1rem; row-gap: 1.5rem; }
.row.g-4 > *, .flex.g-4 > * { padding-right: 1rem; padding-left: 1rem; }

.row.g-5, .flex.g-5 { margin-right: -1.5rem; margin-left: -1.5rem; row-gap: 2rem; }
.row.g-5 > *, .flex.g-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }





/* ==========================================================================
   Executive Alert System & Overdue Invoice Notification Banner
   ========================================================================== */

/* Universal Alert Styling */
.alert,
.nx-alert {
    border-radius: 16px !important;
    border-width: 1px !important;
    border-style: solid !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 24px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.alert-danger,
.nx-alert-danger {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border-color: rgba(244, 63, 94, 0.25) !important;
    border-left: 5px solid #f43f5e !important;
    color: #9f1239 !important;
}

.alert-success,
.nx-alert-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    border-left: 5px solid #10b981 !important;
    color: #065f46 !important;
}

.alert-warning,
.nx-alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    border-left: 5px solid #f59e0b !important;
    color: #92400e !important;
}

.alert-info,
.nx-alert-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
    border-left: 5px solid #0ea5e9 !important;
    color: #075985 !important;
}

/* Alert Internal Layout */
.nx-alert-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
}

.nx-alert-icon-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 16px !important;
}

.alert-danger .nx-alert-icon-box,
.nx-alert-danger .nx-alert-icon-box {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.35) !important;
}

.alert-success .nx-alert-icon-box,
.nx-alert-success .nx-alert-icon-box {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

.alert-warning .nx-alert-icon-box,
.nx-alert-warning .nx-alert-icon-box {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

.alert-info .nx-alert-icon-box,
.nx-alert-info .nx-alert-icon-box {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35) !important;
}

.nx-alert-content {
    flex-grow: 1 !important;
}

.nx-alert-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
}

.alert-danger .nx-alert-title,
.nx-alert-danger .nx-alert-title {
    color: #881337 !important;
}

.alert-success .nx-alert-title,
.nx-alert-success .nx-alert-title {
    color: #064e3b !important;
}

.alert-warning .nx-alert-title,
.nx-alert-warning .nx-alert-title {
    color: #78350f !important;
}

.alert-info .nx-alert-title,
.nx-alert-info .nx-alert-title {
    color: #0c4a6e !important;
}

.nx-alert-text {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

.nx-alert-list {
    margin-top: 4px !important;
    padding-left: 18px !important;
}

.nx-alert-list li {
    margin-bottom: 3px !important;
}

/* Dark Mode Alerts */
[data-bs-theme="dark"] .alert-danger,
.dark .alert-danger,
[data-bs-theme="dark"] .nx-alert-danger,
.dark .nx-alert-danger {
    background: linear-gradient(135deg, rgba(76, 5, 25, 0.45) 0%, rgba(30, 10, 18, 0.55) 100%) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
    border-left: 5px solid #fb7185 !important;
    color: #fecdd3 !important;
}

[data-bs-theme="dark"] .alert-success,
.dark .alert-success,
[data-bs-theme="dark"] .nx-alert-success,
.dark .nx-alert-success {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.45) 0%, rgba(6, 40, 30, 0.55) 100%) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    border-left: 5px solid #34d399 !important;
    color: #a7f3d0 !important;
}

[data-bs-theme="dark"] .alert-warning,
.dark .alert-warning,
[data-bs-theme="dark"] .nx-alert-warning,
.dark .nx-alert-warning {
    background: linear-gradient(135deg, rgba(69, 26, 3, 0.45) 0%, rgba(45, 20, 5, 0.55) 100%) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    border-left: 5px solid #fbbf24 !important;
    color: #fde68a !important;
}

[data-bs-theme="dark"] .alert-info,
.dark .alert-info,
[data-bs-theme="dark"] .nx-alert-info,
.dark .nx-alert-info {
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.45) 0%, rgba(10, 37, 64, 0.55) 100%) !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
    border-left: 5px solid #38bdf8 !important;
    color: #bae6fd !important;
}

[data-bs-theme="dark"] .alert-danger .nx-alert-title,
.dark .alert-danger .nx-alert-title {
    color: #fff1f2 !important;
}

[data-bs-theme="dark"] .alert-success .nx-alert-title,
.dark .alert-success .nx-alert-title {
    color: #f0fdf4 !important;
}

[data-bs-theme="dark"] .alert-warning .nx-alert-title,
.dark .alert-warning .nx-alert-title {
    color: #fffbeb !important;
}

[data-bs-theme="dark"] .alert-info .nx-alert-title,
.dark .alert-info .nx-alert-title {
    color: #f0f9ff !important;
}

/* ==========================================================================
   Executive Overdue / Unpaid Invoice Notification Banner
   ========================================================================== */
.nx-overdue-invoice-banner {
    border-radius: 18px !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.12), 0 8px 10px -6px rgba(244, 63, 94, 0.1) !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.nx-overdue-invoice-banner.nx-banner-danger {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
    border-left: 6px solid #f43f5e !important;
}

.nx-overdue-invoice-banner.nx-banner-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    border-left: 6px solid #f59e0b !important;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.12), 0 8px 10px -6px rgba(245, 158, 11, 0.1) !important;
}

.nx-overdue-invoice-banner .nx-banner-icon-badge {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
}

.nx-banner-danger .nx-banner-icon-badge {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    box-shadow: 0 6px 16px rgba(244, 63, 94, 0.35) !important;
}

.nx-banner-warning .nx-banner-icon-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35) !important;
}

.nx-overdue-invoice-banner .nx-banner-text {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.nx-banner-danger .nx-banner-text {
    color: #9f1239 !important;
}

.nx-banner-warning .nx-banner-text {
    color: #92400e !important;
}

.nx-overdue-invoice-banner .nx-banner-subtext {
    font-size: 13px !important;
    color: #64748b !important;
}

.nx-overdue-invoice-banner .nx-pay-invoice-btn {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.nx-overdue-invoice-banner .nx-pay-invoice-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(244, 63, 94, 0.45) !important;
    color: #ffffff !important;
}

.nx-banner-warning .nx-pay-invoice-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

.nx-banner-warning .nx-pay-invoice-btn:hover {
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45) !important;
}

/* Dark Mode Overdue Banner */
[data-bs-theme="dark"] .nx-overdue-invoice-banner.nx-banner-danger,
.dark .nx-overdue-invoice-banner.nx-banner-danger {
    background: linear-gradient(135deg, rgba(76, 5, 25, 0.5) 0%, rgba(30, 10, 18, 0.6) 100%) !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
    border-left: 6px solid #fb7185 !important;
}

[data-bs-theme="dark"] .nx-overdue-invoice-banner.nx-banner-warning,
.dark .nx-overdue-invoice-banner.nx-banner-warning {
    background: linear-gradient(135deg, rgba(69, 26, 3, 0.5) 0%, rgba(45, 20, 5, 0.6) 100%) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    border-left: 6px solid #fbbf24 !important;
}

[data-bs-theme="dark"] .nx-banner-danger .nx-banner-text,
.dark .nx-banner-danger .nx-banner-text {
    color: #fecdd3 !important;
}

[data-bs-theme="dark"] .nx-banner-warning .nx-banner-text,
.dark .nx-banner-warning .nx-banner-text {
    color: #fde68a !important;
}

[data-bs-theme="dark"] .nx-overdue-invoice-banner .nx-banner-subtext,
.dark .nx-overdue-invoice-banner .nx-banner-subtext {
    color: #94a3b8 !important;
}


/* ==========================================================================
   Modern Segmented Tabs for Register Nameservers
   ========================================================================== */
.nx-ns-tabs-wrap .nav-pills {
    background: #f1f5f9 !important;
    border-radius: 14px !important;
    padding: 6px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
}

.nx-ns-tabs-wrap .nav-pills .nav-link {
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #64748b !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.nx-ns-tabs-wrap .nav-pills .nav-link:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

.nx-ns-tabs-wrap .nav-pills .nav-link.active {
    background: #ffffff !important;
    color: #4338ca !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills,
.dark .nx-ns-tabs-wrap .nav-pills {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link,
.dark .nx-ns-tabs-wrap .nav-pills .nav-link {
    color: #94a3b8 !important;
    border: none !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link:hover,
.dark .nx-ns-tabs-wrap .nav-pills .nav-link:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .nx-ns-tabs-wrap .nav-pills .nav-link.active,
.dark .nx-ns-tabs-wrap .nav-pills .nav-link.active {
    background: #1e293b !important;
    color: #818cf8 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}


/* ==========================================================================
   Executive Domain Hero Card & Cards Dark Mode Override
   ========================================================================== */
[data-bs-theme="dark"] .nx-card,
.dark .nx-card,
[data-bs-theme="dark"] .nx-domain-hero-card,
.dark .nx-domain-hero-card,
[data-bs-theme="dark"] .card.nx-card,
.dark .card.nx-card,
[data-bs-theme="dark"] .card.nx-domain-hero-card,
.dark .card.nx-domain-hero-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-domain-identity-pill,
.dark .nx-domain-identity-pill {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-domain-hero-title,
.dark .nx-domain-hero-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-hero-subtitle,
.dark .nx-hero-subtitle {
    color: #94a3b8 !important;
}


/* ==========================================================================
   Executive Modern Form Elements & Action Buttons Suite
   ========================================================================== */

/* 1. Unified Custom Input Group */
.nx-custom-input-group {
    display: flex !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 42px !important;
    width: 100% !important;
}

.nx-custom-input-group:focus-within {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.15) !important;
}

.nx-custom-input {
    border: none !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    height: 100% !important;
    color: #0f172a !important;
    background: transparent !important;
    flex: 1 !important;
    min-width: 0 !important;
    outline: none !important;
}

.nx-custom-input:focus {
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.nx-custom-input-standalone {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    height: 42px !important;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100% !important;
}

.nx-custom-input-standalone:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.15) !important;
    background: #ffffff !important;
    outline: none !important;
}

.nx-custom-addon {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-left: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
    user-select: none !important;
    height: 100% !important;
}

.nx-custom-addon-prefix {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    border-right: 1px solid #e2e8f0 !important;
    user-select: none !important;
    height: 100% !important;
}

/* 2. Custom Select Dropdown */
.nx-custom-select {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    height: 42px !important;
    padding: 8px 36px 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    width: 100% !important;
}

.nx-custom-select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* 3. Priority Input */
.nx-priority-input {
    height: 42px !important;
    border-radius: 12px !important;
}

.nx-priority-na {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1.5px dashed #cbd5e1 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* 4. Refined Badges & Indicators */
.nx-badge-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 20px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
}

.nx-fwd-connector {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6366f1 !important;
    font-size: 12px !important;
    margin: 0 auto !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

.nx-fwd-connector-new {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

.nx-btn-clear {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: rgba(244, 63, 94, 0.08) !important;
    color: #f43f5e !important;
    border: 1.5px solid rgba(244, 63, 94, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.nx-btn-clear:hover {
    background: #f43f5e !important;
    color: #ffffff !important;
    border-color: #f43f5e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.35) !important;
}

/* 5. Executive Action Buttons */
.nx-btn-save {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.nx-btn-save:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45) !important;
    color: #ffffff !important;
}

.nx-btn-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.nx-btn-cancel:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
}

.nx-btn-add-record {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4f46e5 !important;
    background: rgba(99, 102, 241, 0.08) !important;
    border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.nx-btn-add-record:hover {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: #6366f1 !important;
    transform: translateY(-1px) !important;
    color: #4338ca !important;
}

.nx-btn-emerald {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 26px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.nx-btn-emerald:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45) !important;
    color: #ffffff !important;
}

.nx-btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 26px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.nx-btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(244, 63, 94, 0.45) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Dark Mode Form Controls & Action Buttons
   ========================================================================== */
[data-bs-theme="dark"] .nx-custom-input-group,
.dark .nx-custom-input-group {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-bs-theme="dark"] .nx-custom-input-group:focus-within,
.dark .nx-custom-input-group:focus-within {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.25) !important;
}

[data-bs-theme="dark"] .nx-custom-input,
.dark .nx-custom-input {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-custom-input-standalone,
.dark .nx-custom-input-standalone {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-custom-input-standalone:focus,
.dark .nx-custom-input-standalone:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.25) !important;
    background: #0f172a !important;
}

[data-bs-theme="dark"] .nx-custom-addon,
.dark .nx-custom-addon,
[data-bs-theme="dark"] .nx-custom-addon-prefix,
.dark .nx-custom-addon-prefix {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-custom-select,
.dark .nx-custom-select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-bs-theme="dark"] .nx-priority-na,
.dark .nx-priority-na {
    background: #1e293b !important;
    color: #64748b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .nx-badge-new,
.dark .nx-badge-new {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

[data-bs-theme="dark"] .nx-fwd-connector,
.dark .nx-fwd-connector {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-fwd-connector-new,
.dark .nx-fwd-connector-new {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .nx-btn-clear,
.dark .nx-btn-clear {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #fb7185 !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
}

[data-bs-theme="dark"] .nx-btn-clear:hover,
.dark .nx-btn-clear:hover {
    background: #f43f5e !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-btn-cancel,
.dark .nx-btn-cancel {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .nx-btn-cancel:hover,
.dark .nx-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-btn-add-record,
.dark .nx-btn-add-record {
    background: rgba(99, 102, 241, 0.18) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-btn-add-record:hover,
.dark .nx-btn-add-record:hover {
    background: rgba(99, 102, 241, 0.26) !important;
    border-color: #818cf8 !important;
    color: #ffffff !important;
}


/* ==========================================================================
   EPP CODE / DOMAIN TRANSFER AUTHORIZATION ENHANCEMENTS
   ========================================================================== */
.nx-epp-dispatch-card {
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.nx-epp-success-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-epp-icon-circle {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.45);
}

.nx-epp-icon-pulse-ring {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.18);
    z-index: 1;
    animation: nxPulseRing 2.6s infinite ease-in-out;
}

@keyframes nxPulseRing {
    0% { transform: scale(0.95); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 0.25; }
    100% { transform: scale(0.95); opacity: 0.85; }
}

.nx-epp-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.nx-epp-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.015em;
}

.nx-epp-desc {
    font-size: 14.5px;
    color: #64748b;
    max-width: 580px;
    line-height: 1.6;
}

.nx-epp-notice-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 22px;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px dashed rgba(16, 185, 129, 0.3);
    color: #065f46;
    font-size: 13px;
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

.nx-epp-step-card {
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 16px;
    padding: 22px 20px;
    position: relative;
    height: 100%;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nx-epp-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.nx-step-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.nx-step-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
    transition: transform 0.2s ease;
}

.nx-epp-step-card:hover .nx-step-icon {
    transform: scale(1.08);
}

.nx-step-icon-emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981 !important;
}

.nx-step-icon-emerald i {
    color: #10b981 !important;
}

.nx-step-icon-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b !important;
}

.nx-step-icon-amber i {
    color: #f59e0b !important;
}

.nx-step-icon-indigo {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1 !important;
}

.nx-step-icon-indigo i {
    color: #6366f1 !important;
}

.nx-step-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.nx-step-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

.nx-epp-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 16px;
    padding: 20px 24px;
}

.nx-epp-code-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.nx-epp-code-string {
    font-family: 'SF Mono', Monaco, Consolas, 'Fira Code', 'Courier New', monospace;
    font-size: 22px;
    font-weight: 700;
    color: #4338ca;
    letter-spacing: 0.08em;
}

/* Dark Mode Overrides for EPP */
[data-bs-theme="dark"] .nx-epp-dispatch-card,
.dark .nx-epp-dispatch-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-epp-title,
.dark .nx-epp-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-epp-desc,
.dark .nx-epp-desc {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-epp-badge,
.dark .nx-epp-badge {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-bs-theme="dark"] .nx-epp-notice-bar,
.dark .nx-epp-notice-bar {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #a7f3d0 !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
}

[data-bs-theme="dark"] .nx-epp-step-card,
.dark .nx-epp-step-card {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-bs-theme="dark"] .nx-epp-step-card:hover,
.dark .nx-epp-step-card:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-step-title,
.dark .nx-step-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-step-desc,
.dark .nx-step-desc {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-step-badge,
.dark .nx-step-badge {
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-epp-code-box,
.dark .nx-epp-code-box {
    background: #1e293b !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

[data-bs-theme="dark"] .nx-epp-code-label,
.dark .nx-epp-code-label {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-epp-code-string,
.dark .nx-epp-code-string {
    color: #a5b4fc !important;
}


/* ==========================================================================
   EXECUTIVE CARD FOOTER
   ========================================================================== */
.nx-card-footer {
    padding: 20px 28px !important;
    background: #f8fafc !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    margin-top: 0 !important;
}

[data-bs-theme="dark"] .nx-card-footer,
.dark .nx-card-footer {
    background: rgba(15, 23, 42, 0.75) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}


/* ==========================================================================
   PREMIUM SIDEBAR TRUST & SLA GUARANTEE CARD
   ========================================================================== */
.nx-trust-card {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 75%) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    border-radius: 16px !important;
    padding: 22px 18px 18px 18px !important;
    text-align: center !important;
    box-shadow: 0 4px 16px -4px rgba(16, 185, 129, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: none !important;
}

.nx-trust-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #06b6d4);
}

.nx-trust-icon-box {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px auto;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(6, 182, 212, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.nx-trust-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 5px 0 !important;
    text-transform: none !important;
    letter-spacing: -0.2px !important;
}

.nx-trust-paragraph {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
    text-transform: none !important;
}

.nx-trust-live-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #047857 !important;
    text-transform: none !important;
}

.nx-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.25);
    animation: nxPulseDot 2s infinite;
}

@keyframes nxPulseDot {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.1);
    }
}

/* Dark Mode for Trust Card */
[data-bs-theme="dark"] .nx-trust-card,
.dark .nx-trust-card {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .nx-trust-icon-box,
.dark .nx-trust-icon-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(6, 182, 212, 0.15) 100%) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.2) !important;
}

[data-bs-theme="dark"] .nx-trust-heading,
.dark .nx-trust-heading {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .nx-trust-paragraph,
.dark .nx-trust-paragraph {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-trust-live-status,
.dark .nx-trust-live-status {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}

/* ==========================================================================
   SIDEBAR GLOBAL WIDTH & CHECKMARK REMOVAL
   ========================================================================== */

/* 1. Remove all checkmarks from sidebar items everywhere */
.card-sidebar .list-group-item.active::after,
.sidebar .card .list-group-item.active::after,
.card-sidebar .list-group-item::after,
.sidebar .card .list-group-item::after,
.card-sidebar .list-group-item i.fa-check,
.sidebar .card .list-group-item i.fa-check,
.card-sidebar a.list-group-item i.fa-check,
.sidebar .card a.list-group-item i.fa-check,
.card-sidebar .list-group-item i.fa-circle-check,
.sidebar .card .list-group-item i.fa-circle-check,
.card-sidebar .badge i.fa-check,
.sidebar .card .badge i.fa-check,
.card-sidebar .badge i.fa-circle-check,
.sidebar .card .badge i.fa-circle-check,
.card-sidebar .list-group-item .badge:has(.fa-check),
.sidebar .card .list-group-item .badge:has(.fa-check),
.card-sidebar .list-group-item .badge:has(.fa-circle-check),
.sidebar .card .list-group-item .badge:has(.fa-circle-check),
.card-sidebar .list-group-item svg[data-icon="check"],
.sidebar .card .list-group-item svg[data-icon="check"],
.nx-check-indicator,
.nx-action-check {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Symmetrical Sidebar Layout Everywhere on Desktop (Client Area & Cart) */
@media (min-width: 1200px) {
    .nx-drawer-header,
    .nx-mobile-drawer-trigger-bar,
    .nx-drawer-backdrop {
        display: none !important;
    }

    #main-body > .container > .flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 24px !important;
    }

    .nx-sidebar-col,
    #main-body .row > .col-lg-4.col-xl-3,
    #main-body .row > div:has(> .sidebar) {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }

    .nx-primary-content-col,
    #main-body .row > .col-lg-8.col-xl-9,
    #main-body .row > .primary-content {
        flex: 1 1 0% !important;
        width: calc(100% - 304px) !important;
        max-width: calc(100% - 304px) !important;
        min-width: 0 !important;
    }
}

@media (min-width: 1200px) {
    .nx-main-layout {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
    }
    .nx-sidebar-column {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
    .nx-content-column {
        flex: 1 1 0% !important;
        width: calc(100% - 304px) !important;
        max-width: calc(100% - 304px) !important;
        min-width: 0 !important;
    }
}

@media (min-width: 1440px) {
    .nx-sidebar-col,
    #main-body .row > .col-lg-4.col-xl-3,
    #main-body .row > div:has(> .sidebar),
    .nx-sidebar-column {
        flex: 0 0 310px !important;
        width: 310px !important;
        max-width: 310px !important;
    }

    .nx-primary-content-col,
    #main-body .row > .col-lg-8.col-xl-9,
    #main-body .row > .primary-content {
        flex: 1 1 0% !important;
        width: calc(100% - 310px) !important;
        max-width: calc(100% - 310px) !important;
    }
}

/* 3. Spacious Cart Category Links & Single-line Labels */
.nx-nav-item a {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    gap: 8px !important;
}
.nx-cat-label {
    gap: 10px !important;
}

.card-sidebar .list-group-item,
.card-sidebar a.list-group-item {
    padding: 10px 14px !important;
}

.card-sidebar .list-group-item .nx-sidebar-label,
.sidebar .card .list-group-item .nx-sidebar-label,
.card-sidebar .list-group-item > span:not(.badge):not(.loading),
.sidebar .card .list-group-item > span:not(.badge):not(.loading) {
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13.5px !important;
}

/* ==========================================================================
   GLOBAL ORDER FORM OVERRIDES - HIDE REDUNDANT LEGACY DROPDOWNS
   ========================================================================== */
.sidebar-collapsed,
#order-standard_cart .sidebar-collapsed,
.cart-body > .sidebar-collapsed {
    display: none !important;
}

/* ==========================================================================
   OFF-CANVAS SIDE DRAWER FOR SMALLER SCREENS (< 992px)
   ========================================================================== */

/* Trigger Button Bar on Mobile/Tablet */
.nx-mobile-drawer-trigger-bar {
    width: 100%;
    margin-bottom: 22px;
}

.nx-btn-open-drawer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

.nx-btn-open-drawer:hover,
.nx-btn-open-drawer:active {
    background: #f8fafc;
    border-color: #6366f1;
    color: #4338ca;
    box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.16);
    transform: translateY(-1px);
}

.nx-btn-open-drawer .nx-trigger-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(129, 140, 248, 0.2));
    color: #4f46e5;
    border-radius: 10px;
    font-size: 14px;
}

.nx-btn-open-drawer .nx-trigger-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nx-btn-open-drawer .nx-trigger-sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.nx-btn-open-drawer .nx-trigger-active-item {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nx-btn-open-drawer .nx-trigger-badge,
.nx-btn-open-drawer .nx-trigger-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nx-btn-open-drawer:hover .nx-trigger-badge,
.nx-btn-open-drawer:hover .nx-trigger-pill {
    background: #4f46e5;
    color: #ffffff;
    transform: translateX(2px);
}

/* Dark mode for trigger button */
[data-bs-theme="dark"] .nx-btn-open-drawer,
.dark .nx-btn-open-drawer {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .nx-btn-open-drawer:hover,
.dark .nx-btn-open-drawer:hover {
    background: #243048 !important;
    border-color: #818cf8 !important;
    color: #c7d2fe !important;
}

[data-bs-theme="dark"] .nx-btn-open-drawer .nx-trigger-sub,
.dark .nx-btn-open-drawer .nx-trigger-sub {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-btn-open-drawer .nx-trigger-active-item,
.dark .nx-btn-open-drawer .nx-trigger-active-item {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-btn-open-drawer .nx-trigger-icon,
.dark .nx-btn-open-drawer .nx-trigger-icon {
    background: rgba(129, 140, 248, 0.18) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .nx-btn-open-drawer .nx-trigger-badge,
.dark .nx-btn-open-drawer .nx-trigger-badge,
[data-bs-theme="dark"] .nx-btn-open-drawer .nx-trigger-pill,
.dark .nx-btn-open-drawer .nx-trigger-pill {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
}

/* Off-Canvas Backdrop */
.nx-drawer-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 10040 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
}

.nx-drawer-backdrop.is-visible,
.nx-drawer-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Drawer Container on Smaller Screens (< 1200px) */
@media (max-width: 1199.98px) {
    .nx-sidebar-col {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 320px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        background: #ffffff !important;
        z-index: 10050 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.22) !important;
        transform: translateX(-105%) !important;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    [data-bs-theme="dark"] .nx-sidebar-col,
    .dark .nx-sidebar-col {
        background: #0f172a !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.6) !important;
    }

    .nx-sidebar-col.is-drawer-open {
        transform: translateX(0) !important;
    }

    /* Drawer Header - Flush & Crisp */
    .nx-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        flex-shrink: 0 !important;
    }

    [data-bs-theme="dark"] .nx-drawer-header,
    .dark .nx-drawer-header {
        background: #0f172a !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .nx-drawer-title {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    [data-bs-theme="dark"] .nx-drawer-title,
    .dark .nx-drawer-title {
        color: #f8fafc !important;
    }

    .nx-drawer-close-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: none !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
    }

    .nx-drawer-close-btn:hover {
        background: #fee2e2 !important;
        color: #ef4444 !important;
        transform: rotate(90deg) !important;
    }

    [data-bs-theme="dark"] .nx-drawer-close-btn,
    .dark .nx-drawer-close-btn {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #cbd5e1 !important;
    }

    [data-bs-theme="dark"] .nx-drawer-close-btn:hover,
    .dark .nx-drawer-close-btn:hover {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #fca5a5 !important;
    }

    /* Drawer Scrollable Body - Flush Full-Bleed Sections (Zero Box-in-Box Outer Padding) */
    .nx-drawer-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
    }

    .nx-drawer-body .sidebar {
        margin-top: 0 !important;
    }

    /* Nested card refinement inside drawer: Full-width flush sections */
    .nx-sidebar-col .sidebar .card,
    .nx-sidebar-col .sidebar .panel,
    .nx-sidebar-col .card-sidebar,
    .nx-sidebar-col .sidebar .card:hover,
    .nx-sidebar-col .sidebar .panel:hover,
    .nx-sidebar-col .card-sidebar:hover,
    .nx-sidebar-column .nx-side-widget,
    .nx-sidebar-column .nx-side-widget:hover,
    #order-standard_cart .cart-sidebar .nx-side-widget,
    #order-standard_cart .cart-sidebar .nx-side-widget:hover {
        margin-bottom: 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
    }

    .nx-sidebar-column .nx-side-widget.nx-trust-card,
    .nx-sidebar-column .nx-side-widget.nx-trust-card:hover,
    #order-standard_cart .cart-sidebar .nx-side-widget.nx-trust-card,
    #order-standard_cart .cart-sidebar .nx-side-widget.nx-trust-card:hover {
        margin: 16px 20px 0 20px !important;
        width: calc(100% - 40px) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(16, 185, 129, 0.22) !important;
        background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 75%) !important;
        box-shadow: none !important;
    }

    .nx-sidebar-col .sidebar .card .card-header,
    .nx-sidebar-col .card-sidebar .card-header {
        padding: 14px 20px 8px 20px !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    .nx-sidebar-col .sidebar .card .list-group,
    .nx-sidebar-col .card-sidebar .list-group {
        padding: 0 12px 12px 12px !important;
    }

    .nx-sidebar-col .sidebar .card .list-group-item,
    .nx-sidebar-col .card-sidebar .list-group-item {
        border-radius: 10px !important;
        border-bottom: none !important;
        padding: 10px 12px !important;
        margin-bottom: 2px !important;
    }

    .nx-sidebar-col .sidebar .card .card-body,
    .nx-sidebar-col .card-sidebar .card-body {
        padding: 8px 20px 16px 20px !important;
    }

    .nx-sidebar-col .sidebar .card .card-footer,
    .nx-sidebar-col .card-sidebar .card-footer {
        padding: 0 20px 16px 20px !important;
        background: transparent !important;
        border-top: none !important;
    }

    [data-bs-theme="dark"] .nx-sidebar-col .sidebar .card,
    [data-bs-theme="dark"] .nx-sidebar-col .sidebar .panel,
    [data-bs-theme="dark"] .nx-sidebar-col .card-sidebar,
    [data-bs-theme="dark"] .nx-sidebar-col .sidebar .card:hover,
    [data-bs-theme="dark"] .nx-sidebar-col .sidebar .panel:hover,
    [data-bs-theme="dark"] .nx-sidebar-col .card-sidebar:hover,
    [data-bs-theme="dark"] .nx-sidebar-column .nx-side-widget,
    [data-bs-theme="dark"] .nx-sidebar-column .nx-side-widget:hover,
    [data-bs-theme="dark"] #order-standard_cart .cart-sidebar .nx-side-widget,
    [data-bs-theme="dark"] #order-standard_cart .cart-sidebar .nx-side-widget:hover,
    .dark .nx-sidebar-col .sidebar .card,
    .dark .nx-sidebar-col .sidebar .panel,
    .dark .nx-sidebar-col .card-sidebar,
    .dark .nx-sidebar-col .sidebar .card:hover,
    .dark .nx-sidebar-col .sidebar .panel:hover,
    .dark .nx-sidebar-col .card-sidebar:hover,
    .dark .nx-sidebar-column .nx-side-widget,
    .dark .nx-sidebar-column .nx-side-widget:hover,
    .dark #order-standard_cart .cart-sidebar .nx-side-widget,
    .dark #order-standard_cart .cart-sidebar .nx-side-widget:hover {
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Prevent body scroll when drawer is open on mobile */
body.nx-drawer-active {
    overflow: hidden !important;
    touch-action: none !important;
}

/* ==========================================================================
   CLIENT AREA RESPONSIVE TABLES & MOBILE POLISH
   ========================================================================== */
.table-container,
.nx-domains-card-body .table-container,
.nx-services-table-wrapper,
.dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Modern sleek custom scrollbar for tables */
.table-container::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar {
    height: 5px;
}
.table-container::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 9999px;
}
.table-container::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.table-container::-webkit-scrollbar-thumb:hover,
.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #tableDomainsList,
    #tableServicesList,
    #tableInvoicesList,
    #tableTicketsList,
    #tableQuotesList,
    .nx-domains-table,
    .nx-services-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #tableDomainsList th, #tableDomainsList td,
    #tableServicesList th, #tableServicesList td,
    #tableInvoicesList th, #tableInvoicesList td,
    #tableTicketsList th, #tableTicketsList td,
    #tableQuotesList th, #tableQuotesList td {
        padding: 10px 8px !important;
        font-size: 12.5px !important;
    }
    .nx-date-badge {
        font-size: 11.5px !important;
    }
    .nx-badge-status {
        padding: 3px 8px !important;
        font-size: 10.5px !important;
    }
}

@media (max-width: 991.98px) {

    .nx-domains-card-header,
    .nx-invoices-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    .nx-bulk-btn-group {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .nx-bulk-btn-group .nx-btn-toolbar,
    .nx-bulk-btn-group .dropdown,
    .nx-bulk-btn-group .dropdown > button {
        flex: 1 1 calc(50% - 6px) !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_filter {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        padding: 12px 16px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_length {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 8px 16px !important;
    }
}

/* --- Sidebar Drawer: Always expand card bodies ---------------------------- */
/* Hide the minimise chevron inside the drawer � panels are always expanded */
#sidebarDrawer .card-minimise {
    display: none !important;
}
/* Ensure collapsable-card-body is always visible inside the drawer */
#sidebarDrawer .collapsable-card-body {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
/* Make the desktop sidebar (non-drawer) also keep panels open */
.sidebar .card-minimise {
    display: none !important;
}

/* ==========================================================================
   PREMIUM ATTRACTIVE INVOICES DUE SIDEBAR CARD
   ========================================================================== */
.card.card-sidebar.nx-invoice-due-card {
    background: #ffffff !important;
    border: 1px solid #fed7aa !important;
    border-top: 3.5px solid #f59e0b !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.09), 0 4px 6px -2px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 24px !important;
}

.card.card-sidebar.nx-invoice-due-card:hover {
    border-color: #fdba74 !important;
    box-shadow: 0 16px 32px -6px rgba(245, 158, 11, 0.16), 0 6px 10px -3px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px) !important;
}

/* Card Header with soft ambient gradient */
.nx-invoice-due-card .nx-inv-card-header {
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%) !important;
    padding: 16px 18px 14px 18px !important;
    border-bottom: 1px solid #fef3c7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}

.nx-inv-header-main {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.nx-inv-icon-badge {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #fef3c7 0%, #fee2e2 100%) !important;
    border: 1px solid #fde68a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #ea580c !important;
    font-size: 18px !important;
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.12) !important;
}

.nx-inv-title-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.nx-inv-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #d97706 !important;
}

.nx-inv-pulse {
    width: 6.5px !important;
    height: 6.5px !important;
    border-radius: 50% !important;
    background-color: #ef4444 !important;
    display: inline-block !important;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7) !important;
    animation: nxPulse 1.8s infinite cubic-bezier(0.66, 0, 0, 1) !important;
}

@keyframes nxPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.nx-inv-card-title {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.nx-inv-count-badge {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Card Body Layout */
.nx-invoice-due-card .nx-inv-card-body {
    padding: 16px 18px 18px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: #ffffff !important;
}

/* Outstanding Balance Callout */
.nx-inv-balance-card {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    text-align: left !important;
    transition: background 0.2s ease !important;
}

.nx-inv-balance-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.nx-inv-balance-amount {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 6px !important;
}

.nx-inv-balance-hint {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
}

.nx-inv-balance-hint i {
    font-size: 13px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* Action Buttons Stack */
.nx-inv-buttons-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

.nx-btn-payall {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 11px 16px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.32) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nx-btn-payall:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.42) !important;
    text-decoration: none !important;
}

.nx-btn-payall:active {
    transform: translateY(0) !important;
}

.nx-btn-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nx-btn-arrow {
    font-size: 12px !important;
    opacity: 0.8 !important;
    transition: transform 0.2s ease !important;
}

.nx-btn-payall:hover .nx-btn-arrow {
    transform: translateX(4px) !important;
    opacity: 1 !important;
}

.nx-btn-addfunds {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #334155 !important;
    border-radius: 11px !important;
    padding: 9.5px 14px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.nx-btn-addfunds:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Also enhance fallback if original WHMCS HTML is used directly */
.card-sidebar[menuitemname*="Invoice"] .card-body a.btn-success,
.card-sidebar[menuitemname*="invoice"] .card-body a.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    padding: 9px 16px !important;
    color: #ffffff !important;
}

.card-sidebar[menuitemname*="Invoice"] .card-body a.btn-default,
.card-sidebar[menuitemname*="invoice"] .card-body a.btn-default {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding: 9px 16px !important;
}

/* Dark mode support */
[data-bs-theme="dark"] .card.card-sidebar.nx-invoice-due-card,
.dark .card.card-sidebar.nx-invoice-due-card {
    background: #182234 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    border-top: 3.5px solid #f59e0b !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme="dark"] .nx-invoice-due-card .nx-inv-card-header,
.dark .nx-invoice-due-card .nx-inv-card-header {
    background: rgba(30, 41, 59, 0.8) !important;
    border-bottom-color: rgba(245, 158, 11, 0.15) !important;
}

[data-bs-theme="dark"] .nx-invoice-due-card .nx-inv-card-body,
.dark .nx-invoice-due-card .nx-inv-card-body {
    background: #182234 !important;
}

[data-bs-theme="dark"] .nx-inv-card-title,
.dark .nx-inv-card-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-inv-balance-card,
.dark .nx-inv-balance-card {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .nx-inv-balance-amount,
.dark .nx-inv-balance-amount {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .nx-inv-balance-label,
.dark .nx-inv-balance-label {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-inv-balance-hint,
.dark .nx-inv-balance-hint {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-btn-addfunds,
.dark .nx-btn-addfunds {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .nx-btn-addfunds:hover,
.dark .nx-btn-addfunds:hover {
    background: rgba(51, 65, 85, 0.85) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   ENTERPRISE MOBILE RESPONSIVENESS SUITE (servergen template)
   High-End Flexbox-Powered Card Architecture for All Client Portal Tables
   Zero Overlapping, Zero Cut-off Text, 100% Data Preservation & Fully Responsive
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ----------------------------------------------------------------------
       1. DataTables Wrappers & General Reset (Mobile < 768px)
       ---------------------------------------------------------------------- */
    .nx-services-table-wrapper,
    .nx-domains-table-wrapper,
    .nx-invoices-table-wrapper,
    .nx-quotes-table-wrapper,
    .table-container {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    .dataTables_wrapper {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* ----------------------------------------------------------------------
       2. Table to Native Card Transformation
       ---------------------------------------------------------------------- */
    .nx-services-table,
    .nx-domains-table,
    .nx-invoices-table,
    .nx-quotes-table,
    #tableServicesList,
    #tableDomainsList,
    #tableInvoicesList,
    #tableQuotesList,
    #tableTicketsList,
    table.table-list:not(#tableDomainPricing),
    table.dataTable:not(#tableDomainPricing) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* Hide Table Headers */
    .nx-services-table thead,
    .nx-domains-table thead,
    .nx-invoices-table thead,
    .nx-quotes-table thead,
    #tableServicesList thead,
    #tableDomainsList thead,
    #tableInvoicesList thead,
    #tableQuotesList thead,
    #tableTicketsList thead,
    table.table-list:not(#tableDomainPricing) thead {
        display: none !important;
    }

    /* Table Body */
    .nx-services-table tbody,
    .nx-domains-table tbody,
    .nx-invoices-table tbody,
    .nx-quotes-table tbody,
    #tableServicesList tbody,
    #tableDomainsList tbody,
    #tableInvoicesList tbody,
    #tableQuotesList tbody,
    #tableTicketsList tbody,
    table.table-list:not(#tableDomainPricing) tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 4px 0 !important;
        box-sizing: border-box !important;
    }

    /* Table Row as Modern Flexbox Card */
    .nx-services-table tbody tr,
    .nx-domains-table tbody tr,
    .nx-invoices-table tbody tr,
    .nx-quotes-table tbody tr,
    #tableServicesList tbody tr,
    #tableDomainsList tbody tr,
    #tableInvoicesList tbody tr,
    #tableQuotesList tbody tr,
    #tableTicketsList tbody tr,
    #tableEmailsList tbody tr,
    table.table-list:not(#tableDomainPricing) tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        margin-bottom: 14px !important;
        padding: 14px 14px !important;
        box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Reset all inner td cells on mobile so they never paint separate dark/light boxes inside the tr card */
    .nx-services-table tbody tr td,
    .nx-domains-table tbody tr td,
    .nx-invoices-table tbody tr td,
    .nx-quotes-table tbody tr td,
    #tableServicesList tbody tr td,
    #tableDomainsList tbody tr td,
    #tableInvoicesList tbody tr td,
    #tableQuotesList tbody tr td,
    #tableTicketsList tbody tr td,
    #tableEmailsList tbody tr td,
    table.table-list:not(#tableDomainPricing) tbody tr td,
    table.table-list:not(#tableDomainPricing) tbody tr > * {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .nx-services-table tbody tr:hover,
    .nx-domains-table tbody tr:hover,
    .nx-invoices-table tbody tr:hover,
    #tableServicesList tbody tr:hover,
    #tableDomainsList tbody tr:hover,
    #tableInvoicesList tbody tr:hover,
    #tableTicketsList tbody tr:hover {
        border-color: #cbd5e1 !important;
        box-shadow: 0 8px 20px -3px rgba(15, 23, 42, 0.08) !important;
    }

    /* ----------------------------------------------------------------------
       3. Status Badges Styling
       ---------------------------------------------------------------------- */
    .nx-badge-status,
    .label.status,
    .nx-ticket-status-badge {
        font-size: 10.5px !important;
        padding: 3px 8px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ----------------------------------------------------------------------
       4. SERVICES LIST (#tableServicesList) FLEX LAYOUT
       ---------------------------------------------------------------------- */
    /* Lock Icon */
    #tableServicesList tbody tr td.nx-td-ssl {
        order: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        padding: 0 8px 0 0 !important;
        border: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        position: static !important;
    }
    #tableServicesList tbody tr td.nx-td-ssl .nx-ssl-tile {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Product Title & Domain */
    #tableServicesList tbody tr td.nx-td-product {
        order: 2 !important;
        display: block !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 8px 0 0 !important;
        border: none !important;
        margin: 0 !important;
        text-align: left !important;
    }
    #tableServicesList tbody tr td.nx-td-product .nx-table-product-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.35 !important;
        display: block !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    #tableServicesList tbody tr td.nx-td-product .nx-table-domain-link {
        font-size: 12px !important;
        margin-top: 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        color: #4f46e5 !important;
        word-break: break-all !important;
    }

    /* Status Badge (Top-Right) */
    #tableServicesList tbody tr td.nx-td-status {
        order: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: none !important;
        flex-shrink: 0 !important;
        position: static !important;
    }

    /* Pricing / Cycle Row */
    #tableServicesList tbody tr td.nx-td-pricing {
        order: 4 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 10px !important;
        font-size: 12.5px !important;
    }
    #tableServicesList tbody tr td.nx-td-pricing::before {
        content: "Billing / Price" !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        flex: 0 0 auto !important;
    }
    #tableServicesList tbody tr td.nx-td-pricing .nx-table-pricing-cell {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        text-align: right !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        word-break: break-word !important;
    }
    #tableServicesList tbody tr td.nx-td-pricing .nx-table-amount {
        font-weight: 700 !important;
        color: #0f172a !important;
        font-size: 13.5px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Next Due Date Row */
    #tableServicesList tbody tr td.nx-td-duedate {
        order: 5 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 0 !important;
        font-size: 12.5px !important;
    }
    #tableServicesList tbody tr td.nx-td-duedate::before {
        content: "Next Due Date" !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        flex: 0 0 auto !important;
    }
    #tableServicesList tbody tr td.nx-td-duedate .nx-table-date-cell {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        text-align: right !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        font-size: 12.5px !important;
        word-break: break-word !important;
    }
    #tableServicesList tbody tr td.nx-td-duedate .nx-date-badge {
        display: inline-flex !important;
        align-items: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: right !important;
        font-size: 12px !important;
    }

    /* Manage Button */
    #tableServicesList tbody tr td.nx-td-action {
        order: 6 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
        text-align: center !important;
    }
    #tableServicesList tbody tr td.nx-td-action .nx-btn-table-manage {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #334155 !important;
    }

    /* ----------------------------------------------------------------------
       5. DOMAINS LIST (#tableDomainsList) FLEX LAYOUT
       ---------------------------------------------------------------------- */
    /* Checkbox */
    #tableDomainsList tbody tr td.nx-td-checkbox {
        order: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        padding: 0 6px 0 0 !important;
        border: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        position: static !important;
    }
    #tableDomainsList tbody tr td.nx-td-checkbox input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
    }

    /* Lock Icon */
    #tableDomainsList tbody tr td.nx-td-ssl {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        padding: 0 8px 0 0 !important;
        border: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        position: static !important;
    }
    #tableDomainsList tbody tr td.nx-td-ssl .nx-ssl-tile {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Domain Title + Auto-Renew */
    #tableDomainsList tbody tr td.nx-td-domain {
        order: 3 !important;
        display: block !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 8px 0 0 !important;
        border: none !important;
        margin: 0 !important;
        text-align: left !important;
    }
    #tableDomainsList tbody tr td.nx-td-domain .nx-table-domain-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        display: block !important;
        line-height: 1.3 !important;
    }
    #tableDomainsList tbody tr td.nx-td-domain .nx-autorenew-pill {
        margin-top: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 10.5px !important;
        padding: 2px 7px !important;
        border-radius: 6px !important;
    }

    /* Status Badge */
    #tableDomainsList tbody tr td.nx-td-status {
        order: 4 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: none !important;
        flex-shrink: 0 !important;
        position: static !important;
    }

    /* Registration Date */
    #tableDomainsList tbody tr td.nx-td-regdate {
        order: 5 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 10px !important;
        font-size: 12.5px !important;
    }
    #tableDomainsList tbody tr td.nx-td-regdate::before {
        content: "Registration Date" !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        flex: 0 0 auto !important;
    }
    #tableDomainsList tbody tr td.nx-td-regdate .nx-table-date-cell {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        text-align: right !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        font-size: 12.5px !important;
        word-break: break-word !important;
    }
    #tableDomainsList tbody tr td.nx-td-regdate .nx-date-badge {
        display: inline-flex !important;
        align-items: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: right !important;
        font-size: 12px !important;
    }

    /* Next Due Date */
    #tableDomainsList tbody tr td.nx-td-duedate {
        order: 6 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 12.5px !important;
    }
    #tableDomainsList tbody tr td.nx-td-duedate::before {
        content: "Next Due Date" !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        flex: 0 0 auto !important;
    }
    #tableDomainsList tbody tr td.nx-td-duedate .nx-table-date-cell {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        text-align: right !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        font-size: 12.5px !important;
        word-break: break-word !important;
    }
    #tableDomainsList tbody tr td.nx-td-duedate .nx-date-badge {
        display: inline-flex !important;
        align-items: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: right !important;
        font-size: 12px !important;
    }

    /* Manage Button */
    #tableDomainsList tbody tr td.nx-td-action {
        order: 7 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
        text-align: center !important;
    }
    #tableDomainsList tbody tr td.nx-td-action .nx-btn-table-manage {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #334155 !important;
    }

    /* ----------------------------------------------------------------------
       6. INVOICES LIST (#tableInvoicesList) FLEX LAYOUT
       ---------------------------------------------------------------------- */
    #tableInvoicesList tbody tr td.nx-td-invnum {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 8px 0 0 !important;
        border: none !important;
        word-break: break-word !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invnum .nx-table-inv-cell {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invnum .nx-inv-tile {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(99, 102, 241, 0.1) !important;
        color: #4f46e5 !important;
        flex-shrink: 0 !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invnum .nx-inv-number {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        white-space: nowrap !important;
    }

    #tableInvoicesList tbody tr td.nx-td-invstatus {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: none !important;
        flex-shrink: 0 !important;
        position: static !important;
    }

    #tableInvoicesList tbody tr td.nx-td-invtotal {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 10px !important;
        font-size: 12.5px !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invtotal::before {
        content: "Total Amount" !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        flex: 0 0 auto !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invtotal .nx-table-amount-cell {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: right !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: auto !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invtotal .nx-inv-amount {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    #tableInvoicesList tbody tr td.nx-td-invdate {
        order: 4 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 12.5px !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invdate::before {
        content: "Invoice Date" !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        flex: 0 0 auto !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invdate .nx-table-date-cell {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        text-align: right !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        font-size: 12.5px !important;
        word-break: break-word !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invdate .nx-date-badge {
        display: inline-flex !important;
        align-items: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: right !important;
        font-size: 12px !important;
    }

    #tableInvoicesList tbody tr td.nx-td-invdue {
        order: 5 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 12.5px !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invdue::before {
        content: "Due Date" !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        flex: 0 0 auto !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invdue .nx-table-date-cell {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        text-align: right !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        font-size: 12.5px !important;
        word-break: break-word !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invdue .nx-date-badge {
        display: inline-flex !important;
        align-items: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: right !important;
        font-size: 12px !important;
    }

    #tableInvoicesList tbody tr td.nx-td-invaction {
        order: 6 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
    }
    #tableInvoicesList tbody tr td.nx-td-invaction .nx-btn-table-manage {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #334155 !important;
    }

    /* ----------------------------------------------------------------------
       7. SUPPORT TICKETS (#tableTicketsList) & QUOTES (#tableQuotesList)
       ---------------------------------------------------------------------- */
    #tableTicketsList tbody tr,
    #tableTicketsList tbody tr td,
    #tableTicketsList tbody tr.selected > td,
    #tableTicketsList tbody tr:hover > td,
    #tableTicketsList tbody tr.odd > td,
    #tableTicketsList tbody tr.even > td {
        background-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    #tableTicketsList tbody tr {
        background: #ffffff !important;
        background-color: #ffffff !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    [data-bs-theme="dark"] #tableTicketsList tbody tr,
    .dark #tableTicketsList tbody tr {
        background: #0f172a !important;
        background-color: #0f172a !important;
    }

    #tableTicketsList tbody tr td.nx-td-ticketdept,
    #tableTicketsList tbody tr td:nth-child(1) {
        order: 1 !important;
        display: inline-flex !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        flex-shrink: 0 !important;
        background: transparent !important;
    }
    #tableTicketsList tbody tr td.nx-td-ticketstatus,
    #tableTicketsList tbody tr td:nth-child(3) {
        order: 2 !important;
        display: inline-flex !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: none !important;
        flex-shrink: 0 !important;
        background: transparent !important;
    }
    #tableTicketsList tbody tr td.nx-td-ticketsubject,
    #tableTicketsList tbody tr td:nth-child(2) {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 0 6px 0 !important;
        border: none !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        word-break: break-word !important;
        background: transparent !important;
    }
    #tableTicketsList tbody tr td.nx-td-ticketdate,
    #tableTicketsList tbody tr td:nth-child(4) {
        order: 4 !important;
        display: flex !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 9px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 4px !important;
        font-size: 12.5px !important;
        background: transparent !important;
    }
    #tableTicketsList tbody tr td.nx-td-ticketdate::before,
    #tableTicketsList tbody tr td:nth-child(4)::before {
        content: "Last Reply";
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
    }
    #tableTicketsList tbody tr td.nx-td-ticketdate .nx-date-pill,
    #tableTicketsList tbody tr td:nth-child(4) .nx-date-pill {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        text-align: right !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        font-size: 12px !important;
        white-space: normal !important;
    }
    #tableTicketsList tbody tr td.nx-td-ticketaction,
    #tableTicketsList tbody tr td:nth-child(5) {
        order: 5 !important;
        display: block !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
        background: transparent !important;
    }
    #tableTicketsList tbody tr td.nx-td-ticketaction .btn,
    #tableTicketsList tbody tr td:nth-child(5) .btn,
    #tableTicketsList tbody tr td:nth-child(5) .nx-btn-view-msg,
    #tableTicketsList .nx-btn-view-msg {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 38px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #334155 !important;
        text-decoration: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
        transition: all 0.2s ease !important;
    }
    #tableTicketsList tbody tr td.nx-td-ticketaction .btn:hover,
    #tableTicketsList tbody tr td:nth-child(5) .btn:hover,
    #tableTicketsList .nx-btn-view-msg:hover {
        background: #4f46e5 !important;
        border-color: #4f46e5 !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 3px 8px rgba(79, 70, 229, 0.2) !important;
    }

    #tableQuotesList tbody tr td:first-child {
        order: 1 !important;
        display: inline-flex !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }
    #tableQuotesList tbody tr td:nth-child(5) {
        order: 2 !important;
        display: inline-flex !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: none !important;
    }
    #tableQuotesList tbody tr td:nth-child(2) {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        padding: 8px 0 !important;
        border: none !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }
    #tableQuotesList tbody tr td:nth-child(3) {
        order: 4 !important;
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 13px !important;
    }
    #tableQuotesList tbody tr td:nth-child(3)::before {
        content: "Date Created";
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    #tableQuotesList tbody tr td:nth-child(4) {
        order: 5 !important;
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 13px !important;
    }
    #tableQuotesList tbody tr td:nth-child(4)::before {
        content: "Valid Until";
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    #tableQuotesList tbody tr td:nth-child(6) {
        order: 6 !important;
        display: block !important;
        width: 100% !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
    }
    #tableQuotesList tbody tr td:nth-child(6) .btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    /* ----------------------------------------------------------------------
       7.5. EMAILS LIST (#tableEmailsList) FLEX LAYOUT
       ---------------------------------------------------------------------- */
    #tableEmailsList tbody tr td:nth-child(2) {
        order: 1 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 8px 0 !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }
    #tableEmailsList tbody tr td:nth-child(1) {
        order: 2 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 0 !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        font-size: 12px !important;
    }
    #tableEmailsList tbody tr td:nth-child(1)::before {
        content: "Date Sent";
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
    }
    #tableEmailsList tbody tr td:nth-child(3) {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 0 0 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
    }
    #tableEmailsList tbody tr td:nth-child(3) .btn,
    #tableEmailsList tbody tr td:nth-child(3) .nx-btn-view-msg {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
    }

    /* ----------------------------------------------------------------------
       8. Toolbar & Search Controls
       ---------------------------------------------------------------------- */
    .nx-domains-card-header,
    .nx-invoices-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .nx-domains-card-header > div,
    .nx-invoices-card-header > div {
        width: 100% !important;
    }
    .nx-bulk-btn-group {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .nx-bulk-btn-group .btn,
    .nx-bulk-btn-group .nx-btn-toolbar,
    .nx-bulk-btn-group .dropdown,
    .nx-bulk-btn-group .dropdown-toggle {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        padding: 0 10px !important;
    }

    .dataTables_wrapper .dataTables_filter {
        width: 100% !important;
        float: none !important;
        padding: 12px 14px 6px 14px !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .dataTables_wrapper .dataTables_filter label {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        height: 42px !important;
        border-radius: 12px !important;
        padding: 8px 16px !important;
        font-size: 13.5px !important;
        border: 1.5px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        padding: 8px 14px !important;
        margin: 0 auto !important;
        font-size: 12.5px !important;
    }
    .dataTables_wrapper .dataTables_paginate ul.pagination {
        justify-content: center !important;
        gap: 4px !important;
    }

    /* ----------------------------------------------------------------------
       9. Floating Theme Switcher (.tt-color-switch) Mobile Clearance
       ---------------------------------------------------------------------- */
    .tt-color-switch {
        width: 42px !important;
        height: 42px !important;
        line-height: 42px !important;
        bottom: 18px !important;
        right: 18px !important;
        box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.25) !important;
    }

    /* ----------------------------------------------------------------------
       10. Client Dashboard Panels (clientareahome.tpl)
       ---------------------------------------------------------------------- */
    .client-home-cards .card-header {
        padding: 14px 16px !important;
        flex-wrap: nowrap !important;
    }
    .client-home-cards .card-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
    }
    .client-home-cards .card-header .btn,
    .client-home-cards .nx-panel-btn {
        font-size: 11.5px !important;
        padding: 5px 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .client-home-cards .list-group .list-group-item {
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
    .client-home-cards .list-group-item .btn-group,
    .client-home-cards .list-group-item a.btn {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }
    .client-home-cards .list-group-item a.btn:not(.dropdown-toggle) {
        padding: 7px 11px !important;
        font-size: 12px !important;
    }

    /* ----------------------------------------------------------------------
       11. Billing KPI Row (.nx-invoices-kpi-row)
       ---------------------------------------------------------------------- */
    .nx-invoices-kpi-row .nx-domain-kpi-card .card-body {
        padding: 12px 10px !important;
        gap: 8px !important;
    }
    .nx-invoices-kpi-row .nx-kpi-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }
    .nx-invoices-kpi-row .nx-kpi-label {
        font-size: 10.5px !important;
    }
    .nx-invoices-kpi-row .nx-kpi-val {
        font-size: 16px !important;
    }
    .nx-invoices-kpi-row .nx-kpi-sub {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   DARK MODE ADJUSTMENTS FOR MOBILE RESPONSIVE CARDS
   ========================================================================== */
@media (max-width: 767.98px) {
    [data-bs-theme="dark"] .nx-services-table tbody tr,
    [data-bs-theme="dark"] .nx-domains-table tbody tr,
    [data-bs-theme="dark"] .nx-invoices-table tbody tr,
    [data-bs-theme="dark"] .nx-quotes-table tbody tr,
    [data-bs-theme="dark"] #tableServicesList tbody tr,
    [data-bs-theme="dark"] #tableDomainsList tbody tr,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr,
    [data-bs-theme="dark"] #tableQuotesList tbody tr,
    [data-bs-theme="dark"] #tableTicketsList tbody tr,
    [data-bs-theme="dark"] #tableEmailsList tbody tr,
    [data-bs-theme="dark"] table.table-list:not(#tableDomainPricing) tbody tr,
    [data-bs-theme="dark"] table.table-list tbody tr,
    .dark .nx-services-table tbody tr,
    .dark .nx-domains-table tbody tr,
    .dark .nx-invoices-table tbody tr,
    .dark .nx-quotes-table tbody tr,
    .dark #tableServicesList tbody tr,
    .dark #tableDomainsList tbody tr,
    .dark #tableInvoicesList tbody tr,
    .dark #tableQuotesList tbody tr,
    .dark #tableTicketsList tbody tr,
    .dark #tableEmailsList tbody tr,
    .dark table.table-list:not(#tableDomainPricing) tbody tr,
    .dark table.table-list tbody tr {
        background: #151f32 !important;
        background-color: #151f32 !important;
        border-color: rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-product .nx-table-product-title,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-domain .nx-table-domain-title,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invnum .nx-inv-number,
    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-pricing .nx-table-amount,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invtotal .nx-inv-amount,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td:nth-child(2) .nx-ticket-subject-link,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td:nth-child(2) .nx-ticket-subject,
    [data-bs-theme="dark"] #tableEmailsList tbody tr td .nx-mail-title,
    [data-bs-theme="dark"] #tableQuotesList tbody tr td,
    .dark #tableServicesList tbody tr td.nx-td-product .nx-table-product-title,
    .dark #tableDomainsList tbody tr td.nx-td-domain .nx-table-domain-title,
    .dark #tableInvoicesList tbody tr td.nx-td-invnum .nx-inv-number,
    .dark #tableServicesList tbody tr td.nx-td-pricing .nx-table-amount,
    .dark #tableInvoicesList tbody tr td.nx-td-invtotal .nx-inv-amount,
    .dark #tableTicketsList tbody tr td:nth-child(2) .nx-ticket-subject-link,
    .dark #tableTicketsList tbody tr td:nth-child(2) .nx-ticket-subject,
    .dark #tableEmailsList tbody tr td .nx-mail-title,
    .dark #tableQuotesList tbody tr td {
        color: #f8fafc !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-product .nx-table-domain-link,
    .dark #tableServicesList tbody tr td.nx-td-product .nx-table-domain-link {
        color: #818cf8 !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-pricing,
    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-duedate,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-regdate,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-duedate,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invtotal,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdate,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdue,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td:nth-child(4),
    [data-bs-theme="dark"] #tableQuotesList tbody tr td:nth-child(3),
    [data-bs-theme="dark"] #tableQuotesList tbody tr td:nth-child(4),
    [data-bs-theme="dark"] #tableEmailsList tbody tr td:nth-child(1),
    .dark #tableServicesList tbody tr td.nx-td-pricing,
    .dark #tableServicesList tbody tr td.nx-td-duedate,
    .dark #tableDomainsList tbody tr td.nx-td-regdate,
    .dark #tableDomainsList tbody tr td.nx-td-duedate,
    .dark #tableInvoicesList tbody tr td.nx-td-invtotal,
    .dark #tableInvoicesList tbody tr td.nx-td-invdate,
    .dark #tableInvoicesList tbody tr td.nx-td-invdue,
    .dark #tableTicketsList tbody tr td:nth-child(4),
    .dark #tableQuotesList tbody tr td:nth-child(3),
    .dark #tableQuotesList tbody tr td:nth-child(4),
    .dark #tableEmailsList tbody tr td:nth-child(1) {
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-pricing::before,
    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-duedate::before,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-regdate::before,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-duedate::before,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdate::before,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdue::before,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invtotal::before,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td:nth-child(4)::before,
    [data-bs-theme="dark"] #tableQuotesList tbody tr td:nth-child(3)::before,
    [data-bs-theme="dark"] #tableQuotesList tbody tr td:nth-child(4)::before,
    [data-bs-theme="dark"] #tableEmailsList tbody tr td:nth-child(1)::before,
    .dark #tableServicesList tbody tr td.nx-td-pricing::before,
    .dark #tableServicesList tbody tr td.nx-td-duedate::before,
    .dark #tableDomainsList tbody tr td.nx-td-regdate::before,
    .dark #tableDomainsList tbody tr td.nx-td-duedate::before,
    .dark #tableInvoicesList tbody tr td.nx-td-invdate::before,
    .dark #tableInvoicesList tbody tr td.nx-td-invdue::before,
    .dark #tableInvoicesList tbody tr td.nx-td-invtotal::before,
    .dark #tableTicketsList tbody tr td:nth-child(4)::before,
    .dark #tableQuotesList tbody tr td:nth-child(3)::before,
    .dark #tableQuotesList tbody tr td:nth-child(4)::before,
    .dark #tableEmailsList tbody tr td:nth-child(1)::before {
        color: #94a3b8 !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-action .nx-btn-table-manage,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-action .nx-btn-table-manage,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invaction .nx-btn-table-manage,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td:nth-child(5) .btn,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td:nth-child(5) .nx-btn-view-msg,
    [data-bs-theme="dark"] #tableEmailsList tbody tr td:nth-child(3) .btn,
    [data-bs-theme="dark"] #tableEmailsList tbody tr td:nth-child(3) .nx-btn-view-msg,
    [data-bs-theme="dark"] #tableQuotesList tbody tr td:nth-child(6) .btn,
    .dark #tableServicesList tbody tr td.nx-td-action .nx-btn-table-manage,
    .dark #tableDomainsList tbody tr td.nx-td-action .nx-btn-table-manage,
    .dark #tableInvoicesList tbody tr td.nx-td-invaction .nx-btn-table-manage,
    .dark #tableTicketsList tbody tr td:nth-child(5) .btn,
    .dark #tableTicketsList tbody tr td:nth-child(5) .nx-btn-view-msg,
    .dark #tableEmailsList tbody tr td:nth-child(3) .btn,
    .dark #tableEmailsList tbody tr td:nth-child(3) .nx-btn-view-msg,
    .dark #tableQuotesList tbody tr td:nth-child(6) .btn {
        background: #1e293b !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #e2e8f0 !important;
    }

    [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
    .dark .dataTables_wrapper .dataTables_filter input {
        background: #1e293b !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #f8fafc !important;
    }
}


/* ==========================================================================
   CLIENT AREA DASHBOARD (clientarea.php / clientareahome.tpl) RESPONSIVENESS
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Page container & Section spacing */
    section#main-body {
        padding: 16px 0 60px 0 !important;
    }
    section#main-body > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 1. KPI Metric Tiles (.nx-dashboard-tiles) */
    .nx-dashboard-tiles {
        margin-bottom: 20px !important;
    }
    .nx-dashboard-tiles .row {
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 10px !important;
    }
    .nx-dash-tile {
        padding: 14px 12px !important;
        border-radius: 14px !important;
        min-height: auto !important;
    }
    .nx-dash-tile-body {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    .nx-dash-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }
    .nx-dash-count {
        font-size: 22px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        margin: 2px 0 !important;
    }
    .nx-dash-sub {
        font-size: 10.5px !important;
        display: flex !important;
        align-items: center !important;
    }
    .nx-dash-icon-box {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* 2. Client Home Panels (.client-home-cards) */
    .client-home-cards .card {
        border-radius: 16px !important;
        margin-bottom: 16px !important;
        border: 1.5px solid #e2e8f0 !important;
    }
    .client-home-cards .card-header {
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    .client-home-cards .card-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }
    .client-home-cards .card-header-left i {
        font-size: 16px !important;
        flex-shrink: 0 !important;
    }
    .client-home-cards .card-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }
    .client-home-cards .card-header-right {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    .client-home-cards .nx-panel-btn,
    .client-home-cards .card-header .btn {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        padding: 5px 12px !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* 3. Active Products List Items in Dashboard */
    .client-home-cards .list-group {
        border-radius: 0 !important;
    }
    .client-home-cards .list-group .list-group-item {
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .client-home-cards .list-group-item strong {
        font-size: 14px !important;
        font-weight: 700 !important;
        display: block !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    .client-home-cards .list-group-item .text-domain {
        font-size: 12px !important;
        word-break: break-all !important;
        margin-top: 3px !important;
    }
    .div-service-status,
    .client-home-cards .div-service-status {
        width: auto !important;
        min-width: fit-content !important;
        max-width: none !important;
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .client-home-cards .list-group-item .badge,
    .client-home-cards .list-group-item .label,
    .client-home-cards .div-service-status .label,
    .client-home-cards .div-service-status .label:not(.label-placeholder),
    .div-service-status .label,
    .div-service-status .label:not(.label-placeholder),
    .div-service-status .nx-badge-status {
        font-size: 11px !important;
        padding: 3px 9px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: fit-content !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }
    .div-service-status .label span:not(.nx-status-dot-sm) {
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        width: auto !important;
        min-width: fit-content !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    /* Action buttons on the right of list items */
    .client-home-cards .list-group-item .btn-group,
    .client-home-cards .list-group-item a.btn {
        flex-shrink: 0 !important;
        margin-left: 6px !important;
    }
    .client-home-cards .list-group-item a.btn:not(.dropdown-toggle) {
        padding: 6px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        min-width: 34px !important;
        height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .client-home-cards .btn-group > .btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        height: 34px !important;
    }

    /* 4. Domain Search Bar on Dashboard */
    .nx-domain-card-body {
        padding: 16px !important;
    }
    .nx-domain-search-box {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
    }
    .nx-domain-input {
        width: 100% !important;
        height: 40px !important;
        font-size: 13.5px !important;
        padding: 0 10px !important;
    }
    .nx-domain-btn-group {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .nx-btn-domain-register,
    .nx-btn-domain-transfer {
        flex: 1 1 50% !important;
        height: 38px !important;
        justify-content: center !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
    }
    .nx-domain-quick-tags {
        margin-top: 10px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .nx-tag-pill {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* 5. Floating theme toggle position clearance (Zero body padding to prevent white gap below footer) */
    body.tt-body-wrapper,
    body {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .tt-color-switch {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        bottom: 16px !important;
        right: 16px !important;
        z-index: 1050 !important;
    }
}


/* ==========================================================================
   COMPREHENSIVE RESPONSIVENESS & POLISH FIXES (TABLETS, MOBILES & ALL VIEWPORTS)
   ========================================================================== */

/* 1. SOLID BOXED HEADER (NOT FULL WIDTH - CENTERED MODERN CONTAINER) */
.tt-header,
header#header.header.tt-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-bs-theme="dark"] .tt-header,
.dark .tt-header,
[data-bs-theme="dark"] header#header.header.tt-header,
.dark header#header.header.tt-header {
    background: #0f172a !important;
    background-color: #0f172a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Header container: Follow standard body container width and alignment with guaranteed edge breathing room */
.tt-header .navbar > .container,
.tt-header .container,
header.header .navbar > .container,
header.header .container {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.tt-toolbar-wrap {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    overflow: visible !important;
}

.tt-toolbar-wrap .navbar-nav.toolbar {
    overflow: visible !important;
}

.tt-toolbar-wrap .cart-btn,
.tt-header .cart-btn {
    margin-right: 6px !important;
    overflow: visible !important;
}

.tt-toolbar-wrap li:last-child {
    padding-right: 6px !important;
    margin-right: 0 !important;
}

/* Laptops, scaled displays, & intermediate viewports (992px to 1399.98px): Compact navigation & toolbar to prevent ANY clipping */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .tt-header .navbar-brand {
        flex-shrink: 0 !important;
        margin-right: 8px !important;
    }
    .tt-header .navbar-brand .logo-img {
        max-height: 32px !important;
        max-width: 135px !important;
    }
    .tt-header .tt-main-header ul#nav {
        gap: 2px !important;
    }
    .tt-header .tt-main-header ul#nav > li > a {
        padding: 6px 8px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
    }
    .tt-toolbar-wrap {
        gap: 4px !important;
    }
    .tt-toolbar-wrap .header-action-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
    .tt-header .nx-user-pill-btn {
        padding: 4px 8px !important;
        font-size: 12px !important;
        gap: 5px !important;
    }
    .tt-header .nx-user-pill-avatar,
    .tt-toolbar-wrap .user-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
}

/* Narrower screens (992px to 1199.98px): Avatar-only user pill */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .tt-header .tt-main-header ul#nav > li > a {
        padding: 5px 6px !important;
        font-size: 11.5px !important;
    }
    .tt-header .nx-account-nav-item .nx-user-pill-label,
    .tt-header .nx-account-nav-item .nx-user-pill-caret,
    .tt-header .tt-secondary-list .nx-user-pill-label,
    .tt-header .tt-secondary-list .nx-user-pill-caret,
    .tt-header .tt-secondary-list .nav-link .user-name {
        display: none !important;
    }
    .tt-header .nx-user-pill-btn {
        padding: 2px !important;
        border-radius: 9999px !important;
    }
}

/* Mobile Header Streamlining (< 992px) */
@media (max-width: 991.98px) {
    .tt-header,
    header#header.header.tt-header {
        background: #ffffff !important;
        background-color: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
    }
    [data-bs-theme="dark"] .tt-header,
    .dark .tt-header,
    [data-bs-theme="dark"] header#header.header.tt-header,
    .dark header#header.header.tt-header {
        background: #0f172a !important;
        background-color: #0f172a !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
    }
    .tt-header .navbar > .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        gap: 6px !important;
    }
    .tt-header .navbar-brand .logo-img {
        max-height: 28px !important;
        max-width: 120px !important;
    }
    .tt-toolbar-wrap .toolbar,
    .tt-toolbar-wrap.tt-secondary-list {
        gap: 4px !important;
    }
    .tt-header .header-action-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
    .tt-header .nx-account-nav-item .nx-user-pill-label,
    .tt-header .nx-account-nav-item .nx-user-pill-caret,
    .tt-header .tt-secondary-list .nx-user-pill-label,
    .tt-header .tt-secondary-list .nx-user-pill-caret,
    .tt-header .tt-secondary-list .nav-link .user-name,
    .tt-header .tt-secondary-list .nav-link span:not(.user-avatar):not(.nx-user-pill-avatar):not(.tt-circle),
    .tt-header .tt-secondary-list .caret {
        display: none !important;
    }
    .tt-header .nx-user-pill-btn {
        padding: 2px 2px !important;
        border-radius: 9999px !important;
        background: transparent !important;
        border: none !important;
    }
    .tt-header .nx-user-pill-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
}

/* 2. TABLE CONTAINERS & HORIZONTAL SCROLLING ON TABLET (768px - 991.98px) */
.table-container,
.nx-invoices-table-wrapper,
.nx-domains-table-wrapper,
.nx-services-table-wrapper,
.nx-quotes-table-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.table-container::-webkit-scrollbar,
.nx-invoices-table-wrapper::-webkit-scrollbar,
.nx-domains-table-wrapper::-webkit-scrollbar,
.nx-services-table-wrapper::-webkit-scrollbar {
    height: 6px !important;
}
.table-container::-webkit-scrollbar-track,
.nx-invoices-table-wrapper::-webkit-scrollbar-track,
.nx-domains-table-wrapper::-webkit-scrollbar-track,
.nx-services-table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 9999px !important;
}
.table-container::-webkit-scrollbar-thumb,
.nx-invoices-table-wrapper::-webkit-scrollbar-thumb,
.nx-domains-table-wrapper::-webkit-scrollbar-thumb,
.nx-services-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 9999px !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .table-container,
    .nx-invoices-table-wrapper,
    .nx-domains-table-wrapper,
    .nx-services-table-wrapper,
    .nx-quotes-table-wrapper {
        padding: 14px 16px !important;
    }

    #tableInvoicesList,
    #tableDomainsList,
    #tableServicesList,
    #tableQuotesList,
    #tableTicketsList,
    table.table-list {
        width: 100% !important;
        table-layout: auto !important;
        min-width: 620px !important;
    }

    #tableInvoicesList th, #tableInvoicesList td,
    #tableDomainsList th, #tableDomainsList td,
    #tableServicesList th, #tableServicesList td,
    #tableQuotesList th, #tableQuotesList td,
    #tableTicketsList th, #tableTicketsList td {
        padding: 9px 8px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
    }

    .nx-btn-table-manage {
        padding: 4px 8px !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
    }
}

/* 3. BULLETPROOF CARD TRANSFORMATION ON MOBILE (< 768px) */
@media (max-width: 767.98px) {
    /* Generous gutter inside the outer box so inner cards NEVER touch outer container borders */
    .table-container,
    .nx-invoices-table-wrapper,
    .nx-domains-table-wrapper,
    .nx-services-table-wrapper,
    .nx-quotes-table-wrapper,
    .nx-tickets-table-wrapper {
        padding: 14px 14px 18px 14px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fallback: if .dataTables_wrapper itself is the bordered card (not nested inside an executive card) */
    .dataTables_wrapper:not(#tableDomainsList_wrapper):not(#tableInvoicesList_wrapper):not(#tableQuotesList_wrapper):not(#tableTicketsList_wrapper):not(#tableServicesList_wrapper) {
        padding: 14px 14px 18px 14px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 18px !important;
    }

    [data-bs-theme="dark"] .dataTables_wrapper:not(#tableDomainsList_wrapper):not(#tableInvoicesList_wrapper):not(#tableQuotesList_wrapper):not(#tableTicketsList_wrapper):not(#tableServicesList_wrapper),
    .dark .dataTables_wrapper:not(#tableDomainsList_wrapper):not(#tableInvoicesList_wrapper):not(#tableQuotesList_wrapper):not(#tableTicketsList_wrapper):not(#tableServicesList_wrapper) {
        background: #0f172a !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    #tableDomainsList_wrapper,
    #tableInvoicesList_wrapper,
    #tableQuotesList_wrapper,
    #tableTicketsList_wrapper,
    #tableServicesList_wrapper,
    .nx-domains-main-card .dataTables_wrapper,
    .nx-invoices-main-card .dataTables_wrapper,
    .nx-quotes-main-card .dataTables_wrapper,
    .nx-tickets-main-card .dataTables_wrapper,
    .nx-services-main-card .dataTables_wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .dataTables_wrapper .dataTables_filter {
        width: 100% !important;
        float: none !important;
        padding: 0 0 12px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .dataTables_wrapper .dataTables_filter label {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .dataTables_wrapper .dataTables_filter input[type="search"],
    .dataTables_wrapper .dataTables_filter input.form-control,
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        border-radius: 12px !important;
        padding: 8px 16px 8px 38px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 13.5px !important;
        display: block !important;
    }

    .dataTables_wrapper .dataTables_info {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 0 12px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #64748b !important;
    }

    .nx-services-table,
    .nx-domains-table,
    .nx-invoices-table,
    .nx-quotes-table,
    #tableServicesList,
    #tableDomainsList,
    #tableInvoicesList,
    #tableQuotesList,
    #tableTicketsList,
    #tableEmailsList,
    table.table-list,
    table.dataTable {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border: none !important;
        background: transparent !important;
    }

    .nx-services-table thead,
    .nx-domains-table thead,
    .nx-invoices-table thead,
    .nx-quotes-table thead,
    #tableServicesList thead,
    #tableDomainsList thead,
    #tableInvoicesList thead,
    #tableQuotesList thead,
    #tableTicketsList thead,
    table.table-list thead {
        display: none !important;
    }

    .nx-services-table tbody,
    .nx-domains-table tbody,
    .nx-invoices-table tbody,
    .nx-quotes-table tbody,
    #tableServicesList tbody,
    #tableDomainsList tbody,
    #tableInvoicesList tbody,
    #tableQuotesList tbody,
    #tableTicketsList tbody,
    #tableEmailsList tbody,
    table.table-list tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Distinct cards with clear outer border separation and soft elevation */
    .nx-services-table tbody tr,
    .nx-domains-table tbody tr,
    .nx-invoices-table tbody tr,
    .nx-quotes-table tbody tr,
    #tableServicesList tbody tr,
    #tableDomainsList tbody tr,
    #tableInvoicesList tbody tr,
    #tableQuotesList tbody tr,
    #tableTicketsList tbody tr,
    #tableEmailsList tbody tr,
    table.table-list tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        margin: 0 0 12px 0 !important;
        padding: 14px 14px !important;
        box-shadow: 0 3px 12px -2px rgba(15, 23, 42, 0.06) !important;
        position: relative !important;
    }

    [data-bs-theme="dark"] .nx-services-table tbody tr,
    [data-bs-theme="dark"] .nx-domains-table tbody tr,
    [data-bs-theme="dark"] .nx-invoices-table tbody tr,
    [data-bs-theme="dark"] .nx-quotes-table tbody tr,
    [data-bs-theme="dark"] #tableServicesList tbody tr,
    [data-bs-theme="dark"] #tableDomainsList tbody tr,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr,
    [data-bs-theme="dark"] #tableQuotesList tbody tr,
    [data-bs-theme="dark"] #tableTicketsList tbody tr,
    [data-bs-theme="dark"] #tableEmailsList tbody tr,
    [data-bs-theme="dark"] table.table-list:not(#tableDomainPricing) tbody tr,
    [data-bs-theme="dark"] table.table-list tbody tr,
    .dark .nx-services-table tbody tr,
    .dark .nx-domains-table tbody tr,
    .dark .nx-invoices-table tbody tr,
    .dark .nx-quotes-table tbody tr,
    .dark #tableServicesList tbody tr,
    .dark #tableDomainsList tbody tr,
    .dark #tableInvoicesList tbody tr,
    .dark #tableQuotesList tbody tr,
    .dark #tableTicketsList tbody tr,
    .dark #tableEmailsList tbody tr,
    .dark table.table-list:not(#tableDomainPricing) tbody tr,
    .dark table.table-list tbody tr {
        background: #151f32 !important;
        background-color: #151f32 !important;
        border-color: rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.35) !important;
    }

    /* CARD HEADER ROW: Left = Icon + Title, Right = Status Badge */
    #tableServicesList tbody tr td.nx-td-ssl,
    #tableDomainsList tbody tr td.nx-td-checkbox,
    #tableDomainsList tbody tr td.nx-td-ssl {
        order: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        padding: 0 6px 0 0 !important;
        border: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    #tableServicesList tbody tr td.nx-td-product,
    #tableDomainsList tbody tr td.nx-td-domain,
    #tableInvoicesList tbody tr td.nx-td-invnum,
    #tableQuotesList tbody tr td.nx-td-quotenum {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 0 8px 0 0 !important;
        border: none !important;
        margin: 0 !important;
    }

    #tableServicesList tbody tr td.nx-td-status,
    #tableDomainsList tbody tr td.nx-td-status,
    #tableInvoicesList tbody tr td.nx-td-invstatus,
    #tableQuotesList tbody tr td.nx-td-quotestatus {
        order: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: none !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* CARD DETAIL ROWS: Full-width clear rows preventing ANY truncation */
    #tableServicesList tbody tr td.nx-td-pricing,
    #tableServicesList tbody tr td.nx-td-duedate,
    #tableDomainsList tbody tr td.nx-td-regdate,
    #tableDomainsList tbody tr td.nx-td-duedate,
    #tableInvoicesList tbody tr td.nx-td-invtotal,
    #tableInvoicesList tbody tr td.nx-td-invdate,
    #tableInvoicesList tbody tr td.nx-td-invdue,
    #tableQuotesList tbody tr td.nx-td-quotedate,
    #tableQuotesList tbody tr td.nx-td-quotedue,
    #tableQuotesList tbody tr td.nx-td-quotetotal {
        width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        padding: 9px 0 !important;
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-pricing,
    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-duedate,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-regdate,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-duedate,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invtotal,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdate,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdue,
    .dark #tableServicesList tbody tr td.nx-td-pricing,
    .dark #tableServicesList tbody tr td.nx-td-duedate,
    .dark #tableDomainsList tbody tr td.nx-td-regdate,
    .dark #tableDomainsList tbody tr td.nx-td-duedate,
    .dark #tableInvoicesList tbody tr td.nx-td-invtotal,
    .dark #tableInvoicesList tbody tr td.nx-td-invdate,
    .dark #tableInvoicesList tbody tr td.nx-td-invdue {
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* CARD ACTION BUTTON ROW */
    #tableServicesList tbody tr td.nx-td-action,
    #tableDomainsList tbody tr td.nx-td-action,
    #tableInvoicesList tbody tr td.nx-td-invaction,
    #tableQuotesList tbody tr td.nx-td-quoteaction,
    #tableTicketsList tbody tr td.nx-td-ticketaction {
        width: 100% !important;
        flex: 0 0 100% !important;
        order: 10 !important;
        display: block !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
        box-sizing: border-box !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-action,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-action,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invaction,
    .dark #tableServicesList tbody tr td.nx-td-action,
    .dark #tableDomainsList tbody tr td.nx-td-action,
    .dark #tableInvoicesList tbody tr td.nx-td-invaction {
        border-top-color: rgba(255, 255, 255, 0.06) !important;
    }

    .nx-btn-table-manage {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 9px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    [data-bs-theme="dark"] .nx-btn-table-manage,
    .dark .nx-btn-table-manage {
        background: #1e293b !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #e2e8f0 !important;
    }
}

/* SMART STACKED LAYOUT ON PHONES (< 520px): Guaranteed NEVER Truncate Values */
@media (max-width: 520px) {
    #tableServicesList tbody tr td.nx-td-pricing,
    #tableServicesList tbody tr td.nx-td-duedate,
    #tableDomainsList tbody tr td.nx-td-regdate,
    #tableDomainsList tbody tr td.nx-td-duedate,
    #tableInvoicesList tbody tr td.nx-td-invtotal,
    #tableInvoicesList tbody tr td.nx-td-invdate,
    #tableInvoicesList tbody tr td.nx-td-invdue,
    #tableQuotesList tbody tr td.nx-td-quotedate,
    #tableQuotesList tbody tr td.nx-td-quotedue,
    #tableQuotesList tbody tr td.nx-td-quotetotal {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        padding: 7px 0 !important;
    }

    #tableServicesList tbody tr td.nx-td-pricing::before,
    #tableServicesList tbody tr td.nx-td-duedate::before,
    #tableDomainsList tbody tr td.nx-td-regdate::before,
    #tableDomainsList tbody tr td.nx-td-duedate::before,
    #tableInvoicesList tbody tr td.nx-td-invtotal::before,
    #tableInvoicesList tbody tr td.nx-td-invdate::before,
    #tableInvoicesList tbody tr td.nx-td-invdue::before,
    #tableQuotesList tbody tr td.nx-td-quotedate::before,
    #tableQuotesList tbody tr td.nx-td-quotedue::before,
    #tableQuotesList tbody tr td.nx-td-quotetotal::before {
        width: 100% !important;
        text-align: left !important;
        font-size: 10.5px !important;
    }

    #tableServicesList tbody tr td.nx-td-pricing .nx-table-pricing-cell,
    #tableServicesList tbody tr td.nx-td-duedate .nx-table-date-cell,
    #tableDomainsList tbody tr td.nx-td-regdate .nx-table-date-cell,
    #tableDomainsList tbody tr td.nx-td-duedate .nx-table-date-cell,
    #tableInvoicesList tbody tr td.nx-td-invtotal .nx-table-amount-cell,
    #tableInvoicesList tbody tr td.nx-td-invdate .nx-table-date-cell,
    #tableInvoicesList tbody tr td.nx-td-invdue .nx-table-date-cell,
    #tableQuotesList tbody tr td.nx-td-quotedate .nx-table-date-cell,
    #tableQuotesList tbody tr td.nx-td-quotedue .nx-table-date-cell,
    #tableQuotesList tbody tr td.nx-td-quotetotal .nx-table-amount-cell {
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    #tableInvoicesList tbody tr td.nx-td-invtotal .nx-inv-amount,
    #tableInvoicesList tbody tr td.nx-td-invdate .nx-date-badge,
    #tableInvoicesList tbody tr td.nx-td-invdue .nx-date-badge,
    #tableDomainsList tbody tr td.nx-td-regdate .nx-date-badge,
    #tableDomainsList tbody tr td.nx-td-duedate .nx-date-badge,
    #tableServicesList tbody tr td.nx-td-duedate .nx-date-badge {
        text-align: left !important;
        justify-content: flex-start !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 13px !important;
    }

    /* Mobile Pagination & Length Selector: Clean Inset Spacing from Outer Card Border */
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 12px 0 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .dataTables_wrapper .dataTables_paginate ul.pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 4px 0 4px 0 !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }
    .dataTables_wrapper .dataTables_length label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
        font-size: 13px !important;
    }
}

/* 4. PREMIUM ATTRACTIVE INVOICES DUE BUTTONS & CARD STYLING */
.card-sidebar .card-body a[href*="masspay"],
.card-sidebar .card-body a[href*="addfunds"],
.card-sidebar .card-body .btn-success[href*="masspay"],
.card-sidebar .card-body .btn-default[href*="addfunds"],
.nx-invoice-due-card .nx-btn-payall,
.nx-invoice-due-card .nx-btn-addfunds {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Pay All Primary Action Button */
.card-sidebar .card-body a[href*="masspay"],
.card-sidebar .card-body .btn-success[href*="masspay"],
.nx-invoice-due-card .nx-btn-payall {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 18px !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 14px -2px rgba(79, 70, 229, 0.4) !important;
}

.card-sidebar .card-body a[href*="masspay"]:hover,
.card-sidebar .card-body .btn-success[href*="masspay"]:hover,
.nx-invoice-due-card .nx-btn-payall:hover {
    background: linear-gradient(135deg, #4338ca 0%, #312e81 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px -2px rgba(79, 70, 229, 0.55) !important;
    transform: translateY(-1.5px) !important;
}

/* Add Funds Secondary Action Button */
.card-sidebar .card-body a[href*="addfunds"],
.card-sidebar .card-body .btn-default[href*="addfunds"],
.nx-invoice-due-card .nx-btn-addfunds {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 11px 18px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.card-sidebar .card-body a[href*="addfunds"]:hover,
.card-sidebar .card-body .btn-default[href*="addfunds"]:hover,
.nx-invoice-due-card .nx-btn-addfunds:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Dark mode styling for sidebar action buttons */
[data-bs-theme="dark"] .card-sidebar .card-body a[href*="addfunds"],
.dark .card-sidebar .card-body a[href*="addfunds"],
[data-bs-theme="dark"] .card-sidebar .card-body .btn-default[href*="addfunds"],
.dark .card-sidebar .card-body .btn-default[href*="addfunds"],
[data-bs-theme="dark"] .nx-invoice-due-card .nx-btn-addfunds,
.dark .nx-invoice-due-card .nx-btn-addfunds {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .card-sidebar .card-body a[href*="addfunds"]:hover,
.dark .card-sidebar .card-body a[href*="addfunds"]:hover,
[data-bs-theme="dark"] .nx-invoice-due-card .nx-btn-addfunds:hover,
.dark .nx-invoice-due-card .nx-btn-addfunds:hover {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* 5. DASHBOARD ACTIVE SERVICES BADGE IMMUNIZATION */
.div-service-status,
.div-service-item .div-service-status,
.client-home-cards .div-service-status {
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.div-service-status .label,
.div-service-status .nx-badge-status,
.div-service-status .nx-badge-status-pill,
.client-home-cards .div-service-status .label,
.client-home-cards .div-service-status .nx-badge-status {
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

.div-service-status .nx-status-dot-sm {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    margin: 0 5px 0 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.div-service-status .nx-badge-status-text,
.div-service-status > span > span:not(.nx-status-dot-sm) {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: fit-content !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    letter-spacing: 0.03em !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    display: inline !important;
}

/* 6. KPI STAT CARDS ON INVOICES/DOMAINS/QUOTES: NO HORIZONTAL SCROLLBARS */
.primary-content .card-body,
.nx-domain-kpi-card .card-body,
.nx-invoices-kpi-row .card-body,
.nx-quotes-kpi-row .card-body {
    overflow: visible !important;
    overflow-x: visible !important;
}

.nx-invoices-kpi-row .nx-domain-kpi-card .card-body {
    padding: 12px 10px !important;
}

.nx-domain-kpi-card .nx-kpi-label,
.nx-invoices-kpi-row .nx-kpi-label,
.nx-quotes-kpi-row .nx-kpi-label {
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: 0.04em !important;
}

.nx-domain-kpi-card .nx-kpi-sub {
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

/* 7. ACTIVE SERVICES DETAILS BUTTON ICON & ACTION BUTTON IMMUNIZATION */
.div-service-buttons .btn-view-details i,
.div-service-buttons .nx-btn-details i,
.client-home-cards .div-service-buttons .btn-view-details i,
.client-home-cards .div-service-buttons .nx-btn-details i {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}
.div-service-buttons .btn-view-details,
.div-service-buttons .nx-btn-details,
.client-home-cards .div-service-buttons .btn-view-details,
.client-home-cards .div-service-buttons .nx-btn-details {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
.div-service-buttons .btn-group,
.div-service-buttons .btn-group-secondary,
.div-service-buttons .btn-group-service-action,
.client-home-cards .div-service-buttons .btn-group {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* 8. DEFINITIVE NAVIGATION MENU SINGLE-ICON ARCHITECTURE */
/* Disable legacy CSS pseudo-element icons on all menus so ONLY dynamic HTML icon badges render */
.main-navbar-wrapper ul#nav .dropdown-menu li a:before,
.main-navbar-wrapper ul#nav .dropdown-menu .dropdown-link:before,
.offcanvas-collapse ul#nav > li > a::before,
.offcanvas-collapse ul#nav .dropdown-menu li a:before,
.offcanvas-collapse ul#nav .dropdown-menu .dropdown-link:before,
ul#nav .dropdown-menu li a:before,
ul#nav .dropdown-menu .dropdown-link:before {
    display: none !important;
    content: none !important;
}

/* Elegant Icon Badge for Dropdown & Drawer Menu Items */
.nx-nav-icon-badge {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-size: 13.5px !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.08) !important;
}

[data-bs-theme="dark"] .nx-nav-icon-badge,
.dark .nx-nav-icon-badge {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    box-shadow: none !important;
}

.dropdown-menu .dropdown-link:hover .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li > a:hover .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li.active > a .nx-nav-icon-badge {
    transform: scale(1.08) !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-link:hover .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li > a:hover .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li.active > a .nx-nav-icon-badge i {
    color: #ffffff !important;
}

/* On desktop horizontal bar (> 991px), keep top-level items typographic and uncluttered */
@media (min-width: 992px) {
    .main-navbar-wrapper ul#nav > li.nav-item > a.nav-link > .nx-nav-icon-badge {
        display: none !important;
    }
}

/* On mobile drawer (<= 991px), display the top-level icon badge with proper alignment */
@media (max-width: 991.98px) {
    .offcanvas-collapse ul#nav > li.nav-item > a.nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
    }
    .offcanvas-collapse ul#nav > li.nav-item > a.nav-link > .nx-nav-icon-badge {
        display: inline-flex !important;
    }
}

/* 9. HEADER CART BADGE SCROLLBAR PROTECTION */
.tt-toolbar-wrap .cart-btn,
.navbar-nav .cart-btn {
    margin-right: 8px !important;
}
.tt-toolbar-wrap .header-cart-badge,
.cart-btn .header-cart-badge,
#cartItemCount {
    right: -2px !important;
    top: -3px !important;
}

/* 10. TICKET TABLE BORDER GAP & SEARCH BOX PADDING */
.nx-tickets-table-wrapper {
    padding: 16px 18px !important;
    box-sizing: border-box !important;
}
.nx-tickets-table-wrapper .dataTables_filter {
    padding: 0 0 12px 0 !important;
    float: left !important;
    width: 100% !important;
}
.nx-tickets-table-wrapper .dataTables_filter label {
    margin: 0 !important;
    width: 100% !important;
    max-width: 260px !important;
}
@media (max-width: 767.98px) {
    .nx-tickets-table-wrapper .dataTables_filter label {
        max-width: 100% !important;
    }
    .nx-tickets-table-wrapper #tableTicketsList tbody tr {
        margin-bottom: 14px !important;
    }
}

/* 11. COMPACT CREATIVE HERO CONSOLE ENHANCEMENTS */
#heroGaugeCircle {
    transition: stroke-dasharray 0.7s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s ease;
}

@keyframes nxPulseSubtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.nx-hero-section .nx-float-badge,
.nx-hero-section .nx-float-badge-delay {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    animation: nxFloatSlow 4s ease-in-out infinite alternate !important;
}

.nx-hero-section .nx-float-badge-delay {
    animation-delay: 2s !important;
}

/* Pristine Segmented Control (Zero default browser button borders/bevels) */
.nx-segmented-control {
    display: flex !important;
    align-items: center !important;
    background: #f1f5f9 !important;
    padding: 3.5px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    gap: 3px !important;
    box-sizing: border-box !important;
}

[data-bs-theme="dark"] .nx-segmented-control,
.dark .nx-segmented-control {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.nx-segment-btn {
    flex: 1 1 0% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 6.5px 10px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    line-height: 1.25 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    white-space: nowrap !important;
}

.nx-segment-btn:hover {
    color: #4f46e5 !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

[data-bs-theme="dark"] .nx-segment-btn,
.dark .nx-segment-btn {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .nx-segment-btn:hover,
.dark .nx-segment-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.nx-segment-btn.active {
    background: #ffffff !important;
    color: #4f46e5 !important;
    box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="dark"] .nx-segment-btn.active,
.dark .nx-segment-btn.active {
    background: #334155 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.4) !important;
}







/* ==========================================================================
   12. ADVANCED CREATIVE HERO CONSOLE & TELEMETRY STYLING
   ========================================================================== */
@keyframes nxShimmerAnim {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.nx-telemetry-bar-wrap {
    position: relative !important;
    overflow: hidden !important;
    background: rgba(226, 232, 240, 0.75) !important;
    border-radius: 9999px !important;
    height: 8px !important;
}

[data-bs-theme="dark"] .nx-telemetry-bar-wrap,
.dark .nx-telemetry-bar-wrap {
    background: rgba(51, 65, 85, 0.8) !important;
}

.nx-telemetry-bar {
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
}

.nx-telemetry-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) !important;
    animation: nxShimmerAnim 2.4s infinite !important;
}

/* High-Impact Hero CTA Deploy Button */
.nx-hero-cta-btn {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #4f46e5 100%) !important;
    background-size: 200% auto !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.45), 0 4px 6px -2px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.nx-hero-cta-btn:hover {
    background-position: right center !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 16px 32px -4px rgba(37, 99, 235, 0.55), 0 6px 12px -2px rgba(37, 99, 235, 0.25) !important;
    color: #ffffff !important;
}

.nx-hero-cta-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

.nx-hero-cta-btn:hover i {
    transform: translateX(4px) !important;
}

.nx-hero-cta-btn i {
    transition: transform 0.2s ease !important;
}

/* ==========================================================================
   13. TOTAL ELIMINATION OF PSEUDO-ELEMENT DOUBLE ICONS IN DROPDOWN MENUS
   ========================================================================== */
.main-navbar-wrapper .dropdown-menu li a::before,
.main-navbar-wrapper .dropdown-menu li a:before,
.main-navbar-wrapper .dropdown-menu li[menuitemname] a::before,
.main-navbar-wrapper .dropdown-menu li[menuitemname] a:before,
.main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname] a::before,
.main-navbar-wrapper ul#nav .dropdown-menu li[menuitemname] a:before,
.offcanvas-collapse .dropdown-menu li a::before,
.offcanvas-collapse .dropdown-menu li a:before,
.offcanvas-collapse .dropdown-menu li[menuitemname] a::before,
.offcanvas-collapse .dropdown-menu li[menuitemname] a:before,
.dropdown-menu .dropdown-link::before,
.dropdown-menu .dropdown-link:before,
.dropdown-menu li[menuitemname] .dropdown-link::before,
.dropdown-menu li[menuitemname] .dropdown-link:before,
.tt-main-header .dropdown-menu li a:before,
.tt-main-header .dropdown-menu li a::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    visibility: hidden !important;
}

/* Ensure Active Service Details Arrow Button is always vivid and visible */
.div-service-buttons .nx-btn-details i,
.div-service-buttons .btn-view-details i {
    color: #4f46e5 !important;
    font-size: 13px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   14. DOMAIN TLD PRICING PAGE — ULTRA MODERN & FULLY RESPONSIVE
   ========================================================================== */

/* Wrapper styling */
#tableDomainPricing_wrapper {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 35px -8px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 2.5rem !important;
}

[data-bs-theme="dark"] #tableDomainPricing_wrapper,
.dark #tableDomainPricing_wrapper {
    background: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.4) !important;
}

/* DataTables top toolbar: info and search */
#tableDomainPricing_wrapper .dataTables_info {
    padding: 16px 24px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
}

[data-bs-theme="dark"] #tableDomainPricing_wrapper .dataTables_info,
.dark #tableDomainPricing_wrapper .dataTables_info {
    color: #94a3b8 !important;
}

#tableDomainPricing_wrapper .dataTables_filter {
    padding: 14px 20px !important;
}

#tableDomainPricing_wrapper .dataTables_filter label {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0 !important; /* Hide default 'Search:' text */
}

#tableDomainPricing_wrapper .dataTables_filter input[type="search"] {
    border-radius: 14px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 8px 16px 8px 38px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 250px !important;
}

[data-bs-theme="dark"] #tableDomainPricing_wrapper .dataTables_filter input[type="search"],
.dark #tableDomainPricing_wrapper .dataTables_filter input[type="search"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

#tableDomainPricing_wrapper .dataTables_filter input[type="search"]:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), 0 4px 12px rgba(79, 70, 229, 0.08) !important;
    background-color: #ffffff !important;
    width: 290px !important;
    outline: none !important;
}

[data-bs-theme="dark"] #tableDomainPricing_wrapper .dataTables_filter input[type="search"]:focus,
.dark #tableDomainPricing_wrapper .dataTables_filter input[type="search"]:focus {
    background-color: #0f172a !important;
}

/* Table general styles */
#tableDomainPricing {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

#tableDomainPricing thead tr {
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

[data-bs-theme="dark"] #tableDomainPricing thead tr,
.dark #tableDomainPricing thead tr {
    background: #151f32 !important;
    border-color: #1e293b !important;
}

#tableDomainPricing thead th {
    padding: 16px 20px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #475569 !important;
    border: none !important;
    white-space: nowrap !important;
}

[data-bs-theme="dark"] #tableDomainPricing thead th,
.dark #tableDomainPricing thead th {
    color: #94a3b8 !important;
}

#tableDomainPricing tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#tableDomainPricing tbody tr:nth-child(even) {
    background-color: #fbfcfe !important;
}

[data-bs-theme="dark"] #tableDomainPricing tbody tr,
.dark #tableDomainPricing tbody tr {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] #tableDomainPricing tbody tr:nth-child(even),
.dark #tableDomainPricing tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

#tableDomainPricing tbody tr:hover {
    background: rgba(79, 70, 229, 0.04) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px -2px rgba(79, 70, 229, 0.08) !important;
}

[data-bs-theme="dark"] #tableDomainPricing tbody tr:hover,
.dark #tableDomainPricing tbody tr:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4) !important;
}

#tableDomainPricing tbody td {
    padding: 16px 20px !important;
    vertical-align: middle !important;
    border: none !important;
}

/* Pagination toolbar enhancement */
#tableDomainPricing_wrapper .dataTables_paginate {
    padding: 14px 24px !important;
    border-top: 1px solid #f1f5f9 !important;
}
[data-bs-theme="dark"] #tableDomainPricing_wrapper .dataTables_paginate,
.dark #tableDomainPricing_wrapper .dataTables_paginate {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#tableDomainPricing_wrapper .dataTables_length {
    padding: 14px 24px !important;
    border-top: 1px solid #f1f5f9 !important;
}
[data-bs-theme="dark"] #tableDomainPricing_wrapper .dataTables_length,
.dark #tableDomainPricing_wrapper .dataTables_length {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#tableDomainPricing_wrapper .dataTables_length select {
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 5px 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
    outline: none !important;
}

#tableDomainPricing_wrapper .paginate_button.current,
#tableDomainPricing_wrapper .paginate_button.current:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.35) !important;
    font-weight: 800 !important;
}

#tableDomainPricing_wrapper .paginate_button {
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    padding: 6px 14px !important;
    margin: 0 3px !important;
}

#tableDomainPricing_wrapper .paginate_button {
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

/* Mobile responsive card layout for Domain Pricing */
@media (max-width: 767.98px) {
    #tableDomainPricing_wrapper,
    #tableDomainPricing_wrapper *,
    #tableDomainPricing,
    #tableDomainPricing * {
        box-sizing: border-box !important;
    }

    #tableDomainPricing_wrapper {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 0 2rem 0 !important;
    }

    #tableDomainPricing_wrapper .dataTables_info {
        float: none !important;
        padding: 8px 4px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-align: center !important;
    }

    [data-bs-theme="dark"] #tableDomainPricing_wrapper .dataTables_info,
    .dark #tableDomainPricing_wrapper .dataTables_info {
        color: #94a3b8 !important;
    }

    #tableDomainPricing_wrapper .dataTables_filter {
        float: none !important;
        padding: 0 0 14px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #tableDomainPricing_wrapper .dataTables_filter label {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    #tableDomainPricing_wrapper .dataTables_filter input[type="search"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: 42px !important;
        padding: 8px 14px 8px 36px !important;
        border-radius: 14px !important;
    }

    #tableDomainPricing_wrapper .listtable,
    #tableDomainPricing,
    #tableDomainPricing tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    #tableDomainPricing thead {
        display: none !important;
    }

    /* Each domain row transformed into an attractive card */
    #tableDomainPricing tbody tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        margin: 0 0 12px 0 !important;
        padding: 12px 14px !important;
        box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.05) !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    [data-bs-theme="dark"] #tableDomainPricing tbody tr,
    .dark #tableDomainPricing tbody tr {
        border-color: #1e293b !important;
        background: #0f172a !important;
        box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.3) !important;
    }

    /* Row Header: TLD info on left, Register button on right */
    #tableDomainPricing tbody tr td.dp-col-tld {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        box-sizing: border-box !important;
    }

    [data-bs-theme="dark"] #tableDomainPricing tbody tr td.dp-col-tld,
    .dark #tableDomainPricing tbody tr td.dp-col-tld {
        border-color: #1e293b !important;
    }

    #tableDomainPricing tbody tr td.dp-col-cat {
        display: none !important;
    }

    /* Pricing rows */
    #tableDomainPricing tbody tr td.dp-col-reg,
    #tableDomainPricing tbody tr td.dp-col-trans,
    #tableDomainPricing tbody tr td.dp-col-renew {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 7px 10px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #tableDomainPricing tbody tr td.dp-col-reg {
        background: rgba(16, 185, 129, 0.08) !important;
        border: 1px solid rgba(16, 185, 129, 0.18) !important;
    }
    #tableDomainPricing tbody tr td.dp-col-trans {
        background: rgba(99, 102, 241, 0.08) !important;
        border: 1px solid rgba(99, 102, 241, 0.18) !important;
    }
    #tableDomainPricing tbody tr td.dp-col-renew {
        background: rgba(100, 116, 139, 0.08) !important;
        border: 1px solid rgba(100, 116, 139, 0.18) !important;
    }

    #tableDomainPricing tbody tr td.dp-col-reg::before {
        content: "New Registration" !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: #059669 !important;
    }
    [data-bs-theme="dark"] #tableDomainPricing tbody tr td.dp-col-reg::before,
    .dark #tableDomainPricing tbody tr td.dp-col-reg::before {
        color: #34d399 !important;
    }

    #tableDomainPricing tbody tr td.dp-col-trans::before {
        content: "Domain Transfer" !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: #4f46e5 !important;
    }
    [data-bs-theme="dark"] #tableDomainPricing tbody tr td.dp-col-trans::before,
    .dark #tableDomainPricing tbody tr td.dp-col-trans::before {
        color: #818cf8 !important;
    }

    #tableDomainPricing tbody tr td.dp-col-renew::before {
        content: "Domain Renewal" !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: #475569 !important;
    }
    [data-bs-theme="dark"] #tableDomainPricing tbody tr td.dp-col-renew::before,
    .dark #tableDomainPricing tbody tr td.dp-col-renew::before {
        color: #94a3b8 !important;
    }

    /* Policy bottom info row */
    #tableDomainPricing tbody tr td.dp-col-grace,
    #tableDomainPricing tbody tr td.dp-col-redemp {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        background: #f8fafc !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    [data-bs-theme="dark"] #tableDomainPricing tbody tr td.dp-col-grace,
    [data-bs-theme="dark"] #tableDomainPricing tbody tr td.dp-col-redemp,
    .dark #tableDomainPricing tbody tr td.dp-col-grace,
    .dark #tableDomainPricing tbody tr td.dp-col-redemp {
        background: #1e293b !important;
    }

    #tableDomainPricing tbody tr td.dp-col-grace::before {
        content: "Grace Period" !important;
        font-weight: 700 !important;
        color: #64748b !important;
    }
    #tableDomainPricing tbody tr td.dp-col-redemp::before {
        content: "Redemption Period" !important;
        font-weight: 700 !important;
        color: #64748b !important;
    }

    #tableDomainPricing tbody tr td.dp-col-action {
        display: none !important;
    }

    /* Mobile pagination */
    #tableDomainPricing_wrapper .dataTables_length,
    #tableDomainPricing_wrapper .dataTables_paginate {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        padding: 10px 0 !important;
        border: none !important;
    }
}

/* ========================================================================
   Dark Mode Styles for Pricing Section, Guarantees & Domain Banners
   ======================================================================== */
[data-bs-theme="dark"] #cloudPlansGrid > div,
[data-bs-theme="dark"] #economyPlansGrid > div,
.dark #cloudPlansGrid > div,
.dark #economyPlansGrid > div {
    background: #0f172a !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] #cloudPlansGrid > div.is-featured-card,
[data-bs-theme="dark"] #economyPlansGrid > div.is-featured-card,
.dark #cloudPlansGrid > div.is-featured-card,
.dark #economyPlansGrid > div.is-featured-card,
[data-bs-theme="dark"] #cloudPlansGrid > div.ring-4,
[data-bs-theme="dark"] #economyPlansGrid > div.ring-4,
.dark #cloudPlansGrid > div.ring-4,
.dark #economyPlansGrid > div.ring-4 {
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.25) 0%, #0f172a 100%) !important;
    background-image: linear-gradient(180deg, rgba(79, 70, 229, 0.25) 0%, #0f172a 100%) !important;
    border-color: #6366f1 !important;
}

[data-bs-theme="dark"] .plan-price,
.dark .plan-price {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #cloudPlansGrid h3,
[data-bs-theme="dark"] #economyPlansGrid h3,
.dark #cloudPlansGrid h3,
.dark #economyPlansGrid h3 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #cloudPlansGrid p,
[data-bs-theme="dark"] #economyPlansGrid p,
.dark #cloudPlansGrid p,
.dark #economyPlansGrid p {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .plan-micro-specs,
.dark .plan-micro-specs {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .plan-micro-specs .plan-spec-val,
.dark .plan-micro-specs .plan-spec-val {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .plan-feature-text,
.dark .plan-feature-text {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .plan-feature-text strong,
.dark .plan-feature-text strong {
    color: #f8fafc !important;
}

/* 4 Guarantee Cards in Dark Mode */
[data-bs-theme="dark"] .bento-trust-card,
.dark .bento-trust-card {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .bento-trust-card h4,
.dark .bento-trust-card h4 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .bento-trust-card p,
.dark .bento-trust-card p {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .bento-trust-card .border-t,
.dark .bento-trust-card .border-t {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Domain Action Banners: Light Theme Defaults */
.domain-banner-register {
    background: linear-gradient(135deg, #ffffff 0%, #f5f7ff 50%, #eef2ff 100%) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

.domain-banner-transfer {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 50%, #ecfdf5 100%) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

.domain-banner-card h3 {
    color: #0f172a !important;
}

.domain-banner-card p {
    color: #475569 !important;
}

/* Domain Action Banners: Dark Theme Scoped Overrides */
[data-bs-theme="dark"] .domain-banner-register,
.dark .domain-banner-register {
    background: linear-gradient(135deg, #0f172a 0%, #171c36 50%, #0f172a 100%) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-bs-theme="dark"] .domain-banner-transfer,
.dark .domain-banner-transfer {
    background: linear-gradient(135deg, #0f172a 0%, #0c271e 50%, #0f172a 100%) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-bs-theme="dark"] .domain-banner-card h3,
.dark .domain-banner-card h3 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .domain-banner-card p,
.dark .domain-banner-card p {
    color: #94a3b8 !important;
}


/* ========================================================================
   GLOBAL SOFT BORDER SYSTEM (ELIMINATE HARSH #dee2e6 WIREFRAMES)
   ======================================================================== */
[data-bs-theme="dark"] .border,
.dark .border {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ========================================================================
   HERO FEATURE TRUST CARDS (SOFT, SILKY, DELICATE BORDERS)
   ======================================================================== */
.tt-hero-feature-card {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    border-radius: 16px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tt-hero-feature-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08) !important;
}
.tt-hero-feature-card.tt-card-instant:hover { border-color: rgba(99, 102, 241, 0.4) !important; }
.tt-hero-feature-card.tt-card-ddos:hover { border-color: rgba(16, 185, 129, 0.4) !important; }
.tt-hero-feature-card.tt-card-backup:hover { border-color: rgba(14, 165, 233, 0.4) !important; }
.tt-hero-feature-card.tt-card-support:hover { border-color: rgba(245, 158, 11, 0.4) !important; }

[data-bs-theme="dark"] .tt-hero-feature-card,
.dark .tt-hero-feature-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35) !important;
}
[data-bs-theme="dark"] .tt-hero-feature-card:hover,
.dark .tt-hero-feature-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.55) !important;
}
[data-bs-theme="dark"] .tt-hero-feature-card.tt-card-instant:hover,
.dark .tt-hero-feature-card.tt-card-instant:hover { border-color: rgba(129, 140, 248, 0.45) !important; }
[data-bs-theme="dark"] .tt-hero-feature-card.tt-card-ddos:hover,
.dark .tt-hero-feature-card.tt-card-ddos:hover { border-color: rgba(52, 211, 153, 0.45) !important; }
[data-bs-theme="dark"] .tt-hero-feature-card.tt-card-backup:hover,
.dark .tt-hero-feature-card.tt-card-backup:hover { border-color: rgba(56, 189, 248, 0.45) !important; }
[data-bs-theme="dark"] .tt-hero-feature-card.tt-card-support:hover,
.dark .tt-hero-feature-card.tt-card-support:hover { border-color: rgba(251, 191, 36, 0.45) !important; }

/* ========================================================================
   DOMAIN SEARCH & TRANSFER BUTTON (SMOOTH GLASS & REFINED EDGES)
   ======================================================================== */
.nx-hero-domain-bar {
    display: block !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}
.nx-hero-domain-bar:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 12px 35px -6px rgba(59, 130, 246, 0.18) !important;
}

[data-bs-theme="dark"] .nx-hero-domain-bar,
.dark .nx-hero-domain-bar {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.5) !important;
}
[data-bs-theme="dark"] .nx-hero-domain-bar:focus-within,
.dark .nx-hero-domain-bar:focus-within {
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 14px 40px -8px rgba(99, 102, 241, 0.25) !important;
}

#frmDomainHomepage #btnTransfer,
.tt-btn-transfer {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
}
#frmDomainHomepage #btnTransfer:hover,
.tt-btn-transfer:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #2563eb !important;
}

[data-bs-theme="dark"] #frmDomainHomepage #btnTransfer,
.dark #frmDomainHomepage #btnTransfer,
[data-bs-theme="dark"] .tt-btn-transfer,
.dark .tt-btn-transfer {
    background: rgba(30, 41, 59, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
[data-bs-theme="dark"] #frmDomainHomepage #btnTransfer:hover,
.dark #frmDomainHomepage #btnTransfer:hover,
[data-bs-theme="dark"] .tt-btn-transfer:hover,
.dark .tt-btn-transfer:hover {
    background: rgba(51, 65, 85, 0.85) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
}

/* Popular TLD pills */
.tt-tld-pill {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}
.tt-tld-pill:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

[data-bs-theme="dark"] .tt-tld-pill,
.dark .tt-tld-pill {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
[data-bs-theme="dark"] .tt-tld-pill:hover,
.dark .tt-tld-pill:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Eyebrow Pill */
.tt-hero-eyebrow {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}
[data-bs-theme="dark"] .tt-hero-eyebrow,
.dark .tt-hero-eyebrow {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================================================
   HERO SHOWCASE CARD & INNER ENGINEERING PANEL (SUBTLE, SOFTENED EDGES)
   ======================================================================== */
.tt-hero-showcase-wrapper {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.1)) !important;
    padding: 1.5px !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 45px -10px rgba(37, 99, 235, 0.12) !important;
}
.tt-hero-showcase-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 26.5px !important;
    backdrop-filter: blur(16px) !important;
}

[data-bs-theme="dark"] .tt-hero-showcase-wrapper,
.dark .tt-hero-showcase-wrapper {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(99, 102, 241, 0.15), rgba(255, 255, 255, 0.07)) !important;
    padding: 1px !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.55), 0 0 35px -10px rgba(59, 130, 246, 0.12) !important;
}
[data-bs-theme="dark"] .tt-hero-showcase-card,
.dark .tt-hero-showcase-card {
    background: rgba(15, 23, 42, 0.92) !important;
    border-radius: 27px !important;
    backdrop-filter: blur(16px) !important;
}

/* Inner Engineering Panel */
.tt-hero-eng-panel {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.6) 100%) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

[data-bs-theme="dark"] .tt-hero-eng-panel,
.dark .tt-hero-eng-panel {
    background: rgba(11, 17, 33, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Hero Showcase Floating Badges */
.nx-float-badge,
.nx-float-badge-delay {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08) !important;
}

[data-bs-theme="dark"] .nx-float-badge,
.dark .nx-float-badge,
[data-bs-theme="dark"] .nx-float-badge-delay,
.dark .nx-float-badge-delay {
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9 !important;
}

/* Micro badges inside showcase */
.tt-badge-node {
    background: #eef2ff !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    color: #3730a3 !important;
}
[data-bs-theme="dark"] .tt-badge-node,
.dark .tt-badge-node {
    background: rgba(49, 46, 129, 0.35) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    color: #c7d2fe !important;
}

.tt-badge-online {
    background: #ecfdf5 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #059669 !important;
}
[data-bs-theme="dark"] .tt-badge-online,
.dark .tt-badge-online {
    background: rgba(6, 78, 59, 0.35) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

.tt-badge-spec-cyan {
    background: #ecfeff !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    color: #0e7490 !important;
}
[data-bs-theme="dark"] .tt-badge-spec-cyan,
.dark .tt-badge-spec-cyan {
    background: rgba(8, 51, 68, 0.4) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    color: #67e8f9 !important;
}

.tt-badge-spec-indigo {
    background: #eef2ff !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    color: #4338ca !important;
}
[data-bs-theme="dark"] .tt-badge-spec-indigo,
.dark .tt-badge-spec-indigo {
    background: rgba(49, 46, 129, 0.4) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
}

.tt-badge-spec-emerald {
    background: #ecfdf5 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #047857 !important;
}
[data-bs-theme="dark"] .tt-badge-spec-emerald,
.dark .tt-badge-spec-emerald {
    background: rgba(6, 78, 59, 0.4) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

/* ========================================================================
   ENHANCED RESPONSIVE HEADER & ATTRACTIVE SIDEBAR DRAWER OVERHAUL
   1. Fix: Cart button out of viewport on intermediate screens (992px - 1279px)
   2. Fix: Sidebar label text wrapping to 2 lines
   3. Fix: Excessive sidebar drawer padding reduced
   4. Feature: Polished, modern, attractive sidebar drawer with pastel micro-squircles
   ======================================================================== */

/* 1. Global Header Container: Fluid Width with Guaranteed Edge Clearance */
.tt-header .navbar > .container,
.tt-header .container,
header.header .navbar > .container,
header.header .container {
    max-width: 1440px !important;
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Ensure right toolbar stays in viewport and never shrinks or overflows */
.tt-toolbar-wrap,
.tt-main-header.tt-toolbar-wrap {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tt-toolbar-wrap .cart-btn,
.navbar-nav .cart-btn,
a.cart-btn {
    flex-shrink: 0 !important;
    margin-right: 2px !important;
    position: relative !important;
}

.tt-toolbar-wrap .header-cart-badge,
.cart-btn .header-cart-badge,
#cartItemCount {
    right: -2px !important;
    top: -3px !important;
}

/* Intermediate Laptops & Tablets (992px to 1279.98px) - Balanced Navbar & Toolbar */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .tt-header .navbar > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 12px !important;
    }
    .tt-header .navbar-brand {
        flex-shrink: 0 !important;
    }
    .tt-header .navbar-brand .logo-img {
        max-height: 28px !important;
        max-width: 135px !important;
    }
    .main-navbar-wrapper.offcanvas-collapse,
    .main-navbar-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .main-navbar-wrapper ul#nav,
    .tt-header .tt-main-header ul#nav {
        gap: 6px !important;
    }
    .tt-header .tt-main-header ul#nav > li > a,
    .main-navbar-wrapper ul#nav > li > a {
        padding: 7px 11px !important;
        font-size: 13.5px !important;
        letter-spacing: 0 !important;
    }
    .tt-toolbar-wrap {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .tt-header .header-action-register {
        padding: 0 12px !important;
        height: 34px !important;
        font-size: 12.5px !important;
        gap: 4px !important;
    }
    .tt-header .header-action-login {
        padding: 0 10px !important;
        height: 34px !important;
        font-size: 12.5px !important;
        gap: 4px !important;
    }
    .tt-header .header-action-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 13px !important;
    }
    .tt-toolbar-wrap .cart-btn {
        margin-right: 0 !important;
    }
}

/* Narrower Desktop Screens (992px to 1120px) */
@media (min-width: 992px) and (max-width: 1120px) {
    .tt-header .navbar > .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        gap: 8px !important;
    }
    .tt-header .navbar-brand .logo-img {
        max-height: 27px !important;
        max-width: 125px !important;
    }
    .main-navbar-wrapper ul#nav,
    .tt-header .tt-main-header ul#nav {
        gap: 6px !important;
    }
    .tt-header .tt-main-header ul#nav > li > a,
    .main-navbar-wrapper ul#nav > li > a {
        padding: 7px 11px !important;
        font-size: 13.5px !important;
        letter-spacing: 0 !important;
    }
    .tt-header .header-action-register {
        padding: 0 11px !important;
        font-size: 12px !important;
    }
    .tt-header .header-action-login {
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

/* 2. ATTRACTIVE & ERGONOMIC SIDEBAR DRAWER (< 992px) */
@media (max-width: 991.98px) {
    .offcanvas-collapse {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 340px !important;
        max-width: calc(100vw - 24px) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1000000 !important;
        padding: 16px 14px 24px 14px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background-color: #ffffff !important;
        border-right: 1px solid #e2e8f0 !important;
        box-shadow: 20px 0 50px -10px rgba(15, 23, 42, 0.12) !important;
        transform: translateX(-110%) !important;
        transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
        visibility: hidden !important;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse,
    .dark .offcanvas-collapse {
        background-color: #0f172a !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.75) !important;
    }

    .offcanvas-collapse.open {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* Drawer Header */
    .offcanvas-collapse .navbar-brand .logo-img {
        max-height: 26px !important;
        width: auto !important;
    }

    /* Compact, Attractive Drawer Search */
    .drawer-search-form {
        margin-bottom: 12px !important;
    }
    .drawer-search-wrapper {
        height: 36px !important;
        border-radius: 9px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }
    [data-bs-theme="dark"] .drawer-search-wrapper,
    .dark .drawer-search-wrapper {
        background: rgba(255, 255, 255, 0.04) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    .drawer-search-icon {
        left: 10px !important;
        font-size: 12px !important;
        color: #94a3b8 !important;
    }
    .drawer-search-input {
        padding: 0 10px 0 30px !important;
        font-size: 12.5px !important;
    }

    /* Top-Level Navigation Items */
    .offcanvas-collapse ul#nav {
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .offcanvas-collapse ul#nav > li > a {
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin-bottom: 1px !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        transition: all 0.15s ease !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a,
    .dark .offcanvas-collapse ul#nav > li > a {
        color: #f1f5f9 !important;
    }

    .offcanvas-collapse ul#nav > li > a:hover,
    .offcanvas-collapse ul#nav > li.active > a,
    .offcanvas-collapse ul#nav > li.is-open > a {
        background: #f1f5f9 !important;
        color: #4f46e5 !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li > a:hover,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.active > a,
    [data-bs-theme="dark"] .offcanvas-collapse ul#nav > li.is-open > a,
    .dark .offcanvas-collapse ul#nav > li > a:hover,
    .dark .offcanvas-collapse ul#nav > li.active > a,
    .dark .offcanvas-collapse ul#nav > li.is-open > a {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #818cf8 !important;
    }

    /* Top-Level Icon Badges (26px compact squircle) */
    .offcanvas-collapse ul#nav > li > a .nx-nav-icon-badge,
    .offcanvas-collapse ul#nav > li > a::before {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 7px !important;
        font-size: 12px !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Submenu Recessed Card (e.g. Store Dropdown) */
    .offcanvas-collapse .dropdown-menu {
        padding: 4px !important;
        margin: 2px 0 6px 0 !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu,
    .dark .offcanvas-collapse .dropdown-menu {
        background: rgba(30, 41, 59, 0.5) !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
    }

    /* Submenu Items - Guaranteed Single Line (No 2-line wraps!) */
    .offcanvas-collapse .dropdown-menu li a,
    .offcanvas-collapse .dropdown-menu .dropdown-link {
        padding: 7px 18px 7px 10px !important;
        margin-bottom: 2px !important;
        border-radius: 8px !important;
        font-size: 12.5px !important;
        font-weight: 550 !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: visible !important;
        position: relative !important;
    }

    .offcanvas-collapse .dropdown-menu li a > span:not(.nx-nav-icon-badge):not(.badge),
    .offcanvas-collapse .dropdown-menu .dropdown-link > span:not(.nx-nav-icon-badge):not(.badge) {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-right: 6px !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a,
    .dark .offcanvas-collapse .dropdown-menu li a {
        color: #cbd5e1 !important;
    }

    .offcanvas-collapse .dropdown-menu li a:hover,
    .offcanvas-collapse .dropdown-menu .dropdown-link:hover,
    .offcanvas-collapse .dropdown-menu li:hover > a,
    .offcanvas-collapse .dropdown-menu li.is-hover > a,
    .offcanvas-collapse .dropdown-menu li a.is-hover,
    .offcanvas-collapse .dropdown-menu .dropdown-link.is-hover {
        background: #ffffff !important;
        color: #4f46e5 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a:hover,
    .dark .offcanvas-collapse .dropdown-menu li a:hover,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li:hover > a,
    .dark .offcanvas-collapse .dropdown-menu li:hover > a,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li.is-hover > a,
    .dark .offcanvas-collapse .dropdown-menu li.is-hover > a,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a.is-hover,
    .dark .offcanvas-collapse .dropdown-menu li a.is-hover {
        background: #1e293b !important;
        color: #818cf8 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    /* Submenu 24px Micro-Squircle Icon Badge */
    .offcanvas-collapse .dropdown-menu .nx-nav-icon-badge,
    .offcanvas-collapse .dropdown-menu li a .nx-nav-icon-badge {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .offcanvas-collapse .dropdown-menu .nx-nav-icon-badge i,
    .offcanvas-collapse .dropdown-menu li a .nx-nav-icon-badge i {
        font-size: 11px !important;
    }

    /* Submenu Right Chevron Arrow - Positioned Cleanly Inside Card with Zero Clipping */
    .offcanvas-collapse .dropdown-menu li a::after,
    .offcanvas-collapse .dropdown-menu .dropdown-link::after,
    .offcanvas-collapse .dropdown-menu li a:after,
    .offcanvas-collapse .dropdown-menu .dropdown-link:after {
        content: "\f054" !important;
        font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 9px !important;
        color: #94a3b8 !important;
        margin-left: auto !important;
        opacity: 0.35 !important;
        transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .offcanvas-collapse .dropdown-menu li a:hover::after,
    .offcanvas-collapse .dropdown-menu .dropdown-link:hover::after,
    .offcanvas-collapse .dropdown-menu li:hover > a::after,
    .offcanvas-collapse .dropdown-menu li.is-hover > a::after,
    .offcanvas-collapse .dropdown-menu li a:hover:after,
    .offcanvas-collapse .dropdown-menu .dropdown-link:hover:after,
    .offcanvas-collapse .dropdown-menu li:hover > a:after,
    .offcanvas-collapse .dropdown-menu li.is-hover > a:after,
    .offcanvas-collapse .dropdown-menu li a.is-hover::after,
    .offcanvas-collapse .dropdown-menu .dropdown-link.is-hover::after,
    .offcanvas-collapse .dropdown-menu li a.is-hover:after,
    .offcanvas-collapse .dropdown-menu .dropdown-link.is-hover:after {
        opacity: 1 !important;
        color: #4f46e5 !important;
        transform: translateX(1px) !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a:hover::after,
    .dark .offcanvas-collapse .dropdown-menu li a:hover::after,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li:hover > a::after,
    .dark .offcanvas-collapse .dropdown-menu li:hover > a::after,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li.is-hover > a::after,
    .dark .offcanvas-collapse .dropdown-menu li.is-hover > a::after,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a:hover:after,
    .dark .offcanvas-collapse .dropdown-menu li a:hover:after,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li:hover > a:after,
    .dark .offcanvas-collapse .dropdown-menu li:hover > a:after,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a.is-hover::after,
    .dark .offcanvas-collapse .dropdown-menu li a.is-hover::after,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu li a.is-hover:after,
    .dark .offcanvas-collapse .dropdown-menu li a.is-hover:after {
        color: #818cf8 !important;
    }

    /* Submenu Divider Rule in Mobile Drawer */
    .offcanvas-collapse .dropdown-menu .dropdown-divider-pure,
    .offcanvas-collapse .dropdown-menu li.dropdown-divider-pure {
        height: 1px !important;
        margin: 4px 6px !important;
        width: calc(100% - 12px) !important;
        min-width: calc(100% - 12px) !important;
    }

    /* Drawer Footer Action Buttons */
    .offcanvas-collapse .d-lg-none.border-top {
        margin-top: 12px !important;
        padding-top: 10px !important;
        gap: 6px !important;
    }

    .offcanvas-collapse .d-lg-none.border-top .btn {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        border-radius: 9px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 3. Elimination of duplicate pseudo-icons on mobile drawer */
.offcanvas-collapse ul#nav > li > a::before,
.offcanvas-collapse ul#nav > li > a:before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* Palette-Coded Micro-Squircles for Top-Level Drawer Navigation */
.offcanvas-collapse ul#nav > li[menuItemName="Home"] > a .nx-nav-icon-badge {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Store"] > a .nx-nav-icon-badge {
    background: #f0f9ff !important;
    color: #0284c7 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Announcements"] > a .nx-nav-icon-badge {
    background: #fffbeb !important;
    color: #d97706 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Knowledgebase"] > a .nx-nav-icon-badge {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Network Status"] > a .nx-nav-icon-badge {
    background: #ecfdf5 !important;
    color: #059669 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Affiliates"] > a .nx-nav-icon-badge {
    background: #faf5ff !important;
    color: #7c3aed !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Contact Us"] > a .nx-nav-icon-badge {
    background: #fff1f2 !important;
    color: #e11d48 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Services"] > a .nx-nav-icon-badge {
    background: #f0fdfa !important;
    color: #0d9488 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Domains"] > a .nx-nav-icon-badge {
    background: #eff6ff !important;
    color: #2563eb !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Billing"] > a .nx-nav-icon-badge {
    background: #fdf4ff !important;
    color: #c026d3 !important;
}
.offcanvas-collapse ul#nav > li[menuItemName="Support"] > a .nx-nav-icon-badge {
    background: #fff7ed !important;
    color: #ea580c !important;
}

/* Dark mode palette tints for top-level drawer items */
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName="Home"] > a .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName="Home"] > a .nx-nav-icon-badge { background: rgba(99, 102, 241, 0.2) !important; color: #a5b4fc !important; }
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName="Store"] > a .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName="Store"] > a .nx-nav-icon-badge { background: rgba(2, 132, 199, 0.2) !important; color: #7dd3fc !important; }
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName="Announcements"] > a .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName="Announcements"] > a .nx-nav-icon-badge { background: rgba(217, 119, 6, 0.2) !important; color: #fde047 !important; }
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName="Knowledgebase"] > a .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName="Knowledgebase"] > a .nx-nav-icon-badge { background: rgba(99, 102, 241, 0.2) !important; color: #a5b4fc !important; }
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName="Network Status"] > a .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName="Network Status"] > a .nx-nav-icon-badge { background: rgba(5, 150, 105, 0.2) !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName="Affiliates"] > a .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName="Affiliates"] > a .nx-nav-icon-badge { background: rgba(124, 58, 237, 0.2) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName="Contact Us"] > a .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName="Contact Us"] > a .nx-nav-icon-badge { background: rgba(225, 29, 72, 0.2) !important; color: #fda4af !important; }

/* Active & Hover state for Top-Level Drawer Navigation Badges (overrides palette background so icon stays crisp & visible) */
.offcanvas-collapse ul#nav > li[menuItemName] > a:hover .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li[menuItemName].active > a .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li[menuItemName].is-open > a .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li > a:hover .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li.active > a .nx-nav-icon-badge,
.offcanvas-collapse ul#nav > li.is-open > a .nx-nav-icon-badge,
[data-bs-theme="dark"] .offcanvas-collapse ul#nav > li[menuItemName] > a:hover .nx-nav-icon-badge,
.dark .offcanvas-collapse ul#nav > li[menuItemName] > a:hover .nx-nav-icon-badge {
    background: #4f46e5 !important;
    color: #ffffff !important;
    transform: scale(1.06) !important;
}
.offcanvas-collapse ul#nav > li[menuItemName] > a:hover .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li[menuItemName].active > a .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li[menuItemName].is-open > a .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li > a:hover .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li.active > a .nx-nav-icon-badge i,
.offcanvas-collapse ul#nav > li.is-open > a .nx-nav-icon-badge i {
    color: #ffffff !important;
}

/* 4. Guaranteed Desktop Viewport Clearance for Navbar (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    .tt-header .navbar > .container,
    header.header .navbar > .container {
        padding-left: 16px !important;
        padding-right: 20px !important;
        gap: 12px !important;
    }
    .tt-header .navbar-brand {
        margin-right: 0 !important;
    }
    .tt-header .navbar-brand .logo-img {
        max-height: 28px !important;
        max-width: 130px !important;
    }
    .tt-header .tt-main-header ul#nav {
        gap: 6px !important;
    }
    .tt-header .tt-main-header ul#nav > li > a,
    .main-navbar-wrapper ul#nav > li > a {
        padding: 7px 11px !important;
        font-size: 13.5px !important;
    }
    .tt-header .header-action-register {
        padding: 0 12px !important;
        height: 34px !important;
        font-size: 12.5px !important;
        gap: 5px !important;
    }
    .tt-header .header-action-login {
        padding: 0 10px !important;
        height: 34px !important;
        font-size: 12.5px !important;
        gap: 5px !important;
    }
    .tt-header .header-action-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 13px !important;
    }
    .tt-toolbar-wrap {
        gap: 6px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    .tt-toolbar-wrap .cart-btn {
        margin-right: 4px !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================================================
   5. RESPONSIVE OPTIMIZATION FOR LAPTOP & MULTI-VIEWPORT CARDS
   ======================================================================== */
.tt-resource-grid-flex,
.tt-account-grid-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important; /* 20px controlled gap */
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    /* Hero Feature Trust Pills: 4 in 1 horizontal row with spacious styling on laptop */
    .tt-hero-feature-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
    .tt-hero-feature-cards .tt-hero-feature-card {
        padding: 0.75rem 0.85rem !important;
        gap: 0.65rem !important;
    }
    .tt-hero-feature-cards .tt-hero-feature-card > div:first-child {
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 0.75rem !important;
        font-size: 0.85rem !important;
    }
    .tt-hero-feature-cards .tt-hero-feature-card .font-extrabold {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    .tt-hero-feature-cards .tt-hero-feature-card .inline-flex {
        font-size: 11px !important;
        margin-top: 3px !important;
    }

    /* Dynamic Pricing Plans: 2-column balanced grid with full titles and spacious stats */
    #cloudPlansGrid,
    #economyPlansGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }

    /* Product Services Grid: 2-column grid on laptop viewports */
    section:has(.tt-services-grid) .grid,
    .tt-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Self-Service & Quick Account Management: Exact Flex Columns */
@media (min-width: 1280px) {
    .tt-resource-card,
    .tt-account-card {
        flex: 0 0 calc((100% - 80px) / 5) !important;
        max-width: calc((100% - 80px) / 5) !important;
        width: calc((100% - 80px) / 5) !important;
        min-height: 240px !important;
    }
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    .tt-resource-card,
    .tt-account-card {
        flex: 0 0 calc((100% - 40px) / 3) !important;
        max-width: calc((100% - 40px) / 3) !important;
        width: calc((100% - 40px) / 3) !important;
        min-height: 240px !important;
    }
}

@media (min-width: 640px) and (max-width: 991.98px) {
    .tt-resource-card,
    .tt-account-card {
        flex: 0 0 calc((100% - 20px) / 2) !important;
        max-width: calc((100% - 20px) / 2) !important;
        width: calc((100% - 20px) / 2) !important;
        min-height: 240px !important;
    }
}

@media (max-width: 639.98px) {
    .tt-resource-card,
    .tt-account-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
    }
}


/* Hide Hero Cloud Instance Showcase Card on screens under 1280px */
@media (max-width: 1279.98px) {
    .tt-hero-showcase-col,
    .tt-hero-showcase-wrapper {
        display: none !important;
    }
}


/* Promo Ticker Transitions & Vertical Stacking */
.promo-ticker-viewport {
    display: inline-grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    overflow: hidden !important;
    height: 26px !important;
    vertical-align: middle !important;
}
.promo-ticker-slide {
    grid-area: 1 / 1 !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    white-space: nowrap !important;
}
.promo-ticker-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}
.promo-ticker-slide.exit-up {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
}
.promo-ticker-slide.exit-down {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Hosting Plans Pricing Table Background & Card Depth (Light & Dark Themes)
   ========================================================================== */
#pricingSection,
.tt-pricing-section {
    background-color: #f1f5f9 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 50%, #f1f5f9 100%) !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
}

[data-bs-theme="dark"] #pricingSection,
[data-bs-theme="dark"] .tt-pricing-section {
    background-color: #0b0f19 !important;
    background: linear-gradient(180deg, #0b0f19 0%, #030712 100%) !important;
    border-top: 1px solid #1e293b !important;
    border-bottom: 1px solid #1e293b !important;
}

/* Ensure hosting pricing cards stand out crisp and clean against section background */
#cloudPlansGrid > div,
#economyPlansGrid > div,
.is-featured-card {
    overflow: visible !important;
}

#cloudPlansGrid > div,
#economyPlansGrid > div {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] #cloudPlansGrid > div,
[data-bs-theme="dark"] #economyPlansGrid > div {
    background-color: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* FontAwesome Free fallbacks for Pro icon classes */
.fa-shield-check::before {
    content: "\f3ed" !important;
}
.fa-sparkles::before {
    content: "\f005" !important;
}

/* Prevent Bootstrap validation checkmark/warning background-image from overlapping password eye toggle icons */
#inputNewPassword1.is-valid,
#inputNewPassword2.is-valid,
#inputNewPassword1.is-invalid,
#inputNewPassword2.is-invalid,
#inputNewPassword1.is-warning,
#inputNewPassword2.is-warning,
.using-password-strength .form-control.is-valid,
.using-password-strength .form-control.is-invalid,
.using-password-strength .form-control.is-warning {
    background-image: none !important;
    padding-right: 2.5rem !important;
}
#inputNewPassword1.is-valid,
#inputNewPassword2.is-valid {
    border-color: #10b981 !important;
}
#inputNewPassword1.is-warning {
    border-color: #f59e0b !important;
}
#inputNewPassword1.is-invalid,
#inputNewPassword2.is-invalid {
    border-color: #f43f5e !important;
}

/* === SG_SOFT_EXECUTIVE_DESIGN_SYSTEM_V15 === */
/* ==========================================================================
   SOFT EXECUTIVE PRODUCT DETAILS & BORDERLESS PILL SYSTEM (ZERO HARSH BORDERS)
   ========================================================================== */
.nx-soft-surface-card {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.65) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(79, 70, 229, 0.03) !important;
}

[data-bs-theme="dark"] .nx-soft-surface-card,
.dark .nx-soft-surface-card {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.45) !important;
}

.nx-product-hero-banner {
    background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 45%, #f0fdfa 100%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(224, 231, 255, 0.6) !important;
    position: relative !important;
}

[data-bs-theme="dark"] .nx-product-hero-banner,
.dark .nx-product-hero-banner {
    background: linear-gradient(135deg, #131c31 0%, #1e1b4b 55%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nx-hero-top-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
}

.nx-product-hero-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #9333ea 100%) !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border: none !important;
    box-shadow: 0 12px 24px -6px rgba(99, 102, 241, 0.45) !important;
}

/* Soft Borderless Capsule Pills */
.nx-soft-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 9999px !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: none !important;
    line-height: 1.2;
}

.nx-soft-pill-indigo {
    background: rgba(79, 70, 229, 0.1) !important;
    color: #4338ca !important;
}
[data-bs-theme="dark"] .nx-soft-pill-indigo,
.dark .nx-soft-pill-indigo {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

.nx-soft-pill-orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(234, 88, 12, 0.14)) !important;
    color: #c2410c !important;
}
[data-bs-theme="dark"] .nx-soft-pill-orange,
.dark .nx-soft-pill-orange {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}

.nx-soft-pill-emerald {
    background: rgba(16, 185, 129, 0.13) !important;
    color: #047857 !important;
}
[data-bs-theme="dark"] .nx-soft-pill-emerald,
.dark .nx-soft-pill-emerald {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

.nx-soft-pill-amber {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
}
[data-bs-theme="dark"] .nx-soft-pill-amber,
.dark .nx-soft-pill-amber {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

.nx-soft-pill-rose {
    background: rgba(244, 63, 94, 0.13) !important;
    color: #be123c !important;
}
[data-bs-theme="dark"] .nx-soft-pill-rose,
.dark .nx-soft-pill-rose {
    background: rgba(244, 63, 94, 0.2) !important;
    color: #fda4af !important;
}

.nx-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

/* Soft Domain & SSL Capsules (Zero Borders, Pill Shaped) */
.nx-domain-capsule {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #4f46e5 !important;
    font-size: 12.5px;
    font-weight: 700;
    border: none !important;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.09) !important;
    transition: all 0.2s ease;
}
.nx-domain-capsule:hover {
    transform: translateY(-1px);
    background: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25) !important;
}
.nx-domain-capsule:hover i {
    color: #ffffff !important;
}
[data-bs-theme="dark"] .nx-domain-capsule,
.dark .nx-domain-capsule {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #a5b4fc !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .nx-domain-capsule:hover,
.dark .nx-domain-capsule:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

.nx-ssl-capsule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border-radius: 9999px !important;
    font-size: 11.5px;
    font-weight: 700;
    border: none !important;
}
.nx-ssl-active {
    background: rgba(16, 185, 129, 0.13) !important;
    color: #047857 !important;
}
[data-bs-theme="dark"] .nx-ssl-active,
.dark .nx-ssl-active {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}
.nx-ssl-inactive {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
}
[data-bs-theme="dark"] .nx-ssl-inactive,
.dark .nx-ssl-inactive {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

/* Soft Borderless Action Chips (SSO & Management Toolbar) */
.nx-action-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 14px !important;
    font-size: 12.5px;
    font-weight: 700;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none !important;
}
.nx-action-chip:hover {
    transform: translateY(-2px);
}

.nx-action-chip-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.38) !important;
}
.nx-action-chip-primary:hover {
    color: #ffffff !important;
    box-shadow: 0 12px 24px -4px rgba(79, 70, 229, 0.5) !important;
}

.nx-action-chip-indigo {
    background: #eef2ff !important;
    color: #4338ca !important;
}
.nx-action-chip-indigo:hover {
    background: #e0e7ff !important;
    color: #3730a3 !important;
}
[data-bs-theme="dark"] .nx-action-chip-indigo,
.dark .nx-action-chip-indigo {
    background: rgba(99, 102, 241, 0.16) !important;
    color: #a5b4fc !important;
}

.nx-action-chip-slate {
    background: #f1f5f9 !important;
    color: #334155 !important;
}
.nx-action-chip-slate:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .nx-action-chip-slate,
.dark .nx-action-chip-slate {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.nx-action-chip-emerald {
    background: #ecfdf5 !important;
    color: #047857 !important;
}
.nx-action-chip-emerald:hover {
    background: #d1fae5 !important;
    color: #065f46 !important;
}
[data-bs-theme="dark"] .nx-action-chip-emerald,
.dark .nx-action-chip-emerald {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
}

.nx-action-chip-amber {
    background: #fffbeb !important;
    color: #b45309 !important;
}
.nx-action-chip-amber:hover {
    background: #fef3c7 !important;
    color: #92400e !important;
}
[data-bs-theme="dark"] .nx-action-chip-amber,
.dark .nx-action-chip-amber {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fcd34d !important;
}

.nx-action-chip-rose {
    background: #fff1f2 !important;
    color: #e11d48 !important;
}
.nx-action-chip-rose:hover {
    background: #ffe4e6 !important;
    color: #be123c !important;
}
[data-bs-theme="dark"] .nx-action-chip-rose,
.dark .nx-action-chip-rose {
    background: rgba(244, 63, 94, 0.16) !important;
    color: #fda4af !important;
}

/* Soft Borderless Metric Tiles & Spec Rows */
.nx-soft-metric-tile {
    padding: 13px 15px;
    border-radius: 18px !important;
    background: #f8fafc !important;
    border: none !important;
}
[data-bs-theme="dark"] .nx-soft-metric-tile,
.dark .nx-soft-metric-tile {
    background: rgba(15, 23, 42, 0.65) !important;
    border: none !important;
}

.nx-soft-spec-row {
    background: #f8fafc !important;
    border: none !important;
    border-radius: 16px !important;
    transition: background-color 0.15s ease;
}
.nx-soft-spec-row:hover {
    background: #f1f5f9 !important;
}
[data-bs-theme="dark"] .nx-soft-spec-row,
.dark .nx-soft-spec-row {
    background: rgba(15, 23, 42, 0.6) !important;
    border: none !important;
}
[data-bs-theme="dark"] .nx-soft-spec-row:hover,
.dark .nx-soft-spec-row:hover {
    background: rgba(30, 41, 59, 0.8) !important;
}

.nx-soft-card-header {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
}
[data-bs-theme="dark"] .nx-soft-card-header,
.dark .nx-soft-card-header {
    background: rgba(15, 23, 42, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.nx-soft-top-divider {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
}
[data-bs-theme="dark"] .nx-soft-top-divider,
.dark .nx-soft-top-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Soft App Shortcut Tiles (Zero Harsh Wireframes) */
#cPanelQuickShortcutsPanel .nx-app-tile {
    background: #f8fafc !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}
#cPanelQuickShortcutsPanel .nx-app-tile:hover {
    background: #ffffff !important;
    border-color: rgba(165, 180, 252, 0.35) !important;
    box-shadow: 0 12px 28px -6px rgba(79, 70, 229, 0.14) !important;
    transform: translateY(-4px) !important;
}
[data-bs-theme="dark"] #cPanelQuickShortcutsPanel .nx-app-tile,
.dark #cPanelQuickShortcutsPanel .nx-app-tile {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid transparent !important;
}
[data-bs-theme="dark"] #cPanelQuickShortcutsPanel .nx-app-tile:hover,
.dark #cPanelQuickShortcutsPanel .nx-app-tile:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Precompiled Tailwind Opacity Utilities */
.border-slate-200\/90 { border-color: rgba(226, 232, 240, 0.9); }
[data-bs-theme="dark"] .dark\:bg-rose-950\/60, .dark .dark\:bg-rose-950\/60 { background-color: rgba(76, 5, 25, 0.6); }
[data-bs-theme="dark"] .dark\:border-rose-900\/60, .dark .dark\:border-rose-900\/60 { border-color: rgba(136, 19, 55, 0.6); }
[data-bs-theme="dark"] .dark\:bg-slate-800\/60, .dark .dark\:bg-slate-800\/60 { background-color: rgba(30, 41, 59, 0.6); }
.border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.8); }
[data-bs-theme="dark"] .dark\:border-slate-700\/80, .dark .dark\:border-slate-700\/80 { border-color: rgba(51, 65, 85, 0.8); }
.shadow-indigo-600\/20 { --tw-shadow-color: rgba(79, 70, 229, 0.2); }
[data-bs-theme="dark"] .dark\:hover\:border-indigo-500\/50:hover, .dark .dark\:hover\:border-indigo-500\/50:hover { border-color: rgba(99, 102, 241, 0.5); }
[data-bs-theme="dark"] .dark\:bg-indigo-950\/70, .dark .dark\:bg-indigo-950\/70 { background-color: rgba(30, 27, 75, 0.7); }
[data-bs-theme="dark"] .dark\:border-indigo-900\/50, .dark .dark\:border-indigo-900\/50 { border-color: rgba(49, 46, 129, 0.5); }
.bg-slate-50\/70 { background-color: rgba(248, 250, 252, 0.7); }
[data-bs-theme="dark"] .dark\:bg-slate-800\/50, .dark .dark\:bg-slate-800\/50 { background-color: rgba(30, 41, 59, 0.5); }
.hover\:bg-slate-50\/50:hover { background-color: rgba(248, 250, 252, 0.5); }
[data-bs-theme="dark"] .dark\:hover\:bg-slate-800\/40:hover, .dark .dark\:hover\:bg-slate-800\/40:hover { background-color: rgba(30, 41, 59, 0.4); }
[data-bs-theme="dark"] .dark\:bg-indigo-950\/60, .dark .dark\:bg-indigo-950\/60 { background-color: rgba(30, 27, 75, 0.6); }
[data-bs-theme="dark"] .dark\:border-indigo-900\/40, .dark .dark\:border-indigo-900\/40 { border-color: rgba(49, 46, 129, 0.4); }
[data-bs-theme="dark"] .dark\:bg-emerald-950\/80, .dark .dark\:bg-emerald-950\/80 { background-color: rgba(2, 44, 34, 0.8); }
[data-bs-theme="dark"] .dark\:border-emerald-800\/60, .dark .dark\:border-emerald-800\/60 { border-color: rgba(6, 95, 70, 0.6); }
[data-bs-theme="dark"] .dark\:hover\:bg-indigo-900\/60:hover, .dark .dark\:hover\:bg-indigo-900\/60:hover { background-color: rgba(49, 46, 129, 0.6); }
[data-bs-theme="dark"] .dark\:hover\:bg-rose-900\/60:hover, .dark .dark\:hover\:bg-rose-900\/60:hover { background-color: rgba(136, 19, 55, 0.6); }
[data-bs-theme="dark"] .dark\:border-rose-900\/40, .dark .dark\:border-rose-900\/40 { border-color: rgba(136, 19, 55, 0.4); }
.border-rose-200\/90 { border-color: rgba(254, 205, 211, 0.9); }
[data-bs-theme="dark"] .dark\:border-rose-900\/50, .dark .dark\:border-rose-900\/50 { border-color: rgba(136, 19, 55, 0.5); }
[data-bs-theme="dark"] .dark\:bg-rose-950\/70, .dark .dark\:bg-rose-950\/70 { background-color: rgba(76, 5, 25, 0.7); }
.bg-rose-50\/50 { background-color: rgba(255, 241, 242, 0.5); }
[data-bs-theme="dark"] .dark\:bg-rose-950\/20, .dark .dark\:bg-rose-950\/20 { background-color: rgba(76, 5, 25, 0.2); }
[data-bs-theme="dark"] .dark\:border-rose-900\/30, .dark .dark\:border-rose-900\/30 { border-color: rgba(136, 19, 55, 0.3); }
.bg-slate-50\/50 { background-color: rgba(248, 250, 252, 0.5); }
[data-bs-theme="dark"] .dark\:bg-slate-850\/40, .dark .dark\:bg-slate-850\/40 { background-color: rgba(22, 32, 50, 0.4); }
[data-bs-theme="dark"] .dark\:bg-slate-850\/30, .dark .dark\:bg-slate-850\/30 { background-color: rgba(22, 32, 50, 0.3); }
.shadow-indigo-500\/20 { --tw-shadow-color: rgba(99, 102, 241, 0.2); }
[data-bs-theme="dark"] .dark\:border-rose-800\/60, .dark .dark\:border-rose-800\/60 { border-color: rgba(159, 18, 57, 0.6); }
.border-rose-200\/70 { border-color: rgba(254, 205, 211, 0.7); }
[data-bs-theme="dark"] .dark\:bg-slate-900\/50, .dark .dark\:bg-slate-900\/50 { background-color: rgba(15, 23, 42, 0.5); }
.bg-slate-50\/60 { background-color: rgba(248, 250, 252, 0.6); }
[data-bs-theme="dark"] .dark\:bg-slate-900\/60, .dark .dark\:bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.6); }
.bg-amber-50\/90 { background-color: rgba(255, 251, 235, 0.9); }
[data-bs-theme="dark"] .dark\:bg-amber-950\/40, .dark .dark\:bg-amber-950\/40 { background-color: rgba(69, 26, 3, 0.4); }
[data-bs-theme="dark"] .dark\:border-amber-800\/60, .dark .dark\:border-amber-800\/60 { border-color: rgba(146, 64, 14, 0.6); }
[data-bs-theme="dark"] .dark\:bg-amber-900\/60, .dark .dark\:bg-amber-900\/60 { background-color: rgba(120, 53, 15, 0.6); }
.shadow-rose-500\/20 { --tw-shadow-color: rgba(244, 63, 94, 0.2); }
[data-bs-theme="dark"] .dark\:bg-indigo-950\/50, .dark .dark\:bg-indigo-950\/50 { background-color: rgba(30, 27, 75, 0.5); }
[data-bs-theme="dark"] .dark\:bg-indigo-950\/40, .dark .dark\:bg-indigo-950\/40 { background-color: rgba(30, 27, 75, 0.4); }
.bg-slate-100\/70 { background-color: rgba(241, 245, 249, 0.7); }
.border-slate-200\/60 { border-color: rgba(226, 232, 240, 0.6); }
[data-bs-theme="dark"] .dark\:border-slate-700\/60, .dark .dark\:border-slate-700\/60 { border-color: rgba(51, 65, 85, 0.6); }
.border-slate-300\/80 { border-color: rgba(203, 213, 225, 0.8); }
[data-bs-theme="dark"] .dark\:bg-emerald-950\/50, .dark .dark\:bg-emerald-950\/50 { background-color: rgba(2, 44, 34, 0.5); }
[data-bs-theme="dark"] .dark\:border-emerald-900\/40, .dark .dark\:border-emerald-900\/40 { border-color: rgba(6, 78, 59, 0.4); }
[data-bs-theme="dark"] .dark\:bg-amber-950\/50, .dark .dark\:bg-amber-950\/50 { background-color: rgba(69, 26, 3, 0.5); }
[data-bs-theme="dark"] .dark\:border-amber-900\/40, .dark .dark\:border-amber-900\/40 { border-color: rgba(120, 53, 15, 0.4); }
[data-bs-theme="dark"] .dark\:bg-sky-950\/50, .dark .dark\:bg-sky-950\/50 { background-color: rgba(8, 47, 73, 0.5); }
[data-bs-theme="dark"] .dark\:border-sky-900\/40, .dark .dark\:border-sky-900\/40 { border-color: rgba(12, 74, 110, 0.4); }
[data-bs-theme="dark"] .dark\:bg-cyan-950\/60, .dark .dark\:bg-cyan-950\/60 { background-color: rgba(8, 51, 68, 0.6); }
[data-bs-theme="dark"] .dark\:bg-purple-950\/60, .dark .dark\:bg-purple-950\/60 { background-color: rgba(59, 7, 100, 0.6); }
.bg-indigo-100\/80 { background-color: rgba(224, 231, 255, 0.8); }
.bg-slate-200\/80 { background-color: rgba(226, 232, 240, 0.8); }
.bg-cyan-100\/80 { background-color: rgba(207, 250, 254, 0.8); }
.bg-emerald-50\/70 { background-color: rgba(236, 253, 245, 0.7); }
[data-bs-theme="dark"] .dark\:bg-emerald-950\/30, .dark .dark\:bg-emerald-950\/30 { background-color: rgba(2, 44, 34, 0.3); }
.bg-indigo-50\/70 { background-color: rgba(238, 242, 255, 0.7); }
[data-bs-theme="dark"] .dark\:bg-indigo-950\/30, .dark .dark\:bg-indigo-950\/30 { background-color: rgba(30, 27, 75, 0.3); }
.focus-within\:ring-indigo-500\/15:focus-within { --tw-ring-color: rgba(99, 102, 241, 0.15); }
.bg-indigo-50\/80 { background-color: rgba(238, 242, 255, 0.8); }
.bg-slate-200\/70 { background-color: rgba(226, 232, 240, 0.7); }
.hover\:bg-slate-300\/80:hover { background-color: rgba(203, 213, 225, 0.8); }
[data-bs-theme="dark"] .dark\:bg-slate-900\/70, .dark .dark\:bg-slate-900\/70 { background-color: rgba(15, 23, 42, 0.7); }
.shadow-indigo-500\/25 { --tw-shadow-color: rgba(99, 102, 241, 0.25); }
.border-indigo-200\/80 { border-color: rgba(199, 210, 254, 0.8); }
[data-bs-theme="dark"] .dark\:border-indigo-800\/80, .dark .dark\:border-indigo-800\/80 { border-color: rgba(55, 48, 163, 0.8); }
[data-bs-theme="dark"] .dark\:hover\:border-indigo-500\/60:hover, .dark .dark\:hover\:border-indigo-500\/60:hover { border-color: rgba(99, 102, 241, 0.6); }
.bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1); }
.border-rose-500\/20 { border-color: rgba(244, 63, 94, 0.2); }
.hover\:shadow-indigo-500\/25:hover { --tw-shadow-color: rgba(99, 102, 241, 0.25); }
.ring-indigo-400\/30 { --tw-ring-color: rgba(129, 140, 248, 0.3); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
[data-bs-theme="dark"] .group:hover .dark\:group-hover\:bg-indigo-950\/50, .dark .group:hover .dark\:group-hover\:bg-indigo-950\/50 { background-color: rgba(30, 27, 75, 0.5); }
.hover\:bg-slate-50\/80:hover { background-color: rgba(248, 250, 252, 0.8); }
[data-bs-theme="dark"] .dark\:hover\:bg-slate-800\/50:hover, .dark .dark\:hover\:bg-slate-800\/50:hover { background-color: rgba(30, 41, 59, 0.5); }
.border-rose-200\/80 { border-color: rgba(254, 205, 211, 0.8); }
[data-bs-theme="dark"] .dark\:bg-emerald-950\/60, .dark .dark\:bg-emerald-950\/60 { background-color: rgba(2, 44, 34, 0.6); }
.border-emerald-200\/80 { border-color: rgba(167, 243, 208, 0.8); }
[data-bs-theme="dark"] .dark\:border-indigo-800\/60, .dark .dark\:border-indigo-800\/60 { border-color: rgba(55, 48, 163, 0.6); }
.border-amber-200\/80 { border-color: rgba(253, 230, 138, 0.8); }
[data-bs-theme="dark"] .dark\:bg-emerald-950\/40, .dark .dark\:bg-emerald-950\/40 { background-color: rgba(2, 44, 34, 0.4); }
[data-bs-theme="dark"] .dark\:bg-rose-950\/40, .dark .dark\:bg-rose-950\/40 { background-color: rgba(76, 5, 25, 0.4); }
[data-bs-theme="dark"] .dark\:bg-blue-950\/40, .dark .dark\:bg-blue-950\/40 { background-color: rgba(23, 37, 84, 0.4); }
.border-blue-200\/80 { border-color: rgba(191, 219, 254, 0.8); }
[data-bs-theme="dark"] .dark\:border-blue-800\/60, .dark .dark\:border-blue-800\/60 { border-color: rgba(30, 64, 175, 0.6); }
.bg-emerald-50\/90 { background-color: rgba(236, 253, 245, 0.9); }
.border-emerald-200\/90 { border-color: rgba(167, 243, 208, 0.9); }
.text-emerald-700\/80 { color: rgba(4, 120, 87, 0.8); }
[data-bs-theme="dark"] .dark\:text-emerald-400\/80, .dark .dark\:text-emerald-400\/80 { color: rgba(52, 211, 153, 0.8); }
[data-bs-theme="dark"] .dark\:bg-slate-800\/80, .dark .dark\:bg-slate-800\/80 { background-color: rgba(30, 41, 59, 0.8); }
.border-slate-200\/70 { border-color: rgba(226, 232, 240, 0.7); }
.bg-amber-50\/80 { background-color: rgba(255, 251, 235, 0.8); }
[data-bs-theme="dark"] .dark\:bg-amber-950\/30, .dark .dark\:bg-amber-950\/30 { background-color: rgba(69, 26, 3, 0.3); }
.border-amber-200\/60 { border-color: rgba(253, 230, 138, 0.6); }
[data-bs-theme="dark"] .dark\:border-amber-800\/50, .dark .dark\:border-amber-800\/50 { border-color: rgba(146, 64, 14, 0.5); }
.bg-slate-100\/90 { background-color: rgba(241, 245, 249, 0.9); }
[data-bs-theme="dark"] .dark\:bg-amber-950\/70, .dark .dark\:bg-amber-950\/70 { background-color: rgba(69, 26, 3, 0.7); }
[data-bs-theme="dark"] .dark\:border-amber-900\/50, .dark .dark\:border-amber-900\/50 { border-color: rgba(120, 53, 15, 0.5); }
[data-bs-theme="dark"] .dark\:border-emerald-900\/60, .dark .dark\:border-emerald-900\/60 { border-color: rgba(6, 78, 59, 0.6); }
[data-bs-theme="dark"] .dark\:bg-amber-950\/60, .dark .dark\:bg-amber-950\/60 { background-color: rgba(69, 26, 3, 0.6); }
[data-bs-theme="dark"] .dark\:border-amber-900\/60, .dark .dark\:border-amber-900\/60 { border-color: rgba(120, 53, 15, 0.6); }
[data-bs-theme="dark"] .dark\:border-indigo-900\/60, .dark .dark\:border-indigo-900\/60 { border-color: rgba(49, 46, 129, 0.6); }
.bg-indigo-500\/20 { background-color: rgba(99, 102, 241, 0.2); }
.border-indigo-400\/30 { border-color: rgba(129, 140, 248, 0.3); }
.text-indigo-200\/80 { color: rgba(199, 210, 254, 0.8); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
.border-indigo-200\/70 { border-color: rgba(199, 210, 254, 0.7); }
.bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.1); }
.border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.2); }
.bg-sky-500\/10 { background-color: rgba(14, 165, 233, 0.1); }
.border-sky-500\/20 { border-color: rgba(14, 165, 233, 0.2); }
[data-bs-theme="dark"] .dark\:bg-slate-800\/30, .dark .dark\:bg-slate-800\/30 { background-color: rgba(30, 41, 59, 0.3); }
.bg-slate-50\/90 { background-color: rgba(248, 250, 252, 0.9); }
[data-bs-theme="dark"] .dark\:border-slate-700\/70, .dark .dark\:border-slate-700\/70 { border-color: rgba(51, 65, 85, 0.7); }
[data-bs-theme="dark"] .dark\:bg-slate-900\/40, .dark .dark\:bg-slate-900\/40 { background-color: rgba(15, 23, 42, 0.4); }
[data-bs-theme="dark"] .dark\:border-slate-800\/80, .dark .dark\:border-slate-800\/80 { border-color: rgba(30, 41, 59, 0.8); }
.bg-indigo-500\/5 { background-color: rgba(99, 102, 241, 0.05); }
.bg-purple-500\/5 { background-color: rgba(168, 85, 247, 0.05); }
.group:hover .group-hover\:shadow-indigo-500\/40 { --tw-shadow-color: rgba(99, 102, 241, 0.4); }
.shadow-emerald-500\/25 { --tw-shadow-color: rgba(16, 185, 129, 0.25); }
.group:hover .group-hover\:shadow-emerald-500\/40 { --tw-shadow-color: rgba(16, 185, 129, 0.4); }
[data-bs-theme="dark"] .dark\:bg-emerald-950\/70, .dark .dark\:bg-emerald-950\/70 { background-color: rgba(2, 44, 34, 0.7); }
.border-emerald-200\/70 { border-color: rgba(167, 243, 208, 0.7); }
.shadow-sky-500\/25 { --tw-shadow-color: rgba(14, 165, 233, 0.25); }
.group:hover .group-hover\:shadow-sky-500\/40 { --tw-shadow-color: rgba(14, 165, 233, 0.4); }
[data-bs-theme="dark"] .dark\:bg-sky-950\/70, .dark .dark\:bg-sky-950\/70 { background-color: rgba(8, 47, 73, 0.7); }
.border-sky-200\/70 { border-color: rgba(186, 230, 253, 0.7); }
[data-bs-theme="dark"] .dark\:border-sky-800\/60, .dark .dark\:border-sky-800\/60 { border-color: rgba(7, 89, 133, 0.6); }
.shadow-amber-500\/25 { --tw-shadow-color: rgba(245, 158, 11, 0.25); }
.group:hover .group-hover\:shadow-amber-500\/40 { --tw-shadow-color: rgba(245, 158, 11, 0.4); }
.border-amber-200\/70 { border-color: rgba(253, 230, 138, 0.7); }
.shadow-purple-500\/25 { --tw-shadow-color: rgba(168, 85, 247, 0.25); }
.group:hover .group-hover\:shadow-purple-500\/40 { --tw-shadow-color: rgba(168, 85, 247, 0.4); }
[data-bs-theme="dark"] .dark\:bg-purple-950\/70, .dark .dark\:bg-purple-950\/70 { background-color: rgba(59, 7, 100, 0.7); }
.border-purple-200\/70 { border-color: rgba(233, 213, 255, 0.7); }
[data-bs-theme="dark"] .dark\:border-purple-800\/60, .dark .dark\:border-purple-800\/60 { border-color: rgba(107, 33, 168, 0.6); }
.border-slate-800\/90 { border-color: rgba(30, 41, 59, 0.9); }
.hover\:bg-white\/15:hover { background-color: rgba(255, 255, 255, 0.15); }
.shadow-indigo-500\/30 { --tw-shadow-color: rgba(99, 102, 241, 0.3); }
.hover\:shadow-indigo-500\/50:hover { --tw-shadow-color: rgba(99, 102, 241, 0.5); }
.shadow-black\/20 { --tw-shadow-color: rgba(0, 0, 0, 0.2); }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2); }
.shadow-blue-500\/25 { --tw-shadow-color: rgba(59, 130, 246, 0.25); }
.bg-blue-500\/20 { background-color: rgba(59, 130, 246, 0.2); }
.bg-rose-500\/20 { background-color: rgba(244, 63, 94, 0.2); }
[data-bs-theme="dark"] .dark\:bg-amber-500\/20, .dark .dark\:bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.2); }
.ring-slate-900\/10 { --tw-ring-color: rgba(15, 23, 42, 0.1); }
[data-bs-theme="dark"] .dark\:ring-white\/15, .dark .dark\:ring-white\/15 { --tw-ring-color: rgba(255, 255, 255, 0.15); }
.ring-white\/20 { --tw-ring-color: rgba(255, 255, 255, 0.2); }
[data-bs-theme="dark"] .dark\:border-blue-800\/80, .dark .dark\:border-blue-800\/80 { border-color: rgba(30, 64, 175, 0.8); }
.border-blue-100\/80 { border-color: rgba(219, 234, 254, 0.8); }
.shadow-blue-600\/30 { --tw-shadow-color: rgba(37, 99, 235, 0.3); }
.hover\:shadow-blue-600\/50:hover { --tw-shadow-color: rgba(37, 99, 235, 0.5); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.bg-indigo-500\/8 { background-color: rgba(99, 102, 241, 0.08); }
.bg-violet-500\/6 { background-color: rgba(139, 92, 246, 0.06); }
.bg-indigo-50\/90 { background-color: rgba(238, 242, 255, 0.9); }
[data-bs-theme="dark"] .dark\:bg-slate-800\/90, .dark .dark\:bg-slate-800\/90 { background-color: rgba(30, 41, 59, 0.9); }
.ring-indigo-500\/10 { --tw-ring-color: rgba(99, 102, 241, 0.1); }
[data-bs-theme="dark"] .dark\:ring-indigo-500\/20, .dark .dark\:ring-indigo-500\/20 { --tw-ring-color: rgba(99, 102, 241, 0.2); }
.shadow-indigo-600\/30 { --tw-shadow-color: rgba(79, 70, 229, 0.3); }
.shadow-emerald-600\/20 { --tw-shadow-color: rgba(5, 150, 105, 0.2); }
.shadow-blue-600\/20 { --tw-shadow-color: rgba(37, 99, 235, 0.2); }
.shadow-violet-600\/20 { --tw-shadow-color: rgba(124, 58, 237, 0.2); }
.shadow-indigo-600\/15 { --tw-shadow-color: rgba(79, 70, 229, 0.15); }
.shadow-indigo-500\/35 { --tw-shadow-color: rgba(99, 102, 241, 0.35); }
[data-bs-theme="dark"] .dark\:border-indigo-800\/70, .dark .dark\:border-indigo-800\/70 { border-color: rgba(55, 48, 163, 0.7); }
.ring-amber-500\/10 { --tw-ring-color: rgba(245, 158, 11, 0.1); }
[data-bs-theme="dark"] .dark\:ring-amber-500\/20, .dark .dark\:ring-amber-500\/20 { --tw-ring-color: rgba(245, 158, 11, 0.2); }
.shadow-slate-900\/5 { --tw-shadow-color: rgba(15, 23, 42, 0.05); }
.bg-indigo-50\/60 { background-color: rgba(238, 242, 255, 0.6); }
[data-bs-theme="dark"] .dark\:bg-slate-800\/40, .dark .dark\:bg-slate-800\/40 { background-color: rgba(30, 41, 59, 0.4); }
.hover\:bg-slate-50\/60:hover { background-color: rgba(248, 250, 252, 0.6); }
[data-bs-theme="dark"] .dark\:hover\:bg-slate-800\/30:hover, .dark .dark\:hover\:bg-slate-800\/30:hover { background-color: rgba(30, 41, 59, 0.3); }
.bg-indigo-50\/30 { background-color: rgba(238, 242, 255, 0.3); }
[data-bs-theme="dark"] .dark\:bg-indigo-950\/20, .dark .dark\:bg-indigo-950\/20 { background-color: rgba(30, 27, 75, 0.2); }
.border-indigo-100\/60 { border-color: rgba(224, 231, 255, 0.6); }
[data-bs-theme="dark"] .dark\:border-indigo-900\/30, .dark .dark\:border-indigo-900\/30 { border-color: rgba(49, 46, 129, 0.3); }
.shadow-indigo-600\/25 { --tw-shadow-color: rgba(79, 70, 229, 0.25); }
.shadow-emerald-500\/20 { --tw-shadow-color: rgba(16, 185, 129, 0.2); }
.shadow-sky-500\/20 { --tw-shadow-color: rgba(14, 165, 233, 0.2); }
.shadow-amber-500\/20 { --tw-shadow-color: rgba(245, 158, 11, 0.2); }
.border-indigo-100\/90 { border-color: rgba(224, 231, 255, 0.9); }
.text-indigo-500\/10 { color: rgba(99, 102, 241, 0.1); }
[data-bs-theme="dark"] .dark\:text-indigo-400\/10, .dark .dark\:text-indigo-400\/10 { color: rgba(129, 140, 248, 0.1); }
.bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.1); }
[data-bs-theme="dark"] .dark\:bg-indigo-500\/15, .dark .dark\:bg-indigo-500\/15 { background-color: rgba(99, 102, 241, 0.15); }
.hover\:bg-indigo-100\/90:hover { background-color: rgba(224, 231, 255, 0.9); }
.hover\:bg-emerald-100\/90:hover { background-color: rgba(209, 250, 229, 0.9); }
[data-bs-theme="dark"] .dark\:border-emerald-800\/70, .dark .dark\:border-emerald-800\/70 { border-color: rgba(6, 95, 70, 0.7); }
.bg-sky-50\/90 { background-color: rgba(240, 249, 255, 0.9); }
.hover\:bg-sky-100\/90:hover { background-color: rgba(224, 242, 254, 0.9); }
[data-bs-theme="dark"] .dark\:bg-sky-950\/60, .dark .dark\:bg-sky-950\/60 { background-color: rgba(8, 47, 73, 0.6); }
.border-sky-200\/80 { border-color: rgba(186, 230, 253, 0.8); }
[data-bs-theme="dark"] .dark\:border-sky-800\/70, .dark .dark\:border-sky-800\/70 { border-color: rgba(7, 89, 133, 0.7); }
.bg-purple-50\/90 { background-color: rgba(250, 245, 255, 0.9); }
.hover\:bg-purple-100\/90:hover { background-color: rgba(243, 232, 255, 0.9); }
.border-purple-200\/80 { border-color: rgba(233, 213, 255, 0.8); }
[data-bs-theme="dark"] .dark\:border-purple-800\/70, .dark .dark\:border-purple-800\/70 { border-color: rgba(107, 33, 168, 0.7); }
.hover\:shadow-indigo-600\/40:hover { --tw-shadow-color: rgba(79, 70, 229, 0.4); }
.border-emerald-100\/90 { border-color: rgba(209, 250, 229, 0.9); }
[data-bs-theme="dark"] .dark\:border-emerald-900\/50, .dark .dark\:border-emerald-900\/50 { border-color: rgba(6, 78, 59, 0.5); }
.text-emerald-500\/10 { color: rgba(16, 185, 129, 0.1); }
[data-bs-theme="dark"] .dark\:text-emerald-400\/10, .dark .dark\:text-emerald-400\/10 { color: rgba(52, 211, 153, 0.1); }
.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1); }
[data-bs-theme="dark"] .dark\:bg-emerald-500\/15, .dark .dark\:bg-emerald-500\/15 { background-color: rgba(16, 185, 129, 0.15); }
.shadow-emerald-600\/25 { --tw-shadow-color: rgba(5, 150, 105, 0.25); }
.hover\:shadow-emerald-600\/40:hover { --tw-shadow-color: rgba(5, 150, 105, 0.4); }
.shadow-rose-500\/25 { --tw-shadow-color: rgba(244, 63, 94, 0.25); }
.bg-cyan-500\/5 { background-color: rgba(6, 182, 212, 0.05); }
.bg-purple-50\/80 { background-color: rgba(250, 245, 255, 0.8); }
[data-bs-theme="dark"] .dark\:bg-purple-950\/50, .dark .dark\:bg-purple-950\/50 { background-color: rgba(59, 7, 100, 0.5); }
.shadow-purple-500\/20 { --tw-shadow-color: rgba(168, 85, 247, 0.2); }
.bg-sky-50\/80 { background-color: rgba(240, 249, 255, 0.8); }
.bg-emerald-50\/80 { background-color: rgba(236, 253, 245, 0.8); }
[data-bs-theme="dark"] .dark\:bg-cyan-950\/70, .dark .dark\:bg-cyan-950\/70 { background-color: rgba(8, 51, 68, 0.7); }
.border-cyan-200\/70 { border-color: rgba(165, 243, 252, 0.7); }
[data-bs-theme="dark"] .dark\:border-cyan-800\/60, .dark .dark\:border-cyan-800\/60 { border-color: rgba(21, 94, 117, 0.6); }
.shadow-cyan-500\/25 { --tw-shadow-color: rgba(6, 182, 212, 0.25); }
.bg-cyan-50\/80 { background-color: rgba(236, 254, 255, 0.8); }
[data-bs-theme="dark"] .dark\:bg-cyan-950\/50, .dark .dark\:bg-cyan-950\/50 { background-color: rgba(8, 51, 68, 0.5); }
.shadow-cyan-500\/20 { --tw-shadow-color: rgba(6, 182, 212, 0.2); }
.text-white\/95 { color: rgba(255, 255, 255, 0.95); }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.15); }
.hover\:bg-white\/25:hover { background-color: rgba(255, 255, 255, 0.25); }
.border-white\/25 { border-color: rgba(255, 255, 255, 0.25); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/30 { color: rgba(255, 255, 255, 0.3); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
[data-bs-theme="dark"] .dark\:bg-white\/10, .dark .dark\:bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme="dark"] .dark\:hover\:bg-white\/20:hover, .dark .dark\:hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
[data-bs-theme="dark"] .dark\:border-white\/10, .dark .dark\:border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme="dark"] .dark\:hover\:bg-white\/15:hover, .dark .dark\:hover\:bg-white\/15:hover { background-color: rgba(255, 255, 255, 0.15); }
[data-bs-theme="dark"] .dark\:bg-rose-500\/10, .dark .dark\:bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1); }
[data-bs-theme="dark"] .dark\:border-rose-500\/30, .dark .dark\:border-rose-500\/30 { border-color: rgba(244, 63, 94, 0.3); }
.hover\:bg-slate-50\/40:hover { background-color: rgba(248, 250, 252, 0.4); }
.bg-slate-50\/80 { background-color: rgba(248, 250, 252, 0.8); }
.ring-indigo-500\/20 { --tw-ring-color: rgba(99, 102, 241, 0.2); }
[data-bs-theme="dark"] .dark\:bg-blue-950\/50, .dark .dark\:bg-blue-950\/50 { background-color: rgba(23, 37, 84, 0.5); }
[data-bs-theme="dark"] .dark\:border-blue-900\/40, .dark .dark\:border-blue-900\/40 { border-color: rgba(30, 58, 138, 0.4); }
.hover\:shadow-indigo-600\/50:hover { --tw-shadow-color: rgba(79, 70, 229, 0.5); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/60 { background-color: rgba(255, 255, 255, 0.6); }
.shadow-indigo-500\/10 { --tw-shadow-color: rgba(99, 102, 241, 0.1); }
[data-bs-theme="dark"] .dark\:bg-sky-950\/40, .dark .dark\:bg-sky-950\/40 { background-color: rgba(8, 47, 73, 0.4); }
[data-bs-theme="dark"] .dark\:bg-sky-900\/60, .dark .dark\:bg-sky-900\/60 { background-color: rgba(12, 74, 110, 0.6); }
.border-indigo-200\/60 { border-color: rgba(199, 210, 254, 0.6); }
.hover\:bg-indigo-50\/50:hover { background-color: rgba(238, 242, 255, 0.5); }
[data-bs-theme="dark"] .dark\:bg-indigo-950\/80, .dark .dark\:bg-indigo-950\/80 { background-color: rgba(30, 27, 75, 0.8); }
[data-bs-theme="dark"] .dark\:bg-blue-950\/60, .dark .dark\:bg-blue-950\/60 { background-color: rgba(23, 37, 84, 0.6); }
[data-bs-theme="dark"] .dark\:hover\:border-indigo-500\/40:hover, .dark .dark\:hover\:border-indigo-500\/40:hover { border-color: rgba(99, 102, 241, 0.4); }
.hover\:bg-slate-50\/70:hover { background-color: rgba(248, 250, 252, 0.7); }
[data-bs-theme="dark"] .dark\:hover\:bg-slate-900\/40:hover, .dark .dark\:hover\:bg-slate-900\/40:hover { background-color: rgba(15, 23, 42, 0.4); }
[data-bs-theme="dark"] .dark\:border-emerald-800\/40, .dark .dark\:border-emerald-800\/40 { border-color: rgba(6, 95, 70, 0.4); }
.bg-emerald-100\/80 { background-color: rgba(209, 250, 229, 0.8); }
[data-bs-theme="dark"] .dark\:bg-emerald-900\/40, .dark .dark\:bg-emerald-900\/40 { background-color: rgba(6, 78, 59, 0.4); }
[data-bs-theme="dark"] .dark\:border-emerald-700\/50, .dark .dark\:border-emerald-700\/50 { border-color: rgba(4, 120, 87, 0.5); }
[data-bs-theme="dark"] .dark\:bg-slate-900\/80, .dark .dark\:bg-slate-900\/80 { background-color: rgba(15, 23, 42, 0.8); }
[data-bs-theme="dark"] .dark\:hover\:bg-slate-800\/60:hover, .dark .dark\:hover\:bg-slate-800\/60:hover { background-color: rgba(30, 41, 59, 0.6); }
[data-bs-theme="dark"] .dark\:hover\:bg-red-950\/40:hover, .dark .dark\:hover\:bg-red-950\/40:hover { background-color: rgba(69, 10, 10, 0.4); }

/* ==========================================================================
   CLIENT AREA DARK THEME MASTER UNIFICATION (ALL PAGES & VIEWPORTS)
   ========================================================================== */

/* 1. Status Badges (.nx-badge-status / .label.status) in Dark Mode */
[data-bs-theme="dark"] .status-active.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-active,
[data-bs-theme="dark"] .status-paid.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-paid,
[data-bs-theme="dark"] .label.status.status-active,
[data-bs-theme="dark"] .label.status.status-paid,
.dark .status-active.nx-badge-status,
.dark .nx-badge-status.status-active,
.dark .status-paid.nx-badge-status,
.dark .nx-badge-status.status-paid,
.dark .label.status.status-active,
.dark .label.status.status-paid {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .status-active .nx-status-dot-sm,
[data-bs-theme="dark"] .status-paid .nx-status-dot-sm,
.dark .status-active .nx-status-dot-sm,
.dark .status-paid .nx-status-dot-sm {
    background: #34d399 !important;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25) !important;
}

[data-bs-theme="dark"] .status-pending.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-pending,
[data-bs-theme="dark"] .status-unpaid.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-unpaid,
[data-bs-theme="dark"] .label.status.status-pending,
[data-bs-theme="dark"] .label.status.status-unpaid,
.dark .status-pending.nx-badge-status,
.dark .nx-badge-status.status-pending,
.dark .status-unpaid.nx-badge-status,
.dark .nx-badge-status.status-unpaid,
.dark .label.status.status-pending,
.dark .label.status.status-unpaid {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .status-suspended.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-suspended,
[data-bs-theme="dark"] .status-expired.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-expired,
[data-bs-theme="dark"] .label.status.status-suspended,
[data-bs-theme="dark"] .label.status.status-expired,
.dark .status-suspended.nx-badge-status,
.dark .nx-badge-status.status-suspended,
.dark .status-expired.nx-badge-status,
.dark .nx-badge-status.status-expired,
.dark .label.status.status-suspended,
.dark .label.status.status-expired {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .status-terminated.nx-badge-status,
[data-bs-theme="dark"] .status-cancelled.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-terminated,
[data-bs-theme="dark"] .nx-badge-status.status-cancelled,
[data-bs-theme="dark"] .label.status.status-terminated,
[data-bs-theme="dark"] .label.status.status-cancelled,
.dark .status-terminated.nx-badge-status,
.dark .status-cancelled.nx-badge-status,
.dark .nx-badge-status.status-terminated,
.dark .nx-badge-status.status-cancelled,
.dark .label.status.status-terminated,
.dark .label.status.status-cancelled {
    background: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .status-refunded.nx-badge-status,
[data-bs-theme="dark"] .nx-badge-status.status-refunded,
[data-bs-theme="dark"] .label.status.status-refunded,
.dark .status-refunded.nx-badge-status,
.dark .nx-badge-status.status-refunded,
.dark .label.status.status-refunded {
    background: rgba(168, 85, 247, 0.16) !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
    color: #c084fc !important;
}

/* 2. Client Area Dashboard Panels, Sidebars & Cards in Dark Mode (Desktop & Mobile) */
[data-bs-theme="dark"] .client-home-cards .card,
.dark .client-home-cards .card,
[data-bs-theme="dark"] div[menuitemname="Active Products/Services"],
[data-bs-theme="dark"] div[menuitemname="Recent Support Tickets"],
[data-bs-theme="dark"] div[menuitemname="Recent News"],
[data-bs-theme="dark"] div[menuitemname="Affiliate Program"],
[data-bs-theme="dark"] div[menuitemname="Register a New Domain"],
[data-bs-theme="dark"] div[menuitemname="Unpaid Invoices"],
[data-bs-theme="dark"] div[menuitemname="Overdue Invoices"],
[data-bs-theme="dark"] div[menuitemname="Domains Expiring Soon"],
[data-bs-theme="dark"] div[menuitemname="Expiring Domains"],
.dark div[menuitemname="Active Products/Services"],
.dark div[menuitemname="Recent Support Tickets"],
.dark div[menuitemname="Recent News"],
.dark div[menuitemname="Affiliate Program"],
.dark div[menuitemname="Register a New Domain"],
.dark div[menuitemname="Unpaid Invoices"],
.dark div[menuitemname="Overdue Invoices"],
.dark div[menuitemname="Domains Expiring Soon"],
.dark div[menuitemname="Expiring Domains"] {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .client-home-cards .list-group .list-group-item,
[data-bs-theme="dark"] div[menuitemname="Active Products/Services"] .list-group-item,
[data-bs-theme="dark"] div[menuitemname="Recent Support Tickets"] .list-group-item,
[data-bs-theme="dark"] div[menuitemname="Recent News"] .list-group-item,
[data-bs-theme="dark"] div[menuitemname="Domains Expiring Soon"] .list-group-item,
[data-bs-theme="dark"] div[menuitemname="Expiring Domains"] .list-group-item,
.dark .client-home-cards .list-group .list-group-item,
.dark div[menuitemname="Active Products/Services"] .list-group-item,
.dark div[menuitemname="Recent Support Tickets"] .list-group-item,
.dark div[menuitemname="Recent News"] .list-group-item,
.dark div[menuitemname="Domains Expiring Soon"] .list-group-item,
.dark div[menuitemname="Expiring Domains"] .list-group-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] div[menuitemname="Client Details"] .card-body,
.dark div[menuitemname="Client Details"] .card-body {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] div[menuitemname="Client Details"] .card-body strong,
.dark div[menuitemname="Client Details"] .card-body strong {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] div[menuitemname="Client Details"] .card-body em,
.dark div[menuitemname="Client Details"] .card-body em {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] div[menuitemname="Client Contacts"] .card-footer .btn,
.dark div[menuitemname="Client Contacts"] .card-footer .btn {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] div[menuitemname="Client Contacts"] .card-footer .btn:hover,
.dark div[menuitemname="Client Contacts"] .card-footer .btn:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .nx-sidebar-column .nx-side-widget.nx-trust-card,
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .nx-side-widget.nx-trust-card,
.dark .nx-sidebar-column .nx-side-widget.nx-trust-card,
.dark #order-standard_cart .cart-sidebar .nx-side-widget.nx-trust-card {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

/* 3. Mobile Client Area Tables & Cards (< 768px) Dark Mode Guarantee */
@media (max-width: 767.98px) {
    [data-bs-theme="dark"] .nx-services-table tbody tr,
    [data-bs-theme="dark"] .nx-domains-table tbody tr,
    [data-bs-theme="dark"] .nx-invoices-table tbody tr,
    [data-bs-theme="dark"] .nx-quotes-table tbody tr,
    [data-bs-theme="dark"] #tableServicesList tbody tr,
    [data-bs-theme="dark"] #tableDomainsList tbody tr,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr,
    [data-bs-theme="dark"] #tableQuotesList tbody tr,
    [data-bs-theme="dark"] #tableTicketsList tbody tr,
    [data-bs-theme="dark"] #tableEmailsList tbody tr,
    [data-bs-theme="dark"] table.table-list:not(#tableDomainPricing) tbody tr,
    [data-bs-theme="dark"] table.table-list tbody tr,
    .dark .nx-services-table tbody tr,
    .dark .nx-domains-table tbody tr,
    .dark .nx-invoices-table tbody tr,
    .dark .nx-quotes-table tbody tr,
    .dark #tableServicesList tbody tr,
    .dark #tableDomainsList tbody tr,
    .dark #tableInvoicesList tbody tr,
    .dark #tableQuotesList tbody tr,
    .dark #tableTicketsList tbody tr,
    .dark #tableEmailsList tbody tr,
    .dark table.table-list:not(#tableDomainPricing) tbody tr,
    .dark table.table-list tbody tr {
        background: #151f32 !important;
        background-color: #151f32 !important;
        border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    [data-bs-theme="dark"] .nx-services-table tbody tr td,
    [data-bs-theme="dark"] .nx-domains-table tbody tr td,
    [data-bs-theme="dark"] .nx-invoices-table tbody tr td,
    [data-bs-theme="dark"] .nx-quotes-table tbody tr td,
    [data-bs-theme="dark"] #tableServicesList tbody tr td,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td,
    [data-bs-theme="dark"] #tableQuotesList tbody tr td,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td,
    [data-bs-theme="dark"] #tableEmailsList tbody tr td,
    [data-bs-theme="dark"] table.table-list:not(#tableDomainPricing) tbody tr td,
    [data-bs-theme="dark"] table.table-list:not(#tableDomainPricing) tbody tr > *,
    .dark .nx-services-table tbody tr td,
    .dark .nx-domains-table tbody tr td,
    .dark .nx-invoices-table tbody tr td,
    .dark .nx-quotes-table tbody tr td,
    .dark #tableServicesList tbody tr td,
    .dark #tableDomainsList tbody tr td,
    .dark #tableInvoicesList tbody tr td,
    .dark #tableQuotesList tbody tr td,
    .dark #tableTicketsList tbody tr td,
    .dark #tableEmailsList tbody tr td,
    .dark table.table-list:not(#tableDomainPricing) tbody tr td,
    .dark table.table-list:not(#tableDomainPricing) tbody tr > * {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-pricing .nx-table-amount,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invtotal .nx-inv-amount,
    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-product .nx-table-product-title,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-domain .nx-table-domain-title,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invnum .nx-inv-number,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td .nx-ticket-subject,
    [data-bs-theme="dark"] #tableEmailsList tbody tr td .nx-mail-title,
    .dark #tableServicesList tbody tr td.nx-td-pricing .nx-table-amount,
    .dark #tableInvoicesList tbody tr td.nx-td-invtotal .nx-inv-amount,
    .dark #tableServicesList tbody tr td.nx-td-product .nx-table-product-title,
    .dark #tableDomainsList tbody tr td.nx-td-domain .nx-table-domain-title,
    .dark #tableInvoicesList tbody tr td.nx-td-invnum .nx-inv-number,
    .dark #tableTicketsList tbody tr td .nx-ticket-subject,
    .dark #tableEmailsList tbody tr td .nx-mail-title {
        color: #f8fafc !important;
    }

    [data-bs-theme="dark"] #tableServicesList tbody tr td.nx-td-duedate .nx-date-badge,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-regdate .nx-date-badge,
    [data-bs-theme="dark"] #tableDomainsList tbody tr td.nx-td-duedate .nx-date-badge,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdate .nx-date-badge,
    [data-bs-theme="dark"] #tableInvoicesList tbody tr td.nx-td-invdue .nx-date-badge,
    [data-bs-theme="dark"] #tableTicketsList tbody tr td .nx-date-pill,
    [data-bs-theme="dark"] #tableEmailsList tbody tr td .nx-date-pill,
    .dark #tableServicesList tbody tr td.nx-td-duedate .nx-date-badge,
    .dark #tableDomainsList tbody tr td.nx-td-regdate .nx-date-badge,
    .dark #tableDomainsList tbody tr td.nx-td-duedate .nx-date-badge,
    .dark #tableInvoicesList tbody tr td.nx-td-invdate .nx-date-badge,
    .dark #tableInvoicesList tbody tr td.nx-td-invdue .nx-date-badge,
    .dark #tableTicketsList tbody tr td .nx-date-pill,
    .dark #tableEmailsList tbody tr td .nx-date-pill {
        color: #e2e8f0 !important;
    }

    [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
    .dark .dataTables_wrapper .dataTables_info {
        color: #94a3b8 !important;
    }
}