/* ===================================
   PowerNode — WHMCS Theme
   Terminal / Control Room Design
   Child theme of Twenty-One
   =================================== */

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

/* ---- CSS Variables ---- */
:root {
    --brand: #e84d30;
    --brand-hover: #d4432a;
    --brand-glow: rgba(232, 77, 48, 0.25);
    --bg: #0a0a0f;
    --bg-alt: #0e0e14;
    --surface: #12121a;
    --surface-hover: #1a1a24;
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --white: #f0f0f5;
    --heading: #e2e2ea;
    --text: #9898a6;
    --text-dim: #5c5c6d;
    --green: #34d399;
    --amber: #fbbf24;
    --red: #ef4444;
    --radius: 10px;
    --radius-sm: 6px;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Inter', -apple-system, sans-serif;
}

/* ===========================
   NUCLEAR DARK OVERRIDES
   Force dark on EVERYTHING
   =========================== */

/* Kill ALL white/light backgrounds globally */
body,
html,
#main-body,
.main-content,
.container,
.container-fluid,
.row,
.col, [class*="col-"],
.wrapper,
.content,
.content-area,
.page-content,
section,
article,
aside,
main,
div,
header,
footer,
nav {
    background-color: transparent !important;
}

/* Specific containers that need the dark bg */
body {
    font-family: var(--sans) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force all panels/wells/cards/jumbotrons dark */
.panel,
.panel-default,
.panel-body,
.panel-heading,
.panel-footer,
.well,
.jumbotron,
.card,
.card-body,
.card-header,
.card-footer,
.thumbnail,
.list-group,
.list-group-item,
.media,
.page-header {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Bootstrap utility bg overrides */
.bg-white,
.bg-light,
.bg-default,
.bg-body,
.bg-transparent {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
}

/* Force dark on ALL form elements */
input,
textarea,
select,
.form-control,
.form-select,
.input-group,
.input-group-addon,
.input-group-text,
.custom-select,
.custom-file-input,
.custom-file-label,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"] {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--white) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--text-dim) !important;
}

/* Force dark on ALL tables */
table,
.table,
thead,
tbody,
tfoot,
tr,
th,
td,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table-hover > tbody > tr:hover,
.table-responsive {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.table > thead > tr > th {
    background: var(--bg-alt) !important;
    color: var(--text-dim) !important;
    font-family: var(--mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 600 !important;
}

/* Force dark on ALL dropdowns */
.dropdown-menu,
.dropdown-menu > li > a,
.dropdown-menu > li,
.dropdown-item,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu li,
.bootstrap-select .dropdown-menu li a {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu > .active > a,
.bootstrap-select .dropdown-menu li a:hover {
    background: var(--surface-hover) !important;
    background-color: var(--surface-hover) !important;
    color: var(--white) !important;
}

/* Force dark on ALL modals */
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Force dark on breadcrumb */
.breadcrumb {
    background: var(--bg-alt) !important;
    background-color: var(--bg-alt) !important;
}

.breadcrumb > li,
.breadcrumb > li > a,
.breadcrumb > .active {
    color: var(--text) !important;
}

/* Force dark on pagination */
.pagination > li > a,
.pagination > li > span,
.dataTables_paginate .paginate_button {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.dataTables_paginate .paginate_button.current {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--white) !important;
}

/* Force dark on nav tabs/pills */
.nav-tabs,
.nav-pills {
    border-bottom-color: var(--border) !important;
}

.nav-tabs > li > a,
.nav-pills > li > a {
    color: var(--text) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-pills > li.active > a {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--surface) !important;
    color: var(--white) !important;
}

.nav-tabs > li > a:hover,
.nav-pills > li > a:hover {
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--border) !important;
    color: var(--white) !important;
}

.tab-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    color: var(--text) !important;
    padding: 20px !important;
}

/* Force dark on popovers/tooltips */
.popover,
.popover-title,
.popover-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.tooltip-inner {
    background: var(--surface) !important;
    color: var(--white) !important;
}

/* DataTables TOTAL override */
.dataTables_wrapper,
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_processing,
.DTFC_LeftBodyLiner,
table.dataTable {
    background: transparent !important;
    color: var(--text) !important;
}

.dataTables_length select,
.dataTables_length input,
.dataTables_filter input {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--white) !important;
    border-radius: var(--radius-sm) !important;
}

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

table.dataTable tbody tr {
    background: var(--surface) !important;
}

table.dataTable tbody tr:hover {
    background: var(--surface-hover) !important;
}

/* Text color overrides */
.text-dark,
.text-black,
.text-body,
.text-muted {
    color: var(--text) !important;
}

/* ===========================
   Global Reset & Base
   =========================== */

a {
    color: var(--brand);
    transition: color 0.15s;
}

a:hover,
a:focus {
    color: var(--white);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--sans) !important;
    color: var(--heading) !important;
    font-weight: 700;
}

