/* Top Navigation Bar */
.nav-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--navigation-col-gap);
    width: 100%;
    height: var(--navigation-height);
    padding: 0 var(--standard-pad);
    background-color: #1a1a1a; /* slightly lighter than black */
    border-bottom: 3px solid var(--secondary-color);
}

/* Nav links (e.g., "Home") */
.nav-container a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem;
    border-radius: 0; /* full height buttons typically don't have rounded corners */
    height: 100%; /* fill nav height */
    background: transparent;
    color: var(--primary-color);
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-container a.btn:hover {
    background-color: var(--secondary-color);
    color: black;
}

/* Action buttons (Dashboard, Admin, Login, Logout) */
.nav-container .action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-radius: 0; /* square edges to match full-height style */
    height: 100%; /* fill nav height */
    background: #1a1a1a;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.nav-container .action-button:hover {
    color: var(--secondary-hover-color);
}

/* Login popup styling */
/* Login popup styling */
#login-popup {
position: absolute;
top: calc(var(--header-height));
right: var(--standard-pad);
background: #2b2b2b; /* lighter than #222 */
padding: var(--standard-pad);
border-radius: 0.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
z-index: 1000;
border: 1px solid var(--secondary-color); /* subtle accent */
}

/* Input styling */
#login-popup input {
display: block;
width: 100%;
padding: 0.5rem;
margin-bottom: var(--half-pad);
border: 1px solid var(--secondary-color);
border-radius: 0.25rem;
background: #111; /* lighter than black */
color: white;
transition: border-color 0.2s ease, background 0.2s ease;
}

#login-popup input:focus {
border-color: var(--secondary-hover-color);
background: #1a1a1a;
outline: none;
}

/* Button styling */
#login-popup button {
width: 100%;
}

/* Link styling */
#login-popup a {
display: block;
margin-top: var(--half-pad);
font-size: 0.9em;
text-align: right;
}

/* Modern login submit button */
#login-popup .action-button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem; /* spacing between icon and text */
width: 100%;
padding: 0.6rem 1rem;
border: none;
border-radius: 0.5rem;
background: var(--secondary-color);
color: black;
font-size: 1rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

#login-popup .action-button:hover {
background: var(--secondary-hover-color);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#login-popup .action-button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#login-user-icon{
    color: black;
}


/* Breadcrum Bar */
#breadcrum {
display: flex;
align-items: center;  /* vertical centering */
padding: var(--half-pad) var(--standard-pad);
gap: 0.1rem;
background: transparent;
font-size: calc(var(--standard-text-size) * 0.9);
line-height: 1;  /* ensures consistent vertical alignment */
margin-top: 0.3rem;
margin-bottom: 0.3rem;
}

#breadcrum a {
text-decoration: none;
color: var(--secondary-color);
display: inline-flex;
align-items: center;  /* ensures icon and text align */
gap: 0.25rem;
transition: color 0.2s ease;
}

#breadcrum a:hover {
color: var(--secondary-hover-color);
}

#breadcrum i {
font-size: 1rem;
line-height: 1; /* keeps icon aligned with text */
}


/* Remove separator from last item */
#breadcrum a:last-of-type::after {
content: "";
}