/* =========================================
   WHMCS DARK SAAS + FULL CENTERED APP
========================================= */

/* =========================
   BASE
========================= */

body {
    background: #0b0f17 !important;
    color: #ffffff !important;
    font-family: Inter, system-ui, sans-serif !important;
}

/* FULL SCREEN BACKGROUND LAYER */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(124,58,237,0.20), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(37,99,235,0.18), transparent 50%),
        #05060a;
    z-index: -1;
}

/* =========================
   TRUE CENTERED APP WRAP (WHMCS SAFE)
========================= */

#page-container,
#content-container,
#main-body,
#content,
.wrapper,
.container,
.container-fluid {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FORCE MAIN APP INTO A CARD */
#page-container,
#content-container,
#main-body {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* =========================
   HEADER + FOOTER ALIGN
========================= */

#header,
#footer {
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================
   LINKS
========================= */

a {
    color: #a5b4fc !important;
    text-decoration: none !important;
}

a:hover {
    opacity: 0.85;
}

/* =========================
   NAVBAR
========================= */

.navbar,
.navbar-default {
    background: rgba(10, 12, 20, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px);
}

/* =========================
   PANELS / CARDS
========================= */

.panel,
div.panel,
.card,
div.card,
.tiles .tile {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.panel-heading,
.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: white !important;
}

/* =========================
   TABLES
========================= */

table,
.table {
    background: transparent !important;
    color: white !important;
}

.table th {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.table td {
    border-color: rgba(255,255,255,0.06) !important;
}

/* =========================
   BUTTONS
========================= */

.btn,
.btn-default {
    background: rgba(255,255,255,0.06) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}

.btn:hover {
    background: rgba(99,102,241,0.2) !important;
    border-color: rgba(99,102,241,0.4) !important;
}

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

/* =========================
   FORMS
========================= */

input,
select,
textarea {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: white !important;
    border-radius: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(99,102,241,0.5) !important;
    outline: none !important;
}

/* =========================
   SIDEBAR
========================= */

#sidebar,
.sidebar {
    background: transparent !important;
}

/* =========================
   LISTS / DASHBOARD
========================= */

.list-group-item {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: white !important;
}

/* =========================
   BADGES
========================= */

.badge {
    background: rgba(99,102,241,0.3) !important;
    color: white !important;
}

/* =========================
   ALERTS
========================= */

.alert {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: white !important;
}

/* =========================
   REMOVE SHADOWS
========================= */

* {
    box-shadow: none !important;
}

/* =========================
   MOBILE FIX
========================= */

@media (max-width: 1250px) {
    #page-container,
    #content-container,
    #main-body,
    #content {
        margin: 0 12px !important;
    }
}