/* Grundlayout */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #008000;
}

/* Container för popup och login-formulär */
#login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* Gör det möjligt att placera rutan i mitten */
    top: 50%; /* Flytta rutan till 50% av höjden */
    left: 50%; /* Flytta rutan till 50% av bredden */
    transform: translate(-50%, -50%); /* Justerar rutans position för exakt centering */
    width: 100%; /* Sätter bredden för centreringssyfte */
    max-width: 400px; /* Begränsar rutans maxbredd */
    background-color: white; /* Vit bakgrund för rutan */
    padding: 20px; /* Utrymme runt innehållet */
    border-radius: 10px; /* Rundade hörn */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Skugga runt rutan */
}



/* Popup-stilar */
#logoutPopup {
    position: fixed; /* Placera popupen ovanpå allt */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Transparent mörk bakgrund */
    display: none; /* Dölj popupen som standard */
    justify-content: center;
    align-items: center;
    z-index: 1100; /* Popupen visas ovanpå allt annat */
}

#logoutPopup.active {
    display: flex; /* Visa popupen när den är aktiv */
}

#logoutPopup .popup-content {
    background-color: white; /* Popupens bakgrundsfärg */
    padding: 20px;
    border-radius: 10px; /* Rundade hörn */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Skugga runt popupen */
    text-align: center; /* Centrerad text */
    width: 80%; /* Maximal bredd för popupen */
    max-width: 400px; /* Popupen ska inte överstiga 400px */
}

#logoutPopup .popup-content button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff; /* Blå knappfärg */
    color: white;
    border: none;
    border-radius: 5px; /* Rundade hörn för knappen */
    cursor: pointer;
    font-size: 1rem; /* Gör knappen lättläst */
}

#logoutPopup .popup-content button:hover {
    background-color: #0056b3; /* Mörkare blå färg vid hovring */
}


/* Titel och underrubrik */
h2, #subheader {
    margin: 0;
    padding: 10px 0;
}

h2 {
    font-size: 1.5em;
    font-weight: 700;
}

#subheader {
    font-size: 0.9em;
    margin-top: -10px;
    color: #555;
}

/* Felmeddelanden */
#error-message {
    color: red;
    margin-bottom: 10px;
}

/* Formulärstilar */
.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Ögonikon för lösenord */
.password-container {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5em;
}

/* Knappstilar */
.form-buttons button {
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    margin: 5px;
}

.form-buttons .login-btn {
    background-color: green;
    color: white;
}

.form-buttons .cancel-btn {
    background-color: red;
    color: white;
}

#errorModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: auto;
    height: auto;
    padding: 0; /* Ingen extra padding för overlay */
}

#errorModal .modal-content {
    background-color: white; /* Behåll en tydlig bakgrund för modalen */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Lägg till skugga om du vill */
}

/* Stängningsknappen */
#errorModal .modal-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5rem; /* Gör X större */
    color: red; /* Färgen på X */
    font-weight: bold; /* Gör X tydligare */
    background: none;
    border: none;
}

#errorModal .modal-content .close:hover {
    color: darkred; /* Ändrar färgen vid hovring */
    transform: scale(1.2); /* Gör X större vid hovring */
}

input[type="text"], input[type="password"] {
    font-size: 16px; /* Minst 16px för att förhindra inzoomning */
}

/* För checkboxen "Kom ihåg mig" */
#rememberMe {
    display: inline-block; /* Säkerställ att checkboxen visas */
    margin-right: 5px; /* Avstånd mellan checkbox och etikett */
    width: auto; /* Ta bort eventuell breddbegränsning */
    height: auto; /* Anpassa höjden till innehållet */
}

/* För etiketten till checkboxen */
label[for="rememberMe"] {
    display: inline-block; /* Visa etiketten bredvid checkboxen */
    font-size: 1em; /* Anpassa textstorleken */
    vertical-align: middle; /* Justera vertikalt mot checkboxen */
    color: #000; /* Svart textfärg */
    cursor: pointer; /* Gör etiketten klickbar */
}

