/*
 * retronerd: Agenten-Login
 * Dark Mode (generiert + Feinschliff) & Responsive für osTicket v1.18.x
 * NICHT direkt bearbeiten – Quelle: src/parts/*.css + tools/gen_dark.py, Build: tools/build.sh
 * Build: 2026-10-19 23:23
 */
/* --- generiert aus scp/css/login.css --- */
:where(html[data-theme="dark"]) :-webkit-input-placeholder{color:#9b9b9b}
:where(html[data-theme="dark"]) :-moz-placeholder{color:#9b9b9b}
:where(html[data-theme="dark"]) body,
:where(html[data-theme="dark"]) input{color:#e6e6e6}
:where(html[data-theme="dark"]) #loginBox{box-shadow:0 0 50px 5px rgba(0,0,0,0.30), 0 0 5px -1px rgba(0,0,0,0.55)}
:where(html[data-theme="dark"]) #loginBox:after{background-color:rgba(28,28,28,0.60);border:1px solid rgba(115,115,115,0.30)}
@media screen\0{
:where(html[data-theme="dark"]) #loginBox:after{background-color:#1c1c1c}
}
:where(html[data-theme="dark"]) h3{color:#ff3d3d}
:where(html[data-theme="dark"]) fieldset input{border:1px solid #4f4f4f;border:1px solid rgba(115,115,115,0.30);background-color:#1c1c1c;background-color:rgba(28,28,28,0.50)}
:where(html[data-theme="dark"]) hr{border-bottom:1px solid #3c3c3c}
:where(html[data-theme="dark"]) div.banner{color:#adadad}
: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"]) .action-button,
:where(html[data-theme="dark"]) .button{color:#b7b7b7;background-color:#282828}
:where(html[data-theme="dark"]) button[type=submit]:hover,
:where(html[data-theme="dark"]) input[type=submit]:hover,
:where(html[data-theme="dark"]) input[type=submit]:active{background-color:#7b7b7b}
:where(html[data-theme="dark"]) #poweredBy{box-shadow:inset 0 0 3px rgba(0,0,0,0.55), 0 0 2px #000000, inset 0 0 4px #000000}
:where(html[data-theme="dark"]) .external-auth-box{border:1px solid #737373}
:where(html[data-theme="dark"]) .external-auth-icon{color:#c9c9c9;border-right:1px solid #464646}
:where(html[data-theme="dark"]) .external-auth-name{color:#c9c9c9}
/* =====================================================================
   Gemeinsam: Umschalter-Button & Dark-Mode-Grundlagen
   ===================================================================== */
#rn-theme-toggle {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 100000;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #bbb;
    background: #fff;
    color: #333;
    font-size: 19px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    opacity: .75;
    transition: opacity .15s, transform .15s;
}
#rn-theme-toggle:hover, #rn-theme-toggle:focus { opacity: 1; transform: scale(1.07); }
@media print { #rn-theme-toggle { display: none !important; } }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { color: #d6d6d6; background-image: none !important; }
html[data-theme="dark"] #rn-theme-toggle { background: #2a2d31; color: #f0c674; border-color: #555; }

html[data-theme="dark"] a:not(.button):not(.action-button):not(.btn) { color: #6fb3ff; }
html[data-theme="dark"] a:not(.button):not(.action-button):not(.btn):hover { color: #9cccff; }

/* Formularelemente ohne eigene osTicket-Farben */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #16181b !important;
    color: #e2e2e2 !important;
    border-color: #4a4d52 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #808487 !important; }
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="reset"],
html[data-theme="dark"] button:not(#rn-theme-toggle) {
    background-color: #33373c;
    color: #e6e6e6;
    border-color: #555a60;
}
html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] input[type="button"]:hover,
html[data-theme="dark"] button:not(#rn-theme-toggle):hover { background-color: #3d4248; }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled { opacity: .6; }

html[data-theme="dark"] hr { border-color: #3a3a3a; background-color: #3a3a3a; }
html[data-theme="dark"] ::selection { background: #2f5d8a; color: #fff; }

/* Fest verdrahtete Inline-Hintergründe in Templates abfangen */
html[data-theme="dark"] [style*="background-color: #fff" i],
html[data-theme="dark"] [style*="background-color:#fff" i],
html[data-theme="dark"] [style*="background:#fff" i],
html[data-theme="dark"] [style*="background: #fff" i],
html[data-theme="dark"] [style*="background-color: white" i],
html[data-theme="dark"] [style*="background-color:white" i],
html[data-theme="dark"] [style*="background: white" i],
html[data-theme="dark"] [style*="background:white" i] {
    background-color: #1c1c1c !important;
    color: #e2e2e2;
}

/* Scrollbars (Chromium/Firefox) */
html[data-theme="dark"] * { scrollbar-color: #4a4d52 #1a1c1f; }

/* Bilder und Videos im Thread leicht abdunkeln, aber nicht invertieren */
html[data-theme="dark"] .thread-body img:not(.avatar) { filter: brightness(.92); }
/* =====================================================================
   Agenten-Login: Dark Mode & Responsive
   ===================================================================== */
html[data-theme="dark"] body, html[data-theme="dark"] body input { color: #e2e2e2; }
html[data-theme="dark"] #loginBox:after { background-color: rgba(24,26,29,.82); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] #brickwall { filter: brightness(.55); }
html[data-theme="dark"] fieldset input { background: rgba(0,0,0,.35) !important; border-color: rgba(255,255,255,.25) !important; }
html[data-theme="dark"] .button { color: #ddd; box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset; background-color: rgba(255,255,255,.05); }
html[data-theme="dark"] button[type=submit]:hover { background-color: rgba(255,255,255,.18); }
html[data-theme="dark"] div.banner { color: #aaa; }
html[data-theme="dark"] h3 { color: #ff7b7b; }

@media (max-width: 480px) {
    #loginBox { width: auto !important; margin: 20px 10px !important; left: auto !important; right: auto !important; }
    #loginBox form, form { width: 100% !important; }
    #company { width: auto !important; margin: 0 10px; }
    #logo a img { max-width: 100%; }
    fieldset input { font-size: 16px; }
}