/* ============================================================
   0724 HOSTING — WHMCS CUSTOM STYLESHEET
   Dark theme matching main site (0724.co.za)
   Based on twenty-one template
   ============================================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── ROOT VARIABLES — Matching 0724.co.za ── */
:root {
    /* 0724 Brand Colors */
    --bg-0724: #070b12;
    --surface-0724: #0c1220;
    --surface2-0724: #101828;
    --border-0724: #192038;
    --border-l-0724: #22305a;
    --cyan-0724: #00d4ff;
    --cyan-dim-0724: #00a8cc;
    --cyan-glow-0724: rgba(0,212,255,0.11);
    --cyan-border-0724: rgba(0,212,255,0.22);
    --text-0724: #cfe0f0;
    --muted-0724: #6a7a9a;
    --muted2-0724: #8090b0;
    --white-0724: #ffffff;
    --green-0724: #22c55e;
    --orange-0724: #f97316;
    --red-0724: #ef4444;

    /* Override WHMCS default colors */
    --white: #ffffff;
    
    /* Neutral shades - Dark theme */
    --neutral-50: #101828;
    --neutral-100: #0c1220;
    --neutral-200: #192038;
    --neutral-300: #22305a;
    --neutral-400: #6a7a9a;
    --neutral-500: #8090b0;
    --neutral-600: #cfe0f0;
    --neutral-700: #e0e8f0;
    --neutral-800: #f0f4f8;
    --neutral-900: #ffffff;
    --neutral-950: #ffffff;

    /* Primary colors - Cyan accent */
    --primary-50: rgba(0,212,255,0.05);
    --primary-100: rgba(0,212,255,0.11);
    --primary-200: rgba(0,212,255,0.22);
    --primary-300: #00a8cc;
    --primary-400: #00c4ec;
    --primary-500: #00d4ff;
    --primary-600: #00d4ff;
    --primary-700: #33dcff;
    --primary-800: #66e5ff;
    --primary-900: #99edff;
    --primary-950: #ccf6ff;

    /* Primary semantic colors */
    --primary: #00d4ff;
    --primary-lifted: #00c4ec;
    --primary-accented: #00a8cc;

    /* Secondary colors */
    --secondary: #8090b0;
    --secondary-lifted: #6a7a9a;
    --secondary-accented: #5a6a8a;

    /* Success colors */
    --success: #22c55e;
    --success-lifted: #16a34a;
    --success-accented: #15803d;

    /* Info colors - Cyan */
    --info: #00d4ff;
    --info-lifted: #00c4ec;
    --info-accented: #00a8cc;

    /* Notice colors - Orange */
    --notice: #f97316;
    --notice-lifted: #ea580c;
    --notice-accented: #c2410c;

    /* Warning colors */
    --warning: #f59e0b;
    --warning-lifted: #d97706;
    --warning-accented: #b45309;

    /* Error colors */
    --error: #ef4444;
    --error-lifted: #dc2626;
    --error-accented: #b91c1c;

    /* Grayscale colors */
    --grayscale: #0c1220;
    --grayscale-lifted: #101828;
    --grayscale-accented: #192038;

    /* Neutral colors */
    --neutral: #8090b0;
    --neutral-lifted: #6a7a9a;
    --neutral-accented: #5a6a8a;

    /* Text colors */
    --text-inverted: #070b12;
    --text-muted: #6a7a9a;
    --text-lifted: #8090b0;
    --text-accented: #cfe0f0;
    --text: #cfe0f0;

    /* Border colors */
    --border-muted: #192038;
    --border: #22305a;
    --border-lifted: #2a3a6a;
    --border-accented: #00d4ff;

    /* Background colors */
    --bg: #070b12;
    --bg-muted: #0c1220;
    --bg-lifted: #101828;
    --bg-accented: #192038;
    --bg-inverted: #ffffff;

    /* Font families */
    --font-primary: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Spacing & Rounding */
    --rounding-sm: 8px;
    --rounding-md: 12px;
    --rounding-lg: 16px;
}

/* ── GLOBAL OVERRIDES ── */
html {
    font-size: 14px;
    background: var(--bg);
}

body {
    background: var(--bg) !important;
    color: var(--text-0724) !important;
    font-family: var(--font-primary) !important;
    line-height: 1.65;
}

/* Force all containers to dark */
.container,
.container-fluid {
    background: transparent !important;
}

/* Force all rows to dark */
.row {
    background: transparent !important;
}

/* Any section or div that might be white */
section,
.section,
.content-section {
    background: transparent !important;
}

/* Main content area */
.primary-content {
    background: transparent !important;
}

/* All paragraphs readable */
p {
    color: var(--text-0724) !important;
}

/* All lists readable */
li {
    color: var(--text-0724) !important;
}

/* All spans readable */
span {
    color: var(--text-0724) !important;
}

/* All divs readable by default */
div {
    color: var(--text-0724);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--white-0724) !important;
    font-family: var(--font-primary) !important;
    font-weight: 600;
    letter-spacing: -0.02em;
}

p, span, div, li {
    color: var(--text);
}

a {
    color: var(--primary);
    transition: all 0.25s ease;
}

a:hover {
    color: var(--primary-lifted);
    text-decoration: none;
}

strong, b {
    color: var(--white-0724);
}

code, pre {
    font-family: var(--font-mono) !important;
    background: var(--surface-0724);
    border: 1px solid var(--border-0724);
    border-radius: var(--rounding-sm);
    padding: 0.15rem 0.4rem;
    color: var(--cyan-0724);
}

