/* =============================================================
   HumbleBilling — WHMCS Child Theme
   Ported from HumbleTheme (Pterodactyl Blueprint Extension)
   Matches the HumbleServers game panel design exactly.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Palette ── */
:root {
    --neutral-900: rgb(6, 10, 18);
    --neutral-800: hsl(213, 39%, 11%);
    --neutral-700: rgb(25, 34, 41);
    --neutral-600: hsla(215, 14%, 34%, 1);
    --neutral-500: hsla(220, 9%, 46%, 1);
    --neutral-400: hsla(218, 11%, 65%, 1);
    --neutral-300: hsla(216, 12%, 84%, 1);
    --neutral-200: hsla(220, 13%, 91%, 1);
    --neutral-100: hsla(220, 14%, 96%, 1);
    --neutral-50: hsla(210, 20%, 98%, 1);

    /* HumbleServers Primary — Sky Blue */
    --primary-50: rgb(240, 249, 255);
    --primary-100: rgb(224, 242, 254);
    --primary-200: rgb(186, 230, 253);
    --primary-300: rgb(125, 211, 252);
    --primary-400: rgb(56, 189, 248);
    --primary-500: rgb(7, 150, 221);
    --primary-600: rgb(7, 150, 221);
    --primary-700: rgb(3, 105, 161);
    --primary-800: rgb(7, 89, 133);
    --primary-900: rgb(12, 74, 110);

    /* HumbleServers Secondary — Purple */
    --secondary-400: rgb(192, 132, 252);
    --secondary-500: rgb(168, 85, 247);
    --secondary-600: rgb(147, 51, 234);

    /* Semantic */
    --green-500: rgba(34, 197, 94, 1);
    --green-600: rgba(22, 163, 74, 1);
    --yellow-500: rgba(234, 179, 8, 1);
    --red-500: rgba(239, 68, 68, 1);
    --red-600: rgba(220, 38, 38, 1);

    /* Text Danger / Required */
    --text-danger: var(--red-500);

    /* WHMCS aliases */
    --whmcs-bg: var(--neutral-800);
    --whmcs-card: var(--neutral-900);
    --whmcs-border: var(--neutral-700);
    --whmcs-text: var(--neutral-200);
    --whmcs-text-muted: var(--neutral-500);
    --whmcs-accent: var(--primary-500);
}

/* ── Global Reset ── */
*,
*::before,
*::after {
    text-shadow: none !important;
}

html,
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background-color: var(--neutral-800) !important;
    color: var(--neutral-200) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px;
    line-height: 1.6;
}

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
#header {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Topbar (logged-in bar) */
.topbar {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    padding: 6px 0;
}

.topbar .btn {
    color: var(--neutral-400) !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    transition: color 0.2s ease;
}

.topbar .btn:hover {
    color: var(--neutral-100) !important;
}

.btn-active-client {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-200) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 5px 14px !important;
    transition: all 0.2s ease !important;
}

.btn-active-client:hover {
    background-color: var(--neutral-700) !important;
    border-color: var(--neutral-600) !important;
    color: var(--neutral-100) !important;
}

.btn-return-to-admin {
    background-color: rgba(7, 150, 221, 0.15) !important;
    border: 1px solid var(--primary-700) !important;
    color: var(--primary-300) !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    padding: 5px 12px !important;
}

/* Main Navbar */
.navbar {
    background-color: var(--neutral-900) !important;
    border: none !important;
    padding: 0.5rem 0 !important;
}

.main-navbar-wrapper {
    background-color: var(--neutral-900) !important;
    border-top: 1px solid var(--neutral-700) !important;
}

/* Logo */
.navbar-brand .logo-img {
    max-height: 38px;
    filter: brightness(1.05);
}

