/*
 * DARK THEME OVERRIDES (Based on WHMCS Twenty-One Theme/Bootstrap 4)
 * Focus: Inverting background/text colors, adjusting borders, and ensuring contrast.
 */

/* --- 1. Global Variables & Base Colors --- */
:root {
  /* Redefine primary colors for dark contrast (mostly lighter hues) */
  --blue: #5b92e5 !important;
  --gray: #a0a0a0 !important;
  --gray-dark: #f8f9fa !important;
  --primary: #5b92e5 !important; /* Lighter primary blue */
  --secondary: #9aa3ab !important; /* Lighter secondary gray */
  --success: #4caf50 !important; /* Adjusted success green */
  --info: #4dd0e1 !important; /* Adjusted info cyan */
  --warning: #ffb300 !important; /* Adjusted warning yellow */
  --danger: #ef5350 !important; /* Adjusted danger red */
  --light: #333333 !important; /* Used for darker surfaces (formerly light) */
  --dark: #f8f9fa !important; /* Used for light text/surfaces (formerly dark) */
  --white: #1e1e1e !important; /* Redefine white to a dark background surface */
}

body {
  color: #e0e0e0 !important; /* Primary text color */
  background-color: #121212 !important; /* Main body background (very dark) */
}

/* Ensure headings and strong text are bright */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #f8f8f8 !important;
}

hr {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Anchor tags */
a {
  color: var(--primary) !important;
  text-decoration: none !important;
}
.badge {
  padding: 5px 2px;
  width: 28px;
  text-align: center;
  background-color: #1e1e1e !important;
  color: white !important;
}
div.product-details-tab-container {
  margin: 0;
  padding: 20px;
  border: 1px solid #121212 !important;
  border-top: 0;
  background-color: #121212 !important;
}

div.product-details div.product-icon {
    margin: 0;
    background-color: #121212 !important;
    color:white !important;
    border-radius: 10px;
    padding: 30px;
    line-height: 1em;
    font-size: 60px
}

.tiles .tile {
  display: block;
  color: white !important;
  position: relative;
  padding: 12px 20px;
  background-color: #000000 !important;
  border-right: 1px solid #ccc;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-default {
  color: white !important;
  background-color: black !important;
  border-color: black !important;
}

a:hover {
  color: #9bbcf4 !important; /* Lighter hover for visibility */
}

/* Code and Pre blocks */
code {
  color: #ff80ab !important;
  background-color: #2d2d2d !important;
  padding: 0.1em 0.3em !important; /* Adding padding here for aesthetic */
  border-radius: 0.2em !important; /* Adding radius here for aesthetic */
}
kbd {
  color: #121212 !important;
  background-color: #e0e0e0 !important;
}
pre {
  color: #e0e0e0 !important;
  background-color: #2d2d2d !important;
  border: 1px solid #444 !important;
}

/* --- 2. Forms and Inputs --- */
.form-control {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
  border: 1px solid #444444 !important;
}
.form-control:focus {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(91, 146, 229, 0.25) !important;
}


.form-control:disabled, .form-control[readonly] {
  background-color: #2d2d2d !important;
}



.input-group-text {
  color: #e0e0e0 !important;
  background-color: #2d2d2d !important;
  border: 1px solid #444444 !important;
}

/* Custom Controls (Checkboxes/Radios/Switches) */
.custom-control-label::before {
  background-color: #1e1e1e !important;
  border: #555555 solid 1px !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #121212 !important;
  border-color: var(--primary) !important;
  background-color: var(--primary) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #f8f8f8 !important;
}

/* File Upload Label */
.custom-file-label {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
  border: 1px solid #444444 !important;
}
.custom-file-label::after {
  color: #e0e0e0 !important;
  background-color: #2d2d2d !important;
}

/* Form Validations - Need to ensure SVG colors contrast with dark background */
.valid-feedback {
  color: var(--success) !important;
}
.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--success) !important;
  /* Re-inject SVG for valid icon with success fill */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%234caf50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}
.invalid-feedback {
  color: var(--danger) !important;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--danger) !important;
  /* Re-inject SVG for invalid icon with danger fill */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ef5350' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef5350' stroke='none'/%3e%3c/svg%3e") !important;
}

