@import url("/css/file-tree-card-order-fix.css?v=2.2.0-beta.39");
@import url("/css/file-tree-actions-vertical-stack.css?v=2.2.0-beta.38");
@import url('/css/text-visibility-theme-fix.css?v=2.2.0-beta.35');
@import url('/css/ai-security-logo-theme.css?v=2.2.0-beta.23');
@import url('/css/clawpit-image-theme.css');
@import url('/css/force-opera-rock-texture.css?v=2.2.0-beta.20');
@import url('/css/badgers-clawpit-original-rock-bg-scale.css?v=v2.2.0-beta.18');
/* Badgers Claw-Pit rock background restore fallback */
/* Badgers Claw-Pit default Bootstrap theme fallback */
:root {
    --accent-color: #7d3c98; /* System-wide green accent */
    --text-color: #e0e0e0;
    /* Independent background image variables */
    --body-bg: url("/img/default_background2.png");
    --rock-texture: url("/img/rock-texture.png");
    --button-rock-texture: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)), var(--rock-texture);
    --accent-overlay-soft: color-mix(in srgb, var(--accent-color) 26%, transparent);
    --accent-overlay-med: color-mix(in srgb, var(--accent-color) 35%, transparent);
    --accent-overlay-strong: color-mix(in srgb, var(--accent-color) 48%, transparent);
    --button-rock-texture-hover: linear-gradient(var(--accent-overlay-soft), var(--accent-overlay-soft)), var(--rock-texture);

    /* Branded components using independent variables */
    --sidebar-bg: var(--rock-texture);
    --navbar-bg: linear-gradient(rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.7)), var(--rock-texture);
    --card-bg: linear-gradient(rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.7)), var(--rock-texture);
}

body {
    background-color: #0d0d0d !important;
    background-image: var(--body-bg) !important;
    background-size: cover !important;
    background-position: calc(50% + 100px) center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--text-color) !important;
    font-family: "Segoe UI", sans-serif !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* v1.1.13: Make the global page background stretch across the page and respond to viewport size.
   The previous `contain` behavior made the background act like a centered poster.
   `cover` lets it fill the available page width and scale with the browser size. */
@media (max-width: 767.98px) {
    body {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
}

/* v1.1.14: Center the main page background relative to the content area.
   Because the fixed sidebar occupies 200px, the visual center of the usable page
   is 100px to the right of the browser midpoint. */
@media (min-width: 768px) {
    body {
        background-position: calc(50% + 100px) center !important;
    }
}

/* Sidebar Branding */
.sidebar {
    background: var(--sidebar-bg) !important;
    background-size: cover !important;
    width: 200px !important;
    border-right: 2px solid var(--accent-color) !important;
    padding-top: 1rem;
    padding-right: 12px !important;
    padding-left: 8px !important;
    box-sizing: border-box !important;
}

.btn-sidebar {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    background-image: var(--rock-texture) !important;
    background-size: cover !important;
    background-color: transparent !important;
    border: 1px solid var(--accent-color) !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    transition: all 0.2s;
}

.btn-sidebar:hover,
.btn-sidebar:focus {
    background-image: var(--button-rock-texture-hover) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    color: #fff !important;
}

/* Navbar & Cards */
.navbar {
    background: var(--navbar-bg) !important;
    background-size: cover !important;
    border-bottom: 2px solid var(--accent-color) !important;
}

.card {
    background: var(--card-bg) !important;
    background-size: cover !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--text-color) !important;
    margin-bottom: 2rem;
}

.btn-primary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.dropdown-menu {
    background: var(--card-bg) !important;
    background-size: cover !important;
    border: 1px solid var(--accent-color) !important;
}

/* v1.1.4: rock texture must appear on every visible app button, not only hover.
   This intentionally overrides Bootstrap/theme button background helpers. */
.btn,
button,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.dropdown-item {
    background-image: var(--button-rock-texture) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px #000 !important;
    opacity: 1 !important;
}

.btn:hover,
.btn:focus,
button:hover,
button:focus,
a.btn:hover,
a.btn:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
.dropdown-item:hover,
.dropdown-item:focus {
    background-image: var(--button-rock-texture-hover) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
}

.btn:disabled,
.btn.disabled,
button:disabled {
    background-image: var(--button-rock-texture) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    color: rgba(255,255,255,.75) !important;
    opacity: .65 !important;
}

/* v1.1.6: Every clickable button keeps the rock texture by default,
   then gets a see-through accent-color wash on mouse-over/focus.
   The hover overlay is intentionally light so the rock remains visible. */
.btn:hover,
.btn:focus,
.btn:active,
button:hover,
button:focus,
button:active,
a.btn:hover,
a.btn:focus,
a.btn:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.btn-sidebar:hover,
.btn-sidebar:focus,
.btn-account:hover,
.btn-account:focus,
.btn-ambassador:hover,
.btn-ambassador:focus {
    background: var(--button-rock-texture-hover) center/cover no-repeat !important;
    background-color: transparent !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px #000 !important;
    opacity: 1 !important;
}

.btn,
button,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.dropdown-item,
.btn-sidebar,
.btn-account,
.btn-ambassador {
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

/* v1.1.5: Home page logo was rendering at the full source image size.
   Keep it as a branded hero mark instead of letting it eat the whole page. */
.hero-logo {
    display: block !important;
    width: min(42vw, 420px) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 45vh !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    .hero-logo {
        width: min(70vw, 300px) !important;
        max-height: 35vh !important;
    }
}


/* v1.1.8: Footer copyright text was too muted/dark and visually disappeared.
   Keep the copyright on its own visible line above the policy links. */
.app-footer {
    background: linear-gradient(rgba(20,20,20,.88), rgba(20,20,20,.88)), var(--rock-texture) center/cover no-repeat !important;
    border-top: 1px solid var(--accent-color) !important;
    color: #f2f2f2 !important;
    width: calc(100% - 200px) !important;
    margin-left: 200px !important;
}
.app-footer .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.app-footer .footer-copy {
    display: block !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px #000 !important;
    opacity: 1 !important;
}
.app-footer .footer-links,
.app-footer .footer-separator {
    color: rgba(255,255,255,.82) !important;
}
.app-footer a {
    color: #c98cff !important;
    text-decoration: underline !important;
}
.app-footer a:hover,
.app-footer a:focus {
    color: #ffffff !important;
}


/* v1.1.10: Keep the Proxy Management horizontal slider visible at all times.
   This prevents users from thinking columns are missing when the table is wider than the card. */
.always-visible-scrollbar,
.proxy-management-scroll {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scrollbar-gutter: stable both-edges !important;
    padding-bottom: 14px !important;
    margin-bottom: 2px !important;
    border-bottom: 1px solid var(--accent-border-med, rgba(var(--bs-theme-rgb, 29,185,84), .55)) !important;
}

.proxy-management-scroll .nginx-proxy-table {
    min-width: 980px !important;
    margin-bottom: 0 !important;
}

.proxy-management-scroll::-webkit-scrollbar,
.always-visible-scrollbar::-webkit-scrollbar {
    height: 14px !important;
    display: block !important;
}

.proxy-management-scroll::-webkit-scrollbar-track,
.always-visible-scrollbar::-webkit-scrollbar-track {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid var(--accent-border-soft, rgba(var(--bs-theme-rgb, 29,185,84), .45)) !important;
    border-radius: 999px !important;
}

.proxy-management-scroll::-webkit-scrollbar-thumb,
.always-visible-scrollbar::-webkit-scrollbar-thumb {
    background: var(--accent-scrollbar-thumb, rgba(var(--bs-theme-rgb, 29,185,84), .70)) !important;
    border: 2px solid rgba(0,0,0,.35) !important;
    border-radius: 999px !important;
}

.proxy-management-scroll::-webkit-scrollbar-thumb:hover,
.always-visible-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-scrollbar-thumb-hover, rgba(var(--bs-theme-rgb, 29,185,84), .92)) !important;
}

