/* Client Details Dark Mode */
body.dark-mode .client-details-container {
    background: #2a2a2a !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .client-details-container label.control-label {
    color: #ffffff !important;
}

body.dark-mode .client-details-container .form-control,
body.dark-mode .client-details-container select,
body.dark-mode .client-details-container textarea {
    background: #404040 !important;
    color: #ffffff !important;
    border: 2px solid #555555 !important;
}

body.dark-mode .client-details-container .form-control:focus,
body.dark-mode .client-details-container select:focus,
body.dark-mode .client-details-container textarea:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247,134,59,0.18) !important;
    background: #4a4a4a !important;
}

body.dark-mode .client-details-container .btn-default {
    background: #2a2a2a !important;
    color: #f7863b !important;
    border: 2px solid #f7863b !important;
}

body.dark-mode .client-details-container .btn-default:hover {
    background: #f7863b !important;
    color: #ffffff !important;
    border-color: #f7863b !important;
}
body.dark-mode .left_sidebar {
    background: #151515;
}

body.dark-mode .navbar-nav>li>a.nav_icon {
    color: #BFBEC3; 
}

body.dark-mode .right_content {
    background: #272727;
}

body.dark-mode, 
body.dark-mode button,
body.dark-mode input,
body.dark-mode select, 
body.dark-mode textarea {
    color: #cccccc; 
    color: #555;
}


body.dark-mode .right_content section#main-body
{
    background-color: #272727;
}


body.dark-mode div.header-lined h1 {
    color: #fff; 
}

body.dark-mode section#footer {
    background-color: #070707; 
    border-top: 1px solid #222222; 
    color: #999999; 
}

body.dark-mode .right_content #header {
     background-color: transparent;
     box-shadow: none;
     border-radius: 0;
}

body.dark-mode .wrapps-topnav {
    background-color: rgb(64, 64, 64) !important;
    color: rgb(204, 204, 204) !important;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgb(85, 85, 85) !important;
    border-radius: 15px !important;
    z-index: 100;
}

/* Text styling untuk wrapps-topnav di dark mode */
body.dark-mode .wrapps-topnav * {
    color: rgb(204, 204, 204) !important;
}

body.dark-mode .wrapps-topnav .text-muted {
    color: rgb(170, 170, 170) !important;
}

body.dark-mode .wrapps-topnav .text-dark {
    color: rgb(204, 204, 204) !important;
}

body.dark-mode .wrapps-topnav .text-secondary {
    color: rgb(170, 170, 170) !important;
}

body.dark-mode ul.top-nav>.wrap-count>a {
    background-color: rgb(85, 85, 85) !important;
    border-color: rgb(102, 102, 102) !important;
    color: rgb(204, 204, 204) !important;
}

body.dark-mode ul.top-nav>.wrap-count>a:hover {
    background-color: rgb(102, 102, 102) !important;
    border-color: #f7863b !important;
    color: #f7863b !important;
}

body.dark-mode .right_content ul.top-nav li.wrap-language {
    background-color: rgb(85, 85, 85) !important;
    border-color: rgb(102, 102, 102) !important;
    color: rgb(204, 204, 204) !important;
}

body.dark-mode .right_content ul.top-nav li.wrap-language:hover {
    background-color: rgb(102, 102, 102) !important;
    border-color: #f7863b !important;
    color: #f7863b !important;
}

/* Dark Mode - Avatar Dropdown Text */
body.dark-mode ul.top-nav li.wrap-language .dropdown-toggle {
    color: rgb(204, 204, 204) !important;
}

/* Dark Mode - Text dalam wrapps-topnav */
body.dark-mode .wrapps-topnav span,
body.dark-mode .wrapps-topnav small,
body.dark-mode .wrapps-topnav label,
body.dark-mode .wrapps-topnav .badge,
body.dark-mode .wrapps-topnav .count {
    color: rgb(204, 204, 204) !important;
}

body.dark-mode .wrapps-topnav .badge-danger {
    background-color: #e53e3e !important;
    color: #ffffff !important;
}

body.dark-mode .wrapps-topnav .badge-warning {
    background-color: #f7863b !important;
    color: #ffffff !important;
}

/* Dark Mode - Dropdown menu text */
body.dark-mode .wrapps-topnav .dropdown-menu {
    background-color: rgb(64, 64, 64) !important;
    border-color: rgb(85, 85, 85) !important;
}

body.dark-mode .wrapps-topnav .dropdown-menu a {
    color: rgb(204, 204, 204) !important;
}

body.dark-mode .wrapps-topnav .dropdown-menu a:hover {
    background-color: rgb(85, 85, 85) !important;
    color: #f7863b !important;
}

body.dark-mode ul.top-nav li.wrap-language .dropdown-toggle span {
    color: rgb(204, 204, 204) !important;
}

body.dark-mode ul.top-nav li.wrap-language .dropdown-toggle .desk-lang {
    color: #ffffff !important;
}

body.dark-mode ul.top-nav li.wrap-language .dropdown-toggle .resp-lang {
    color: #ffffff !important;
}

/* Dark Mode - Language Dropdown Text */
body.dark-mode ul.top-nav li.wrap-language.hidelang .choose-language {
    color: #ffffff !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .choose-language span {
    color: #ffffff !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .choose-language .desk-lang {
    color: #ffffff !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .choose-language .resp-lang {
    color: #ffffff !important;
}

/* Dark Mode - Dropdown Menu Items */
body.dark-mode ul.top-nav li.wrap-language .dropdown-menu {
    background-color: #272727 !important;
    border-color: #404040 !important;
}

body.dark-mode ul.top-nav li.wrap-language .dropdown-menu li a {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark-mode ul.top-nav li.wrap-language .dropdown-menu li a:hover {
    background-color: #404040 !important;
    color: #f7863b !important;
}

/* Dark Mode - Language Dropdown Menu */
body.dark-mode ul.top-nav li.wrap-language.hidelang .dropdown-menu {
    background-color: #272727 !important;
    border-color: #404040 !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .dropdown-menu li a {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .dropdown-menu li a:hover {
    background-color: #404040 !important;
    color: #f7863b !important;
}

/* Dark Mode - Arrow Icons */
body.dark-mode ul.top-nav li.wrap-language .arrow-fa {
    filter: brightness(0) invert(1) !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .arrow-fa {
    filter: brightness(0) invert(1) !important;
}

/* Dark Mode - Hover States for Dropdown Toggle */
body.dark-mode ul.top-nav li.wrap-language .dropdown-toggle:hover {
    color: #f7863b !important;
}

body.dark-mode ul.top-nav li.wrap-language .dropdown-toggle:hover span {
    color: #f7863b !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .choose-language:hover {
    color: #f7863b !important;
}

body.dark-mode ul.top-nav li.wrap-language.hidelang .choose-language:hover span {
    color: #f7863b !important;
}

body.dark-mode .wrap-search .form-group #searchInput,
body.dark-mode .wrap-search .form-group #kb-search-input {
    background: #272727;
    border-color: #404040;
    color: #cccccc;
}

body.dark-mode .wrap-search .form-group #searchInput:focus,
body.dark-mode .wrap-search .form-group #kb-search-input:focus {
    border-color: #f7863b;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.1);
    background: #404040;
}

/* Domain Details Dark Mode */
body.dark-mode .product-status {
    background: #272727;
    color: #cccccc;
    border: 1px solid #404040;
}

body.dark-mode .product-status:hover {
    background: #404040;
    border-color: #555555;
}

body.dark-mode .product-icon a {
    color: #ffffff;
}

body.dark-mode .product-icon a:hover {
    color: #f7863b;
}

body.dark-mode .paddingdomaindetail h5 {
    color: #999999;
}

body.dark-mode .paddingdomaindetail {
    color: #cccccc;
    border-bottom-color: #404040;
}

body.dark-mode .product-status ul li {
    background: #404040;
    border: 1px solid #555555;
}

body.dark-mode .product-status ul li:hover {
    background: #555555;
    border-color: #666666;
}

body.dark-mode .product-status ul li a {
    color: #cccccc;
}

body.dark-mode .product-status ul li a:hover {
    color: #f7863b;
}