/* ══════════════════════════════════════════════
   HEADER & NAVIGATION
   ══════════════════════════════════════════════ */
#header {
    background: var(--surface-0724) !important;
    border-bottom: 2px solid var(--cyan-0724) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

/* Topbar (logged in) */
.topbar {
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border-0724) !important;
}

.topbar .btn {
    color: var(--muted-0724) !important;
    background: transparent !important;
    border: none !important;
}

.topbar .btn:hover {
    color: var(--cyan-0724) !important;
}

.topbar .btn-active-client {
    background: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text) !important;
}

.topbar .btn-active-client:hover {
    border-color: var(--cyan-0724) !important;
}

/* Navbar */
.navbar {
    background: var(--surface-0724) !important;
}

.navbar-brand {
    color: var(--white-0724) !important;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Logo */
.logo-img {
    max-height: 50px;
    width: auto;
}

/* Search input */
.input-group.search .form-control {
    background: var(--bg) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text) !important;
}

.input-group.search .form-control:focus {
    border-color: var(--cyan-0724) !important;
    box-shadow: 0 0 0 3px var(--cyan-glow-0724) !important;
}

.input-group.search .btn {
    background: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--muted-0724) !important;
}

.input-group.search .btn:hover {
    color: var(--cyan-0724) !important;
    border-color: var(--cyan-0724) !important;
}

/* Cart button */
.cart-btn {
    background: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--muted-0724) !important;
    border-radius: var(--rounding-md) !important;
}

.cart-btn:hover {
    border-color: var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
}

.cart-btn .badge {
    background: var(--cyan-0724) !important;
    color: var(--bg) !important;
}

/* Navigation links - IMPROVED VISIBILITY */
.navbar-nav .nav-link {
    color: var(--text-0724) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 0.75rem 1.25rem !important;
    border-radius: var(--rounding-md) !important;
    transition: all 0.25s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--cyan-0724) !important;
    background: var(--cyan-glow-0724) !important;
}

.navbar-nav .nav-link.active {
    color: var(--cyan-0724) !important;
    background: var(--cyan-glow-0724) !important;
    box-shadow: 0 0 20px rgba(0,212,255,0.2);
}

/* Main navbar links - specific styling */
#nav .nav-link {
    color: var(--text-0724) !important;
    font-size: 0.95rem !important;
}

#nav .nav-link:hover,
#nav .nav-link:focus {
    color: var(--cyan-0724) !important;
}

/* Dropdown menus - IMPROVED VISIBILITY */
.dropdown-menu {
    background: var(--surface2-0724) !important;
    border: 2px solid var(--cyan-0724) !important;
    border-radius: var(--rounding-md) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,212,255,0.2) !important;
    padding: 0.85rem 0 !important;
}

.dropdown-item {
    color: var(--text-0724) !important;
    padding: 0.85rem 1.4rem !important;
    font-weight: 500;
    font-size: 0.95rem !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--cyan-0724) !important;
    background: rgba(0,212,255,0.15) !important;
}

/* Navbar main menu - MAXIMUM VISIBILITY */
.main-navbar-wrapper .navbar-nav .nav-link {
    color: var(--white-0724) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.main-navbar-wrapper {
    background: var(--surface-0724) !important;
    border-top: 1px solid var(--border-0724) !important;
}

/* Top level nav - force bright */
.navbar-nav > li > a {
    color: var(--white-0724) !important;
}

/* All nav links - no exceptions */
nav a,
.nav a {
    color: var(--text-0724) !important;
}

nav a:hover,
.nav a:hover {
    color: var(--cyan-0724) !important;
}

/* ══════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════ */
.master-breadcrumb {
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border-0724);
}

.breadcrumb {
    background: transparent !important;
}

.breadcrumb-item a {
    color: var(--muted-0724);
}

.breadcrumb-item a:hover {
    color: var(--cyan-0724);
}

.breadcrumb-item.active {
    color: var(--text);
}

/* ══════════════════════════════════════════════
   MAIN BODY
   ══════════════════════════════════════════════ */
#main-body {
    background: var(--bg) !important;
    min-height: calc(100vh - 400px);
}

.container {
    max-width: 1200px;
}

/* Primary background color class */
.primary-bg-color {
    background: var(--bg) !important;
}

/* ══════════════════════════════════════════════
   CARDS - FIXED FOR DARK THEME
   ══════════════════════════════════════════════ */
.card {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease;
}

.card:hover {
    border-color: var(--cyan-0724) !important;
    box-shadow: 0 8px 24px rgba(0,212,255,0.15) !important;
    transform: translateY(-2px);
}

.card-header {
    background: var(--surface2-0724) !important;
    border-bottom: 1px solid var(--border-0724) !important;
    color: var(--white-0724) !important;
    font-weight: 600;
}

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

.card-title {
    color: var(--white-0724) !important;
    font-weight: 600 !important;
}

.card-text,
.card-body p,
.card-body li,
.card-body span,
.card-body div {
    color: var(--text-0724) !important;
}

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

/* Product cards specifically */
.pricing-card-title {
    color: var(--white-0724) !important;
}

/* Shopping cart product cards */
.product-item,
.cart-product {
    background: var(--surface-0724) !important;
}

/* Configuration cards (checkout) */
.config-options,
.product-details {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.btn {
    border-radius: var(--rounding-md) !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.95rem !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--cyan-0724), var(--cyan-dim-0724)) !important;
    border: none !important;
    color: var(--bg) !important;
    box-shadow: 0 4px 12px rgba(0,212,255,0.3) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #33dcff, var(--cyan-0724)) !important;
    box-shadow: 0 6px 20px rgba(0,212,255,0.4) !important;
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text) !important;
}