.proxy-management-scroll {
    scrollbar-color: var(--accent-scrollbar-thumb, rgba(var(--bs-theme-rgb, 29,185,84), .70)) rgba(255,255,255,.10) !important;
    scrollbar-width: auto !important;
}



/* v1.1.12: Give the fixed left sidebar breathing room so buttons do not smash into the right border. */
.sidebar,
nav.sidebar,
.app-sidebar-col.sidebar {
    padding-right: 12px !important;
    padding-left: 8px !important;
    box-sizing: border-box !important;
}

nav.sidebar .btn-sidebar,
nav.sidebar a.btn-sidebar,
nav.sidebar button.btn-sidebar {
    width: 100% !important;
    margin-right: 0 !important;
}

/* v1.1.11: Fluid dashboard shell.
   The old layout capped content at 1200px, so dashboard cards stopped growing on wider screens.
   These rules let the main area and cards use all available browser width beside the fixed sidebar. */
.app-shell {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}
.app-sidebar-col {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
}
.app-main {
    flex: 1 1 auto !important;
    width: calc(100% - 200px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}
.content-wrapper {
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
}
.main-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
}
.main-container > .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.main-container > .row > [class*="col-"] {
    min-width: 0 !important;
}
.card {
    width: 100% !important;
    min-width: 0 !important;
}
.table-responsive {
    max-width: 100% !important;
}
@media (min-width: 1600px) {
    .app-main {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}
@media (max-width: 767.98px) {
    .app-shell {
        display: block !important;
    }
    .app-main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* v1.1.16: Ambassador owner dashboard command center. */
.ambassador-dashboard .card {
    overflow: hidden !important;
}
.ambassador-dashboard .table-responsive {
    scrollbar-gutter: stable both-edges !important;
}
.ambassador-wide-table {
    min-width: 980px !important;
}
.ambassador-dashboard .form-control,
.ambassador-dashboard .form-select {
    background-color: rgba(255,255,255,.94) !important;
    color: #111 !important;
    border: 1px solid rgba(255,255,255,.35) !important;
}
.ambassador-dashboard .badge {
    text-shadow: none !important;
}
@media (min-width: 1600px) {
    .ambassador-wide-table {
        min-width: 1120px !important;
    }
}


/* v1.1.22: Claw Ambassador topbar pill now uses the Brain & Badger icon and opens as a full mega-menu. */
.btn-ambassador {
    border-radius: 999px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

.ambassador-icon {
    width: 48px !important;
    height: 30px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    margin-right: 8px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    background: rgba(0,0,0,.35) !important;
}

.topbar-action-group {
    gap: .5rem !important;
}

.ambassador-mega-wrapper {
    position: static !important;
}

.ambassador-mega-menu {
    width: min(960px, calc(100vw - 2rem)) !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    right: .75rem !important;
    left: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.65) !important;
}

.mega-menu-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: .5rem .5rem 1rem !important;
    border-bottom: 1px solid rgba(211,60,255,.35) !important;
    margin-bottom: 1rem !important;
}

.mega-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.mega-subtitle {
    color: rgba(255,255,255,.72) !important;
    font-size: .9rem !important;
}

.mega-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .85rem !important;
}

.mega-menu-section {
    background: rgba(0,0,0,.28) !important;
    border: 1px solid rgba(211,60,255,.32) !important;
    border-radius: 12px !important;
    padding: .85rem !important;
}

.mega-menu-section h6 {
    color: #fff !important;
    margin-bottom: .75rem !important;
    font-weight: 700 !important;
}

.mega-link {
    display: block !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: .55rem .6rem !important;
    border-radius: 10px !important;
    margin-bottom: .35rem !important;
    background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), var(--rock-texture) center/cover no-repeat !important;
    border: 1px solid rgba(211,60,255,.25) !important;
}

.mega-link:hover,
.mega-link:focus {
    background: var(--button-rock-texture-hover) center/cover no-repeat !important;
    color: #fff !important;
    border-color: var(--accent-color) !important;
}

.mega-link span {
    display: block !important;
    font-weight: 650 !important;
}

.mega-link small {
    display: block !important;
    color: rgba(255,255,255,.68) !important;
    line-height: 1.25 !important;
}

@media (max-width: 991.98px) {
    .mega-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .mega-menu-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

@media (max-width: 767.98px) {
    .topbar-action-group {
        width: 100% !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 575.98px) {
    .ambassador-mega-menu {
        width: calc(100vw - 1rem) !important;
        right: .5rem !important;
    }
    .mega-menu-grid {
        grid-template-columns: 1fr !important;
    }
}


/* v1.1.22: Match Account Access to the Claw Ambassador pill button shape. */
.btn-account {
    border-radius: 999px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.55) !important;
    white-space: nowrap !important;
}

.btn-account .account-icon {
    flex: 0 0 auto !important;
}


/* v1.1.24: Account Access now uses a mega menu to match Claw Ambassador. */
.account-mega-menu {
    min-width: 760px !important;
}

.account-icon-wrap {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.mega-link-button {
    cursor: pointer;
}


/* v1.1.26: Drag-and-drop Ambassador dashboard layout customization */
.dashboard-draggable-card {
    cursor: grab;
    transition: transform 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.dashboard-draggable-card > .card {
    position: relative;
}

.dashboard-draggable-card.dragging {
    opacity: 0.72;
    transform: scale(0.99);
    filter: brightness(1.08);
}

.drag-chip {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    z-index: 2;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--accent-overlay-strong, rgba(125, 60, 152, 0.48));
    border: 1px solid var(--accent-color);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
    pointer-events: none;
}

.dashboard-card-ready:hover {
    transform: translateY(-2px);
}


/* v1.1.27: Unified login card with Brain & Badger profile image */
.unified-login-page {
    min-height: 62vh;
    align-items: center;
}

.unified-login-card {
    max-width: 100%;
}

.login-profile-frame {
    width: min(260px, 90%);
    height: 120px;
    border: 1px solid var(--accent-color);
    border-radius: 18px;
    background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), var(--rock-texture) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.65), 0 0 18px rgba(125,60,152,.28);
}

.login-profile-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.unified-login-card .form-control {
    width: 100% !important;
}


/* v1.1.30: Keep Total Users through Open Issues locked into one responsive top row. */
.dashboard-top-row-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.ambassador-top-metrics {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: clamp(0.45rem, 0.85vw, 1rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
}

.ambassador-top-metric-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.ambassador-top-metric-card .card {
    min-height: clamp(92px, 9vw, 128px) !important;
    padding: clamp(0.65rem, 1vw, 1rem) !important;
    overflow: hidden !important;
}

.ambassador-top-metric-card small {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 3.2rem) !important;
    font-size: clamp(0.66rem, 0.78vw, 0.86rem) !important;
}

