/*!
 * Sucura Networks Custom Theme
 * Matching the main website design (index.html)
 * Colors: Black background (#000, #0a0a0a) with green accent (#00ff88)
 */

/* ===========================
   CSS VARIABLES OVERRIDE
   =========================== */
:root {
    /* Primary Brand Colors */
    --primary: #00ff88 !important;
    --secondary: #00cc6a !important;
    --success: #00ff88 !important;
    --info: #17a2b8 !important;
    --warning: #ffc107 !important;
    --danger: #ff4444 !important;
    --light: #1a1a1a !important;
    --dark: #0a0a0a !important;
    
    /* Background Colors */
    --body-bg: #000000 !important;
    --card-bg: #0a0a0a !important;
    
    /* Text Colors */
    --text-primary: #ffffff !important;
    --text-secondary: #aaaaaa !important;
    --text-muted: #666666 !important;
    
    /* Border Colors */
    --border-color: rgba(0, 255, 136, 0.2) !important;
    --border-color-hover: rgba(0, 255, 136, 0.3) !important;
    
    /* Accent Colors */
    --accent-green: #00ff88;
    --accent-green-dark: #00cc6a;
    --accent-red: #ff4444;
    --accent-red-dark: #cc0000;
}

/* ===========================
   GLOBAL BODY STYLING
   =========================== */
html {
    background: #000000 !important;
}

body {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #000000 100%) !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    position: relative;
    min-height: 100vh;
}

/* Override Bootstrap's body defaults completely */
body.primary-bg-color {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #000000 100%) !important;
    background-attachment: fixed !important;
    background-color: #000000 !important;
}

/* Specific overrides for common white background classes */
.container,
.container-fluid,
.row,
.col,
[class*="col-"],
.content,
.main-content,
.page-content,
main,
section,
article,
aside,
nav:not(.navbar) {
    background-color: transparent !important;
    background: transparent !important;
}

/* Subtle gradient overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 136, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.01) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Grid pattern overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

/* ===========================
   HEADER & NAVIGATION
   =========================== */
#header,
.header {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
    position: sticky !important;
    top: 0;
    z-index: 1000;
}

.header.scrolled {
    background: rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3) !important;
}

/* Top bar (notifications area) */
.topbar {
    background: rgba(0, 0, 0, 0.8) !important;
    border-bottom: 1px solid #1a1a1a !important;
}

.topbar .btn {
    color: #aaa !important;
    transition: color 0.3s ease;
}

.topbar .btn:hover {
    color: #00ff88 !important;
    background: transparent !important;
}

/* Navigation */
.navbar,
.navbar-default {
    background: transparent !important;
    border: none !important;
}

.navbar-brand {
    color: #00ff88 !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.navbar-brand:hover {
    color: #00ffaa !important;
}

.nav-link,
.navbar-nav .nav-link,
.nav-item > a {
    color: #ccc !important;
    transition: all 0.3s ease !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover,
.nav-item > a:hover {
    color: #00ff88 !important;
    background: transparent !important;
}

.nav-link.active,
.navbar-nav .nav-link.active {
    color: #00ff88 !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-top: 2px solid #00ff88 !important;
    backdrop-filter: blur(10px);
}

.dropdown-item {
    color: #ccc !important;
    background: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

/* ===========================
   BUTTONS
   =========================== */
.btn-primary {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #00ffaa 0%, #00dd7a 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3) !important;
    color: #000 !important;
}

.btn-secondary,
.btn-outline-primary {
    background: transparent !important;
    color: #00ff88 !important;
    border: 2px solid #00ff88 !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
    background: rgba(0, 255, 136, 0.1) !important;
    transform: translateY(-2px);
    color: #00ff88 !important;
    border-color: #00ff88 !important;
}

.btn-success {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    border: none !important;
    color: #000 !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%) !important;
    border: none !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #ff5555 0%, #dd0000 100%) !important;
    box-shadow: 0 10px 30px rgba(255, 68, 68, 0.3) !important;
}

.btn-light {
    background: #1a1a1a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ccc !important;
}

.btn-light:hover {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
}

.btn-default,
.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ccc !important;
}

.btn-default:hover,
.btn-outline-secondary:hover {
    background: #1a1a1a !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
}

/* ===========================
   CARDS & PANELS - ULTRA AGGRESSIVE
   =========================== */
/* Target ALL cards with maximum specificity */
.card,
.card.mb-1,
.card.mb-2,
.card.mb-3,
.card.mb-4,
.card.mb-5,
div.card,
section.card,
article.card,
.panel,
.panel-default,
div.panel,
section.panel,
*[class^="card "],
*[class*=" card "],
*[class^="card-"],
.card-default,
.card-primary,
.card-secondary {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Force card backgrounds even if nested */
.card .card,
.card > div,
.panel .panel,
.panel > div {
    background: #0a0a0a !important;
}

/* Hover effects */
.card:hover,
.panel:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.1) !important;
}