/* Nav links */
.navbar-nav .nav-item .nav-link {
    color: var(--neutral-400) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 10px 14px !important;
    border-radius: 8px;
    transition: all 0.2s ease !important;
    letter-spacing: 0.02em;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus {
    color: var(--neutral-100) !important;
    background-color: var(--neutral-800) !important;
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item .nav-link.active {
    color: var(--primary-400) !important;
    background-color: rgba(7, 150, 221, 0.1) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 8px !important;
    margin-top: 4px !important;
}

.dropdown-item {
    color: var(--neutral-300) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
}

.dropdown-divider {
    border-color: var(--neutral-700) !important;
    margin: 6px 8px !important;
}

/* Search bar */
.search .form-control {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-200) !important;
    border-radius: 0 10px 10px 0 !important;
}

.search .btn-default {
    background-color: var(--neutral-700) !important;
    border: 1px solid var(--neutral-600) !important;
    border-right: none !important;
    color: var(--neutral-400) !important;
    border-radius: 10px 0 0 10px !important;
}

/* Cart button */
.cart-btn {
    color: var(--neutral-400) !important;
    font-size: 1rem !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.cart-btn:hover {
    color: var(--primary-400) !important;
    background-color: rgba(7, 150, 221, 0.1) !important;
}

.badge-dark {
    background-color: var(--primary-600) !important;
    color: white !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.master-breadcrumb {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    padding: 10px 0 !important;
}

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

.breadcrumb-item {
    font-size: 0.8rem;
    font-weight: 500;
}

.breadcrumb-item a {
    color: var(--neutral-500) !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: var(--primary-400) !important;
}

.breadcrumb-item.active {
    color: var(--neutral-300) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--neutral-600) !important;
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
#main-body {
    padding: 2rem 0 !important;
    min-height: calc(100vh - 220px);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 1.5rem;
}

.sidebar .panel-title {
    background-color: var(--neutral-900) !important;
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--neutral-700) !important;
}

.sidebar-link,
.sidebar .list-group-item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    color: var(--neutral-400) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 11px 18px !important;
    transition: all 0.2s ease !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-link:last-child,
.sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

.sidebar-link:hover,
.sidebar .list-group-item:hover {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    text-decoration: none !important;
}

.sidebar-link.active,
.sidebar .list-group-item.active {
    background-color: rgba(7, 150, 221, 0.1) !important;
    color: var(--primary-400) !important;
    border-left: 3px solid var(--primary-500) !important;
}

/* ============================================================
   CARDS / PANELS / BOXES
   ============================================================ */
.panel,
.card,
.box {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

.panel-heading,
.card-header,
.box-header {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    padding: 16px 22px !important;
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em;
}

.panel-title,
.card-title {
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.panel-body,
.card-body,
.box-body {
    background-color: var(--neutral-900) !important;
    color: var(--neutral-300) !important;
    padding: 20px 22px !important;
}

.panel-footer,
.card-footer,
.box-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--neutral-700) !important;
    padding: 14px 22px !important;
}

/* ============================================================
   TABLES & DATATABLES
   ============================================================ */
.table-container,
.dataTables_wrapper {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    color: var(--neutral-400) !important;
}

.table {
    margin-bottom: 0 !important;
    background-color: transparent !important;
    color: var(--neutral-300) !important;
    border: none !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border: none !important;
}

.table thead th {
    background-color: var(--neutral-800) !important;
    border-bottom: 2px solid var(--neutral-700) !important;
    border-top: none !important;
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 14px 16px !important;
}

.table tbody tr {
    background-color: transparent !important;
    border-top: 1px solid var(--neutral-700) !important;
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.table tbody td {
    border-top: 1px solid var(--neutral-700) !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
    color: var(--neutral-300) !important;
}

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

/* No records background fix */
.dataTables_empty {
    background-color: transparent !important;
    padding: 40px !important;
    font-style: italic;
    color: var(--neutral-500) !important;
}

/* DataTables Controls */
.dataTables_length,
.dataTables_info,
.dataTables_paginate {
    margin: 15px 0 !important;
    color: var(--neutral-400) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dataTables_filter {
    display: none !important;
}

.dataTables_filter input,
.dataTables_length select {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 8px !important;
    color: var(--neutral-100) !important;
    padding: 6px 12px !important;
    outline: none !important;
    transition: border-color 0.2s;
}

.dataTables_filter input:focus {
    border-color: var(--primary-500) !important;
}

.dataTables_paginate .paginate_button {
    background: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-400) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    margin: 0 3px !important;
    cursor: pointer;
    transition: all 0.2s;
}

.dataTables_paginate .paginate_button:hover {
    background: var(--neutral-700) !important;
    color: var(--neutral-100) !important;
    border-color: var(--neutral-600) !important;
}

.dataTables_paginate .paginate_button.current {
    background: var(--primary-500) !important;
    color: white !important;
    border-color: var(--primary-400) !important;
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Remove Powered by WHMCS ── */
p[style*="text-align:center"]:has(a[href*="whmcs.com"]),
.poweredby,
#footer+p.text-center,
#footer+p[style*="text-align:center"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
label {
    color: var(--neutral-400) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
}

.form-control {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-200) !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    height: 46px !important;
    min-height: 46px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

input.form-control {
    line-height: 46px !important;
}

/* Specific fix for select elements which ignore line-height centering in some browsers */
select.form-control {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    height: 46px !important;
    line-height: normal !important;
}

textarea.form-control {
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    line-height: 1.6 !important;
}

/* Force dark theme on all textareas, especially editors */
body textarea.form-control,
body .markdown-editor,
body .md-editor textarea,
body .md-editor,
body .CodeMirror,
body .CodeMirror-scroll,
body .CodeMirror-sizer,
body .CodeMirror-lines,
body .CodeMirror-code,
body .CodeMirror-measure,
body .CodeMirror-line,
body .editor-preview,
body .editor-preview-side {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-200) !important;
    border-color: var(--neutral-700) !important;
}

/* code mirror specific */
body .CodeMirror * {
    background-color: transparent !important;
}

body .CodeMirror {
    background-color: var(--neutral-800) !important;
}

/* CodeMirror specific (WHMCS Markdown Editor) */
body .CodeMirror {
    background: var(--neutral-800) !important;
    color: var(--neutral-200) !important;
}

body .CodeMirror-cursor {
    border-left: 2px solid var(--neutral-100) !important;
}

body .CodeMirror-gutters {
    background: var(--neutral-900) !important;
    border-right: 1px solid var(--neutral-700) !important;
}

body .md-editor.active {
    border-color: var(--primary-500) !important;
}

/* Preview area */
body .md-editor .md-preview,
body .editor-preview,
body .editor-preview-side {
    background: var(--neutral-900) !important;
    color: var(--neutral-200) !important;
}

.md-editor .md-header {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
}

.md-editor .md-header .btn-default {
    background-color: var(--neutral-800) !important;
    border-color: var(--neutral-700) !important;
    color: var(--neutral-300) !important;
}

.md-editor .md-header .btn-default:hover,
.md-editor .md-header .btn-default.active {
    background-color: var(--neutral-700) !important;
    color: var(--neutral-100) !important;
}

.md-editor .md-footer {
    background-color: var(--neutral-900) !important;
    border-top: 1px solid var(--neutral-700) !important;
    color: var(--neutral-500) !important;
}

/* Attachments / Custom File Input */
.custom-file-label {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-400) !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    line-height: 32px !important;
}

#btnTicketAttachmentsAdd {
    min-height: 44px !important;
    padding: 6px 20px !important;
    border-radius: 10px !important;
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.05em !important;
}

#btnTicketAttachmentsAdd:hover {
    background-color: var(--neutral-700) !important;
    border-color: var(--neutral-600) !important;
}
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
}

.custom-file-label::after {
    background-color: var(--neutral-700) !important;
    color: var(--neutral-200) !important;
    border-left: 1px solid var(--neutral-600) !important;
    border-radius: 0 10px 10px 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
}

.form-control:focus {
    background-color: var(--neutral-800) !important;
    border-color: var(--primary-500) !important;
    color: var(--neutral-100) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(7, 150, 221, 0.15) !important;
}

.form-control::placeholder {
    color: var(--neutral-600) !important;
}

select.form-control {
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    padding-right: 36px !important; /* Space for the custom arrow */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(186, 230, 253)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
}

select.form-control option {
    background-color: var(--neutral-800);
    color: var(--neutral-200);
}

.input-group-text {
    background-color: var(--neutral-700) !important;
    border: 1px solid var(--neutral-600) !important;
    color: var(--neutral-400) !important;
    border-radius: 10px 0 0 10px !important;
}

/* Checkboxes & Radios */
.form-check-input:checked {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.02em !important;
    font-size: 0.875rem !important;
}

.btn-primary,
.btn-success {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-700) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-success:hover {
    background-color: var(--primary-700) !important;
    border-color: var(--primary-800) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(7, 150, 221, 0.25) !important;
}

.btn-default,
.btn-secondary {
    background-color: var(--neutral-800) !important;
    border-color: var(--neutral-700) !important;
    color: var(--neutral-200) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background-color: var(--neutral-700) !important;
    border-color: var(--neutral-600) !important;
    color: var(--neutral-100) !important;
}

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

.btn-danger:hover {
    background-color: rgba(185, 28, 28, 1) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25) !important;
}

.btn-warning {
    background-color: var(--yellow-500) !important;
    border-color: var(--yellow-500) !important;
    color: rgb(20, 20, 20) !important;
}