.ambassador-top-metric-card h2 {
    font-size: clamp(1.2rem, 2.1vw, 2rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 0.45rem !important;
}

.ambassador-top-metric-card .badge {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(0.58rem, 0.72vw, 0.78rem) !important;
}

.ambassador-top-metric-card .drag-chip {
    top: 0.55rem !important;
    right: 0.55rem !important;
    padding: 0.18rem 0.42rem !important;
    font-size: clamp(0.55rem, 0.66vw, 0.72rem) !important;
}

@media (max-width: 1100px) {
    .ambassador-top-metrics {
        gap: 0.4rem !important;
    }

    .ambassador-top-metric-card .card {
        min-height: 86px !important;
    }

    .ambassador-top-metric-card small {
        max-width: calc(100% - 2.7rem) !important;
    }
}

/* v1.1.35: Ambassador dashboard auto-stretch cards and controls.
   Cards now grow into unused row space and form controls expand to fill the card width. */
.ambassador-dashboard {
    align-items: stretch !important;
}

.ambassador-dashboard > .dashboard-draggable-card {
    flex-grow: 1 !important;
    min-width: min(100%, 360px) !important;
}

/* Half-width control cards expand when there is unused room beside them. */
.ambassador-dashboard > .dashboard-draggable-card.col-xl-6,
.ambassador-dashboard > .dashboard-draggable-card.col-xxl-4,
.ambassador-dashboard > .dashboard-draggable-card.col-xxl-8 {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 620px !important;
}

/* Full-width operational cards always consume the full available content lane. */
.ambassador-dashboard > .dashboard-draggable-card.col-12:not(.col-xl-6):not(.col-xxl-4):not(.col-xxl-8) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Forms inside cards should stretch across the full card instead of leaving dead space. */
.ambassador-dashboard .card > form.row,
.ambassador-dashboard .card form.row.ambassador-stretch-form {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    align-items: stretch !important;
}

.ambassador-dashboard .card > form.row > [class*="col-"],
.ambassador-dashboard .card form.row.ambassador-stretch-form > [class*="col-"] {
    flex: 1 1 180px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 160px !important;
}

.ambassador-dashboard .card > form.row > [class*="col-"] .btn,
.ambassador-dashboard .card form.row.ambassador-stretch-form > [class*="col-"] .btn,
.ambassador-dashboard .card > form.row > [class*="col-"] .form-control,
.ambassador-dashboard .card > form.row > [class*="col-"] .form-select,
.ambassador-dashboard .card form.row.ambassador-stretch-form > [class*="col-"] .form-control,
.ambassador-dashboard .card form.row.ambassador-stretch-form > [class*="col-"] .form-select {
    width: 100% !important;
    min-width: 0 !important;
}

/* Table controls should use the full cell width so inputs do not bunch up. */
.ambassador-dashboard table .form-control,
.ambassador-dashboard table .form-select {
    width: 100% !important;
    min-width: 120px !important;
}

.ambassador-dashboard table td,
.ambassador-dashboard table th {
    vertical-align: middle !important;
}

.ambassador-wide-table {
    width: 100% !important;
    min-width: 980px !important;
}

/* When a card contains only one half-width control panel in a row, let it occupy the entire row. */
@media (min-width: 1200px) {
    .ambassador-dashboard > .dashboard-draggable-card.col-xl-6:only-of-type {
        flex-basis: 100% !important;
    }
}

@media (max-width: 1199.98px) {
    .ambassador-dashboard > .dashboard-draggable-card.col-xl-6,
    .ambassador-dashboard > .dashboard-draggable-card.col-xxl-4,
    .ambassador-dashboard > .dashboard-draggable-card.col-xxl-8 {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}


/* v1.1.42: Modules & Panels inventory must list everything cleanly without action buttons smashing into the edge. */
.module-inventory-scroll {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    padding-right: 1.25rem !important;
    padding-bottom: 1rem !important;
    scrollbar-gutter: stable both-edges;
}

.module-inventory-table {
    min-width: 1400px !important;
    width: max-content !important;
    margin-right: 1.25rem !important;
}

.module-actions-col,
.module-actions-cell {
    min-width: 170px !important;
    width: 170px !important;
    padding-right: 1.25rem !important;
}

.module-actions-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    align-items: center !important;
    min-width: max-content !important;
    padding-right: 0.75rem !important;
}

.module-actions-wrap .btn,
.module-actions-wrap form,
.module-actions-wrap button {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.module-card-grid {
    padding-bottom: 2rem !important;
}

.module-card-grid .card {
    min-height: 260px;
}

/* v1.1.43: Keep every Modules & Panels action button grouped on the far right with safe scroll space. */
.module-inventory-scroll {
    width: 100% !important;
    overflow-x: auto !important;
    padding-right: 1rem !important;
    padding-bottom: .65rem !important;
}

.module-inventory-table {
    min-width: 1480px !important;
}

.module-inventory-table th,
.module-inventory-table td {
    vertical-align: middle !important;
}

.module-actions-col {
    min-width: 310px !important;
    width: 310px !important;
    text-align: right !important;
    padding-right: 1.25rem !important;
}

.module-actions-cell {
    min-width: 310px !important;
    width: 310px !important;
    padding-right: 1.25rem !important;
}

.module-actions-wrap,
.module-card-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .4rem !important;
    min-width: max-content !important;
}

.module-actions-wrap form,
.module-card-actions form {
    display: inline-flex !important;
    margin: 0 !important;
}

.module-actions-wrap .btn,
.module-card-actions .btn {
    white-space: nowrap !important;
    min-width: 54px !important;
}

.module-card-actions {
    margin-left: auto !important;
}

.module-edit-form .form-control,
.module-edit-form .form-select,
.module-edit-form textarea {
    width: 100% !important;
}


/* v1.1.44: Grouped Modules & Panels card sections */
.module-group-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.module-card-group {
    border-color: var(--accent-color) !important;
}

.module-card-group > .module-card-grid {
    margin-top: 0 !important;
}

.module-inventory-card {
    min-height: 260px;
}

.module-card-actions {
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.08);
}


/* v1.1.49: Align footer with the body/content area beside the fixed sidebar. */
@media (max-width: 767.98px) {
    .app-footer {
        width: 100% !important;
        margin-left: 0 !important;
    }
}
.app-footer .footer-inner {
    max-width: none !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}


/* v1.1.52: keep inventory action buttons usable and add installable module download actions. */
.module-inventory-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-right: 2rem !important;
    scrollbar-gutter: stable both-edges !important;
}

.module-inventory-table {
    min-width: 1720px !important;
    width: max-content !important;
}

.module-actions-col,
.module-actions-cell {
    min-width: 450px !important;
    width: 450px !important;
    max-width: none !important;
    padding-right: 2rem !important;
}

.module-actions-wrap,
.module-card-actions {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .45rem !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.module-actions-wrap a,
.module-actions-wrap button,
.module-card-actions a,
.module-card-actions button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.module-card-actions {
    flex-wrap: wrap !important;
}

/* v1.1.55: Contact page follows the Badgers Claw rock/purple theme. */
.contact-page-shell {
    width: 100%;
    min-height: calc(100vh - 190px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3.5rem) 1rem;
}

.contact-card {
    width: min(100%, 920px);
    background: linear-gradient(rgba(10, 10, 10, 0.74), rgba(10, 10, 10, 0.74)), var(--rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 0 1px rgba(211, 60, 255, 0.12), 0 18px 44px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.04) !important;
}

.contact-card-logo {
    width: min(260px, 76%);
    max-height: 115px;
    object-fit: contain;
    border: 1px solid rgba(211, 60, 255, 0.55);
    border-radius: 16px;
    padding: 0.35rem 0.55rem;
    background: rgba(0,0,0,0.32);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), 0 0 22px rgba(125,60,152,0.25);
    margin-bottom: 1rem;
}

