/* HEADER */

header {
position:fixed;
top:0;
left:0;
width:100%;
height:70px;
background:var(--midnight-navy);
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 15px;
z-index:1000;
box-shadow:0 3px 5px rgba(200,200,200,0.55);
}

body {
padding-top:70px;
}

#logo-container {
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
text-decoration:none;
}

#logo-text h1 {
font-size:18px;
margin:0;
white-space:nowrap;
color:var(--white);
}

#logo-text p {
font-size:12px;
margin:2px 0 0;
color:var(--text-muted);
white-space:nowrap;
}


/* NAVIGATION */

#burger {
background:none;
border:none;
cursor:pointer;
display:flex;
flex-direction:column;
gap:4px;
padding:5px;
}

#burger span {
display:block;
height:3px;
width:22px;
background:var(--white);
border-radius:2px;
transition:0.3s;
}

#burger.active span:nth-child(1) {
transform:translateY(7px) rotate(45deg);
}

#burger.active span:nth-child(2) {
opacity:0;
}

#burger.active span:nth-child(3) {
transform:translateY(-7px) rotate(-45deg);
}


/* NAVIGATION PANEL */

#menu {
position:fixed;
top:70px;
left:0;
width:100%;
background:var(--midnight-navy);
display:flex;
flex-direction:column;
border-bottom:3px solid var(--accent-pink);
z-index:999;
opacity:0;
visibility:hidden;
transform:translateY(-10px);
pointer-events:none;
transition:
opacity .8s ease,
transform .8s ease,
visibility .8s ease;
}

#menu.active {
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}


/* MENU CONTENT */

#menu-content {
position:relative;
width:100%;
}


/* CLOSE BUTTON */

#menu-close {
position:absolute;
top:8px;
right:10px;
width:32px;
height:32px;
padding:0;
border:none;
outline:none;
background:transparent;
color:var(--white);
font-size:28px;
line-height:1;
cursor:pointer;
}

#menu-close:hover {
color:var(--accent-pink);
}


/* MENU CONTROLS */

#menu-controls {
padding:0 20px 18px;
}

#menu-controls label {
display:block;
padding:10px 0 5px;
color:var(--white);
font-size:14px;
font-weight:bold;
}

#menu-controls select {
display:block;
width:100%;
padding:9px 10px;
border:1px solid rgba(255,255,255,0.2);
border-radius:4px;
background:var(--white);
color:var(--midnight-navy);
font-family:inherit;
font-size:14px;
}

#menu-controls button,
#menu-controls .file-upload-btn {
display:block;
width:100%;
padding:10px 0;
margin:0;
border:0;
border-top:1px solid rgba(255,255,255,0.1);
background:transparent;
color:var(--white);
font-family:inherit;
font-size:14px;
text-align:left;
cursor:pointer;
transition:
background 0.2s,
color 0.2s;
}

#menu-controls button:hover,
#menu-controls .file-upload-btn:hover {
background:rgba(var(--accent-pink-rgb),0.15);
color:var(--accent-pink);
}


/* STATUS */

#menu-status {
padding:12px 0;
border-top:1px solid rgba(255,255,255,0.1);
border-bottom:1px solid rgba(255,255,255,0.1);
}

#menu-status div {
color:var(--text-muted);
font-size:12px;
}

#menu-status span {
display:block;
margin-top:2px;
color:var(--white);
font-size:14px;
font-weight:bold;
}


/* FILE INPUT */

#excelfileInput {
display:none;
}


/* DESKTOP / TABLET WIDTH */

@media (min-width:700px) {

#menu {
width:300px;
left:auto;
right:1px;
border-radius:0 0 8px 8px;
box-shadow:0 6px 18px rgba(0,0,0,.25);
}

}


/* MOBILE */

@media (max-width:599px) {

#logo-text h1 {
font-size:16px;
}

#logo-text p {
font-size:11px;
}

}