/* ==================================================================
 * Anmeldedialog (ExpertUI.view.login.Login) - Fusszeile
 *
 * Hier stehen nur die beiden Tasten unten im Dialog ("Abbrechen" und
 * "Login"). Sie sehen damit aus wie in allen anderen Dialogen des
 * Redesigns 2026 (vgl. resources/message-dialogs.css und
 * resources/appbuilder-dialogs.css):
 *
 *   Abgerundetes Rechteck (8px) mit Icon, Inter 13px/500, Abbrechen
 *   neutral grau umrandet (ghost), Login gefuellt in der Akzentfarbe.
 *
 *   $xdSurface #ffffff   $xdBorder #e7e9f2   $xdMuted #9298ab
 *   $xdAccent  #417dbf   $xdAccentSoft #eef0fe
 *
 * Die Datei wird VOR dem gebauten Theme-CSS geladen (index.html /
 * application.html), deshalb "body"-Praefix und !important, wo eine
 * Theme-Regel dagegen steht. Kein SASS-Build noetig.
 *
 * Dunkles Design am Ende der Datei (Palette: resources/dark-theme.css).
 * ================================================================== */

/* Die Tastenzeile ist ein normales Panel im Formular - sein Hintergrund
   und Rahmen sollen nicht sichtbar sein. */
body .loginForm .loginBtnBar,
body .loginForm .loginBtnBar > .x-panel-body {
    background: transparent !important;
    border: 0 !important;
}

body .loginForm .loginBtnBar a.loginBtn {
    background-image: none !important;
    border-radius: 8px !important;
    padding: 7px 18px !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, border-color 150ms ease;
}

body .loginForm .loginBtnBar a.loginBtn .x-btn-inner {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
}

/* Icon (x bzw. log-in) links neben der Beschriftung, in Textfarbe */
body .loginForm .loginBtnBar a.loginBtn .x-btn-icon-el {
    font-size: 15px !important;
    width: 16px !important;
    margin-right: 4px;
}

body .loginForm .loginBtnBar a.loginBtn.loginBtnGhost {
    background: #ffffff !important;
    border: 1px solid #dcdfe8 !important;
}

body .loginForm .loginBtnBar a.loginBtn.loginBtnGhost .x-btn-inner,
body .loginForm .loginBtnBar a.loginBtn.loginBtnGhost .x-btn-icon-el {
    color: #4a5064 !important;
}

body .loginForm .loginBtnBar a.loginBtn.loginBtnGhost.x-btn-over {
    background: #f4f5fa !important;
    border-color: #c9cdd9 !important;
}

body .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary {
    background: #417dbf !important;
    border: 1px solid #417dbf !important;
}

body .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary .x-btn-inner,
body .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary .x-btn-icon-el {
    color: #ffffff !important;
}

body .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-over {
    background: #396ea9 !important;
    border-color: #396ea9 !important;
}

/* "Login" ist bis zum vollstaendig ausgefuellten Formular gesperrt
   (formBind) - gesperrt heisst hier: blass, aber weiter als gefuellte
   Taste erkennbar. */
body .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-disabled {
    background: #c3d4e8 !important;
    border-color: #c3d4e8 !important;
    opacity: 1 !important;
}

body .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-disabled .x-btn-inner,
body .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-disabled .x-btn-icon-el {
    color: #ffffff !important;
}

/* ==================================================================
   Dunkles Design

   Die Tasten brauchen hier beide Klassen (.loginBtn.loginBtnGhost statt
   nur .loginBtnGhost): dark-theme.css faerbt jede Taste ueber eine Regel
   mit drei :not()-Ausnahmen, und die zaehlt fuenf Klassen.
   ================================================================== */
body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnGhost {
    background: #1c2333 !important;
    border-color: #3a4560 !important;
}

body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnGhost .x-btn-inner,
body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnGhost .x-btn-icon-el {
    color: #c7cde0 !important;
}

body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnGhost.x-btn-over {
    background: #33405c !important;
}

body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary,
body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-over {
    background: #5b8cff !important;
    border-color: #5b8cff !important;
}

body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary .x-btn-inner,
body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary .x-btn-icon-el {
    color: #ffffff !important;
}

body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-disabled {
    background: #33456e !important;
    border-color: #33456e !important;
}

body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-disabled .x-btn-inner,
body.oe-theme-dark .loginForm .loginBtnBar a.loginBtn.loginBtnPrimary.x-btn-disabled .x-btn-icon-el {
    color: #9aa4bd !important;
}

/* Login-Seite: Punktraster und Karte. Main.scss malt das Raster mit
   hellen Punkten (#d8dbe8) direkt auf den Body und gibt der Karte einen
   Schatten, der auf dunklem Grund nicht zu sehen ist. */
body.oe-theme-dark.x-body-loginpage {
    background-image: radial-gradient(#30353f 1.5px, transparent 1.5px) !important;
}

body.oe-theme-dark.x-body-loginpage .x-window-default {
    border: 1px solid #394051 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 44px -8px rgba(0, 0, 0, 0.7) !important;
}

body.oe-theme-dark.x-body-loginpage .x-window-header-default {
    border-bottom-color: #30353f !important;
}

body.oe-theme-dark.x-body-loginpage .x-form-item-label {
    color: #93a4bd !important;
}

body.oe-theme-dark div#login-xplain-footer {
    color: #6b7280;
}