#register-link {
    text-align: center;
    margin-top: 15px;
}

#register-link a {
    color: #007BFF;
    text-decoration: none;
}

#register-link a:hover {
    text-decoration: underline;
}

/* För select-fält */
select.form-control {
    width: 100%; /* Samma bredd som input-fält */
    padding: 10px; /* Samma padding som input-fält */
    border: 1px solid #ccc; /* Samma kantlinje som input-fält */
    border-radius: 4px; /* Rundade hörn för att matcha */
    font-size: 16px; /* Samma textstorlek som input-fält */
    background-color: white; /* Vit bakgrund */
    color: #333; /* Textfärg */
    box-sizing: border-box; /* Inkludera padding i bredden */
    appearance: none; /* Tar bort standardstil i vissa webbläsare */
    -webkit-appearance: none; /* För WebKit-baserade webbläsare */
    -moz-appearance: none; /* För Mozilla-baserade webbläsare */
}

/* För att säkerställa att både input och select matchar */
input[type="text"], input[type="password"], select.form-control {
    width: 100%; /* Full bredd */
    padding: 10px; /* Samma padding */
    border: 1px solid #ccc; /* Samma kantlinje */
    border-radius: 4px; /* Rundade hörn */
    font-size: 16px; /* Samma textstorlek */
    box-sizing: border-box; /* Inkludera padding i bredden */
}

/* Anpassa label för att matcha övriga */
label {
    font-size: 0.9em; /* Samma storlek som andra etiketter */
    margin-bottom: 5px; /* Avstånd mellan etikett och fält */
    display: block; /* Gör etiketten till ett blockelement */
}

/* Lägg till pilen på dropdown-fältet */
select.form-control {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"%3E%3Cpath fill="none" d="M0 0h20v20H0z"/%3E%3Cpath fill="%23333" d="M5.292 7.292l4.707 4.707L14.707 7.292a1 1 0 011.414 0l.003.003a1 1 0 010 1.415l-6 6a1 1 0 01-1.415 0l-6-6a1 1 0 011.414-1.415z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* Behåll padding för textinmatning */
select.form-control {
    padding-right: 40px; /* Lämna plats för pilen */
}

.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 400px; /* Behåller bredden */
    min-height: 350px; /* Ökar höjden – justera efter behov */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Sprider ut innehållet så att knapparna hamnar längst ner */
}

/* Se till att formuläret fyller ut utrymmet och trycker ner knapparna */
#forgotPasswordForm {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Gör att formuläret fyller ut och knapparna hamnar längst ner */
    justify-content: space-between;
}

/* Flytta ner knapparna */
.form-buttons {
    margin-top: auto; /* Trycker ner knapparna så långt ner som möjligt */
    padding-top: 20px; /* Lägger till mellanrum mellan inputfält och knappar */
}

.modal-content h2 {
    margin-bottom: 10px;
}

.modal-content .form-group {
    margin-bottom: 15px;
    text-align: left;
}

.modal-content .form-buttons {
    display: flex;
    justify-content: space-between;
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

/* Stil för bekräftelsetexten */
#login-message {
    display: none; /* Startar osynlig */
    color: black;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
}

/* Stil för "Logga in"-knappen */
#login-button {
    display: none; /* Startar osynlig */
    background-color: #007bff;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    width: 100%;
    margin-top: 10px;
}

/* Effekt vid hover */
#login-button:hover {
    background-color: #0056b3;
}

/* Stil för e-postinmatningsfältet med tunn grå understrykning */
.email-input-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc; /* Tunn, grå understrykning */
    padding: 5px;
    background: white;
}

/* Stil för e-postikonen (Font Awesome) */
.email-input-container i {
    font-size: 18px;
    color: #888; /* Grå färg */
    margin-right: 10px;
}

/* Stil för själva inmatningsfältet */
.email-input-container input {
    border: none; /* Tar bort ramar */
    outline: none; /* Förhindrar kant vid fokus */
    flex: 1;
    font-size: 16px;
    height: 30px;
    padding: 5px;
    background: transparent;
}