p {
    color: var(--text);
}

hr {
    border-color: var(--border);
}

::selection {
    background: var(--brand);
    color: var(--white);
}

/* Kill inline white backgrounds */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: rgb(255,255,255)"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color:#fff"],
[style*="background-color:#ffffff"],
[style*="background:#fff"],
[style*="background:#ffffff"] {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

/* ===========================
   Navbar
   =========================== */
.navbar,
.navbar-default {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    min-height: 60px;
}

.navbar-default .navbar-brand,
.navbar-brand {
    font-family: var(--sans) !important;
    font-weight: 800 !important;
    color: var(--white) !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-default .navbar-brand:hover {
    color: var(--white) !important;
}

.navbar-default .navbar-brand img {
    max-height: 32px;
}

.navbar-default .navbar-nav > li > a {
    font-family: var(--sans) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    padding: 20px 16px !important;
    transition: color 0.15s;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--white) !important;
    background: transparent !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover {
    color: var(--white) !important;
    background: transparent !important;
}

/* Navbar toggle (mobile burger) */
.navbar-default .navbar-toggle {
    border-color: var(--border) !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--text) !important;
}

.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: var(--white) !important;
}

.navbar-default .navbar-collapse {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

/* Dropdown menus */
.navbar-default .navbar-nav .open .dropdown-menu,
.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
    padding: 6px !important;
}

.dropdown-menu > li > a {
    color: var(--text) !important;
    font-size: 0.84rem !important;
    padding: 8px 14px !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.15s !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--white) !important;
    background: var(--surface-hover) !important;
}

.dropdown-menu .divider {
    background-color: var(--border) !important;
}

/* ===========================
   Header / Page Title
   =========================== */
.header-lined {
    border-bottom-color: var(--border) !important;
}

.main-content h1,
.main-content h2 {
    color: var(--heading) !important;
}

/* ===========================
   Buttons
   =========================== */
.btn {
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s !important;
    border: none !important;
    padding: 10px 22px !important;
    letter-spacing: -0.2px;
}

/* Primary */
.btn-primary,
.btn-success {
    background: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0 var(--brand-glow) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background: var(--brand-hover) !important;
    color: #fff !important;
    box-shadow: 0 0 20px 0 var(--brand-glow) !important;
    transform: translateY(-1px);
}

/* Default / Secondary */
.btn-default {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

.btn-default:hover,
.btn-default:focus {
    background: var(--surface-hover) !important;
    color: var(--white) !important;
    border-color: var(--border-hover) !important;
}

/* Info */
.btn-info {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.btn-info:hover,
.btn-info:focus {
    background: rgba(59, 130, 246, 0.25) !important;
    color: #93bbfd !important;
}

/* Warning */
.btn-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    color: var(--amber) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.btn-warning:hover {
    background: rgba(251, 191, 36, 0.25) !important;
}

/* Danger */
.btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--red) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25) !important;
}

/* Link buttons */
.btn-link {
    color: var(--brand) !important;
}

.btn-link:hover {
    color: var(--white) !important;
}

/* Button groups */
.btn-group .btn + .btn,
.btn-group .btn + .dropdown-toggle {
    border-left: 1px solid var(--border) !important;
}

/* ===========================
   Panels (terminal style)
   =========================== */
.panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