.btn-secondary:hover {
    border-color: var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
    background: var(--cyan-glow-0724) !important;
}

.btn-success {
    background: var(--green-0724) !important;
    border: none !important;
    color: var(--bg) !important;
}

.btn-success:hover {
    background: #16a34a !important;
}

.btn-danger {
    background: var(--red-0724) !important;
    border: none !important;
    color: white !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
}

.btn-warning {
    background: var(--orange-0724) !important;
    border: none !important;
    color: var(--bg) !important;
}

.btn-warning:hover {
    background: #ea580c !important;
}

.btn-outline-primary {
    border: 2px solid var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--cyan-0724) !important;
    color: var(--bg) !important;
}

/* ══════════════════════════════════════════════
   FORMS - IMPROVED VISIBILITY & FONTS
   ══════════════════════════════════════════════ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea {
    background: var(--surface-0724) !important;
    border: 2px solid var(--border-l-0724) !important;
    color: var(--text-0724) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    transition: all 0.25s ease;
}

.form-control:focus,
input:focus,
textarea:focus {
    background: var(--surface2-0724) !important;
    border-color: var(--cyan-0724) !important;
    box-shadow: 0 0 0 3px var(--cyan-glow-0724) !important;
    color: var(--white-0724) !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--muted-0724) !important;
    opacity: 0.7;
}

.form-label,
label {
    color: var(--text-0724) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
}

/* SELECT DROPDOWNS - IMPROVED STYLING & OVERFLOW FIX */
.form-select,
select {
    background: var(--surface-0724) !important;
    border: 2px solid var(--border-l-0724) !important;
    color: var(--text-0724) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.6rem 2rem 0.6rem 0.75rem !important;
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300d4ff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px !important;
    min-width: 150px !important;
    max-width: 100% !important;
    width: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.form-select:focus,
select:focus {
    border-color: var(--cyan-0724) !important;
    box-shadow: 0 0 0 3px var(--cyan-glow-0724) !important;
    background-color: var(--surface2-0724) !important;
    outline: none !important;
}

/* SELECT OPTIONS */
.form-select option,
select option {
    background: var(--surface2-0724) !important;
    color: var(--text-0724) !important;
    padding: 0.75rem 1rem !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Specific dropdown fixes */
select[name="currency"],
select[name="tld"],
select[name="billingcycle"] {
    min-width: 150px !important;
    max-width: 300px !important;
}

/* Currency selector specifically */
#currencyChooser,
.currency-selector,
select#currency,
.modal-localisation select {
    background: var(--surface-0724) !important;
    border: 2px solid var(--border-l-0724) !important;
    color: var(--text-0724) !important;
    font-size: 0.95rem !important;
}

/* Item selector (for currency/language) */
.item-selector {
    background: var(--surface-0724) !important;
}

.item-selector .item {
    background: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text-0724) !important;
}

.item-selector .item:hover,
.item-selector .item.active {
    background: var(--cyan-glow-0724) !important;
    border-color: var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
}

textarea.form-control {
    min-height: 120px;
}

/* INPUT GROUPS */
.input-group-text {
    background: var(--surface2-0724) !important;
    border: 2px solid var(--border-l-0724) !important;
    color: var(--text-0724) !important;
}

.input-group .form-control {
    border-left: none !important;
}

.input-group .form-control:focus {
    border-left: 2px solid var(--cyan-0724) !important;
}

/* ══════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════ */
.table {
    color: var(--text-0724) !important;
    background-color: var(--surface-0724) !important;
    border-color: var(--border-0724) !important;
}

.table thead th {
    background: var(--surface2-0724) !important;
    background-color: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
    border-color: var(--border-0724) !important;
    font-weight: 600;
}

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

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

.table td,
.table th {
    padding: 0.75rem !important;
    vertical-align: top !important;
    border-top: 1px solid var(--border-0724) !important;
    border-color: var(--border-0724) !important;
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

.table th {
    background-color: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
    font-weight: 600 !important;
}

.table tbody td {
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--bg-muted) !important;
    background-color: var(--surface-0724) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background: var(--surface2-0724) !important;
    background-color: var(--surface2-0724) !important;
}

/* Table-list specific (domain pricing, etc.) */
.table-list,
.table-list > tbody,
.table-list tbody {
    background-color: var(--surface-0724) !important;
}

.table-list > tbody > tr,
.table-list tbody tr {
    background-color: var(--surface-0724) !important;
}

.table-list > tbody > tr > td,
.table-list tbody td {
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
    border-color: var(--border-0724) !important;
}

.table-list > thead,
.table-list thead {
    background-color: var(--surface2-0724) !important;
}

.table-list > thead > tr > th,
.table-list thead th {
    background-color: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
    border-color: var(--border-0724) !important;
}

.table-list tbody tr:nth-child(even),
.table-list tbody tr:nth-child(even) td {
    background-color: var(--surface2-0724) !important;
}

.table-list tbody tr:hover,
.table-list tbody tr:hover td {
    background-color: var(--cyan-glow-0724) !important;
}

/* Override any remaining white table backgrounds */
table[style*="background:#fff"],
table[style*="background-color:#fff"],
table[style*="background: #fff"],
table[style*="background-color: #fff"],
tbody[style*="background:#fff"],
tbody[style*="background-color:#fff"],
tr[style*="background:#fff"],
tr[style*="background-color:#fff"],
td[style*="background:#fff"],
td[style*="background-color:#fff"] {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
}

/* ══════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════ */
.alert {
    border-radius: var(--rounding-md) !important;
    border-left-width: 4px !important;
}

.alert-success {
    background: rgba(34,197,94,0.1) !important;
    border-color: var(--green-0724) !important;
    color: #86efac !important;
}

.alert-info {
    background: var(--cyan-glow-0724) !important;
    border-color: var(--cyan-0724) !important;
    color: #7dd3fc !important;
}

.alert-warning {
    background: rgba(249,115,22,0.1) !important;
    border-color: var(--orange-0724) !important;
    color: #fdba74 !important;
}

.alert-danger {
    background: rgba(239,68,68,0.1) !important;
    border-color: var(--red-0724) !important;
    color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════
   SIDEBAR - CATEGORIES & ACTIONS - FORCE DARK
   ══════════════════════════════════════════════ */
.sidebar,
.panel,
.panel-default,
div[class*="sidebar"],
div[class*="panel"] {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
    border-radius: var(--rounding-lg) !important;
    padding: 1.5rem !important;
}

/* Panel headers (Categories, Actions, etc) */
.panel-heading,
.sidebar-heading,
h3.panel-title,
.card-header {
    background: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
    border-bottom: 1px solid var(--border-0724) !important;
}

/* Panel body */
.panel-body,
.sidebar-body {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* List groups in sidebar */
.sidebar .list-group,
.panel .list-group {
    background: transparent !important;
}

.sidebar .list-group-item,
.panel .list-group-item {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    color: var(--text-0724) !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.25rem;
    border-radius: 0 var(--rounding-sm) var(--rounding-sm) 0 !important;
}

.sidebar .list-group-item:hover,
.panel .list-group-item:hover {
    background: var(--cyan-glow-0724) !important;
    border-left-color: var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
}

.sidebar .list-group-item.active,
.panel .list-group-item.active {
    background: var(--cyan-glow-0724) !important;
    border-left-color: var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
}

/* Categories and Actions specifically */
.panel.panel-sidebar,
.sidebar-element,
div[id*="sidebar"],
div[id*="panel"] {
    background: var(--surface-0724) !important;
}

/* All links in sidebar */
.sidebar a,
.panel a {
    color: var(--text-0724) !important;
}

.sidebar a:hover,
.panel a:hover {
    color: var(--cyan-0724) !important;
}

/* ══════════════════════════════════════════════
   HOMEPAGE ACTION ICONS & PRODUCT CARDS
   ══════════════════════════════════════════════ */
.action-icon-btns a {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
    border-radius: var(--rounding-lg) !important;
    padding: 2rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    color: var(--text-0724) !important;
    transition: all 0.3s ease !important;
    min-height: 160px !important;
    justify-content: center !important;
}

.action-icon-btns a:hover {
    border-color: var(--cyan-0724) !important;
    box-shadow: 0 8px 24px rgba(0,212,255,0.2) !important;
    transform: translateY(-4px);
}

.action-icon-btns .ico-container {
    width: 64px !important;
    height: 64px !important;
    background: var(--cyan-glow-0724) !important;
    border: 2px solid var(--cyan-0724) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
    font-size: 1.75rem !important;
    color: var(--cyan-0724) !important;
}

.action-icon-btns a:hover .ico-container {
    background: var(--cyan-0724) !important;
    color: var(--bg) !important;
    box-shadow: 0 8px 24px rgba(0,212,255,0.4) !important;
}

/* Homepage product cards */
.home .card,
.card-columns.home .card {
    background: var(--surface-0724) !important;
}

.home .card-body,
.card-columns.home .card-body {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

.home .card p,
.card-columns.home .card p {
    color: var(--text-0724) !important;
}

/* ══════════════════════════════════════════════
   FOOTER - CENTERED TEXT
   ══════════════════════════════════════════════ */
#footer {
    background: var(--surface-0724) !important;
    border-top: 2px solid var(--cyan-0724) !important;
    color: var(--text) !important;
    padding: 3rem 0 2rem !important;
    margin-top: 4rem !important;
}

#footer .nav-link {
    color: var(--muted-0724) !important;
}

#footer .nav-link:hover {
    color: var(--cyan-0724) !important;
}

#footer .copyright {
    color: var(--muted-0724) !important;
    font-size: 0.9rem;
    text-align: center !important;
}

