#ere-logo {
    height: 80px;
    width: auto;
    mix-blend-mode: multiply;
}

#crea-logo {
    height: 70px;
    width: auto;
    margin-left: 8px;
}

/* Override Bootstrap navbar-expand-lg (992px) to keep hamburger until 1048px */
@media screen and (min-width: 992px) and (max-width: 1047px) {
    .navbar-expand-lg .navbar-toggler {
        display: flex;
    }
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }
    .navbar-expand-lg .navbar-collapse.show,
    .navbar-expand-lg .navbar-collapse.collapsing {
        display: block !important;
    }
}

@media screen and (max-width: 1047px) {
    #ere-logo {
        height: 60px;
    }
    #crea-logo {
        height: 50px;
    }
}

/* Transitional logo size: prevents nav crowding at wider lg viewports.
   Smaller logos + font give nav items more room from 1048-1115px. */
@media screen and (min-width: 1048px) and (max-width: 1115px) {
    #ere-logo {
        height: 70px;
    }
    #crea-logo {
        height: 60px;
    }
}

#navbar-container {
    padding-left: 0;
    padding-right: 0;
}

@media screen and (min-width: 404px) {
    #navbar-container {
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (max-width: 405px) {
    #ere-logo {
        height: 50px;
    }
    #crea-logo {
        height: 40px;
    }
}


.error {
    color: darkred;
}

.header-space {
    display: none;
}

.content-body {
    min-height: calc(100vh - 80px - 57px - 1px);
}

.content-body-full {
    height: calc(100vh - 80px - 57px - 1px);
}

@media screen and (max-width: 1047px) {
    .content-body {
        min-height: calc(100vh - 60px - 57px - 1px);
    }
    .content-body-full {
        height: calc(100vh - 60px - 57px - 1px);
    }
}

/* Match transitional logo height for consistent page layout (see #ere-logo 1048-1115px rule) */
@media screen and (min-width: 1048px) and (max-width: 1115px) {
    .content-body {
        min-height: calc(100vh - 70px - 57px - 1px);
    }
    .content-body-full {
        height: calc(100vh - 70px - 57px - 1px);
    }
}

@media screen and (max-width: 575px) {
    .navbar-brand {
        font-size: 0.75rem;
    }
}

.modal-backdrop {
    z-index: 10;
}

.signin-alert {
    display: none;
}

.btn-border {
    color: #04552c !important;
    background-color: white !important;
    border: 1px solid #04552c !important;
}


/* Toast Notification Container */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    width: calc(100% - 40px);
    pointer-events: none;
}

@media screen and (max-width: 576px) {
    .toast-container {
        right: 10px;
        left: 10px;
        top: 10px;
        width: auto;
        max-width: none;
    }
}

/* Individual Toast */
.toast-notification {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast-notification.toast-show {
    transform: translateX(0);
    opacity: 1;
}

.toast-notification.toast-hide {
    transform: translateX(120%);
    opacity: 0;
}

.toast-content {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;
}

.toast-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    padding-top: 2px;
}

.toast-message {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #333;
    word-break: break-word;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    margin: -4px -8px -4px 0;
    cursor: pointer;
    color: #666;
    opacity: 0.6;
    transition: opacity 0.2s;
    font-size: 0.875rem;
}

.toast-close:hover {
    opacity: 1;
}

/* Progress Bar */
.toast-progress {
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    transition: width 0.1s linear;
}

/* Toast Type Colors */
.toast-success {
    border-left: 4px solid #198754;
}
.toast-success .toast-icon {
    color: #198754;
}
.toast-progress-success {
    background: #198754;
}

.toast-warning {
    border-left: 4px solid #ffc107;
}
.toast-warning .toast-icon {
    color: #cc9a00;
}
.toast-progress-warning {
    background: #ffc107;
}

.toast-danger {
    border-left: 4px solid #dc3545;
}
.toast-danger .toast-icon {
    color: #dc3545;
}
.toast-progress-danger {
    background: #dc3545;
}

.toast-info {
    border-left: 4px solid #0dcaf0;
}
.toast-info .toast-icon {
    color: #0aa2c0;
}
.toast-progress-info {
    background: #0dcaf0;
}

/* Legacy #alerts - hidden (replaced by toasts) */
#alerts {
    display: none;
}

.login_user_icon {
    display: none;
}

/* Login modal customizations */
#loginModal .modal-title {
    color: var(--ere-green, #04552c);
}

#loginModal .btn-outline-secondary {
    border-color: #ced4da;
}

#loginModal .btn-outline-secondary:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

#loginModal .btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(4, 85, 44, 0.25);
}

/* Login modal shake animation for error feedback */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

#loginModal .modal-dialog.shake {
    animation: shake 0.4s ease-in-out;
}

/* NAVIGATION MENU: GLOBAL
====================================================================================================================================== */

@media screen and (min-width: 320px) and (max-width: 359px) {
    img.slide {
        height: 400px;
        width: 150%;
    }

    #mobile-alert {
        position: relative;
        left: auto;
        bottom: 2px;
        padding-right: 2em;
    }

}

@media screen and (min-width: 360px) and (max-width: 425px) {
    img.slide {
        height: 440px;
        width: 150%;
    }

    #mobile-alert {
        position: relative;
        left: auto;
        bottom: 2px;
        padding-right: 2em;
        padding-bottom: 1.5em;
    }
}

@media screen and (min-width: 426px) and (max-width: 767px) {
    img.slide {
        height: 530px;
        width: 150%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    #mobile-alert {
        position: relative;
        left: -50px;
    }
}

@media screen and (max-width: 767px) {
    #mobile-alert {
        position: relative;
        left: auto;
    }
}

/* Smaller tagline text below 1148px */
@media screen and (max-width: 1147px) {
    .navbar-brand {
        font-size: 0.92rem;
    }
}

/* Header menu hover emphasis: brand-green text on a soft green pill. */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible {
    color: var(--ere-green, #04552c);
    background-color: var(--ere-green-light, #e8f5ed);
    border-radius: 0.375rem;
}

/* ADMIN NAV STACK: for admins, an "Admin" link is tucked under "Dashboard"
   inside the same nav slot. The Admin link is absolutely positioned so the
   slot keeps a normal nav item's height — "Dashboard" stays on the shared
   baseline with the other links, and "Admin" hangs in the header's vertical
   slack below the nav row (the header height is set by the logo). Below the
   1048px expand breakpoint (see the navbar-toggler override above) the two
   links render as ordinary rows in the collapsed menu, where extra rows
   cost nothing. */
@media screen and (min-width: 1048px) {
    .nav-admin-stack {
        position: relative;
        text-align: center;
    }

    .nav-admin-stack .nav-admin-stack-admin {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: -0.5rem; /* tuck into Dashboard's bottom padding */
        padding: 0.1rem 0 0.2rem;
        font-size: 0.8em;
        line-height: 1;
        border-radius: 0.25rem;
    }

    .nav-admin-stack .nav-admin-stack-admin:hover {
        color: var(--ere-green, #04552c);
        background-color: var(--ere-green-light, #e8f5ed);
    }
}