@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --primary-color: #2563eb; /* Blue-600 */
    --primary-color-green: #16a34a; /* Green-600 */
    --secondary-color: #f59e0b; /* Amber-500 */
    --background-color: oklch(0.7 0.1 257);
    --text-color: #1f2937; /* Dark grey text */
    --header-color: #1d4ed8; /* Blue-700 */
    --selected-link-color: #2563eb;
    --button-hover-color: #1d4ed8;
    --hover-color: #e5e7eb;
    --hover-link-color: #374151;
    --active-color: #2563eb;
    --warning-color: #dc2626;
    --disabled-color: #9ca3af;
    --admin-text-color: #111827;
    --admin-background-color: #ffffff;
    --admin-accent-color: #4f46e5;
    --hover: rgba(0,0,0,.05);
    --radius: 14px;
    --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
    --transition: 180ms cubic-bezier(.2,.8,.2,1);
    --button-color: var(--primary-color);
}

:root {
    --green-color: #798473;
    --green-color-opaque: #79847366;
    --yellow-color: #d6bf5a;
    --yellow-color-opaque: #d6bf5a66;
    --red-color: #9a6456;
    --red-color-opaque: #9a645666;
    --blue-color: #5a8bbf;
    --blue-color-opaque: #5a8bbf66;
    --light-blue-color: #8bbfe6;
    --light-blue-color-opaque: #8bbfe666;
    --dark-blue-color: #3a6a8d;
    --dark-blue-color-opaque: #3a6a8d66;
    --tree-line-color: rgba(0, 0, 0, 0.2);
}

:root {
    --color-blue: #006faf;
    --color-light-blue: #00acea;
    --color-dark-blue: #5071e6;
    --color-white: white;
    --color-off-white: #f9fafb;
    --color-light-grey: #f4f6f8;
    --color-dark-grey: #dbdbdc;
    --color-green: #3bd794;
    --color-light-green: #bce5e5;
    --color-dark-green: #00a892;
    --color-red: #3fd3f49;
    --color-dark-red: #5f1631;
    --color-light-red: #fb887e;
    --page-margin-width: 60px;
    /* Backgrounds */
    --background-color-input: oklch( from var(--background-color) l c 15);
    --hamburger-menu-background: var(--color-light-grey);
    /* Brand colors */
    --color-primary: #1F2A3A; /* primær tekst / logo */
    --color-accent: #3A8DCA; /* links / signal */
    --color-soft: #7CC7EE; /* hover / sekundær */
    /* Input states  */
    --input-success: #2F7D5C; /* blue-leaning green */
    --input-warning: #C9A23A; /* muted amber */
    --input-error: #B84545; /* soft brick red */
    /* CTA */
    --color-bg-cta: #1f3b73;
    --color-bg-cta-h: #284a8a;
    /* Text */
    --color-text: #e6eaf0;
    --color-white: #ffffff;
    --gap-small: 6px;
    --gap-medium: 12px;
    --gap-large: 24px;
    --border-radius: var(--gap-medium);
    --page-margin-top: 60px;
    --legend-color: var(--color-dark-grey);
    --file-image-size: 2rem;
    --file-color: var(--color-light-blue);
    --file-color-hover: var(--color-dark-blue);
}


body {
    box-sizing: border-box;
    font-family: 'figtree' sans-serif;
    font-size: var(--font-size);
    color: var(--text-color);
}

html {
    height: 100%;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

body {
    margin: 0;
    height: 100%;
    background-color: var(--background-color);
}

#main {
    max-width: 85%;
}

a {
    color: var(--admin-text-color);
    text-decoration: none;
}

    a:hover {
        color: var(--hover-link-color);
    }

nav a {
    color: var(--admin-accent-color);
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 15px;
    color: white;
    height: 75px;
    margin: 10px;
}


nav {
    min-height: calc(100vh - 112px);
    padding: 20px;
    margin-bottom: 50px;
}

    nav ul {
        list-style-type: none;
        padding: 0;
    }

article {
    background-color: var(--color-off-white);
    min-height: calc(100vh - 112px);
}

    section::after {
        content: "";
        display: table;
        clear: both;
    }