#footer p {
    text-align: center !important;
}

#footer .container > p {
    text-align: center !important;
}

/* ══════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════ */
.modal-content {
    background: var(--surface-0724) !important;
    border: 2px solid var(--cyan-0724) !important;
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.8) !important;
}

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

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

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

.close {
    color: var(--muted-0724) !important;
    opacity: 1 !important;
}

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

/* ══════════════════════════════════════════════
   BADGES & PILLS
   ══════════════════════════════════════════════ */
.badge {
    border-radius: var(--rounding-sm) !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.75rem !important;
}

.badge-primary {
    background: var(--cyan-0724) !important;
    color: var(--bg) !important;
}

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

.badge-warning {
    background: var(--orange-0724) !important;
    color: var(--bg) !important;
}

.badge-danger {
    background: var(--red-0724) !important;
    color: white !important;
}

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

/* ══════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════ */
.pagination .page-link {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text) !important;
}

.pagination .page-link:hover {
    background: var(--cyan-glow-0724) !important;
    border-color: var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
}

.pagination .page-item.active .page-link {
    background: var(--cyan-0724) !important;
    border-color: var(--cyan-0724) !important;
    color: var(--bg) !important;
}

/* ══════════════════════════════════════════════
   DOMAIN SEARCH - DARK THEME FIX
   ══════════════════════════════════════════════ */