.contact-card h2 {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 2px 4px #000;
}

.contact-theme-form .form-label {
    color: #fff !important;
    font-weight: 650;
    text-shadow: 0 1px 2px #000;
}

.contact-theme-form .form-control,
.contact-theme-form .themed-input,
.contact-theme-form input,
.contact-theme-form textarea {
    background: linear-gradient(rgba(12,12,12,0.70), rgba(12,12,12,0.70)), var(--rock-texture) center/cover no-repeat !important;
    border: 1px solid rgba(211, 60, 255, 0.62) !important;
    border-radius: 8px !important;
    color: #f4f4f4 !important;
    -webkit-text-fill-color: #f4f4f4 !important;
    caret-color: #ffffff !important;
    min-height: 44px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.22) !important;
    appearance: none;
}

.contact-theme-form .form-control:focus,
.contact-theme-form .themed-input:focus,
.contact-theme-form input:focus,
.contact-theme-form textarea:focus {
    background: linear-gradient(rgba(18,18,18,0.64), rgba(18,18,18,0.64)), var(--rock-texture) center/cover no-repeat !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 0.18rem rgba(125, 60, 152, 0.38), inset 0 1px 5px rgba(0,0,0,0.75) !important;
    outline: none !important;
}

.contact-theme-form input:-webkit-autofill,
.contact-theme-form input:-webkit-autofill:hover,
.contact-theme-form input:-webkit-autofill:focus,
.contact-theme-form textarea:-webkit-autofill,
.contact-theme-form textarea:-webkit-autofill:hover,
.contact-theme-form textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px rgba(12,12,12,0.92) inset, inset 0 1px 5px rgba(0,0,0,0.75) !important;
    border: 1px solid var(--accent-color) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.contact-theme-form .themed-textarea {
    resize: vertical;
    min-height: 160px;
}

.btn-contact-submit {
    background: var(--button-rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-color) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px #000 !important;
    min-height: 46px;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.55), 0 0 16px rgba(125,60,152,0.22) !important;
}

.btn-contact-submit:hover,
.btn-contact-submit:focus {
    background: var(--button-rock-texture-hover) center/cover no-repeat !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.contact-theme-form .form-control::placeholder,
.contact-theme-form .themed-input::placeholder,
.contact-theme-form input::placeholder,
.contact-theme-form textarea::placeholder {
    color: rgba(255,255,255,0.58) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.58) !important;
}


/* v1.1.56: clean admin tool pages; no exposed internal path placeholders */
.admin-tool-clean-card code,
.admin-tool-clean-card .internal-path,
.admin-tool-clean-card .raw-route {
    display: none !important;
}

.admin-tool-clean-card .card {
    overflow: hidden;
}


/* v1.1.67: Mega menus now follow the active theme accent instead of old hard-coded purple. */
:root {
    --accent-overlay-soft: color-mix(in srgb, var(--accent-color) 26%, transparent);
    --accent-overlay-med: color-mix(in srgb, var(--accent-color) 35%, transparent);
    --accent-overlay-strong: color-mix(in srgb, var(--accent-color) 48%, transparent);
    --accent-border-soft: color-mix(in srgb, var(--accent-color) 32%, transparent);
    --accent-border-med: color-mix(in srgb, var(--accent-color) 48%, transparent);
    --button-rock-texture-hover: linear-gradient(var(--accent-overlay-soft), var(--accent-overlay-soft)), var(--rock-texture);
}

.ambassador-mega-menu,
.account-mega-menu {
    background: var(--card-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid var(--accent-color) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.72), 0 0 24px var(--accent-border-soft) !important;
}

.ambassador-mega-menu .mega-menu-header,
.account-mega-menu .mega-menu-header {
    border-bottom: 1px solid var(--accent-border-med) !important;
}

.ambassador-mega-menu .mega-menu-section,
.account-mega-menu .mega-menu-section {
    background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), var(--rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-border-med) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.55) !important;
}

.ambassador-mega-menu .mega-link,
.account-mega-menu .mega-link,
.ambassador-mega-menu .mega-link-button,
.account-mega-menu .mega-link-button {
    background: var(--button-rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-border-soft) !important;
    color: #fff !important;
}

.ambassador-mega-menu .mega-link:hover,
.ambassador-mega-menu .mega-link:focus,
.account-mega-menu .mega-link:hover,
.account-mega-menu .mega-link:focus,
.ambassador-mega-menu .mega-link-button:hover,
.ambassador-mega-menu .mega-link-button:focus,
.account-mega-menu .mega-link-button:hover,
.account-mega-menu .mega-link-button:focus {
    background: var(--button-rock-texture-hover) center/cover no-repeat !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 14px var(--accent-border-med), inset 0 2px 6px rgba(0,0,0,.55) !important;
}

.ambassador-mega-menu .mega-link-icon,
.account-mega-menu .mega-link-icon {
    background: linear-gradient(var(--accent-overlay-soft), var(--accent-overlay-soft)), var(--rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-border-med) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 10px var(--accent-border-soft) !important;
}


/* v1.1.71: Installed-module sidebar grouping. WHMCS modules stay inside one themed dropdown. */
.sidebar-module-group {
    width: 100% !important;
}

.sidebar-module-group > summary {
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
}

.sidebar-module-group > summary::-webkit-details-marker {
    display: none !important;
}

.sidebar-module-group > summary::after {
    content: "▾";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    font-size: .85rem;
}

.sidebar-module-group:not([open]) > summary::after {
    content: "▸";
}

.sidebar-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    margin-left: .35rem;
    border-radius: 999px;
    border: 1px solid var(--accent-color);
    background: rgba(0,0,0,.35);
    font-size: .72rem;
}

.sidebar-submenu {
    width: 100%;
    padding-left: 10px;
    border-left: 1px solid var(--accent-color);
}

.btn-sidebar-sub {
    font-size: .9rem !important;
    padding: 8px 9px !important;
    opacity: .95;
}


/* v1.1.80: Email Command Center metric cards use their own responsive grid.
   Do not inherit Ambassador dashboard top-row compression; email cards must stay horizontal/readable. */
.email-command-dashboard .email-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: clamp(0.75rem, 1vw, 1rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.email-command-dashboard .email-metric-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;
}