body.dark-mode .btn-success {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

body.dark-mode .btn-success:hover {
    background: #218838;
    border-color: #1e7e34;
    color: #ffffff;
}

body.dark-mode .promo-container {
    background-color: #272727;
    border-color: #404040;
    color: #cccccc;
}

body.dark-mode .carousel-cell {
    border: 1px solid #404040;
    background-color: #404040 !important;
}

body.dark-mode .marquee {
    background-color: #272727;
}

body.dark-mode .marquee-content {
    background-color: #272727;
}

/* Promo carousel cells dark mode */
body.dark-mode .carousel-cell {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
}

body.dark-mode .carousel-cell:hover {
    background-color: #555555 !important;
    border-color: #666666 !important;
}

/* Override any white backgrounds in promo section */
body.dark-mode .promo-container .card,
body.dark-mode .promo-container .card-header,
body.dark-mode .promo-container .card-body {
    /* background-color: #272727 !important; */
    color: #cccccc !important;
}

body.dark-mode .promo-container .card-header {
    background-color: #404040 !important;
    border-bottom-color: #555555 !important;
}

/* Promo Section Dark Mode */
body.dark-mode .card {
    background-color: #272727 !important;
    border-color: #404040 !important;
    color: #cccccc !important;
}

body.dark-mode .card-header {
    background-color: #404040 !important;
    border-bottom-color: #555555 !important;
}

body.dark-mode .card-body {
    /* background-color: #272727 !important; */
    color: #cccccc !important;
}

body.dark-mode .card-title {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
}

body.dark-mode .card-title i {
    color: #f7863b !important;
}

/* Override Bootstrap classes for dark mode */
body.dark-mode .bg-white {
    background-color: #272727 !important;
}

body.dark-mode .text-primary {
    color: #ffffff !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: #555555 !important;
}

body.dark-mode .p-0 {
    background-color: #272727 !important;
}

/* Specific promo card overrides */
body.dark-mode .card .card-header.bg-white {
    background-color: #404040 !important;
}


/* Product Details Dark Mode */
body.dark-mode {
    background-color: #272727;
}

body.dark-mode .product-info-card,
body.dark-mode .billing-info-card,
body.dark-mode .sso-info-card,
body.dark-mode .additional-info-container {
    background-color: #272727;
    border-color: #404040;
    color: #cccccc;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.dark-mode .product-info-card:hover,
body.dark-mode .billing-info-card:hover,
body.dark-mode .sso-info-card:hover,
body.dark-mode .additional-info-container:hover {
    background-color: #404040;
    border-color: #555555;
}

body.dark-mode .product-info-title,
body.dark-mode .billing-info-title,
body.dark-mode .sso-info-title,
body.dark-mode .additional-info-title {
    color: #ffffff;
}

body.dark-mode .product-info-subtitle,
body.dark-mode .sso-info-subtitle {
    color: #999999;
}

body.dark-mode .info-card {
    background-color: #404040;
    border-color: #555555;
    color: #cccccc;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.dark-mode .info-card:hover {
    background-color: #555555;
    border-color: #666666;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .info-card-label {
    color: #999999;
    margin-bottom: 8px;
}

body.dark-mode .info-card-value {
    color: #ffffff;
    margin: 0;
}

body.dark-mode .domain-input-container {
    background-color: #404040;
    border-color: #555555;
}

body.dark-mode .domain-section {
    background-color: #404040;
    border-color: #555555;
}

body.dark-mode .domain-label {
    color: #999999;
}

body.dark-mode .domain-name a {
    color: #ffffff;
}

body.dark-mode .domain-name a:hover {
    color: #f7863b;
}

body.dark-mode .domain-settings-btn {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .domain-settings-btn:hover {
    background-color: #666666;
    border-color: #777777;
    color: #f7863b;
}

body.dark-mode .pricing-card {
    background-color: #404040;
    border-color: #555555;
}

body.dark-mode .pricing-label {
    color: #999999;
}

body.dark-mode .pricing-value {
    color: #28a745;
}

body.dark-mode .action-btn {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .action-btn:hover {
    background-color: #666666;
    border-color: #777777;
}

body.dark-mode .btn-upgrade {
    background-color: #f7863b;
    border-color: #f7863b;
    color: #ffffff;
}

body.dark-mode .btn-upgrade:hover {
    background-color: #e6732a;
    border-color: #e6732a;
}

/* SSO Dark Mode */
body.dark-mode .sso-info-header {
    border-bottom-color: #404040;
}

body.dark-mode .account-item {
    background-color: #404040;
    border-color: #555555;
    color: #cccccc;
}

body.dark-mode .account-item:hover {
    background-color: #555555;
    border-color: #666666;
}

body.dark-mode .account-label {
    color: #999999;
}

body.dark-mode .account-value {
    color: #ffffff;
}

body.dark-mode .sso-login-button {
    background: linear-gradient(135deg, #FF6D0B 0%, #FF8533 50%, #FF6D0B 100%);
    color: #ffffff;
}

body.dark-mode .sso-login-button:hover {
    background: linear-gradient(135deg, #e55a0a 0%, #e6732a 50%, #e55a0a 100%);
    color: #ffffff;
}

body.dark-mode .upgrade-monitors-btn {
    background: transparent;
    border-color: #f7863b;
    color: #f7863b;
}

body.dark-mode .upgrade-monitors-btn:hover {
    background-color: #f7863b;
    color: #ffffff;
}

body.dark-mode .sso-loading {
    background-color: #404040;
    border-color: #555555;
    color: #cccccc;
}

body.dark-mode .sso-error-alert {
    background-color: #404040;
    border-color: #555555;
    color: #cccccc;
}

/* Additional Info Dark Mode */
body.dark-mode .additional-info-header {
    border-bottom-color: #404040;
}

body.dark-mode .modern-tabs {
    border-bottom-color: #404040;
    background-color: #272727;
}

body.dark-mode .modern-tabs .tab-link {
    color: #cccccc;
    background-color: #404040;
    border-color: #555555;
}

body.dark-mode .modern-tabs .tab-link:hover {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .modern-tabs li.active .tab-link {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .modern-tab-content {
    background-color: #404040;
    color: #cccccc;
}

/* Nav Tabs General Dark Mode */
body.dark-mode .nav-tabs {
    background-color: #272727;
    border-bottom-color: #404040;
}

body.dark-mode .nav-tabs > li > a {
    color: #cccccc;
    background-color: #404040;
    border-color: #555555;
}

body.dark-mode .nav-tabs > li > a:hover {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .nav-tabs > li.active > a,
body.dark-mode .nav-tabs > li.active > a:focus,
body.dark-mode .nav-tabs > li.active > a:hover {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .nav-tabs > li.active > a {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

/* Addons Dark Mode - Enhanced */
body.dark-mode #order-standard_cart .addon-card {
    background-color: #404040 !important;
    border-color: #555555 !important;
    color: #cccccc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .addon-card {
    background-color: #404040 !important;
    border-color: #555555 !important;
    color: #cccccc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #order-standard_cart .addon-card:hover {
    background-color: #555555 !important;
    border-color: #f7863b !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .addon-card:hover {
    background-color: #555555 !important;
    border-color: #f7863b !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #order-standard_cart .addon-name {
    color: #ffffff !important;
}

body.dark-mode .addon-name {
    color: #ffffff !important;
}

body.dark-mode #order-standard_cart .addon-description {
    color: #cccccc !important;
}

body.dark-mode .addon-description {
    color: #cccccc !important;
}

body.dark-mode #order-standard_cart .addon-availability {
    color: #28a745 !important;
}

body.dark-mode .addon-availability {
    color: #28a745 !important;
}

body.dark-mode #order-standard_cart .form-label {
    color: #ffffff !important;
}

body.dark-mode .form-label {
    color: #ffffff !important;
}

body.dark-mode #order-standard_cart .form-select {
    background-color: #555555 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

body.dark-mode .form-select {
    background-color: #555555 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

body.dark-mode #order-standard_cart .form-select:focus {
    background-color: #666666 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode .form-select:focus {
    background-color: #666666 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode #order-standard_cart .addon-footer {
    border-top-color: #555555 !important;
}

body.dark-mode .addon-footer {
    border-top-color: #555555 !important;
}

body.dark-mode #order-standard_cart .price-amount {
    color: #28a745 !important;
}

body.dark-mode .price-amount {
    color: #28a745 !important;
}

body.dark-mode #order-standard_cart .price-period {
    color: #cccccc !important;
}

body.dark-mode .price-period {
    color: #cccccc !important;
}

body.dark-mode #order-standard_cart .price-setup {
    color: #cccccc !important;
}

body.dark-mode .price-setup {
    color: #cccccc !important;
}

body.dark-mode #order-standard_cart .price-paid .price-amount {
    color: #f7863b !important;
}

body.dark-mode .price-paid .price-amount {
    color: #f7863b !important;
}

body.dark-mode #order-standard_cart .btn-addon {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(247, 134, 59, 0.4) !important;
}

body.dark-mode .btn-addon {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(247, 134, 59, 0.4) !important;
}

body.dark-mode #order-standard_cart .btn-addon:hover {
    background: linear-gradient(135deg, #e6732a 0%, #f7863b 100%) !important;
    box-shadow: 0 8px 20px rgba(247, 134, 59, 0.5) !important;
}

body.dark-mode .btn-addon:hover {
    background: linear-gradient(135deg, #e6732a 0%, #f7863b 100%) !important;
    box-shadow: 0 8px 20px rgba(247, 134, 59, 0.5) !important;
}

body.dark-mode #order-standard_cart .empty-icon {
    color: #cccccc !important;
}

body.dark-mode .empty-icon {
    color: #cccccc !important;
}

/* Additional specific selectors for addons */
body.dark-mode #order-standard_cart .addon-header {
    background-color: transparent !important;
}

body.dark-mode .addon-header {
    background-color: transparent !important;
}

body.dark-mode #order-standard_cart .addon-body {
    background-color: transparent !important;
}

body.dark-mode .addon-body {
    background-color: transparent !important;
}

body.dark-mode #order-standard_cart .addon-title {
    background-color: transparent !important;
}

body.dark-mode .addon-title {
    background-color: transparent !important;
}


/* Force dark mode for all addon elements */
body.dark-mode .products .product {
    background-color: #404040 !important;
    border-color: #555555 !important;
    color: #cccccc !important;
}

body.dark-mode .products .product header {
    background-color: #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .products .product header span {
    color: #ffffff !important;
}

body.dark-mode .products .product div.product-desc {
    color: #cccccc !important;
}

body.dark-mode .products .product div.product-desc p {
    color: #cccccc !important;
}

body.dark-mode .products .product footer {
    background-color: transparent !important;
}

body.dark-mode .products .product div.product-pricing {
    color: #ffffff !important;
}

body.dark-mode .products .product div.product-pricing span.price {
    color: #f7863b !important;
}

body.dark-mode .products .product .btn-success {
    background-color: #f7863b !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode .products .product .btn-success:hover {
    background-color: #e6732a !important;
    border-color: #e6732a !important;
    color: #ffffff !important;
}

body.dark-mode .pricing-text {
    color: #28a745;
}

body.dark-mode .detail-label {
    color: #999999;
}

body.dark-mode .detail-value {
    color: #ffffff;
}

/* Card Header Dark Mode */
body.dark-mode .card-header {
    background-color: #404040;
    border-bottom-color: #555555;
}

body.dark-mode .card-title {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
}

body.dark-mode .card-title i {
    color: #f7863b !important;
}

/* Form Elements Dark Mode */
body.dark-mode .form-control {
    background-color: #404040;
    border-color: #555555;
    color: #ffffff;
}

body.dark-mode .form-control:focus {
    background-color: #555555;
    border-color: #f7863b;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(247, 134, 59, 0.25);
}

body.dark-mode .form-control::placeholder {
    color: #999999;
}

body.dark-mode .domain-input-group .form-control {
    background-color: #404040;
    border-color: #555555;
    color: #ffffff;
}

body.dark-mode .domain-input-group .form-control:focus {
    background-color: #555555;
    border-color: #f7863b;
    color: #ffffff;
}