.domain-search-header {
    background: var(--surface2-0724) !important;
    border-bottom: 2px solid var(--cyan-0724) !important;
    padding: 3rem 0 !important;
}

.domain-search-header h1 {
    color: var(--white-0724) !important;
}

/* Domain search container - AGGRESSIVE FIX */
.domain-search,
.domain-checker-container,
.domain-lookup,
.domain-checker,
.domain-search-results,
div[class*="domain"] {
    background: var(--surface-0724) !important;
    padding: 2rem !important;
    border-radius: var(--rounding-lg) !important;
    border: 1px solid var(--border-0724) !important;
}

/* Domain search ALL child elements */
.domain-search *,
.domain-checker-container *,
.domain-lookup *,
.domain-checker * {
    color: var(--text-0724) !important;
}

/* Domain search inner containers */
.domain-search > div,
.domain-checker-container > div {
    background: var(--surface-0724) !important;
}

/* Domain search input */
.domain-search input,
.domain-checker-container input,
.domain-lookup input {
    background: var(--bg) !important;
    border: 2px solid var(--border-l-0724) !important;
    color: var(--text-0724) !important;
}

/* Domain TLD selector */
.domain-search select,
.domain-checker-container select,
select[name*="tld"],
select[name*="domain"] {
    background: var(--surface-0724) !important;
    border: 2px solid var(--border-l-0724) !important;
    color: var(--text-0724) !important;
}

/* Domain pricing */
.domain-pricing {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

.domain-pricing table {
    background: var(--surface-0724) !important;
}

.domain-pricing td,
.domain-pricing th {
    color: var(--text-0724) !important;
    border-color: var(--border-0724) !important;
}

/* Domain results */
.domain-result,
.domain-available,
.domain-unavailable {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
    .sidebar {
        margin-bottom: 2rem;
    }

    .action-icon-btns a {
        min-height: 140px !important;
        padding: 1.5rem 1rem !important;
    }

    .action-icon-btns .ico-container {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.5rem !important;
    }
}

@media (max-width: 767px) {
    .navbar-collapse {
        background: var(--surface2-0724) !important;
        padding: 1rem !important;
        margin-top: 1rem !important;
        border-radius: var(--rounding-md) !important;
    }
}

/* ══════════════════════════════════════════════
   CHECKOUT & CART - FORCE DARK THEME
   ══════════════════════════════════════════════ */
/* All product sections */
.product-section,
.order-section,
.configure-section,
.checkout-section {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* Product configuration */
.product-configuration,
.product-config,
.config-area,
.configure-product {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

.product-configuration *,
.product-config *,
.config-area *,
.configure-product * {
    color: var(--text-0724) !important;
}

/* Order summary */
.order-summary,
.summary-container {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text-0724) !important;
}

.order-summary h3,
.order-summary h4,
.summary-container h3,
.summary-container h4 {
    color: var(--white-0724) !important;
}

/* Shopping cart */
.shopping-cart,
.cart-container {
    background: var(--bg) !important;
}

.cart-item,
.cart-product-item {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* View sections */
.view-cart-items,
.cart-body {
    background: var(--bg) !important;
}

/* Configuration options */
.config-options {
    background: var(--surface-0724) !important;
}

.config-options label,
.config-options span,
.config-options div {
    color: var(--text-0724) !important;
}

/* Billing cycle selector */
.billingcycle-container,
.billing-cycle {
    background: var(--surface-0724) !important;
}

/* Product description in cart */
.product-description,
.product-details {
    color: var(--text-0724) !important;
}

/* ══════════════════════════════════════════════
   AGGRESSIVE WHITE BACKGROUND FIXES - NUCLEAR OPTION
   ══════════════════════════════════════════════ */
/* Force dark on ALL white backgrounds */
div[style*="background:#fff"],
div[style*="background:white"],
div[style*="background: #fff"],
div[style*="background: white"],
div[style*="background-color:#fff"],
div[style*="background-color:white"],
div[style*="background-color: #fff"],
div[style*="background-color: white"],
.bg-white,
[style*="background:#ffffff"],
[style*="background-color:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color: #ffffff"] {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* Any light background */
div[style*="background:#f"],
.bg-light {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* Product cards - ALL variations */
.product-card,
.product-listing-card,
.product-item,
.products .card,
.pricing-card,
div[class*="product"] .card,
div[class*="product-"] {
    background: var(--surface-0724) !important;
}

.product-card *,
.product-listing-card *,
.product-item *,
.products .card *,
.pricing-card * {
    color: var(--text-0724) !important;
}

.product-card h3,
.product-card h4,
.product-listing-card h3,
.product-listing-card h4,
.pricing-card h3,
.pricing-card h4 {
    color: var(--white-0724) !important;
}

/* Card columns (product grid) */
.card-columns .card,
.card-deck .card {
    background: var(--surface-0724) !important;
}

/* Any panel or well */
.panel,
.well,
div[class*="panel"],
div[class*="well"] {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* Collapsible panels */
.panel-collapse,
.collapse {
    background: var(--surface-0724) !important;
}

/* Panel groups */
.panel-group {
    background: transparent !important;
}

.panel-group .panel {
    background: var(--surface-0724) !important;
}

/* ══════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════ */
.text-muted {
    color: var(--muted-0724) !important;
}

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

.text-white {
    color: var(--white-0724) !important;
}

.bg-light {
    background: var(--surface-0724) !important;
}

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

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

/* Any text on light backgrounds */
.bg-light *,
.bg-white * {
    color: var(--text-0724) !important;
}

.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4 {
    color: var(--white-0724) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-0724);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-0724);
}

/* Selection styling */
::selection {
    background: var(--cyan-glow-0724);
    color: var(--cyan-0724);
}

::-moz-selection {
    background: var(--cyan-glow-0724);
    color: var(--cyan-0724);
}

/* ══════════════════════════════════════════════
   FINAL NUCLEAR OVERRIDES - CATCH EVERYTHING
   ══════════════════════════════════════════════ */

/* Any white or light colored div */
div[style*="color: #333"],
div[style*="color:#333"],
div[style*="color: #000"],
div[style*="color:#000"] {
    color: var(--text-0724) !important;
}

/* Bootstrap panel defaults */
.panel-default {
    background: var(--surface-0724) !important;
    border-color: var(--border-0724) !important;
}

.panel-default > .panel-heading {
    background: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
}

/* Form groups and controls everywhere */
.form-group,
.input-group {
    background: transparent !important;
}

/* Any content area */
.content,
.main-content,
.page-content,
#content {
    background: transparent !important;
}

/* Shopping cart specific */
#order-standard_cart .panel,
#order-standard_cart .panel-body,
.standard_cart .panel,
.standard_cart .panel-body {
    background: var(--surface-0724) !important;
}

/* Configure product page */
#frmConfigureProduct,
#frmConfigureProduct .panel,
#frmConfigureProduct .panel-body {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* View cart */
.view-cart-items .panel,
.cart-sidebar .panel {
    background: var(--surface-0724) !important;
}

/* Product configurator */
#productConfigurableOptions,
#productConfigurableOptions * {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

#productConfigurableOptions h3,
#productConfigurableOptions h4 {
    color: var(--white-0724) !important;
}

/* Store pages */
#order-standard_cart,
#order-checkout {
    background: var(--bg) !important;
}

/* Product details panel */
.product-details,
.product-details .panel,
.product-details .panel-body {
    background: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

/* Override ANY remaining white */
* {
    /* Don't override inputs/buttons */
}

*:not(input):not(button):not(select):not(textarea)[style*="background:#fff"],
*:not(input):not(button):not(select):not(textarea)[style*="background: #fff"],
*:not(input):not(button):not(select):not(textarea)[style*="background:white"],
*:not(input):not(button):not(select):not(textarea)[style*="background: white"] {
    background: var(--surface-0724) !important;
}

/* Domain search specific elements */
.domain-checker-bg,
.domain-search-bg,
.tld-container {
    background: var(--surface-0724) !important;
}

/* Action buttons area */
.btn-container,
.button-container {
    background: transparent !important;
}

/* ══════════════════════════════════════════════
   SPECIFIC WHMCS SELECTORS - DIRECT OVERRIDES
   ══════════════════════════════════════════════ */

/* Product tiles in cart */
#order-standard_cart .products .product {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
    border-radius: var(--rounding-lg) !important;
}

#order-standard_cart .products .product header {
    background: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
    border-radius: var(--rounding-lg) var(--rounding-lg) 0 0 !important;
}

