/* WHMCS Black2 Template - Ultra Dark Mode */

/* CSS Variables for Ultra Dark Theme */
:root {
    --dark-bg-primary: #000000;
    --dark-bg-secondary: #000000;
    --dark-bg-tertiary: #000000;
    --dark-bg-quaternary: #000000;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #ffffff;
    --dark-text-muted: #ffffff;
    --dark-text-dim: #ffffff;
    --dark-border: transparent;
    --dark-border-light: transparent;
    --dark-accent: #000000;
    --dark-hover: #000000;
    
    /* Override Bootstrap variables */
    --blue: #ffffff;
    --indigo: #ffffff;
    --purple: #ffffff;
    --pink: #ffffff;
    --red: #ffffff;
    --orange: #ffffff;
    --yellow: #ffffff;
    --green: #ffffff;
    --teal: #ffffff;
    --cyan: #ffffff;
    --white: #ffffff;
    --gray: #ffffff;
    --gray-dark: #ffffff;
    --primary: #ffffff;
    --secondary: #ffffff;
    --success: #ffffff;
    --info: #ffffff;
    --warning: #ffffff;
    --danger: #ffffff;
    --light: #ffffff;
    --dark: #ffffff;
}

/* Force completely black backgrounds and white text on everything */
*, *::before, *::after, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea, select, button, option {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Icons - force transparent backgrounds in all states */
i, .fa, .fas, .far, .fal, .fad, .fab, [class*="fa-"], [class*="icon"] {
    background-color: transparent !important;
    color: #ffffff !important;
}

i:hover, .fa:hover, .fas:hover, .far:hover, .fal:hover, .fad:hover, .fab:hover, 
[class*="fa-"]:hover, [class*="icon"]:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Images and SVGs - preserve their backgrounds but ensure black fallback */
img, svg {
    background-color: #000000 !important;
}

/* Override any inline styles */
[style*="background"], [style*="color"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* HTML and Body */
html, body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff !important;
    background-color: #000000 !important;
}

p, span, div, label, small, strong, b, em, i, u, mark {
    color: #ffffff !important;
    background-color: #000000 !important;
}

/* Links */
a, a:hover, a:focus, a:active, a:visited {
    color: #ffffff !important;
    background-color: #000000 !important;
    text-decoration: none !important;
}

a:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
}

/* Links containing icons - preserve icon transparency */
a i, a .fa, a .fas, a .far, a .fal, a .fad, a .fab, a [class*="fa-"], a [class*="icon"] {
    background-color: transparent !important;
    color: #ffffff !important;
}

a:hover i, a:hover .fa, a:hover .fas, a:hover .far, a:hover .fal, a:hover .fad, a:hover .fab, 
a:hover [class*="fa-"], a:hover [class*="icon"] {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Form Elements */
input, select, textarea, button, .form-control, .field, .btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 4px !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: var(--dark-border-light) !important;
    outline: none !important;
}

/* Placeholders */
::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 0.7 !important;
}

/* Buttons */
.btn, button {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
}

.btn:hover, button:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Button icons - keep transparent */
.btn i, .btn .fa, .btn .fas, .btn .far, .btn .fal, .btn .fad, .btn .fab, 
.btn [class*="fa-"], .btn [class*="icon"],
button i, button .fa, button .fas, button .far, button .fal, button .fad, button .fab, 
button [class*="fa-"], button [class*="icon"] {
    background-color: transparent !important;
}

.btn:hover i, .btn:hover .fa, .btn:hover .fas, .btn:hover .far, .btn:hover .fal, .btn:hover .fad, .btn:hover .fab, 
.btn:hover [class*="fa-"], .btn:hover [class*="icon"],
button:hover i, button:hover .fa, button:hover .fas, button:hover .far, button:hover .fal, button:hover .fad, button:hover .fab, 
button:hover [class*="fa-"], button:hover [class*="icon"] {
    background-color: transparent !important;
}

