:root {
            --primary-blue: #009BDA;
            --primary-blue-hover: #008ac2;
            --bg-overlay: rgba(255, 255, 255, 0.95);
            --border-color: #ccc;
            --font-family: 'Red Hat Display', sans-serif;
        }

        body, html {
            height: 100%;
            margin: 0; padding: 0;
            font-family: var(--font-family);
            font-size: 14px;
            /* Placeholder for bakgrunnsbilde */
            //background: url('img/background.jpg') no-repeat center center fixed; 
            background-size: cover;
            //background-color: #006F9D; /* Fallback farge */
            background-color: #444; background-image: url( 'login-background5-svg.svg' ); background-repeat: no-repeat; background-size: cover; background-position: center bottom; background-attachment: fixed;
            //background-image: url( 'img/retrobg33.jpg' ); background-repeat: no-repeat; background-size: cover; background-position: center bottom; background-attachment: fixed;  
        }

        /* Hovedcontainer - Sentrerer alt */
        .login-page-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }

        .login-logo {
            text-align: center;
            margin-bottom: 20px;
        }
        .login-logo img {
            height: auto;
            max-width: 100%;
            /* Justerer logo-størrelse for å matche din stil */
            max-height: 95px; 
        }

        /* Kort-design */
        .login-card {
            background-color: var(--bg-overlay);
            border-radius: 8px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            width: 100%;
            max-width: 480px; /* Standard bredde desktop */
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Faner */
        .login-tabs {
            display: flex;
            background: #f1f1f1;
            border-bottom: 1px solid #ddd;
        }
        .tab-btn {
            flex: 1;
            padding: 15px;
            border: none;
            background: none;
            font-weight: 700;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }
        .tab-btn.active {
            background: white;
            color: var(--primary-blue);
            border-bottom: 3px solid var(--primary-blue);
        }

        /* Innholdsområde */
        .login-body {
            padding: 30px;
        }

        /* Skjema elementer */
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            text-align: left;
            font-size: 16px;
            
        }
        .form-input {
            width: 100%;
            height: 55px; /* Default desktop høyde */
            padding: 0 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
            font-family: inherit;
            box-sizing: border-box;
        }
        .form-input:focus {
            border-color: var(--primary-blue);
            outline: none;
        }

        /* Submit knapp */
        .btn-login {
            width: 100%;
            height: 45px;
            background-color: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            margin-top: 10px;
            font-family: inherit;
        }
        .btn-login:hover { background-color: var(--primary-blue-hover); }

        /* Footer */
        .login-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            font-size: 12px;
        }
        .footer-link { color: #555; text-decoration: none; }
        .footer-link:hover { text-decoration: underline; color: var(--primary-blue); }

        /* Øye-ikon */
        .password-eye {
            position: absolute;
            right: 10px;
            top: 35px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            opacity: 0.6;
        }
        .password-eye img { width: 100%; height: 100%; object-fit: contain; }

        /* RFID */
        .rfid-area {
            border: 2px dashed #ccc;
            padding: 30px;
            text-align: center;
            border-radius: 6px;
            background: #898989;
            color: white;
        }
        .rfid-icon-img {
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
            opacity: 0.7;
        }

        /* Alerts */
        .alert-box {
            padding: 15px; margin-bottom: 20px; border-radius: 4px; font-size: 14px; line-height: 1.4;
        }
        .alert-error { background-color: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
        .alert-success { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }

        /* Switch styling */
/* Container som holder teksten "Husk meg" og bryteren på linje */
.switch-wrap { 
    display: flex; 
    align-items: center; 
    gap: 10px; /* Avstand mellom tekst og bryter */
    font-size: 14px;
    color: #333;
}

/* Selve rammen til bryteren */
.switch { 
    position: relative; 
    display: inline-block; 
    width: 50px;  /* Bredde */
    height: 28px; /* Høyde */
    flex-shrink: 0; /* Hindrer at den krymper på mobil */
}

/* Skjul den originale checkboxen */
.switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

/* Bakgrunnen (sporet) */
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; /* Grå når av */
    transition: .4s; 
    border-radius: 34px; /* Runder kantene helt */
}

/* Den hvite sirkelen (knotten) */
.slider:before { 
    position: absolute; 
    content: ""; 
    height: 22px; 
    width: 22px; 
    left: 3px; 
    bottom: 3px; 
    background-color: white; 
    transition: .4s; 
    border-radius: 50%; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Liten skygge for dybde */
}

/* Farge når den er PÅ (Blå) */
input:checked + .slider { 
    background-color: #009BDA; 
}

/* Flytt sirkelen når den er PÅ */
input:checked + .slider:before { 
    transform: translateX(22px); 
}
/* Tab content */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ==========================================================================
   MOBIL-SPESIFIKKE STILER (via Media Query + PHP klasse)
   ========================================================================== */

/* Bruker PHP-sjekken for å legge til klasse hvis mobil */
.is-mobile .login-card { max-width: 100%; } /* Full bredde */
.is-mobile .form-input, 
.is-mobile .btn-login { height: 60px; font-size: 18px; }
.is-mobile .form-label { font-size: 16px; margin-bottom: 10px; }
.is-mobile .password-eye { top: 45px; width: 28px; height: 28px; right: 15px; }
.is-mobile .tab-btn { font-size: 18px; padding: 20px; }
.is-mobile .login-footer { font-size: 14px; }
.is-mobile .switch { width: 50px; height: 28px; }
.is-mobile .slider:before { height: 22px; width: 22px; left: 3px; bottom: 3px; }
input:checked + .slider:before { transform: translateX(22px); }