.panel-default > .panel-heading {
    background: var(--bg-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--heading) !important;
    font-family: var(--mono) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 12px 16px !important;
    position: relative;
}

/* Terminal dots on panel headers */
.panel-default > .panel-heading::before {
    content: '';
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    margin-right: 6px;
    box-shadow: 14px 0 0 var(--amber), 28px 0 0 var(--green);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.panel-default > .panel-heading .panel-title {
    display: inline;
    margin-left: 30px;
    font-family: var(--mono) !important;
    font-size: 0.78rem !important;
    color: var(--text-dim) !important;
}

.panel-body {
    background: var(--surface) !important;
    color: var(--text) !important;
    padding: 20px !important;
}

.panel-footer {
    background: var(--bg-alt) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* Panel variants */
.panel-primary {
    border-color: var(--brand) !important;
}

.panel-primary > .panel-heading {
    background: rgba(232, 77, 48, 0.1) !important;
    border-color: rgba(232, 77, 48, 0.2) !important;
    color: var(--brand) !important;
}

.panel-info > .panel-heading {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

.panel-warning > .panel-heading {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.15) !important;
    color: var(--amber) !important;
}

.panel-danger > .panel-heading {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--red) !important;
}

/* ===========================
   Cards (WHMCS 8+)
   =========================== */
.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

.card-header {
    background: var(--bg-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--heading) !important;
    font-family: var(--mono) !important;
    font-size: 0.82rem !important;
}

.card-body {
    color: var(--text) !important;
}

.card-footer {
    background: var(--bg-alt) !important;
    border-top: 1px solid var(--border) !important;
}

/* ===========================
   Tables
   =========================== */
.table {
    color: var(--text) !important;
}

.table > thead > tr > th {
    background: var(--bg-alt) !important;
    color: var(--text-dim) !important;
    font-family: var(--mono) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px !important;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--border) !important;
    padding: 14px 16px !important;
    color: var(--text) !important;
    font-size: 0.86rem !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover > td {
    background: var(--surface-hover) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: var(--bg-alt) !important;
}

.table-striped > tbody > tr:nth-of-type(odd):hover > td {
    background: var(--surface-hover) !important;
}

.table-bordered {
    border: 1px solid var(--border) !important;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid var(--border) !important;
}

/* ===========================
   Forms
   =========================== */
.form-control {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--white) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--sans) !important;
    font-size: 0.86rem !important;
    padding: 10px 14px !important;
    height: auto !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
    background: var(--bg) !important;
    color: var(--white) !important;
}

.form-control::placeholder {
    color: var(--text-dim) !important;
}

.form-group label,
label {
    color: var(--heading) !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    margin-bottom: 6px !important;
}

.form-control[disabled],
.form-control[readonly] {
    background: var(--surface) !important;
    color: var(--text-dim) !important;
    cursor: not-allowed;
}

/* Select */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239898a6' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
}

/* Input groups */
.input-group-addon {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-dim) !important;
    font-size: 0.84rem !important;
}

/* Checkbox & Radio custom */
.checkbox label,
.radio label {
    color: var(--text) !important;
}

/* ===========================
   Alerts
   =========================== */
.alert {
    border-radius: var(--radius-sm) !important;
    border: 1px solid !important;
    font-size: 0.86rem !important;
    padding: 14px 18px !important;
}

.alert-success {
    background: rgba(52, 211, 153, 0.08) !important;
    border-color: rgba(52, 211, 153, 0.2) !important;
    color: var(--green) !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
    color: var(--amber) !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: var(--red) !important;
}

/* ===========================
   Badges & Labels
   =========================== */
.badge,
.label {
    font-family: var(--mono) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
}

.label-default,
.badge-default {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

.label-primary,
.badge-primary {
    background: rgba(232, 77, 48, 0.15) !important;
    color: var(--brand) !important;
}

.label-success,
.badge-success {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--green) !important;
}

.label-info,
.badge-info {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

.label-warning,
.badge-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    color: var(--amber) !important;
}

.label-danger,
.badge-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--red) !important;
}

/* ===========================
   Sidebar
   =========================== */
.sidebar,
.list-group {
    background: transparent !important;
}

