/*
 * HillHost User Area — final shell/theme compatibility v3
 * Loaded AFTER portal-dark-overrides.css on purpose.
 * This is the authoritative final layer for authenticated User Area appearance.
 */

body.hh-shell-v2 {
    --hh-final-topbar: 72px;
    --hh-final-light-page: #f4f7fb;
    --hh-final-light-surface: #ffffff;
    --hh-final-light-soft: #f7f9fc;
    --hh-final-light-line: #dce6f2;
    --hh-final-light-text: #0b2345;
    --hh-final-light-copy: #29425e;
    --hh-final-light-muted: #70849b;
    --hh-final-dark-page: #07121f;
    --hh-final-dark-stage: #0b1727;
    --hh-final-dark-surface: #0e1d2f;
    --hh-final-dark-surface-2: #12243a;
    --hh-final-dark-surface-3: #17304c;
    --hh-final-dark-line: #263d58;
    --hh-final-dark-text: #eef5fd;
    --hh-final-dark-copy: #cad8e7;
    --hh-final-dark-muted: #8fa4bc;
    --hh-final-blue: #1768c5;
    --hh-final-blue-bright: #67b5ff;
}

/* ----------------------------------------------------------
   Fixed-header geometry
   Keep every page start clearly below the fixed application bar.
   ---------------------------------------------------------- */
html:has(body.hh-shell-v2) {
    scroll-padding-top: calc(var(--hh-final-topbar) + 20px);
}

body.hh-shell-v2 .hh-v2-topbar {
    height: var(--hh-final-topbar) !important;
}

body.hh-shell-v2 .hh-v2-main-body {
    padding-top: calc(var(--hh-final-topbar) + 16px) !important;
}

body.hh-shell-v2 .hh-v2-sidebar {
    top: var(--hh-final-topbar) !important;
}

body.hh-shell-v2 .hh-v2-workspace {
    padding-top: 18px !important;
}

body.hh-shell-v2 .hh-v2-primary-content,
body.hh-shell-v2 .hh-v2-primary-content > :first-child,
body.hh-shell-v2 .hh-dashboard,
body.hh-shell-v2 .hhst-ai-shell {
    scroll-margin-top: calc(var(--hh-final-topbar) + 20px);
}

@media (max-width: 991px) {
    body.hh-shell-v2 {
        --hh-final-topbar: 68px;
    }
    body.hh-shell-v2 .hh-v2-main-body {
        padding-top: calc(var(--hh-final-topbar) + 10px) !important;
    }
}

/* ----------------------------------------------------------
   Search box — appearance must actually follow theme.
   ---------------------------------------------------------- */
