/* ==========================================================================
   RACKEYE MASTER DARK MODE ENGINE (WHMCS Twenty-One Override)
   ========================================================================== */

:root {
    --bg-base: #09090b;          /* Deepest background */
    --bg-surface: #121212;       /* Elevated cards/panels */
    --bg-surface-hover: #1a1a1a; /* Hover states */
    --border-color: #242424;     /* Subtle borders */
    --accent-red: #ff4d4d;       /* Primary brand color */
    --text-main: #ffffff;        /* Primary text */
    --text-muted: #8b949e;       /* Secondary text */
}

/* ==========================================================
   1. GLOBAL BACKGROUNDS & TYPOGRAPHY
   ========================================================== */
body, html, .app-main, section#main-body, 
.bg-white, .bg-light, .primary-bg-color, .main-content {
    background-color: var(--bg-base) !important;
    color: var(--text-main) !important;
}

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6,
.text-dark, .text-body {
    color: var(--text-main) !important;
}

p, span, div, .text-muted, small {
    color: var(--text-muted);
}

a {
    color: var(--accent-red);
    transition: all 0.2s ease;
}

a:hover {
    color: #ff7373;
    text-decoration: none;
}

/* ==========================================================
   2. CARDS, PANELS & CONTAINERS
   ========================================================== */
.card, .panel, .client-home-panels .panel, .well, .jumbotron {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    border-radius: 8px !important;
}

.card-header, .panel-heading {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    font-weight: 700;
}

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

/* ==========================================================
   3. FORMS, INPUTS & DROPDOWNS
   ========================================================== */
.form-control, input[type="text"], input[type="email"], 
input[type="password"], select, textarea, .custom-select {
    background-color: var(--bg-base) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 6px;
}

.form-control:focus, select:focus, textarea:focus {
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2) !important;
    background-color: var(--bg-base) !important;
    color: var(--text-main) !important;
}

.input-group-text, .input-group-addon {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* Dropdown Menus (User account, Language) */
.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8) !important;
}

.dropdown-item {
    color: var(--text-muted) !important;
}

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

/* ==========================================================
   4. BUTTONS
   ========================================================== */
.btn-primary, .btn-success, .btn-info {
    background-color: var(--text-main) !important;
    color: var(--bg-base) !important;
    border: none !important;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-primary:hover, .btn-success:hover, .btn-info:hover {
    background-color: var(--accent-red) !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.3) !important;
    transform: translateY(-1px);
}

.btn-default, .btn-secondary, .btn-outline-primary {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-default:hover, .btn-secondary:hover {
    border-color: var(--accent-red) !important;
    color: var(--accent-red) !important;
    background-color: rgba(255, 77, 77, 0.05) !important;
}

.btn-danger {
    background-color: transparent !important;
    border: 1px solid var(--accent-red) !important;
    color: var(--accent-red) !important;
}

.btn-danger:hover {
    background-color: var(--accent-red) !important;
    color: var(--text-main) !important;
}

/* ==========================================================
   5. TABLES & DATATABLES (Services, Tickets, Domains)
   ========================================================== */
.table, .dataTables_wrapper .table {
    background-color: transparent !important;
    color: var(--text-muted) !important;
}

.table th, .table thead th {
    background-color: var(--bg-surface) !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-top: none !important;
    color: var(--text-main) !important;
    font-weight: 600;
}

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

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.02) !important;
}

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

/* HARD OVERRIDE: kill default WHMCS white cells */
.table-striped > tbody > tr > td,
.table-striped > tbody > tr > th,
.table-responsive .table > tbody > tr > td,
table.table-list tbody tr td,
.dataTables_wrapper table.dataTable tbody tr td {
    background-color: transparent !important;
    background: transparent !important;
}

.table-list tbody tr td {
    background-color: var(--bg-surface) !important;
}

/* Pagination for DataTables */
.pagination .page-item .page-link {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color: var(--text-main) !important;
}

/* ==========================================================
   6. SIDEBARS & LIST GROUPS
   ========================================================== */