.list-group-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-size: 0.85rem !important;
    padding: 12px 16px !important;
    transition: all 0.15s !important;
}

.list-group-item:first-child {
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.list-group-item:last-child {
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

.list-group-item:hover {
    background: var(--surface-hover) !important;
    color: var(--white) !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: rgba(232, 77, 48, 0.1) !important;
    border-color: rgba(232, 77, 48, 0.2) !important;
    color: var(--brand) !important;
}

.list-group-item .badge {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

/* ===========================
   Breadcrumbs
   =========================== */
.breadcrumb {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
}

.breadcrumb > li {
    color: var(--text-dim) !important;
}

.breadcrumb > li + li::before {
    color: var(--text-dim) !important;
    content: "›" !important;
}

.breadcrumb > .active {
    color: var(--text) !important;
}

/* ===========================
   Pagination
   =========================== */
.pagination > li > a,
.pagination > li > span {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-family: var(--mono) !important;
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
    transition: all 0.15s !important;
}

.pagination > li > a:hover {
    background: var(--surface-hover) !important;
    color: var(--white) !important;
    border-color: var(--border-hover) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    background: var(--bg-alt) !important;
    border-color: var(--border) !important;
    color: var(--text-dim) !important;
}

/* ===========================
   Modals
   =========================== */
.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border) !important;
    padding: 16px 20px !important;
}

.modal-header .modal-title {
    font-family: var(--mono) !important;
    font-size: 0.9rem !important;
    color: var(--heading) !important;
}

.modal-header .close {
    color: var(--text-dim) !important;
    opacity: 1 !important;
    font-size: 1.2rem !important;
}

.modal-header .close:hover {
    color: var(--white) !important;
}

.modal-body {
    padding: 20px !important;
    color: var(--text) !important;
}

.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding: 14px 20px !important;
    background: var(--bg-alt) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

.modal-backdrop.in {
    opacity: 0.7 !important;
    background: #000 !important;
}

/* ===========================
   Tabs & Navs
   =========================== */
.nav-tabs {
    border-bottom: 1px solid var(--border) !important;
}

.nav-tabs > li > a {
    color: var(--text) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 0 !important;
    position: relative;
    transition: color 0.15s !important;
}

.nav-tabs > li > a:hover {
    color: var(--white) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--brand) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--brand) !important;
}

.tab-content {
    padding: 20px 0 !important;
}

/* Pills */
.nav-pills > li > a {
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.84rem !important;
    padding: 8px 16px !important;
}

.nav-pills > li > a:hover {
    background: var(--surface-hover) !important;
    color: var(--white) !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background: var(--brand) !important;
    color: #fff !important;
}

/* ===========================
   Well
   =========================== */
.well {
    background: var(--bg-alt) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}

/* ===========================
   Progress Bars
   =========================== */
.progress {
    background: var(--bg) !important;
    border-radius: 20px !important;
    height: 8px !important;
    overflow: hidden;
    box-shadow: none !important;
}

