/* Tri-W-Data Froxlor login – isolated from the authenticated backend. */
body:has(form.twd-login) {
  background: radial-gradient(ellipse at 85% 100%, rgba(166, 15, 39, .055), transparent 38%),
              radial-gradient(ellipse at 5% 0%, rgba(110, 125, 140, .055), transparent 38%),
              #fff !important;
  color: #28333e;
}
body:has(form.twd-login) #app, body:has(form.twd-login) > .container-fluid { min-height: 100vh; }
body:has(form.twd-login) .container-fluid > .container { max-width: none; }
form.twd-login { width: 100%; max-width: 340px !important; margin: clamp(66px, 15vh, 150px) auto 10px; padding: 0 4px; }
form.twd-login .twd-login-logo { display: block; width: 200px; max-width: 100%; margin: 0 auto 32px; line-height: 0; }
form.twd-login .twd-login-logo img { width: 200px; height: 49px; object-fit: contain; }
form.twd-login .card { border: 0; background: transparent; box-shadow: none !important; border-radius: 0; }
form.twd-login .card-body { padding: 0; }
form.twd-login .card-body + .card-body { margin-top: 8px; }
form.twd-login .card-title, form.twd-login .twd-login-welcome { display: none; }
form.twd-login .twd-login-field { margin-bottom: 8px !important; }
form.twd-login .twd-login-field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
form.twd-login .twd-login-field .form-control { min-height: 42px; border: 1px solid #cdd4db; border-radius: 5px; background-color: #e7eefb; color: #19242e; padding: 8px 12px 8px 48px; box-shadow: none; }
form.twd-login .twd-login-field {
    position: relative;
    margin-bottom: 8px !important;
}

form.twd-login .twd-login-field::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 2;
}

form.twd-login .twd-login-field:has(#loginname)::before {
    background-image: url('/twd-assistant/user.svg');
}

form.twd-login .twd-login-field:has(#password)::before {
    background-image: url('/twd-assistant/lock.svg');
}

form.twd-login .twd-login-field .form-control {
    min-height: 42px;
    border: 1px solid #cdd4db;
    border-radius: 5px;
    background-color: #e7eefb;
    color: #19242e;
    padding: 8px 12px 8px 48px;
    box-shadow: none;
    position: relative;
    z-index: 1;
}
form.twd-login .twd-login-field .form-control:focus { outline: none; border-color: #a5122a; box-shadow: 0 0 0 2px rgba(165,18,42,.16); }
form.twd-login button[name="dologin"] { min-height: 36px; padding: 6px 10px; border: 0; border-radius: 4px; background: #a50e24; color: #fff; font-weight: 500; }
form.twd-login button[name="dologin"]:hover, form.twd-login button[name="dologin"]:focus { background: #860b1e; }
form.twd-login .card-footer { border: 0; padding: 12px 0 0; background: none; text-align: center; }
form.twd-login .card-footer a, form.twd-login .twd-login-links a { color: #ac0925 !important; text-decoration: none; }
form.twd-login .card-footer a:hover, form.twd-login .twd-login-links a:hover { text-decoration: underline; }
form.twd-login .twd-login-links { margin: 14px 0 0; text-align: center; font-size: 13px; line-height: 1.65; color: #727d87; }
form.twd-login .twd-login-links .twd-login-brand { display: block; }
form.twd-login .twd-login-links .twd-separator { color: #87919a; padding: 0 6px; }
body:has(form.twd-login) .container-fluid > footer { font-size: 11px; opacity: .65; }
@media (max-width: 480px) { form.twd-login { margin-top: 65px; } }
form.twd-login .twd-login-field .form-control:-webkit-autofill,
form.twd-login .twd-login-field .form-control:-webkit-autofill:hover,
form.twd-login .twd-login-field .form-control:-webkit-autofill:focus,
form.twd-login .twd-login-field .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #e7eefb inset !important;
    -webkit-text-fill-color: #19242e !important;
    transition: background-color 9999s ease-in-out 0s;
}
cat >> /opt/twd-froxlor-assistant/public/twd-login.css <<'EOF'

/* TWD Login-Button in Grossbuchstaben */
form.twd-login button[name="dologin"] {
    text-transform: uppercase;
}
EOF

/* TWD – Originales Froxlor-Produktlogo */
form.twd-login .twd-froxlor-product-logo {
    display: block;
    width: 120px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 6px auto 16px;
}

/* TWD – Abstand Produktlogo zu Login-Feldern */
form.twd-login .twd-froxlor-product-logo {
    margin-bottom: 22px !important;
}