/*
  FOUC (Flash of Unauthenticated Content) Prevention
  - By default, hide authenticated content.
  - The inline script in index.html adds 'is-authenticated-initial' if the user
    was previously logged in, showing the authenticated layout immediately.
  - The main script replaces this with 'is-authenticated-final' after Firebase
    confirms the auth state, ensuring everything is correctly displayed.
*/

/* Default State (Logged Out) */
.authenticated-content,
#footer-bar {
    display: none;
}

#app-description,
#login-view {
    display: block;
}

/* Initial Logged-In State (set by inline script) */
body:not(.is-authenticated-initial):not(.is-authenticated-final) #settings-button {
    display: none; /* Hide settings button when logged out */
}

body.is-authenticated-initial .authenticated-content,
body.is-authenticated-final .authenticated-content,
body.is-authenticated-final #header-bar-logged-in {
    display: block;
}

body.is-authenticated-initial #footer-bar,
body.is-authenticated-final #footer-bar {
    display: flex;
}

body.is-authenticated-initial #app-description,
body.is-authenticated-initial #login-view,
body.is-authenticated-final #app-description,
body.is-authenticated-final #login-view {
    display: none;
}

/*
  Custom snackbar for top-center position.
  This is designed to work with Bootstrap's toast component.
  It overrides the default bottom positioning.
*/
.snackbar-top-center.toast {
    position: fixed; /* Ensure positioning is relative to the viewport */
    top: calc(env(safe-area-inset-top) + 20px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -150%); /* Start off-screen */
    transition: transform 350ms ease;
}

.snackbar-top-center.toast.show {
    transform: translate(-50%, 0); /* Slide into view */
}

/*
  Custom snackbar for a safe-area-aware bottom position.
  It sits above the footer bar.
*/
.snackbar-bottom-safe.toast {
    position: fixed; /* Ensure positioning is relative to the viewport */
    bottom: calc(60px + env(safe-area-inset-bottom) + 10px); /* 60px footer + safe area + 10px margin */
    left: 10px;
    right: 10px;
    transform: translateY(150%); /* Start off-screen */
    transition: transform 350ms ease;
}

.snackbar-bottom-safe.toast.show {
    transform: translateY(0); /* Slide into view */
}


/* Override template's fixed height for modals to allow content-based height */
.menu-box-modal {
    height: auto;
    max-height: 90vh; /* Prevent modal from being taller than the viewport */
}

/* Fix for menu visibility on load. Ensures menu is behind header by default. */
.menu:not(.menu-active) {
    z-index: 98;
}
/* When active, bring it to the front */
.menu.menu-active {
    z-index: 102;
}

/* Header Bar and Settings Menu Styles */
#header-bar-logged-in {
    background-color: #2b679b !important;
}

/* Default state for the settings menu */
#menu-settings:not(.menu-active) {
    margin-top: -10px; /* Push it further up when hidden */
}

/* Define size and position for the settings menu at all times */
#menu-settings {
    width: 260px;
    right: 10px;
    left: auto;
}
/* Active state for the settings menu */
#menu-settings.menu-active {
    margin-top: 55px; /* Position it correctly below the header when shown */
}

/*
  Definitive Active State for Footer Buttons:
  This rule uses a highly specific selector to override all other styles
  and ensure a consistent blue background with white text/icons.
*/
#footer-bar.footer-bar-1 a.active-nav,
#footer-bar.footer-bar-1 a.active-nav {
    background-color: #4A89DC !important;
    color: white !important;
    /* Remove any gradients that might be inherited from other styles */
    background-image: none !important;
}

#footer-bar.footer-bar-1 a.active-nav span,
#footer-bar.footer-bar-1 a.active-nav i {
    background: none !important; /* Ensure children have no background */
    color: white !important;
}

/*
  Overscroll Color Fix:
  This overrides the template's default gray background gradient, ensuring
  the body's blue color is visible in the PWA overscroll/bounce area.
*/
[data-gradient=body-default] #page {
    background-image: none !important;
}

/*
  Page Background Fix:
  Sets the background of the main #page container to match the .page-content.
  This prevents a "flash of blue" from the body's background color during
  page transitions or slow content loads.
*/
#page {
    background-color: #f0f0f0;
}