/* Anpassung Anfang: Darkmode */
/*
 * Darkmode – Kundenportal (Theme "default")
 *
 * Setzt css/darkmode.css voraus (Farbvariablen, invertierte Inhalte,
 * Editor, Select2 …). Selektoren entsprechen theme.css.
 */

/* ------------------------------------------------------------------------
 * Grundlayout
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) body,
:where(html[data-theme="dark"]) input,
:where(html[data-theme="dark"]) select,
:where(html[data-theme="dark"]) textarea {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) body {
    background: var(--dm-bg);
}
:where(html[data-theme="dark"]) #container {
    background: var(--dm-surface);
    box-shadow: 0 0 6px #000;
}
:where(html[data-theme="dark"]) hr {
    border-top-color: var(--dm-border);
}
:where(html[data-theme="dark"]) a,
:where(html[data-theme="dark"]) .link {
    color: var(--dm-link);
}
:where(html[data-theme="dark"]) a:hover,
:where(html[data-theme="dark"]) .link:hover {
    border-bottom-color: var(--dm-link);
}
:where(html[data-theme="dark"]) h2,
:where(html[data-theme="dark"]) .subject {
    color: var(--dm-text-strong);
}
:where(html[data-theme="dark"]) .faded {
    color: var(--dm-text-faint);
}

/* Logos sind für hellen Hintergrund gestaltet */
:where(html[data-theme="dark"]) #header #logo img {
    box-sizing: border-box;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.9);
}

/* Eingabefelder (im hellen Design Browser-Standard) */
:where(html[data-theme="dark"]) input[type=text],
:where(html[data-theme="dark"]) input[type=email],
:where(html[data-theme="dark"]) input[type=password],
:where(html[data-theme="dark"]) input[type=number],
:where(html[data-theme="dark"]) input[type=tel],
:where(html[data-theme="dark"]) input[type=search],
:where(html[data-theme="dark"]) input[type=url],
:where(html[data-theme="dark"]) textarea,
:where(html[data-theme="dark"]) select {
    background-color: var(--dm-input);
    border: 1px solid var(--dm-border);
}

/* Formular-Buttons (im hellen Design Browser-Standard) */
:where(html[data-theme="dark"]) input[type=submit],
:where(html[data-theme="dark"]) input[type=reset],
:where(html[data-theme="dark"]) input[type=button],
:where(html[data-theme="dark"]) button {
    background-color: var(--dm-surface-3);
    border: 1px solid var(--dm-border);
    border-radius: 3px;
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) input[type=submit]:hover,
:where(html[data-theme="dark"]) input[type=reset]:hover,
:where(html[data-theme="dark"]) input[type=button]:hover,
:where(html[data-theme="dark"]) button:hover {
    background-color: var(--dm-hover);
}

/* Startseiten-Buttons etwas dunkler, damit die weiße Schrift lesbar ist */
:where(html[data-theme="dark"]) .blue.button,
:where(html[data-theme="dark"]) .blue.button:visited {
    background-color: #0a77a6;
}
:where(html[data-theme="dark"]) .blue.button:hover {
    background-color: #08668f;
}
:where(html[data-theme="dark"]) .button,
:where(html[data-theme="dark"]) .button:visited,
:where(html[data-theme="dark"]) .green.button,
:where(html[data-theme="dark"]) .green.button:visited {
    background-color: #5a7a06;
}
:where(html[data-theme="dark"]) .green.button:hover {
    background-color: #4a6604;
}

/* Navigation */
:where(html[data-theme="dark"]) #nav {
    background: var(--dm-surface-2);
    border-top-color: var(--dm-border);
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.6);
}
:where(html[data-theme="dark"]) #nav li a {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) #nav li a.active {
    background-color: #24435f;
    color: #fff;
}
:where(html[data-theme="dark"]) #nav li a:hover {
    background-color: var(--dm-hover);
    color: var(--dm-link-hover);
}

/* Fußzeile: "powered by osTicket"-Grafik hat dunkle Schrift */
:where(html[data-theme="dark"]) #footer,
:where(html[data-theme="dark"]) #footer a {
    color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) #footer #poweredBy {
    filter: invert(1) hue-rotate(180deg);
}