/* --- 3. Containers (Cards, Tables, Alerts) --- */
.card, .mc-promo-manage, .mc-promo-login {
  background-color: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.card-header {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.card-footer {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Tables - General styles */
.table {
  color: #e0e0e0 !important;
}
.table th,
.table td {
  border-top: 1px solid #333333 !important;
}






.btn-success {
  color: black !important;
  background-color: white !important;
  border-color: pink !important;
}
.btn-success:hover {
  color: black !important;
  background-color: white !important;
  border-color: white !important;
}






.table thead th {
  border-bottom: 2px solid #333333 !important;
}
.table-bordered {
  border: 1px solid #333333 !important;
}
.table-bordered th,
.table-bordered td {
  border: 1px solid #333333 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
.table-hover tbody tr:hover {
  color: #f8f8f8 !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
}
.table .thead-dark th {
  color: #121212 !important; /* Dark text on light background for dark header */
  background-color: #e0e0e0 !important;
  border-color: #333333 !important;
}
.table-list > tbody > tr > td {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}
.table-list > tbody > tr:hover > td {
  background-color: #2d2d2d !important;
}

/* Alerts - Inverted color scheme */
.alert-primary {
  color: #cfe2ff !important;
  background-color: #233e5c !important;
  border-color: #3b6088 !important;
}
.alert-secondary {
  color: #e2e3e5 !important;
  background-color: #3c4349 !important;
  border-color: #555b61 !important;
}
.alert-success {
  color: #d1e7dd !important;
  background-color: #1e3d29 !important;
  border-color: #375b48 !important;
}
.alert-info {
  color: #cff4fc !important;
  background-color: #1f5763 !important;
  border-color: #397a86 !important;
}
.alert-warning {
  color: #fff3cd !important;
  background-color: #5c4415 !important;
  border-color: #8c6d37 !important;
}
.alert-danger {
  color: #f8d7da !important;
  background-color: #5c272a !important;
  border-color: #844c4f !important;
}
.alert-light {
  color: #e0e0e0 !important;
  background-color: #2d2d2d !important;
  border-color: #444444 !important;
}
.alert-dark {
  color: #121212 !important;
  background-color: #e0e0e0 !important;
  border-color: #f8f9fa !important;
}

/* Navigation & Utility */
.jumbotron {
  background-color: #2d2d2d !important;
  color: #f8f8f8 !important;
}
.list-group-item {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  color: #e0e0e0 !important;
  background-color: #2d2d2d !important;
}
.breadcrumb {
  background-color: #2d2d2d !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #a0a0a0 !important;
}

/* --- 4. Modals and Popups --- */
#popup-backdrop {
  background-color: rgba(18, 18, 18, 0.95) !important;
}
.modal-content {
  background-color: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.modal-header {
  border-bottom: 1px solid #333333 !important;
  color: #f8f8f8 !important;
}
.modal-header .close {
  color: #f8f8f8 !important; /* Ensure close button is visible */
  text-shadow: none !important;
}
.modal-title {
  color: #f8f8f8 !important;
}
.modal-footer {
  border-top: 1px solid #333333 !important;
}
.popover {
  background-color: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.popover .arrow::before, .popover .arrow::after {
  border-color: transparent !important; /* Reset border color */
}
.popover-header {
  background-color: #2d2d2d !important;
  border-bottom: 1px solid #333333 !important;
  color: #f8f8f8 !important;
}
.popover-body {
  color: #e0e0e0 !important;
}
.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^=top] > .arrow::before {
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^=top] > .arrow::after {
  border-top-color: #1e1e1e !important;
}
.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^=bottom] > .arrow::before {
  border-bottom-color: rgba(255, 255, 255, 0.25) !important;
}
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^=bottom] > .arrow::after {
  border-bottom-color: #1e1e1e !important;
}

/* --- 4.5. Dropdown Menus --- */
.dropdown-menu {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.dropdown-item {
  color: #e0e0e0 !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #f8f8f8 !important;
  background-color: #2d2d2d !important;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff !important;
  background-color: var(--primary) !important;
}
.dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.dropdown-header {
  color: #a0a0a0 !important;
}

/* --- 5. Component Specific (WHMCS/Bootstrap overrides) --- */
header.header {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #333333 !important;
}
header.header .topbar {
  background-color: #121212 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
header.header .topbar .btn {
  color: rgba(255, 255, 255, 0.8) !important;
}
header.header .topbar .active-client .input-group-text {
  color: rgba(255, 255, 255, 0.8) !important;
}
header.header .search {
  border: 1px solid #333333 !important;
  background-color: #1e1e1e !important;
}
header.header .search .form-control {
  background-color: #1e1e1e !important;
}
header.header .search .btn {
  color: #a0a0a0 !important;
}
header.header .navbar a {
  color: #f8f8f8 !important;
}
.master-breadcrumb {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #333333 !important;
}
.master-breadcrumb .breadcrumb {
  background-color: transparent !important;
}

/* Footer */
footer.footer {
  background-color: #121212 !important;
  color: #a0a0a0 !important;
}
footer.footer .nav-link {
  color: #a0a0a0 !important;
}

/* Table overrides for specific WHMCS lists */
.invoice-summary-table td.total-row,
tr.masspay-total td {
  background-color: #2d2d2d !important;
}

/* Two-Factor Setup */
.twofa-setup .backup-code {
  background-color: #2d2d2d !important;
  color: #f8f8f8 !important;
}
.twofa-module {
  border: 1px solid #444 !important;
}
.twofa-module.active {
  border-color: #5b92e5 !important;
}
@media (max-width: 767.98px) {
   .responsive-tabs-sm .nav-item:last-child a {
    border-radius: 0 0 4px 0 !important;
    background-color: #121212 !important;
  }
}
/* Verification Banner */
.verification-banner {
  background-color: #2d2d2d !important;
  border-bottom: 1px solid #444444 !important;
  color: #f8f8f8 !important;
}


.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  display: none !important;
}

.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
  color: #a0a0a0 !important;
}

/* Markdown Editor/Content */
.md-editor {
  border: 1px solid #444 !important;
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
  border-top: 1px solid #444 !important;
  border-bottom: 1px solid #444 !important;
  background-color: #1e1e1e !important;
}
.md-preview h1, .markdown-content h1,
.md-preview h2, .markdown-content h2,
.md-preview h3, .markdown-content h3,
.md-preview h4, .markdown-content h4 {
  color: #f8f8f8 !important;
}
.md-preview blockquote, .markdown-content blockquote {
  border-left: 5px solid #444444 !important;
}

/* TLD/Promo/Client Home elements */
.action-icon-btns a {
  background-color: #1e1e1e !important;
  border: 1px solid #333333 !important;
  color: #e0e0e0 !important;
}
.action-icon-btns a:hover {
  color: #f8f8f8 !important;
  background-color: #2d2d2d !important;
}
.client-home-cards .card-header {
  background-color: #1e1e1e !important;
}
.client-home-cards .list-group {
  border-top: 1px solid #333333 !important;
  border-bottom: 1px solid #333333 !important;
}
.client-home-cards .list-group .list-group-item {
  border-bottom: 1px solid #333333 !important;
}
.featured-tld {
  background-color: #1e1e1e !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}
.featured-tld .price {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}
.domain-pricing .tld-row {
  border-bottom: 1px solid #333333 !important;
}
.domain-pricing .tld-row.highlighted {
  background: #2d2d2d !important;
}
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4 {
  border-bottom: 6px solid #3b6088 !important; /* Primary dark border */
  background-color: #2d2d2d !important;
}
.domain-pricing .tld-pricing-header div:nth-child(odd) {
  border-color: #3b6088 !important;
  background-color: #2d2d2d !important;
}

/* Product Card/Box override for primary content area */
.primary-content .card, .primary-content .mc-promo-manage, .primary-content .mc-promo-login {
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Datatables Search Input - Important for contrast, requires custom SVG */
.dataTables_wrapper .dataTables_filter label .form-control {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e0e0e0' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.447.545.894.887 1.25.99l3.5 3.5a1 1 0 0 0 1.414-1.414l-3.5-3.5a1 1 0 0 0-.99-1.25zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") #1e1e1e no-repeat 8px 5px !important;
  color: #e0e0e0 !important;
}
.dataTables_wrapper table.table-list thead th {
  background-color: #1e1e1e !important;
  color: #f8f8f8 !important;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: #2d2d2d !important;
}
.pagination > li > a,
.pagination > li > span {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
  border: 1px solid #333333 !important;
}
.page-link:hover {
  color: #f8f8f8 !important;
  background-color: #2d2d2d !important;
  border-color: #444444 !important;
}
.page-item.active .page-link {
  background-color: #5b92e5 !important;
  border-color: #5b92e5 !important;
}
.page-item.disabled .page-link {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
  color: #6c757d !important;
}

/* Remove text shadows, adjust shadows for better dark mode visibility */
.close {
  color: #f8f8f8 !important;
  text-shadow: none !important;
}
.toast {
  background-color: rgba(30, 30, 30, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35) !important;
}
.toast-header {
  color: #a0a0a0 !important;
  background-color: rgba(30, 30, 30, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.toast-body {
  color: #e0e0e0 !important;
}