footer {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background-color: #333;
    padding: 9px;
    text-align: center;
    color: white !important;
}

@media (max-width: 600px) {
    nav, article {
        width: 100%;
        height: auto;
    }
}

.close-button {
    font-size: 20px;
    color: #3498db;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 25px;
    top: 10px;
    caret-color: transparent;
    z-index: 100;
}


.loader-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #3498db;
    border-top-color: transparent;
    animation: loader-rotate 1s linear infinite;
}

.loader-text {
    margin-top: 10px;
    font-size: 20px;
    color: #3498db;
    font-weight: bold;
}

@keyframes loader-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hide {
    display: none;
}

.show {
    pointer-events: all;
    opacity: 1;
    display: flex;
}


input, select, textarea, label {
    font-size: 1.1rem;
    margin: 0.25rem;
    min-width: 125px;
    padding: 0.5rem;
    transition: border-color 0.5s ease-out;
    border:1px solid var(--color-white);
    margin: 15px 0px;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    corner-shape: squircle;
}


label
{
    margin: unset;
}
.checkbox-selector-input {
    width: initial;
}

label {
    border: none;
}

input:focus, select:focus, select:focus-visible {
    border: none;
    border-bottom: 1px solid var(--primary-color);
}

input:required.dirty:invalid {
    border-color: red;
    outline: 0;
}

input:required:valid {
    border-color: var(--primary-color);
}



label.required::after,
select.required::after {
    content: "*";
    color: red;
}

.column-span-3 {
    grid-column: 1 / span 3;
}

.checkbox-selector-label {
}

.checkbox-selector-input {
    justify-self: left;
    min-width: 30px;
    grid-column: 2 / span 2;
}

error {
    display: block;
}



    error::after {
        content: attr(data-error-message);
        color: #ff3800;
        font-size: 1.4em;
    }

popup {
    transition-duration: 200ms;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    width: 50%;
    height: 80%;
    padding: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: var(--background-color);
    border: 1px solid var(--primary-color);
}

    popup.show {
        visibility: visible;
        opacity: 100;
    }

    popup img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


    popup close-popup {
        top: 0;
        right: 0;
        position: absolute;
        margin: 20px;
        cursor: pointer;
    }


    popup loading-screen {
        display: flex;
        margin: auto;
    }


.hidden {
    display: none;
}

toast {
    display: none;
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
}

    toast h1 {
        color: white;
    }

    toast.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    toast > p {
        display: block;
    }

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

/* Dialog */

dialog {
    border: 2px;
    box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
    overflow: hidden;
    padding: 20px;
}

/* Confirm dialog*/

#confirm-dialog {
    text-align: center;
    background-color: var(--background-color);
    border: 1px solid var(--primary-color);
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    min-width: 300px;
}

#confirm-message {
    font-size: 16px;
    margin-bottom: 20px;
}

#confirm-ok {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    margin-right: 10px;
}

    #confirm-ok:active {
        border: none;
    }

#confirm-cancel {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 10px 20px;
}

/* Confirm dialog*/

#create-forgot-password {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#login-screen {
    display: none;
    height: 600px;
    width: 1024px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background-color);
    box-shadow: 1px 4px 22px -8px #0004;
    overflow: hidden;
}

    #login-screen #login {
        background-color: var(--button-color);
        padding: 15px;
        padding-inline: 25px;
    }

.show-login {
    display: flex !important;
}

.left-content {
    width: 42%;
    height: 100%;
    padding: 25px 25px;
}

.content {
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 100%;
    width: 73%;
    margin: auto;
    flex-direction: column;
}

button {
    border: none;
    padding: 15px 70px;
    display: block;
    margin: auto;
    margin-top: 20px;
    color: #fff;
    font-weight: bold;
    -webkit-box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
    -moz-box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
    box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
    border-radius: 999px;
    border-shape:squircle;
    font-size: 1.25rem;
    cursor: pointer;
}

button:hover
{
    background-color: oklch(from var(--button-color) l c 15);
}

