/**
 * Holistic Hub — website palette theme (marketing site index.html)
 * Scoped to body.hub-ui-website — disable via HUB_UI_THEME=legacy
 */
body.hub-ui-website {
    --hub-primary: #1f4230;
    --hub-primary-light: #2d5a40;
    --hub-accent: #e77c66;
    --hub-accent-light: #f0d5cc;
    --hub-text: #1f4230;
    --hub-text-muted: #5A6B5B;
    --hub-bg: #ede2d4;
    --hub-bg-card: #f9f6f1;
    --hub-border: #c7d1c5;
    --hub-secondary: #d5ddd4;
    --hub-sage: #a3b6a1;
    --hub-trial: #323569;
    --hub-shadow: 0 4px 12px rgba(31, 66, 48, 0.08);
    --hub-shadow-lg: 0 16px 36px rgba(31, 66, 48, 0.12);

    --primary-color: var(--hub-primary);
    --primary-hover: var(--hub-primary-light);

    background-color: var(--hub-bg) !important;
    color: var(--hub-text);
}

/* ─── Navbar ─── */
body.hub-ui-website .navbar {
    background-color: rgba(237, 226, 212, 0.96) !important;
    border-bottom: 1px solid var(--hub-border);
    box-shadow: none !important;
}

body.hub-ui-website .navbar-nav .nav-link {
    color: var(--hub-text-muted) !important;
    font-weight: 600;
}

body.hub-ui-website .navbar-nav .nav-link:hover {
    color: var(--hub-primary) !important;
}

/* ─── Buttons (Bootstrap + inline overrides) ─── */
body.hub-ui-website .btn-primary,
body.hub-ui-website .btn-outline-primary,
body.hub-ui-website .btn-success,
body.hub-ui-website .btn-outline-success,
body.hub-ui-website .card-body .btn:not(.btn-edit-client):not(.btn-delete-client),
body.hub-ui-website .btn-access,
body.hub-ui-website .update-popup-button {
    background-color: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(31, 66, 48, 0.15);
}

body.hub-ui-website .btn-primary:hover,
body.hub-ui-website .btn-outline-primary:hover,
body.hub-ui-website .btn-success:hover,
body.hub-ui-website .card-body .btn:not(.btn-edit-client):not(.btn-delete-client):hover,
body.hub-ui-website .btn-access:hover {
    background-color: var(--hub-primary-light) !important;
    border-color: var(--hub-primary-light) !important;
    color: #fff !important;
}

body.hub-ui-website .btn-secondary,
body.hub-ui-website .btn-outline-secondary {
    background-color: var(--hub-bg-card) !important;
    border-color: var(--hub-border) !important;
    color: var(--hub-primary) !important;
}

body.hub-ui-website .btn-secondary:hover,
body.hub-ui-website .btn-outline-secondary:hover {
    background-color: var(--hub-secondary) !important;
    border-color: var(--hub-border) !important;
    color: var(--hub-primary) !important;
}