.progress-bar {
    background: var(--brand) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

.progress-bar-success {
    background: var(--green) !important;
}

.progress-bar-warning {
    background: var(--amber) !important;
}

.progress-bar-danger {
    background: var(--red) !important;
}

/* ===========================
   Tooltips & Popovers
   =========================== */
.tooltip-inner {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
}

.popover {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

.popover-title {
    background: var(--bg-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--heading) !important;
}

.popover-content {
    color: var(--text) !important;
}

/* ===========================
   WHMCS-specific: Services
   =========================== */
.service-status {
    font-family: var(--mono) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===========================
   WHMCS: Client Area Home
   =========================== */
.client-home-panels .panel {
    transition: border-color 0.2s !important;
}

.client-home-panels .panel:hover {
    border-color: var(--border-hover) !important;
}

/* Stats icons */
.client-home-panels .panel .icon {
    color: var(--brand) !important;
}

/* Quick actions */
.quick-nav-link {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    transition: all 0.2s !important;
    padding: 16px !important;
    text-align: center;
}

.quick-nav-link:hover {
    background: var(--surface-hover) !important;
    border-color: var(--border-hover) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
}

.quick-nav-link i,
.quick-nav-link .fas,
.quick-nav-link .far,
.quick-nav-link .fa {
    color: var(--brand) !important;
    font-size: 1.4rem !important;
    margin-bottom: 8px !important;
}

/* ===========================
   WHMCS: Domain Search
   =========================== */
.domain-checker-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 24px !important;
}

.domain-checker-container .form-control {
    font-family: var(--mono) !important;
    font-size: 0.9rem !important;
}

.domain-pricing-table th {
    background: var(--bg-alt) !important;
    color: var(--text-dim) !important;
    font-family: var(--mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.domain-pricing-table td {
    font-family: var(--mono) !important;
}

/* ===========================
   WHMCS: Shopping Cart
   =========================== */
.order-summary {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

.order-summary .total-due-today {
    border-top: 1px solid var(--border) !important;
    color: var(--heading) !important;
    font-family: var(--mono) !important;
    font-weight: 700 !important;
}

/* ===========================
   WHMCS: Invoice
   =========================== */
.invoice-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

/* ===========================
   WHMCS: Support Tickets
   =========================== */
.ticket-reply {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    margin-bottom: 16px !important;
    overflow: hidden;
}

.ticket-reply .ticket-reply-header {
    background: var(--bg-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 16px !important;
    font-size: 0.84rem !important;
}

.ticket-reply .ticket-reply-body {
    padding: 16px !important;
    color: var(--text) !important;
}

.ticket-reply.staff-reply {
    border-left: 3px solid var(--brand) !important;
}

/* ===========================
   WHMCS: Knowledgebase
   =========================== */
.kb-article-content {
    color: var(--text) !important;
    line-height: 1.7 !important;
}

.kb-article-content code {
    background: var(--bg) !important;
    color: var(--brand) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-family: var(--mono) !important;
    font-size: 0.84rem !important;
}

.kb-article-content pre {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-family: var(--mono) !important;
    font-size: 0.82rem !important;
    padding: 16px !important;
}

/* ===========================
   Footer
   =========================== */
footer,
.footer,
#footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-dim) !important;
    padding: 32px 0 !important;
}

footer a,
.footer a,
#footer a {
    color: var(--text) !important;
    transition: color 0.15s !important;
}

footer a:hover,
.footer a:hover,
#footer a:hover {
    color: var(--white) !important;
}

/* ===========================
   Login / Register Pages
   =========================== */
.login-container,
.register-container {
    max-width: 440px;
    margin: 40px auto;
}

.login-container .panel,
.register-container .panel {
    border: 1px solid var(--border) !important;
}

.login-container .panel-heading::before,
.register-container .panel-heading::before {
    content: '' !important;
}

/* ===========================
   Scrollbar
   =========================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* ===========================
   Misc / Overrides
   =========================== */
.jumbotron {
    background: var(--surface) !important;
    color: var(--heading) !important;
    border-radius: var(--radius) !important;
}

.thumbnail {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

.close {
    color: var(--text-dim) !important;
    opacity: 1 !important;
}

.close:hover {
    color: var(--white) !important;
}

code {
    background: var(--bg) !important;
    color: var(--brand) !important;
    font-family: var(--mono) !important;
    border-radius: 3px !important;
    border: none !important;
}

blockquote {
    border-left-color: var(--brand) !important;
    color: var(--text) !important;
}

/* Text utilities */
.text-primary { color: var(--brand) !important; }
.text-success { color: var(--green) !important; }
.text-info { color: #60a5fa !important; }
.text-warning { color: var(--amber) !important; }
.text-danger { color: var(--red) !important; }
.text-muted { color: var(--text-dim) !important; }

/* Background utilities */
.bg-primary { background: rgba(232, 77, 48, 0.1) !important; }
.bg-success { background: rgba(52, 211, 153, 0.1) !important; }
.bg-info { background: rgba(59, 130, 246, 0.1) !important; }
.bg-warning { background: rgba(251, 191, 36, 0.1) !important; }
.bg-danger { background: rgba(239, 68, 68, 0.1) !important; }

/* Body wrapper */
.main-content {
    min-height: calc(100vh - 200px);
    padding: 30px 0;
}

/* Container max-width */
.container {
    max-width: 1140px;
}

/* ===========================
   WHMCS Twenty-One Specific
   =========================== */

/* Top bar override */
.top-bar {
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Client area sidebar */
.sidebar .list-group-item i,
.sidebar .list-group-item .fas,
.sidebar .list-group-item .far {
    color: var(--brand) !important;
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* Service status badges */
.status-active {
    color: var(--green) !important;
}

.status-suspended,
.status-terminated {
    color: var(--red) !important;
}

.status-pending {
    color: var(--amber) !important;
}

/* WHMCS notification center */
.notification-icon .badge {
    background: var(--brand) !important;
    color: #fff !important;
}

/* Cart sidebar */
.cart-sidebar {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

/* ===========================
   Animations
   =========================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel,
.card,
.alert {
    animation: fadeIn 0.3s ease;
}

/* ===========================
   Responsive Tweaks
   =========================== */
@media (max-width: 768px) {
    .navbar-default .navbar-collapse {
        background: var(--surface) !important;
        border-top: 1px solid var(--border) !important;
        padding: 8px 0 !important;
    }

    .navbar-default .navbar-nav > li > a {
        padding: 12px 16px !important;
    }

    .panel-body {
        padding: 14px !important;
    }

    .table-responsive {
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
    }
}

/* ===================================
   MEGA FIX — All remaining white backgrounds
   =================================== */

/* ---- Global nuclear dark override ---- */
div, section, aside, main, article, figure, figcaption, details, summary {
    color: inherit;
}

/* ---- DataTables (services, invoices, tickets, emails) ---- */
table.dataTable,
table.dataTable tbody tr,
table.dataTable tbody td,
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    background: transparent !important;
    color: var(--text) !important;
}

table.dataTable tbody tr {
    background: var(--surface) !important;
}

table.dataTable tbody tr:nth-child(odd) {
    background: var(--bg-alt) !important;
}

table.dataTable tbody tr:hover {
    background: var(--surface-hover) !important;
}

table.dataTable thead th,
table.dataTable thead td {
    background: var(--bg-alt) !important;
    color: var(--text-dim) !important;
    border-bottom: 1px solid var(--border) !important;
    font-family: var(--mono) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

table.dataTable tbody td {
    border-top: 1px solid var(--border) !important;
    color: var(--text) !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--border) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--white) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 8px !important;
}

/* ---- Dropdown menus (Twenty-One uses Bootstrap 4 style) ---- */
.dropdown-menu,
.dropdown-menu.show,
ul.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
}

.dropdown-menu li a,
.dropdown-menu .dropdown-item,
.dropdown-item {
    color: var(--text) !important;
    background: transparent !important;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-menu .active > a {
    color: var(--white) !important;
    background: var(--surface-hover) !important;
}

.dropdown-divider {
    border-color: var(--border) !important;
}

/* ---- Product/store cards (cart page) ---- */
.product-group .product,
.products .product,
.product,
.product-card,
.store-product,
[class*="product"] .card,
.panel.product-panel,
.order-form .product {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
}

.product .product-name,
.product h3,
.product h4,
.product-name {
    color: var(--heading) !important;
}

.product .product-pricing,
.product .price,
.product-pricing {
    color: var(--heading) !important;
    font-family: var(--mono) !important;
}

/* ---- Cart / Order form pages ---- */
.order-form,
.order-form .container,
#order-standard_cart,
#order-standard_cart .main-content,
.cart-body,
.store-items {
    background: transparent !important;
}

.order-summary,
.order-review,
.cart-sidebar,
#order-summary,
.order-summary-container,
.summary-container,
[class*="order-summary"],
[class*="cart-total"] {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
}

/* Billing cycle selector */
.panel .radio-container,
.billing-cycle,
.order-form .well,
.cycle-pricing,
.pricing-cycle {
    background: var(--bg-alt) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
}

/* ---- Service detail page ---- */
.product-icon,
.product-details-icon,
.service-icon-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

.product-status,
.service-status-badge {
    border-radius: 20px !important;
    font-family: var(--mono) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ---- Affiliates page fix ---- */
.affiliate-stat,
.affiliate-stats .stat,
.stats-container .stat,
.tile,
.tiles .tile,
[class*="affiliate"] .panel,
[class*="affiliate"] .card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--heading) !important;
}

.tile .icon,
.tile .stat,
.tile .title,
.tiles .tile .stat,
.tiles .tile .title {
    color: var(--heading) !important;
}

.tile .icon i {
    color: var(--brand) !important;
}

.tile .highlight {
    display: none !important;
}

/* ---- Info/Alert boxes inside pages ---- */
.alert-info-box,
.info-box,
.callout,
[class*="callout"] {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border-radius: var(--radius-sm) !important;
}

/* ---- WHMCS Twenty-One specific components ---- */

/* Top bar (notification bar) */
.secondary-navbar,
.navbar-top,
.top-nav-container,
header .top-bar,
.header-top {
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-dim) !important;
}

/* Sidebar active state */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
    background: rgba(232, 77, 48, 0.08) !important;
    border-color: rgba(232, 77, 48, 0.2) !important;
    color: var(--brand) !important;
    border-left: 3px solid var(--brand) !important;
}

/* Focus state for inputs */
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-glow) !important;
    background: var(--surface) !important;
    color: var(--white) !important;
}

/* ============================================================
   WHMCS TWENTY-ONE SPECIFIC OVERRIDES
   These target the actual class names used by Twenty-One
   ============================================================ */

/* Twenty-One uses .w-hidden for WHMCS-specific wrappers */
#main-body,
#main-body > .container,
.main-content,
.body-content,
.client-area,
#Primary_Sidebar-container,
#Secondary_Sidebar-container,
.order-form,
.order-form-container,
#order-boxes,
#order-standard_cart,
#order-standard_cart .container,
.view-cart-items-header,
.cart-body,
.store-container,
.product-group,
.sub-heading {
    background: transparent !important;
    color: var(--text) !important;
}

/* Domain checker — Twenty-One wraps in specific classes */
.domain-checker-bg,
.domain-checker-container,
.domain-checker,
#order-standard_cart .domain-checker,
.domainchecker,
.domainchecker-bg,
[class*="domain-checker"],
[class*="domain-search"],
.spotlight-tld-container,
.w-spotlight-search {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
}

/* Domain search form elements */
.domain-checker textarea,
.domain-checker input,
.domain-checker .form-control,
.domainchecker textarea,
.domainchecker input {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--white) !important;
}