.btn-link {
    color: var(--primary-400) !important;
    text-decoration: none !important;
}

.btn-link:hover {
    color: var(--primary-300) !important;
}

/* ============================================================
   ALERTS / FLASH MESSAGES
   ============================================================ */
.alert {
    border-radius: 10px !important;
    border: none !important;
    font-weight: 500 !important;
    padding: 14px 18px !important;
}

.alert-success {
    background-color: rgba(22, 163, 74, 0.15) !important;
    border-left: 4px solid var(--green-600) !important;
    color: rgba(134, 239, 172, 1) !important;
}

.alert-danger,
.alert-error {
    background-color: rgba(220, 38, 38, 0.15) !important;
    border-left: 4px solid var(--red-600) !important;
    color: rgba(252, 165, 165, 1) !important;
}

.alert-warning {
    background-color: rgba(202, 138, 4, 0.15) !important;
    border-left: 4px solid var(--yellow-500) !important;
    color: rgba(253, 224, 71, 1) !important;
}

.alert-info {
    background-color: rgba(7, 150, 221, 0.12) !important;
    border-left: 4px solid var(--primary-500) !important;
    color: var(--primary-300) !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.04em !important;
    padding: 3px 8px !important;
    text-transform: uppercase !important;
}

.badge-success,
.label-success {
    background-color: rgba(22, 163, 74, 0.2) !important;
    color: rgba(134, 239, 172, 1) !important;
    border: 1px solid rgba(22, 163, 74, 0.4) !important;
}

.badge-danger,
.label-danger {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: rgba(252, 165, 165, 1) !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

.badge-warning,
.label-warning {
    background-color: rgba(202, 138, 4, 0.15) !important;
    color: rgba(253, 224, 71, 1) !important;
    border: 1px solid rgba(202, 138, 4, 0.3) !important;
}

.badge-info,
.label-info {
    background-color: rgba(7, 150, 221, 0.12) !important;
    color: var(--primary-300) !important;
    border: 1px solid rgba(7, 150, 221, 0.3) !important;
}

.badge-primary {
    background-color: rgba(7, 150, 221, 0.2) !important;
    color: var(--primary-200) !important;
    border: 1px solid rgba(7, 150, 221, 0.4) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination>li>a,
.pagination>li>span {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
    transition: all 0.2s ease !important;
}

.pagination>li>a:hover {
    background-color: var(--neutral-700) !important;
    border-color: var(--neutral-600) !important;
    color: var(--neutral-100) !important;
}

.pagination>.active>a,
.pagination>.active>span {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-700) !important;
    color: white !important;
}

.pagination>.disabled>a,
.pagination>.disabled>span {
    background-color: var(--neutral-900) !important;
    border-color: var(--neutral-700) !important;
    color: var(--neutral-600) !important;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

.modal-header {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    padding: 20px 24px !important;
}

.modal-title {
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.modal-body {
    background-color: var(--neutral-900) !important;
    color: var(--neutral-300) !important;
    padding: 24px !important;
}

.modal-footer {
    background-color: var(--neutral-900) !important;
    border-top: 1px solid var(--neutral-700) !important;
    padding: 16px 24px !important;
}

.close {
    color: var(--neutral-400) !important;
    opacity: 1 !important;
    font-size: 1.4rem !important;
    transition: color 0.2s ease !important;
}

.close:hover {
    color: var(--neutral-100) !important;
}

.modal-backdrop {
    background-color: var(--neutral-900) !important;
}

.modal-backdrop.in,
.modal-backdrop.show {
    opacity: 0.75 !important;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--primary-400) !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: var(--primary-300) !important;
    text-decoration: none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer,
footer {
    background-color: var(--neutral-900) !important;
    border-top: 1px solid var(--neutral-700) !important;
    color: var(--neutral-500) !important;
    font-size: 0.8rem !important;
    padding: 20px 0 !important;
    text-align: center;
}

#footer a,
footer a {
    color: var(--neutral-500) !important;
}

#footer a:hover,
footer a:hover {
    color: var(--primary-400) !important;
}

/* ============================================================
   LIST GROUPS (used in orders, tickets, etc.)
   ============================================================ */
.list-group-item {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
    transition: all 0.15s ease !important;
}

.list-group-item:hover {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
}

.list-group-item.active {
    background-color: rgba(7, 150, 221, 0.1) !important;
    border-color: var(--primary-600) !important;
    color: var(--primary-300) !important;
}

/* ============================================================
   PRODUCT / SERVICE CARDS
   ============================================================ */
.product-card,
.package-card {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
}

.product-card:hover,
.package-card:hover {
    border-color: var(--primary-600) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(7, 150, 221, 0.15) !important;
}

/* ============================================================
   STAT / SUMMARY BOXES (Dashboard)
   ============================================================ */
.stat-card {
    background: linear-gradient(135deg, var(--neutral-900), var(--neutral-800)) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    padding: 22px !important;
}

.stat-value {
    color: var(--primary-400) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
}

.stat-label {
    color: var(--neutral-500) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* ============================================================
   WELL / INFO SECTIONS
   ============================================================ */
.well {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--neutral-300) !important;
}

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--neutral-700) !important;
}

.nav-tabs .nav-link {
    color: var(--neutral-400) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--neutral-200) !important;
    border-bottom-color: var(--neutral-600) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary-400) !important;
    border-bottom-color: var(--primary-500) !important;
    background: transparent !important;
}

.tab-content {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 20px 22px !important;
    color: var(--neutral-300) !important;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress {
    background-color: var(--neutral-700) !important;
    border-radius: 100px !important;
    height: 8px !important;
}

.progress-bar {
    background-color: var(--primary-500) !important;
    border-radius: 100px !important;
}

.progress-bar-success {
    background-color: var(--green-500) !important;
}

.progress-bar-warning {
    background-color: var(--yellow-500) !important;
}

.progress-bar-danger {
    background-color: var(--red-500) !important;
}

/* ============================================================
   TOOLTIPS
   ============================================================ */
.tooltip-inner {
    background-color: var(--neutral-700) !important;
    color: var(--neutral-100) !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--neutral-700) !important;
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--neutral-700) !important;
}

.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: var(--neutral-700) !important;
}

.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: var(--neutral-700) !important;
}

/* ============================================================
   POPOVERS
   ============================================================ */
