/* =============================================
   LOGIN — Design 8a (Claude-Design-Projekt 17d1732a-5008-4309-9ade-afcc56ba13f7,
   "Nexoro Dashboard.dc.html", Turn 8 / Option 8a: "Basic Weiß — nur Formular,
   Sprachwechsel oben rechts")

   Ersetzt das fruehere Zwei-Panel-Layout (Formular links, Marken-Panel rechts)
   aus dist/css/menu.css. Einspaltig, zentriert, weisser Hintergrund.
   Siehe wiki/concepts/design-8a-login.md
   ============================================= */

/* dist/css/menu.css sets html/body to the shell's gray (#f0f4f8) globally.
   This file is only ever loaded on /login, so it's safe to override it here
   directly (same fix as the earlier dashboard background bug — see
   wiki/hot.md 2026-08-07 Nachtrag 6 — rather than relying on .login-page
   alone to visually cover it). Also fixed at 100vh with no scrolling on
   desktop: the whole form fits one viewport on any real monitor, so a
   scrollbar would only ever appear from the gray edge peeking through —
   never wanted here. Reverted to normal scrolling under 768px (mobile
   keyboards / very short viewports need it). */
html,
body {
    height: 100vh;
    overflow: hidden;
    background: #ffffff;
}

.login-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #ffffff;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

.login-form-panel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 2rem 1.5rem;
}

/* Same reasoning as the <form> children below: a uniform flex `gap` here
   read as mechanical once every pair needed its own value (logo→header
   tighter than header→form, per pixel-level user feedback). No `gap` on
   this container either — each child sets its own margin-bottom. */
.login-form-inner {
    --login-gap: 28px; /* the "big breath" value, reused by remember-row and the form itself */
    width: 100%;
    max-width: 490px;
    display: flex;
    flex-direction: column;
    animation: login8aIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes login8aIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.login-form-logo {
    display: block;
    height: 54px;
    width: auto;
    align-self: center;
    margin-bottom: 24px; /* Logo → Anmelden-Titel */
}

.login-form-header {
    text-align: center;
    margin-bottom: 27px; /* Untertitel → Benutzername-Feld */
}
.login-form-header h2 {
    font-size: 25px;
    font-weight: 700;
    color: #0d2b36;
    letter-spacing: -0.01em;
    margin: 0;
}
.login-form-header p {
    font-size: 14px;
    color: #7a919b;
    margin: 5px 0 0;
}

/* ---- Language switch (top-right, globe icon + language code, no chrome) ----
   The trigger keeps its original chrome-less look; the dropdown below it exists
   because the app went past two languages (de/en + cs/hu/sk), where a plain
   two-way toggle no longer works. */
.login-lang {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 5;
}
.login-lang-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    transition: opacity 0.15s ease;
}
.login-lang-toggle:hover { opacity: 0.65; }
.login-lang-toggle:disabled { opacity: 0.4; cursor: default; }
.login-lang-toggle svg { width: 19px; height: 19px; flex-shrink: 0; }

.login-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 168px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.login-lang-menu[hidden] { display: none; }
.login-lang-menu li { margin: 0; }
.login-lang-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    transition: background 0.12s ease;
}
.login-lang-menu button:hover { background: #f3f4f6; }
.login-lang-menu button.is-active { color: var(--theme-color, #1f2937); font-weight: 600; }
.login-lang-code {
    flex-shrink: 0;
    min-width: 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #9ca3af;
}
.login-lang-menu button.is-active .login-lang-code { color: inherit; }

.login-page .login-error {
    margin-bottom: 27px; /* same as .login-form-header's, since it sits in the same spot when shown */
}

/* .login-form-inner's flex gap only spaces ITS direct children (logo, header,
   form, footer) — <form> itself was a plain block, so everything inside it
   (the two fields, remember-row, submit button) had no gap at all between
   them. Making the form a flex column fixed that, but a single uniform gap
   for every pair reads as mechanical, not like a login form — a real one
   has a tighter rhythm between the two inputs, a light one before the
   help row, and a bigger breath before the primary action. So: no `gap`
   here, each child gets its own margin-bottom instead (last child's is
   irrelevant, nothing follows it inside the form). */
.login-form-panel form {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--login-gap, 28px); /* Anmelden-Button → Footer (or the hidden Instanz-Button) */
}
.login-field:first-of-type { margin-bottom: 19px; }  /* Benutzername → Passwort */
.login-field:last-of-type  { margin-bottom: 20px; }  /* Passwort → Eingeloggt-bleiben-Zeile */
/* .login-remember-row's own margin-bottom (→ Anmelden-Button) is set further
   down, in its main rule block — kept there so there's one source of truth
   instead of two rules fighting over the same property. */

/* ---- Form fields ---- */
.login-field { margin: 0; }
.login-field label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0d2b36;
    margin-bottom: 8px;
}
.login-field label svg {
    width: 13px;
    height: 13px;
    color: #8ba0aa;
    flex-shrink: 0;
}

.login-page .nx-alert svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.login-page .nx-checkbox-box svg {
    width: 11px;
    height: 11px;
    color: #fff;
    opacity: 0;
    transition: opacity var(--nx-tx-fast, 100ms);
}
.login-page .nx-checkbox input:checked + .nx-checkbox-box svg { opacity: 1; }

.login-page .login-submit-btn .btn-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.login-page .login-submit-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.login-instanz-btn {
    margin-bottom: var(--login-gap, 28px); /* only relevant when shown (native app, mobile) — Instanz-Button → Footer */
}
.login-instanz-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.login-page .nx-input {
    border: 1px solid #dbe5e9;
    border-radius: var(--nx-radius-md, 10px) !important;
    padding: 13px 16px;
    font-size: 14.5px;
    min-height: unset;
}

.login-pw-wrap { position: relative; }
.login-pw-wrap input { padding-right: 46px; }
.login-eye-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #8ba0aa;
}
.login-eye-btn:hover { color: var(--theme-color, #3aaac1); background: transparent; }
.login-eye-btn svg { width: 16px; height: 16px; }

.login-remember-row {
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--login-gap, 28px);
}
.login-remember-row .nx-checkbox {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #2c4a56;
}
.login-help-link {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-dark, #1e8298);
    text-decoration: none;
}
.login-help-link:hover { text-decoration: underline; }

/* ---- Submit button ---- */
.login-page .login-submit-btn {
    border-radius: var(--nx-radius-md, 10px);
    padding: 14px;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-top: 0;
    box-shadow: 0 4px 12px var(--theme-glow, rgba(43, 140, 166, 0.35));
}
.login-page .login-submit-btn:hover {
    box-shadow: 0 6px 16px var(--theme-glow, rgba(43, 140, 166, 0.45));
    transform: translateY(-1px);
}

.login-page-footer {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: #8ba0aa;
}
.login-page-footer a {
    color: #8ba0aa;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.login-page-footer a:hover { color: var(--theme-color, #3aaac1); }

/* ---- Mobile ---- */
@media (max-width: 768px) {
    /* Give up the hard 100vh/no-scroll lock here: a phone keyboard shrinks
       the viewport live, and a fixed-height page would push the submit
       button off-screen instead of just scrolling to it. */
    html, body { height: auto; min-height: 100vh; overflow: auto; }
    .login-page { height: auto; min-height: 100vh; }
    .login-form-panel { height: auto; min-height: 100vh; }
    .login-lang { top: 18px; right: 18px; }
    .login-form-panel { padding: 4.5rem 1.5rem 2rem; }
}