:root {

    /* ----- COLORS ----- */
    --clr-primary:       #2ba384;
    --clr-border:        #e2e8f0;
    --clr-danger:        #ff4d4d;

    --body-bg:           #f5f5f5;
    --card-bg:           #ffffff;
    --icon-bg:           #e5f1ed;

    --text-primary:      #111827;
    --text-secondary:    #718096;
    --text-tertiary:     #ffffff;

    --clr-primary-light: rgba(43, 163, 132, 0.12);
    --clr-primary-ring:  rgba(43, 163, 132, 0.2);
    --clr-danger-light:  rgba(255, 77, 77, 0.12);


    /* ----- FONTS ----- */
    --ff-base:    "Space Grotesk", sans-serif;
    --ff-heading: "Space Grotesk", sans-serif;


    /* ----- FONT SIZES ----- */
    --fs-3xs: 0.625rem;  /* 10px */
    --fs-2xs: 0.75rem;   /* 12px */
    --fs-xs:  0.875rem;  /* 14px */
    --fs-sm:  1rem;      /* 16px */
    --fs-md:  1.125rem;  /* 18px */
    --fs-lg:  1.25rem;   /* 20px */
    --fs-xl:  1.5rem;    /* 24px */
    --fs-2xl: 1.875rem;  /* 30px */
    --fs-3xl: 2.25rem;   /* 36px */
    --fs-4xl: 3rem;      /* 48px */


    /* ----- FONT WEIGHTS ----- */
    --fw-thin:       100;
    --fw-extralight: 200;
    --fw-light:      300;
    --fw-regular:    400;
    --fw-medium:     500;
    --fw-semibold:   600;
    --fw-bold:       700;
    --fw-black:      800;


    /* ----- SPACING ----- */
    --space-xs:  0.25rem;  /* 4px  */
    --space-sm:  0.5rem;   /* 8px  */
    --space-md:  1rem;     /* 16px */
    --space-lg:  2rem;     /* 32px */
    --space-xl:  3rem;     /* 48px */
    --space-2xl: 4rem;     /* 64px */
    --space-3xl: 5rem;     /* 80px */


    /* ----- BORDER RADIUS ----- */
    --radius-sm:  0.25rem;  /* 4px  */
    --radius-md:  0.5rem;   /* 8px  */
    --radius-lg:  0.75rem;  /* 12px */
    --radius-xl:  1rem;     /* 16px */
    --radius-3xl: 3rem;     /* 48px */


    /* ----- SHADOWS ----- */
    --card-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);


    /* ----- MORE SHADOWS ----- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

    /* ----- PILL RADIUS ----- */
    --radius-pill: 9999px;
}


/* ----- RESETS ----- */

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

img, svg, label { 
    display: inline-block; 
}

li     { 
    list-style: none; 
}

a { 
    text-decoration: none;
}

button { 
    font-family: inherit; cursor: pointer;
}

input, select {
    font-family: inherit;
}



/* ----- UTILITIES ----- */
.d-none { display: none !important; }

/* ----- BODY ----- */

body {
    font-family: var(--ff-base);
    background-color: var(--body-bg);
    min-height: 100vh;
    margin: 0;
}


/* ----- BANNER ----- */

nav.banner {
    background-color: var(--clr-primary);
    position: relative;
}


/* ----- NAV CONTAINER ----- */

nav.banner > .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ----- LOGO ----- */

nav.banner .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    outline: none;
}

nav.banner .logo img {
    width: 50px;
    margin-bottom: 3px;
}

nav.banner .logo p {
    font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
}


/* ----- NAV MENU ----- */

nav.banner .nav-menu {
    display: flex;
}


/* ----- NAV ACTIONS ----- */

nav.banner .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}


/* ----- NAV BUTTONS ----- */

nav.banner .logout-btn,
nav.banner .change-pw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: 0.4rem 1rem;
    height: 38px;
    border-radius: var(--radius-md);
    border: 2px solid var(--text-tertiary);
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
    justify-content: center;
    width: 100%;
}

nav.banner .logout-btn {
    background: transparent;
    color: var(--text-tertiary);
}

nav.banner .logout-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

nav.banner .change-pw-btn {
    background: var(--text-tertiary);
    color: var(--clr-primary);
}

nav.banner .change-pw-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}


/* ----- HAMBURGER TOGGLER ----- */

nav.banner .navbar-toggler {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    gap: 5px;
}

nav.banner .navbar-toggler-icon {
    width: 25px;
    height: 3px;
    background-color: var(--text-tertiary);
    transition: all 0.3s ease;
    display: block;
    border-radius: 2px;
}


/* ----- HAMBURGER ANIMATIONS ----- */

.navbar-toggler.active .navbar-toggler-icon:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.navbar-toggler.active .navbar-toggler-icon:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.active .navbar-toggler-icon:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ----- RESPONSIVE — MOBILE (≤ 570px) ----- */

@media (max-width: 570px) {

    nav.banner .logo img {
        width: 40px;
    }

    nav.banner .navbar-toggler {
        display: flex;
    }

    nav.banner .nav-menu {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--clr-primary);
        flex-direction: column;
        width: 100%;
        padding: 0 var(--space-md);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }


    /* ----- MOBILE MENU ACTIVE ----- */

    nav.banner .nav-menu.active {
        max-height: 300px;
    }

    .nav-actions {
        flex-direction: column;
    }

    .nav-actions form,
    .nav-actions a {
        width: 100%;
    }

    .nav-actions form button,
    .nav-actions .change-pw-btn {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .nav-actions .change-pw-btn {
        margin-bottom: var(--space-md);
    }
}