.popover {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

.popover-header {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
    border-radius: 12px 12px 0 0 !important;
}

.popover-body {
    color: var(--neutral-300) !important;
}

/* Client alerts popover */
.client-alerts {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.client-alerts li a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    color: var(--neutral-300) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.client-alerts li a:hover {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
}

/* ============================================================
   INVOICE / BILLING SPECIFIC
   ============================================================ */
.invoice-total {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 10px !important;
    padding: 16px !important;
}

.invoice-grand-total {
    color: var(--primary-400) !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page body {
    background: radial-gradient(circle at top right, var(--neutral-800), var(--neutral-900)) !important;
}

/* ============================================================
   SCROLLBARS (Webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--neutral-600);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
}

/* ============================================================
   MISC OVERRIDES
   ============================================================ */
hr {
    border-color: var(--neutral-700) !important;
    opacity: 0.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
}

p {
    color: var(--neutral-300);
}

code,
pre {
    background-color: var(--neutral-800) !important;
    color: var(--primary-300) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 6px !important;
}

pre {
    padding: 16px !important;
    font-size: 0.85rem;
}

/* ── Ticket status colours ── */
.status-open {
    color: rgba(134, 239, 172, 1) !important;
}

.status-closed {
    color: var(--neutral-500) !important;
}

.status-pending {
    color: rgba(253, 224, 71, 1) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #main-body {
        padding: 1rem 0 !important;
    }

    .panel,
    .card,
    .box {
        border-radius: 10px !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }
}

/* ============================================================
   SIDEBAR LAYOUT — matches Pterodactyl HumbleTheme exactly
   ============================================================ */

:root {
    --hs-sidebar-width: 300px;
}

/* ── Hide the old WHMCS header/breadcrumb elements ── */
#header,
.master-breadcrumb {
    display: none !important;
}

/* ── Body base ── */
body {
    overflow-x: hidden;
}

/* ── Mobile top bar ── */
#hs-mobile-header {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 56px;
    background-color: var(--neutral-900);
    border: 1px solid var(--neutral-700);
    border-radius: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 400;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

#hs-mobile-header .hs-mobile-brand img {
    height: 28px;
}

#hs-sidebar-toggle {
    background: none;
    border: none;
    color: var(--neutral-400);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

#hs-sidebar-toggle:hover {
    color: var(--neutral-100);
    background-color: var(--neutral-800);
}

/* ── Mobile overlay ── */
#hs-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 390;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#hs-overlay.visible {
    opacity: 1;
}

/* ── Sidebar ── */
#hs-sidebar {
    position: fixed;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: var(--hs-sidebar-width);
    background-color: var(--neutral-900);
    border: 0.5px solid var(--neutral-700);
    border-radius: 14px;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    z-index: 500;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* ── Logo area ── */
.hs-sidebar-logo {
    padding: 24px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hs-sidebar-logo a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.hs-sidebar-logo img {
    height: 80px;
    width: auto;
    filter: brightness(1.05);
}

/* ── Navigation area (scrollable) ── */
.hs-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px !important;
    /* px-4 in tailwind */
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    /* gap-2 in tailwind */
    min-height: 0;
}

.hs-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.hs-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.hs-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--neutral-700);
    border-radius: 100px;
}

.hs-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: var(--neutral-600);
}

/* ── Nav links ── */
.hs-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px !important;
    /* p-2.5 in tailwind */
    border-radius: 8px !important;
    /* rounded-lg in tailwind */
    color: var(--neutral-400) !important;
    font-size: 1rem !important;
    /* text-base in tailwind */
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

.hs-nav-link i {
    font-size: 1rem;
    width: 20px;
    /* w-5 in tailwind */
    text-align: center;
    flex-shrink: 0;
    color: var(--neutral-500);
    transition: color 0.15s;
}

.hs-nav-link:hover,
.hs-nav-link:focus {
    color: var(--neutral-100) !important;
    background-color: var(--neutral-700) !important;
    text-decoration: none !important;
}

.hs-nav-link:hover i,
.hs-nav-link:focus i {
    color: var(--neutral-300);
}

.hs-nav-link.active {
    color: var(--primary-400) !important;
    background-color: var(--neutral-700) !important;
}

.hs-nav-link.active i {
    color: var(--primary-500) !important;
}

.hs-nav-link-success {
    color: var(--green-400) !important;
    background-color: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    margin-bottom: 8px !important;
}

.hs-nav-link-success:hover {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: var(--green-300) !important;
}

.hs-nav-link-success i {
    color: var(--green-500) !important;
}


/* Sub-links (inside collapsible groups) */
.hs-nav-sub {
    padding-left: 38px !important;
    font-size: 0.8rem !important;
    color: var(--neutral-500) !important;
}

.hs-nav-sub:hover {
    color: var(--neutral-200) !important;
}

/* ── Section divider ── */
.hs-nav-divider {
    height: 1px;
    background-color: var(--neutral-700);
    margin: 8px 4px;
    opacity: 0.6;
}

/* ── Collapsible nav groups ── */
.hs-nav-group-items {
    display: none !important;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.hs-nav-group.expanded>.hs-nav-group-items {
    display: flex !important;
}

.hs-nav-group.expanded>.hs-nav-link>.hs-chevron {
    transform: rotate(180deg);
}

.hs-chevron {
    font-size: 0.65rem !important;
    margin-left: auto;
    transition: transform 0.2s ease;
}

.hs-inner-chevron {
    font-size: 0.70rem !important;
    margin-right: -4px !important;
    width: 20px;
    transition: transform 0.2s ease;
    text-align: center;
}

/* ── Scroll indicator ── */
#hs-scroll-indicator {
    position: absolute;
    bottom: 130px;
    left: 0;
    right: 0;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

/* Mailing List & Email Preferences Checkbox Aligment */
.controls.form-check {
    padding-left: 0 !important;
}

.controls.form-check label,
label.checkbox-inline {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--neutral-100) !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important; /* Extremely tight spacing */
    position: relative !important;
    padding-left: 0 !important;
}

/* Hide line breaks that often add extra space in WHMCS forms */
.controls.form-check br {
    display: none !important;
}

label.checkbox-inline {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 15px !important;
}

.form-check-input {
    position: static !important;
    margin: 0 !important;
    accent-color: var(--primary-500) !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

#hs-scroll-indicator i {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: var(--primary-500);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    animation: hs-bounce 2s infinite;
}

@keyframes hs-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-4px);
    }

    60% {
        transform: translateY(-2px);
    }
}

/* ── Bottom section ── */
/* ── Sidebar Bottom Area (Account Row) ── */
.hs-sidebar-bottom {
    padding: 8px 16px 16px;
    /* mb-2 mt-4 px-4 roughly */
    margin-top: auto;
    flex-shrink: 0;
}

.hs-sidebar-bottom .hs-nav-divider {
    width: 30%;
    height: 1px;
    background: var(--neutral-800);
    margin: 16px auto;
}