.btn-primary {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #000000 !important;
    border: none !important;
}

.btn-secondary {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-danger {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-warning {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-info {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-light {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-dark {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

/* Cards and Panels */
.card, .panel, .panel-default, .panel-body, .panel-heading {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 4px !important;
}

.card-header, .card-footer, .panel-heading, .panel-footer {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

.card-body, .panel-body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Tables */
table, .table, thead, tbody, tfoot, tr, td, th {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #000000 !important;
}

.table-hover tbody tr:hover {
    background-color: #000000 !important;
}

.table thead th {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Navigation */
.navbar, .nav, .navbar-nav, .nav-link, .navbar-brand {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark-text-primary) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--dark-text-secondary) !important;
}

.navbar-light .navbar-brand {
    color: var(--dark-text-primary) !important;
}

/* Navigation icons */
.navbar i, .nav i, .navbar-nav i, .nav-link i, .navbar-brand i,
.navbar .fa, .nav .fa, .navbar-nav .fa, .nav-link .fa, .navbar-brand .fa,
.navbar .fas, .nav .fas, .navbar-nav .fas, .nav-link .fas, .navbar-brand .fas,
.navbar .far, .nav .far, .navbar-nav .far, .nav-link .far, .navbar-brand .far,
.navbar [class*="fa-"], .nav [class*="fa-"], .navbar-nav [class*="fa-"], .nav-link [class*="fa-"], .navbar-brand [class*="fa-"] {
    background-color: transparent !important;
}

.navbar:hover i, .nav:hover i, .navbar-nav:hover i, .nav-link:hover i, .navbar-brand:hover i,
.navbar:hover .fa, .nav:hover .fa, .navbar-nav:hover .fa, .nav-link:hover .fa, .navbar-brand:hover .fa,
.navbar:hover .fas, .nav:hover .fas, .navbar-nav:hover .fas, .nav-link:hover .fas, .navbar-brand:hover .fas,
.navbar:hover .far, .nav:hover .far, .navbar-nav:hover .far, .nav-link:hover .far, .navbar-brand:hover .far,
.navbar:hover [class*="fa-"], .nav:hover [class*="fa-"], .navbar-nav:hover [class*="fa-"], .nav-link:hover [class*="fa-"], .navbar-brand:hover [class*="fa-"] {
    background-color: transparent !important;
}

/* Dropdowns */
.dropdown-menu, .dropdown-item {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Modals */
.modal, .modal-content, .modal-header, .modal-body, .modal-footer {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Alerts */
.alert {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.alert-success {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.alert-danger {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.alert-warning {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

.alert-info {
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
}

/* Badges and Labels */
.badge, .label {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

.badge-primary, .label-primary {
    background-color: #336699 !important;
}

.badge-success, .label-success {
    background-color: #28a745 !important;
}

.badge-danger, .label-danger {
    background-color: #dc3545 !important;
}

.badge-warning, .label-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

.badge-info, .label-info {
    background-color: #17a2b8 !important;
}

/* Progress Bars */
.progress {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.progress-bar {
    background-color: #336699 !important;
}

/* List Groups */
.list-group, .list-group-item {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.list-group-item:hover {
    background-color: var(--dark-bg-secondary) !important;
}

.list-group-item.active {
    background-color: #336699 !important;
    border-color: #336699 !important;
}

/* Breadcrumbs */
.breadcrumb, .breadcrumb-item {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.breadcrumb-item a {
    color: var(--dark-text-secondary) !important;
}

/* Pagination */
.pagination .page-link {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.pagination .page-link:hover {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.pagination .page-item.active .page-link {
    background-color: #336699 !important;
    border-color: #336699 !important;
}

/* Tooltips and Popovers */
.tooltip, .popover {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.tooltip-inner, .popover-body, .popover-header {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Input Groups */
.input-group-text, .input-group-prepend, .input-group-append {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Specific WHMCS Elements */
.header, .topbar, .navbar {
    background-color: var(--dark-bg-primary) !important;
}

.sidebar, .sidebar .card {
    background-color: var(--dark-bg-primary) !important;
}

.client-home-cards .card {
    background-color: var(--dark-bg-primary) !important;
    border-color: var(--dark-border) !important;
}

/* DataTables */
.dataTables_wrapper, .dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.dataTables_filter input {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dataTables_filter label {
    color: var(--dark-text-primary) !important;
}

/* Email field specific fixes */
input[type="email"], #inputEmail {
    padding-left: 45px !important;
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

input[type="password"], #inputNewPassword1, #inputNewPassword2 {
    padding-left: 45px !important;
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Form field icons */
.field-icon, .form-group.prepend-icon .field-icon {
    background-color: transparent !important;
    color: var(--dark-text-muted) !important;
    border-color: var(--dark-border) !important;
}

/* Autofill styling */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--dark-bg-primary) inset !important;
    -webkit-text-fill-color: var(--dark-text-primary) !important;
}

/* Markdown Editor */
.md-editor {
    background-color: var(--dark-bg-primary) !important;
    border-color: var(--dark-border) !important;
}

.md-editor .md-header, .md-editor .md-footer, .md-editor .btn-toolbar {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.md-editor > .md-header .btn {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border) !important;
}

.md-editor > .md-header .btn:hover, .md-editor > .md-header .btn:focus {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

.md-editor > textarea.markdown-editor, .md-editor > .md-preview {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Override any white backgrounds */
[style*="background:#fff"], [style*="background: #fff"], 
[style*="background:#ffffff"], [style*="background: #ffffff"], 
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background-color:#ffffff"], [style*="background-color: #ffffff"],
[style*="background-color:white"], [style*="background: white"],
[style*="background:white"] {
    background: var(--dark-bg-primary) !important;
    background-color: var(--dark-bg-primary) !important;
}

/* Override any black text */
[style*="color:#000"], [style*="color: #000"], 
[style*="color:#000000"], [style*="color: #000000"] {
    color: var(--dark-text-primary) !important;
}

/* Specific WHMCS table elements */
#tableServicesList, #tableDomainsList, #tableInvoicesList, #tableTicketsList {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Product status labels */
.product-status, .label-success, .label-active, .label-pending, .label-suspended, .label-terminated {
    color: var(--dark-text-primary) !important;
}

/* Invoice and billing elements */
.invoice-summary-table, .invoice-summary-table td {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Credit card form */
div.credit-card {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Promo banners */
.promo-banner, .promo-container {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Store elements */
.store-order-container {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Ticket system */
.view-ticket .card-body, .ticket-reply {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Knowledge base */
.kb-category, .kb-article-item {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Domain checker */
.domain-pricing, .featured-tlds-container, .featured-tld {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Announcements */
.announcements .announcement {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Footer */
footer, .footer {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Verification banners */
.verification-banner {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Social login buttons */
.social-signin-btns .btn, .btn-social {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Two-factor authentication */
.twofa-setup, .twofa-module {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* User notifications popover */
.popover-user-notifications {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.popover-user-notifications .popover-body {
    background-color: var(--dark-bg-primary) !important;
}

.popover-user-notifications ul li a {
    color: var(--dark-text-primary) !important;
}

.popover-user-notifications ul li a:hover {
    background-color: var(--dark-bg-secondary) !important;
}

/* Carousel */
.carousel, .carousel-item {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Tiles */
.tiles .tile {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Affiliate stats */
.affiliate-stat {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Registration form */
#registration {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

#registration .field, #registration .form-control {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Upgrade pages */
.upgrade .products .product {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* MarketConnect promos */
.mc-promo-manage, .mc-promo-login {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* SSL configuration */
.ssl-inactive {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Hide any dark mode toggle elements */
.dark-mode-container, .dark-mode-toggle, #dark-mode-toggle,
[id*="dark-mode-toggle"], [class*="dark-mode-toggle"],
.theme-toggle, #theme-toggle, [id*="theme-toggle"], [class*="theme-toggle"] {
    display: none !important;
}

/* Ensure all text is visible */
.text-muted {
    color: var(--dark-text-muted) !important;
}

.text-primary {
    color: #336699 !important;
}

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

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-info {
    color: #17a2b8 !important;
}

/* Custom search icon for DataTables */
.dataTables_filter input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23888888' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    background-size: 14px 14px !important;
    padding-left: 30px !important;
}

/* Specific overrides for elements that should maintain their color */
.btn-primary, .btn-primary * {
    background-color: #336699 !important;
    color: var(--dark-text-primary) !important;
}

.btn-success, .btn-success * {
    background-color: #28a745 !important;
    color: var(--dark-text-primary) !important;
}

.btn-danger, .btn-danger * {
    background-color: #dc3545 !important;
    color: var(--dark-text-primary) !important;
}

.btn-warning, .btn-warning * {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

.btn-info, .btn-info * {
    background-color: #17a2b8 !important;
    color: var(--dark-text-primary) !important;
}

/* Override button icon backgrounds */
.btn-primary i, .btn-primary .fa, .btn-primary .fas, .btn-primary .far, .btn-primary [class*="fa-"],
.btn-success i, .btn-success .fa, .btn-success .fas, .btn-success .far, .btn-success [class*="fa-"],
.btn-danger i, .btn-danger .fa, .btn-danger .fas, .btn-danger .far, .btn-danger [class*="fa-"],
.btn-warning i, .btn-warning .fa, .btn-warning .fas, .btn-warning .far, .btn-warning [class*="fa-"],
.btn-info i, .btn-info .fa, .btn-info .fas, .btn-info .far, .btn-info [class*="fa-"] {
    background-color: transparent !important;
}

.btn-primary:hover i, .btn-primary:hover .fa, .btn-primary:hover .fas, .btn-primary:hover .far, .btn-primary:hover [class*="fa-"],
.btn-success:hover i, .btn-success:hover .fa, .btn-success:hover .fas, .btn-success:hover .far, .btn-success:hover [class*="fa-"],
.btn-danger:hover i, .btn-danger:hover .fa, .btn-danger:hover .fas, .btn-danger:hover .far, .btn-danger:hover [class*="fa-"],
.btn-warning:hover i, .btn-warning:hover .fa, .btn-warning:hover .fas, .btn-warning:hover .far, .btn-warning:hover [class*="fa-"],
.btn-info:hover i, .btn-info:hover .fa, .btn-info:hover .fas, .btn-info:hover .far, .btn-info:hover [class*="fa-"] {
    background-color: transparent !important;
}

/* Ensure proper contrast for status indicators */
.label-success, .badge-success {
    background-color: #28a745 !important;
    color: var(--dark-text-primary) !important;
}

.label-danger, .badge-danger {
    background-color: #dc3545 !important;
    color: var(--dark-text-primary) !important;
}

.label-warning, .badge-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

.label-info, .badge-info {
    background-color: #17a2b8 !important;
    color: var(--dark-text-primary) !important;
}

/* Final catch-all for any remaining light elements */
.bg-white, .bg-light {
    background-color: var(--dark-bg-primary) !important;
}

.text-dark, .text-black {
    color: var(--dark-text-primary) !important;
}

/* Additional fixes for common WHMCS elements */
.container, .container-fluid {
    background-color: var(--dark-bg-primary) !important;
}

.row, .col, [class*="col-"] {
    background-color: var(--dark-bg-primary) !important;
}

/* Fix for select dropdowns */
select option {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Fix for checkbox and radio buttons */
.form-check-input, .form-check-label {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* ULTRA SPECIFIC checkbox styling for black2 theme */
body input[type="checkbox"], 
body input[type="radio"],
body .form-check-input,
body .custom-control-input,
html input[type="checkbox"], 
html input[type="radio"],
html .form-check-input,
html .custom-control-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border: 2px solid #ffffff !important;
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    border-radius: 3px !important;
    position: relative !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    vertical-align: top !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

body input[type="radio"],
body .custom-control-input[type="radio"],
html input[type="radio"],
html .custom-control-input[type="radio"] {
    border-radius: 50% !important;
}

/* UNCHECKED state - black background with white border */
body input[type="checkbox"]:not(:checked),
body .form-check-input:not(:checked),
body .custom-control-input:not(:checked),
html input[type="checkbox"]:not(:checked),
html .form-check-input:not(:checked),
html .custom-control-input:not(:checked) {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #ffffff !important;
}

body input[type="checkbox"]:not(:checked)::before,
body .form-check-input:not(:checked)::before,
body .custom-control-input:not(:checked)::before,
html input[type="checkbox"]:not(:checked)::before,
html .form-check-input:not(:checked)::before,
html .custom-control-input:not(:checked)::before {
    content: "" !important;
    display: none !important;
}

/* CHECKED state - white background with black checkmark */
body input[type="checkbox"]:checked,
body .form-check-input:checked,
body .custom-control-input:checked,
html input[type="checkbox"]:checked,
html .form-check-input:checked,
html .custom-control-input:checked {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

body input[type="checkbox"]:checked::after,
body .form-check-input:checked::after,
body .custom-control-input:checked::after,
html input[type="checkbox"]:checked::after,
html .form-check-input:checked::after,
html .custom-control-input:checked::after {
    content: "" !important;
    display: none !important;
}

/* Hover states - maintain proper appearance */
body input[type="checkbox"]:not(:checked):hover,
body .form-check-input:not(:checked):hover,
body .custom-control-input:not(:checked):hover,
html input[type="checkbox"]:not(:checked):hover,
html .form-check-input:not(:checked):hover,
html .custom-control-input:not(:checked):hover {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #ffffff !important;
}

body input[type="checkbox"]:checked:hover,
body .form-check-input:checked:hover,
body .custom-control-input:checked:hover,
html input[type="checkbox"]:checked:hover,
html .form-check-input:checked:hover,
html .custom-control-input:checked:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

body input[type="checkbox"]:checked:hover::after,
body .form-check-input:checked:hover::after,
body .custom-control-input:checked:hover::after,
html input[type="checkbox"]:checked:hover::after,
html .form-check-input:checked:hover::after,
html .custom-control-input:checked:hover::after {
    content: "" !important;
    display: none !important;
}

body input[type="radio"]:not(:checked)::before,
body .custom-control-input[type="radio"]:not(:checked)::before,
html input[type="radio"]:not(:checked)::before,
html .custom-control-input[type="radio"]:not(:checked)::before {
    content: "" !important;
    display: none !important;
}

body input[type="radio"]:checked,
body .custom-control-input[type="radio"]:checked,
html input[type="radio"]:checked,
html .custom-control-input[type="radio"]:checked {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

body input[type="radio"]:checked::after,
body .custom-control-input[type="radio"]:checked::after,
html input[type="radio"]:checked::after,
html .custom-control-input[type="radio"]:checked::after {
    content: "●" !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    color: #000000 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    display: block !important;
    z-index: 10 !important;
    pointer-events: none !important;
    font-family: Arial, sans-serif !important;
}

/* Radio button hover states */
body input[type="radio"]:not(:checked):hover,
body .custom-control-input[type="radio"]:not(:checked):hover,
html input[type="radio"]:not(:checked):hover,
html .custom-control-input[type="radio"]:not(:checked):hover {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #ffffff !important;
}

body input[type="radio"]:checked:hover,
body .custom-control-input[type="radio"]:checked:hover,
html input[type="radio"]:checked:hover,
html .custom-control-input[type="radio"]:checked:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

body input[type="radio"]:checked:hover::after,
body .custom-control-input[type="radio"]:checked:hover::after,
html input[type="radio"]:checked:hover::after,
html .custom-control-input[type="radio"]:checked:hover::after {
    content: "●" !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    color: #000000 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    display: block !important;
    z-index: 10 !important;
    pointer-events: none !important;
    font-family: Arial, sans-serif !important;
}

body input[type="checkbox"]:focus,
body input[type="radio"]:focus,
body .form-check-input:focus,
body .custom-control-input:focus,
html input[type="checkbox"]:focus,
html input[type="radio"]:focus,
html .form-check-input:focus,
html .custom-control-input:focus {
    outline: none !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* OVERRIDE any background colors being set elsewhere */
body input[type="checkbox"],
body input[type="radio"],
body .form-check-input,
body .custom-control-input,
html input[type="checkbox"],
html input[type="radio"],
html .form-check-input,
html .custom-control-input {
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
    background-repeat: initial !important;
    background-attachment: initial !important;
    background-origin: initial !important;
    background-clip: initial !important;
}

/* Labels */
body .form-check-label,
body .custom-control-label,
html .form-check-label,
html .custom-control-label {
    color: #ffffff !important;
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
    margin-top: 1px !important;
}

/* Containers */
body .form-check,
body .custom-control,
html .form-check,
html .custom-control {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 0.75rem !important;
}

body .form-check-input,
body .custom-control-input,
html .form-check-input,
html .custom-control-input {
    margin-top: 0.1rem !important;
}

/* Fix for any remaining white sections */
section, main, article, aside {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Fix for WHMCS specific classes */
.primary-content, .sidebar-content {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Fix for any remaining Bootstrap components */
.jumbotron, .well {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Additional aggressive fixes for white blocks */
.master-breadcrumb, .breadcrumb {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Force all divs to be dark except those containing icons */
div {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Force all spans to be dark except those containing icons */
span {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Force all sections to be dark */
section {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Override any remaining white/light backgrounds */
.bg-white, .bg-light, .bg-secondary, .bg-info, .bg-warning {
    background-color: var(--dark-bg-primary) !important;
}

/* Force dark on any element with white background except icons */
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: white"],
[style*="background:white"],
[class*="white"],
[class*="light"] {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Final icon override - most specific */
i, .fa, .fas, .far, .fal, .fad, .fab, [class*="fa-"], [class*="icon"],
*:hover i, *:hover .fa, *:hover .fas, *:hover .far, *:hover .fal, *:hover .fad, *:hover .fab, *:hover [class*="fa-"], *:hover [class*="icon"] {
    background-color: transparent !important;
}

/* ===== ADDITIONAL BLACK2 DARK MODE ENHANCEMENTS ===== */

/* Enhanced dark theme for specific elements */
.navbar-brand img, .header .brand img, .footer img {
    filter: brightness(0.9) contrast(1.2) !important;
}

/* Code and pre elements */
code, pre, kbd, samp {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* Blockquotes */
blockquote {
    background-color: var(--dark-bg-secondary) !important;
    border-left: 4px solid var(--dark-border-light) !important;
    color: var(--dark-text-secondary) !important;
}

/* Enhanced table styling */
.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--dark-bg-secondary) !important;
}

.table-hover tbody tr:hover {
    background-color: #000000 !important;
}

/* Scrollbars for webkit browsers */
::-webkit-scrollbar {
    width: 12px;
    background-color: var(--dark-bg-primary) !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--dark-accent) !important;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-border-light) !important;
}

::-webkit-scrollbar-corner {
    background-color: var(--dark-bg-primary) !important;
}

/* Enhanced selection */
::selection {
    background-color: var(--primary) !important;
    color: var(--dark-bg-primary) !important;
}

::-moz-selection {
    background-color: var(--primary) !important;
    color: var(--dark-bg-primary) !important;
}

/* No shadows for black theme */
.shadow-sm {
    box-shadow: none !important;
}

.shadow {
    box-shadow: none !important;
}

.shadow-lg {
    box-shadow: none !important;
}

/* DataTables dark mode enhancements */
.dataTables_wrapper {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.dataTables_info, .dataTables_paginate, .dataTables_length {
    color: var(--dark-text-secondary) !important;
}

/* Fix for any iframe elements */
iframe {
    border: 1px solid var(--dark-border) !important;
}

/* Enhanced focus styles */
*:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Fix for print styles in dark mode */
@media print {
    * {
        background-color: white !important;
        color: black !important;
    }
}

/* Enhanced dark mode for specific WHMCS components */
.client-home-cards .card-body {
    background-color: var(--dark-bg-primary) !important;
}

.upgrade .products .product {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.mc-promo-manage, .mc-promo-login {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Domain pricing and featured TLD styling */
.domain-pricing, .featured-tlds-container, .featured-tld {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Ticket and knowledge base styling */
.view-ticket .card-body, .ticket-reply {
    background-color: var(--dark-bg-primary) !important;
}

.kb-category, .kb-article-item {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Enhanced tile styling */
.tiles .tile {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.tiles .tile:hover {
    background-color: #000000 !important;
}

/* Affiliate stats styling */
.affiliate-stat {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Registration form enhancements */
#registration {
    background-color: var(--dark-bg-primary) !important;
}

#registration .field, #registration .form-control {
    background-color: var(--dark-bg-primary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Credit card form styling */
div.credit-card {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Promo banner and container styling */
.promo-banner, .promo-container {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Store order container */
.store-order-container {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Announcements styling */
.announcements .announcement {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Footer enhancements */
footer, .footer {
    background-color: var(--dark-bg-primary) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* Verification banner */
.verification-banner {
    background-color: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Social sign-in buttons */
.social-signin-btns .btn, .btn-social {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Two-factor authentication styling */
.twofa-setup, .twofa-module {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

/* User notification popover */
.popover-user-notifications {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border) !important;
}

.popover-user-notifications .popover-body {
    background-color: var(--dark-bg-secondary) !important;
}

.popover-user-notifications ul li a {
    color: var(--dark-text-primary) !important;
}

.popover-user-notifications ul li a:hover {
    background-color: #000000 !important;
}

/* Carousel styling */
.carousel, .carousel-item {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* SSL inactive status */
.ssl-inactive {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-muted) !important;
}

/* Final comprehensive overrides for any remaining elements */
.container-fluid, .row, .col-12, .col-md-8, .col-md-4, .col-lg-9, .col-lg-3,
.main-content, .sidebar, .content-wrapper, .page-wrapper {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Override any Bootstrap utility classes that force light colors */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--dark-bg-secondary) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
    color: var(--dark-bg-primary) !important;
}

.bg-info {
    background-color: var(--info) !important;
}

.bg-light {
    background-color: var(--dark-bg-secondary) !important;
}

.bg-dark {
    background-color: var(--dark-bg-primary) !important;
}

/* Text color utilities */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--dark-text-secondary) !important;
}

.text-light {
    color: var(--dark-text-secondary) !important;
}

.text-dark {
    color: var(--dark-text-primary) !important;
}

/* Ensure tables are properly styled */
.table-dark {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

.table-dark th,
.table-dark td {
    border-color: var(--dark-border) !important;
}

/* Final override for any elements that might still have light backgrounds */
[class*="bg-white"], [class*="bg-light"], [style*="background-color: #fff"], [style*="background-color: white"] {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* ULTIMATE OVERRIDES - Force everything to be black with white text */
*, *::before, *::after {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Preserve transparent backgrounds only for icons and images */
i, .fa, .fas, .far, .fal, .fad, .fab, [class*="fa-"], [class*="icon"],
img, svg, canvas, video, iframe,
.field-icon, .input-group-text i,
.btn i, .btn .fa, .btn .fas, .btn .far, .btn [class*="fa-"],
a i, a .fa, a .fas, a .far, a [class*="fa-"] {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Force specific common elements */
.container, .container-fluid, .row, [class*="col-"],
.card, .card-body, .card-header, .card-footer,
.table, .table th, .table td,
.form-control, .form-group, .field,
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info,
.navbar, .nav, .dropdown-menu, .modal, .modal-content,
.alert, .badge, .breadcrumb, .pagination,
.sidebar, .footer, .header, .content,
main, section, article, aside, div, span, p, h1, h2, h3, h4, h5, h6 {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Override any remaining Bootstrap color classes */
.text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-muted {
    color: #ffffff !important;
}

.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-white {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Force override any inline styles */
[style*="background"], [style*="color"], [style*="Background"], [style*="Color"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Remove all borders */
*, *::before, *::after {
    border: none !important;
}

/* Remove all outlines and force black on all states */
*:focus, *:active, *:hover, *:visited {
    outline: none !important;
    box-shadow: none !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Force all hover states to stay black */
*:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Force all active states to stay black */
*:active {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Force all focus states to stay black */
*:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove webkit appearance and outlines */
input, textarea, select, button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

input:focus, textarea:focus, select:focus, button:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* FINAL NUCLEAR OPTION - Override everything that might cause gray hover or outlines */
body *, html *, * {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body *:hover, html *:hover, *:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

body *:focus, html *:focus, *:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

body *:active, html *:active, *:active {
    background-color: #000000 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure icons stay transparent */
body i, html i, i,
body .fa, html .fa, .fa,
body .fas, html .fas, .fas,
body .far, html .far, .far,
body [class*="fa-"], html [class*="fa-"], [class*="fa-"],
body [class*="icon"], html [class*="icon"], [class*="icon"] {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Remove all possible outlines */
* {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

*:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

/* Contact page specific - subtle styling with more selectors */
body.contact input[type="checkbox"],
body.contact .form-check-input,
body.contact .custom-control-input,
html.contact input[type="checkbox"],
html.contact .form-check-input,
html.contact .custom-control-input,
body[class*="contact"] input[type="checkbox"],
body[class*="contact"] .form-check-input,
body[class*="contact"] .custom-control-input,
div[class*="contact"] input[type="checkbox"],
div[class*="contact"] .form-check-input,
div[class*="contact"] .custom-control-input,
form input[type="checkbox"],
form .form-check-input,
form .custom-control-input,
.form-group input[type="checkbox"],
.form-group .form-check-input,
.form-group .custom-control-input {
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

body.contact input[type="checkbox"]:checked,
body.contact .form-check-input:checked,
body.contact .custom-control-input:checked,
html.contact input[type="checkbox"]:checked,
html.contact .form-check-input:checked,
html.contact .custom-control-input:checked,
body[class*="contact"] input[type="checkbox"]:checked,
body[class*="contact"] .form-check-input:checked,
body[class*="contact"] .custom-control-input:checked,
div[class*="contact"] input[type="checkbox"]:checked,
div[class*="contact"] .form-check-input:checked,
div[class*="contact"] .custom-control-input:checked,
form input[type="checkbox"]:checked,
form .form-check-input:checked,
form .custom-control-input:checked,
.form-group input[type="checkbox"]:checked,
.form-group .form-check-input:checked,
.form-group .custom-control-input:checked {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Contact page hover states */
body.contact input[type="checkbox"]:not(:checked):hover,
form input[type="checkbox"]:not(:checked):hover,
.form-group input[type="checkbox"]:not(:checked):hover {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

body.contact input[type="checkbox"]:checked:hover,
form input[type="checkbox"]:checked:hover,
.form-group input[type="checkbox"]:checked:hover {
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}