/*
 * Final dark-theme compatibility layer.
 * This file is deliberately loaded after WHMCS module and hook output so
 * third-party/page-specific light surfaces cannot override the chosen theme.
 */

html[data-hh-theme="dark"] body.hh-shell-v2 {
    --hh-dark-page: #0b1422;
    --hh-dark-stage: #0e1929;
    --hh-dark-surface: #142238;
    --hh-dark-surface-2: #182941;
    --hh-dark-surface-3: #1e314c;
    --hh-dark-border: #2c415e;
    --hh-dark-text: #e8f0fa;
    --hh-dark-muted: #9eb0c7;
    --hh-dark-link: #78b7ff;
    background: var(--hh-dark-page) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-stage,
html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-workspace,
html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-primary-content,
html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-main-body,
html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-portal {
    background: var(--hh-dark-stage) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-hover-links {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-hover-links a {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    color: var(--hh-dark-muted) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .hh-v2-hover-links a:hover {
    border-left-color: var(--hh-dark-link) !important;
    background: var(--hh-dark-surface-3) !important;
    color: var(--hh-dark-link) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 h1,
html[data-hh-theme="dark"] .hh-shell-v2 h2,
html[data-hh-theme="dark"] .hh-shell-v2 h3,
html[data-hh-theme="dark"] .hh-shell-v2 h4,
html[data-hh-theme="dark"] .hh-shell-v2 h5,
html[data-hh-theme="dark"] .hh-shell-v2 h6,
html[data-hh-theme="dark"] .hh-shell-v2 .card-title,
html[data-hh-theme="dark"] .hh-shell-v2 .panel-title {
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 a:not(.btn):not(.badge):not(.label) {
    color: var(--hh-dark-link);
}

/* Shared WHMCS surfaces */
html[data-hh-theme="dark"] .hh-shell-v2 .card,
html[data-hh-theme="dark"] .hh-shell-v2 .panel,
html[data-hh-theme="dark"] .hh-shell-v2 .well,
html[data-hh-theme="dark"] .hh-shell-v2 .modal-content,
html[data-hh-theme="dark"] .hh-shell-v2 .dropdown-menu,
html[data-hh-theme="dark"] .hh-shell-v2 .list-group,
html[data-hh-theme="dark"] .hh-shell-v2 .list-group-item,
html[data-hh-theme="dark"] .hh-shell-v2 .tab-content,
html[data-hh-theme="dark"] .hh-shell-v2 .tab-content.bg-white,
html[data-hh-theme="dark"] .hh-shell-v2 .product-details,
html[data-hh-theme="dark"] .hh-shell-v2 .product-details-tab-container,
html[data-hh-theme="dark"] .hh-shell-v2 .module-client-area {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    color: var(--hh-dark-text) !important;
}

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

html[data-hh-theme="dark"] .hh-shell-v2 .table,
html[data-hh-theme="dark"] .hh-shell-v2 .table td,
html[data-hh-theme="dark"] .hh-shell-v2 .table th {
    border-color: var(--hh-dark-border) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .table-striped tbody tr:nth-of-type(odd),
html[data-hh-theme="dark"] .hh-shell-v2 .table-hover tbody tr:hover {
    background: var(--hh-dark-surface-2) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .form-control,
html[data-hh-theme="dark"] .hh-shell-v2 select,
html[data-hh-theme="dark"] .hh-shell-v2 textarea,
html[data-hh-theme="dark"] .hh-shell-v2 input[type="text"],
html[data-hh-theme="dark"] .hh-shell-v2 input[type="password"],
html[data-hh-theme="dark"] .hh-shell-v2 input[type="email"] {
    border-color: var(--hh-dark-border) !important;
    background: #0f1c2d !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .text-muted,
html[data-hh-theme="dark"] .hh-shell-v2 small,
html[data-hh-theme="dark"] .hh-shell-v2 .help-block {
    color: var(--hh-dark-muted) !important;
}

/* Overview dashboard: products, tickets, service health and add-on panels */
html[data-hh-theme="dark"] .hh-dashboard {
    --hh-dashboard-navy: var(--hh-dark-text);
    --hh-dashboard-muted: var(--hh-dark-muted);
    --hh-dashboard-border: var(--hh-dark-border);
}

html[data-hh-theme="dark"] .hh-dashboard-stat,
html[data-hh-theme="dark"] .hh-dashboard-panel.card,
html[data-hh-theme="dark"] .hh-dashboard-addon > .card,
html[data-hh-theme="dark"] .hh-dashboard-addon > .panel,
html[data-hh-theme="dark"] .hh-dashboard-panel > .card-header,
html[data-hh-theme="dark"] .hh-dashboard-panel > .card-body,
html[data-hh-theme="dark"] .hh-dashboard-panel > .card-footer,
html[data-hh-theme="dark"] .hh-dashboard-panel .list-group-item,
html[data-hh-theme="dark"] .hh-dashboard-panel .div-service-item {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-dashboard-panel[menuItemName*="Monitoring" i] > .card-body,
html[data-hh-theme="dark"] .hh-dashboard-panel[menuItemName*="Health" i] > .card-body {
    background: linear-gradient(135deg, rgba(20, 113, 78, .18), transparent 72%),
        var(--hh-dark-surface) !important;
}

html[data-hh-theme="dark"] .hh-dashboard-panel a.list-group-item:hover,
html[data-hh-theme="dark"] .hh-dashboard-panel .div-service-item:hover {
    background: var(--hh-dark-surface-3) !important;
    color: var(--hh-dark-link) !important;
}

html[data-hh-theme="dark"] .hh-dashboard-panel .div-service-name,
html[data-hh-theme="dark"] .hh-dashboard-panel .list-group-item {
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-dashboard-panel .text-domain,
html[data-hh-theme="dark"] .hh-dashboard-panel .list-group-item small {
    color: var(--hh-dark-muted) !important;
}

/* Full services listing: every service is rendered as its own grid row card. */
html[data-hh-theme="dark"] .hh-products-shell,
html[data-hh-theme="dark"] .hh-products-shell .dataTables_wrapper {
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-products-table tbody tr {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .22) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-products-table tbody tr:hover {
    border-color: #4a75a9 !important;
    background: var(--hh-dark-surface-2) !important;
}

html[data-hh-theme="dark"] .hh-products-table tbody td,
html[data-hh-theme="dark"] .hh-products-table tbody td + td {
    border-color: var(--hh-dark-border) !important;
    background: transparent !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-product-name,
html[data-hh-theme="dark"] .hh-product-value {
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-product-label,
html[data-hh-theme="dark"] .hh-product-cycle {
    color: var(--hh-dark-muted) !important;
}

html[data-hh-theme="dark"] .hh-attention-clear {
    border-color: #285841 !important;
    background: #112b24 !important;
}

html[data-hh-theme="dark"] .hh-attention-clear strong {
    color: #d9f8e8 !important;
}

html[data-hh-theme="dark"] .hh-attention-clear span {
    color: #9bceb5 !important;
}

/* Service overview and cancellation/actions */
html[data-hh-theme="dark"] .hh-service-overview,
html[data-hh-theme="dark"] .hh-service-fact,
html[data-hh-theme="dark"] .hh-service-actions,
html[data-hh-theme="dark"] .hh-legacy-service-overview {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-service-title h2,
html[data-hh-theme="dark"] .hh-service-fact strong {
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-service-title p,
html[data-hh-theme="dark"] .hh-service-fact span {
    color: var(--hh-dark-muted) !important;
}

/*
 * Cancellation is destructive and must never disappear into a themed
 * background. Keep white text on an explicit red surface in every state.
 */
html[data-hh-theme="dark"] .hh-service-actions .btn-outline-danger,
html[data-hh-theme="dark"] .hh-service-actions .btn-outline-danger:visited,
html[data-hh-theme="dark"] .hh-service-actions .btn-outline-danger:hover,
html[data-hh-theme="dark"] .hh-service-actions .btn-outline-danger:focus,
html[data-hh-theme="dark"] .hh-service-actions .btn-outline-danger:active,
html[data-hh-theme="dark"] .hh-shell-v2 a.btn-danger,
html[data-hh-theme="dark"] .hh-shell-v2 a.btn-danger:hover,
html[data-hh-theme="dark"] .hh-shell-v2 a.btn-danger:focus {
    border-color: #e05263 !important;
    background: #bd3044 !important;
    box-shadow: none !important;
    color: #fff !important;
    text-shadow: none !important;
}

html[data-hh-theme="dark"] .hh-service-actions .btn-outline-danger:focus-visible,
html[data-hh-theme="dark"] .hh-shell-v2 a.btn-danger:focus-visible {
    outline: 3px solid rgba(255, 133, 148, .45) !important;
    outline-offset: 3px;
}

html[data-hh-theme="dark"] .hh-shell-v2 #alertPendingCancellation,
html[data-hh-theme="dark"] .hh-shell-v2 .alert-danger {
    border-color: #7d3f49 !important;
    background: #351c25 !important;
    color: #ffc5cd !important;
}

/* HillHost monitoring cards and metrics */
html[data-hh-theme="dark"] .hhm-card {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hhm-grid > div {
    border: 1px solid var(--hh-dark-border) !important;
    background: var(--hh-dark-surface-2) !important;
}

html[data-hh-theme="dark"] .hhm-grid span,
html[data-hh-theme="dark"] .hhm-response > span,
html[data-hh-theme="dark"] .hhm-note,
html[data-hh-theme="dark"] .hhm-incidents p span {
    color: var(--hh-dark-muted) !important;
}

html[data-hh-theme="dark"] .hhm-grid strong,
html[data-hh-theme="dark"] .hhm-incidents summary,
html[data-hh-theme="dark"] .hhm-notifications summary,
html[data-hh-theme="dark"] .hhm-notifications label {
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hhm-incidents,
html[data-hh-theme="dark"] .hhm-notifications {
    border-color: var(--hh-dark-border) !important;
}

/* Ticket conversation */
html[data-hh-theme="dark"] .hh-shell-v2 .ticket-reply,
html[data-hh-theme="dark"] .hh-shell-v2 .ticket-reply.staff,
html[data-hh-theme="dark"] .hh-shell-v2 .ticket-reply.client {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .ticket-reply .date,
html[data-hh-theme="dark"] .hh-shell-v2 .ticket-reply .user,
html[data-hh-theme="dark"] .hh-shell-v2 .ticket-reply .message {
    border-color: var(--hh-dark-border) !important;
    background: transparent !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .md-editor {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .md-editor > .btn-toolbar,
html[data-hh-theme="dark"] .hh-shell-v2 .md-editor .btn-toolbar .btn {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface-2) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .md-editor .btn-toolbar .btn:hover,
html[data-hh-theme="dark"] .hh-shell-v2 .md-editor .btn-toolbar .btn:focus {
    border-color: #5e8fc8 !important;
    background: var(--hh-dark-surface-3) !important;
    color: var(--hh-dark-link) !important;
}

html[data-hh-theme="dark"] .hh-shell-v2 .md-editor > textarea.markdown-editor,
html[data-hh-theme="dark"] .hh-shell-v2 .md-editor > .md-preview {
    border-color: var(--hh-dark-border) !important;
    background: #0f1c2d !important;
    color: var(--hh-dark-text) !important;
}

/* SolusVM Pro client module */
html[data-hh-theme="dark"] #displayState,
html[data-hh-theme="dark"] #displayStateUnavailable,
html[data-hh-theme="dark"] #displaybandwidthbar,
html[data-hh-theme="dark"] #displaymemorybar,
html[data-hh-theme="dark"] #displayhddbar,
html[data-hh-theme="dark"] #showOptions,
html[data-hh-theme="dark"] #displayips,
html[data-hh-theme="dark"] #clientkeyautherror,
html[data-hh-theme="dark"] #solusvmpro_accordion .panel,
html[data-hh-theme="dark"] #solusvmpro_accordion .panel-heading,
html[data-hh-theme="dark"] #solusvmpro_accordion .panel-body,
html[data-hh-theme="dark"] #solusvmpro_accordion .list-group,
html[data-hh-theme="dark"] #solusvmpro_accordion .list-group-item,
html[data-hh-theme="dark"] #displaygraphs .panel-body {
    --svm-ink: var(--hh-dark-text);
    --svm-muted: var(--hh-dark-muted);
    --svm-line: var(--hh-dark-border);
    --svm-surface: var(--hh-dark-surface);
    --svm-soft: var(--hh-dark-surface-2);
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] #solusvmpro_accordion [data-svm-collapse],
html[data-hh-theme="dark"] #solusvmpro_accordion [data-svm-collapse][aria-expanded="true"] {
    border-color: var(--hh-dark-border) !important;
    background: var(--hh-dark-surface-2) !important;
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] #solusvmpro_accordion label,
html[data-hh-theme="dark"] #solusvmpro_accordion .list-group-item span,
html[data-hh-theme="dark"] #displaybandwidthbar > .col-md-3,
html[data-hh-theme="dark"] #displaymemorybar > .col-md-3,
html[data-hh-theme="dark"] #displayhddbar > .col-md-3 {
    color: var(--hh-dark-text) !important;
}

html[data-hh-theme="dark"] #displaybandwidthbar > .col-md-9,
html[data-hh-theme="dark"] #displaymemorybar > .col-md-9,
html[data-hh-theme="dark"] #displayhddbar > .col-md-9 {
    color: var(--hh-dark-muted) !important;
}

/*
 * The WHMCS order form has its own dense visual language. In dark mode keep
 * that transactional document light and readable while the portal around it
 * remains dark.
 */
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content {
    padding: 24px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 18px;
    background: #fff !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    color: #172d4d !important;
}

html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content h1,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content h2,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content h3,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content h4,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content h5,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content h6,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content label,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content p,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content td,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content th,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .card-title,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .panel-title {
    color: #172d4d !important;
}

html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .card,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .panel,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .well,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .list-group,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .list-group-item,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .table,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .table td {
    border-color: #dce5f0 !important;
    background: #fff !important;
    color: #172d4d !important;
}

html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .card-header,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .panel-heading,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .table thead th {
    border-color: #dce5f0 !important;
    background: #f5f8fc !important;
    color: #172d4d !important;
}

html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content .form-control,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content select,
html[data-hh-theme="dark"] body.hh-v2-cart-page .hh-v2-primary-content input[type="text"] {
    border-color: #ccd8e6 !important;
    background: #fff !important;
    color: #172d4d !important;
}

/* Keep the restore control visible in the compact rail. */
@media (min-width: 992px) {
    .hh-v2-sidebar-collapsed .hh-v2-sidebar-controls,
    .hh-v2-sidebar-collapsed .hh-v2-sidebar-controls button:first-child {
        display: inline-grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}