.hs-sidebar-bottom-row {
    display: flex !important;
    gap: 8px !important;
    /* gap-2 in tailwind */
    align-items: center !important;
    width: 100% !important;
}

.hs-account-btn {
    flex: 3.2 !important;
    /* HumbleTheme default flex ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    /* p-2 in tailwind */
    height: 34px;
    background: rgba(7, 150, 221, 0.12) !important;
    border: 1px solid rgba(7, 150, 221, 0.3) !important;
    border-radius: 8px;
    color: rgb(7, 150, 221) !important;
    text-decoration: none !important;
    transition: all 0.2s;
    min-width: 0;
}

.hs-account-btn:hover {
    background: rgba(7, 150, 221, 0.2) !important;
    color: rgb(7, 150, 221) !important;
}

.hs-account-avatar {
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: inherit;
    flex-shrink: 0;
}

.hs-account-btn:hover .hs-account-avatar {
    color: inherit;
}

.hs-account-name {
    font-size: 10px;
    font-weight: 800;
    /* extra bold to match font-black/bold in pterodactyl */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-help-btn {
    flex: 2.4 !important;
    /* HumbleTheme default flex ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* gap-2 in tailwind */
    height: 34px;
    padding: 0 8px;
    /* px-2 in tailwind */
    background: rgba(250, 204, 21, 0.1);
    color: rgb(250, 204, 21) !important;
    border: 0.5px solid rgba(250, 204, 21, 0.4);
    border-radius: 8px;
    font-size: 12px;
    /* text-xs in tailwind */
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.hs-help-btn:hover {
    background: rgba(250, 204, 21, 0.2) !important;
    color: rgb(250, 204, 21) !important;
}

.hs-help-btn i,
.hs-help-btn span {
    color: inherit !important;
}

.hs-cart-btn {
    flex: 3.2 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px;
    background: rgba(34, 197, 94, 0.1);
    color: rgb(34, 197, 94) !important;
    border: 0.5px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.hs-cart-btn:hover {
    background: rgba(34, 197, 100, 0.2) !important;
    color: rgb(34, 197, 94) !important;
}

.hs-cart-btn i,
.hs-cart-btn span {
    color: inherit !important;
}

.hs-notifications-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 150, 221, 0.1);
    color: rgb(7, 150, 221);
    border: 0.5px solid rgba(7, 150, 221, 0.4);
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s;
}

.hs-notifications-btn:hover {
    background: rgba(7, 150, 221, 0.2);
    color: rgb(7, 150, 221);
}

.hs-notif-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--red-500);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--neutral-900);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* hs-user-text replaced by hs-sidebar-bottom-row */

/* hs-username replaced */

/* hs-user-label replaced */

.hs-logout-btn {
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: var(--neutral-500) !important;
    background: none !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.hs-logout-btn:hover {
    background-color: rgba(220, 38, 38, 0.12) !important;
    color: rgba(248, 113, 113, 1) !important;
}

/* Login/Register buttons */
.hs-login-btn {
    background-color: var(--primary-600) !important;
    color: white !important;
    font-weight: 700 !important;
    justify-content: center !important;
}

.hs-login-btn:hover {
    background-color: var(--primary-700) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(7, 150, 221, 0.25) !important;
}

.hs-login-btn i {
    color: rgba(255, 255, 255, 0.8) !important;
}

.hs-register-btn {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    justify-content: center !important;
}

/* Admin return bar */
.hs-admin-return-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background-color: rgba(7, 150, 221, 0.08) !important;
    border: 0.5px solid rgba(7, 150, 221, 0.25) !important;
    color: var(--primary-400) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-top: 4px;
    transition: all 0.2s !important;
}

.hs-admin-return-btn:hover {
    background-color: rgba(7, 150, 221, 0.15) !important;
}

/* ── Main content offset ── */
#hs-main-content {
    margin-left: calc(var(--hs-sidebar-width) + 24px);
    padding: 20px 24px 40px;
    min-height: 100vh;
    width: calc(100% - var(--hs-sidebar-width) - 24px);
    transition: margin-left 0.3s ease, width 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hs-main-content>* {
    width: 100%;
    max-width: 1200px;
    margin-left: 0;
    margin-right: 0;
}

/* Breadcrumb inside main content */
.hs-breadcrumb {
    margin-bottom: 20px;
}

.hs-breadcrumb .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.8rem;
}

.hs-breadcrumb .breadcrumb-item a {
    color: var(--neutral-500) !important;
    text-decoration: none !important;
}

.hs-breadcrumb .breadcrumb-item a:hover {
    color: var(--primary-400) !important;
}

.hs-breadcrumb .breadcrumb-item.active {
    color: var(--neutral-400) !important;
}

.hs-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--neutral-600) !important;
}

/* Remove extra padding that WHMCS adds */
#main-body {
    padding: 0 !important;
}

.hs-container {
    padding: 0 !important;
    max-width: 100% !important;
}

/* Footer inside main content */
#footer,
footer {
    margin-left: 0;
    width: 100%;
}

/* ── Mobile Responsive ── */
@media (max-width: 1023px) {
    #hs-mobile-header {
        display: flex;
    }

    #hs-overlay {
        display: block;
    }

    #hs-sidebar {
        transform: translateX(calc(-100% - 2rem));
        top: 12px;
        bottom: 12px;
    }

    #hs-sidebar.open {
        transform: translateX(0);
    }

    #hs-main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 80px 16px 40px;
    }
}

/* ============================================================
   SHOPPING CART FIXES
   ============================================================ */

/* Hide unwanted sidebars (Categories, Actions, Choose Currency) */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed {
    display: none !important;
}

/* Adjust cart body to share space with sidebar */
#order-standard_cart .cart-body {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

#order-standard_cart .cart-body .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 -12px !important;
    gap: 0 !important;
}

#order-standard_cart .secondary-cart-body {
    flex: 1 1 500px !important;
    width: auto !important;
    padding: 24px !important;
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    /* matched higher radius */
    margin-bottom: 24px !important;
}

#order-standard_cart .secondary-cart-sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 350px !important;
    width: 350px !important;
    min-width: 350px !important;
    padding: 0 12px !important;
}

#order-standard_cart .order-summary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 14px !important;
}

@media (max-width: 991px) {
    #order-standard_cart .secondary-cart-sidebar {
        flex: 1 1 100% !important;
    }
}

/* Dark mode colors for cart items and boxes */
#order-standard_cart .products .product,
#order-standard_cart .product-info {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

#order-standard_cart .products .product header,
#order-standard_cart .product-info .product-title {
    background-color: var(--neutral-800) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    color: var(--neutral-100) !important;
}