.list-group-item {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

.list-group-item:hover, .list-group-item[href]:hover {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
}

.list-group-item.active {
    background-color: var(--bg-surface-hover) !important;
    border-left: 3px solid var(--accent-red) !important;
    color: var(--text-main) !important;
    border-top-color: var(--border-color) !important;
    border-right-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ==========================================================
   7. ALERTS, NOTIFICATIONS & BADGES
   ========================================================== */
.alert {
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.alert-info    { background-color: rgba(23, 162, 184, 0.1) !important; border-color: rgba(23, 162, 184, 0.3) !important; }
.alert-success { background-color: rgba(40, 167, 69, 0.1) !important;  border-color: rgba(40, 167, 69, 0.3) !important; }
.alert-warning { background-color: rgba(255, 193, 7, 0.1) !important;  border-color: rgba(255, 193, 7, 0.3) !important; }
.alert-danger  { background-color: rgba(255, 77, 77, 0.1) !important;  border-color: rgba(255, 77, 77, 0.3) !important; }

.badge {
    font-weight: 600;
    padding: 5px 8px;
}

.badge-success, .status-active {
    background-color: rgba(40, 167, 69, 0.2) !important;
    color: #28a745 !important;
    border: 1px solid rgba(40, 167, 69, 0.3);
}
.badge-danger, .status-terminated {
    background-color: rgba(255, 77, 77, 0.2) !important;
    color: var(--accent-red) !important;
    border: 1px solid rgba(255, 77, 77, 0.3);
}
.badge-warning, .status-suspended {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* ==========================================================
   8. TABS & SUB-NAVIGATION
   ========================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border: none !important;
    background: transparent !important;
    border-bottom: 2px solid transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--text-main) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

.nav-tabs .nav-link.active {
    color: var(--accent-red) !important;
    border-bottom: 2px solid var(--accent-red) !important;
}

/* ==========================================================
   9. MISC FIXES (Breadcrumbs, Modals, Footers)
   ========================================================== */
.modal-content {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
}

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

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

.close {
    color: var(--text-muted) !important;
    text-shadow: none !important;
}

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

/* Master Breadcrumb background fallback */
.master-breadcrumb, .nav-tabs-overflow {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Order Form / View Cart progress bar area */
#order-standard_cart .categories-collapsed {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

/* Invoice Page specific fixes */
.invoice-container {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ==========================================================
   10. VIEW CART & CHECKOUT PAGE OVERRIDES
   ========================================================== */

/* 1. The Blue Table Header */
#order-standard_cart .view-cart-items-header {
    background-color: #121212 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #ff4d4d !important;
}

/* 2. The Promo Code Box Container */
#order-standard_cart .view-cart-promo {
    background-color: #121212 !important;
    border: 1px solid #242424 !important;
    border-radius: 8px;
    padding: 15px !important;
}

#order-standard_cart .view-cart-promo input.form-control {
    background-color: #09090b !important;
    border: 1px solid #242424 !important;
    color: #ffffff !important;
}

/* 3. The Order Summary Sidebar */
#order-standard_cart #orderSummary {
    background-color: #121212 !important;
    border: 1px solid #242424 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
    border-radius: 12px;
    overflow: hidden;
}

/* Order Summary Header */
#order-standard_cart .order-summary h2 {
    background-color: #09090b !important;
    color: #ffffff !important;
    border-bottom: 1px solid #242424 !important;
    padding: 15px !important;
    margin: 0 !important;
}

/* Order Summary Body (Subtotals & Due Today) */
#order-standard_cart .order-summary .summary-container {
    background-color: #121212 !important;
    color: #ffffff !important;
}

#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .total-due-today {
    border-color: #242424 !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
    color: #ff4d4d !important; /* RackEye Red for the final price */
}

/* 4. The Checkout Button */
#order-standard_cart .btn-checkout {
    background-color: #ffffff !important;
    color: #09090b !important;
    border: none !important;
    font-weight: 800;
    transition: all 0.3s ease;
}

#order-standard_cart .btn-checkout:hover {
    background-color: #ff4d4d !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* ==========================================================
   11. CART ITEMS & PRODUCT CONFIG WHITE FIXES
   ========================================================== */

/* Cart main body + items */
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-items .item,
#order-standard_cart .cart-body,
#order-standard_cart .product-info,
#order-standard_cart .products-suggestion {
    background-color: var(--bg-surface) !important;
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* Titles in cart */
#order-standard_cart .view-cart-items .item-title,
#order-standard_cart .view-cart-items .item-domain,
#order-standard_cart .cart-body h3 {
    color: var(--text-main) !important;
}

/* Empty cart block */
#order-standard_cart .view-cart-empty {
    background-color: var(--bg-surface) !important;
}

/* Configure product / domain options / checkout boxes */
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .field-row,
#order-standard_cart .checkout-box,
#order-standard_cart .checkout-box-title {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Price text in cart line items */
#order-standard_cart .view-cart-items .item-price span {
    color: var(--text-muted) !important;
}