/*
================================================
Bekkelund Gård & Keramikk - Task Manager Styles
================================================
*/

/* * -- Farvepalett (Color Palette) --
 * Defines the core brand colors used throughout the application.
 */
:root {
    --primary: #667b68;      /* Primary green for headers and important text */
    --secondary: #a3b899;    /* Lighter green for accents */
    --bg: #dde6d5;           /* Main background color */
    --text: #323232;         /* Default text color */
    --panel: #dde6d5;        /* Background for panels or less important sections */
    --button: #e17a7a;       /* Main button color (red) */
}

/* * -- Grunnleggende (Basic Styles) --
 * Sets the default styles for the entire page.
 */
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Lato', Arial, sans-serif;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box; /* Ensures padding doesn't affect total width */
}

/* * -- Toppbar (Header) --
 * Styles for the fixed navigation bar at the top of the page.
 */
header.topbar {
    background: var(--primary);
    height: 100px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 32px;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left img {
    height: 80px;
    width: auto;
    object-fit: contain;
}

.dashboard-title-group {
    flex-grow: 1;
    text-align: center;
}

.dashboard-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
    white-space: nowrap;
}

.header-right {
    display: flex;
    align-items: center;
}

.login-link {
    color: #fff;
    background: var(--button);
    text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    font-size: 1.07em;
    border-radius: 1.4em;
    padding: 0.47em 1.5em;
    transition: background 0.12s;
    border: none;
}

.login-link:hover, .login-link:focus {
    background: var(--primary);
    text-decoration: underline;
}

/* * -- Hovedinnhold (Main Content) --
 * Ensures main content area is correctly placed below the fixed header.
 */
main {
    padding-top: 120px; /* Space for the 100px header + 20px margin */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* * -- Kort og Innhold (Cards and Content) --
 * Styles for the main content containers, like the login form.
 */
.card {
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 2px 16px rgba(102,123,104,0.07);
    padding: 2.7rem 3.2rem;
    width: 100%;
    max-width: 430px;
    margin: 2.3rem auto;
    box-sizing: border-box;
    text-align: center;
}

.card h1 {
    font-size: 2.2em;
    margin-bottom: 1.3em;
    color: var(--primary);
}

.card form {
    width: 100%;
    text-align: left;
}

.card label {
    margin-bottom: 0.4em;
    font-weight: 700;
    color: var(--primary);
    font-size: 1.16em;
    display: block;
}

.card input[type="email"],
.card input[type="password"] {
    width: 100%;
    margin-bottom: 1.5em;
    font-size: 1.15em;
    padding: 1em 1.15em;
    border-radius: 1.1em;
    border: 1.7px solid var(--panel);
    background: #fff;
    transition: border 0.13s;
    box-sizing: border-box;
}

.card input[type="email"]:focus,
.card input[type="password"]:focus {
    border-color: var(--primary);
    outline: none;
}

.card button {
    margin: 1em 0 0.7em 0;
    background: var(--button);
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.14em;
    font-weight: 500;
    border: none;
    border-radius: 2.2em;
    padding: 1em 0;
    width: 100%;
    cursor: pointer;
    transition: background 0.14s, transform 0.12s;
}

.card button:hover, .card button:focus {
    background: var(--primary);
    transform: translateY(-1.5px);
}

.card-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1.2em;
}

.card-links a {
    font-size: 1.09em;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.card-links a:hover, .card-links a:focus {
    text-decoration: underline;
    color: var(--button);
}


/* * -- Footer --
 * Styles for the footer at the bottom of the page.
 */
.footer {
    width: 100%;
    background: var(--primary);
    color: #fff;
    text-align: center;
    padding: 20px 10px;
    font-size: 1rem;
    box-sizing: border-box;
    margin-top: auto; /* Pushes footer to the bottom */
}

.footer a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    padding: 0 0.7em;
}

.footer a:hover, .footer a:focus {
    text-decoration: underline;
}

.footer-copyright {
    font-weight: 400;
    padding: 0 0.7em;
}

.footer-separator {
    opacity: 0.45;
}

/* * -- Media Queries (Responsive Design) --
 * Adjusts the layout for smaller screens.
 */
@media (max-width: 900px) {
    header.topbar { height: 90px; }
    .header-left img { height: 75px; }
    main { padding-top: 100px; }
}

@media (max-width: 600px) {
    header.topbar {
        height: auto;
        flex-direction: column;
        padding: 10px;
    }
    .dashboard-title {
        font-size: 1.2rem;
        white-space: normal;
    }
    main { padding-top: 150px; } /* Adjust based on new header height */
    .card {
        padding: 1.5rem;
        border-radius: 1.4em;
    }
    .card-links {
        flex-direction: column;
        gap: 0.7em;
        align-items: center;
    }
    .footer {
        flex-direction: column;
        gap: 0.5em;
    }
    .footer-separator {
        display: none;
    }
}