/*
  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;
}

/*
  Compact settings-menu rows.
  The template's 50px line-height plus 8px padding made every list row 67px tall,
  which reads as a stack of blocks rather than a menu. 24px line + 14px padding = 52px,
  still a comfortable tap target.
*/
#menu-settings .list-group-item {
    line-height: 24px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 0 !important;
}
#menu-settings .list-group-item i {
    line-height: 24px !important;
    height: auto !important;
    width: 18px !important;
    margin-top: 0 !important;
    font-size: 15px !important;
}
#menu-settings .list-group-item span {
    line-height: 24px !important;
}

/*
  Condensed icon grid at the top of the settings menu.
  Tiles were 96px tall on 16px padding with an 8px gap; the 24px icons are kept.
*/
#menu-settings .grid {
    gap: 4px !important;
}
#menu-settings .grid > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
#menu-settings .grid > a p {
    margin-top: 2px !important;
}
/* Depth on the menu tiles: the glyph casts a soft shadow and a faint dark edge, so the
   icon sits above the tile instead of being printed on it. Same idea as the nav bar. */
#menu-settings .grid > a i {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16));
    transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 160ms ease;
}

#menu-settings .grid > a:active i {
    transform: scale(0.9);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

@media (prefers-reduced-motion: reduce) {
    #menu-settings .grid > a i { transition: none; }
}
#menu-settings .divider {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Segmented tabs on the sign-in card: Key Features / Pro Features. */
#feature-tabs .ft-tab {
    flex: 1 1 0;
    padding: 8px 10px;
    border: 1px solid #d7dee7;
    border-radius: 8px;
    background: #f3f5f8;
    color: #3d4a5c;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    cursor: pointer;
}
#feature-tabs .ft-tab.is-active {
    background: #2b679b;
    border-color: #2b679b;
    color: #ffffff;
}
#feature-tabs .ft-tab:focus-visible {
    outline: 2px solid #2b679b;
    outline-offset: 2px;
}
.ft-panel ul li { font-size: 14px; }

/*
  Sign-in call to action: sits in the blue strip under the welcome screen.
  Hidden once the user is authenticated (the footer nav takes that space then).
*/
.login-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* hug the label: 5px above and below, plus the iOS home-indicator inset */
    padding-top: 5px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
    background: #2b679b;
    /* paint blue below the bar too, so any gap under it (iOS home-indicator area when
       env() reports 0) is not a light strip; invisible when the bar already sits flush */
    box-shadow: 0 160px 0 0 #2b679b;
    z-index: 99;
}
.login-cta-btn {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff;
    line-height: 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
}
.login-cta-btn:active { background: rgba(255, 255, 255, 0.08); }
/* version on the left, update control on the right */
.login-cta {
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    gap: 12px;
}
.login-cta-version {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.login-cta-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background 140ms ease;
}
.login-cta-btn i { font-size: 13px; }
.login-cta-btn:disabled { opacity: 0.75; }
body.is-authenticated-initial .login-cta,
body.is-authenticated-final .login-cta {
    display: none !important;
}
/* keep the last card clear of the bar while signed out */
body:not(.is-authenticated-initial):not(.is-authenticated-final) .page-content {
    padding-bottom: 46px !important;
}

/* Canvas colour and bar padding are owned by styles/pwa-fixes.css. */