#order-standard_cart .products .product header span {
    color: var(--neutral-100) !important;
}

/* View cart tables and elements */
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

#order-standard_cart .view-cart-items-header {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
}

#order-standard_cart .view-cart-items .item {
    background-color: transparent !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--neutral-800) !important;
}

#order-standard_cart .order-summary h2 {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
}

#order-standard_cart .summary-container {
    background-color: transparent !important;
    color: var(--neutral-300) !important;
}

#order-standard_cart .domain-selection-options .option {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
}

#order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--primary-600) !important;
    color: #fff !important;
    border-color: var(--primary-500) !important;
}

/* Fix text colors inside cart */
#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart .sub-heading span {
    color: var(--neutral-100) !important;
}

#order-standard_cart .sub-heading {
    border-top: 1px solid var(--neutral-700) !important;
}

#order-standard_cart .sub-heading span {
    background-color: var(--neutral-800) !important;
    /* hide line behind text */
}

/* Fix product card layout (Flexbox) */
#order-standard_cart .products {
    padding-top: 10px !important;
}

#order-standard_cart .products .row-eq-height {
    display: flex !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-bottom: 24px !important;
}

#order-standard_cart .products .col-md-6 {
    display: flex !important;
    padding: 0 12px !important;
}

#order-standard_cart .products .product {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#order-standard_cart .products .product .product-title {
    margin: 0 0 12px 0 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--neutral-100) !important;
    line-height: 1.2 !important;
}

#order-standard_cart .products .product .product-qty {
    font-size: 0.85em !important;
    color: var(--neutral-400) !important;
    margin-bottom: 8px !important;
}

#order-standard_cart .products .product div.product-desc {
    float: none !important;
    width: 100% !important;
    padding: 24px 24px 0 !important;
}

#order-standard_cart .products .product footer {
    float: none !important;
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
}

#order-standard_cart .products .product div.product-pricing {
    margin-bottom: 0 !important;
    color: var(--neutral-400) !important;
}

#order-standard_cart .products .product span.price {
    font-size: 1.25rem !important;
    color: var(--neutral-100) !important;
    font-weight: 700 !important;
}

#order-standard_cart .btn-order-now {
    margin-top: 0 !important;
}

/* ============================================================
   CLIENT AREA DASHBOARD — HumbleTheme Style
   ============================================================ */

/* ── Dashboard Tiles ── */
.tiles .tile {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    margin: 8px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.tiles .tile:hover {
    transform: translateY(-4px) !important;
    border-color: var(--primary-500) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.tiles .tile i {
    font-size: 28px !important;
    margin-bottom: 12px !important;
    color: var(--primary-400) !important;
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.tiles .tile .stat {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--neutral-100) !important;
    margin-bottom: 4px !important;
}

.tiles .tile .title {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--neutral-400) !important;
}

.tiles .tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    opacity: 0.3 !important;
}

/* ── Dashboard Cards & Panels ── */
.client-home-cards .card {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.client-home-cards .card-header {
    background-color: var(--neutral-800) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    padding: 16px 20px !important;
}

.client-home-cards .card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--neutral-100) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.client-home-cards .card-title i {
    color: var(--primary-400) !important;
}

.client-home-cards .card-body {
    padding: 20px !important;
    color: var(--neutral-300) !important;
}

.client-home-cards .list-group-item {
    background-color: transparent !important;
    border-color: var(--neutral-700) !important;
    padding: 14px 20px !important;
    color: var(--neutral-300) !important;
    transition: all 0.2s ease !important;
}

.client-home-cards .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--neutral-100) !important;
}

.client-home-cards .card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--neutral-700) !important;
    padding: 12px 20px !important;
}

/* ── Improved Input Sizing for Cart ── */
#order-standard_cart .form-control,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart .bootstrap-select>.btn {
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-100) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    width: 100% !important;
}

#order-standard_cart select.form-control {
    padding-right: 36px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(186, 230, 253)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
}

#order-standard_cart .form-control:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 2px rgba(7, 150, 221, 0.2) !important;
    outline: none !important;
}

#order-standard_cart label {
    font-weight: 600 !important;
    color: var(--neutral-100) !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* Fix for inline selects like billing cycle */
#order-standard_cart .select-inline {
    width: 100% !important;
    max-width: 100% !important;
}

/* Padding for the product info inside the container */
#order-standard_cart .product-info {
    background-color: var(--neutral-850, rgba(255, 255, 255, 0.03)) !important;
    padding: 20px !important;
    border-radius: 14px !important;
    margin-bottom: 24px !important;
    border: 1px solid var(--neutral-700) !important;
}

#order-standard_cart .product-info .product-title {
    border-radius: 14px 14px 0 0 !important;
}

/* Ensure all dropdowns and menus are rounded */
#order-standard_cart .dropdown-menu {
    border-radius: 14px !important;
    border: 1px solid var(--neutral-700) !important;
    background-color: var(--neutral-800) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    padding: 8px 0 !important;
}

#order-standard_cart .dropdown-menu li>a {
    border-radius: 8px !important;
    margin: 2px 8px !important;
}

/* Requirement & Danger Colors */
.text-danger,
.required,
#order-standard_cart label .required,
#order-standard_cart .text-danger {
    color: #ff4d4d !important;
}

/* Seamless Footer Styling */
#footer,
.footer {
    background-color: var(--neutral-800) !important;
    border: none !important;
    border-top: none !important;
    padding: 15px 0 !important;
}

#footer .container,
.footer .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
}

#footer p,
.footer p,
#footer ul,
.footer ul {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
}

#footer p.copyright,
.footer p.copyright {
    order: 1 !important;
}

#footer ul.nav,
.footer ul.nav {
    order: 2 !important;
}

#footer ul.list-inline,
.footer ul.list-inline {
    order: 3 !important;
}

/* Homepage Action Icon Buttons (Theme matching) */
.action-icon-btns a {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
}

.action-icon-btns a .ico-container i {
    color: var(--primary-500) !important;
}

.action-icon-btns a:hover {
    background-color: var(--neutral-800) !important;
    border-color: var(--primary-500) !important;
    color: var(--neutral-100) !important;
}

/* ── DataTables & Standard Tables Styling (Aggressive) ── */
.table-container,
.dataTables_wrapper,
.table-responsive,
table.table,
.table,
.dataTable,
table.dataTable {
    background-color: var(--neutral-900) !important;
    color: var(--neutral-300) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 14px !important;
}

table.table tr,
table.dataTable tr,
.table tr,
.dataTable tr {
    background-color: var(--neutral-900) !important;
}