/* Card headers */
.card-header,
.card-title,
.panel-heading,
header.card-header,
div.card-header {
    background: rgba(0, 255, 136, 0.05) !important;
    background-color: rgba(0, 255, 136, 0.05) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Card bodies */
.card-body,
.panel-body,
div.card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: #aaa !important;
}

/* Card footers */
.card-footer,
.panel-footer,
footer.card-footer,
div.card-footer {
    background: rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #aaa !important;
}

/* Card text elements */
.card-text,
.card p {
    color: #aaa !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
    color: #ffffff !important;
}

/* Card subtitles */
.card-subtitle {
    color: #999 !important;
}

/* Override any Bootstrap card variants */
.card-outline-primary,
.card-outline-secondary,
.card-outline-success,
.card-outline-info,
.card-outline-warning,
.card-outline-danger {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* ===========================
   FORMS & INPUTS - ULTRA AGGRESSIVE
   =========================== */
html body .form-control,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="search"],
html body select,
html body select.form-control,
html body textarea,
html body textarea.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease;
}

html body .form-control:focus,
html body input:focus,
html body select:focus,
html body textarea:focus {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-color: #00ff88 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 136, 0.25) !important;
    color: #ffffff !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #666 !important;
}

.form-label,
label {
    color: #aaa !important;
    font-weight: 500;
}

.input-group-text {
    background: rgba(0, 255, 136, 0.1) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
}

/* ===========================
   TABLES
   =========================== */
.table,
.table-responsive table {
    color: #ffffff !important;
    background: transparent !important;
}

.table thead th {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
    font-weight: 600;
}

.table tbody tr {
    border-bottom: 1px solid #1a1a1a !important;
    transition: all 0.3s ease;
}

.table tbody tr:hover {
    background: rgba(0, 255, 136, 0.05) !important;
}

.table td,
.table th {
    border-color: #1a1a1a !important;
    color: #aaa !important;
    padding: 16px !important;
}

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

/* ===========================
   ALERTS & NOTIFICATIONS
   =========================== */