body.hh-shell-v2 .hh-v2-global-search {
    background: transparent !important;
    border: 0 !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-global-search input {
    border: 1px solid #cdd9e8 !important;
    background: #ffffff !important;
    color: #183654 !important;
    box-shadow: 0 2px 8px rgba(12, 43, 78, .07) !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-global-search input::placeholder {
    color: #8294a9 !important;
    opacity: 1;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-global-search > i {
    color: #6f849c !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-search-shortcut {
    border-color: #d5dfeb !important;
    background: #f5f8fc !important;
    color: #6c8199 !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-global-search input:focus {
    border-color: #70a9e7 !important;
    background: #fff !important;
    color: #0b2345 !important;
    box-shadow: 0 0 0 3px rgba(23, 104, 197, .13) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-global-search input {
    border: 1px solid #29435f !important;
    background: #091a2d !important;
    color: #edf6ff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-global-search input::placeholder {
    color: #8299b2 !important;
    opacity: 1;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-global-search > i {
    color: #7895b2 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-search-shortcut {
    border-color: #29435f !important;
    background: #10243a !important;
    color: #9bb0c6 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-global-search input:focus {
    border-color: #3988d8 !important;
    background: #0b2036 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(57, 136, 216, .18) !important;
}

/* Search popup: explicit IDs defeat every old white-surface rule. */
html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults {
    border: 1px solid #d7e1ed !important;
    background: #ffffff !important;
    color: #173653 !important;
    box-shadow: 0 24px 58px rgba(3, 18, 38, .22) !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-group-label,
html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result small,
html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-empty {
    color: #71869d !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result,
html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result strong {
    background: transparent !important;
    color: #173653 !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result:hover,
html[data-hh-theme="light"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result.is-active {
    background: #edf5ff !important;
    color: #1768c5 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults {
    border: 1px solid #2b435f !important;
    background: #0a192a !important;
    color: #edf5fd !important;
    box-shadow: 0 26px 64px rgba(0,0,0,.52) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-group {
    background: #0a192a !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-group + .hh-v2-search-group {
    border-top-color: #223851 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-group-label,
html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result small,
html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-empty {
    color: #91a6bc !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result,
html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result strong {
    background: transparent !important;
    color: #eef5fd !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result > i {
    background: #102c4a !important;
    color: #6cb8ff !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 #hhV2SearchResults .hh-v2-search-result.is-active {
    background: #12385e !important;
    color: #8dcaff !important;
}

/* ----------------------------------------------------------
   Profile/account popup and appearance controls.
   ---------------------------------------------------------- */
html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu {
    border-color: #d7e1ed !important;
    background: #ffffff !important;
    color: #173653 !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item,
html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item > a,
html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu a.dropdown-item {
    background: transparent !important;
    color: #29425e !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item:hover,
html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item:focus,
html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item > a:hover,
html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu a.dropdown-item:hover {
    background: #edf5ff !important;
    color: #1768c5 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu {
    border-color: #2b435f !important;
    background: #0d1d30 !important;
    color: #eef5fd !important;
    box-shadow: 0 24px 58px rgba(0,0,0,.48) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item > a,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu a.dropdown-item,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu i {
    background: transparent !important;
    color: #d8e5f3 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item:focus,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu .dropdown-item > a:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-menu a.dropdown-item:hover {
    background: #143554 !important;
    color: #7fc4ff !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-account-nav .dropdown-divider {
    border-top-color: #29415d !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-theme-picker {
    border-top-color: #29415d !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-theme-picker > span {
    color: #91a7bf !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-theme-picker button {
    border-color: #29415d !important;
    background: #10243a !important;
    color: #d9e6f4 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-theme-picker button:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-theme-picker button.is-active {
    border-color: #397fc5 !important;
    background: #12385e !important;
    color: #8dccff !important;
}

/* ----------------------------------------------------------
   Sidebar hover previews — same visual language as selected sections.
   ---------------------------------------------------------- */
body.hh-shell-v2 .hh-v2-hover-links {
    border: 0 !important;
    border-radius: 0 0 12px 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.hh-shell-v2 .hh-v2-hover-links .hh-v2-static-menu {
    display: grid;
    gap: 3px !important;
    padding: 4px 0 3px;
}

body.hh-shell-v2 .hh-v2-hover-links .hh-v2-custom-menu.hh-v2-static-menu > a {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 48px !important;
    padding: 7px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-hover-links .hh-v2-custom-menu.hh-v2-static-menu > a {
    background: transparent !important;
    color: #536a85 !important;
}

html[data-hh-theme="light"] body.hh-shell-v2 .hh-v2-hover-links .hh-v2-custom-menu.hh-v2-static-menu > a:hover {
    border-color: #c9def6 !important;
    background: #eef6ff !important;
    color: #1768c5 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-hover-links .hh-v2-custom-menu.hh-v2-static-menu > a {
    border-color: transparent !important;
    background: transparent !important;
    color: #b7c7d9 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-hover-links .hh-v2-custom-menu.hh-v2-static-menu > a:hover {
    border-color: #274d76 !important;
    background: #102f50 !important;
    color: #80c2ff !important;
}

/* ----------------------------------------------------------
   Dark mode: one coherent surface system for normal WHMCS pages.
   This intentionally overrides the old rule that made checkout white.
   ---------------------------------------------------------- */
html[data-hh-theme="dark"] body.hh-shell-v2,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-main-body,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-portal,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-stage,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-workspace,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content {
    background: var(--hh-final-dark-stage) !important;
    color: var(--hh-final-dark-copy) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .card,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .panel,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .well,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .jumbotron,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .modal-content,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .list-group,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .list-group-item,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table-responsive,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .bg-white,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .bg-light,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .product-details,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .product-details-tab-container,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .module-client-area {
    border-color: var(--hh-final-dark-line) !important;
    background: var(--hh-final-dark-surface) !important;
    background-image: none !important;
    color: var(--hh-final-dark-copy) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .card-header,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .card-footer,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .panel-heading,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .panel-footer,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .modal-header,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .modal-footer,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table thead th {
    border-color: var(--hh-final-dark-line) !important;
    background: var(--hh-final-dark-surface-2) !important;
    background-image: none !important;
    color: var(--hh-final-dark-text) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content h1,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content h2,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content h3,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content h4,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content h5,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content h6,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content strong,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content label {
    color: var(--hh-final-dark-text) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content p,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content small,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .text-muted {
    color: var(--hh-final-dark-muted) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table tbody,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table tbody tr,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table tbody td {
    border-color: var(--hh-final-dark-line) !important;
    background-color: var(--hh-final-dark-surface) !important;
    color: var(--hh-final-dark-copy) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table-striped tbody tr:nth-of-type(odd) td {
    background-color: #102137 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table-hover tbody tr:hover td {
    background-color: var(--hh-final-dark-surface-3) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .form-control,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content select,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content textarea,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .custom-select {
    border-color: #304963 !important;
    background-color: #0a192a !important;
    color: #edf5fd !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .form-control::placeholder,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content input::placeholder,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content textarea::placeholder {
    color: #8196ad !important;
    opacity: 1;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .nav-tabs,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .nav-tabs .nav-link {
    border-color: var(--hh-final-dark-line) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .nav-tabs .nav-link {
    background: transparent !important;
    color: #a9bdd2 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .nav-tabs .nav-link.active,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .nav-tabs .nav-link:hover {
    background: var(--hh-final-dark-surface-2) !important;
    color: #7fc5ff !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .page-link {
    border-color: var(--hh-final-dark-line) !important;
    background: var(--hh-final-dark-surface) !important;
    color: #9dcef9 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .page-item.active .page-link,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .page-link:hover {
    background: #174b7b !important;
    color: #fff !important;
}

/* Announcements / knowledgebase legacy light article blocks. */
html[data-hh-theme="dark"] body.hh-shell-v2 .announcements .announcement article,
html[data-hh-theme="dark"] body.hh-shell-v2 .kb-category a:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .kb-article-item:hover {
    border-color: #365370 !important;
    background: #12243a !important;
    color: var(--hh-final-dark-copy) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .announcements .announcement h1 a {
    color: #8dcbff !important;
}

/* Alerts retain semantic meaning without flashing white. */
html[data-hh-theme="dark"] body.hh-shell-v2 .alert-success {
    border-color: #285d49 !important;
    background: #112d25 !important;
    color: #a9e8cc !important;
}
html[data-hh-theme="dark"] body.hh-shell-v2 .alert-info {
    border-color: #2a5279 !important;
    background: #112a43 !important;
    color: #b9dcff !important;
}
html[data-hh-theme="dark"] body.hh-shell-v2 .alert-warning {
    border-color: #6b5628 !important;
    background: #302711 !important;
    color: #f4d68c !important;
}
html[data-hh-theme="dark"] body.hh-shell-v2 .alert-danger {
    border-color: #71424d !important;
    background: #351d27 !important;
    color: #ffc1cb !important;
}

/* ----------------------------------------------------------
   Custom /order experience: dark means dark all the way through.
   This reverses the old portal-dark-overrides 'white document' rule.
   ---------------------------------------------------------- */
html[data-hh-theme="dark"] body.hh-shell-v2.hh-v2-cart-page .hh-v2-primary-content {
    padding: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--hh-final-dark-stage) !important;
    box-shadow: none !important;
    color: var(--hh-final-dark-copy) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-checkout-shell,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-step-panel,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-v4-payment-box,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-payment-choice-card,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-saved-card-option,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-order-options,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-ns-choice,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-custom-ns,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-created-summary > div,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-n8n-service-card,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-orders-card,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-orders-empty,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-total,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-final {
    border-color: var(--hh-final-dark-line) !important;
    background: var(--hh-final-dark-surface) !important;
    color: var(--hh-final-dark-copy) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-payment-choice-card:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-payment-choice-card.is-active,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-saved-card-option:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-saved-card-option.is-active,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-ns-choice:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-ns-choice.is-active {
    border-color: #397dc0 !important;
    background: #122d49 !important;
    box-shadow: 0 0 0 2px rgba(57,125,192,.13) !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-orders-nav {
    border-color: var(--hh-final-dark-line) !important;
    background: #091828 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-orders-nav a {
    background: transparent !important;
    color: #aabdd1 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-orders-nav a:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-orders-nav a.is-active {
    background: #123657 !important;
    color: #82c5ff !important;
    box-shadow: none !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-ns-choice-mark,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-deploy-item > span {
    border-color: #45617e !important;
    background: #0d2034 !important;
    color: #d7e5f4 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-section-heading p,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-domain-ns-choice small,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-saved-card-main small,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-price small,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-deploy-item small {
    color: var(--hh-final-dark-muted) !important;
}

/* PayPal/Stripe method wrappers and generic gateway blocks. */
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="payment-method"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="paymethod"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="gateway"]:not(.btn):not(i),
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .payment-methods,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .payment-method,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .paymethod-info {
    border-color: var(--hh-final-dark-line) !important;
    background-color: var(--hh-final-dark-surface) !important;
    color: var(--hh-final-dark-copy) !important;
}

/* ----------------------------------------------------------
   Status/monitoring pages: cover custom status tiles injected by hooks/modules.
   Avoid badge/status pills; only box-like status surfaces are targeted.
   ---------------------------------------------------------- */
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="platform-status"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="status-card"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="status-panel"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="status-service"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="maintenance-card"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content [class*="incident-card"],
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hhm-card,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hhm-grid > div,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hhm-incidents,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hhm-notifications {
    border-color: var(--hh-final-dark-line) !important;
    background: var(--hh-final-dark-surface) !important;
    background-image: none !important;
    color: var(--hh-final-dark-copy) !important;
}

/* Bootstrap utility colors often re-introduce bright surfaces. */
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .bg-white,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .bg-light,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .table-light,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .list-group-item-light {
    background-color: var(--hh-final-dark-surface) !important;
    color: var(--hh-final-dark-copy) !important;
}

/* Don't let legacy Bootstrap default buttons become illegible. */
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .btn-default,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .btn-light,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .btn-secondary {
    border-color: #35506c !important;
    background: #132a43 !important;
    color: #dbe9f7 !important;
}

html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .btn-default:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .btn-light:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .btn-secondary:hover {
    border-color: #4477aa !important;
    background: #183a5c !important;
    color: #fff !important;
}


/* ==========================================================
   Unified managed-service header metadata — v4
   ========================================================== */
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta {
    display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:18px;
    color:rgba(235,246,255,.86)!important;
}
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta > span {
    display:inline-flex;align-items:center;min-width:0;min-height:24px;gap:5px;
    padding:0 14px;border-left:1px solid rgba(225,241,255,.20);
    color:rgba(235,246,255,.86)!important;font-size:11px;line-height:1.25;
}
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta > span:first-child {padding-left:0;border-left:0;}
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta small {color:rgba(207,228,248,.70)!important;font-size:10px;}
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta strong {
    max-width:280px;overflow:hidden;color:#fff!important;font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;
}
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta .is-status {color:#73efbd!important;font-weight:850;}
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta .is-status > i {
    width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.12);
}
body.hh-shell-v2 .hhst > .hhst-statusbar {display:none!important;}
@media(max-width:760px){
 body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta > span{padding:0 10px;}
}
@media(max-width:520px){
 body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta{align-items:flex-start;flex-direction:column;gap:6px;}
 body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta > span{min-height:18px;padding:0!important;border-left:0!important;}
}

/* ==========================================================
   Order price contrast — v4
   ========================================================== */
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-price-breakdown,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-row,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-total,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-final {
    border-color:var(--hh-final-dark-line)!important;background:var(--hh-final-dark-surface)!important;color:var(--hh-final-dark-copy)!important;
}
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-row:nth-child(odd){background:#102137!important;}
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-copy strong,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-price span,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-total strong,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-final strong,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-selected-service-summary strong,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content #hh-config-selected-price {color:#f4f8fd!important;}
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-copy small,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-price small,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-selected-service-summary span,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-selected-service-summary small {color:#9eb1c6!important;}
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-breakdown-promo {background:#102a24!important;}
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-product-price,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-review-price {border-color:var(--hh-final-dark-line)!important;color:#eef6ff!important;}
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-product-price strong,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-review-price strong {color:#fff!important;}
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-product-price span,
html[data-hh-theme="dark"] body.hh-shell-v2 .hh-v2-primary-content .hh-review-price span {color:#9fb4ca!important;}

/* Resource Manager branded headers always keep readable contrast. */
html[data-hh-theme="light"] body.hh-shell-v2 .hhst > .hhst-hero h1,
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst > .hhst-hero h1 {
    color: #ffffff !important;
}
html[data-hh-theme="light"] body.hh-shell-v2 .hhst > .hhst-hero > div > p,
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst > .hhst-hero > div > p {
    color: rgba(225, 239, 253, .80) !important;
}
html[data-hh-theme="light"] body.hh-shell-v2 .hhst > .hhst-hero .hhst-eyebrow,
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst > .hhst-hero .hhst-eyebrow,
html[data-hh-theme="light"] body.hh-shell-v2 .hhst > .hhst-hero .hhst-site-switcher label,
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst > .hhst-hero .hhst-site-switcher label {
    color: #a9d6ff !important;
}

/* ==========================================================
   Unified cancellation action + Incus service header — v5
   ========================================================== */
body.hh-shell-v2 .hhst .hhst-cancel-request-btn {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-height:40px;
    box-sizing:border-box!important;
    padding:9px 14px!important;
    border:1px solid #f0b4b4!important;
    border-radius:10px!important;
    background:#fff6f6!important;
    color:#b42318!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.2!important;
    text-decoration:none!important;
    white-space:nowrap;
    cursor:pointer;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
body.hh-shell-v2 .hhst .hhst-cancel-request-btn:hover,
body.hh-shell-v2 .hhst .hhst-cancel-request-btn:focus {
    border-color:#e79696!important;
    background:#ffe9e9!important;
    color:#9f1d14!important;
    text-decoration:none!important;
}
body.hh-shell-v2 .hhst .hhst-cancel-request-btn.is-pending,
body.hh-shell-v2 .hhst .hhst-cancel-request-btn:disabled {
    border-color:#d5dce5!important;
    background:#f3f5f8!important;
    color:#6b7787!important;
    cursor:default!important;
    transform:none!important;
}
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst .hhst-cancel-request-btn {
    border-color:rgba(248,113,113,.42)!important;
    background:rgba(127,29,29,.22)!important;
    color:#fecaca!important;
}
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst .hhst-cancel-request-btn:hover,
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst .hhst-cancel-request-btn:focus {
    border-color:rgba(248,113,113,.68)!important;
    background:rgba(153,27,27,.34)!important;
    color:#fff1f2!important;
}
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst .hhst-cancel-request-btn.is-pending,
html[data-hh-theme="dark"] body.hh-shell-v2 .hhst .hhst-cancel-request-btn:disabled {
    border-color:#30465f!important;
    background:#14243a!important;
    color:#91a4b8!important;
}

/* Keep the destructive action in the same right-side header action stack. */
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-actions > .hhst-cancel-request-btn {
    flex:0 0 auto;
}
body.hh-shell-v2 .hhst .hhst-ai-hero-cancel .hhst-cancel-request-btn {
    width:100%;
}

/* Incus uses a separate template, but shares the same header metadata component. */
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta .is-status.is-warning {
    color:#ffd58a!important;
}
body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-service-meta .is-status.is-warning > i {
    background:#f59e0b;
    box-shadow:0 0 0 3px rgba(245,158,11,.15);
}

@media(max-width:700px){
    body.hh-shell-v2 .hhst > .hhst-hero .hhst-hero-actions > .hhst-cancel-request-btn {
        width:100%;
    }
}