.email-command-dashboard .email-metric-card .card {
    min-height: 118px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.email-command-dashboard .email-metric-card small,
.email-command-dashboard .email-metric-card h2,
.email-command-dashboard .email-metric-card span,
.email-command-dashboard .email-metric-card .badge {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.email-command-dashboard .email-metric-card h2 {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem) !important;
    line-height: 1.05 !important;
    margin: .35rem 0 .45rem !important;
}

.email-command-dashboard .card input.form-control,
.email-command-dashboard .card select.form-select,
.email-command-dashboard .card textarea.form-control {
    min-width: 0 !important;
}

@media (min-width: 1400px) {
    .email-command-dashboard .email-metrics-grid {
        grid-template-columns: repeat(6, minmax(150px, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .email-command-dashboard .email-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* v1.1.82: Email topbar mega-menu now uses the same themed shell as Ambassador/Account. */
.email-mega-menu {
    width: min(960px, calc(100vw - 2rem)) !important;
    min-width: min(960px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    padding: 1rem !important;
    right: 0 !important;
    left: auto !important;
    margin-top: .5rem !important;
    background: var(--card-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.72), 0 0 24px var(--accent-border-soft) !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.email-mega-menu .mega-menu-header {
    border-bottom: 1px solid var(--accent-border-med) !important;
}
.email-mega-menu .mega-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .85rem !important;
}
.email-mega-menu .mega-menu-section {
    background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), var(--rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-border-med) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.55) !important;
}
.email-mega-menu .mega-link,
.email-mega-menu .mega-link-button {
    display: flex !important;
    align-items: flex-start !important;
    gap: .65rem !important;
    background: var(--button-rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-border-soft) !important;
    color: #fff !important;
}
.email-mega-menu .mega-link:hover,
.email-mega-menu .mega-link:focus,
.email-mega-menu .mega-link-button:hover,
.email-mega-menu .mega-link-button:focus {
    background: var(--button-rock-texture-hover) center/cover no-repeat !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 14px var(--accent-border-med), inset 0 2px 6px rgba(0,0,0,.55) !important;
}
.email-mega-menu .mega-link-icon {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    background: linear-gradient(var(--accent-overlay-soft), var(--accent-overlay-soft)), var(--rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-border-med) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 10px var(--accent-border-soft) !important;
}
.email-mega-menu .mega-link-body {
    min-width: 0 !important;
}
.email-mega-menu .mega-link-body span,
.email-mega-menu .mega-link-body small {
    overflow-wrap: anywhere !important;
}
@media (max-width: 991.98px) {
    .email-mega-menu .mega-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 575.98px) {
    .email-mega-menu {
        width: calc(100vw - 1rem) !important;
        min-width: calc(100vw - 1rem) !important;
        right: .5rem !important;
    }
    .email-mega-menu .mega-menu-grid {
        grid-template-columns: 1fr !important;
    }
}


/* v1.1.83: Make every visible table/utility scrollbar follow the active theme accent.
   Older builds hard-coded purple for always-visible sliders. */
:root {
    --accent-scrollbar-thumb: rgba(var(--bs-theme-rgb, 29,185,84), .72);
    --accent-scrollbar-thumb-hover: rgba(var(--bs-theme-rgb, 29,185,84), .94);
    --accent-scrollbar-track: rgba(255,255,255,.10);
}

.always-visible-scrollbar,
.proxy-management-scroll,
.email-command-scroll,
.module-table-scroll,
.inventory-scroll,
.table-responsive,
.card-table-scroll {
    scrollbar-color: var(--accent-scrollbar-thumb) var(--accent-scrollbar-track) !important;
}

.always-visible-scrollbar::-webkit-scrollbar-track,
.proxy-management-scroll::-webkit-scrollbar-track,
.email-command-scroll::-webkit-scrollbar-track,
.module-table-scroll::-webkit-scrollbar-track,
.inventory-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.card-table-scroll::-webkit-scrollbar-track {
    background: var(--accent-scrollbar-track) !important;
    border: 1px solid var(--accent-border-soft, rgba(var(--bs-theme-rgb, 29,185,84), .45)) !important;
    border-radius: 999px !important;
}

.always-visible-scrollbar::-webkit-scrollbar-thumb,
.proxy-management-scroll::-webkit-scrollbar-thumb,
.email-command-scroll::-webkit-scrollbar-thumb,
.module-table-scroll::-webkit-scrollbar-thumb,
.inventory-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.card-table-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-scrollbar-thumb) !important;
    border: 2px solid rgba(0,0,0,.35) !important;
    border-radius: 999px !important;
}

.always-visible-scrollbar::-webkit-scrollbar-thumb:hover,
.proxy-management-scroll::-webkit-scrollbar-thumb:hover,
.email-command-scroll::-webkit-scrollbar-thumb:hover,
.module-table-scroll::-webkit-scrollbar-thumb:hover,
.inventory-scroll::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.card-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-scrollbar-thumb-hover) !important;
}

.progress-bar,
.progress .progress-bar {
    background: var(--bs-theme, var(--accent-color, #1db954)) !important;
    box-shadow: 0 0 8px rgba(var(--bs-theme-rgb, 29,185,84), .40) !important;
}


/* v1.1.86: global licensed badges + drag handles for every movable card. */
.license-badge,
.badge-licensed,
.module-license-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    border: 1px solid var(--accent-color) !important;
    background: linear-gradient(var(--accent-overlay-med), var(--accent-overlay-med)), var(--rock-texture) center/cover no-repeat !important;
    color: #fff !important;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 10px var(--accent-overlay-soft);
    font-weight: 700;
}
.dashboard-draggable-card > .card > .drag-chip,
.module-card-group.dashboard-draggable-card > .drag-chip,
.card.dashboard-draggable-card > .drag-chip {
    background: var(--accent-overlay-strong, rgba(125,60,152,.48)) !important;
    border-color: var(--accent-color) !important;
}
.dashboard-draggable-card > .card {
    padding-top: max(var(--bs-card-spacer-y, 1rem), 1rem);
}


/* v1.1.87: Keep draggable card controls clear of the drag chip.
   The drag badge now reserves its own top-right lane so action buttons,
   count badges, and header controls do not sit underneath it. */
.dashboard-draggable-card > .card,
.card.dashboard-draggable-card {
    position: relative !important;
}
.dashboard-draggable-card > .card.has-drag-chip,
.card.dashboard-draggable-card.has-drag-chip,
.dashboard-draggable-card > .card:has(> .drag-chip),
.card.dashboard-draggable-card:has(> .drag-chip) {
    padding-top: calc(var(--bs-card-spacer-y, 1rem) + 2.35rem) !important;
}
.dashboard-draggable-card > .card > .drag-chip,
.card.dashboard-draggable-card > .drag-chip {
    top: .75rem !important;
    right: .85rem !important;
    z-index: 8 !important;
    min-width: 3.75rem;
    text-align: center;
    white-space: nowrap;
}
.dashboard-draggable-card > .card.has-drag-chip > .d-flex:first-child,
.dashboard-draggable-card > .card:has(> .drag-chip) > .d-flex:first-child,
.card.dashboard-draggable-card.has-drag-chip > .d-flex:first-child,
.card.dashboard-draggable-card:has(> .drag-chip) > .d-flex:first-child {
    padding-right: 5.25rem !important;
}
.dashboard-draggable-card > .card.has-drag-chip .card-actions,
.dashboard-draggable-card > .card.has-drag-chip .action-buttons,
.dashboard-draggable-card > .card:has(> .drag-chip) .card-actions,
.dashboard-draggable-card > .card:has(> .drag-chip) .action-buttons {
    margin-right: 5.25rem;
}
@media (max-width: 768px) {
    .dashboard-draggable-card > .card.has-drag-chip,
    .card.dashboard-draggable-card.has-drag-chip,
    .dashboard-draggable-card > .card:has(> .drag-chip),
    .card.dashboard-draggable-card:has(> .drag-chip) {
        padding-top: calc(var(--bs-card-spacer-y, 1rem) + 2.8rem) !important;
    }
    .dashboard-draggable-card > .card.has-drag-chip > .d-flex:first-child,
    .dashboard-draggable-card > .card:has(> .drag-chip) > .d-flex:first-child {
        padding-right: 0 !important;
    }
}


/* v2.0.0-beta.7: Sidebar Services Group mega-menu for NGINX, WireGuard, and Stripe. */
.sidebar-services-mega > summary {
    font-weight: 800 !important;
    letter-spacing: .2px !important;
}
.sidebar-services-mega .sidebar-submenu {
    padding: 8px 0 0 10px !important;
    margin-top: 8px !important;
    border-left: 2px solid var(--accent-color) !important;
    background: linear-gradient(var(--accent-overlay-soft), var(--accent-overlay-soft)), var(--rock-texture) center/cover no-repeat !important;
    border-radius: 10px !important;
}
.sidebar-services-mega .btn-sidebar-sub {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
}


/* v2.0.0-beta.8: Sidebar mega-menu groups. Never replace one group with another; WHMCS, Services, and Add-on groups coexist. */
.sidebar-mega-group {
    width: 100% !important;
}
.sidebar-mega-group > summary.sidebar-group-toggle {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem !important;
    padding-right: 2.2rem !important;
    background: var(--button-rock-texture) center/cover no-repeat !important;
    border-color: var(--accent-color) !important;
}
.sidebar-group-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
    min-width: 0 !important;
}
.sidebar-group-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    border-radius: .45rem !important;
    border: 1px solid var(--accent-border-med) !important;
    background: linear-gradient(var(--accent-overlay-soft), var(--accent-overlay-soft)), var(--rock-texture) center/cover no-repeat !important;
    font-size: .85rem !important;
}
.sidebar-mega-group .sidebar-mega-submenu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .45rem !important;
    padding: .55rem .35rem .15rem .65rem !important;
    margin-top: .5rem !important;
    border-left: 2px solid var(--accent-color) !important;
    border-radius: 12px !important;
    background: linear-gradient(var(--accent-overlay-soft), var(--accent-overlay-soft)), var(--rock-texture) center/cover no-repeat !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.5) !important;
}
.sidebar-mega-group .sidebar-mega-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .15rem !important;
    min-height: 50px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}