body.dark-mode .domain-check-btn {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .domain-check-btn:hover {
    background-color: #666666;
    border-color: #777777;
    color: #f7863b;
}

/* Modal Dark Mode */
body.dark-mode .modal-content {
    background-color: #272727;
    border-color: #404040;
    color: #cccccc;
}

body.dark-mode .modal-header {
    background-color: #404040;
    border-bottom-color: #555555;
}

body.dark-mode .modal-title {
    color: #ffffff;
}

body.dark-mode .modal-body {
    background-color: #272727;
    color: #cccccc;
}

body.dark-mode .modal-footer {
    background-color: #404040;
    border-top-color: #555555;
}

body.dark-mode .btn-secondary {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .btn-secondary:hover {
    background-color: #666666;
    border-color: #777777;
    color: #ffffff;
}

body.dark-mode .btn-primary,
body.dark-mode .form-group .btn-primary {
    background-color: #f7863b;
    border-color: #f7863b;
    color: #ffffff;
    font-size: 14px;
    padding: 8px 25px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active,
body.dark-mode .form-group .btn-primary:hover,
body.dark-mode .form-group .btn-primary:focus,
body.dark-mode .form-group .btn-primary:active {
    background-color: #e44431;
    border-color: #e44431;
    color: #ffffff;
    outline: none;
}

body.dark-mode .btn-default,
body.dark-mode .form-group .btn-default {
    background-color: #404040;
    border-color: #f7863b;
    color: #f7863b;
    font-size: 14px;
    padding: 8px 25px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

body.dark-mode .btn-default:hover,
body.dark-mode .btn-default:focus,
body.dark-mode .btn-default:active,
body.dark-mode .form-group .btn-default:hover,
body.dark-mode .form-group .btn-default:focus,
body.dark-mode .form-group .btn-default:active {
    background-color: #f7863b;
    border-color: #f7863b;
    color: #ffffff;
    outline: none;
}

/* Alert Dark Mode */
body.dark-mode .alert {
    background-color: #404040;
    border-color: #555555;
    color: #cccccc;
}

body.dark-mode .alert-success {
    background-color: #1e4a2e;
    border-color: #28a745;
    color: #ffffff;
}

body.dark-mode .alert-warning {
    background-color: #4a3c1e;
    border-color: #ffc107;
    color: #ffffff;
}

body.dark-mode .alert-danger {
    background-color: #4a1e1e;
    border-color: #dc3545;
    color: #ffffff;
}

body.dark-mode .alert-info {
    background-color: #1e3a4a;
    border-color: #17a2b8;
    color: #ffffff;
}

/* Domain Header Dark Mode */
body.dark-mode .domain-header {
    border-bottom: 1px solid #404040;
    padding-bottom: 16px;
}

body.dark-mode .domain-link {
    color: #ffffff;
}

body.dark-mode .domain-link:hover {
    color: #f7863b;
}

/* Domain Management Dark Mode */
body.dark-mode .product-status ul li {
    background: #404040;
    border: 1px solid #555555;
    color: #cccccc;
}

body.dark-mode .product-status ul li:hover {
    background: #555555;
    border-color: #666666;
}

body.dark-mode .product-status ul li a {
    color: #cccccc;
}

body.dark-mode .product-status ul li a:hover {
    color: #f7863b;
}

/* Domain Details Cards Dark Mode */
body.dark-mode .card {
    background-color: #272727 !important;
    border-color: #404040 !important;
    color: #cccccc !important;
}

body.dark-mode .card-header {
    background-color: #404040 !important;
    border-bottom-color: #555555 !important;
}

body.dark-mode .card-body {
    /* background-color: #272727 !important; */
    color: #cccccc !important;
}

body.dark-mode .card-title {
    color: #ffffff !important;
}

body.dark-mode .card-title i {
    color: #EE4D30 !important;
}

/* Domain Info Items Dark Mode */
body.dark-mode .info-item {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #cccccc !important;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
}

body.dark-mode .info-item .text-muted {
    color: #999999 !important;
}

body.dark-mode .info-item .text-dark {
    color: #ffffff !important;
}

body.dark-mode .info-item .text-success {
    color: #28a745 !important;
}

/* Domain Name Section Dark Mode */
body.dark-mode .domain-name-section h4 {
    color: #ffffff !important;
}

body.dark-mode .domain-name-section a {
    color: #ffffff !important;
}

body.dark-mode .domain-name-section a:hover {
    color: #f7863b !important;
}

/* Management Option Cards Dark Mode */
body.dark-mode .management-option-card {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #cccccc !important;
}

body.dark-mode .management-option-card:hover {
    background-color: #555555 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

body.dark-mode .management-title {
    color: #ffffff !important;
}

body.dark-mode .management-desc {
    color: #cccccc !important;
}

/* Button Dark Mode */
body.dark-mode .btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-move-service {
    background-color: #555555 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-move-service:hover {
    background-color: #666666 !important;
    border-color: #777777 !important;
    color: #f7863b !important;
}

/* Alert Dark Mode for Domain Details */
body.dark-mode .alert {
    background-color: #404040 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-danger {
    background-color: #4a1e1e !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-warning {
    background-color: #4a3c1e !important;
    border-color: #ffc107 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-success {
    background-color: #1e4a2e !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-info {
    background-color: #1e3a4a !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}

/* Domain Info Section Dark Mode */
body.dark-mode .domain-info-section {
    background-color: #272727 !important;
    color: #cccccc !important;
}

body.dark-mode .domain-info-section .text-dark {
    color: #ffffff !important;
}

body.dark-mode .domain-info-section .text-muted {
    color: #999999 !important;
}

/* Download Certificate Section Dark Mode */
body.dark-mode .download-certificate-section {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    padding: 10px;
    border-radius: 8px;
}

/* Row and Column Dark Mode */
body.dark-mode .row .col-6 {
    background-color: transparent !important;
}

body.dark-mode .row .col-md-6 {
    background-color: transparent !important;
}

/* Override Bootstrap classes for domain details */
body.dark-mode .bg-white {
    background-color: #404040 !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: #555555 !important;
}

body.dark-mode .text-primary {
    color: #ffffff !important;
}

body.dark-mode .text-dark {
    color: #ffffff !important;
}

body.dark-mode .text-muted {
    color: #999999 !important;
}

body.dark-mode .text-success {
    color: #28a745 !important;
}

/* Client Area Home Dark Mode */
body.dark-mode .header-section {
    background-color: #272727 !important;
    color: #cccccc !important;
}

body.dark-mode .wisdom-text {
    color: #888888 !important;
    font-size: 1.2em !important;
    font-weight: 400 !important;
}

/* Header Title Dark Mode */
body.dark-mode .header-lined h1 {
    color: #ffffff !important;
    font-size: 2.2em !important;
    font-weight: 400 !important;
}

/* Left Sidebar Dark Mode */
body.dark-mode .left_sidebar {
    background-color: #1a1a1a !important;
    border-right: 1px solid #333333 !important;
}

body.dark-mode .left_sidebar .navbar-nav {
    background-color: #1a1a1a !important;
}

body.dark-mode .left_sidebar .nav_icon {
    color: #ffffff !important;
}

body.dark-mode .left_sidebar .nav_icon:hover {
    background-color: #2d2d2d !important;
    color: #f7863b !important;
    border-radius: 8px !important;
}

body.dark-mode .left_sidebar .nav_icon i {
    color: #cccccc !important;
}

body.dark-mode .left_sidebar .nav_icon:hover i {
    color: #f7863b !important;
}

/* Dropdown Arrow Styling - Removed duplicate arrow styling */

/* Dropdown Menu Dark Mode - Enhanced */
body.dark-mode .left_sidebar .dropdown-menu {
    background-color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    min-width: 100% !important;
    position: static !important;
    z-index: auto !important;
    margin-left: 20px !important;
    border-left: 2px solid #f7863b !important;
    width: 100% !important;
    max-width: none !important;
}

body.dark-mode .left_sidebar .dropdown-menu li {
    margin: 0 !important;
    list-style: none !important;
}

body.dark-mode .left_sidebar .dropdown-menu li a {
    color: #ffffff !important;
    background-color: transparent !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    position: relative !important;
    font-size: 1em !important;
    line-height: 1.5 !important;
}

body.dark-mode .left_sidebar .dropdown-menu li a:hover {
    background-color: #f7863b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(247, 134, 59, 0.3) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
}

body.dark-mode .left_sidebar .dropdown-menu li a i {
    color: #cccccc !important;
    margin-right: 14px !important;
    width: 20px !important;
    text-align: center !important;
    font-size: 1.2em !important;
}

body.dark-mode .left_sidebar .dropdown-menu li a:hover i {
    color: #ffffff !important;
}

/* Dropdown Animation */
body.dark-mode .left_sidebar .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

body.dark-mode .left_sidebar .dropdown.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Dropdown Toggle Enhanced - Remove Duplicate Arrow */
body.dark-mode .left_sidebar .dropdown-toggle {
    position: relative !important;
}

/* Hide the original arrow image and use CSS arrow instead */
body.dark-mode .left_sidebar .dropdown-toggle .arrow-fa {
    display: none !important;
}

body.dark-mode .left_sidebar .dropdown-toggle::after {
    content: '' !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid #cccccc !important;
}

body.dark-mode .left_sidebar .dropdown-toggle:hover::after {
    border-top-color: #f7863b !important;
}

body.dark-mode .left_sidebar .dropdown.open .dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg) !important;
    border-top-color: #f7863b !important;
}

/* Logo and Branding */
body.dark-mode .left_sidebar .logo-wrapper {
    border-bottom: 1px solid #333333 !important;
    padding: 0 20px 20px 20px !important;
    margin-bottom: 20px !important;
}

body.dark-mode .left_sidebar .logo {
    color: #ffffff !important;
}

body.dark-mode .left_sidebar .logo img {
    opacity: 1;
    filter: brightness(1);
}

body.dark-mode .left_sidebar.shrink .logo-wrapper {
    padding: 0 15px 15px 15px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #333333 !important;
}

/* Mobile Navigation */
body.dark-mode .left_sidebar .text-mobile-nav2 {
    background-color: #1a1a1a !important;
}

body.dark-mode .left_sidebar .text-mobile-nav2 .nav-link {
    color: #ffffff !important;
}

body.dark-mode .left_sidebar .text-mobile-nav2 .nav-link:hover {
    background-color: #2d2d2d !important;
    color: #f7863b !important;
}

body.dark-mode .left_sidebar .text-mobile-nav2 .nav-link i {
    color: #cccccc !important;
}

body.dark-mode .left_sidebar .text-mobile-nav2 .nav-link:hover i {
    color: #f7863b !important;
}

/* Dark Mode Toggle Button */
body.dark-mode .left_sidebar #Darkmode .nav_icon {
    color: #ffffff !important;
}

body.dark-mode .left_sidebar #Darkmode .nav_icon:hover {
    background-color: #2d2d2d !important;
    color: #f7863b !important;
}

body.dark-mode .left_sidebar #Darkmode .nav_icon i {
    color: #cccccc !important;
}

body.dark-mode .left_sidebar #Darkmode .nav_icon:hover i {
    color: #f7863b !important;
}

/* Light Mode Sidebar - Same as Dark Mode */
.left_sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e9ecef !important;
}

.left_sidebar .navbar-nav {
    background-color: #ffffff !important;
}

.left_sidebar .nav_icon {
    color: #2c3e50 !important;
}

.left_sidebar .nav_icon:hover {
    background-color: #f8f9fa !important;
    color: #f7863b !important;
    border-radius: 8px !important;
}

.left_sidebar .nav_icon i {
    color: #6c757d !important;
}

.left_sidebar .nav_icon:hover i {
    color: #f7863b !important;
}

/* Light Mode Dropdown Toggle */
.left_sidebar .dropdown-toggle {
    position: relative !important;
}

.left_sidebar .dropdown-toggle .arrow-fa {
    display: none !important;
}

.left_sidebar .dropdown-toggle::after {
    content: '' !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid #6c757d !important;
}

.left_sidebar .dropdown-toggle:hover::after {
    border-top-color: #f7863b !important;
}

.left_sidebar .dropdown.open .dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg) !important;
    border-top-color: #f7863b !important;
}

/* Light Mode Dropdown Menu */
.left_sidebar .dropdown-menu {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    min-width: 100% !important;
    position: static !important;
    z-index: auto !important;
    margin-left: 20px !important;
    border-left: 2px solid #f7863b !important;
    width: 100% !important;
    max-width: none !important;
}

.left_sidebar .dropdown-menu li {
    margin: 0 !important;
    list-style: none !important;
}

.left_sidebar .dropdown-menu li a {
    color: #2c3e50 !important;
    background-color: transparent !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    position: relative !important;
    font-size: 1em !important;
    line-height: 1.5 !important;
}

.left_sidebar .dropdown-menu li a:hover {
    background-color: #f7863b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(247, 134, 59, 0.3) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
}