/* Twenty-One filter row buttons */
.domain-checker .btn-default,
.domain-checker .btn-link,
.domainchecker .btn-default,
.domain-checker .form-group .btn,
.domain-checker label {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Twenty-One cart / order forms */
.order-summary,
.order-summary-container,
.cart-sidebar,
.order-review,
.checkout-form,
#checkout,
#checkout .panel,
.ssl-cart,
.configurable-options,
.addon-products,
.product-pricing,
.hosting-cycle-options {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Inline styles override (Twenty-One uses inline bg:white a lot) */
[style*="background: #f"] {
    background: var(--surface) !important;
}

[style*="background-color: #f"] {
    background-color: var(--surface) !important;
}

[style*="background: #e"] {
    background: var(--surface) !important;
}

[style*="background-color: #e"] {
    background-color: var(--surface) !important;
}

[style*="background: #d"] {
    background: var(--surface) !important;
}

[style*="color: #3"] {
    color: var(--text) !important;
}

[style*="color: #2"] {
    color: var(--text) !important;
}

[style*="color: #1"] {
    color: var(--text) !important;
}

[style*="color: #0"] {
    color: var(--text) !important;
}

[style*="color: black"],
[style*="color: #000"],
[style*="color: #333"],
[style*="color: #444"],
[style*="color: #555"],
[style*="color: #666"] {
    color: var(--text) !important;
}

/* Image circle icon containers */
.product-icon img,
.service-icon img,
img.product-logo {
    filter: brightness(0.9);
}

/* Server module */
.server-overview,
.server-info,
[class*="server-overview"],
.module-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
}