.sidebar-mega-link-title {
    font-weight: 800 !important;
}
.sidebar-mega-link-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .25rem !important;
    font-size: .68rem !important;
    opacity: .82 !important;
}
.sidebar-mega-link-meta span {
    border: 1px solid var(--accent-border-med) !important;
    background: rgba(0,0,0,.35) !important;
    border-radius: 999px !important;
    padding: .08rem .35rem !important;
}
.sidebar-whmcs-mega > summary,
.sidebar-services-mega > summary,
.sidebar-addons-mega > summary {
    font-weight: 800 !important;
}

/* v2.0.0-beta.11 repair: Sidebar mega-menu flyouts open to the right.
   Keeps all existing groups, but stops dropdowns from pushing the sidebar taller. */
.sidebar-module-group.sidebar-mega-group {
    position: relative !important;
    overflow: visible !important;
}
.sidebar-module-group.sidebar-mega-group > summary.sidebar-group-toggle {
    position: relative !important;
    z-index: 21 !important;
}
.sidebar-module-group.sidebar-mega-group > summary.sidebar-group-toggle::after {
    content: "▸" !important;
    right: 12px !important;
}
.sidebar-module-group.sidebar-mega-group[open] > summary.sidebar-group-toggle::after,
.sidebar-module-group.sidebar-mega-group:hover > summary.sidebar-group-toggle::after,
.sidebar-module-group.sidebar-mega-group:focus-within > summary.sidebar-group-toggle::after {
    content: "▸" !important;
}
.sidebar-mega-group .sidebar-flyout-menu,
.sidebar-mega-group .sidebar-mega-submenu.sidebar-flyout-menu {
    position: absolute !important;
    left: calc(100% - 2px) !important;
    top: 0 !important;
    width: min(640px, calc(100vw - 330px)) !important;
    min-width: 420px !important;
    max-height: min(72vh, 720px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
    padding: 1rem !important;
    margin: 0 !important;
    border: 1px solid var(--accent-color) !important;
    border-left: 1px solid var(--accent-color) !important;
    border-radius: 14px !important;
    background: var(--card-bg) !important;
    background-image: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), var(--rock-texture) !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.72), 0 0 24px var(--accent-border-soft) !important;
    z-index: 9999 !important;
}
.sidebar-mega-group[open] > .sidebar-flyout-menu,
.sidebar-mega-group:hover > .sidebar-flyout-menu,
.sidebar-mega-group:focus-within > .sidebar-flyout-menu {
    display: grid !important;
    animation: sidebarMegaFlyoutIn .12s ease-out !important;
}
@keyframes sidebarMegaFlyoutIn {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}
.sidebar-flyout-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: .25rem .25rem .85rem !important;
    margin-bottom: .15rem !important;
    border-bottom: 1px solid var(--accent-border-med) !important;
}
.sidebar-flyout-title {
    color: #fff !important;
    font-weight: 850 !important;
    font-size: 1rem !important;
    letter-spacing: .15px !important;
}
.sidebar-flyout-subtitle {
    color: rgba(255,255,255,.72) !important;
    font-size: .82rem !important;
    margin-top: .15rem !important;
}
.sidebar-flyout-count {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2rem !important;
    height: 2rem !important;
    padding: 0 .6rem !important;
    border-radius: 999px !important;
    border: 1px solid var(--accent-color) !important;
    background: rgba(0,0,0,.45) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 12px var(--accent-border-soft) !important;
    color: #fff !important;
    font-weight: 800 !important;
}
.sidebar-flyout-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
}
.sidebar-flyout-grid .sidebar-mega-link {
    margin: 0 !important;
    min-height: 72px !important;
    padding: .75rem !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: var(--button-rock-texture) center/cover no-repeat !important;
    border: 1px solid var(--accent-border-soft) !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.52) !important;
}
.sidebar-flyout-grid .sidebar-mega-link:hover,
.sidebar-flyout-grid .sidebar-mega-link:focus {
    background: var(--button-rock-texture-hover) center/cover no-repeat !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 14px var(--accent-border-med), inset 0 2px 6px rgba(0,0,0,.55) !important;
    color: #fff !important;
}
.sidebar-flyout-grid .sidebar-mega-link-title {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}
.sidebar-flyout-grid .sidebar-mega-link-meta {
    justify-content: flex-start !important;
}
@media (max-width: 900px) {
    .sidebar-mega-group .sidebar-flyout-menu,
    .sidebar-mega-group .sidebar-mega-submenu.sidebar-flyout-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 55vh !important;
        margin-top: .5rem !important;
    }
    .sidebar-flyout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* v2.0.0-beta.11 repair: Module inventory card action buttons must stay inside cards. */
.module-card-grid,
.module-card-grid .row,
.module-card-grid [class*="col-"] {
    min-width: 0 !important;
}