/* Danger buttons stay red */
body.hub-ui-website .btn-danger,
body.hub-ui-website .btn-outline-danger,
body.hub-ui-website .btn-cancel,
body.hub-ui-website .btn-delete {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

body.hub-ui-website .btn-save {
    background-color: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
}

/* ─── Forms ─── */
body.hub-ui-website .form-control:focus,
body.hub-ui-website .form-select:focus {
    border-color: var(--hub-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(31, 66, 48, 0.15) !important;
}

body.hub-ui-website .form-control,
body.hub-ui-website .form-select {
    border-color: var(--hub-border);
    border-radius: 10px;
}

/* ─── Cards ─── */
body.hub-ui-website .card {
    background-color: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
    border-radius: 14px !important;
}

body.hub-ui-website footer {
    background-color: var(--hub-secondary) !important;
    border-top: 1px solid var(--hub-border);
}

body.hub-ui-website .modal-header {
    background-color: var(--hub-primary) !important;
    color: #fff !important;
}

body.hub-ui-website .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

body.hub-ui-website .alert-info {
    background-color: var(--hub-secondary) !important;
    color: var(--hub-text) !important;
    border-left: 4px solid var(--hub-sage) !important;
}

/* ─── Dashboard hero & stats ─── */
body.hub-ui-website .hero-modern {
    background: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

body.hub-ui-website .hero-modern .hero-greeting {
    color: var(--hub-text) !important;
}

body.hub-ui-website .hero-modern .hero-subtitle {
    color: var(--hub-text-muted) !important;
}

body.hub-ui-website .hero-modern .hero-btn,
body.hub-ui-website .hero-modern .btn-assignments,
body.hub-ui-website .hero-modern .btn-client,
body.hub-ui-website .hero-modern .btn-media,
body.hub-ui-website .hero-section .hero-btn {
    background: var(--hub-primary) !important;
    border: none !important;
    color: #fff !important;
}

body.hub-ui-website .hero-modern .hero-btn:hover,
body.hub-ui-website .hero-section .hero-btn:hover {
    background: var(--hub-primary-light) !important;
    color: #fff !important;
}

body.hub-ui-website .soft-card {
    background: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

body.hub-ui-website .stat-icon.bg-soft-blue {
    background-color: #d8dae8 !important;
    color: var(--hub-trial) !important;
}

body.hub-ui-website .stat-icon.bg-soft-green {
    background-color: var(--hub-secondary) !important;
    color: var(--hub-primary) !important;
}

body.hub-ui-website .stat-icon.bg-soft-peach {
    background-color: var(--hub-accent-light) !important;
    color: var(--hub-primary) !important;
}

body.hub-ui-website .stat-icon.bg-soft-cyan {
    background-color: #dde4da !important;
    color: var(--hub-primary) !important;
}

body.hub-ui-website .soft-card .stat-value {
    color: var(--hub-text) !important;
}

body.hub-ui-website .soft-card .stat-label {
    color: var(--hub-text-muted) !important;
}

body.hub-ui-website .onboarding-bg {
    background: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

/* ─── Hero sections on media / video pages ─── */
body.hub-ui-website .hero-section {
    background: var(--hub-bg-card) !important;
    color: var(--hub-text) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

body.hub-ui-website .hero-section h1,
body.hub-ui-website .hero-section h2,
body.hub-ui-website .hero-section div {
    color: var(--hub-text) !important;
}

body.hub-ui-website .hero-section p,
body.hub-ui-website .hero-section .text-muted {
    color: var(--hub-text-muted) !important;
}

body.hub-ui-website .hero-actions .hero-btn,
body.hub-ui-website .hero-actions .hero-btn-green {
    background: var(--hub-primary) !important;
    color: #fff !important;
}

/* ─── Form section cards ─── */
body.hub-ui-website .form-section-card {
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

body.hub-ui-website .section-basic,
body.hub-ui-website .section-access,
body.hub-ui-website .section-courses,
body.hub-ui-website .section-products {
    background: var(--hub-bg-card) !important;
}

/* ─── Client portal ─── */
body.hub-ui-website .media-card {
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

body.hub-ui-website h2 {
    color: var(--hub-text) !important;
}

body.hub-ui-website #checkin-slider,
body.hub-ui-website input[type="range"] {
    accent-color: var(--hub-accent);
}

body.hub-ui-website #checkin-score-display {
    color: var(--hub-accent) !important;
}

body.hub-ui-website .page-header-card,
body.hub-ui-website .glassmorphism-card,
body.hub-ui-website .page-header-gradient {
    background: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

body.hub-ui-website .file-badge,
body.hub-ui-website .resource-card .file-badge {
    background: var(--hub-sage) !important;
    color: var(--hub-primary) !important;
}

/* ─── Chat ─── */
body.hub-ui-website .creator-chat-list-group .active {
    background: var(--hub-sage) !important;
    color: var(--hub-primary) !important;
    border-left-color: var(--hub-primary) !important;
}

body.hub-ui-website #chat-client-search:focus,
body.hub-ui-website #chat-message-input:focus {
    border-color: var(--hub-sage) !important;
    box-shadow: 0 0 0 3px rgba(163, 182, 161, 0.25) !important;
}

body.hub-ui-website .creator-chat-input .btn-primary {
    background: var(--hub-primary) !important;
    border-radius: 20px;
}

/* ─── Tables ─── */
body.hub-ui-website .items-table thead th,
body.hub-ui-website .table-light {
    background: var(--hub-secondary) !important;
    color: var(--hub-text-muted) !important;
}

body.hub-ui-website .table-card {
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
}

/* ─── Shepherd tour ─── */
body.hub-ui-website .hub-tour-step .shepherd-header {
    background: var(--hub-sage) !important;
}

body.hub-ui-website .hub-tour-step .shepherd-button-primary {
    background: var(--hub-primary) !important;
}

/* ─── Links in content ─── */
body.hub-ui-website a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
    color: var(--hub-primary);
}

body.hub-ui-website .feedback-card.unread {
    border-left-color: var(--hub-accent) !important;
}

/* ─── Login / auth inline button overrides ─── */
body.hub-ui-website .home-login-btn,
body.hub-ui-website .home-login-btn:hover,
body.hub-ui-website .home-login-btn:focus {
    background-color: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
    color: #fff !important;
}

body.hub-ui-website .home-login-btn:hover,
body.hub-ui-website .home-login-btn:focus {
    background-color: var(--hub-primary-light) !important;
    border-color: var(--hub-primary-light) !important;
}

/* ─── Clients page buttons ─── */
body.hub-ui-website .btn-add-client,
body.hub-ui-website .btn-search,
body.hub-ui-website .btn-export {
    background-color: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(31, 66, 48, 0.15) !important;
}

body.hub-ui-website .btn-add-client:hover,
body.hub-ui-website .btn-search:hover,
body.hub-ui-website .btn-export:hover,
body.hub-ui-website .btn-export:focus {
    background-color: var(--hub-primary-light) !important;
    border-color: var(--hub-primary-light) !important;
    color: #fff !important;
}

/* Clients table action icons — high specificity; loads after generic .btn rules */
body.hub-ui-website .clients-table-card .client-actions .btn.btn-edit-client,
body.hub-ui-website .clients-table .client-actions .btn.btn-edit-client {
    background-color: var(--hub-sage) !important;
    border: none !important;
    color: var(--hub-primary) !important;
    box-shadow: 0 2px 6px rgba(31, 66, 48, 0.1) !important;
}

body.hub-ui-website .clients-table-card .client-actions .btn.btn-edit-client:hover,
body.hub-ui-website .clients-table .client-actions .btn.btn-edit-client:hover {
    background-color: var(--hub-primary) !important;
    border: none !important;
    color: #fff !important;
}

body.hub-ui-website .clients-table-card .client-actions .btn.btn-delete-client,
body.hub-ui-website .clients-table .client-actions .btn.btn-delete-client {
    background-color: var(--hub-accent-light) !important;
    border: none !important;
    color: #9b3d30 !important;
    box-shadow: 0 2px 6px rgba(231, 124, 102, 0.15) !important;
}

body.hub-ui-website .clients-table-card .client-actions .btn.btn-delete-client:hover,
body.hub-ui-website .clients-table .client-actions .btn.btn-delete-client:hover {
    background-color: var(--hub-accent) !important;
    border: none !important;
    color: #fff !important;
}

body.hub-ui-website .card.shadow .btn[style],
body.hub-ui-website button.btn[style*="background"] {
    background-color: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
    color: #fff !important;
}

body.hub-ui-website a[style*="color: #3b82f6"],
body.hub-ui-website a[style*="color: #90B0E6"] {
    color: var(--hub-primary) !important;
}

/* ─── Video library stats & buttons ─── */
body.hub-ui-website .video-stats-card {
    background: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: var(--hub-shadow) !important;
    color: var(--hub-text) !important;
}

body.hub-ui-website .video-stats-card h3,
body.hub-ui-website .video-stats-card .stat-item .stat-number,
body.hub-ui-website .video-stats-card .stat-item .stat-label {
    color: var(--hub-text) !important;
}

body.hub-ui-website .video-stats-card .stat-item small,
body.hub-ui-website .video-stats-card .stat-item em {
    color: var(--hub-text-muted) !important;
}

body.hub-ui-website .video-stats-card .stats-grid .stat-item:nth-child(1) {
    background: #d8dae8 !important;
    border: 1px solid var(--hub-border) !important;
    backdrop-filter: none !important;
}

body.hub-ui-website .video-stats-card .stats-grid .stat-item:nth-child(1) .stat-number {
    color: var(--hub-trial) !important;
}

body.hub-ui-website .video-stats-card .stats-grid .stat-item:nth-child(2) {
    background: var(--hub-sage) !important;
    border: 1px solid var(--hub-border) !important;
    backdrop-filter: none !important;
}

body.hub-ui-website .video-stats-card .stats-grid .stat-item:nth-child(3) {
    background: var(--hub-secondary) !important;
    border: 1px solid var(--hub-border) !important;
    backdrop-filter: none !important;
}

body.hub-ui-website .video-stats-card .stats-grid .stat-item:nth-child(4) {
    background: var(--hub-accent-light) !important;
    border: 1px solid var(--hub-border) !important;
    backdrop-filter: none !important;
}

body.hub-ui-website .video-stats-card .refresh-btn {
    background: var(--hub-primary) !important;
    border: 1px solid var(--hub-primary) !important;
    color: #fff !important;
    backdrop-filter: none !important;
}

body.hub-ui-website .video-stats-card .refresh-btn:hover {
    background: var(--hub-primary-light) !important;
    border-color: var(--hub-primary-light) !important;
    color: #fff !important;
}

body.hub-ui-website .upload-btn-large {
    background: var(--hub-primary) !important;
    border: 1px solid var(--hub-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(31, 66, 48, 0.2) !important;
}

body.hub-ui-website .upload-btn-large:hover {
    background: var(--hub-primary-light) !important;
    border-color: var(--hub-primary-light) !important;
    color: #fff !important;
}

body.hub-ui-website .video-stats-card .badge {
    background: var(--hub-secondary) !important;
    color: var(--hub-primary) !important;
}

/* ─── Client statistics page ─── */
body.hub-ui-website .container > .row.g-3.mb-4 > div:nth-child(1) .client-stats-card {
    background: #d8dae8 !important;
    border: 1px solid var(--hub-border) !important;
}

body.hub-ui-website .container > .row.g-3.mb-4 > div:nth-child(2) .client-stats-card {
    background: var(--hub-sage) !important;
    border: 1px solid var(--hub-border) !important;
}

body.hub-ui-website .container > .row.g-3.mb-4 > div:nth-child(3) .client-stats-card {
    background: var(--hub-secondary) !important;
    border: 1px solid var(--hub-border) !important;
}

body.hub-ui-website .container > .row.g-3.mb-4 > div:nth-child(4) .client-stats-card {
    background: var(--hub-accent-light) !important;
    border: 1px solid var(--hub-border) !important;
}

body.hub-ui-website .client-stats-card.client-card-1,
body.hub-ui-website .client-stats-card.client-card-2,
body.hub-ui-website .client-stats-card.client-card-3,
body.hub-ui-website .client-stats-card.client-card-4,
body.hub-ui-website .client-stats-card.client-card-5,
body.hub-ui-website .client-stats-card.client-card-6,
body.hub-ui-website .client-stats-card.client-card-7,
body.hub-ui-website .client-stats-card.client-card-8,
body.hub-ui-website .client-stats-card.client-card-9,
body.hub-ui-website .client-stats-card.client-card-10 {
    background: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
}

body.hub-ui-website .client-card-1 { border-left: 4px solid var(--hub-trial) !important; }
body.hub-ui-website .client-card-2 { border-left: 4px solid var(--hub-sage) !important; }
body.hub-ui-website .client-card-3 { border-left: 4px solid var(--hub-secondary) !important; }
body.hub-ui-website .client-card-4 { border-left: 4px solid var(--hub-accent-light) !important; }
body.hub-ui-website .client-card-5 { border-left: 4px solid var(--hub-accent) !important; }
body.hub-ui-website .client-card-6 { border-left: 4px solid var(--hub-primary) !important; }
body.hub-ui-website .client-card-7 { border-left: 4px solid var(--hub-trial) !important; }
body.hub-ui-website .client-card-8 { border-left: 4px solid var(--hub-sage) !important; }
body.hub-ui-website .client-card-9 { border-left: 4px solid var(--hub-secondary) !important; }
body.hub-ui-website .client-card-10 { border-left: 4px solid var(--hub-accent-light) !important; }

body.hub-ui-website .client-stats-card .client-name {
    text-shadow: none !important;
    color: var(--hub-text) !important;
}

body.hub-ui-website .client-stats-card .client-info p,
body.hub-ui-website .client-stats-card .client-info strong {
    color: var(--hub-text-muted) !important;
}

body.hub-ui-website .client-stats-card .client-info strong {
    color: var(--hub-text) !important;
}

body.hub-ui-website .client-stats-card .stat-value {
    background: var(--hub-secondary) !important;
    color: var(--hub-primary) !important;
}

body.hub-ui-website .client-stats-card .btn {
    background: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(31, 66, 48, 0.15) !important;
}

body.hub-ui-website .client-stats-card .btn:hover {
    background: var(--hub-primary-light) !important;
    border-color: var(--hub-primary-light) !important;
    color: #fff !important;
}

body.hub-ui-website .pagination .page-link {
    color: var(--hub-primary) !important;
    background: var(--hub-bg-card) !important;
    border: 1px solid var(--hub-border) !important;
}

body.hub-ui-website .pagination .page-item.active .page-link {
    background: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
    color: #fff !important;
}

body.hub-ui-website .pagination .page-link:hover {
    background: var(--hub-secondary) !important;
    color: var(--hub-primary) !important;
    border-color: var(--hub-border) !important;
}

body.hub-ui-website .pagination .page-item.disabled .page-link {
    color: var(--hub-text-muted) !important;
    background: var(--hub-bg-card) !important;
}

/* ─── Page background overrides (some forms set gray body) ─── */
body.hub-ui-website.soft-bg,
body.hub-ui-website .soft-bg {
    background: var(--hub-bg) !important;
}

/* ─── Page extra_css overrides (hub-theme loads after {% block extra_css %}) ─── */
body.hub-ui-website .clients-table-card .client-actions .btn.btn-edit-client,
body.hub-ui-website .clients-table .client-actions .btn.btn-edit-client {
    background-color: var(--hub-sage) !important;
    border: none !important;
    color: var(--hub-primary) !important;
}

body.hub-ui-website .clients-table-card .client-actions .btn.btn-edit-client:hover,
body.hub-ui-website .clients-table .client-actions .btn.btn-edit-client:hover {
    background-color: var(--hub-primary) !important;
    color: #fff !important;
}

body.hub-ui-website .clients-table-card .client-actions .btn.btn-delete-client,
body.hub-ui-website .clients-table .client-actions .btn.btn-delete-client {
    background-color: var(--hub-accent-light) !important;
    border: none !important;
    color: #9b3d30 !important;
}

body.hub-ui-website .clients-table-card .client-actions .btn.btn-delete-client:hover,
body.hub-ui-website .clients-table .client-actions .btn.btn-delete-client:hover {
    background-color: var(--hub-accent) !important;
    color: #fff !important;
}

/* Products / bundles table icon actions */
body.hub-ui-website .table-card .table-actions .btn-icon.edit {
    background-color: var(--hub-sage) !important;
    color: var(--hub-primary) !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.edit:hover {
    background-color: var(--hub-primary) !important;
    color: #fff !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.preview {
    background-color: var(--hub-secondary) !important;
    color: var(--hub-primary) !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.preview:hover {
    background-color: #c5cdc4 !important;
    color: var(--hub-primary) !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.sales {
    background-color: #d8dae8 !important;
    color: var(--hub-trial) !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.sales:hover {
    background-color: #c5c9dc !important;
    color: var(--hub-trial) !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.delete {
    background-color: var(--hub-accent-light) !important;
    color: #9b3d30 !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.delete:hover {
    background-color: var(--hub-accent) !important;
    color: #fff !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.publish {
    background: var(--hub-bg-card) !important;
    color: var(--hub-primary) !important;
    border: 2px dashed var(--hub-sage) !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.publish:hover {
    background: var(--hub-secondary) !important;
    border-color: var(--hub-primary) !important;
    color: var(--hub-primary) !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.warning {
    background-color: var(--hub-accent-light) !important;
    color: #9b3d30 !important;
    opacity: 1 !important;
}

body.hub-ui-website .table-card .table-actions .btn-icon.warning:hover {
    background-color: var(--hub-accent) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* ─── App-wide: replace white surfaces with off-white ─── */
body.hub-ui-website .bg-white,
body.hub-ui-website .card-body,
body.hub-ui-website .modal-content,
body.hub-ui-website .modal-body,
body.hub-ui-website .modal-footer,
body.hub-ui-website .dropdown-menu,
body.hub-ui-website .list-group-item,
body.hub-ui-website .table,
body.hub-ui-website .table-card,
body.hub-ui-website .clients-table-card,
body.hub-ui-website .form-section-card,
body.hub-ui-website .page-header-card,
body.hub-ui-website .glassmorphism-card,
body.hub-ui-website .page-header-gradient,
body.hub-ui-website .media-card,
body.hub-ui-website .resource-card,
body.hub-ui-website .video-stats-card,
body.hub-ui-website .client-stat-card,
body.hub-ui-website .client-card,
body.hub-ui-website .accordion-item,
body.hub-ui-website .accordion-body,
body.hub-ui-website .nav-tabs .nav-link.active,
body.hub-ui-website .tab-content,
body.hub-ui-website .popover,
body.hub-ui-website .toast,
body.hub-ui-website .toast-body,
body.hub-ui-website .offcanvas,
body.hub-ui-website .offcanvas-body,
body.hub-ui-website .hub-tour-step .shepherd-content,
body.hub-ui-website .hub-tour-step .shepherd-text,
body.hub-ui-website .hub-tour-step .shepherd-footer,
body.hub-ui-website .hub-tour-btn-back {
    background-color: var(--hub-bg-card) !important;
}

body.hub-ui-website .form-control,
body.hub-ui-website .form-select,
body.hub-ui-website .input-group-text,
body.hub-ui-website textarea.form-control {
    background-color: var(--hub-bg-card) !important;
}

body.hub-ui-website .pagination .page-link {
    background-color: var(--hub-bg-card) !important;
}

body.hub-ui-website .table > :not(caption) > * > * {
    background-color: var(--hub-bg-card);
}

body.hub-ui-website .table-hover > tbody > tr:hover > * {
    background-color: var(--hub-secondary);
}