/*
 * KernelHost Darkmode Overlay fuer swiftmodders WHMCS-Theme
 *
 * Strategie: Token-basiert ueber CSS-Custom-Properties am :root + Overrides
 * unter html[data-theme="dark"]. Nicht-getokente Komponenten werden per
 * gezieltem Selector ueberschrieben. Toleranter Fallback: wenn JS nicht
 * laeuft oder das Attribut fehlt, gilt automatisch der Light-Default.
 *
 * Cache-Buster ueber ?v=... in header.tpl.
 */

/* ------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------ */
:root {
    color-scheme: light;
    --kh-bg: #f4f6f9;
    --kh-bg-elevated: #ffffff;
    --kh-bg-inset: #f9fafb;
    --kh-text: #1f2937;
    --kh-text-muted: #6b7280;
    --kh-border: #e3e6ec;
    --kh-border-strong: #d1d5db;
    --kh-accent: #1f7fc1;
    --kh-accent-hover: #135b8e;
    --kh-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --kh-bg: #0f172a;
    --kh-bg-elevated: #1e293b;
    --kh-bg-inset: #0b1220;
    --kh-text: #e2e8f0;
    --kh-text-muted: #94a3b8;
    --kh-border: #334155;
    --kh-border-strong: #475569;
    --kh-accent: #3b82f6;
    --kh-accent-hover: #60a5fa;
    --kh-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ------------------------------------------------------------------
 * Toggle-Button
 * ------------------------------------------------------------------ */
.sm-darkmode .quick-nav { cursor: pointer; }
/* FontAwesome setzt .fas { display: inline-block } mit hoher Specificity,
 * daher braucht das Versteckte Icon !important damit der Toggle nicht
 * doppelte Icons (Mond + Sonne uebereinander) zeigt. */
.kh-icon-light { display: inline-block !important; }
.kh-icon-dark { display: none !important; }
html[data-theme="dark"] .kh-icon-light { display: none !important; }
html[data-theme="dark"] .kh-icon-dark { display: inline-block !important; }

/* ------------------------------------------------------------------
 * Dark-Overrides (alle nur unter [data-theme="dark"] aktiv)
 * ------------------------------------------------------------------ */
html[data-theme="dark"] body,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .sm-content,
html[data-theme="dark"] .sm-page-container,
html[data-theme="dark"] .sm-boxed,
html[data-theme="dark"] .sm-content-container {
    background-color: var(--kh-bg) !important;
    color: var(--kh-text) !important;
}

/* Header / Nav */
html[data-theme="dark"] .sm-header-container,
html[data-theme="dark"] .sm-header,
html[data-theme="dark"] .sm-nav-container,
html[data-theme="dark"] .sm-nav,
html[data-theme="dark"] #sm-mmenu-helper {
    background-color: var(--kh-bg-inset) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .sm-header .sm-option-menu > li > a,
html[data-theme="dark"] .sm-nav a,
html[data-theme="dark"] #menu a {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .sm-header .sm-option-menu > li > a:hover,
html[data-theme="dark"] .sm-nav a:hover,
html[data-theme="dark"] #menu a:hover {
    background-color: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}
/* Mobile Hamburger-Trigger Icon: im Light-Mode ist die Icon-Color
 * der dunkel-blaue Akzent (#1f7fc1), im Dark-Mode soll es weiss sein
 * wie die anderen Topbar-Icons (Home + Translate). */
html[data-theme="dark"] .sm-mobile-trigger a,
html[data-theme="dark"] .sm-mobile-trigger a i,
html[data-theme="dark"] .sm-mobile-trigger i,
html[data-theme="dark"] .sm-trigger a,
html[data-theme="dark"] .sm-trigger a i,
html[data-theme="dark"] .menu-handler,
html[data-theme="dark"] .menu-handler i {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .sm-mobile-trigger a:hover,
html[data-theme="dark"] .sm-mobile-trigger a:hover i,
html[data-theme="dark"] .sm-trigger a:hover,
html[data-theme="dark"] .menu-handler:hover {
    color: #fff !important;
}

/* Boxen / Cards / Panels */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .well,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .tooltip-inner,
html[data-theme="dark"] .home-shortcuts,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar-nav,
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .list-group-item {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .panel-heading {
    background-color: var(--kh-bg-inset) !important;
}

/* Tabellen */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255,255,255,0.03) !important;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-color: rgba(255,255,255,0.06) !important;
}

/* Forms / Inputs
 * BG-Farbe: #16223a (dezent heller als --kh-bg-inset #0b1220, damit
 * Inputs nicht als "fetter schwarzer Rechteck" gegen den helleren
 * Panel-BG #1e293b springen). Plus klarer Border-Color so dass die
 * Eingabe-Felder ueberall einheitlich aussehen, egal in welchem
 * Container sie sitzen. */
html[data-theme="dark"] .form-control,
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="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #16223a !important;
    color: var(--kh-text) !important;
    border: 1px solid var(--kh-border-strong) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
/* WICHTIG: KEIN globales padding/height-Override auf Inputs!
 * Reason: swiftmodders nutzt .prepend-icon mit absolut positioniertem
 * <label class="field-icon"> + padding-left auf dem Input fuer die
 * Icon-Spalte (Checkout-Card-Name "Geben Sie einen Namen ein"). Ein
 * padding:8px 12px !important kill'd diese Reservierung und das Icon
 * uebermalt den Placeholder. Geometrie/Spacing gehoeren nicht ins
 * Theme-Overlay, nur Farben. */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: var(--kh-accent) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 0 3px rgba(59,130,246,0.25) !important;
    outline: none !important;
}
html[data-theme="dark"] select,
html[data-theme="dark"] select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,6 8,10 12,6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}
/* WICHTIG: KEIN padding-left-Override auf select!
 * .prepend-icon .field { padding-left:36px } reserviert Platz fuer das
 * absolut positionierte Country-/State-Icon. Ein padding:8px 36px 8px 12px
 * !important kill'd das und das Icon ueberdeckt das "Germany"-Label
 * im Country-Dropdown auf der Register-Page. */