table.table td,
table.table th,
table.dataTable td,
table.dataTable th,
.table td,
.table th,
.dataTable td,
.dataTable th {
    background-color: var(--neutral-900) !important;
    color: var(--neutral-300) !important;
    border-top: 1px solid var(--neutral-700) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    border-left: none !important;
    border-right: none !important;
}

table.table thead th,
table.dataTable thead th,
.table thead th,
.dataTable thead th {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border-bottom: 2px solid var(--neutral-700) !important;
}

/* Nth-child logic for striped tables */
table.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd),
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.odd {
    background-color: var(--neutral-800) !important;
}

table.table-striped tbody tr:nth-of-type(odd) td,
.table-striped tbody tr:nth-of-type(odd) td,
table.dataTable.display tbody tr.odd td,
table.dataTable.stripe tbody tr.odd td {
    background-color: var(--neutral-800) !important;
}

/* Hover state */
.table-hover tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: var(--neutral-700) !important;
}

.table-hover tbody tr:hover td,
table.dataTable.hover tbody tr:hover td,
table.dataTable.display tbody tr:hover td {
    background-color: var(--neutral-700) !important;
}

/* ── Alert & Warning Messages (Get Help! button style) ── */
div.alert-warning,
div[style*="ffffd2"],
div[style*="FFFFD2"],
div[style*="ffffe0"],
div[style*="FFFFE0"],
div.dev-license-msg {
    background: rgba(250, 204, 21, 0.1) !important;
    color: rgb(250, 204, 21) !important;
    border: 0.5px solid rgba(250, 204, 21, 0.4) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
}

div.alert-warning a,
div[style*="ffffd2"] a,
div[style*="FFFFD2"] a,
div[style*="ffffe0"] a,
div[style*="FFFFE0"] a,
div.dev-license-msg a {
    color: rgb(250, 204, 21) !important;
    text-decoration: underline !important;
}

/* ── Invoice View Styling ── */
body {
    background-color: var(--neutral-800) !important;
}

.invoice-container {
    background-color: var(--neutral-900) !important;
    color: var(--neutral-300) !important;
    padding: 50px !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 20px !important;
    max-width: 1000px !important;
    margin: 60px auto !important;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7),
        0 18px 36px -18px rgba(0, 0, 0, 0.7) !important;
}

/* HR dividers */
.invoice-container hr {
    border-color: var(--neutral-700) !important;
}

/* Company name / title */
.invoice-container h2,
.invoice-container h3 {
    color: var(--neutral-100) !important;
}

