:root {
    --brand-white: #f0f0f0;
    --brand-white-dark: #b9b9b9;
    --brand-white-darker: #808087;
    --brand-gray: #131313;
    --brand-gray-light: #1d1d1d;
    --brand-gray-dark: #0f0f0f;
    --brand-outline: #222222;
    --brand-bg: #070707;
    --brand-blue: #0075c9;
    --brand-blue-dark: #03538e;
    --brand-green: #22c55e;
    --brand-red: #bb3a3a;
    --brand-yellow: #eab308;
    --color-text-primary: var(--brand-white);
    --color-text-secondary: var(--brand-white-dark);
    --color-bg-primary: var(--brand-bg);
    --color-accent: var(--brand-blue);
    --color-border-translucent: rgba(255, 255, 255, 0.08);
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --radius-lg: 12px;
    --card-background: var(--brand-gray-light);
    --white: var(--brand-white);
    --light: var(--brand-gray);
    --dark: var(--brand-bg);
    --primary: var(--brand-blue);
    --success: var(--brand-green);
    --warning: var(--brand-yellow);
    --danger: var(--brand-red);
    --info: var(--brand-blue);
}

html,
body,
.primary-bg-color {
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background-color: #070707 !important;
    background-image: radial-gradient(
        ellipse 150% 100% at 50% -12%,
        #1a1a1a 0%,
        #141414 10%,
        #101010 22%,
        #0c0c0c 38%,
        #090909 52%,
        #070707 72%,
        #070707 100%
    ) !important;
    background-attachment: fixed !important;
}

a {
    color: var(--color-accent);
}
a:hover {
    color: var(--brand-white);
}

h1, h2, h3, h4, h5, h6,
.text-dark,
.text-body,
.text-black-50,
.close {
    color: var(--brand-white);
}

.text-muted {
    color: var(--brand-white-darker) !important;
}

/* Header */
header.header {
    background-color: var(--brand-gray-dark) !important;
    border-bottom: 1px solid var(--color-border-translucent);
}
header.header .topbar {
    background-color: var(--brand-gray) !important;
    color: var(--brand-white-dark);
}
header.header .navbar,
header.header .navbar-light,
header.header .main-navbar-wrapper {
    background-color: var(--brand-gray-dark) !important;
}
header.header .navbar a,
header.header .navbar-nav .nav-link {
    color: var(--brand-white-dark);
}
header.header .navbar a:hover,
header.header .navbar-nav .nav-link:hover {
    color: var(--brand-white);
}
header.header .toolbar .nav-link,
header.header .toolbar .nav-link:focus {
    color: var(--brand-white-dark);
    border: 1px solid var(--brand-outline);
    border-radius: var(--radius-lg);
    background: var(--brand-gray);
}

.master-breadcrumb,
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item + .breadcrumb-item::before {
    background: transparent !important;
    color: var(--brand-white-darker);
}

/* Verification / alerts — the main white bars */
.verification-banner,
.verification-banner.email-verification,
.verification-banner.user-validation {
    background-color: var(--brand-gray-light) !important;
    border-bottom: 1px solid var(--brand-outline) !important;
    color: var(--brand-white) !important;
}
.verification-banner .text,
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
    color: var(--brand-white-dark) !important;
}
.verification-banner .btn.close,
.verification-banner .btn.close:hover {
    color: var(--brand-white) !important;
    background: transparent !important;
}
.verification-banner .btn.btn-action,
.verification-banner.email-verification .btn.btn-action {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
    border-radius: var(--radius-lg);
}

.alert,
.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-light,
.alert-dark {
    background-color: var(--brand-gray-light) !important;
    border: 1px solid var(--brand-outline) !important;
    color: var(--brand-white) !important;
}
.alert-warning {
    border-color: var(--brand-yellow) !important;
    color: var(--brand-white) !important;
}
.alert-danger {
    border-color: var(--brand-red) !important;
}
.alert-success {
    border-color: var(--brand-green) !important;
}
.alert-link,
.alert a {
    color: var(--brand-blue) !important;
}

/* Surfaces */
.card,
.card-header,
.card-body,
.card-footer,
.client-home-cards .card,
.client-home-cards .card-header,
.list-group,
.list-group-item,
.tiles .tile,
.panel,
.panel-default,
.panel-heading,
.panel-body,
.well,
.jumbotron,
.modal-content,
.popover,
.popover-body,
.popover-header,
.tooltip-inner,
.dropdown-menu,
.bg-white,
.bg-light,
.bg-body,
.table,
.table-striped tbody tr,
.table-hover tbody tr,
.custom-file-label,
.md-editor,
.md-editor > textarea,
.md-editor .md-header,
.md-editor .md-footer,
.md-editor .md-preview {
    background-color: var(--card-background) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--brand-outline) !important;
}