/* Domain search input wrapper on homepage */
.home-domain-search .input-group-wrapper {
    background-color: var(--surface-0724) !important;
    border: 2px solid var(--border-l-0724) !important;
    border-radius: var(--rounding-md) !important;
}

/* Domain selection options in cart */
#order-standard_cart .domain-selection-options .option {
    background-color: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text-0724) !important;
    border-radius: var(--rounding-md) !important;
}

/* Checkout review panes - cart items */
#order-standard_cart .view-cart-items .item {
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
    border: 1px solid var(--border-0724) !important;
}

/* View cart tabs - active tab */
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true] {
    border-color: var(--border-0724) var(--border-0724) var(--surface2-0724) !important;
    background-color: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
}

/* View cart tabs - content area */
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--surface2-0724) !important;
    color: var(--text-0724) !important;
}

/* Checkboxes - add visible border */
input[type="checkbox"],
input[type="radio"] {
    border: 2px solid var(--border-l-0724) !important;
    background-color: var(--surface-0724) !important;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--cyan-0724) !important;
    border-color: var(--cyan-0724) !important;
}

input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    color: var(--bg) !important;
    font-size: 14px;
    font-weight: bold;
    left: 2px;
    top: -2px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--bg) !important;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Checkbox/radio labels */
input[type="checkbox"] + label,
input[type="radio"] + label {
    color: var(--text-0724) !important;
    margin-left: 0.5rem;
}

/* Domain pricing table */
.domain-pricing table,
.domain-pricing-table,
.pricing-table,
table.pricing {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
}

.domain-pricing table thead,
.domain-pricing-table thead,
.pricing-table thead {
    background: var(--surface2-0724) !important;
}

.domain-pricing table thead th,
.domain-pricing-table thead th,
.pricing-table thead th {
    background: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
    border-color: var(--border-0724) !important;
}

.domain-pricing table tbody tr,
.domain-pricing-table tbody tr,
.pricing-table tbody tr {
    background: var(--surface-0724) !important;
    border-color: var(--border-0724) !important;
}

.domain-pricing table tbody tr:hover,
.domain-pricing-table tbody tr:hover,
.pricing-table tbody tr:hover {
    background: var(--surface2-0724) !important;
}

.domain-pricing table tbody td,
.domain-pricing-table tbody td,
.pricing-table tbody td {
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
    border-color: var(--border-0724) !important;
}