.module-inventory-card {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.module-inventory-card h1,
.module-inventory-card h2,
.module-inventory-card h3,
.module-inventory-card h4,
.module-inventory-card p,
.module-inventory-card div,
.module-inventory-card span,
.module-inventory-card code {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.module-inventory-card .module-card-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-top: .75rem !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) !important;
    gap: .4rem !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.module-inventory-card .module-card-actions form,
.module-inventory-card .module-card-actions a,
.module-inventory-card .module-card-actions button {
    min-width: 0 !important;
    max-width: 100% !important;
}

.module-inventory-card .module-card-actions form {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.module-inventory-card .module-card-actions .btn,
.module-inventory-card .module-card-actions button,
.module-inventory-card .module-card-actions a.btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;
    padding: .35rem .35rem !important;
    font-size: clamp(.68rem, .75vw, .82rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

@media (max-width: 1400px) {
    .module-inventory-card .module-card-actions {
        grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)) !important;
    }
    .module-inventory-card .module-card-actions .btn,
    .module-inventory-card .module-card-actions button,
    .module-inventory-card .module-card-actions a.btn {
        font-size: .7rem !important;
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }
}

@media (max-width: 768px) {
    .module-inventory-card .module-card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* v2.0.0-beta.11 repair: force module/action button text to center vertically and horizontally */
.module-inventory-card .module-card-actions .btn,
.module-inventory-card .module-card-actions button,
.module-inventory-card .module-card-actions a.btn,
.module-actions-wrap .btn,
.module-actions-wrap button,
.module-actions-wrap a.btn,
.module-actions-cell .btn,
.module-actions-cell button,
.module-actions-cell a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.module-inventory-card .module-card-actions form,
.module-actions-wrap form,
.module-actions-cell form {
    display: inline-flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    min-width: 0 !important;
}

.module-inventory-card .module-card-actions form > button,
.module-actions-wrap form > button,
.module-actions-cell form > button {
    width: 100% !important;
    height: 100% !important;
}

.module-inventory-card .module-card-actions .btn,
.module-inventory-card .module-card-actions button,
.module-inventory-card .module-card-actions a.btn {
    min-height: 34px !important;
    height: 34px !important;
}

/* Keep every small action button readable and centered in all module grids/tables */
.modules-page .btn-sm,
.module-dashboard .btn-sm,
.module-inventory-card .btn-sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* v2.0.0-beta.11 repair: Module/Panel + Licensed/Unlicensed badges belong in the top-left row, never under the drag chip. */
.module-inventory-card {
    position: relative !important;
}

.module-inventory-card .module-card-badges-top {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: .35rem !important;
    width: 100% !important;
    max-width: calc(100% - 4.9rem) !important;
    min-height: 1.65rem !important;
    padding-right: .25rem !important;
    margin-right: 4.9rem !important;
    text-align: left !important;
    align-self: flex-start !important;
}

.module-inventory-card .module-card-badges-top .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.module-inventory-card .unlicensed-badge {
    background: rgba(108, 117, 125, .75) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
}

.module-inventory-card .module-card-title {
    margin-top: .15rem !important;
    margin-bottom: .65rem !important;
    padding-right: 0 !important;
    text-align: left !important;
    line-height: 1.12 !important;
}

.module-inventory-card .module-card-description {
    text-align: left !important;
}

@media (max-width: 900px) {
    .module-inventory-card .module-card-badges-top {
        max-width: 100% !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        padding-top: 2.05rem !important;
    }
}

/* v2.0.0-beta.11 repair: Sidebar flyout mega-menu header uses a lighter themed green header panel. */
.sidebar-mega-group .sidebar-flyout-header,
.sidebar-flyout-menu .sidebar-flyout-header {
    padding: .82rem 1rem !important;
    margin: -.25rem -.25rem .55rem -.25rem !important;
    border: 1px solid rgba(90, 255, 120, .62) !important;
    border-bottom-color: rgba(125, 255, 145, .72) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, rgba(26, 145, 42, .58), rgba(22, 118, 36, .44)),
        linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.015)),
        var(--rock-texture) center/cover no-repeat !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -18px 32px rgba(0,0,0,.16),
        0 0 18px rgba(35, 220, 65, .18) !important;
}
.sidebar-mega-group .sidebar-flyout-title,
.sidebar-flyout-menu .sidebar-flyout-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}
.sidebar-mega-group .sidebar-flyout-subtitle,
.sidebar-flyout-menu .sidebar-flyout-subtitle {
    color: rgba(255,255,255,.86) !important;
}
.sidebar-mega-group .sidebar-flyout-count,
.sidebar-flyout-menu .sidebar-flyout-count {
    border-color: rgba(145, 255, 160, .82) !important;
    background: rgba(16, 135, 36, .72) !important;
    box-shadow: inset 0 1px 4px rgba(255,255,255,.12), 0 0 14px rgba(70, 230, 85, .28) !important;
}


/* v2.0.0-beta.11 repair: Sidebar mega-menu opens like topbar mega-menu on hover/focus. */
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group] {
    position: relative !important;
    overflow: visible !important;
}
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group]:not([open]):not(:hover):not(:focus-within) > .sidebar-flyout-menu,
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group]:not([open]):not(:hover):not(:focus-within) > .sidebar-mega-submenu.sidebar-flyout-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group][open] > .sidebar-flyout-menu,
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group][open] > .sidebar-mega-submenu.sidebar-flyout-menu,
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group]:hover > .sidebar-flyout-menu,
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group]:focus-within > .sidebar-flyout-menu {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group] > summary.sidebar-group-toggle {
    cursor: pointer !important;
}
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group] > summary.sidebar-group-toggle::-webkit-details-marker {
    display: none !important;
}
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group] > summary.sidebar-group-toggle::after {
    content: "▸" !important;
    transform: none !important;
}
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group][open] > summary.sidebar-group-toggle,
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group]:hover > summary.sidebar-group-toggle,
.sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group]:focus-within > summary.sidebar-group-toggle {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 16px var(--accent-border-med), inset 0 2px 8px rgba(0,0,0,.55) !important;
}
@media (min-width: 901px) {
    .sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group] > .sidebar-flyout-menu,
    .sidebar-module-group.sidebar-mega-group[data-sidebar-mega-group] > .sidebar-mega-submenu.sidebar-flyout-menu {
        left: calc(100% - 2px) !important;
        top: 0 !important;
    }
}

.sidebar-flyout-empty {
    grid-column: 1 / -1 !important;
    display: grid !important;
    gap: .55rem !important;
    padding: .85rem !important;
    border: 1px dashed var(--accent-border-med) !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, .38) !important;
    color: #fff !important;
}
.sidebar-flyout-empty span {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .82rem !important;
}
.sidebar-flyout-empty .btn-sidebar {
    margin: .15rem 0 0 !important;
}


/* v2.1.0-beta.4: topbar mega-menu rock background + green heading/tint unification */
:root {
  --bc-topbar-mega-accent: var(--theme-accent, var(--bs-theme, #16a34a));
  --bc-topbar-mega-accent-rgb: var(--theme-accent-rgb, var(--bs-theme-rgb, 22, 163, 74));
  --bc-topbar-mega-rock: var(--rock-texture, url('/img/rock-texture.png'));
  --bc-topbar-mega-button-rock: var(--button-rock-texture, linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), var(--bc-topbar-mega-rock));
  --bc-topbar-mega-button-rock-hover: var(--button-rock-texture-hover, linear-gradient(rgba(var(--bc-topbar-mega-accent-rgb), .30), rgba(var(--bc-topbar-mega-accent-rgb), .18)), var(--bc-topbar-mega-rock));
}

.ambassador-mega-menu,
.sales-marketing-mega-menu,
.email-mega-menu,
.account-mega-menu,
.account-access-mega-menu,
.topbar-mega-menu,
.topbar .mega-menu,
.topbar .mega-menu-panel,
.navbar .mega-menu,
.navbar .mega-menu-panel {
  background:
    linear-gradient(135deg, rgba(var(--bc-topbar-mega-accent-rgb), .24), rgba(0,0,0,.76) 42%, rgba(0,0,0,.86)),
    var(--bc-topbar-mega-rock) center/cover no-repeat !important;
  border: 1px solid rgba(var(--bc-topbar-mega-accent-rgb), .78) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.78),
    0 0 28px rgba(var(--bc-topbar-mega-accent-rgb), .34),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter: blur(7px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.1) !important;
}