.alert {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.alert-success {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
}

.alert-danger,
.alert-error {
    background: rgba(255, 68, 68, 0.1) !important;
    border-color: rgba(255, 68, 68, 0.3) !important;
    color: #ff4444 !important;
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #ffc107 !important;
}

.alert-info {
    background: rgba(23, 162, 184, 0.1) !important;
    border-color: rgba(23, 162, 184, 0.3) !important;
    color: #17a2b8 !important;
}

/* Client Alerts in Topbar */
.client-alerts li a {
    color: #aaa !important;
    transition: all 0.3s ease;
}

.client-alerts li a:hover {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

/* ===========================
   BADGES & LABELS
   =========================== */
.badge,
.label {
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 600;
}

.badge-primary,
.label-primary {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    color: #000 !important;
}

.badge-success,
.label-success {
    background: #00ff88 !important;
    color: #000 !important;
}

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

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

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

.badge-secondary,
.label-secondary {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #aaa !important;
}

/* Status badges */
.label-active,
.badge-active {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    color: #000 !important;
}

.label-pending,
.badge-pending {
    background: #ffc107 !important;
    color: #000 !important;
}

.label-suspended,
.badge-suspended,
.label-cancelled,
.badge-cancelled {
    background: #ff4444 !important;
    color: #fff !important;
}

/* ===========================
   MODALS & POPOVERS
   =========================== */
.modal-content {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border: 2px solid rgba(0, 255, 136, 0.3) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
}

.modal-header {
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
    background: rgba(0, 255, 136, 0.05) !important;
}

.modal-title {
    color: #ffffff !important;
    font-weight: 700;
}

.modal-body {
    color: #aaa !important;
}

.modal-footer {
    border-top: 1px solid rgba(0, 255, 136, 0.2) !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

.close,
.btn-close {
    color: #aaa !important;
    opacity: 0.8;
}

.close:hover,
.btn-close:hover {
    color: #ff4444 !important;
    opacity: 1;
}

.popover {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
}

.popover-header {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.popover-body {
    color: #aaa !important;
}

/* ===========================
   PROGRESS BARS
   =========================== */
.progress {
    background: #1a1a1a !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
}

/* ===========================
   BREADCRUMBS & PAGINATION
   =========================== */
.breadcrumb {
    background: transparent !important;
    color: #aaa !important;
}

.breadcrumb-item a {
    color: #00ff88 !important;
}

.breadcrumb-item.active {
    color: #aaa !important;
}

.pagination .page-link {
    background: #1a1a1a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #aaa !important;
}

.pagination .page-link:hover {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    border-color: #00ff88 !important;
    color: #000 !important;
}

/* ===========================
   FOOTER
   =========================== */
.footer,
footer {
    background: #0a0a0a !important;
    border-top: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #aaa !important;
    margin-top: 80px;
}

.footer a {
    color: #aaa !important;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #00ff88 !important;
}

.footer h3,
.footer h4 {
    color: #00ff88 !important;
}

/* ===========================
   SIDEBARS & CONTAINERS
   =========================== */
.sidebar {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
    padding: 20px !important;
}

.sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #1a1a1a !important;
    color: #aaa !important;
    transition: all 0.3s ease;
}

.sidebar .list-group-item:hover,
.sidebar .list-group-item.active {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

.container,
.container-fluid {
    position: relative;
    z-index: 1;
}

/* ===========================
   LINKS
   =========================== */
a {
    color: #00ff88 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #00ffaa !important;
    text-decoration: none;
}

/* ===========================
   TEXT UTILITIES
   =========================== */
.text-primary {
    color: #00ff88 !important;
}

.text-success {
    color: #00ff88 !important;
}

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

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

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

.text-muted {
    color: #666 !important;
}

.text-light {
    color: #aaa !important;
}

.text-dark {
    color: #ffffff !important;
}

/* ===========================
   BACKGROUND UTILITIES
   =========================== */
.bg-primary {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
}

.bg-success {
    background: #00ff88 !important;
}

.bg-danger {
    background: #ff4444 !important;
}

.bg-light {
    background: #1a1a1a !important;
}

.bg-dark {
    background: #0a0a0a !important;
}

.primary-bg-color {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #000000 100%) !important;
}

/* ===========================
   INVOICE & QUOTE SPECIFIC
   =========================== */
.invoice-header,
.quote-header {
    background: rgba(0, 255, 136, 0.05) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
}

.invoice-total,
.quote-total {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
    font-weight: 700;
}

/* ===========================
   TABS
   =========================== */
.nav-tabs {
    border-bottom: 2px solid rgba(0, 255, 136, 0.2) !important;
}

.nav-tabs .nav-link {
    border: none !important;
    color: #aaa !important;
    background: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: #00ff88 !important;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3) !important;
}

.nav-tabs .nav-link.active {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
    border-bottom: 2px solid #00ff88 !important;
}

/* ===========================
   CHECKBOXES & RADIO BUTTONS
   =========================== */
.custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    border-color: #00ff88 !important;
}

.form-check-input:checked {
    background-color: #00ff88 !important;
    border-color: #00ff88 !important;
}

/* ===========================
   PRODUCT/SERVICE CARDS
   =========================== */
.product-card,
.service-card,
.domain-card {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
    transition: all 0.3s ease;
}

.product-card:hover,
.service-card:hover,
.domain-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15) !important;
}

/* ===========================
   PRICING TABLES
   =========================== */
.pricing-table {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 20px !important;
}

.pricing-header {
    background: rgba(0, 255, 136, 0.1) !important;
    border-bottom: 2px solid #00ff88 !important;
}

.pricing-price {
    color: #00ff88 !important;
    font-weight: 900;
    font-size: 2.5rem;
}

/* Featured pricing */
.pricing-table.featured {
    border: 2px solid #00ff88 !important;
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.2) !important;
}

/* ===========================
   TICKET SYSTEM
   =========================== */
.ticket-status {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
}

.ticket-status.open {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
}

.ticket-status.answered {
    background: rgba(23, 162, 184, 0.2) !important;
    color: #17a2b8 !important;
}

.ticket-status.closed {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #aaa !important;
}

/* ===========================
   KNOWLEDGE BASE
   =========================== */
.kb-category {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
    padding: 30px;
    transition: all 0.3s ease;
}

.kb-category:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 136, 0.3) !important;
}

/* ===========================
   LOADING & SPINNERS
   =========================== */
.spinner-border,
.spinner-grow {
    border-color: rgba(0, 255, 136, 0.3) !important;
    border-right-color: #00ff88 !important;
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */
@media (max-width: 768px) {
    .card,
    .panel {
        border-radius: 12px !important;
    }
    
    .btn-primary,
    .btn-secondary {
        border-radius: 20px !important;
        padding: 10px 24px !important;
    }
}

/* ===========================
   CUSTOM SCROLLBAR
   =========================== */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #00ffaa 0%, #00dd7a 100%);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #00ff88 rgba(0, 0, 0, 0.5);
}

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes glow {
    from { 
        filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.5)); 
    }
    to { 
        filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.8)); 
    }
}

.glow-effect {
    animation: glow 3s ease-in-out infinite alternate;
}

/* Fade in animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   SPECIAL HIGHLIGHTS
   =========================== */
.ddos-badge,
.featured-badge {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 800;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
    }
    50% { 
        box-shadow: 0 0 45px rgba(255, 0, 0, 0.7), 0 0 60px rgba(255, 0, 0, 0.3);
    }
}

/* ===========================
   LOGIN & REGISTER PAGES
   =========================== */
.logincontainer,
.login-container {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(10px);
}