/* Seitenzahlen */
:where(html[data-theme="dark"]) #pagination li a:hover {
    color: #ff5ca8;
}
:where(html[data-theme="dark"]) #pagination .previousOff,
:where(html[data-theme="dark"]) #pagination .nextOff {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) #pagination .active {
    color: var(--dm-text-strong);
}

/* Meldungen */
:where(html[data-theme="dark"]) #msg_notice {
    color: var(--dm-success-text);
    border-color: var(--dm-success-border);
    background-color: var(--dm-success-bg);
}
:where(html[data-theme="dark"]) #msg_warning,
:where(html[data-theme="dark"]) .warning-banner {
    color: var(--dm-warning-text);
    border-color: var(--dm-warning-border);
    background-color: var(--dm-warning-bg);
}
:where(html[data-theme="dark"]) #msg_error {
    color: var(--dm-error-text);
    border-color: var(--dm-error-border);
    background-color: var(--dm-error-bg);
}
:where(html[data-theme="dark"]) #msg_info {
    color: var(--dm-info-text);
    border-color: var(--dm-info-border);
    background-color: var(--dm-info-bg);
}
:where(html[data-theme="dark"]) .warning {
    background-color: var(--dm-warning-bg);
}
:where(html[data-theme="dark"]) .warning strong {
    color: var(--dm-error-text);
}
:where(html[data-theme="dark"]) .error {
    color: #ff7b7b;
}
:where(html[data-theme="dark"]) .error input {
    border-color: #e05252;
}

/* ------------------------------------------------------------------------
 * Wissensdatenbank
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) #faq ol {
    border-top-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) #faq ol li {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) #faq ol li a {
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) #faq ol li a:hover {
    background-color: var(--dm-hover);
}
:where(html[data-theme="dark"]) #faq .article-meta {
    background-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) #kb > li {
    background-image: none;
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) #kb > li h4 span {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) .featured-category i {
    text-shadow: none;
}
:where(html[data-theme="dark"]) #kb-search #breadcrumbs {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) #kb-search #breadcrumbs #breadcrumbs a {
    color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) .sidebar .content {
    border-color: var(--dm-border);
    background-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) .searchbar .search,
:where(html[data-theme="dark"]) .search-form .search {
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .search.well {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ------------------------------------------------------------------------
 * Formulare / Anmeldung
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) #ticketForm div input,
:where(html[data-theme="dark"]) #clientLogin div input,
:where(html[data-theme="dark"]) #ticketForm div textarea,
:where(html[data-theme="dark"]) #clientLogin div textarea {
    border-color: var(--dm-border);
    background-color: var(--dm-input);
}
:where(html[data-theme="dark"]) #ticketForm td em,
:where(html[data-theme="dark"]) #clientLogin td em,
:where(html[data-theme="dark"]) #ticketForm div em,
:where(html[data-theme="dark"]) #clientLogin div em {
    color: var(--dm-text-faint);
}
:where(html[data-theme="dark"]) #ticketForm div.error input,
:where(html[data-theme="dark"]) #clientLogin div.error input {
    border-color: #e05252;
}
:where(html[data-theme="dark"]) #ticketForm div.error label,
:where(html[data-theme="dark"]) #clientLogin div.error label {
    color: #ff7b7b;
}
:where(html[data-theme="dark"]) #clientLogin {
    border-color: var(--dm-border);
    background-color: var(--dm-surface-2);
    box-shadow: inset 0 1px 2px #000;
}
:where(html[data-theme="dark"]) #clientLogin strong {
    color: #ff7b7b;
}
:where(html[data-theme="dark"]) .login-box {
    box-shadow: 12px 0 15px -15px #000;
}
:where(html[data-theme="dark"]) .rtl .login-box {
    box-shadow: -12px 0 15px -15px #000;
}
:where(html[data-theme="dark"]) .external-auth-box {
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) .external-auth-icon,
:where(html[data-theme="dark"]) .external-auth-name {
    color: var(--dm-text);
}
:where(html[data-theme="dark"]) .external-auth-icon {
    border-right-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .action-button {
    color: var(--dm-text-muted) !important;
    border-color: var(--dm-border);
    background: var(--dm-surface-3);
}
:where(html[data-theme="dark"]) .action-button span,
:where(html[data-theme="dark"]) .action-button a {
    color: var(--dm-text-muted) !important;
}

/* ------------------------------------------------------------------------
 * Ticketliste / Ticketansicht
 * ------------------------------------------------------------------------ */