/* Domain pricing - specific WHMCS classes */
.tld-pricing,
.domain-tld-pricing {
    background: var(--surface-0724) !important;
}

.tld-row,
.domain-row {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
}

.tld-row:hover,
.domain-row:hover {
    background: var(--surface2-0724) !important;
}

/* Make sure all table elements are visible */
table {
    color: var(--text-0724) !important;
}

table th {
    color: var(--white-0724) !important;
}

table td {
    color: var(--text-0724) !important;
}

/* ══════════════════════════════════════════════
   ROUND 5 - FINAL SPECIFIC OVERRIDES
   ══════════════════════════════════════════════ */

/* btn-default in domain search dropdowns */
.btn-default {
    color: var(--text-0724) !important;
    background-color: var(--surface-0724) !important;
    border-color: var(--border-l-0724) !important;
}

.btn-default:hover,
.btn-default:focus {
    color: var(--cyan-0724) !important;
    background-color: var(--surface2-0724) !important;
    border-color: var(--cyan-0724) !important;
}

/* Domain pricing table headers - odd columns */
.domain-pricing .tld-pricing-header div:nth-child(odd) {
    border-color: var(--border-l-0724) !important;
    background-color: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
}

/* Domain pricing table headers - even columns */
.domain-pricing .tld-pricing-header div:nth-child(even) {
    border-color: var(--border-l-0724) !important;
    background-color: var(--surface-0724) !important;
    color: var(--white-0724) !important;
}

/* All domain pricing header elements */
.domain-pricing .tld-pricing-header div {
    color: var(--white-0724) !important;
    background-color: var(--surface2-0724) !important;
}

/* Domain pricing container */
.domain-pricing {
    background-color: var(--surface-0724) !important;
}

/* TLD pricing rows */
.tld-pricing-row,
.domain-pricing .row {
    background-color: var(--surface-0724) !important;
}

.tld-pricing-row:hover,
.domain-pricing .row:hover {
    background-color: var(--surface2-0724) !important;
}

/* All buttons in general - catch any remaining btn-default */
button.btn-default,
a.btn-default,
input.btn-default {
    color: var(--text-0724) !important;
    background-color: var(--surface-0724) !important;
    border-color: var(--border-l-0724) !important;
}

/* ══════════════════════════════════════════════
   TICKET SUBMISSION FORM FIXES
   ══════════════════════════════════════════════ */

/* Department and Priority dropdowns - selected item */
select option:checked,
select option[selected] {
    background-color: var(--cyan-0724) !important;
    color: var(--bg) !important;
    font-weight: 600;
}

/* All select options - better visibility */
select option {
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
    padding: 8px 12px !important;
}

select option:hover {
    background-color: var(--cyan-glow-0724) !important;
    color: var(--cyan-0724) !important;
}

/* Message textarea - TERMINAL STYLE! */
#inputMessage,
textarea#inputMessage,
.markdown-editor,
.mde-text,
textarea[name="message"] {
    background: var(--bg) !important;
    border: 2px solid var(--cyan-0724) !important;
    border-radius: var(--rounding-md) !important;
    color: var(--cyan-0724) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    padding: 1.5rem !important;
    min-height: 300px !important;
    box-shadow: inset 0 0 20px rgba(0,212,255,0.1), 0 0 40px rgba(0,212,255,0.05) !important;
    transition: all 0.3s ease;
}

#inputMessage:focus,
textarea#inputMessage:focus,
textarea[name="message"]:focus {
    background: var(--surface-0724) !important;
    border-color: var(--cyan-0724) !important;
    box-shadow: inset 0 0 20px rgba(0,212,255,0.15), 0 0 60px rgba(0,212,255,0.2) !important;
    color: var(--white-0724) !important;
    outline: none !important;
}

/* Markdown editor toolbar - WHMCS specific classes */
.md-editor .md-footer,
.md-editor > .md-header,
.md-editor .md-header,
.mde-header,
.markdown-toolbar {
    display: block !important;
    background: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    border-bottom: 2px solid var(--cyan-0724) !important;
    border-radius: var(--rounding-md) var(--rounding-md) 0 0 !important;
    padding: 0.75rem !important;
}

.md-editor > .btn-toolbar,
.btn-toolbar {
    background-color: var(--surface2-0724) !important;
    background: var(--surface2-0724) !important;
    border: none !important;
    padding: 0.5rem !important;
}

/* All toolbar buttons */
.md-editor .md-header button,
.md-editor .btn-toolbar button,
.md-editor button,
.mde-header button,
.markdown-toolbar button,
.btn-toolbar .btn {
    background: var(--surface-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text-0724) !important;
    border-radius: var(--rounding-sm) !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.25rem !important;
    transition: all 0.2s ease;
}

.md-editor .md-header button:hover,
.md-editor .btn-toolbar button:hover,
.mde-header button:hover,
.markdown-toolbar button:hover,
.btn-toolbar .btn:hover {
    background: var(--cyan-glow-0724) !important;
    border-color: var(--cyan-0724) !important;
    color: var(--cyan-0724) !important;
}

/* Markdown editor preview */
.mde-preview,
.markdown-preview {
    background: var(--surface-0724) !important;
    border: 2px solid var(--border-0724) !important;
    color: var(--text-0724) !important;
    padding: 1.5rem !important;
}

/* Ticket form sections */
.ticket-create-form,
#ticketSubmitForm,
form[name="submitticket"] {
    background: var(--surface-0724) !important;
    padding: 2rem !important;
    border-radius: var(--rounding-lg) !important;
}