#forgot-password {
    border: none;
    background: none;
    color: var(--text-color);
    text-decoration: underline;
    opacity: .8;
    margin: 0px;
    margin-top: 20px;
    box-shadow: unset;
    padding: 0px;
}

#login {
    margin: 0px;
}

.right-content {
    width: 59%;
    height: 100%;
    color: #fff;
    position: relative;
    /*    background-image: url(https://longLake.dk/hs-images/1080/1920/zelina.avif);*/
    background-size: cover;
    background-position-y: -200px;
}

.right-content {
}

.right-text {
    height: 100%;
    position: relative;
    transform: translate(0%, 27%);
}

    .right-text h5, .right-text h2 {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 19px;
        font-weight: 400;
    }

    .right-text h2 {
        font-size: 50px;
    }

img {
    caret-color: transparent;
}

@keyframes loadingFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loadingFadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#login-screen, #admin-section {
    animation: 1s ease-out 0s 1 loadingFadeIn;
}

.fadeOut {
    animation: 1s ease-out 0s 1 loadingFadeOut !important;
}

header {
    animation: 1s ease-out 0s 1 slideInFromLeft;
}

.rotate {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


* {
    box-sizing: border-box;
}

body {
    font-family: 'figtree';
    font-size: var(--font-size);
    font-display: block;
}

:root {
    font-family: 'figtree';
    --font-size: 14px;
    font-display: block;
}


#login-modal,
#forgot-password-modal,
#longLake-menu-box {
    width: 768px;
    max-width: 90vw;
    margin: auto;
    border: none;
    border-radius: 5px;
    padding: 32px;
    background: var(--background-color);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    #login-modal.long-version {
        height: 550px;
    }

    #login-modal > .wrapper {
        display: grid;
        grid-template-columns: auto 400px;
        gap: 20px;
    }

        #login-modal > .wrapper > .left {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        #login-modal > .wrapper > .right {
            width: 320px;
            justify-self: right;
        }

    #forgot-password-modal > .wrapper {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr auto;
    }

        #forgot-password-modal > .wrapper .left {
            display: grid;
            gap: 20px;
            grid-template-columns: 1fr 1fr;
        }

    #login-modal input, #forgot-password-modal input {
        font-size: 1em;
        padding: 5px;
    }

    #login-modal #forgot-password {
        border: none;
        background: none;
        text-align: left;
        cursor: pointer;
    }

    #login-modal #login,
    #forgot-password-modal #reset-password-button {
        border: none;
        background: white;
        cursor: pointer;
        width: 128px;
        padding: 10px;
        border-radius: 15px;
        font-size: 1em;
        color: white;
        background: var(--green-color);
        opacity: 0.8;
        /*border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);*/
    }

        #login-modal #login:hover,
        #forgot-password-modal #reset-password-button:hover {
            opacity: 1;
        }

    #forgot-password-modal #error-message-forgot-password {
        grid-column: span 2;
        justify-self: center;
    }

    #login-modal #login {
        align-self: end;
    }

    #forgot-password-modal #reset-password-button {
        grid-column: span 2;
        align-self: end;
        justify-self: end;
    }

    #login-modal #error-message,
    #forgot-password-modal #error-message-forgot-password {
        color: red;
    }

    #login-modal #close-login-modal,
    #close-forgot-password-modal {
        border: none;
        background: none;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 2em;
    }

        #login-modal #close-login-modal:hover,
        #close-forgot-password-modal:hover {
            color: rgba(255,255,255,0.6);
        }


.close-button {
    border: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
}

@media (max-width: 900px) {
    #login-modal,
    #longLake-menu-box {
        height: 100%;
        width: 100%;
        border: none;
        padding: 0px;
    }

        #login-modal .wrapper {
            grid-template-columns: auto;
        }

        #login-modal .left {
            width: 90%;
            margin: 20px;
        }

        #login-modal .right {
            display: none;
        }

    #longLake-menu-box {
        padding: 20px;
    }

    dialog ul > li {
        list-style-type: none;
        margin: 20px;
    }

        dialog ul > li a {
            font-size: 2em;
        }
}