/* ===========================
   MISC OVERRIDES
   =========================== */
hr {
    border-color: rgba(0, 255, 136, 0.2) !important;
}

code,
pre {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #00ff88 !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.well {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

/* Ensure all content is above the background patterns */
.content-container,
main,
section {
    position: relative;
    z-index: 1;
}

/* ===========================
   TILES (Homepage Stats)
   =========================== */
.tiles .tile {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tiles .tile:hover {
    background: #1a1a1a !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15) !important;
}

.tiles .tile .stat {
    color: #00ff88 !important;
    font-weight: 900;
}

.tiles .tile .title {
    color: #aaa !important;
}

.tiles .tile i {
    color: #00ff88 !important;
}

.tiles .tile .highlight {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 136, 0.1)) !important;
}

/* ===========================
   ACTION ICON BUTTONS (Homepage)
   =========================== */
.action-icon-btns a {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
    color: #ffffff !important;
    padding: 30px 20px !important;
    text-align: center !important;
    display: block !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.action-icon-btns a:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15) !important;
}

.action-icon-btns .ico-container {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
    margin: 0 auto 15px !important;
    border-radius: 50%;
}

.action-icon-btns i {
    color: #00ff88 !important;
}

/* Card accent colors for homepage */
.card-accent-teal,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-asbestos,
.card-accent-green,
.card-accent-midnight-blue {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.card-accent-teal:hover,
.card-accent-pomegranate:hover,
.card-accent-sun-flower:hover,
.card-accent-asbestos:hover,
.card-accent-green:hover,
.card-accent-midnight-blue:hover {
    border-color: rgba(0, 255, 136, 0.3) !important;
}

/* ===========================
   LIST GROUPS
   =========================== */
.list-group {
    background: transparent !important;
}

.list-group-item {
    background: #0a0a0a !important;
    border: 1px solid #1a1a1a !important;
    color: #aaa !important;
    transition: all 0.3s ease;
}

.list-group-item:hover,
.list-group-item:focus {
    background: rgba(0, 255, 136, 0.05) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
}

.list-group-item.active {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
}

.list-group-item-action {
    color: #aaa !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background: rgba(0, 255, 136, 0.05) !important;
    color: #00ff88 !important;
}

/* ===========================
   BREADCRUMBS
   =========================== */
.master-breadcrumb {
    background: rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid #1a1a1a !important;
}

.breadcrumb {
    background: transparent !important;
    margin-bottom: 0 !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #aaa !important;
}

.breadcrumb-item.active {
    color: #00ff88 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #666 !important;
}

/* ===========================
   SEARCH FORMS
   =========================== */
.search .form-control,
.search input {
    background: #1a1a1a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ffffff !important;
}

.search .btn-default {
    background: rgba(0, 255, 136, 0.1) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
}

.search .btn-default:hover {
    background: rgba(0, 255, 136, 0.2) !important;
}

/* ===========================
   NAVBAR SPECIFIC
   =========================== */
.navbar-light {
    background: transparent !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #aaa !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #00ff88 !important;
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
    color: #00ff88 !important;
}

.cart-btn {
    position: relative;
    color: #aaa !important;
}

.cart-btn:hover {
    color: #00ff88 !important;
}

.cart-btn .badge {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    color: #000 !important;
}

/* ===========================
   TOOLBAR & TOP BAR
   =========================== */
.toolbar .nav-link {
    color: #aaa !important;
}

.toolbar .nav-link:hover {
    color: #00ff88 !important;
}

.input-group-text {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #aaa !important;
}

.btn-active-client {
    background: rgba(0, 255, 136, 0.1) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
}

.btn-active-client:hover {
    background: rgba(0, 255, 136, 0.15) !important;
}

.btn-return-to-admin {
    background: rgba(255, 68, 68, 0.1) !important;
    border: 1px solid rgba(255, 68, 68, 0.3) !important;
    color: #ff4444 !important;
}

.btn-return-to-admin:hover {
    background: rgba(255, 68, 68, 0.15) !important;
}

/* ===========================
   CARD ACCENTS & HIGHLIGHTS
   =========================== */
.card-accent-blue,
.bg-color-blue {
    background: rgba(0, 255, 136, 0.1) !important;
    border-left: 4px solid #00ff88 !important;
}

.card-accent-green,
.bg-color-green {
    background: rgba(0, 255, 136, 0.15) !important;
    border-left: 4px solid #00ff88 !important;
}

.card-accent-red,
.bg-color-red {
    background: rgba(255, 68, 68, 0.1) !important;
    border-left: 4px solid #ff4444 !important;
}

.card-accent-gold,
.bg-color-gold {
    background: rgba(255, 193, 7, 0.1) !important;
    border-left: 4px solid #ffc107 !important;
}

.card-accent-teal {
    background: rgba(0, 255, 136, 0.05) !important;
}

.card-accent-pomegranate {
    background: rgba(255, 68, 68, 0.05) !important;
}

.card-accent-sun-flower {
    background: rgba(255, 193, 7, 0.05) !important;
}

.card-accent-asbestos {
    background: #1a1a1a !important;
}

.card-accent-midnight-blue {
    background: rgba(0, 255, 136, 0.05) !important;
}

/* ===========================
   JUMBOTRON & HERO SECTIONS
   =========================== */
.jumbotron {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3 {
    color: #ffffff !important;
}

.jumbotron p {
    color: #aaa !important;
}

/* ===========================
   DOMAIN CHECKER
   =========================== */
.domain-checker-container,
.domain-checker-bg,
.home-domain-search,
.home-domain-search.bg-white,
.domain-search,
.domain-search-box,
.domain-checker {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.domain-input-group .form-control {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Domain search specific elements */
.home-domain-search input,
.domain-search input,
.domain-checker input {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.home-domain-search .btn,
.domain-search .btn,
.domain-checker .btn {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    border: none !important;
    color: #000 !important;
}

.home-domain-search .input-group,
.domain-search .input-group,
.domain-checker .input-group {
    background: transparent !important;
}

/* ===========================
   PRICING CARDS
   =========================== */
.pricing-card {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 20px !important;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 15px 40px rgba(0, 255, 136, 0.2) !important;
}

.pricing-card-title {
    color: #ffffff !important;
    font-weight: 700;
}

.pricing-card.featured {
    border: 2px solid #00ff88 !important;
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.2) !important;
}

/* ===========================
   PRODUCT CARDS
   =========================== */
.product-card,
.products .card {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ffffff !important;
}

.product-card:hover,
.products .card:hover {
    border-color: rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15) !important;
}

/* ===========================
   CART & CHECKOUT
   =========================== */
.view-cart-items,
.cart-sidebar {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.order-summary {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
}

.order-summary .summary-row {
    color: #aaa !important;
    border-bottom: 1px solid #1a1a1a !important;
}

.order-summary .total {
    color: #00ff88 !important;
    font-weight: 700;
}

/* ===========================
   TICKET SYSTEM DETAILS
   =========================== */
.ticket-thread {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.ticket-reply {
    background: rgba(20, 20, 20, 1) !important;
    border-left: 3px solid rgba(0, 255, 136, 0.3) !important;
}

.ticket-reply.staff {
    border-left-color: rgba(23, 162, 184, 0.5) !important;
}

/* ===========================
   PANEL COLORS
   =========================== */
.panel-primary {
    border-color: rgba(0, 255, 136, 0.3) !important;
}

.panel-primary > .panel-heading {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
}

.panel-success > .panel-heading {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

.panel-danger > .panel-heading {
    background: rgba(255, 68, 68, 0.1) !important;
    color: #ff4444 !important;
}

.panel-warning > .panel-heading {
    background: rgba(255, 193, 7, 0.1) !important;
    color: #ffc107 !important;
}

.panel-info > .panel-heading {
    background: rgba(23, 162, 184, 0.1) !important;
    color: #17a2b8 !important;
}

/* ===========================
   CLIENT HOME CARDS
   =========================== */
.client-home-cards .card {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.client-home-cards .card-header {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.client-home-cards .card-title {
    color: #ffffff !important;
}

/* ===========================
   CARD COLUMNS (Homepage)
   =========================== */
.card-columns.home .card,
.card-columns .card,
.home-banner,
.home-shortcuts,
.home-panels,
.provisioningmodule,
.clienthomepanels {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
}

.card-columns.home .card:hover,
.card-columns .card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15) !important;
}

/* Home page specific sections */
.home-section,
.home-content,
.homepage-content,
[class*="home-"],
[class*="homepage-"] {
    background: transparent !important;
}

.home-section.bg-white,
.home-content.bg-white,
.homepage-content.bg-white {
    background: #0a0a0a !important;
}

/* ===========================
   FLASH MESSAGES
   =========================== */
.alert-flash {
    border-radius: 12px !important;
}

.successbox,
.infobox,
.errorbox {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.successbox {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

.errorbox {
    background: rgba(255, 68, 68, 0.1) !important;
    color: #ff4444 !important;
}

.infobox {
    background: rgba(23, 162, 184, 0.1) !important;
    color: #17a2b8 !important;
}

/* ===========================
   SELECT DROPDOWNS
   =========================== */
select.form-control,
.form-select {
    background: #1a1a1a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ff88' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

select.form-control option {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* ===========================
   LOGO IMAGE
   =========================== */
.logo-img {
    max-height: 60px;
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.3));
}

/* ===========================
   WHITESPACE KILLERS
   =========================== */
/* Kill all white/light backgrounds */
.bg-white,
.bg-light-bg,
.light-bg {
    background: #0a0a0a !important;
}

/* Kill white text */
.white-text {
    color: #ffffff !important;
}

/* Container backgrounds */
.container,
.container-fluid {
    background: transparent !important;
}

/* Sections */
section {
    background: transparent !important;
}

/* ===========================
   WHMCS SPECIFIC OVERRIDES
   =========================== */
.whmcs-main-content {
    background: transparent !important;
}

.content-area {
    background: transparent !important;
}

/* Override any remaining white backgrounds */
div[style*="background: #fff"],
div[style*="background-color: #fff"],
div[style*="background: white"],
div[style*="background-color: white"] {
    background: #0a0a0a !important;
}

/* ===========================
   INVOICE SPECIFIC
   =========================== */
.invoice-html {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

.invoice-html .invoice-title {
    color: #00ff88 !important;
}

.invoice-html table {
    color: #aaa !important;
}

.invoice-html table th {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

/* ===========================
   QUOTE SPECIFIC
   =========================== */
.quote-html {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* ===========================
   DATA TABLES
   =========================== */
.dataTables_wrapper {
    color: #aaa !important;
}

.dataTables_wrapper .dataTables_info {
    color: #aaa !important;
}

.dataTables_wrapper .dataTables_paginate {
    color: #aaa !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: #1a1a1a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #ffffff !important;
}

/* ===========================
   COLLAPSE / ACCORDION
   =========================== */
.collapse-header,
.accordion-header {
    background: #0a0a0a !important;
    color: #00ff88 !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.collapse-body,
.accordion-body {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #1a1a1a !important;
}

/* ===========================
   FORCE DARK MODE ON EVERYTHING
   =========================== */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

p {
    color: #aaa !important;
}

small,
.small {
    color: #666 !important;
}

/* Force all elements with white/light backgrounds to dark */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:white"],
[style*="background-color: white"],
[class*="bg-white"],
[class*="background-white"] {
    background: #0a0a0a !important;
}

/* Additional specific overrides */
.main-content,
.main-body,
.content-wrapper,
main {
    background: transparent !important;
}

/* Tables - extra coverage */
.table-responsive {
    background: transparent !important;
}

/* Wells and info boxes */
.well,
.info-box,
.message-box {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    color: #aaa !important;
}

/* Any div with explicit white background */
div[class*="white"],
div[class*="light"] {
    background: #0a0a0a !important;
}

/* Text colors for specific elements */
span,
div,
td,
th {
    color: inherit !important;
}

/* Ensure labels are visible */
label,
.label-text,
.form-label,
legend {
    color: #aaa !important;
}

/* Strong and bold text */
strong,
b {
    color: #ffffff !important;
}

/* Links default color already set, but emphasize */
a.text-dark,
a.text-muted {
    color: #00ff88 !important;
}

/* Help text */
.help-block,
.form-text,
.text-help {
    color: #666 !important;
}

/* ===========================
   ORDER FORMS & CART
   =========================== */
.order-form,
.orderform,
.cart-container {
    background: transparent !important;
}

.product-selection,
.product-options,
.configuration-options {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

/* Configuration steps */
.steps-progress,
.checkout-steps {
    background: rgba(0, 0, 0, 0.5) !important;
}

.step {
    background: #1a1a1a !important;
    color: #aaa !important;
}

.step.active {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

.step.completed {
    background: rgba(0, 255, 136, 0.05) !important;
    color: #00ff88 !important;
}

/* ===========================
   DOMAIN MANAGEMENT
   =========================== */
.domain-table,
.domain-management {
    background: transparent !important;
}

.domain-row {
    background: #0a0a0a !important;
    border-bottom: 1px solid #1a1a1a !important;
}

.domain-row:hover {
    background: rgba(0, 255, 136, 0.05) !important;
}

/* ===========================
   SERVICE/PRODUCT DETAILS
   =========================== */
.product-details,
.service-details {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
}

.product-status,
.service-status {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
}

.status-active {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
}

.status-pending {
    background: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
}

.status-suspended,
.status-cancelled {
    background: rgba(255, 68, 68, 0.2) !important;
    color: #ff4444 !important;
}

/* ===========================
   BOOTSTRAP OVERRIDES
   =========================== */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.form-row {
    background: transparent !important;
}

.form-group {
    background: transparent !important;
}

/* Bootstrap utility classes - AGGRESSIVE */
.bg-white,
.bg-white.card,
.bg-white.panel,
div.bg-white,
section.bg-white,
.bg-white > *,
*[class*="bg-white"] {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

.bg-light,
.bg-light.card,
.bg-light.panel,
div.bg-light,
section.bg-light {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

.text-white {
    color: #ffffff !important;
}

.text-black {
    color: #ffffff !important;
}

.border {
    border-color: rgba(0, 255, 136, 0.2) !important;
}

.border-light {
    border-color: #1a1a1a !important;
}

/* ===========================
   PAYMENT METHOD FORMS
   =========================== */
.payment-methods {
    background: transparent !important;
}

.payment-method {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

.payment-method:hover,
.payment-method.selected {
    border-color: rgba(0, 255, 136, 0.3) !important;
    background: rgba(0, 255, 136, 0.05) !important;
}

/* Credit card form */
.cc-form {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

/* ===========================
   ANNOUNCEMENTS & NEWS
   =========================== */
.announcement,
.news-item {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-left: 3px solid rgba(0, 255, 136, 0.5) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.announcement:hover,
.news-item:hover {
    border-left-color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.03) !important;
}

.announcement-title,
.news-title {
    color: #ffffff !important;
    font-weight: 600;
}

.announcement-date,
.news-date {
    color: #666 !important;
}

/* ===========================
   NETWORK STATUS / SERVER STATUS
   =========================== */
.server-status-container {
    background: transparent !important;
}

.server-group {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

.server-item {
    background: #0a0a0a !important;
    border-bottom: 1px solid #1a1a1a !important;
    padding: 15px !important;
}

.server-item:hover {
    background: rgba(0, 255, 136, 0.03) !important;
}

.status-online {
    color: #00ff88 !important;
}

.status-offline {
    color: #ff4444 !important;
}

/* ===========================
   AFFILIATES PAGE
   =========================== */
.affiliate-dashboard {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
}

.affiliate-stats {
    background: rgba(0, 255, 136, 0.05) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

/* ===========================
   DOWNLOADS PAGE
   =========================== */
.download-item {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease;
}

.download-item:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
    transform: translateX(5px);
}

/* ===========================
   MISCELLANEOUS ELEMENTS
   =========================== */
.alert-light {
    background: #1a1a1a !important;
    color: #aaa !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
}

.tooltip {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
}

.tooltip-inner {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #00ff88 !important;
}

.toast {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: #ffffff !important;
}

/* Empty states */
.empty-state,
.no-results {
    background: #0a0a0a !important;
    border: 1px dashed rgba(0, 255, 136, 0.2) !important;
    border-radius: 15px !important;
    padding: 40px !important;
    text-align: center;
    color: #666 !important;
}

/* Loading states */
.loading,
.spinner {
    color: #00ff88 !important;
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */
@media (max-width: 768px) {
    .navbar {
        background: rgba(0, 0, 0, 0.95) !important;
    }
    
    .navbar-collapse {
        background: rgba(0, 0, 0, 0.95) !important;
        border: 1px solid rgba(0, 255, 136, 0.2) !important;
        border-radius: 10px !important;
        margin-top: 10px;
        padding: 15px !important;
    }
}

/* ===========================
   NUCLEAR OPTION - CATCH ALL REMAINING WHITE
   =========================== */

/* Kill any remaining white/light backgrounds in wrappers */
#page,
#wrapper,
#main,
#main-wrapper,
#content-wrapper,
#primary,
#primary-content,
.wrapper,
.page-wrapper,
.content-wrapper,
.main-wrapper,
.site-content,
.site-main,
#site-content,
#main-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Bootstrap grid system */
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    background: transparent !important;
}

/* Any divs with specific grid classes */
div[class^="col-"],
div[class*=" col-"] {
    background: transparent !important;
}

/* Form containers */
.form-container,
.form-wrapper,
fieldset {
    background: transparent !important;
}

/* Any remaining panels/boxes */
.box,
.box-content,
.panel-white,
.white-box,
.content-box {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

/* Text containers */
.text-container,
.text-content,
.content-area {
    background: transparent !important;
}

/* Override any inline styles that might set white background */
div[style*="background-color: rgb(255, 255, 255)"],
div[style*="background-color:rgb(255,255,255)"],
div[style*="background: rgb(255, 255, 255)"],
div[style*="background:rgb(255,255,255)"] {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Any element with background-color set to white hex */
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#FFF"],
[style*="background-color: #FFF"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:#FFFFFF"],
[style*="background-color: #FFFFFF"] {
    background-color: #0a0a0a !important;
}

/* Light gray backgrounds that look white */
[style*="background-color:#f8f9fa"],
[style*="background-color: #f8f9fa"],
[style*="background-color:#f5f5f5"],
[style*="background-color: #f5f5f5"],
[style*="background-color:#fafafa"],
[style*="background-color: #fafafa"],
[style*="background-color:#fcfcfc"],
[style*="background-color: #fcfcfc"] {
    background-color: #0a0a0a !important;
}

/* Table cells that might have white backgrounds */
table {
    background: transparent !important;
}

table tbody,
table thead,
table tfoot {
    background: transparent !important;
}

table tr {
    background: transparent !important;
}

table td,
table th {
    background: transparent !important;
}

/* Override Bootstrap table variants */
.table-light,
.table-light tbody,
.table-light tr,
.table-light td,
.table-light th {
    background: #0a0a0a !important;
}

/* List groups that might be white */
.list-group,
.list-group-flush {
    background: transparent !important;
}

/* Media object */
.media,
.media-body {
    background: transparent !important;
}

/* Clearfix and other utility divs */
.clearfix,
.clear,
.spacer {
    background: transparent !important;
}

/* Any headers/footers inside cards that might be white */
header,
footer {
    background: transparent !important;
}

header.card-header,
footer.card-footer {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Wells (Bootstrap 3 legacy) */
.well-sm,
.well-lg {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

/* Any remaining utility background classes */
.bg-transparent {
    background: transparent !important;
}

.bg-body {
    background: transparent !important;
}

/* Offcanvas and sidebars */
.offcanvas,
.offcanvas-body,
.sidebar-wrapper {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* Make sure all text is visible */
.text-body {
    color: #aaa !important;
}

.text-reset {
    color: #aaa !important;
}

/* Disabled elements */
.disabled,
:disabled,
[disabled] {
    opacity: 0.5;
    color: #666 !important;
}

/* Readonly inputs */
input[readonly],
textarea[readonly],
select[readonly] {
    background: rgba(20, 20, 20, 1) !important;
    color: #999 !important;
}

/* Placeholder text for all browsers */
::-webkit-input-placeholder {
    color: #666 !important;
}

::-moz-placeholder {
    color: #666 !important;
}

:-ms-input-placeholder {
    color: #666 !important;
}

:-moz-placeholder {
    color: #666 !important;
}

::placeholder {
    color: #666 !important;
}

/* Any accordion items */
.accordion-item {
    background: #0a0a0a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

.accordion-button {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

.accordion-button:not(.collapsed) {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
}

/* Close buttons */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Override any CSS framework defaults */
.uk-card,
.uk-panel,
.uk-section-default {
    background: #0a0a0a !important;
}

/* Ensure images don't get affected */
img,
svg,
canvas,
video {
    background: transparent !important;
}

/* But allow white backgrounds for image placeholders */
.img-thumbnail {
    background: #1a1a1a !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

/* Google reCAPTCHA container */
.g-recaptcha {
    background: transparent !important;
}

/* Any iframes (be careful) */
iframe {
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
}

/* Print styles - keep light for printing */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
}

/* ===========================
   FINAL CATCH-ALL
   =========================== */
/* This is the nuclear option - catches ANYTHING white */
*:not(img):not(svg):not(canvas):not(video):not(.logo-img):not(.navbar-logo) {
    color: inherit;
}

/* Make absolutely sure body stays dark */
body,
html {
    background-color: #000000 !important;
}

/* ===========================
   ULTIMATE CARD OVERRIDE
   =========================== */
/* Catch ALL possible card variations */
.w-100.card,
.mx-auto.card,
.shadow.card,
.shadow-sm.card,
.shadow-lg.card,
.rounded.card,
.border.card {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
}

/* Override inline styles on cards */
.card[style*="background"],
div.card[style*="background"],
.panel[style*="background"] {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Card columns (masonry layout) */
.card-columns .card,
.card-deck .card,
.card-group .card {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Any div that looks like a card */
div[class^="card "],
div[class*=" card "],
section[class^="card "],
section[class*=" card "] {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* ULTIMATE OVERRIDE - Catch any .bg-white anywhere */
.bg-white,
*.bg-white,
div.bg-white,
section.bg-white,
article.bg-white,
aside.bg-white,
main.bg-white,
header.bg-white,
footer.bg-white,
nav.bg-white,
form.bg-white,
fieldset.bg-white,
.bg-white.card,
.bg-white.panel,
.bg-white.box,
.bg-white.container,
.bg-white.wrapper,
[class~="bg-white"],
[class^="bg-white "],
[class*=" bg-white "],
[class$=" bg-white"] {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Also catch bg-faded, bg-lighter, etc */
.bg-faded,
.bg-lighter,
.bg-lightest,
.bg-gray-100,
.bg-gray-200,
.bg-light-gray {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Catch any remaining white via CSS classes */
.white-bg,
.white-background,
.light-bg,
.light-background,
.bg-off-white,
.bg-ivory,
.bg-snow {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Make sure no child elements inherit white */
.bg-white > div,
.bg-white > section,
.bg-white > article,
.bg-white > .container,
.bg-white > .row {
    background: transparent !important;
}

/* ===========================
   ABSOLUTE FINAL OVERRIDE - MAXIMUM SPECIFICITY
   =========================== */
/* Use !important and very specific selectors to override everything */

/* Every single card element */
html body .card,
html body div.card,
html body section.card,
html body article.card,
html body .panel,
html body div.panel {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Every card with any additional class */
html body .card.mb-3,
html body .card.mb-4,
html body .card.w-100,
html body .card.rounded,
html body .card.shadow {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
}

/* Card bodies specifically */
html body .card .card-body,
html body .card-body,
html body div.card-body {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===========================
   END OF CUSTOM STYLES
   =========================== */