/* Address blocks */
.invoice-container address,
.invoice-container .small-text {
    color: var(--neutral-400) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

.invoice-container address strong,
.invoice-container .small-text strong,
.invoice-container strong {
    color: var(--neutral-200) !important;
}

/* PAID / UNPAID status badges */
.invoice-container .invoice-status .paid {
    color: var(--green-500) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

.invoice-container .invoice-status .unpaid {
    color: var(--red-500) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

.invoice-container .invoice-status .draft {
    color: var(--yellow-500) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

.invoice-container .invoice-status .refunded,
.invoice-container .invoice-status .cancelled,
.invoice-container .invoice-status .collections {
    color: var(--neutral-400) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

/* Invoice Items card */
.invoice-container .card {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.invoice-container .card-header,
.invoice-container .card-title .font-size-24 {
    background-color: var(--neutral-800) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
    color: var(--neutral-100) !important;
    padding: 14px 20px !important;
}

/* Override the hardcoded bg-info on the Ledger card title */
.invoice-container .card-title.bg-info,
.invoice-container [class*="bg-info"],
.invoice-container [class*="bg-success"],
.invoice-container [class*="bg-primary"] {
    background-color: var(--neutral-800) !important;
    color: var(--primary-400) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
}

/* Table header */
.invoice-container .table thead th,
.invoice-container .table thead td {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border-bottom: 2px solid var(--neutral-700) !important;
    border-top: none !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Table body rows */
.invoice-container .table tbody tr td {
    background-color: var(--neutral-900) !important;
    border-top: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

/* Subtotal / total rows */
.invoice-container .table .total-row {
    background-color: var(--neutral-800) !important;
    border-top: 2px solid var(--neutral-700) !important;
    font-weight: 600 !important;
    color: var(--neutral-100) !important;
}

/* Links inside the invoice (e.g. service name links) */
.invoice-container a {
    color: var(--primary-400) !important;
}

/* transactions-container */
.invoice-container .transactions-container {
    background-color: var(--neutral-900) !important;
}

/* Print / Download buttons */
.invoice-container .btn-default,
.invoice-container~p a {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-300) !important;
    border-radius: 8px !important;
}

.invoice-container .btn-default:hover {
    background-color: var(--neutral-700) !important;
    color: var(--neutral-100) !important;
}

/* Back to Client Area link */
body>p.text-center a {
    color: var(--primary-400) !important;
}

/* Payment btn */
.invoice-container .payment-btn-container {
    margin-top: 20px !important;
}

/* Dashboard Card Consistency — High Specificity */
body .client-home-cards .card {
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
}

body .client-home-cards .card-body {
    flex: 1 0 auto !important;
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Fallback for cards that completely omit the body div when empty */
body .client-home-cards .card:not(:has(.card-body))::after {
    content: "No news to display currently.";
    padding: 30px 22px;
    color: var(--neutral-500);
    font-size: 0.9rem;
    font-style: italic;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ── High-Specificity Select Fixes ── */
body select.form-control,
body select.form-control:focus,
.card-body select.form-control {
    height: 48px !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
    padding: 10px 16px !important;
    padding-right: 40px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(186, 230, 253)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px !important;
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-200) !important;
}

/* Ensure options are readable */
select.form-control option {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-200) !important;
    padding: 10px !important;
}

/* ============================================================
   PRODUCT DETAILS / SERVICES DARK MODE
   ============================================================ */
body div.product-details .product-status,
body div.product-details div.product-status {
    background: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    color: var(--neutral-100) !important;
}

body div.product-details div.product-icon {
    background: var(--neutral-900) !important;
    padding: 30px 20px !important;
    border-radius: 0 !important; /* Theme sets md var, override it */
}

body div.product-details div.product-icon h3, 
body div.product-details div.product-icon h4 {
    color: var(--neutral-100) !important;
    margin: 10px 0 !important;
    font-weight: 700 !important;
}

body div.product-details div.product-icon .fa-stack-2x {
    color: var(--neutral-800) !important;
}

body div.product-details div.product-icon .fa-stack-1x {
    color: var(--primary-400) !important;
}

body div.product-details .product-status-text {
    padding: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.85rem !important;
}

/* Status specific colors for the bottom bar */
body div.product-details .product-status-active .product-status-text { background: var(--green-600) !important; color: white !important; }
body div.product-details .product-status-pending .product-status-text { background: var(--yellow-500) !important; color: #000 !important; }
body div.product-details .product-status-suspended .product-status-text { background: var(--red-600) !important; color: white !important; }
body div.product-details .product-status-terminated .product-status-text { background: #000 !important; color: white !important; }

/* Product Tabs Container */
body div.product-details-tab-container {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    color: var(--neutral-300) !important;
}

body div.product-details-tab-container .row {
    border-bottom: 1px solid var(--neutral-700) !important;
    padding: 12px 0 !important;
}

body div.product-details-tab-container .row:last-child {
    border-bottom: none !important;
}

body div.product-details-tab-container strong {
    color: var(--neutral-100) !important;
}

/* Fix responsive tabs connector */
body .responsive-tabs-sm-connector .bottom-border {
    border-bottom-color: var(--neutral-700) !important;
}

/* ============================================================
   TICKET MARKDOWN EDITOR DARK MODE
   ============================================================ */
body .primary-content .md-editor {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

body .primary-content .md-editor > textarea.markdown-editor,
body .primary-content .md-editor .md-preview,
body .primary-content .md-editor .CodeMirror,
body div.card-body textarea.markdown-editor,
textarea.form-control.markdown-editor {
    background-color: var(--neutral-800) !important;
    background: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 0 !important;
}

body .primary-content .md-editor > textarea.markdown-editor:focus,
textarea.form-control.markdown-editor:focus {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border-color: var(--primary-500) !important;
}

body .primary-content .md-editor .md-header,
body .primary-content .md-editor > .btn-toolbar {
    background-color: var(--neutral-900) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
}

body .primary-content .md-editor .md-footer {
    background-color: var(--neutral-900) !important;
    border-top: 1px solid var(--neutral-700) !important;
    color: var(--neutral-400) !important;
}

/* Hide expand/fullscreen button in markdown editor */
.md-controls,
.md-control-fullscreen,
.md-controls .md-control-fullscreen,
body .md-editor .md-controls,
body .md-editor [data-handler="bootstrap-markdown-handle-fullscreen"],
body [data-handler="bootstrap-markdown-handle-fullscreen"],
body .md-editor .fa-expand,
body .md-editor .fa-arrows-alt,
body .md-editor .fa-expand-arrows-alt,
body .md-editor .fa-compress,
body .md-editor button[title*="Fullscreen"],
body .md-editor button[title*="fullscreen"],
body .md-editor .btn-group:last-child button:last-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   ORDER FORM / CART DARK MODE
   ============================================================ */
#order-standard_cart .view-cart-items .item {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border-bottom: 1px solid var(--neutral-700) !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--neutral-900) !important;
}

#order-standard_cart .view-cart-items-header {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-bottom: none !important;
    color: var(--neutral-100) !important;
    border-radius: 12px 12px 0 0 !important;
}

#order-standard_cart .view-cart-items {
    border: 1px solid var(--neutral-700) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
}

#order-standard_cart .view-cart-empty {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-400) !important;
    padding: 40px !important;
    border-radius: 0 0 12px 12px !important;
}

body #order-standard_cart #orderSummary .summary-container {
    background-color: var(--neutral-900) !important;
    background: var(--neutral-900) !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--neutral-100) !important;
}

body #order-standard_cart #orderSummary,
body #order-standard_cart .secondary-cart-sidebar .order-summary {
    background-color: var(--neutral-900) !important;
    background: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    border-bottom: 3px solid var(--neutral-700) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    color: var(--neutral-100) !important;
}

body #order-standard_cart #orderSummary h2,
body #order-standard_cart #orderSummary .subtotal,
body #order-standard_cart #orderSummary .bordered-totals,
body #order-standard_cart #orderSummary .recurring-totals,
body #order-standard_cart #orderSummary .total-due-today {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--neutral-100) !important;
    border-bottom-color: var(--neutral-700) !important;
}

body #order-standard_cart #orderSummary .recurring-charges,
body #order-standard_cart #orderSummary .total-due-today span:last-child {
    color: var(--neutral-400) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: none !important;
}

#order-standard_cart .view-cart-tabs .nav-link {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-400) !important;
    margin-right: 5px !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: -1px !important;
    z-index: 1 !important;
}

#order-standard_cart .view-cart-tabs .nav-link.active {
    background-color: var(--neutral-800) !important;
    color: var(--neutral-100) !important;
    border-bottom-color: var(--neutral-800) !important;
    z-index: 10 !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--neutral-800) !important;
    border: 1px solid var(--neutral-700) !important;
    border-radius: 0 12px 12px 12px !important;
    padding: 24px !important;
}

/* Fix for promo code input area specifically shown in image */
#order-standard_cart .view-cart-tabs #applyPromo form .form-group {
    position: relative !important;
    margin-bottom: 12px !important;
}

#order-standard_cart .view-cart-tabs #applyPromo form .form-group input {
    background-color: var(--neutral-900) !important;
    border: 1px solid var(--neutral-700) !important;
    color: var(--neutral-100) !important;
    height: 44px !important;
    padding-left: 45px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
}

#order-standard_cart .view-cart-tabs #applyPromo form .form-group .field-icon {
    position: absolute !important;
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%) !important;
    color: var(--neutral-400) !important;
    z-index: 5 !important;
    height: auto !important;
    width: auto !important;
    line-height: 1 !important;
}

#order-standard_cart .view-cart-tabs #applyPromo form button.btn-default {
    background-color: var(--primary-500) !important;
    border-color: var(--primary-600) !important;
    color: white !important;
    border-radius: 10px !important;
    height: 44px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
}

#order-standard_cart .view-cart-tabs #applyPromo form button.btn-default:hover {
    background-color: var(--primary-600) !important;
    transform: translateY(-1px) !important;
}

#order-standard_cart .view-cart-promotion-code {
    background-color: var(--neutral-900) !important;
    border: 1px dashed var(--neutral-600) !important;
    color: var(--neutral-100) !important;
}

#order-standard_cart .btn-link {
    color: var(--primary-400) !important;
}

#order-standard_cart h1, 
#order-standard_cart h2, 
#order-standard_cart h3 {
    color: var(--neutral-100) !important;
}

.footer {
    width: 100% !important;
    padding: 60px 20px !important;
    background: transparent !important;
    border: none !important;
}

@media (min-width: 1024px) {
    .footer {
        padding-left: calc(20px) !important; /* Sidebar is fixed, but footer is inside hs-main-content usually. If it's outside, this needs calc. */
    }
}