/* Form groups in ticket submission */
.ticket-create-form .form-group,
#ticketSubmitForm .form-group {
    margin-bottom: 1.5rem;
}

.ticket-create-form .form-group label,
#ticketSubmitForm .form-group label {
    color: var(--white-0724) !important;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* File upload area */
.file-upload,
.attachments,
#fileUploadArea {
    background: var(--surface-0724) !important;
    border: 2px dashed var(--border-l-0724) !important;
    border-radius: var(--rounding-md) !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease;
}

.file-upload:hover,
.attachments:hover,
#fileUploadArea:hover {
    border-color: var(--cyan-0724) !important;
    background: var(--cyan-glow-0724) !important;
}

/* File upload button */
.file-upload button,
.attachments button,
input[type="file"] + button {
    background: var(--surface2-0724) !important;
    border: 1px solid var(--border-0724) !important;
    color: var(--text-0724) !important;
}

/* Submit ticket button */
button[type="submit"],
.btn-submit-ticket {
    background: linear-gradient(135deg, var(--cyan-0724), var(--cyan-dim-0724)) !important;
    border: none !important;
    color: var(--bg) !important;
    padding: 1rem 2rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border-radius: var(--rounding-md) !important;
    box-shadow: 0 4px 12px rgba(0,212,255,0.3) !important;
    transition: all 0.3s ease !important;
}

button[type="submit"]:hover,
.btn-submit-ticket:hover {
    background: linear-gradient(135deg, #33dcff, var(--cyan-0724)) !important;
    box-shadow: 0 6px 20px rgba(0,212,255,0.4) !important;
    transform: translateY(-2px);
}

/* Terminal-style placeholder */
#inputMessage::placeholder,
textarea[name="message"]::placeholder {
    color: rgba(0,212,255,0.4) !important;
    font-style: italic;
}

/* Add terminal-like line numbers effect (optional) */
#inputMessage,
textarea[name="message"] {
    background-image: linear-gradient(
        transparent 0%,
        transparent calc(1.6em - 1px),
        rgba(0,212,255,0.05) calc(1.6em - 1px),
        rgba(0,212,255,0.05) 1.6em
    );
    background-size: 100% 1.6em;
    background-position: 0 0.2em;
}

/* Text editor container */
.text-editor,
.markdown-editor-container,
.md-editor,
div[id*="editor"] {
    background: var(--bg) !important;
    border: 2px solid var(--cyan-0724) !important;
    border-radius: var(--rounding-lg) !important;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,212,255,0.15) !important;
}

/* Ensure all md-editor internal parts are dark */
.md-editor * {
    border-color: var(--border-0724) !important;
}

.md-editor textarea,
.md-editor .md-input {
    background: var(--bg) !important;
    color: var(--cyan-0724) !important;
    font-family: var(--font-mono) !important;
}
select[name="currency"], select[name="tld"], select[name="billingcycle"] {
    min-width: 150px !important;
    max-width: 300px !important;
}
/* Priority and Department select specific */
select#inputDepartment,
select#inputPriority,
select[name="deptid"],
select[name="currency"], 
select[name="tld"], 
select[name="billingcycle"],
select[name="urgency"] {
    background: var(--surface-0724) !important;
    border: 2px solid var(--border-l-0724) !important;
    color: var(--text-0724) !important;
    padding: 0.25rem 2rem 0.25rem 0.75rem !important;
}

/* Make selected options more visible */
select#inputDepartment option:checked,
select#inputPriority option:checked {
    background: var(--cyan-0724) !important;
    color: var(--bg) !important;
}

/* ══════════════════════════════════════════════
   NUCLEAR TABLE BACKGROUND FIXES
   ══════════════════════════════════════════════ */

/* Catch ALL table elements with white backgrounds */
table:not(.calendar) {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
}

table:not(.calendar) thead,
table:not(.calendar) thead tr,
table:not(.calendar) thead th {
    background: var(--surface2-0724) !important;
    background-color: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
}

table:not(.calendar) tbody,
table:not(.calendar) tbody tr,
table:not(.calendar) tbody td {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

table:not(.calendar) tbody tr:nth-child(even),
table:not(.calendar) tbody tr:nth-child(even) td {
    background: var(--surface2-0724) !important;
    background-color: var(--surface2-0724) !important;
}

table:not(.calendar) tbody tr:hover,
table:not(.calendar) tbody tr:hover td {
    background: var(--cyan-glow-0724) !important;
    background-color: var(--cyan-glow-0724) !important;
}

/* DataTables specific */
.dataTables_wrapper,
.dataTable,
.dataTable thead th,
.dataTable tbody td {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

.dataTable thead th {
    background: var(--surface2-0724) !important;
    background-color: var(--surface2-0724) !important;
    color: var(--white-0724) !important;
}

/* Domain pricing extensions table */
.domain-extensions,
.tld-container,
.pricing-container {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
}

.domain-extensions table,
.tld-container table,
.pricing-container table {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
}

.domain-extensions table tbody td,
.tld-container table tbody td,
.pricing-container table tbody td {
    background: var(--surface-0724) !important;
    background-color: var(--surface-0724) !important;
    color: var(--text-0724) !important;
}

.domain-extensions table tbody tr:nth-child(even) td,
.tld-container table tbody tr:nth-child(even) td,
.pricing-container table tbody tr:nth-child(even) td {
    background: var(--surface2-0724) !important;
    background-color: var(--surface2-0724) !important;
}