.ambassador-mega-menu::before,
.sales-marketing-mega-menu::before,
.email-mega-menu::before,
.account-mega-menu::before,
.account-access-mega-menu::before,
.topbar-mega-menu::before,
.topbar .mega-menu::before,
.topbar .mega-menu-panel::before,
.navbar .mega-menu::before,
.navbar .mega-menu-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--bc-topbar-mega-accent-rgb), .28), transparent 38%),
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.34)) !important;
  z-index: 0 !important;
}

.ambassador-mega-menu > *,
.sales-marketing-mega-menu > *,
.email-mega-menu > *,
.account-mega-menu > *,
.account-access-mega-menu > *,
.topbar-mega-menu > *,
.topbar .mega-menu > *,
.topbar .mega-menu-panel > *,
.navbar .mega-menu > *,
.navbar .mega-menu-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

.ambassador-mega-menu .mega-menu-header,
.sales-marketing-mega-menu .mega-menu-header,
.email-mega-menu .mega-menu-header,
.account-mega-menu .mega-menu-header,
.account-access-mega-menu .mega-menu-header,
.topbar-mega-menu .mega-menu-header,
.topbar .mega-menu .mega-menu-header,
.topbar .mega-menu-panel .mega-menu-header,
.navbar .mega-menu .mega-menu-header,
.navbar .mega-menu-panel .mega-menu-header {
  background:
    linear-gradient(90deg, rgba(var(--bc-topbar-mega-accent-rgb), .46), rgba(var(--bc-topbar-mega-accent-rgb), .20) 54%, rgba(0,0,0,.20)),
    var(--bc-topbar-mega-rock) center/cover no-repeat !important;
  border: 1px solid rgba(var(--bc-topbar-mega-accent-rgb), .62) !important;
  border-bottom-color: rgba(var(--bc-topbar-mega-accent-rgb), .82) !important;
  border-radius: 12px !important;
  padding: .82rem 1rem !important;
  margin-bottom: 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 20px rgba(0,0,0,.20),
    0 0 18px rgba(var(--bc-topbar-mega-accent-rgb), .18) !important;
}

.ambassador-mega-menu .mega-menu-header h5,
.ambassador-mega-menu .mega-menu-header h6,
.sales-marketing-mega-menu .mega-menu-header h5,
.sales-marketing-mega-menu .mega-menu-header h6,
.email-mega-menu .mega-menu-header h5,
.email-mega-menu .mega-menu-header h6,
.account-mega-menu .mega-menu-header h5,
.account-mega-menu .mega-menu-header h6,
.account-access-mega-menu .mega-menu-header h5,
.account-access-mega-menu .mega-menu-header h6,
.topbar-mega-menu .mega-menu-header h5,
.topbar-mega-menu .mega-menu-header h6,
.topbar .mega-menu .mega-menu-header h5,
.topbar .mega-menu .mega-menu-header h6,
.navbar .mega-menu .mega-menu-header h5,
.navbar .mega-menu .mega-menu-header h6 {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
}

.ambassador-mega-menu .mega-menu-section,
.sales-marketing-mega-menu .mega-menu-section,
.email-mega-menu .mega-menu-section,
.account-mega-menu .mega-menu-section,
.account-access-mega-menu .mega-menu-section,
.topbar-mega-menu .mega-menu-section,
.topbar .mega-menu .mega-menu-section,
.topbar .mega-menu-panel .mega-menu-section,
.navbar .mega-menu .mega-menu-section,
.navbar .mega-menu-panel .mega-menu-section {
  background:
    linear-gradient(rgba(var(--bc-topbar-mega-accent-rgb), .10), rgba(0,0,0,.48)),
    var(--bc-topbar-mega-rock) center/cover no-repeat !important;
  border: 1px solid rgba(var(--bc-topbar-mega-accent-rgb), .42) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.48), 0 0 12px rgba(var(--bc-topbar-mega-accent-rgb), .10) !important;
}

.ambassador-mega-menu .mega-link,
.ambassador-mega-menu .mega-link-button,
.sales-marketing-mega-menu .mega-link,
.sales-marketing-mega-menu .mega-link-button,
.email-mega-menu .mega-link,
.email-mega-menu .mega-link-button,
.account-mega-menu .mega-link,
.account-mega-menu .mega-link-button,
.account-access-mega-menu .mega-link,
.account-access-mega-menu .mega-link-button,
.topbar-mega-menu .mega-link,
.topbar-mega-menu .mega-link-button,
.topbar .mega-menu .mega-link,
.topbar .mega-menu .mega-link-button,
.navbar .mega-menu .mega-link,
.navbar .mega-menu .mega-link-button {
  background: var(--bc-topbar-mega-button-rock) center/cover no-repeat !important;
  border: 1px solid rgba(var(--bc-topbar-mega-accent-rgb), .38) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.52) !important;
}

.ambassador-mega-menu .mega-link:hover,
.ambassador-mega-menu .mega-link:focus,
.ambassador-mega-menu .mega-link-button:hover,
.ambassador-mega-menu .mega-link-button:focus,
.sales-marketing-mega-menu .mega-link:hover,
.sales-marketing-mega-menu .mega-link:focus,
.sales-marketing-mega-menu .mega-link-button:hover,
.sales-marketing-mega-menu .mega-link-button:focus,
.email-mega-menu .mega-link:hover,
.email-mega-menu .mega-link:focus,
.email-mega-menu .mega-link-button:hover,
.email-mega-menu .mega-link-button:focus,
.account-mega-menu .mega-link:hover,
.account-mega-menu .mega-link:focus,
.account-mega-menu .mega-link-button:hover,
.account-mega-menu .mega-link-button:focus,
.account-access-mega-menu .mega-link:hover,
.account-access-mega-menu .mega-link:focus,
.account-access-mega-menu .mega-link-button:hover,
.account-access-mega-menu .mega-link-button:focus,
.topbar-mega-menu .mega-link:hover,
.topbar-mega-menu .mega-link:focus,
.topbar-mega-menu .mega-link-button:hover,
.topbar-mega-menu .mega-link-button:focus,
.topbar .mega-menu .mega-link:hover,
.topbar .mega-menu .mega-link:focus,
.navbar .mega-menu .mega-link:hover,
.navbar .mega-menu .mega-link:focus {
  background: var(--bc-topbar-mega-button-rock-hover) center/cover no-repeat !important;
  border-color: rgba(var(--bc-topbar-mega-accent-rgb), .82) !important;
  box-shadow: 0 0 16px rgba(var(--bc-topbar-mega-accent-rgb), .32), inset 0 2px 6px rgba(0,0,0,.56) !important;
}

.ambassador-mega-menu .mega-link-icon,
.sales-marketing-mega-menu .mega-link-icon,
.email-mega-menu .mega-link-icon,
.account-mega-menu .mega-link-icon,
.account-access-mega-menu .mega-link-icon,
.topbar-mega-menu .mega-link-icon,
.topbar .mega-menu .mega-link-icon,
.navbar .mega-menu .mega-link-icon {
  background:
    linear-gradient(rgba(var(--bc-topbar-mega-accent-rgb), .36), rgba(var(--bc-topbar-mega-accent-rgb), .14)),
    var(--bc-topbar-mega-rock) center/cover no-repeat !important;
  border: 1px solid rgba(var(--bc-topbar-mega-accent-rgb), .72) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 10px rgba(var(--bc-topbar-mega-accent-rgb), .22) !important;
}

/* v2.2.0-beta.8: site-wide Badgers Claw-Pit image theme */