/* ==========================================================================
   TrustHost theme modes — dark-mode layer for shared layout and components
   Uses the tokens from trusthost-theme-modes.css; loaded right after it.
   ========================================================================== */

/* 5. Dark mode — layout chrome --------------------------------------------- */
html[data-theme="dark"] body {
    background: var(--th-bg) !important;
}
html[data-theme="dark"] header.header,
html[data-theme="dark"] body.body__dark header.header {
    background: rgba(11, 17, 32, 0.86) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--th-border) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .sidebar {
    background: var(--th-sunken) !important;
    border-color: var(--th-border) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .th-nav-submenu {
    background: rgba(255, 255, 255, 0.025) !important;
}
html[data-theme="dark"] .header .header__head,
html[data-theme="dark"] .right__header__control .header__head,
html[data-theme="dark"] .th-bell-icon-box,
html[data-theme="dark"] .header__not__loggined__btns__item.header__link {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] .header .header__button,
html[data-theme="dark"] .header__not__loggined__btns .button.header__button {
    background: var(--th-primary) !important;
    border-color: var(--th-primary) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .header__new__title .news__title,
html[data-theme="dark"] .badge.news__title {
    background: var(--th-primary-soft-2) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .header .header__item__counter,
html[data-theme="dark"] .header .cart__counter,
html[data-theme="dark"] .header .badge-counter {
    background: var(--th-primary) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .master-breadcrumb,
html[data-theme="dark"] .master-breadcrumb .breadcrumb,
html[data-theme="dark"] nav.master-breadcrumb {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
}
html[data-theme="dark"] li.breadcrumb-item > a {
    color: var(--th-muted) !important;
}
html[data-theme="dark"] li.breadcrumb-item.active,
html[data-theme="dark"] li.breadcrumb-item.active > a {
    color: var(--th-text) !important;
}

/* 6. Dark mode — surfaces, typography, forms -------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .shadow__card,
html[data-theme="dark"] .card .card__body,
html[data-theme="dark"] .card .card__header,
html[data-theme="dark"] .card__footer,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .full__width__secondarysidebar__menu,
html[data-theme="dark"] .main__footer__wrapper,
html[data-theme="dark"] .th-footer,
html[data-theme="dark"] .th-dash-greeting-card,
html[data-theme="dark"] .th-dash-stat-card,
html[data-theme="dark"] .th-dash-list-card,
html[data-theme="dark"] .th-kb-card,
html[data-theme="dark"] .th-kb-hero,
html[data-theme="dark"] .th-dept-card,
html[data-theme="dark"] .th-dept-header-card,
html[data-theme="dark"] .th-submit-composer-card,
html[data-theme="dark"] .th-popular-card,
html[data-theme="dark"] .th-support-cta-banner,
html[data-theme="dark"] .th-article-card,
html[data-theme="dark"] .th-article-content,
html[data-theme="dark"] .th-announcement-card,
html[data-theme="dark"] .th-announcement-hero,
html[data-theme="dark"] .th-dl-hero,
html[data-theme="dark"] .th-feedback-card,
html[data-theme="dark"] .th-empty-dl-box,
html[data-theme="dark"] .th-empty-kb-box,
html[data-theme="dark"] .thgpu__card,
html[data-theme="dark"] .standard__cart__order__steps__container,
html[data-theme="dark"] .default__shadow__panel {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    box-shadow: var(--th-shadow-sm) !important;
}
html[data-theme="dark"] .card .card__header {
    background: rgba(255, 255, 255, 0.015) !important;
}
html[data-theme="dark"] .th-article-foot,
html[data-theme="dark"] .card__footer.d-flex,
html[data-theme="dark"] .dataTables_wrapper .bottom,
html[data-theme="dark"] .trusthost-nav-tabs,
html[data-theme="dark"] .th-status-filter-bar {
    background: var(--th-surface-2) !important;
    border-color: var(--th-border) !important;
}
html[data-theme="dark"] .th-popular-card:hover,
html[data-theme="dark"] .th-kb-card:hover,
html[data-theme="dark"] .th-dept-card:hover,
html[data-theme="dark"] .th-announcement-card:hover {
    border-color: var(--th-border-strong) !important;
    background: var(--th-surface-2) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .th-section-title,
html[data-theme="dark"] .th-empty-dl-box h5,
html[data-theme="dark"] .knowledgebase__article__text strong,
html[data-theme="dark"] p > strong {
    color: var(--th-text) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-gray,
html[data-theme="dark"] .th-support-cta-desc,
html[data-theme="dark"] .th-announcement-summary,
html[data-theme="dark"] .th-announcement-hero-desc,
html[data-theme="dark"] .th-dl-hero-desc,
html[data-theme="dark"] .th-popular-snippet,
html[data-theme="dark"] .th-feedback-stats span,
html[data-theme="dark"] .th-article-meta-item span,
html[data-theme="dark"] .total-due-today > span {
    color: var(--th-muted) !important;
}
html[data-theme="dark"] .knowledgebase__article__text,
html[data-theme="dark"] .knowledgebase__article__text p,
html[data-theme="dark"] .knowledgebase__article__text li,
html[data-theme="dark"] .trusthost-announcement,
html[data-theme="dark"] .trusthost-announcement p,
html[data-theme="dark"] .trusthost-announcement li {
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] a.th-dash-btn-link,
html[data-theme="dark"] .th-kb-foot-text,
html[data-theme="dark"] .th-popular-action,
html[data-theme="dark"] .trusthost-announcement a,
html[data-theme="dark"] .knowledgebase__article__text a,
html[data-theme="dark"] a.d-block > strong,
html[data-theme="dark"] .alert a.alert-link {
    color: var(--th-link) !important;
}
html[data-theme="dark"] a.th-dash-btn-link {
    background: var(--th-primary-soft) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] a.th-dash-btn-link:hover {
    background: var(--th-primary-soft-2) !important;
}

/* Inputs, selects and native controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"] {
    background-color: var(--th-sunken) !important;
    border-color: var(--th-border-strong) !important;
    color: var(--th-text) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
    color: #64718a !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    border-color: var(--th-primary) !important;
    box-shadow: var(--th-focus-ring) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--th-surface-2) !important;
    color: var(--th-muted) !important;
}
html[data-theme="dark"] .input-group-text {
    background: var(--th-surface-2) !important;
    border-color: var(--th-border-strong) !important;
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--th-text);
    -webkit-box-shadow: 0 0 0 1000px var(--th-sunken) inset !important;
    caret-color: var(--th-text);
}
html[data-theme="dark"] label.coodiv-check-input > span.checkbox {
    background: var(--th-sunken) !important;
    border-color: var(--th-border-strong) !important;
}
html[data-theme="dark"] label.coodiv-check-input input:checked + span.checkbox,
html[data-theme="dark"] label.coodiv-check-input > input:checked ~ span.checkbox {
    background: var(--th-primary) !important;
    border-color: var(--th-primary) !important;
}
html[data-theme="dark"] .bootstrap-switch {
    border-color: var(--th-border-strong) !important;
    background: var(--th-sunken) !important;
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-container {
    background: transparent !important;
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-label {
    background: var(--th-surface-3) !important;
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off {
    background: var(--th-surface-2) !important;
    color: var(--th-text-2) !important;
}

/* Buttons and pills */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn.btn-default,
html[data-theme="dark"] .btn.btn-light,
html[data-theme="dark"] input.btn.btn-default,
html[data-theme="dark"] .th-article-btn,
html[data-theme="dark"] .th-vote-btn,
html[data-theme="dark"] .page-link {
    background: var(--th-surface-2) !important;
    border-color: var(--th-border-strong) !important;
    color: var(--th-text) !important;
}
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .th-article-btn:hover,
html[data-theme="dark"] .th-vote-btn:hover,
html[data-theme="dark"] .page-link:hover {
    background: var(--th-surface-3) !important;
    color: var(--th-text) !important;
}
html[data-theme="dark"] .page-item.active .page-link {
    background: var(--th-primary) !important;
    border-color: var(--th-primary) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .page-item.disabled .page-link {
    color: var(--th-muted) !important;
}
html[data-theme="dark"] .btn-outline-primary {
    color: var(--th-link) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--th-primary) !important;
    border-color: var(--th-primary) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .badge-light,
html[data-theme="dark"] .badge-secondary,
html[data-theme="dark"] .th-announcement-date-pill {
    background: var(--th-surface-3) !important;
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] .trusthost-tab-item.active,
html[data-theme="dark"] a.trusthost-tab-item.active {
    background: var(--th-primary-soft-2) !important;
    color: #93c5fd !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .nav-link.list-group-item.active {
    background: var(--th-primary-hover) !important;
    border-color: var(--th-primary-hover) !important;
    color: #ffffff !important;
}

/* Icon tiles: keep the hue, drop the pastel fill */
html[data-theme="dark"] .th-dash-stat-icon.th-stat-icon-blue,
html[data-theme="dark"] .th-dash-empty-icon,
html[data-theme="dark"] .th-popular-icon-box,
html[data-theme="dark"] .card > .mx-auto.mb-3.d-flex {
    background: var(--th-primary-soft-2) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .th-dash-empty-icon {
    background: var(--th-surface-3) !important;
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] .th-dash-stat-icon.th-stat-icon-amber {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fbbf24 !important;
}
html[data-theme="dark"] .th-dash-stat-icon.th-stat-icon-cyan {
    background: rgba(6, 182, 212, 0.14) !important;
    color: #22d3ee !important;
}

/* Tables */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.table-list {
    color: var(--th-text-2);
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead th {
    border-color: var(--th-border) !important;
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-container table > thead > tr > th {
    background: var(--th-surface-2) !important;
    color: var(--th-muted) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] table.table-list tbody tr:hover {
    background: rgba(255, 255, 255, 0.025) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--th-muted) !important;
}

/* Code, pre, dropdowns, modals, alerts */
html[data-theme="dark"] code {
    color: #f9a8d4;
}
html[data-theme="dark"] pre,
html[data-theme="dark"] pre.bg-light,
html[data-theme="dark"] .bg-light {
    background: var(--th-sunken) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] .dropdown-menu {
    background: var(--th-surface-2) !important;
    border-color: var(--th-border-strong) !important;
    box-shadow: var(--th-shadow-md) !important;
}
html[data-theme="dark"] .dropdown-item {
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--th-surface-3) !important;
    color: var(--th-text) !important;
}
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--th-border) !important;
}
html[data-theme="dark"] .modal-content {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text-2);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--th-border) !important;
}
html[data-theme="dark"] .close {
    color: var(--th-text-2);
    text-shadow: none;
}
html[data-theme="dark"] .alert {
    border-color: transparent !important;
}
html[data-theme="dark"] .alert.alert-info {
    background: rgba(6, 182, 212, 0.1) !important;
    color: #a5f3fc !important;
}
html[data-theme="dark"] .alert.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] .alert.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #a7f3d0 !important;
}
html[data-theme="dark"] .alert.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #fecaca !important;
}
html[data-theme="dark"] .alert.alert-warning a.alert-link {
    color: #fcd34d !important;
}
html[data-theme="dark"] hr {
    border-color: var(--th-border);
}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--th-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--th-border-strong);
    border-radius: 8px;
}
html[data-theme="dark"] {
    scrollbar-color: var(--th-border-strong) var(--th-bg);
}

/* Images that are pure black line-art on white */
html[data-theme="dark"] .th-invert-on-dark {
    filter: invert(1) hue-rotate(180deg);
}