.left_sidebar .dropdown-menu li a:hover i {
    color: #ffffff !important;
}

.left_sidebar .dropdown-menu li a i {
    color: #6c757d !important;
    margin-right: 14px !important;
    width: 20px !important;
    text-align: center !important;
    font-size: 1.2em !important;
}

.left_sidebar .dropdown-menu li a:hover i {
    color: #f7863b !important;
    transform: scale(1.1) !important;
}

/* Light Mode Dropdown Item Separator */
.left_sidebar .dropdown-menu li:not(:last-child) a {
    border-bottom: 1px solid #e9ecef !important;
}

/* Light Mode Dropdown Item Active State */
.left_sidebar .dropdown-menu li a.active {
    background-color: #f8f9fa !important;
    color: #f7863b !important;
    font-weight: 500 !important;
    border-left: 3px solid #f7863b !important;
    margin-left: -2px !important;
}

.left_sidebar .dropdown-menu li a.active i {
    color: #f7863b !important;
}

/* Light Mode Dropdown Auto-Close Behavior */
.left_sidebar .dropdown-menu {
    display: none !important;
}

.left_sidebar .dropdown.open .dropdown-menu {
    display: block !important;
}

.left_sidebar .dropdown:not(.open) .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

.left_sidebar .dropdown.open .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.left_sidebar .dropdown.open ~ .dropdown .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

/* Light Mode Arrow rotation */
.left_sidebar .dropdown-toggle::after {
    transition: transform 0.3s ease !important;
}

.left_sidebar .dropdown.open .dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.left_sidebar .dropdown:not(.open) .dropdown-toggle::after {
    transform: translateY(-50%) rotate(0deg) !important;
}

/* Light Mode Logo and Branding */
.left_sidebar .logo-wrapper {
    border-bottom: 1px solid #e9ecef !important;
}

.left_sidebar .logo {
    color: #2c3e50 !important;
}

/* Light Mode Mobile Navigation */
.left_sidebar .text-mobile-nav2 {
    background-color: #ffffff !important;
}

.left_sidebar .text-mobile-nav2 .nav-link {
    color: #2c3e50 !important;
}

.left_sidebar .text-mobile-nav2 .nav-link:hover {
    background-color: #f8f9fa !important;
    color: #f7863b !important;
}

.left_sidebar .text-mobile-nav2 .nav-link i {
    color: #6c757d !important;
}

.left_sidebar .text-mobile-nav2 .nav-link:hover i {
    color: #f7863b !important;
}

/* Light Mode Dark Mode Toggle Button */
.left_sidebar #Darkmode .nav_icon {
    color: #2c3e50 !important;
}

.left_sidebar #Darkmode .nav_icon:hover {
    background-color: #f8f9fa !important;
    color: #f7863b !important;
}

.left_sidebar #Darkmode .nav_icon i {
    color: #6c757d !important;
}

.left_sidebar #Darkmode .nav_icon:hover i {
    color: #f7863b !important;
}

/* Enhanced Dropdown Menu Styling - Removed floating arrow */

/* Dropdown Menu Item Separator - Subtle */
body.dark-mode .left_sidebar .dropdown-menu li:not(:last-child) a {
    border-bottom: 1px solid #2a2a2a !important;
}

/* Dropdown Menu Item Active State */
body.dark-mode .left_sidebar .dropdown-menu li a.active {
    background-color: #2d2d2d !important;
    color: #f7863b !important;
    font-weight: 500 !important;
    border-left: 3px solid #f7863b !important;
    margin-left: -2px !important;
}

body.dark-mode .left_sidebar .dropdown-menu li a.active i {
    color: #f7863b !important;
}

/* Dropdown Menu Scrollbar */
body.dark-mode .left_sidebar .dropdown-menu::-webkit-scrollbar {
    width: 6px !important;
}

body.dark-mode .left_sidebar .dropdown-menu::-webkit-scrollbar-track {
    background: #1a1a1a !important;
    border-radius: 3px !important;
}

body.dark-mode .left_sidebar .dropdown-menu::-webkit-scrollbar-thumb {
    background: #555555 !important;
    border-radius: 3px !important;
}

body.dark-mode .left_sidebar .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #777777 !important;
}

/* Dropdown Menu Focus States */
body.dark-mode .left_sidebar .dropdown-menu li a:focus {
    outline: none !important;
    background-color: #3d3d3d !important;
    color: #f7863b !important;
    box-shadow: 0 0 0 2px rgba(247, 134, 59, 0.3) !important;
}

/* Dropdown Menu Responsive */
@media (max-width: 768px) {
    body.dark-mode .left_sidebar .dropdown-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        margin-left: 20px !important;
        border-left: 2px solid #f7863b !important;
    }
}

/* Dark Mode Sidebar Shrink Dropdown */
body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    min-width: 250px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
    padding: 8px 0 !important;
    margin-left: 8px !important;
}

body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu li a {
    color: #ffffff !important;
    background-color: transparent !important;
    padding: 12px 20px !important;
    display: block !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border-radius: 4px !important;
    margin: 2px 8px !important;
}

body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu li a:hover {
    background-color: #f7863b !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu li a i {
    color: #cccccc !important;
    margin-right: 10px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Dark mode overflow handling */
body.dark-mode .left_sidebar.shrink {
    overflow: visible !important;
}

body.dark-mode .left_sidebar.shrink #main-menu {
    overflow: visible !important;
}

body.dark-mode .left_sidebar.shrink #main-menu .navbar-left {
    overflow: visible !important;
}

body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav {
    overflow: visible !important;
}

body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown {
    overflow: visible !important;
}

/* Dark Mode Sidebar Normal Dropdown */
body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu {
    background-color: #000000 !important;
}

/* Dark Mode Sidebar Normal Dropdown Items */
body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu li a {
    color: #ffffff !important;
    background-color: #000000 !important;
    border-bottom: 1px solid #333333 !important;
}

body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu li a:hover {
    background-color: #1a1a1a !important;
    color: #f7863b !important;
}

body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu li a i {
    color: #cccccc !important;
}

/* Dark mode mobile responsive dropdown items */
@media (max-width: 768px) {
    body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu li a,
    body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu li a {
        border-bottom: 1px solid #333333 !important;
        color: #ffffff !important;
        background-color: #000000 !important;
    }

    body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu li:last-child a,
    body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu li:last-child a {
        border-bottom: none !important;
    }

    body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu li a:hover,
    body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu li a:hover {
        background-color: #1a1a1a !important;
        color: #f7863b !important;
    }
}

/* Dark mode mobile responsive adjustments for normal mode */
@media (max-width: 768px) {
    body.dark-mode .left_sidebar #main-menu .navbar-left .navbar-nav .dropdown-menu {
        background-color: #000000 !important;
    }
}

/* Dark mode mobile responsive adjustments for shrink mode */
@media (max-width: 768px) {
    body.dark-mode .left_sidebar.shrink #main-menu .navbar-left .navbar-nav .dropdown-menu {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 300px !important;
        z-index: 9999 !important;
        margin: 0 !important;
        background: #1a1a1a !important;
        border: 1px solid #333 !important;
    }
}

/* Dark mode dropdown backdrop styling */
body.dark-mode .dropdown-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Dropdown Menu Auto-Close Behavior */
body.dark-mode .left_sidebar .dropdown-menu {
    display: none !important;
}

body.dark-mode .left_sidebar .dropdown.open .dropdown-menu {
    display: block !important;
}

/* Ensure only one dropdown is open at a time */
body.dark-mode .left_sidebar .dropdown:not(.open) .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

body.dark-mode .left_sidebar .dropdown.open .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Close other dropdowns when one is opened */
body.dark-mode .left_sidebar .dropdown.open ~ .dropdown .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

/* Arrow rotation for open/closed states */
body.dark-mode .left_sidebar .dropdown-toggle::after {
    transition: transform 0.3s ease !important;
}

body.dark-mode .left_sidebar .dropdown.open .dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

body.dark-mode .left_sidebar .dropdown:not(.open) .dropdown-toggle::after {
    transform: translateY(-50%) rotate(0deg) !important;
}

