/* Twelve Portal – login.css */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Deze pagina laadt portal.css niet (geen navigatie, geen kaarten), dus de
   paar tokens die hij gebruikt staan hier zelf. */
:root {
    /* Zelfde light-dark()-vorm als portal.css: de platte waarde ervóór is de
       terugval voor browsers zonder light-dark(). Het verloop en de knop
       blijven hard — dat is merkkleur, geen thema. */
    color-scheme: light dark;

    --font-ui:   'Archivo', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --vlak:      #f3f5f4;  --vlak:      light-dark(#f3f5f4, #111513);
    --kaart:     #ffffff;  --kaart:     light-dark(#ffffff, #191e1b);
    --tekst:     #18201b;  --tekst:     light-dark(#18201b, #e5e9e6);
    --gedempt:   #555;     --gedempt:   light-dark(#555, #9ba49e);
    --zacht:     #888;     --zacht:     light-dark(#888, #78817b);
    --lijn:      var(--lijn);  --lijn:      light-dark(var(--lijn), #2d3430);
    --vlak-2:    #f8f9f8;  --vlak-2:    light-dark(#f8f9f8, #212723);
    --rood:      #b71c1c;  --rood:      light-dark(#b71c1c, #f87171);
    --rood-vlak: #fdecea;  --rood-vlak: light-dark(#fdecea, #3a1c20);
    --rood-rand: var(--rood-rand);  --rood-rand: light-dark(var(--rood-rand), #5c262c);
    --accent:    #007f3c;   --accent:    light-dark(#007f3c, #1fbf63);
    --accent-d:  #00642f;   --accent-d:  light-dark(#00642f, #46d47f);
}

:root[data-theme="licht"]  { color-scheme: light; }
:root[data-theme="donker"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: var(--font-ui);
            /* Eén effen donkere grond, de kleur van de menubalk. Eerst een
               verloop over drie blauwtinten, daarna een groene gloed: allebei
               sfeer die niets zegt, en het clubwapen draagt het groen al. */
            background: #101714;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-box {
            background: var(--kaart);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,.4);
            padding: 48px 40px 40px;
            width: 100%;
            max-width: 400px;
        }

        .logo {
            text-align: center;
            margin-bottom: 32px;
        }
        .logo h1 {
            font-size: 1.6rem;
            font-weight: 600;
            color: var(--tekst);
        }
        .logo p {
            font-size: .85rem;
            color: var(--gedempt);
            margin-top: 4px;
        }
        /* Het clubwapen. Hier stond een streepje in de accentkleur — op de
           enige pagina die een bezoeker ziet zonder ingelogd te zijn, en
           dus juist de plek waar te zien hoort te zijn van wie dit is. */
        .logo .merk {
            display: block;
            width: 64px;
            height: 64px;
            background: url('../img/clublogo.png') center/contain no-repeat;
            margin: 0 auto 16px;
        }

        .form-group {
            margin-bottom: 18px;
        }
        label {
            display: block;
            font-size: .82rem;
            font-weight: 600;
            color: var(--gedempt);
            margin-bottom: 6px;
            letter-spacing: .3px;
        }
        input[type=text], input[type=password] {
            width: 100%;
            border: 1.5px solid var(--lijn);
            border-radius: 10px;
            padding: 12px 14px;
            font-size: .95rem;
            color: var(--tekst);
            background: var(--vlak-2);
            transition: border-color .2s, box-shadow .2s;
        }
        input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
        }

        .btn-login {
            width: 100%;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 13px;
            font-size: .95rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s;
            margin-top: 8px;
            letter-spacing: .3px;
        }
        .btn-login:hover { background: var(--accent-d); }

        .alert-error {
            background: var(--rood-vlak);
            color: var(--rood);
            border-left: 4px solid var(--rood-rand);
            border-radius: 8px;
            padding: 12px 14px;
            font-size: .88rem;
            margin-bottom: 20px;
        }

        .footer-note {
            text-align: center;
            color: var(--gedempt);
            font-size: .75rem;
            margin-top: 28px;
        }