/* ============================================================
   GlobalAssist branding — Guacamole login (training.globalassist.nl)
   Donker thema gematcht met globalassist.nl (--bg-primary #0a0e17, accent #00d4ff)
   ============================================================ */

/* --- Hele pagina: donkere achtergrond (globalassist.nl look) --- */
html, body {
    background: #0a0e17 !important;
    background-image: radial-gradient(1200px 600px at 50% -10%, rgba(0,212,255,0.10), transparent 60%),
                      radial-gradient(900px 500px at 100% 110%, rgba(0,152,184,0.10), transparent 55%) !important;
    background-attachment: fixed !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- Login kaart: donkere glas-kaart --- */
.login-ui > .login-dialog-middle > .login-dialog.notification,
.login-dialog.notification {
    background: rgba(17, 24, 39, 0.85) !important;   /* #111827 */
    border: 1px solid rgba(0, 212, 255, 0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.10), 0 20px 60px rgba(0,0,0,0.5) !important;
    padding: 42px 44px !important;
}

/* eventuele binnen-achtergrond neutraliseren */
.login-dialog-middle {
    background: transparent !important;
}

/* --- Het plaatje: vervang het groene guac-logo door het GlobalAssist-icoon --- */
form.login-form > .logo {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%0A%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%2300d4ff%22%20stroke-width%3D%222%22%20opacity%3D%220.6%22/%3E%0A%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2300d4ff%22%20stroke-width%3D%221.5%22%20opacity%3D%220.4%22/%3E%0A%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%2300d4ff%22/%3E%0A%3Cline%20x1%3D%2220%22%20y1%3D%222%22%20x2%3D%2220%22%20y2%3D%228%22%20stroke%3D%22%2300d4ff%22%20stroke-width%3D%221.5%22%20opacity%3D%220.6%22/%3E%0A%3Cline%20x1%3D%2220%22%20y1%3D%2232%22%20x2%3D%2220%22%20y2%3D%2238%22%20stroke%3D%22%2300d4ff%22%20stroke-width%3D%221.5%22%20opacity%3D%220.6%22/%3E%0A%3Cline%20x1%3D%222%22%20y1%3D%2220%22%20x2%3D%228%22%20y2%3D%2220%22%20stroke%3D%22%2300d4ff%22%20stroke-width%3D%221.5%22%20opacity%3D%220.6%22/%3E%0A%3Cline%20x1%3D%2232%22%20y1%3D%2220%22%20x2%3D%2238%22%20y2%3D%2220%22%20stroke%3D%22%2300d4ff%22%20stroke-width%3D%221.5%22%20opacity%3D%220.6%22/%3E%0A%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto 18px auto !important;
}

/* --- Tekst: "Apache Guacamole" -> "GlobalAssist Training" --- */
form.login-form .app-name {
    font-size: 0 !important;
}
form.login-form .app-name::after {
    content: "GlobalAssist Training";
    display: block;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

form.login-form .version-number {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

form.login-form .version { margin-bottom: 20px !important; }

/* --- Velden/labels --- */
.login-fields .field-header label,
.login-fields label {
    color: #e2e8f0 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: #94a3b8 !important;
}

/* --- Inputs: donker met accent-rand --- */
.login-fields input[type="text"],
.login-fields input[type="password"] {
    background: rgba(15, 23, 36, 0.9) !important;   /* #0f1724 */
    color: #ffffff !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    border-radius: 8px !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.login-fields input[type="text"]:focus,
.login-fields input[type="password"]:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
}

/* --- Login-knop: cyan (globalassist accent) --- */
form.login-form .buttons input.login,
form.login-form input.login {
    background: linear-gradient(135deg, #00d4ff, #0098b8) !important;
    color: #0a0e17 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    padding: 11px 20px !important;
    cursor: pointer !important;
    transition: filter 0.2s !important;
}
form.login-form .buttons input.login:hover,
form.login-form input.login:hover {
    filter: brightness(1.12) !important;
}

/* focus negatieve tekstopmaak */
.login-ui input {
    color-scheme: dark !important;
}