body.dark-mode .wrap-saldo {
    background: linear-gradient(135deg, #404040 0%, #555555 100%) !important;
    border: 1px solid #666666 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .wrap-saldo:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .wallet-icon,
body.dark-mode .eye-icon,
body.dark-mode .add-funds-icon i {
    color: #f7863b !important;
}

body.dark-mode .wallet-icon:hover,
body.dark-mode .eye-icon:hover,
body.dark-mode .add-funds-icon i:hover {
    color: #e6732a !important;
    transform: scale(1.1) !important;
}

body.dark-mode .saldo_user {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Qwords Tiles Dark Mode */
body.dark-mode .qwords-tiles {
    background-color: #272727 !important;
}

body.dark-mode .qwords-tiles .tile {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #cccccc !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .qwords-tiles .tile:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
    color: white !important;
}

body.dark-mode .qwords-tiles .tile a {
    color: #cccccc !important;
    text-decoration: none !important;
}

body.dark-mode .qwords-tiles .tile:hover a {
    color: #ffffff !important;
}



body.dark-mode .qwords-tiles .tile .stat {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 42px !important;
}

body.dark-mode .qwords-tiles .tile:hover .stat {
    color: #fff !important;
    transform: scale(1.1) !important;
}

/* Tile Hover Colors - Maintain Original Color Scheme */
body.dark-mode .qwords-tiles .tile.services:hover {
    background: #EE4D30 !important;
    color: white !important;
}

body.dark-mode .qwords-tiles .tile.domain:hover {
    background: #D9920C !important;
    color: white !important;
}

body.dark-mode .qwords-tiles .tile.supporttickets:hover {
    background: #3072EE !important;
    color: white !important;
}

body.dark-mode .qwords-tiles .tile.invoices:hover {
    background: #00AE7E !important;
    color: white !important;
}

/* Icon Colors for Each Tile Type - Varied Colors */
body.dark-mode .iconservices {
    background: rgba(238, 77, 48, 0.16) !important;
    color: #EE4D30 !important;
}

body.dark-mode .icondomain {
    background: rgba(217, 146, 12, 0.16) !important;
    color: #D9920C !important;
}

body.dark-mode .iconticket {
    background: rgba(48, 114, 238, 0.16) !important;
    color: #3072EE !important;
}

body.dark-mode .icontagihan {
    background: rgba(0, 174, 126, 0.16) !important;
    color: #00AE7E !important;
}

/* Override the general icon color to use specific colors */
body.dark-mode .qwords-tiles .tile .icon.iconservices {
    background: rgba(238, 77, 48, 0.16) !important;
    color: #EE4D30 !important;
}

body.dark-mode .qwords-tiles .tile .icon.icondomain {
    background: rgba(217, 146, 12, 0.16) !important;
    color: #D9920C !important;
}

body.dark-mode .qwords-tiles .tile .icon.iconticket {
    background: rgba(48, 114, 238, 0.16) !important;
    color: #3072EE !important;
}

body.dark-mode .qwords-tiles .tile .icon.icontagihan {
    background: rgba(0, 174, 126, 0.16) !important;
    color: #00AE7E !important;
}

/* Hover states for each icon type */
body.dark-mode .qwords-tiles .tile.services:hover .icon.iconservices {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body.dark-mode .qwords-tiles .tile.domain:hover .icon.icondomain {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body.dark-mode .qwords-tiles .tile.supporttickets:hover .icon.iconticket {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body.dark-mode .qwords-tiles .tile.invoices:hover .icon.icontagihan {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Promo Container Dark Mode */
body.dark-mode .promo-container {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .promo-container:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .promo-section {
    background-color: #404040 !important;
}

body.dark-mode .marquee {
    background-color: #404040 !important;
}

body.dark-mode .marquee-content {
    background-color: #404040 !important;
}

body.dark-mode .carousel-cell {
    background-color: #555555 !important;
    border: 1px solid #666666 !important;
    border-radius: 12px !important;
}

body.dark-mode .carousel-cell:hover {
    background-color: #666666 !important;
    border-color: #f7863b !important;
    box-shadow: 0 8px 25px rgba(247, 134, 59, 0.3) !important;
}

/* Modal Dark Mode for Client Area Home */
body.dark-mode .modal-content {
    background-color: #272727 !important;
    border: 1px solid #404040 !important;
    color: #cccccc !important;
}

body.dark-mode .modal-header {
    background-color: #404040 !important;
    border-bottom: 1px solid #555555 !important;
}

body.dark-mode .modal-title {
    color: #ffffff !important;
}

body.dark-mode .modal-body {
    background-color: #272727 !important;
    color: #cccccc !important;
}

body.dark-mode .modal-footer {
    background-color: #404040 !important;
    border-top: 1px solid #555555 !important;
}

/* Form Elements Dark Mode */
body.dark-mode .form-control {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .form-control:focus {
    background-color: #555555 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(247, 134, 59, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
    color: #999999 !important;
}

body.dark-mode .form-select {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .form-select:focus {
    background-color: #555555 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
}

/* Button Dark Mode */
body.dark-mode .btn-default {
    background-color: #555555 !important;
    border: 1px solid #666666 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-default:hover {
    background-color: #666666 !important;
    border-color: #777777 !important;
    color: #f7863b !important;
}

body.dark-mode .btn-info {
    background-color: #f7863b !important;
    border: 1px solid #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode .btn-info:hover {
    background-color: #e6732a !important;
    border-color: #e6732a !important;
    color: #ffffff !important;
}

body.dark-mode .btn-danger {
    background-color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #c82333 !important;
    color: #ffffff !important;
}

/* Radio and Checkbox Dark Mode */
body.dark-mode .btn-group-toggle .btn {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #cccccc !important;
}

body.dark-mode .btn-group-toggle .btn:hover {
    background-color: #555555 !important;
    border-color: #666666 !important;
    color: #ffffff !important;
}

body.dark-mode .btn-group-toggle .btn.active {
    background-color: #f7863b !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
}

/* Control Label Dark Mode */
body.dark-mode .control-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Textarea Dark Mode */
body.dark-mode textarea {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode textarea:focus {
    background-color: #555555 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(247, 134, 59, 0.25) !important;
}

/* Star Rating Dark Mode */
body.dark-mode .rating {
    color: #f7863b !important;
}

body.dark-mode .rating .rating-star {
    color: #f7863b !important;
}

body.dark-mode .rating .rating-star:hover {
    color: #e6732a !important;
}

/* Alert Messages Dark Mode */
body.dark-mode .alert {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-success {
    background-color: #1e4a2e !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-warning {
    background-color: #4a3c1e !important;
    border-color: #ffc107 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-danger {
    background-color: #4a1e1e !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

body.dark-mode .alert-info {
    background-color: #1e3a4a !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}

/* Wait/Loading Dark Mode */
body.dark-mode .wait {
    background-color: #404040 !important;
    color: #ffffff !important;
}

body.dark-mode .box-modal {
    background-color: #272727 !important;
    color: #cccccc !important;
}

/* Change Password Modal Dark Mode */
body.dark-mode .change-pw-button {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

body.dark-mode .change-pw-button:hover {
    background-color: #555555 !important;
    border-color: #f7863b !important;
    color: #f7863b !important;
    text-decoration: none !important;
}

/* Management Icons Dark Mode - Simple and Effective */
body.dark-mode .management-icon {
    background-color: #2d2d2d !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
}

body.dark-mode .management-option-card:hover .management-icon {
    background-color: #f7863b !important;
    border: none !important;
}

body.dark-mode .management-icon img {
    filter: brightness(0) invert(1) !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
}

body.dark-mode .management-option-card:hover .management-icon img {
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
}

/* Icon color adjustment for orange background */
body.dark-mode .management-option-card:hover .management-icon img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Move Service Button Dark Mode */
body.dark-mode .btn-move-service {
    background-color: #404040 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
}

body.dark-mode .btn-move-service:hover {
    background-color: #555555 !important;
    border-color: #666666 !important;
    color: #f7863b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .btn-move-service i {
    color: #ffffff !important;
    margin-right: 8px !important;
}

body.dark-mode .btn-move-service:hover i {
    color: #f7863b !important;
}

body.dark-mode .btn-block {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

body.dark-mode .btn-block:hover {
    background: #218838;
    border-color: #1e7e34;
    color: #ffffff;
}


body.dark-mode .email-verification {
    background-color: #070707;
    border-bottom: 1px solid #111111;
    color: #ccc;
}

body.dark-mode .panel {
    background-color: #272727;
}

body.dark-mode .list-group-item {
    background-color: #272727;
}


body.dark-mode table.table-list thead th {
    background-color: gray !important;
    color:white;
}

body.dark-mode .table-list>tbody>tr>td {
    background-color: gray;
    color: white;
}

body.dark-mode .btn-default, .form-group .btn-default {
    background-color: gray;
}

body.dark-mode .dataTables_wrapper .dataTables_length {
    background-color: gray;
    color: white;
}

body.dark-mode .dropdown-menu {
    background-color: gray;
}

body.dark-mode .dropdown-menu>li>a {
    color: white;
}

body.dark-mode .email-verification .btn {
    color: white;
    background: #e44431;
}

body.dark-mode .btn-default, .form-group .btn-default {
    color: #fff;
}

body.dark-mode div.dataTables_wrapper div.dataTables_info {
    background-color: #252525;
}

body.dark-mode .ticket-number {
    color: #000000;
}

body.dark-mode .ticket-subject {
    color: #ffffff;
}

body.dark-mode .ticket-reply {
    background-color: #000;
}

body.dark-mode .ticket-reply.staff .user {
    background-color: #0d0600;
}

body.dark-mode #list-fitur.nav-tabs>li.active>a, #list-fitur.nav-tabs>li.active>a:focus, #list-fitur.nav-tabs>li.active>a:hover {
    background-color: #555555;
    border-color: #666666;
    color: #ffffff;
}

body.dark-mode .ticket-reply .message {
    color:white;
}

body.dark-mode .nav-tabs {
    background: #272727;
    border-bottom-color: #404040;
}

body.dark-mode .bg-white {
    background: #000;
}


/*Fix ticket color - Januari 2020
body.dark-mode .form-control:focus {
    color: black;
}

body.dark-mode .disabled {
    color: black;
}

body.dark-mode .disabled {
    color: black;
}

body.dark-mode textarea {
    color: black;
}
/*Fix ticket color*/


/* cPanel Dashboard Dark Mode Support */
body.dark-mode .dashboard-header {
    background: linear-gradient(135deg, #EE4D30 0%, #ff6b47 100%);
    color: #ffffff;
}

body.dark-mode .package-badge {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

body.dark-mode .package-title {
    color: #ffffff;
}

body.dark-mode .domain-info {
    color: #ffffff;
}

body.dark-mode .domain-link {
    color: #ffffff;
}

body.dark-mode .domain-link:hover {
    color: #e2e8f0;
}

/* Panel Title Dark Mode */
body.dark-mode .panel-title {
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

body.dark-mode .panel-title:hover {
    color: #f7863b !important;
}

/* General Headings Dark Mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
}


body.dark-mode h2 {
    font-size: 2.2rem !important;
}

body.dark-mode h3 {
    font-size: 2rem !important;
}

body.dark-mode h4 {
    font-size: 1.8rem !important;
}

body.dark-mode h5 {
    font-size: 1.6rem !important;
}

body.dark-mode h6 {
    font-size: 1.4rem !important;
}

/* cPanel Cards Dark Mode */
body.dark-mode .stats-card,
body.dark-mode .billing-card,
body.dark-mode .addon-card,
body.dark-mode .email-card,
body.dark-mode .wordpress-card,
body.dark-mode .info-card,
body.dark-mode .shortcuts-card {
    background: #2d2d2d;
    border: 1px solid #404040;
    color: #e5e5e5;
}

body.dark-mode .stats-card:hover,
body.dark-mode .billing-card:hover,
body.dark-mode .addon-card:hover,
body.dark-mode .email-card:hover,
body.dark-mode .wordpress-card:hover,
body.dark-mode .info-card:hover,
body.dark-mode .shortcuts-card:hover {
    background: #333333;
    border-color: #555555;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* cPanel Card Headers */
body.dark-mode .card-header {
    background: #404040;
    border-bottom: 1px solid #555555;
}

body.dark-mode .card-title {
    color: #ffffff;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
}

body.dark-mode .card-title i {
    color: #EE4D30;
}

/* cPanel Stats Items */
body.dark-mode .stat-item {
    background: #404040;
    border: 1px solid #555555;
}

body.dark-mode .stat-icon {
    background: linear-gradient(135deg, #EE4D30 0%, #ff6b47 100%);
}

body.dark-mode .stat-info h4 {
    color: #ffffff;
}

body.dark-mode .stat-value {
    background: #EE4D30;
    color: #ffffff;
}

/* cPanel Usage Alerts */
body.dark-mode .usage-alert {
    background: #2d1b1b;
    border: 1px solid #5c2a2a;
}

body.dark-mode .usage-info {
    background: #1b2d3a;
    border: 1px solid #2a5c5c;
    color: #3b82f6;
}

/* cPanel Billing Items */
body.dark-mode .billing-item {
    border-bottom: 1px solid #555555;
}

body.dark-mode .billing-item .label {
    color: #cccccc !important;
}

body.dark-mode .billing-item .value {
    background: #404040;
    color: #ffffff !important;
    border: 1px solid #555555;
}

/* Fix Billing Overview Card - ensure text is readable */
#cPanelBillingOverviewPanel .card-title {
    color: #2c3e50 !important;
}

body.dark-mode #cPanelBillingOverviewPanel .card-title {
    color: #ffffff !important;
}

#cPanelBillingOverviewPanel .billing-item .label {
    color: #6c757d !important;
}

body.dark-mode #cPanelBillingOverviewPanel .billing-item .label {
    color: #cccccc !important;
}

#cPanelBillingOverviewPanel .billing-item .value {
    color: #2c3e50 !important;
}

body.dark-mode #cPanelBillingOverviewPanel .billing-item .value {
    color: #ffffff !important;
}

#cPanelBillingOverviewPanel .card-body {
    color: #2c3e50 !important;
}

body.dark-mode #cPanelBillingOverviewPanel .card-body {
    color: #cccccc !important;
}

/* cPanel Shortcuts */
body.dark-mode .shortcut-item {
    background: #404040;
    border: 1px solid #555555;
}

body.dark-mode .shortcut-item:hover {
    background: #555555;
    border-color: #666666;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

body.dark-mode .shortcut-icon {
    background: #555555;
}

body.dark-mode .shortcut-label {
    color: #ffffff;
}

/* cPanel Email Form */
body.dark-mode .email-form .form-control {
    background: #404040;
    border: 1px solid #555555;
    color: #ffffff;
}

body.dark-mode .email-form .form-control:focus {
    background: #555555;
    border-color: #EE4D30;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(238, 77, 48, 0.25);
}

body.dark-mode .input-group-text {
    background: #EE4D30;
    border: 1px solid #EE4D30;
    color: #ffffff;
}

/* cPanel Buttons */
body.dark-mode .btn-visit {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: #ffffff;
}

body.dark-mode .btn-visit:hover {
    background: rgba(255,255,255,0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

body.dark-mode .btn-create {
    background: #EE4D30;
    color: #ffffff;
}

body.dark-mode .btn-create:hover {
    background: #d63e2a;
    color: #ffffff;
}

body.dark-mode .btn-addon {
    background: #10b981;
    color: #ffffff;
}

body.dark-mode .btn-addon:hover {
    background: #059669;
    color: #ffffff;
}

/* cPanel WordPress */
body.dark-mode .wordpress-content {
    color: #e5e5e5;
}

body.dark-mode .wp-url-preview {
    background: #404040;
    color: #cccccc;
}

body.dark-mode .wp-install-form .form-control {
    background: #404040;
    border: 1px solid #555555;
    color: #ffffff;
}

body.dark-mode .wp-install-form .form-control:focus {
    background: #555555;
    border-color: #EE4D30;
    color: #ffffff;
}

/* cPanel Info Items */
body.dark-mode .info-item {
    border-bottom: 1px solid #555555;
}

body.dark-mode .info-label {
    color: #cccccc;
}

body.dark-mode .info-value {
    background: #404040;
    color: #ffffff;
}

/* cPanel Form Elements */
body.dark-mode .form-control {
    background: #404040;
    border: 1px solid #555555;
    color: #ffffff;
}

body.dark-mode .form-control:focus {
    background: #555555;
    border-color: #EE4D30;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(238, 77, 48, 0.25);
}

body.dark-mode .form-control::placeholder {
    color: #999999;
}

body.dark-mode .form-select {
    background: #404040;
    border: 1px solid #555555;
    color: #ffffff;
}

body.dark-mode .form-select:focus {
    background: #555555;
    border-color: #EE4D30;
    color: #ffffff;
}

/* cPanel Alerts */
body.dark-mode .alert {
    background: #404040;
    border: 1px solid #555555;
    color: #ffffff;
}

body.dark-mode .alert-success {
    background: #1e4a2e;
    border-color: #28a745;
    color: #ffffff;
}

body.dark-mode .alert-warning {
    background: #4a3c1e;
    border-color: #ffc107;
    color: #ffffff;
}

body.dark-mode .alert-danger {
    background: #4a1e1e;
    border-color: #dc3545;
    color: #ffffff;
}

body.dark-mode .alert-info {
    background: #1e3a4a;
    border-color: #17a2b8;
    color: #ffffff;
}

/* cPanel Responsive Dark Mode */
@media (max-width: 1024px) {
    body.dark-mode .dashboard-header {
        background: linear-gradient(135deg, #EE4D30 0%, #ff6b47 100%);
    }
}

@media (max-width: 768px) {
    body.dark-mode .shortcut-item {
        background: #404040;
        border: 1px solid #555555;
    }
    
    body.dark-mode .shortcut-item:hover {
        background: #555555;
        border-color: #666666;
    }
}

@media (max-width: 480px) {
    body.dark-mode .dashboard-header {
        background: linear-gradient(135deg, #EE4D30 0%, #ff6b47 100%);
    }
}

@media (max-width: 991px) {
    body.dark-mode .wrapps-topnav {
        background-color: rgb(64, 64, 64) !important;
        color: rgb(204, 204, 204) !important;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px !important;
        border-width: 1px !important;
        border-style: solid !important;
        border-color: rgb(85, 85, 85) !important;
        border-radius: 15px !important;
        padding: 10px 15px;
        gap: 8px;
        min-height: 50px;
        z-index: 100;
    }
    
    body.dark-mode .wrap-search .form-group #kb-search-input {
        background: #4a5568;
        border-color: #718096;
        color: #ffffff;
    }
    
    body.dark-mode .wrap-search .form-group #kb-search-input:focus {
        background: #4a5568;
        border-color: #f7863b;
        color: #ffffff;
    }
    
    body.dark-mode .wrap-search .form-group #kb-search-input::placeholder {
        color: #a0aec0;
    }

    body.dark-mode  section#main-menu {
        background: #1a1a1a !important;
    }
    
    body.dark-mode .logo-wrapper {
        border-bottom: 1px solid #333333 !important;
        padding: 0 10px 15px 10px !important;
    }
    
    body.dark-mode .navbar-left #primary-nav {
        background: #171717;
    }

}

@media (max-width: 767px) {
    body.dark-mode .wrapps-topnav {
        background-color: rgb(64, 64, 64) !important;
        color: rgb(204, 204, 204) !important;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px !important;
        border-width: 1px !important;
        border-style: solid !important;
        border-color: rgb(85, 85, 85) !important;
        border-radius: 15px !important;
        padding: 8px 12px;
        gap: 6px;
        min-height: 45px;
        z-index: 100;
    }
    
    body.dark-mode .wrap-search .form-group #kb-search-input {
        background: #4a5568;
        border-color: #718096;
        color: #ffffff;
        height: 40px;
        padding: 0px 15px 0px 45px;
        font-size: 14px;
    }
    
    body.dark-mode .wrap-search .form-group #kb-search-input:focus {
        background: #4a5568;
        border-color: #f7863b;
        color: #ffffff;
        box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.2);
    }
    
    body.dark-mode .wrap-search .form-group #kb-search-input::placeholder {
        color: #a0aec0;
    }
    
    body.dark-mode ul.top-nav>.wrap-count>a {
        background: #4a5568;
        border-color: #718096;
        color: #ffffff !important;
    }
    
    body.dark-mode ul.top-nav>.wrap-count>a:hover {
        background: #718096;
        border-color: #f7863b;
        color: #f7863b !important;
    }
    
    body.dark-mode .right_content ul.top-nav li.wrap-language {
        background: #4a5568;
        border-color: #718096;
        color: #ffffff !important;
    }
    
    body.dark-mode .right_content ul.top-nav li.wrap-language:hover {
        background: #718096;
        border-color: #f7863b;
        color: #f7863b !important;
    }
    
    /* Mobile - Text styling */
    body.dark-mode .wrapps-topnav span,
    body.dark-mode .wrapps-topnav small,
    body.dark-mode .wrapps-topnav label,
    body.dark-mode .wrapps-topnav .badge,
    body.dark-mode .wrapps-topnav .count {
        color: rgb(204, 204, 204) !important;
    }
}

/* Email Verification Dark Mode Styles */
body.dark-mode .email-verification {
    background: linear-gradient(135deg, #272727 0%, #1a1a1a 100%) !important;
    border: 1px solid #404040 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.dark-mode .email-verification::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #f7863b 0%, #ff9a56 100%) !important;
    border-radius: 12px 12px 0 0 !important;
}

body.dark-mode .email-verification.alert-warning {
    background: linear-gradient(135deg, #2d2a1a 0%, #1a1a0a 100%) !important;
    border-color: #6c5a00 !important;
    color: #f0d000 !important;
}

body.dark-mode .email-verification.alert-info {
    background: linear-gradient(135deg, #1a2d2d 0%, #0a1a1a 100%) !important;
    border-color: #006666 !important;
    color: #00cccc !important;
}

body.dark-mode .email-verification.alert-success {
    background: linear-gradient(135deg, #1a2d1a 0%, #0a1a0a 100%) !important;
    border-color: #006600 !important;
    color: #00cc00 !important;
}

body.dark-mode .email-verification.alert-danger {
    background: linear-gradient(135deg, #2d1a1a 0%, #1a0a0a 100%) !important;
    border-color: #660000 !important;
    color: #cc0000 !important;
}

body.dark-mode .email-verification .fw-medium {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

body.dark-mode .email-verification .far,
body.dark-mode .email-verification .fas {
    color: inherit !important;
    font-size: 1.75rem !important;
    margin-right: 0 !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
}

body.dark-mode .email-verification .btn {
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

body.dark-mode .email-verification .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
}

body.dark-mode .email-verification .btn-warning {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: #000 !important;
}

body.dark-mode .email-verification .btn-warning:hover {
    background: linear-gradient(135deg, #e67e22 0%, #f7863b 100%) !important;
    color: #000 !important;
}

body.dark-mode .email-verification .btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #20c9d2 100%) !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-info:hover {
    background: linear-gradient(135deg, #138496 0%, #17a2b8 100%) !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%) !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-success:hover {
    background: linear-gradient(135deg, #218838 0%, #28a745 100%) !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%) !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-danger:hover {
    background: linear-gradient(135deg, #c82333 0%, #dc3545 100%) !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-close {
    background: rgba(108, 117, 125, 0.2) !important;
    border: none !important;
    font-size: 1.1rem !important;
    color: #6c757d !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

body.dark-mode .email-verification .btn-close:hover {
    background-color: #404040 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

body.dark-mode .email-verification .btn-close:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.25) !important;
}

body.dark-mode .email-verification .text-warning {
    color: #f0d000 !important;
}

body.dark-mode .email-verification .text-info {
    color: #00cccc !important;
}

body.dark-mode .email-verification .text-success {
    color: #00cc00 !important;
}

body.dark-mode .email-verification .text-danger {
    color: #cc0000 !important;
}

/* Responsive Design for Email Verification Dark Mode */
@media (max-width: 768px) {
    body.dark-mode .email-verification {
        padding: 16px 18px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
    }

    body.dark-mode .email-verification .row {
        padding: 0 !important;
        min-height: 36px !important;
    }

    body.dark-mode .email-verification .col-1 {
        padding: 0 6px !important;
    }

    body.dark-mode .email-verification .col-10 {
        padding: 0 10px !important;
    }

    body.dark-mode .email-verification .col-12 {
        padding: 0 6px !important;
    }

    body.dark-mode .email-verification .btn {
        font-size: 0.85rem !important;
        padding: 8px 16px !important;
        min-height: 36px !important;
    }

    body.dark-mode .email-verification .fw-medium {
        font-size: 1rem !important;
    }

    body.dark-mode .email-verification .far,
    body.dark-mode .email-verification .fas {
        font-size: 1.5rem !important;
    }

    body.dark-mode .email-verification .btn-close {
        width: 28px !important;
        height: 28px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    body.dark-mode .email-verification {
        padding: 14px 16px !important;
        margin-bottom: 16px !important;
        border-radius: 8px !important;
    }

    body.dark-mode .email-verification .fw-medium {
        font-size: 0.95rem !important;
    }

    body.dark-mode .email-verification .btn {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        min-height: 32px !important;
    }

    body.dark-mode .email-verification .far,
    body.dark-mode .email-verification .fas {
        font-size: 1.3rem !important;
    }

    body.dark-mode .email-verification .btn-close {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Clean Email Verification Dark Mode */
body.dark-mode .email-verification {
    background: #2d2a1a !important;
    border: 1px solid #6c5a00 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .email-verification::before {
    background: #f7863b !important;
}

body.dark-mode .email-verification .fw-medium {
    color: #f0d000 !important;
}

/* Icon adjustments for dark mode */
body.dark-mode .email-verification .fa-exclamation-triangle {
    font-size: 1.2rem !important;
}

body.dark-mode .email-verification .fa-shield-alt {
    font-size: 1.2rem !important;
}

body.dark-mode .email-verification .fa-check-circle {
    font-size: 1.2rem !important;
}

body.dark-mode .email-verification .fa-times-circle {
    font-size: 1.2rem !important;
}

body.dark-mode .email-verification .fa-envelope {
    font-size: 1.2rem !important;
}

body.dark-mode .email-verification .fa-receipt {
    font-size: 1.2rem !important;
}

body.dark-mode .email-verification .btn-warning {
    background: #f7863b !important;
    color: #000 !important;
    border: 1px solid #e6732a !important;
}

body.dark-mode .email-verification .btn-warning:hover {
    background: #e67e22 !important;
    border-color: #d55a1a !important;
    color: #000 !important;
}

body.dark-mode .email-verification .btn-info {
    background: #17a2b8 !important;
    color: #fff !important;
    border: 1px solid #138496 !important;
}

body.dark-mode .email-verification .btn-info:hover {
    background: #138496 !important;
    border-color: #0f6674 !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-danger {
    background: #dc3545 !important;
    color: #fff !important;
    border: 1px solid #c82333 !important;
}

body.dark-mode .email-verification .btn-danger:hover {
    background: #c82333 !important;
    border-color: #a71e2a !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-success {
    background: #28a745 !important;
    color: #fff !important;
    border: 1px solid #218838 !important;
}

body.dark-mode .email-verification .btn-success:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
    color: #fff !important;
}

body.dark-mode .email-verification .btn-close {
    background: rgba(108, 117, 125, 0.2) !important;
    color: #a0aec0 !important;
}

body.dark-mode .email-verification .btn-close:hover {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #ff6b6b !important;
}

/* Client Register Dark Mode Styling */
body.dark-mode #registration .sub-heading span {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(247, 134, 59, 0.3) !important;
}

body.dark-mode #registration .sub-heading:first-child {
    margin-top: 20px !important;
}

body.dark-mode #registration .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-bottom: 0 !important;
}

body.dark-mode #registration .row > [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body.dark-mode #registration .row:last-child {
    margin-bottom: 0 !important;
}

body.dark-mode #registration .field,
body.dark-mode #registration .form-control {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #404040 !important;
    border: 2px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode #registration .field:focus,
body.dark-mode #registration .form-control:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.2) !important;
    background: #4a4a4a !important;
}

body.dark-mode #registration .prepend-icon .field-icon {
    color: #cccccc !important;
    font-size: 16px !important;
}

body.dark-mode #registration .prepend-icon:hover .field-icon,
body.dark-mode #registration .prepend-icon:focus-within .field-icon {
    color: #f7863b !important;
}

body.dark-mode #registration .prepend-icon .field,
body.dark-mode #registration .prepend-icon .form-control {
    padding-left: 55px !important;
    padding-right: 20px !important;
}

/* Phone number input specific styling for dark mode */
body.dark-mode #registration #inputPhone {
    padding-left: 100px !important;
    padding-right: 20px !important;
}

/* International phone input styling for dark mode */
body.dark-mode #registration .intl-tel-input {
    width: 100% !important;
}

body.dark-mode #registration .intl-tel-input .selected-flag {
    padding-left: 20px !important;
    padding-right: 10px !important;
    width: 90px !important;
    background: #404040 !important;
    border-right: 1px solid #555555 !important;
}

body.dark-mode #registration .intl-tel-input .selected-flag .flag {
    margin-right: 8px !important;
}

body.dark-mode #registration .intl-tel-input .selected-flag .arrow {
    margin-left: 8px !important;
    border-top-color: #cccccc !important;
}

body.dark-mode #registration .intl-tel-input .country-list {
    z-index: 1000 !important;
    background: #2a2a2a !important;
    border: 1px solid #555555 !important;
}

body.dark-mode #registration .intl-tel-input .country-list .country {
    color: #ffffff !important;
}

body.dark-mode #registration .intl-tel-input .country-list .country:hover {
    background: #404040 !important;
}

/* Terms of Service Dark Mode */
body.dark-mode .tospanel {
    border: 2px solid #e44431 !important;
    background: #2a2a2a !important;
}

body.dark-mode .tospanel .panel-heading {
    background: linear-gradient(135deg, #e44431 0%, #f7863b 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .tospanel .panel-title {
    color: #ffffff !important;
}

body.dark-mode .tosicon {
    color: #ffffff !important;
}

body.dark-mode .tospanel .panel-body {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .tospanel .checkcontainer {
    color: #ffffff !important;
}

body.dark-mode .tospanel .checkcontainer a {
    color: #ff9a56 !important;
}

body.dark-mode .tospanel .checkcontainer a:hover {
    color: #f7863b !important;
}

/* Password Strength Dark Mode */
body.dark-mode .password-strength-meter .progress {
    background-color: #555555 !important;
}

body.dark-mode .password-strength-meter .progress-bar {
    background-color: #f7863b !important;
}

body.dark-mode .password-strength-meter .text-muted {
    color: #cccccc !important;
}

/* Generate Password Button Dark Mode */
body.dark-mode .generate-password {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: #ffffff !important;
    display: inline-block !important;
    margin: 0 auto !important;
    box-shadow: 0 2px 8px rgba(247, 134, 59, 0.2) !important;
}

body.dark-mode .generate-password:hover {
    background: linear-gradient(135deg, #e6732a 0%, #f7863b 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(247, 134, 59, 0.3) !important;
}

/* Generate Password Container Dark Mode */
body.dark-mode #containerPassword .col-sm-12.text-center {
    margin-bottom: 25px !important;
    padding: 0 15px !important;
}

/* Register Button Dark Mode */
body.dark-mode #real-submit {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: #ffffff !important;
}

body.dark-mode #real-submit:hover {
    background: linear-gradient(135deg, #e6732a 0%, #f7863b 100%) !important;
}

/* Verify Button Dark Mode */
body.dark-mode #btn-verify-modal {
    background: linear-gradient(135deg, #17a2b8 0%, #20c9d2 100%) !important;
    color: #ffffff !important;
}

body.dark-mode #btn-verify-modal:hover {
    background: linear-gradient(135deg, #138496 0%, #17a2b8 100%) !important;
}

/* Modal Dark Mode */
body.dark-mode .modal-content {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .modal-header {
    background: #333333 !important;
    border-bottom: 1px solid #555555 !important;
}

body.dark-mode .modal-title {
    color: #ffffff !important;
}

body.dark-mode .modal-body {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .modal-footer {
    background: #333333 !important;
    border-top: 1px solid #555555 !important;
}

body.dark-mode .modal .form-control {
    background: #404040 !important;
    border: 2px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .modal .form-control:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.2) !important;
    background: #4a4a4a !important;
}

/* Login Form Dark Mode Styling */
body.dark-mode .logincontainer {
    background: #2a2a2a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .logincontainer .form-group input,
body.dark-mode .logincontainer .form-group select,
body.dark-mode .logincontainer .form-group textarea {
    background: #404040 !important;
    border: 2px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .logincontainer .form-group input:focus,
body.dark-mode .logincontainer .form-group select:focus,
body.dark-mode .logincontainer .form-group textarea:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.2) !important;
    background: #4a4a4a !important;
}

body.dark-mode .logincontainer .form-group input:hover,
body.dark-mode .logincontainer .form-group select:hover,
body.dark-mode .logincontainer .form-group textarea:hover {
    border-color: #f7863b !important;
}

body.dark-mode .logincontainer .btn-primary {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .logincontainer .btn-primary:hover {
    background: linear-gradient(135deg, #e6732a 0%, #f7863b 100%) !important;
}

body.dark-mode .logincontainer .btn-default {
    background: #404040 !important;
    color: #f7863b !important;
    border: 2px solid #f7863b !important;
}

body.dark-mode .logincontainer .btn-default:hover {
    background: #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode .logincontainer .checkbox label {
    color: #ffffff !important;
}

body.dark-mode .logincontainer .header-lined h1 {
    color: #ffffff !important;
}

body.dark-mode .logincontainer .header-lined p {
    color: #cccccc !important;
}

/* Contact Form Dark Mode Styling */
body.dark-mode .contact-form-container {
    background: #2a2a2a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .contact-form-container .form-group label {
    color: #ffffff !important;
}

body.dark-mode .contact-form-container .form-control {
    background: #404040 !important;
    border: 2px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .contact-form-container .form-control:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.2) !important;
    background: #4a4a4a !important;
}

body.dark-mode .contact-form-container .form-control:hover {
    border-color: #f7863b !important;
}

body.dark-mode .contact-form-container .btn-primary {
    background: linear-gradient(135deg, #f7863b 0%, #ff9a56 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .contact-form-container .btn-primary:hover {
    background: linear-gradient(135deg, #e6732a 0%, #f7863b 100%) !important;
}

body.dark-mode .contact-form-container .btn-default {
    background: #404040 !important;
    color: #f7863b !important;
    border: 2px solid #f7863b !important;
}

body.dark-mode .contact-form-container .btn-default:hover {
    background: #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode .contact-form-container .btn-danger {
    background: #e44431 !important;
    color: #ffffff !important;
}

body.dark-mode .contact-form-container .btn-danger:hover {
    background: #c0392b !important;
}

body.dark-mode .contact-form-container .checkbox label {
    color: #ffffff !important;
}

body.dark-mode .contact-form-container h3 {
    color: #ffffff !important;
    border-bottom: 2px solid #f7863b !important;
}

body.dark-mode .contact-form-container .controls.checkbox {
    background: #1a1a1a !important;
    border: 1px solid #555555 !important;
    padding: 20px 45px !important;
}

body.dark-mode .contact-form-container .controls.checkbox label {
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    padding: 6px 0 !important;
    line-height: 1.4 !important;
}

body.dark-mode .contact-form-container .controls.checkbox label:hover {
    color: #f7863b !important;
    background: rgba(247, 134, 59, 0.1) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
}

body.dark-mode .contact-form-container .controls.checkbox input[type="checkbox"] {
    margin-right: 12px !important;
    transform: scale(1.1) !important;
    accent-color: #f7863b !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

body.dark-mode .contact-form-container .alert-info {
    background: rgba(247, 134, 59, 0.15) !important;
    color: #ffb366 !important;
    border-left: 4px solid #f7863b !important;
}

/* Modal Dark Mode */
body.dark-mode .contact-form-container .modal-content {
    background: #2a2a2a !important;
    border: 1px solid #555555 !important;
}

body.dark-mode .contact-form-container .modal-header {
    background: #f7863b !important;
    color: #ffffff !important;
    border-bottom: 1px solid #555555 !important;
}

body.dark-mode .contact-form-container .modal-body {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .contact-form-container .modal-footer {
    background: #1a1a1a !important;
    border-top: 1px solid #555555 !important;
}

/* Account User Management - Dark Mode */
body.dark-mode .account-user-management {
    background: #2a2a2a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .account-user-management h2 {
    color: #ffffff !important;
}

body.dark-mode .account-user-management p {
    color: #cccccc !important;
}

body.dark-mode .account-user-management table.table {
    background: #2a2a2a !important;
    border-color: #555555 !important;
}

body.dark-mode .account-user-management table.table tr th {
    background: #404040 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #f7863b !important;
    font-weight: 600 !important;
}

body.dark-mode .account-user-management table.table tr td {
    border-top: 1px solid #555555 !important;
    color: #ffffff !important;
    background: #2a2a2a !important;
}

body.dark-mode .account-user-management table.table-striped tbody tr:nth-of-type(odd) td {
    background: #333333 !important;
}

body.dark-mode .account-user-management table.table-striped tbody tr:nth-of-type(even) td {
    background: #2a2a2a !important;
}

body.dark-mode .account-user-management table.table tbody tr:hover td {
    background: #404040 !important;
}

body.dark-mode .account-user-management .btn-default {
    background: #404040 !important;
    color: #f7863b !important;
    border: 2px solid #f7863b !important;
}

body.dark-mode .account-user-management .btn-default:hover {
    background: #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode .account-user-management .btn-danger {
    background: #e44431 !important;
    color: #ffffff !important;
}

body.dark-mode .account-user-management #invitePermissions {
    background: #1a1a1a !important;
    border: 1px solid #555555 !important;
}

body.dark-mode .account-user-management #invitePermissions .checkbox-inline,
body.dark-mode .account-user-management #invitePermissions label.checkbox-inline {
    color: #ffffff !important;
}

/* User Security Dark Mode Styling */
body.dark-mode .user-security-container {
    background: #2a2a2a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .user-security-container h2 {
    color: #ffffff !important;
    border-bottom: 2px solid #f7863b !important;
}

body.dark-mode .user-security-container .twofa-config-link {
    color: #cccccc !important;
}

body.dark-mode .user-security-container .twofa-config-link strong {
    color: #f7863b !important;
}

body.dark-mode .user-security-container .form-group label {
    color: #ffffff !important;
}

body.dark-mode .user-security-container .form-control {
    background: #404040 !important;
    border: 2px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .user-security-container .form-control:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.2) !important;
    background: #4a4a4a !important;
}

body.dark-mode .user-security-container .form-control:hover {
    border-color: #f7863b !important;
}

body.dark-mode .user-security-container .btn-default {
    background: #404040 !important;
    color: #f7863b !important;
    border: 2px solid #f7863b !important;
}

body.dark-mode .user-security-container .btn-default:hover {
    background: #f7863b !important;
    color: #ffffff !important;
}

body.dark-mode .user-security-container .btn-danger {
    background: #e44431 !important;
    color: #ffffff !important;
}

body.dark-mode .user-security-container .btn-danger:hover {
    background: #c0392b !important;
}

body.dark-mode .user-security-container .btn-success {
    background: #28a745 !important;
    color: #ffffff !important;
}

body.dark-mode .user-security-container .btn-success:hover {
    background: #218838 !important;
}

body.dark-mode .user-security-container p {
    border-top: 1px solid #555555 !important;
}

body.dark-mode .user-security-container .alert-warning {
    background: rgba(247, 134, 59, 0.15) !important;
    color: #ffb366 !important;
    border-color: rgba(247, 134, 59, 0.2) !important;
}

body.dark-mode .user-security-container .linked-accounts {
    background: #1a1a1a !important;
    border: 1px solid #555555 !important;
}

/* Linked Accounts Dark Mode Styling */
body.dark-mode #tableLinkedAccounts,
body.dark-mode .table {
    background: #2a2a2a !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode #tableLinkedAccounts thead th,
body.dark-mode .table thead th {
    background: #404040 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #f7863b !important;
}

body.dark-mode #tableLinkedAccounts tbody td,
body.dark-mode .table tbody td {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border-top: 1px solid #555555 !important;
}

body.dark-mode #tableLinkedAccounts tbody tr:nth-of-type(odd) td,
body.dark-mode .table-striped tbody tr:nth-of-type(odd) td {
    background: #333333 !important;
}

body.dark-mode #tableLinkedAccounts tbody tr:nth-of-type(even) td,
body.dark-mode .table-striped tbody tr:nth-of-type(even) td {
    background: #2a2a2a !important;
}

body.dark-mode #tableLinkedAccounts tbody tr:hover td,
body.dark-mode .table tbody tr:hover td {
    background: #404040 !important;
}

body.dark-mode #tableLinkedAccounts tbody td[colspan],
body.dark-mode .table tbody td[colspan] {
    background: #2a2a2a !important;
    color: #cccccc !important;
}

body.dark-mode .dataTables_wrapper {
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #ffffff !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: #404040 !important;
    color: #ffffff !important;
    border: 2px solid #555555 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select:focus,
body.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247, 134, 59, 0.2) !important;
    background: #4a4a4a !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #404040 !important;
    color: #ffffff !important;
    border: 2px solid #555555 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f7863b !important;
    color: #ffffff !important;
    border-color: #f7863b !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #f7863b !important;
    color: #ffffff !important;
    border-color: #f7863b !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background: #1a1a1a !important;
    color: #666666 !important;
    border-color: #333333 !important;
}

/* Provider Messages Dark Mode */
body.dark-mode .providerLinkingMsg-preLink-connect_error,
body.dark-mode .providerLinkingMsg-preLink-other_user_exists,
body.dark-mode .providerLinkingMsg-preLink-already_linked,
body.dark-mode .providerLinkingMsg-preLink-default {
    background: rgba(228, 68, 49, 0.15) !important;
    color: #ffb366 !important;
    border-left-color: #e44431 !important;
}

body.dark-mode .providerLinkingMsg-preLink-linking_complete {
    background: rgba(40, 167, 69, 0.15) !important;
    color: #90ee90 !important;
    border-left-color: #28a745 !important;
}

/* Google Login Button Dark Mode */
body.dark-mode .user-security-container .btn-google,
body.dark-mode .user-security-container .btn-google-login,
body.dark-mode .user-security-container a[href*="google"],
body.dark-mode .user-security-container .google-login-btn {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 2px solid #555555 !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .user-security-container .btn-google:hover,
body.dark-mode .user-security-container .btn-google-login:hover,
body.dark-mode .user-security-container a[href*="google"]:hover,
body.dark-mode .user-security-container .google-login-btn:hover {
    background: #404040 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Social Login Buttons Dark Mode */
body.dark-mode .user-security-container .btn-social,
body.dark-mode .user-security-container .social-login-btn {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 2px solid #555555 !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .user-security-container .btn-social:hover,
body.dark-mode .user-security-container .social-login-btn:hover {
    background: #404040 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Generic Button Dark Mode for Social Logins */
body.dark-mode .user-security-container .btn[class*="google"],
body.dark-mode .user-security-container .btn[class*="social"],
body.dark-mode .user-security-container .btn[class*="oauth"] {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 2px solid #555555 !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .user-security-container .btn[class*="google"]:hover,
body.dark-mode .user-security-container .btn[class*="social"]:hover,
body.dark-mode .user-security-container .btn[class*="oauth"]:hover {
    background: #404040 !important;
    border-color: #f7863b !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* User Password Dark Mode */
body.dark-mode .user-password-container {
    background: #2a2a2a !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

body.dark-mode .user-password-container label.control-label {
    color: #ffffff !important;
}

body.dark-mode .user-password-container .form-control {
    background: #404040 !important;
    color: #ffffff !important;
    border: 2px solid #555555 !important;
}

body.dark-mode .user-password-container .form-control:focus {
    border-color: #f7863b !important;
    box-shadow: 0 0 0 3px rgba(247,134,59,0.18) !important;
    background: #333333 !important;
}

body.dark-mode .user-password-container .generate-password {
    background: #2a2a2a !important;
    color: #f5f5f5 !important;
    border: 2px solid #555555 !important;
}

body.dark-mode .user-password-container .generate-password:hover {
    background: #f7863b !important;
    color: #ffffff !important;
    border-color: #f7863b !important;
}

body.dark-mode .user-password-container .btn-default {
    background: #2a2a2a !important;
    color: #f7863b !important;
    border: 2px solid #f7863b !important;
}

body.dark-mode .user-password-container .btn-default:hover {
    background: #f7863b !important;
    color: #ffffff !important;
    border-color: #f7863b !important;
}

/* Backup Harian Section Dark Mode */
body.dark-mode .backup-harian-card {
    background: #272727 !important;
    border-color: #404040 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .backup-harian-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .backup-harian-header {
    background: #2d2d2d !important;
    border-bottom-color: #404040 !important;
}

body.dark-mode .backup-harian-title {
    color: #ffffff !important;
}

body.dark-mode .backup-harian-title i {
    color: #cccccc !important;
}

body.dark-mode .backup-harian-subtitle {
    color: #999999 !important;
}

body.dark-mode .backup-harian-container {
    padding: 20px 0;
}

body.dark-mode .backup-harian-text {
    color: #ffffff !important;
    margin-bottom: 20px;
}

body.dark-mode .backup-product-btn {
    background: #ff6b35 !important;
    border-color: #ff6b35 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3) !important;
}

body.dark-mode .backup-product-btn:hover {
    background: #ff5722 !important;
    border-color: #ff5722 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4) !important;
}

body.dark-mode .backup-btn-icon {
    color: #ffffff !important;
}

body.dark-mode .backup-product-btn:hover .backup-btn-icon {
    color: #ffffff !important;
}

/* SSL Shortcut Dark Mode */
body.dark-mode .ssl-shortcut-card {
    background: #272727 !important;
    border-color: #404040 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .ssl-shortcut-card:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .ssl-shortcut-icon {
    background: #404040 !important;
}

body.dark-mode .ssl-shortcut-icon i {
    color: #ff6b35 !important;
}

body.dark-mode .ssl-shortcut-title {
    color: #ffffff !important;
}

body.dark-mode .ssl-shortcut-price {
    color: #28a745 !important;
}

body.dark-mode .ssl-shortcut-desc {
    color: #cccccc !important;
}

body.dark-mode .ssl-shortcut-btn {
    background: #ff6b35 !important;
    color: #ffffff !important;
}

body.dark-mode .ssl-shortcut-btn:hover {
    background: #ff5722 !important;
    color: #ffffff !important;
}