:where(html[data-theme="dark"]) #ticketTable {
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) #ticketTable caption {
    color: var(--dm-text-strong);
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) #ticketTable th {
    background-color: #24435f;
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) #ticketTable th a {
    color: var(--dm-text-strong);
}
:where(html[data-theme="dark"]) #ticketTable td {
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) #ticketTable tr.alt td {
    background-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) .infoTable,
:where(html[data-theme="dark"]) table.custom-data th {
    background-color: var(--dm-surface-2);
}
:where(html[data-theme="dark"]) table .headline,
:where(html[data-theme="dark"]) table.custom-data .headline {
    border-bottom-color: var(--dm-border);
    background-color: var(--dm-surface);
}
:where(html[data-theme="dark"]) #ticketInfo h1 {
    border-bottom-color: var(--dm-border);
}
:where(html[data-theme="dark"]) #reply {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}
:where(html[data-theme="dark"]) #reply h2 {
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) #reply input[type=text],
:where(html[data-theme="dark"]) #reply #response_options textarea {
    border-color: var(--dm-border);
    background-color: var(--dm-input);
}
:where(html[data-theme="dark"]) .Icon {
    color: var(--dm-link);
}

/* Verlauf */
:where(html[data-theme="dark"]) .thread-entry .header {
    border-color: rgba(255, 255, 255, 0.12);
}
:where(html[data-theme="dark"]) .thread-entry .header .faded {
    color: rgba(255, 255, 255, 0.72);
}
:where(html[data-theme="dark"]) .thread-entry.avatar .header:before {
    border-left-color: #55595e;
}
:where(html[data-theme="dark"]) .thread-entry.response .header {
    background-color: #3f4347;
}
:where(html[data-theme="dark"]) .thread-entry.avatar.response .header:after {
    border-left-color: #3f4347;
}
:where(html[data-theme="dark"]) .thread-entry.message .header {
    background-color: #1f4d6b;
}
:where(html[data-theme="dark"]) .thread-entry.avatar.message .header:before {
    border-right-color: #3a5a78;
}
:where(html[data-theme="dark"]) .thread-entry.avatar.message .header:after {
    border-right-color: #1f4d6b;
}
/* .thread-body wird invertiert (siehe css/darkmode.css) */
:where(html[data-theme="dark"]) .thread-entry.message .thread-body {
    background-color: #cad9e7;   /* wird zu #1b2a38 */
}
:where(html[data-theme="dark"]) .thread-entry.response .thread-body {
    background-color: #d4d6d9;   /* wird zu #27292c */
}
:where(html[data-theme="dark"]) .thread-entry::after {
    border-bottom-color: var(--dm-surface);
}
:where(html[data-theme="dark"]) .thread-entry::before {
    border-top-color: var(--dm-surface);
}
:where(html[data-theme="dark"]) #ticketThread::before {
    border-left-color: var(--dm-border);
}
:where(html[data-theme="dark"]) #ticketThread {
    border-bottom-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .type-icon {
    background-color: var(--dm-surface-3);
    border-color: var(--dm-border-soft);
}
:where(html[data-theme="dark"]) .thread-event .type-icon::after {
    border-color: var(--dm-surface);
}
:where(html[data-theme="dark"]) .label {
    background-color: #5f656b;
}
:where(html[data-theme="dark"]) .label-bare {
    background-color: transparent;
    border-color: var(--dm-text-faint);
    color: var(--dm-text-muted);
}
:where(html[data-theme="dark"]) .freetext-files {
    border-color: var(--dm-border-soft);
    background-color: var(--dm-surface-2);
}
/* Anpassung Ende: Darkmode */