.card,
.tiles .tile,
.client-home-cards .card,
.panel,
.sidebar .list-group {
    border-radius: 12px !important;
    border: 1px solid var(--color-border-translucent);
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(29, 29, 29, 0.55) 55%,
        rgba(7, 7, 7, 0.2) 100%
    );
}

.list-group-item-action:hover,
.table-list > tbody > tr:hover > td,
.table-hover tbody tr:hover,
.dropdown-item:hover,
.tiles .tile:hover {
    background-color: #222222 !important;
    color: var(--brand-white) !important;
}

/* Forms */
.form-control,
.form-control:focus,
.form-control:disabled,
.custom-select,
.input-group-text,
textarea {
    color: var(--brand-white-dark) !important;
    background-color: var(--brand-gray) !important;
    border-color: var(--brand-outline) !important;
}

/* Buttons */
.btn {
    border-radius: var(--radius-lg);
}
        .btn-primary,
        .btn-info,
        .btn-success,
        .btn-secondary {
            color: var(--brand-white) !important;
            background-color: var(--brand-blue) !important;
            border: none !important;
            transition: background .15s ease;
        }
        .btn-primary:hover,
        .btn-info:hover,
        .btn-success:hover,
        .btn-secondary:hover {
            background-color: var(--brand-blue-dark) !important;
            color: var(--brand-white) !important;
        }
        .btn-default,
        .btn-light,
        .btn-outline-secondary {
            color: var(--brand-white-dark) !important;
            background-color: var(--brand-gray) !important;
        border: 1px solid var(--brand-outline) !important;
            transition: background .15s ease, border-color .15s ease;
        }
        .btn-default:hover,
        .btn-light:hover,
        .btn-outline-secondary:hover {
            background-color: #2a2a2a !important;
            color: var(--brand-white) !important;
        border-color: var(--brand-outline) !important;
        }
.btn-danger {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-white) !important;
}
.btn-return-to-admin,
a.btn-return-to-admin,
.btn-return-to-admin .floating {
    background-color: #1d1d1d !important;
    color: #f0f0f0 !important;
    border: 1px solid #222 !important;
}

/* Tables */
table.table-list thead th,
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc,
.table-list > tbody > tr > td {
    background-color: var(--card-background) !important;
    color: var(--brand-white-dark) !important;
    border-color: var(--brand-outline) !important;
}

.page-link,
.pagination .page-item .page-link {
    background-color: var(--brand-gray) !important;
    border-color: var(--brand-outline) !important;
    color: var(--brand-white-dark) !important;
}
.page-item.active .page-link {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: var(--brand-white) !important;
}

.sidebar .list-group-item {
    background-color: transparent !important;
    border: none !important;
    color: var(--brand-white-dark) !important;
    border-radius: 8px !important;
}
.sidebar .list-group-item.active {
    background-color: #1d1d1d !important;
    border: none !important;
    color: var(--brand-white) !important;
}
.sidebar .list-group-item:hover {
    background-color: #222 !important;
    color: var(--brand-white) !important;
}

.status,
.label.status {
    border-radius: 9999px;
    background: #1d1d1d !important;
    color: #b9b9b9 !important;
    border: none !important;
}
.label.status.status-active,
.status-active,
.label.status.status-paid,
.status-paid,
.status-open,
.status-completed {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}
.label.status.status-refunded,
.status-refunded {
    background: rgba(234, 179, 8, 0.18) !important;
    color: #eab308 !important;
}

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

.nav-tabs {
    border-bottom: 1px solid var(--brand-outline);
}
.nav-tabs .nav-link {
    color: var(--brand-white-dark);
}
.nav-tabs .nav-link.active {
    color: var(--brand-white-dark);
    background-color: var(--card-background);
    border-color: var(--brand-outline);
}

div.product-details-tab-container,
.view-ticket .posted-by,
.view-ticket .card-body {
    background-color: var(--card-background) !important;
    border-color: var(--brand-outline) !important;
}

footer.footer {
    background-color: var(--brand-gray-dark) !important;
    border-top: 1px solid var(--color-border-translucent);
    color: var(--brand-white-dark);
}
footer.footer a {
    color: var(--brand-white-dark);
}

.credit-balance-dropdown .btn {
    color: var(--brand-white);
    background: var(--brand-gray);
    border: 1px solid var(--brand-outline);
}
.credit-balance-dropdown .btn strong {
    color: var(--color-accent);
}

.status,
.label.status {
    border-radius: 9999px;
}
.status-active {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
}

.modal-header,
.modal-footer {
    border-color: var(--brand-outline) !important;
}

#Primary_Navbar-Announcements,
#Primary_Navbar-Knowledgebase,
#Primary_Navbar-Network_Status,
#Primary_Navbar-Support-Knowledgebase,
#Primary_Navbar-Support-Downloads,
#Primary_Navbar-Support-Announcements {
    display: none !important;
}