html[data-theme="dark"] select option {
    background-color: #16223a !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] .input-group-btn {
    background-color: var(--kh-bg-inset) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
/* Form-Labels: swiftmodders default ist ~#555 was im Dark-Mode kaum
 * sichtbar ist. Wir setzen alle label-Varianten + dt/dd auf
 * var(--kh-text). */
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .field-label,
html[data-theme="dark"] dt,
html[data-theme="dark"] legend {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] dd {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .field-help {
    color: var(--kh-text-muted) !important;
}

/* TipTap / Markdown-Editor body: Heller BG damit User Eingabe-Bereich
 * vom Panel unterscheiden kann. Solid border statt dashed. */
html[data-theme="dark"] .ProseMirror,
html[data-theme="dark"] .markdown-editor,
html[data-theme="dark"] .markdown-editor .ProseMirror,
html[data-theme="dark"] .markdown-editor [contenteditable="true"],
html[data-theme="dark"] .markdown-editor-body,
html[data-theme="dark"] [contenteditable="true"],
html[data-theme="dark"] .md-editor,
html[data-theme="dark"] .EasyMDEContainer .CodeMirror,
html[data-theme="dark"] .CodeMirror-lines,
html[data-theme="dark"] .editor-content,
html[data-theme="dark"] .editor-preview,
html[data-theme="dark"] .editor-preview-side {
    background-color: #16223a !important;
    color: var(--kh-text) !important;
    border: 1px solid var(--kh-border-strong) !important;
    border-style: solid !important;
}
html[data-theme="dark"] .markdown-editor {
    border-radius: 4px;
    overflow: hidden;
}

/* Editor-Toolbar (B I H Link List Code Quote Vorschau ?). swiftmodders
 * rendert das standardmaessig mit weissem BG, im Dark-Mode bleibt das
 * unsichtbar. Wir setzen toolbar + alle Buttons + Icons darkmode-konform. */
html[data-theme="dark"] .markdown-editor .editor-toolbar,
html[data-theme="dark"] .editor-toolbar,
html[data-theme="dark"] .EasyMDEContainer .editor-toolbar,
html[data-theme="dark"] .markdown-editor-toolbar,
html[data-theme="dark"] .md-editor-toolbar {
    background-color: var(--kh-bg-inset) !important;
    border: 1px solid var(--kh-border) !important;
    border-bottom: none !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .markdown-editor .editor-toolbar button,
html[data-theme="dark"] .editor-toolbar button,
html[data-theme="dark"] .editor-toolbar a,
html[data-theme="dark"] .markdown-editor .editor-toolbar a,
html[data-theme="dark"] .EasyMDEContainer .editor-toolbar button,
html[data-theme="dark"] .EasyMDEContainer .editor-toolbar a {
    background-color: transparent !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .markdown-editor .editor-toolbar button:hover,
html[data-theme="dark"] .editor-toolbar button:hover,
html[data-theme="dark"] .editor-toolbar button.active,
html[data-theme="dark"] .markdown-editor .editor-toolbar a:hover {
    background-color: rgba(255,255,255,0.07) !important;
    color: #fff !important;
}
html[data-theme="dark"] .editor-toolbar i.separator {
    border-color: var(--kh-border) !important;
}

/* Editor-Statusbar (lines/words/saved) */
html[data-theme="dark"] .markdown-editor .editor-statusbar,
html[data-theme="dark"] .editor-statusbar,
html[data-theme="dark"] .EasyMDEContainer .editor-statusbar {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text-muted) !important;
    border: 1px solid var(--kh-border) !important;
    border-top: none !important;
}

/* Ticket-Reply-Cards (Antwort-History unten auf View-Ticket-Page).
 * swiftmodders hat zwei Layouts: Avatar links + Reply rechts, beide
 * in eigenen .panel/.well Containern. */
html[data-theme="dark"] .ticket-reply,
html[data-theme="dark"] .ticket-replies,
html[data-theme="dark"] .ticket-message,
html[data-theme="dark"] .ticket-msg,
html[data-theme="dark"] .sm-ticket-msg,
html[data-theme="dark"] .sm-ticket-reply,
html[data-theme="dark"] .sm-message,
html[data-theme="dark"] .reply-container,
html[data-theme="dark"] .reply-content,
html[data-theme="dark"] .message-body,
html[data-theme="dark"] .message-content,
html[data-theme="dark"] .post-content,
html[data-theme="dark"] .sm-message-content,
html[data-theme="dark"] .sm-message-body {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
/* Avatar-Spalte mit Name/Email/Badge */
html[data-theme="dark"] .ticket-user,
html[data-theme="dark"] .ticket-author,
html[data-theme="dark"] .sm-ticket-user,
html[data-theme="dark"] .sm-message-user,
html[data-theme="dark"] .post-user,
html[data-theme="dark"] .message-user,
html[data-theme="dark"] .user-info,
html[data-theme="dark"] .reply-author {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
/* Ticket-Reply Texte hell */
html[data-theme="dark"] .ticket-message p,
html[data-theme="dark"] .ticket-reply p,
html[data-theme="dark"] .sm-message-body p,
html[data-theme="dark"] .message-content p,
html[data-theme="dark"] .reply-content p {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .ticket-message small,
html[data-theme="dark"] .ticket-reply small,
html[data-theme="dark"] .message-content small,
html[data-theme="dark"] .reply-time,
html[data-theme="dark"] .reply-date {
    color: var(--kh-text-muted) !important;
}
/* swiftmodders .ticket-reply Markup: <div class="user"> + <div class="message">.
 * Die generischen ".message"/".user" Klassen liegen nur innerhalb von
 * .ticket-reply, deshalb scope auf den Parent fuer Kollisionsfreiheit. */
html[data-theme="dark"] .ticket-reply .message {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-top-color: var(--kh-border-strong) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35) !important;
}
html[data-theme="dark"] .ticket-reply.staff .message {
    border-top-color: var(--kh-accent) !important;
}
/* Sprechblasen-Pfeil (border-right/left:7px solid #FFF) muss zur
 * Card-Farbe passen, sonst weisses Dreieck am Rand. */
html[data-theme="dark"] .ticket-reply .message:before {
    border-right-color: var(--kh-bg-elevated) !important;
    border-bottom-color: var(--kh-bg-elevated) !important;
}
html[data-theme="dark"] .ticket-reply.staff .message:before {
    border-left-color: var(--kh-bg-elevated) !important;
    border-bottom-color: var(--kh-bg-elevated) !important;
}
html[data-theme="dark"] .ticket-reply .message,
html[data-theme="dark"] .ticket-reply .message p,
html[data-theme="dark"] .ticket-reply .message div,
html[data-theme="dark"] .ticket-reply .message li {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .ticket-reply .message .date,
html[data-theme="dark"] .ticket-reply .user .type {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .ticket-reply .message a {
    color: var(--kh-accent) !important;
}
html[data-theme="dark"] .ticket-reply .user img {
    border-color: var(--kh-border-strong) !important;
}
html[data-theme="dark"] .ticket-reply .message hr {
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .ticket-reply .message .attachments {
    border-top: 1px solid var(--kh-border) !important;
}
html[data-theme="dark"] .markdown-editor .editor-statusbar,
html[data-theme="dark"] .EasyMDEContainer .editor-statusbar,
html[data-theme="dark"] .editor-statusbar {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text-muted) !important;
    border-top: 1px solid var(--kh-border) !important;
}

/* Buttons */
html[data-theme="dark"] .btn-default {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border-strong) !important;
}
html[data-theme="dark"] .btn-default:hover {
    background-color: var(--kh-border) !important;
}
/* Gefuellte Buttons MUESSEN weissen Text behalten. Unser globales
 * a { color: var(--kh-accent) } weiter unten faerbt sonst auch
 * `<a class="btn btn-success">`-Anchors blau, was im Screenshot als
 * "Order Now"-Text blau-auf-gruen sichtbar wurde. */
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] a.btn-info,
html[data-theme="dark"] a.btn-warning,
html[data-theme="dark"] a.btn-danger,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-danger {
    color: #fff !important;
}
html[data-theme="dark"] a.btn-primary:hover,
html[data-theme="dark"] a.btn-success:hover,
html[data-theme="dark"] a.btn-info:hover,
html[data-theme="dark"] a.btn-warning:hover,
html[data-theme="dark"] a.btn-danger:hover {
    color: #fff !important;
}

/* Links */
html[data-theme="dark"] a {
    color: var(--kh-accent);
}
html[data-theme="dark"] a:hover {
    color: var(--kh-accent-hover);
}
/* btn-Anchors (siehe oben) duerfen die generische a-Color nicht erben */
html[data-theme="dark"] a.btn {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] a.btn-info,
html[data-theme="dark"] a.btn-warning,
html[data-theme="dark"] a.btn-danger {
    color: #fff !important;
}

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb {
    background-color: transparent !important;
}
html[data-theme="dark"] .breadcrumb > .active {
    color: var(--kh-text-muted);
}

/* Code / Pre */
html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
    background-color: var(--kh-bg-inset) !important;
    color: #86efac !important;
    border-color: var(--kh-border) !important;
}

/* Alerts */
html[data-theme="dark"] .alert-success {
    background-color: #064e3b !important; color: #d1fae5 !important; border-color: #065f46 !important;
}
html[data-theme="dark"] .alert-info {
    background-color: #1e3a8a !important; color: #dbeafe !important; border-color: #2563eb !important;
}
html[data-theme="dark"] .alert-warning {
    background-color: #78350f !important; color: #fed7aa !important; border-color: #92400e !important;
}
html[data-theme="dark"] .alert-danger {
    background-color: #7f1d1d !important; color: #fecaca !important; border-color: #991b1b !important;
}

/* Borders / HR */
html[data-theme="dark"] hr {
    border-color: var(--kh-border) !important;
}

/* Labels / Badges (Sichtbarkeit erhalten) */
html[data-theme="dark"] .label,
html[data-theme="dark"] .badge {
    color: #fff !important;
}

/* Home-Banner Background + Page-Header siehe weiter unten,
 * KEIN generisches .overlay/.container hier (zu breit, killte
 * .container im #home-banner und versteckte das BG-Bild). */
html[data-theme="dark"] .sm-page-container .pageheader,
html[data-theme="dark"] .pageheader {
    background-color: var(--kh-bg-inset) !important;
    border-bottom-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}

/* Footer (falls vorhanden) */
html[data-theme="dark"] .sm-footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text-muted) !important;
    border-top-color: var(--kh-border) !important;
}

/* Login-Page Overrides: swiftmodders setzt sowohl auf html als auch
 * auf body.login einen Light-Gradient als BG, der mein
 * background-color-Override mit !important nicht killt. Wir muessen
 * deshalb sowohl `background` (image+color) als auch `background-image:none`
 * auf BEIDE Elemente plus den Login-Container setzen. */
html[data-theme="dark"],
html[data-theme="dark"] body.login,
html[data-theme="dark"] body.login.login-bg,
html[data-theme="dark"] .login-content,
html[data-theme="dark"] .loginbox,
html[data-theme="dark"] .login-container,
html[data-theme="dark"] .sm-login-bg,
html[data-theme="dark"] .sm-login-container,
html[data-theme="dark"] body.login > .sm-login,
html[data-theme="dark"] body.login > .container {
    background: var(--kh-bg) !important;
    background-image: none !important;
    background-color: var(--kh-bg) !important;
    color: var(--kh-text) !important;
}
/* swiftmodders verwendet als Login-Box-Wrapper `.sm-login-box` (auch
 * mit Modifier `with-social`). Innen liegen Inputs + Buttons. Wir
 * machen die Box auf elevated-BG, sodass sie sich vom Page-BG abhebt. */
html[data-theme="dark"] .sm-login-box,
html[data-theme="dark"] .sm-login-box.with-social,
html[data-theme="dark"] .sm-login {
    background-color: var(--kh-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .sm-login-box h1,
html[data-theme="dark"] .sm-login-box h2,
html[data-theme="dark"] .sm-login-box h3,
html[data-theme="dark"] .sm-login-box label {
    color: var(--kh-text) !important;
}
/* swiftmodders Login-Page legt eine .bg-overlay mit
 * rgba(255,255,255,0.75) ueber den Body (zur Abdunkelung des
 * Background-Image im Light-Mode). Im Dark-Mode macht das den
 * Page-BG washy-grey. Wir invertieren auf dunklen Overlay. */
html[data-theme="dark"] body.login .bg-overlay,
html[data-theme="dark"] .bg-overlay {
    background-color: rgba(15,23,42,0.85) !important;
}

/* Loading-Spinner (sm-loading) sichtbar bleiben */
html[data-theme="dark"] .sm-loading-container {
    background-color: rgba(15,23,42,0.8) !important;
}

/* ------------------------------------------------------------------
 * Globale Text-Color-Overrides
 * Headlines + Lead-Texte muessen ueberall lesbar werden, nicht nur in
 * den oben aufgelisteten Container-Klassen.
 * ------------------------------------------------------------------ */
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"] .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 {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .lead,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .small,
html[data-theme="dark"] p {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid {
    color: var(--kh-text) !important;
}

/* ------------------------------------------------------------------
 * WHMCS Cart / Shop / Order-Page Komponenten
 * Die Cart-Page hat eigene Klassen, die nicht von den allgemeinen
 * Panel/Card-Selektoren abgedeckt werden.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .cart-step,
html[data-theme="dark"] .cart-step-title,
html[data-theme="dark"] .product-info,
html[data-theme="dark"] .product-info-block,
html[data-theme="dark"] .product-details,
html[data-theme="dark"] .product-config-options,
html[data-theme="dark"] .summary-container,
html[data-theme="dark"] .cart-summary,
html[data-theme="dark"] .cart-container,
html[data-theme="dark"] .cart-sidebar,
html[data-theme="dark"] .shopping-cart,
html[data-theme="dark"] .feature-block,
html[data-theme="dark"] .feature-list,
html[data-theme="dark"] .order-summary,
html[data-theme="dark"] .order-review,
html[data-theme="dark"] .order-totals,
html[data-theme="dark"] .checkout-step,
html[data-theme="dark"] .domain-summary,
html[data-theme="dark"] .product-summary,
html[data-theme="dark"] #productDescription,
html[data-theme="dark"] #productOverview,
html[data-theme="dark"] .item-row,
html[data-theme="dark"] .promo-box {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .cart-step-title,
html[data-theme="dark"] .checkout-step-title,
html[data-theme="dark"] .order-summary-header,
html[data-theme="dark"] .product-summary-header {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-bottom-color: var(--kh-border) !important;
}

/* swiftmodders_cart Orderform-Klassen: das eigentliche Produkt-Listing
 * im Cart benutzt KEIN .pricing-plan sondern Plain .product / .product-desc
 * / .product-pricing innerhalb von .products .row .col-md-6. Beobachtet
 * auf /cp/store/professional-kvm-root-server. */
html[data-theme="dark"] .cart-body,
html[data-theme="dark"] .products,
html[data-theme="dark"] .product,
html[data-theme="dark"] .product header,
html[data-theme="dark"] .product-desc,
html[data-theme="dark"] .product-pricing,
html[data-theme="dark"] .product-recommendations,
html[data-theme="dark"] .product-recommendation,
html[data-theme="dark"] .sm-sidebar,
html[data-theme="dark"] .sm-sidebar.cart-sidebar,
html[data-theme="dark"] .sidebar-collapsed,
html[data-theme="dark"] .sm-cart {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .product header,
html[data-theme="dark"] .product header span,
html[data-theme="dark"] .product-desc strong,
html[data-theme="dark"] .product-desc p,
html[data-theme="dark"] .product-desc small {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .product-desc strong {
    color: var(--kh-text) !important;
    font-weight: 600;
}
/* Cart-Card-Vereinheitlichung: swiftmodders rendert die Cart-Cards mit
 * mehreren ineinander gestapelten Containern (.product > header / .product-desc /
 * footer > .product-pricing), die jeweils EIGENE BG-Layer haben. Im Dark-Mode
 * erscheinen die Cards dadurch zweigeteilt (linker Spec-Block heller, rechte
 * Pricing-Box dunkler).
 *
 * Loesung: NUR .product (outer) bekommt den Card-BG. Alle inneren Container
 * werden transparent, damit der Outer-BG einheitlich durchscheint. Border-
 * Trennlinie zwischen Spec und Pricing wird per border-left auf
 * .product-pricing gesetzt (subtil, kein BG-Wechsel). */
html[data-theme="dark"] .product {
    background-color: var(--kh-bg-elevated) !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .product header,
html[data-theme="dark"] .product > header,
html[data-theme="dark"] .product footer,
html[data-theme="dark"] .product > footer,
html[data-theme="dark"] .product .product-desc,
html[data-theme="dark"] .product .product-pricing,
html[data-theme="dark"] .product > footer .product-pricing,
html[data-theme="dark"] .product .product-info,
html[data-theme="dark"] .product .product-details,
html[data-theme="dark"] .product .product-body {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .product .product-pricing {
    border-left: 1px solid var(--kh-border) !important;
}
html[data-theme="dark"] .product-pricing .price,
html[data-theme="dark"] .product-pricing .cycle,
html[data-theme="dark"] .product-pricing .price-prefix,
html[data-theme="dark"] .product-pricing .price-postfix,
html[data-theme="dark"] .product-pricing strong,
html[data-theme="dark"] .product-pricing span:not(.price):not(.btn span) {
    color: var(--kh-text) !important;
}
/* Der grosse Preis (.price) soll farbig herausstechen (Brand-Akzent) */
html[data-theme="dark"] .product-pricing .price {
    color: var(--kh-accent-hover) !important;
    font-weight: 700;
}
html[data-theme="dark"] .row-eq-height > [class*="col-"] {
    background-color: transparent !important;
}

/* "Ueberpruefung & Kasse" View-Cart-Page (viewcart.tpl).
 * Klassen: .view-cart (outer), .view-cart-items-header (Tabellen-Header
 * mit "Produkt/Optionen | Preis/Zyklus"), .view-cart-items (Body),
 * .item (jede Cart-Row), .item-title / .item-group / .item-domain /
 * .item-qty / .item-price (Spalten-Inhalt). Plus die ueberge-
 * ordneten .secondary-cart-body und .sm-content.cart-body Wrapper. */
html[data-theme="dark"] .view-cart,
html[data-theme="dark"] .view-cart-items,
html[data-theme="dark"] .view-cart .item,
html[data-theme="dark"] .secondary-cart-body,
html[data-theme="dark"] .sm-content.cart-body,
html[data-theme="dark"] .cart-body {
    background-color: var(--kh-bg-elevated) !important;
    background-image: none !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .view-cart-items-header {
    background-color: var(--kh-bg-inset) !important;
    background-image: none !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .view-cart .item-title,
html[data-theme="dark"] .view-cart .item-title a,
html[data-theme="dark"] .view-cart .item-group,
html[data-theme="dark"] .view-cart .item-domain,
html[data-theme="dark"] .view-cart .item-price,
html[data-theme="dark"] .view-cart .item-price span,
html[data-theme="dark"] .view-cart .item-qty,
html[data-theme="dark"] .view-cart .item-qty input {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .view-cart .item-group {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .view-cart .item small,
html[data-theme="dark"] .view-cart .item-price + small,
html[data-theme="dark"] .view-cart .item .cycle {
    color: var(--kh-text-muted) !important;
}
/* Edit/Remove-Buttons in der Cart-Row */
html[data-theme="dark"] .view-cart .btn-link,
html[data-theme="dark"] .view-cart .btn-remove-from-cart,
html[data-theme="dark"] .view-cart a.edit-config {
    color: var(--kh-accent) !important;
}
html[data-theme="dark"] .view-cart .btn-link:hover {
    color: var(--kh-accent-hover) !important;
}
/* Promo-Code / Tax-Section Wrapper */
html[data-theme="dark"] .promo-code,
html[data-theme="dark"] .promo-input,
html[data-theme="dark"] .tax-section,
html[data-theme="dark"] .calculate-tax {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}

/* WHMCS-Pricing-Plan-Cards (swiftmodders cart) */
html[data-theme="dark"] .pricing-plan,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-tile,
html[data-theme="dark"] .pricing,
html[data-theme="dark"] .price-box,
html[data-theme="dark"] .price-block {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .pricing-top,
html[data-theme="dark"] .price-header {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
}

/* Bootstrap-Utility-Helper die Cards weiss/hell machen */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-default {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black {
    color: var(--kh-text) !important;
}

/* Page-Title-Section (vps page top) */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .hosting-bg,
html[data-theme="dark"] .page-title.hosting-bg,
html[data-theme="dark"] .pageheader,
html[data-theme="dark"] .section-title {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
}

/* Section-Divider .sub-heading: <div class="sub-heading"><span>Label</span></div>
 * Original swiftmodders: border-top:1px solid #eee + span mit weissem BG
 * der die Linie an der Stelle des Textes maskiert (Pill-Effekt).
 *
 * Im Dark-Mode: span-BG muss zum umgebenden Container passen damit kein
 * heller/dunkler Kasten in der Linie sichtbar wird. Da die meisten
 * sub-headings im Panel-Body sitzen (--kh-bg-elevated), nehmen wir den.
 * Wenn der sub-heading direkt auf der Page sitzt (selten), faellt der
 * Unterschied minimal aus. */
html[data-theme="dark"] .sub-heading {
    border-top-color: var(--kh-border) !important;
}
html[data-theme="dark"] .sub-heading > span,
html[data-theme="dark"] .sub-heading span {
    background-color: var(--kh-bg-elevated) !important;
    background-image: none !important;
    color: var(--kh-text) !important;
}
/* Field-Container (Wrapper unter .sub-heading) */
html[data-theme="dark"] .field-container,
html[data-theme="dark"] .product-configurable-options {
    background-color: transparent !important;
}

/* Selects: per default browser-styled (anderes Padding, Border-Radius,
 * Pfeil), sehen daher anders aus als `<input type="text">`. Wir
 * vereinheitlichen das Look-and-Feel mit appearance:none + custom
 * inline-SVG-Pfeil. Resultat: gleiche Hoehe, gleicher Border, gleicher
 * BG wie bei den anderen Inputs. */
html[data-theme="dark"] select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .form-control[type="select"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 7px !important;
    padding-right: 36px !important;
    cursor: pointer;
}
html[data-theme="dark"] select::-ms-expand {
    display: none !important;
}
/* Konsistente Hoehe + Padding fuer alle Form-Felder (Inputs + Selects
 * + Textareas). swiftmodders setzt Inputs auf ~36px, Selects waren
 * teils 42px. Wir vereinheitlichen. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] input.form-control[type="text"],
html[data-theme="dark"] input.form-control[type="email"],
html[data-theme="dark"] input.form-control[type="password"],
html[data-theme="dark"] input.form-control[type="search"],
html[data-theme="dark"] input.form-control[type="tel"],
html[data-theme="dark"] input.form-control[type="url"],
html[data-theme="dark"] input.form-control[type="number"] {
    border-radius: 4px !important;
    font-size: 14px !important;
}
/* KEIN padding/height-Override hier!
 * swiftmodders setzt .prepend-icon .field { padding-left:36px } um
 * Platz fuer das absolut positionierte .field-icon (Pencil, Mail,
 * Lock, ...) zu reservieren. Ein generisches padding: 8px 12px
 * !important kill'd diese Reservierung und das Icon ueberdeckt
 * Placeholder-Texte (Checkout-Card-Name, Login-Email). */
html[data-theme="dark"] textarea.form-control {
    border-radius: 4px !important;
    font-size: 14px !important;
}
html[data-theme="dark"] select.form-control {
    padding-right: 36px !important;
}
html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .page-title h2,
html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .hosting-bg h1,
html[data-theme="dark"] .hosting-bg p,
html[data-theme="dark"] .section-title h2 {
    color: var(--kh-text) !important;
}

/* ------------------------------------------------------------------
 * swiftmodders_cart Orderform-Komponenten (KVM-Konfigurator etc.)
 * Diese Klassen liegen NICHT auf .product-info sondern auf .product
 * direkt. Ohne die Override bleibt die Konfigurator-Card weiss auf
 * dunklem Hintergrund (Screenshot-Report 2026-05-15).
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .product,
html[data-theme="dark"] .product.clearfix,
html[data-theme="dark"] .product > header,
html[data-theme="dark"] .product > section,
html[data-theme="dark"] .product .product-body,
html[data-theme="dark"] .product .product-content,
html[data-theme="dark"] .product .product-config,
html[data-theme="dark"] .product .config-options,
html[data-theme="dark"] .row.row-eq-height > .col-md-6 > .product,
html[data-theme="dark"] .row.row-eq-height > .col-md-6 > .product.clearfix {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .product header,
html[data-theme="dark"] .product header span,
html[data-theme="dark"] .product .product-title,
html[data-theme="dark"] .product .product-name {
    color: var(--kh-text) !important;
    background-color: transparent !important;
}
/* Configurable-Options-Container bleibt transparent (sitzt im .panel-body),
 * die inneren Selects/Inputs werden gleich gestylt wie der Hostname-Input
 * (--kh-bg-inset war zu dunkel -> "haessliche schwarze Bloecke"). */
html[data-theme="dark"] .product-configurable-options {
    background-color: transparent !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .product-configurable-options .form-control,
html[data-theme="dark"] .product-configurable-options select,
html[data-theme="dark"] .product-configurable-options input,
html[data-theme="dark"] #productConfigurableOptions .form-control,
html[data-theme="dark"] #productConfigurableOptions select,
html[data-theme="dark"] #productConfigurableOptions input {
    background-color: #16223a !important;
    color: var(--kh-text) !important;
    border: 1px solid var(--kh-border-strong) !important;
    border-radius: 4px !important;
}
html[data-theme="dark"] .product-recommendation,
html[data-theme="dark"] .product-recommendations,
html[data-theme="dark"] .product-recommendations-container,
html[data-theme="dark"] .secondary-cart-body,
html[data-theme="dark"] .secondary-cart-sidebar,
html[data-theme="dark"] .sm-content.cart-body,
html[data-theme="dark"] .sm-sidebar.cart-sidebar,
html[data-theme="dark"] .panel.card-sidebar,
html[data-theme="dark"] .panel.panel-sidebar,
html[data-theme="dark"] .collapsable-card-body {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}

/* Konfigurator-spec-Liste (HTML aus tblproducts.description, idR mit
 * plain <p> / <ul> ohne eigene Klassen). Text muss hell genug sein. */
html[data-theme="dark"] .product ul li,
html[data-theme="dark"] .product ol li,
html[data-theme="dark"] .product .product-description,
html[data-theme="dark"] .product-info ul li,
html[data-theme="dark"] .product-info p,
html[data-theme="dark"] .product-info .product-description {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .product strong,
html[data-theme="dark"] .product b,
html[data-theme="dark"] .product-info strong,
html[data-theme="dark"] .product-info b {
    color: var(--kh-text) !important;
}

/* ------------------------------------------------------------------
 * Linke Sidebar-Nav (swiftmodders verwendet `.sm-nav` sowohl im Header
 * als auch als linke Sidebar). Die Sidebar hat eigenes Markup mit
 * #sm-nav > ul#menu > li > a + nested ul fuer submenus.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .sm-sidebar,
html[data-theme="dark"] nav.sm-nav,
html[data-theme="dark"] #sm-nav,
html[data-theme="dark"] #sm-nav .heading,
html[data-theme="dark"] #menu,
html[data-theme="dark"] #menu li,
html[data-theme="dark"] #menu li ul,
html[data-theme="dark"] #menu li.dropdown,
html[data-theme="dark"] #menu li.open,
html[data-theme="dark"] .sm-nav-container {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] #sm-nav .heading,
html[data-theme="dark"] .sm-nav .heading {
    color: var(--kh-text-muted) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] #menu li a,
html[data-theme="dark"] #menu li > a span,
html[data-theme="dark"] #menu li .menuName,
html[data-theme="dark"] .sm-nav a {
    color: var(--kh-text) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] #menu li a:hover,
html[data-theme="dark"] #menu li a:focus,
html[data-theme="dark"] .sm-nav a:hover,
html[data-theme="dark"] .sm-nav a:focus {
    background-color: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}
html[data-theme="dark"] #menu > li.active > a,
html[data-theme="dark"] #menu > li.open > a,
html[data-theme="dark"] #menu li.active > a {
    background-color: var(--kh-accent) !important;
    color: #fff !important;
}
html[data-theme="dark"] #menu li ul li a,
html[data-theme="dark"] #menu .submenu li a {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] #menu li ul li a:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] #menu .nav-divider {
    border-color: var(--kh-border) !important;
    background-color: transparent !important;
}

/* ------------------------------------------------------------------
 * Tabs: Bootstrap nav-tabs + swiftmodders Cart/Home-Tabs
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs > li > a,
html[data-theme="dark"] .nav-pills,
html[data-theme="dark"] .nav-pills > li > a {
    border-color: var(--kh-border) !important;
    background-color: transparent !important;
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .nav-tabs > li > a:hover,
html[data-theme="dark"] .nav-pills > li > a:hover {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border-strong) !important;
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) var(--kh-border) var(--kh-bg-elevated) !important;
}
html[data-theme="dark"] .nav-pills > li.active > a,
html[data-theme="dark"] .nav-pills > li.active > a:hover {
    background-color: var(--kh-accent) !important;
    color: #fff !important;
}
html[data-theme="dark"] .tab-content {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}

/* ------------------------------------------------------------------
 * Home-Banner (#home-banner auf index.php / clientareahome.tpl)
 *
 * swiftmodders Original-Markup:
 *   #home-banner { background:#fff; border-top:2px solid #94bd31; }
 *   #home-banner .overlay { background:url(domains-background.jpg) center;
 *                           opacity:0.2; position:absolute; full size }
 *
 * Problem im Dark-Mode: Wenn man #home-banner einfach dunkel macht,
 * verschwindet das BG-Bild fast komplett (image @ opacity:0.2 ueber
 * dark-bg = kaum sichtbar). Fix: Bild-Opazitaet HOCHschrauben damit
 * das Foto als Hero-Hintergrund klar erkennbar bleibt, plus den
 * Banner-Container selbst dunkel halten (border-top bleibt accent).
 *
 * KEIN background-color auf .container (das war der dunkle Streifen
 * mitten in der Banner-Mitte um Input/Captcha herum).
 * ------------------------------------------------------------------ */
html[data-theme="dark"] #home-banner,
html[data-theme="dark"] .home-banner {
    background-color: var(--kh-bg-elevated) !important;
    border-top-color: var(--kh-accent) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] #home-banner h2 {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] #home-banner .overlay,
html[data-theme="dark"] .home-banner .overlay {
    background-color: transparent !important;
    opacity: 0.5 !important;
}
/* h-captcha-Container braucht keinen Eingriff (iframe = cross-origin) */

/* Home-Shortcuts (Buy Domain / Order Hosting / Make Payment / Get Support):
 * Die Buttons haben individuelle Brand-Farben via IDs:
 *   #btnBuyADomain (orange) #btnOrderHosting (blue)
 *   #btnMakePayment (green) #btnGetSupport (red)
 * Dark-Mode: Nur den Container und das "How can we help today?" Label
 * dunkel machen. NICHT die Buttons selbst (die behalten ihre Brand-BGs). */
html[data-theme="dark"] .home-shortcuts {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .home-shortcuts .lead {
    color: var(--kh-text) !important;
}
/* Button-Text inside den 4 Shortcut-Cards: Mein globaler a{color:accent}
 * Override faerbt die Anchor-Beschriftungen ("Buy A Domain" etc.)
 * blau, was gegen die farbigen Brand-BGs nicht lesbar ist. Forciere
 * weiss damit die Text-Color zu den orange/blue/green/red BGs passt
 * (genau wie im Light-Mode). */
html[data-theme="dark"] .home-shortcuts li a,
html[data-theme="dark"] .home-shortcuts li a p,
html[data-theme="dark"] .home-shortcuts li a span,
html[data-theme="dark"] .home-shortcuts li a i,
html[data-theme="dark"] .home-shortcuts li #btnBuyADomain,
html[data-theme="dark"] .home-shortcuts li #btnOrderHosting,
html[data-theme="dark"] .home-shortcuts li #btnMakePayment,
html[data-theme="dark"] .home-shortcuts li #btnGetSupport {
    color: #fff !important;
}
/* h-captcha-Container braucht keinen Eingriff (iframe = cross-origin),
 * aber der Wrapper-Div soll dunkel sein. */
html[data-theme="dark"] .h-captcha,
html[data-theme="dark"] [data-sitekey] {
    background-color: var(--kh-bg-elevated) !important;
}

/* ------------------------------------------------------------------
 * DataTables jQuery-Plugin (My Services / My Domains / My Invoices /
 * Tickets etc.). Standard-Markup: .dataTables_wrapper umschliesst
 * .dataTables_filter (search input), .dataTables_length (page-size
 * select), table.dataTable (mit tr.odd / tr.even striping), .dataTables_info,
 * .dataTables_paginate (Vor/Zurueck-Buttons).
 *
 * Ohne diese Overrides sind die geraden Zeilen weiss, das Suchfeld und
 * der Page-Size-Dropdown unsichtbar (schwarz-auf-schwarz).
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_paginate,
html[data-theme="dark"] .dataTables_processing {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .dataTables_filter label,
html[data-theme="dark"] .dataTables_length label {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_filter input[type="search"],
html[data-theme="dark"] .dataTables_length select {
    background-color: #16223a !important;
    color: var(--kh-text) !important;
    border: 1px solid var(--kh-border-strong) !important;
}
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] table.dataTable.no-footer {
    background-color: var(--kh-bg-elevated) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable tbody tr.even,
html[data-theme="dark"] table.dataTable tbody tr.even td,
html[data-theme="dark"] table.dataTable.stripe tbody tr.even,
html[data-theme="dark"] table.dataTable.display tbody tr.even {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] table.dataTable tbody tr.odd,
html[data-theme="dark"] table.dataTable tbody tr.odd td,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd td,
html[data-theme="dark"] table.dataTable.display tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd td {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover td,
html[data-theme="dark"] table.dataTable.display tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover td {
    background-color: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th {
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] table.dataTable tbody td a {
    color: var(--kh-accent) !important;
}

/* DataTables pagination buttons */
html[data-theme="dark"] .dataTables_paginate .paginate_button,
html[data-theme="dark"] .dataTables_paginate a.paginate_button {
    background-color: transparent !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current:hover {
    background: var(--kh-accent) !important;
    color: #fff !important;
    border-color: var(--kh-accent) !important;
}
html[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}
html[data-theme="dark"] .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: var(--kh-text-muted) !important;
    opacity: 0.5;
}

/* Aggressiver Fallback: WHMCS DataTables markup variiert. Manche Pages
 * haben `tr.odd` / `tr.even` Klassen, andere nur `:nth-child(odd)` mit
 * !important im Plugin-CSS. Wir ueberschreiben BEIDE, damit die Striped-
 * Zeilen in jedem Fall dunkel werden. Specificity hochgezogen ueber
 * `tbody tbody` triple-Match + !important. */
html[data-theme="dark"] table tbody tr:nth-child(odd),
html[data-theme="dark"] table tbody tr:nth-child(odd) > td,
html[data-theme="dark"] table tbody tr:nth-child(odd) > th,
html[data-theme="dark"] .table tbody tr:nth-child(odd),
html[data-theme="dark"] .table tbody tr:nth-child(odd) > td,
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) > td,
html[data-theme="dark"] table.dataTable tbody tr:nth-child(odd),
html[data-theme="dark"] table.dataTable tbody tr:nth-child(odd) > td {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] table tbody tr:nth-child(even),
html[data-theme="dark"] table tbody tr:nth-child(even) > td,
html[data-theme="dark"] table tbody tr:nth-child(even) > th,
html[data-theme="dark"] .table tbody tr:nth-child(even),
html[data-theme="dark"] .table tbody tr:nth-child(even) > td,
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even),
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) > td,
html[data-theme="dark"] table.dataTable tbody tr:nth-child(even),
html[data-theme="dark"] table.dataTable tbody tr:nth-child(even) > td {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}

/* Sortier-Pfeile in DataTable Header */
html[data-theme="dark"] table.dataTable thead .sorting:after,
html[data-theme="dark"] table.dataTable thead .sorting_asc:after,
html[data-theme="dark"] table.dataTable thead .sorting_desc:after,
html[data-theme="dark"] table.dataTable thead .sorting_asc_disabled:after,
html[data-theme="dark"] table.dataTable thead .sorting_desc_disabled:after {
    color: var(--kh-text-muted) !important;
}

/* Inline-style="background: #fff" hat hoechste Specificity, also
 * brauchen wir attribute-selectors mit !important um sie zu kippen.
 * Vorsicht: ueberbreit. Wir setzen NUR background, nicht color, damit
 * Buttons (die oft inline-bg setzen) ihre Farben behalten. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #FFF"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#FFF"],
html[data-theme="dark"] [style*="background-color: #FFF"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"] {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}

/* ------------------------------------------------------------------
 * Affiliates + Email-History (My Emails) + andere DataTables-Pages
 * mit Bootstrap-Wrapper. WHMCS rendert DataTables ueber den
 * dataTables.bootstrap.css Adapter, der den .dataTables_wrapper als
 * .dt-bootstrap mit eigener weisser BG produziert. Der Wrapper liegt
 * AUSSERHALB unserer .panel-Selektoren, daher gezielt mit
 * !important und hoher Specificity.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] div.dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper.form-inline,
html[data-theme="dark"] .dataTables_wrapper.form-inline.dt-bootstrap,
html[data-theme="dark"] .dataTables_wrapper.dt-bootstrap,
html[data-theme="dark"] .dt-bootstrap,
html[data-theme="dark"] .listtable,
html[data-theme="dark"] div.listtable,
html[data-theme="dark"] .tableposition,
html[data-theme="dark"] .table-responsive {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
/* "No Records Found" Zelle */
html[data-theme="dark"] table.dataTable tbody td.dataTables_empty,
html[data-theme="dark"] table tbody td.dataTables_empty,
html[data-theme="dark"] td.dataTables_empty {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text-muted) !important;
    font-style: italic;
}
/* Affiliate-Stat-Boxen + Referral-Link */
html[data-theme="dark"] .affiliate-stat,
html[data-theme="dark"] .affiliate-stat-green,
html[data-theme="dark"] .affiliate-stat-blue,
html[data-theme="dark"] .affiliate-stat-orange,
html[data-theme="dark"] .affiliate-stat.alert-warning,
html[data-theme="dark"] .affiliate-stat.alert-info,
html[data-theme="dark"] .affiliate-stat.alert-success,
html[data-theme="dark"] .affiliate-referral-link,
html[data-theme="dark"] table.table-rounded,
html[data-theme="dark"] .table-rounded {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .affiliate-stat span,
html[data-theme="dark"] .affiliate-stat i {
    color: var(--kh-text) !important;
}

/* Reseller-API Stats-Cards (Catch-All falls inline CSS in
 * clientarea_view.php nicht aus irgendwelchen Gruenden greift). */
html[data-theme="dark"] .kh-card,
html[data-theme="dark"] .kh-rapi-stats .kh-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .stat-tile,
html[data-theme="dark"] .summary-card {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .kh-card .kh-card-label,
html[data-theme="dark"] .kh-rapi-stats .kh-card .kh-card-label,
html[data-theme="dark"] .stat-card .stat-label {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .kh-card .kh-card-value,
html[data-theme="dark"] .kh-rapi-stats .kh-card .kh-card-value,
html[data-theme="dark"] .stat-card .stat-value {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .kh-card .kh-card-sub,
html[data-theme="dark"] .kh-rapi-stats .kh-card .kh-card-sub {
    color: var(--kh-text-muted) !important;
}

/* ------------------------------------------------------------------
 * Newsletter-Box + Bootstrap-Switch + sonstige WHMCS-Toggle-Container.
 * Die "Abonnieren Sie unseren Newsletter"-Box hat einen hellen Wrapper
 * der im Dark-Mode weiss bleibt. Plus Label-Color zu hellgrau auf hell.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .newsletter-subscribe,
html[data-theme="dark"] .newsletter-toggle,
html[data-theme="dark"] .subscribe-newsletter,
html[data-theme="dark"] .bootstrap-switch-wrapper,
html[data-theme="dark"] .form-group.newsletter,
html[data-theme="dark"] .well-newsletter,
html[data-theme="dark"] .marketing-email-optin,
html[data-theme="dark"] div[class*="newsletter"],
html[data-theme="dark"] div[class*="subscribe"] {
    background-color: var(--kh-bg-elevated) !important;
    background-image: none !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .marketing-email-optin h4,
html[data-theme="dark"] .marketing-email-optin p,
html[data-theme="dark"] .marketing-email-optin label,
html[data-theme="dark"] div[class*="newsletter"] label,
html[data-theme="dark"] div[class*="subscribe"] label {
    color: var(--kh-text) !important;
}
/* Bootstrap-Switch Plugin */
html[data-theme="dark"] .bootstrap-switch {
    background-color: var(--kh-bg-inset) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off,
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-on {
    color: #fff !important;
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-label {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}
/* Catch-all fuer "Switch ist im hellen Container" Pattern:
 * irgendein div drumherum das den toggle umschliesst. */
html[data-theme="dark"] .panel-body > .form-group .bootstrap-switch,
html[data-theme="dark"] .panel-body > .form-group .toggle,
html[data-theme="dark"] .panel-body > .form-group .switch {
    border-color: var(--kh-border) !important;
}

/* ------------------------------------------------------------------
 * Service-Details-Page "Manage Product": Die grosse Produkt-Status-Box
 * mit dem Icon. swiftmodders setzt .product-status mit hellem
 * background-image-Gradient + Icon-Watermark, deshalb muss hier
 * SOWOHL background-color ALS AUCH background-image ueberschrieben
 * werden (nur background-color reicht nicht, weil der Gradient
 * daruebersteht).
 *
 * Die einzelnen .product-status-{status} Klassen tragen NUR den
 * Badge-BG (grun fuer active, orange fuer pending, rot fuer suspended),
 * NICHT den Box-BG. Deshalb haben wir hier nur .product-status (ohne
 * Status-Suffix) als Box-BG-Override, damit das Badge-Farbe erhalten
 * bleibt.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .product-details,
html[data-theme="dark"] .product-status,
html[data-theme="dark"] body div.product-status,
html[data-theme="dark"] body .product-status[class*="product-status-"],
html[data-theme="dark"] .panel .product-status,
html[data-theme="dark"] .panel-body .product-status,
html[data-theme="dark"] .col-md-6 .product-status,
html[data-theme="dark"] .col-md-6 > .product-status {
    background: var(--kh-bg-inset) !important;
    background-image: none !important;
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
/* Pseudo-elements falls swiftmodders Watermark-Icons als ::before /
 * ::after Background-Image macht. */
html[data-theme="dark"] .product-status::before,
html[data-theme="dark"] .product-status::after,
html[data-theme="dark"] .product-status .product-icon::before,
html[data-theme="dark"] .product-status .product-icon::after {
    background: none !important;
    background-image: none !important;
}
/* Inner Container die ihren eigenen BG haben koennten */
html[data-theme="dark"] .product-status > div,
html[data-theme="dark"] .product-status .product-icon {
    background: transparent !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .product-status h3,
html[data-theme="dark"] .product-status h4,
html[data-theme="dark"] .product-status .product-icon h3,
html[data-theme="dark"] .product-status .product-icon h4 {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .product-status .product-icon i,
html[data-theme="dark"] .product-status .product-icon .fa-stack {
    color: var(--kh-text-muted) !important;
    opacity: 0.35;
}
html[data-theme="dark"] .product-status .product-icon .fa-circle {
    color: var(--kh-border-strong) !important;
}
/* Status-Badge unten in der Box. Wir setzen das Badge-BG explizit pro
 * Status, weil swiftmodders' Original-Override-Mechanismus mit
 * .product-status-active .product-status-text greift, aber unser
 * generischer .product-status background-Override haengt potenziell
 * dazwischen. */
html[data-theme="dark"] .product-status-active .product-status-text {
    background-color: #16a34a !important;
    color: #fff !important;
}
html[data-theme="dark"] .product-status-pending .product-status-text {
    background-color: #ca8a04 !important;
    color: #fff !important;
}
html[data-theme="dark"] .product-status-suspended .product-status-text {
    background-color: #dc2626 !important;
    color: #fff !important;
}
html[data-theme="dark"] .product-status-terminated .product-status-text,
html[data-theme="dark"] .product-status-cancelled .product-status-text,
html[data-theme="dark"] .product-status-completed .product-status-text,
html[data-theme="dark"] .product-status-fraud .product-status-text {
    background-color: #6b7280 !important;
    color: #fff !important;
}

/* Recurring-Amount / Billing-Cycle Info-Spalte rechts daneben */
html[data-theme="dark"] .product-meta,
html[data-theme="dark"] .product-details-info,
html[data-theme="dark"] .product-overview-info dt,
html[data-theme="dark"] .product-overview-info dd {
    color: var(--kh-text) !important;
}

/* Domain/Service Resource-Usage Tab leerer Container */
html[data-theme="dark"] .tab-pane,
html[data-theme="dark"] .tab-pane.fade,
html[data-theme="dark"] .tab-pane.active {
    background-color: transparent !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .tab-pane > .panel,
html[data-theme="dark"] .tab-pane > .well {
    background-color: var(--kh-bg-elevated) !important;
}

/* Margin-bottom Container (swiftmodders wraps content) */
html[data-theme="dark"] .margin-bottom {
    background-color: transparent !important;
}

/* ------------------------------------------------------------------
 * viewinvoice.php (Standalone-Page, kein header.tpl, eigene Markup)
 * Inkludiert kh-darkmode.css separat via Patch im viewinvoice.tpl.
 * Selectoren spezifisch zu .invoice-container damit andere Pages
 * nicht versehentlich betroffen werden.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] body {
    background-color: var(--kh-bg) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .invoice-container {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
    box-shadow: var(--kh-shadow) !important;
}
html[data-theme="dark"] .invoice-container hr {
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .invoice-container .invoice-col,
html[data-theme="dark"] .invoice-container address,
html[data-theme="dark"] .invoice-container .small-text {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .invoice-container strong,
html[data-theme="dark"] .invoice-container h2,
html[data-theme="dark"] .invoice-container h3,
html[data-theme="dark"] .invoice-container h4 {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .invoice-container a {
    color: var(--kh-accent) !important;
}
html[data-theme="dark"] .invoice-container .total-row {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}
html[data-theme="dark"] .invoice-container .table > thead > tr > td,
html[data-theme="dark"] .invoice-container .table > tbody > tr > td {
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .invoice-container .transactions-container .table {
    background-color: transparent !important;
}
/* Status-Badges (Draft/Unpaid/Paid/Refunded/Cancelled/Collections)
 * stay leuchtend, nur die "paid"/"refunded"-Pille gegen den dunklen
 * Hintergrund leicht kontrastieren. */
html[data-theme="dark"] .invoice-status .draft,
html[data-theme="dark"] .invoice-status .unpaid,
html[data-theme="dark"] .invoice-status .paid,
html[data-theme="dark"] .invoice-status .refunded,
html[data-theme="dark"] .invoice-status .cancelled,
html[data-theme="dark"] .invoice-status .collections {
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
/* Zurueck-Link unter dem Invoice-Block */
html[data-theme="dark"] body > p.text-center a {
    color: var(--kh-accent) !important;
}

/* ------------------------------------------------------------------
 * Checkout / Cart: Account-Auswahl ("Konto auswaehlen")
 * Markup: .account-select-container > .account.active mit weisser
 * Card-Hintergrund vom swiftmodders Default. Innerhalb sind
 * <strong>, .address, .small mit dezent dunklen Farben - im
 * Dark-Mode unlesbar.
 * ------------------------------------------------------------------ */
html[data-theme="dark"] .account-select-container .account,
html[data-theme="dark"] .account-select-container .account.active,
html[data-theme="dark"] .account-select-container .account.border-bottom {
    background-color: var(--kh-bg-elevated) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .account-select-container .account.active {
    border-color: var(--kh-accent) !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
}
html[data-theme="dark"] .account-select-container .account .address,
html[data-theme="dark"] .account-select-container .account .address strong,
html[data-theme="dark"] .account-select-container .account .small,
html[data-theme="dark"] .account-select-container .account label {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .account-select-container .account .small {
    color: var(--kh-text-muted) !important;
}
/* Sub-heading-Divider: zentrale Regel sitzt oben unter "Section-Divider".
 * Hier NICHT erneut definieren - sonst Specificity-Konflikt mit dem
 * vorhergehenden Block (gleiche Specificity, last wins, vorheriger
 * Block wuerde uberschrieben). */
/* "Heute faelliger Gesamtbetrag" gruener Balken bleibt - nur Text
 * sicherstellen dass er weiss bleibt. Tos-Panel-Heading-Color. */
html[data-theme="dark"] .panel-danger.tospanel,
html[data-theme="dark"] .panel-danger.tospanel .panel-heading {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-color: var(--kh-border) !important;
}

/* ------------------------------------------------------------------
 * Domain-Register-Page (/cp/domainchecker.php, /cp/cart.php?a=add&domain=register)
 * Markup kommt aus templates/orderforms/swiftmodders_cart/domainregister.tpl
 * + eigenes css/style.css das mit hellen Backgrounds arbeitet.
 * ------------------------------------------------------------------ */

/* Hero-Search-Box ("Find your new domain name. Enter ...") mit
 * globe.png-Bild im Light-Mode. Im Dark-Mode dunkler Container
 * statt hellem Wash. */
html[data-theme="dark"] .domain-checker-container,
html[data-theme="dark"] .domain-checker-bg {
    background-color: var(--kh-bg-elevated) !important;
    background-image: none !important;
    color: var(--kh-text) !important;
    border-radius: 6px;
}
html[data-theme="dark"] .domain-checker-container .input-group-box {
    background-color: var(--kh-bg-inset) !important;
    border-color: var(--kh-border) !important;
}

/* Spotlight-TLDs Container (".com .net"-Cards) */
html[data-theme="dark"] .spotlight-tlds {
    background-color: var(--kh-bg-elevated) !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: 6px;
}
html[data-theme="dark"] .spotlight-tld {
    background-color: var(--kh-bg-inset) !important;
    border: 1px solid var(--kh-border) !important;
    color: var(--kh-text) !important;
    border-radius: 4px;
}
html[data-theme="dark"] .spotlight-tld .price,
html[data-theme="dark"] .spotlight-tld .available {
    color: var(--kh-text) !important;
}

/* Suggested-Domains-Panel (passt zur Standard-.panel-Regel, aber
 * der suggestions-loader hat eigenen hellgrauen Hintergrund). */
html[data-theme="dark"] .suggested-domains .domain-lookup-suggestions-loader,
html[data-theme="dark"] .suggested-domains .panel-body,
html[data-theme="dark"] .suggested-domains .card-body {
    background-color: var(--kh-bg-elevated) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-suggestion,
html[data-theme="dark"] .domain-suggestion.list-group-item {
    background-color: var(--kh-bg-elevated) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-suggestion .domain,
html[data-theme="dark"] .domain-suggestion .extension {
    color: var(--kh-text) !important;
}

/* TLD-Pricing-Table ("Browse extensions by category" + .de/.eu/.org...).
 * swiftmodders nutzt KEINE <table> sondern Divs mit Bootstrap-cols:
 *   .domain-pricing > .tld-pricing-header > .col-xs-2/.col-sm-2/.col-sm-4
 *   .domain-pricing > .tld-row(.highlighted) > div.col-...
 * Highlighted-Reihen haben hellblauen BG (#f3f9fd) der den weissen
 * Text unlesbar macht. */
html[data-theme="dark"] .domain-pricing,
html[data-theme="dark"] .domain-tld-pricing-table-responsive {
    background-color: transparent !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-pricing .tld-pricing-header,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-xs-2,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-sm-2,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-xs-4,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .col-sm-4,
html[data-theme="dark"] .domain-pricing .tld-pricing-header div:nth-child(odd) {
    background-color: var(--kh-bg-inset) !important;
    color: var(--kh-text) !important;
    border-bottom-color: var(--kh-accent) !important;
}
html[data-theme="dark"] .domain-pricing .tld-row {
    border-bottom-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-pricing .tld-row.highlighted {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-pricing .tld-row .tld-column,
html[data-theme="dark"] .domain-pricing .tld-row .price,
html[data-theme="dark"] .domain-pricing .tld-row .period,
html[data-theme="dark"] .domain-pricing .tld-row > div {
    color: var(--kh-text) !important;
}

/* "Browse extensions by category" Label + Tabs Popular/Other */
html[data-theme="dark"] .domain-tld-pricing-category,
html[data-theme="dark"] a.domain-tld-pricing-category {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .domain-pricing-tabs .nav-tabs > li > a,
html[data-theme="dark"] .domain-pricing .nav-pills > li > a {
    background-color: var(--kh-bg-inset) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-pricing-tabs .nav-tabs > li.active > a,
html[data-theme="dark"] .domain-pricing .nav-pills > li.active > a {
    background-color: var(--kh-accent) !important;
    color: #fff !important;
}

/* Promo-Boxen ("Add Web Hosting", "Transfer your domain to us"). */
html[data-theme="dark"] .domain-promo-box {
    background-color: var(--kh-bg-elevated) !important;
    border-color: var(--kh-border) !important;
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-promo-box h3,
html[data-theme="dark"] .domain-promo-box p {
    color: var(--kh-text) !important;
}
html[data-theme="dark"] .domain-promo-box .small {
    color: var(--kh-text-muted) !important;
}
html[data-theme="dark"] .domain-promo-box i {
    color: var(--kh-text-muted) !important;
}

/* HOT-Badges (kleine rote Labels neben TLDs) bleiben rot, brauchen
 * keinen Override. Aber ggf. Text-Color sicherstellen. */
html[data-theme="dark"] .domain-pricing .label,
html[data-theme="dark"] .tld-pricing-header .label {
    color: #fff !important;
}