/* PWA shell.
   Mirrors the StickyMobile template's own app shell (code/actions.html + styles/style.css):
   the document scrolls normally, the header and footer bars are position:fixed, and each
   bar is padded by the device's safe-area inset so its colour runs to the screen edge. */

/* One colour for the whole frame: header, nav bar and the canvas behind/below them are all
   brand blue, so whatever the device reserves below the bar cannot read as lost space. */
html,
body {
    background-color: #2b679b;
    min-height: 100%;
}

/* Content sits between the two fixed bars. */
.page-content {
    padding-top: calc(50px + env(safe-area-inset-top) * 0.8 + 10px) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom) + 20px) !important;
}

/* Top bar, built as the mirror of the nav bar: same gradient reversed (dark at the top
   edge, lighter where it meets the content), a lit edge facing the page and a shadow
   thrown down onto it. Looks like one solid piece of the same material. */
#header-bar-logged-in {
    background-color: #2b679b !important;
    background-image: linear-gradient(180deg, #24598a 0%, #33749f 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16),
                0 8px 20px rgba(8, 32, 56, 0.28) !important;
}

/* Same bevel treatment the nav icons get. */
#header-bar-logged-in i {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

#header-bar-logged-in i,
#header-bar-logged-in .font-semibold {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

#header-bar-logged-in a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: opacity 140ms ease;
}

#header-bar-logged-in a:active {
    opacity: 0.72;
}

/* Bottom nav bar. A 60px row of buttons with the home-indicator inset padded out below it
   in the same colour; box-sizing:content-box keeps the buttons a true 60px tall. The bar
   itself is a soft vertical gradient with a lit top edge and a shadow cast upward, so it
   reads as a solid piece sitting in front of the page rather than a flat block. */
#footer-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: content-box !important;
    height: 60px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background-color: #2b679b !important;
    background-image: linear-gradient(180deg, #33749f 0%, #24598a 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 -8px 20px rgba(8, 32, 56, 0.28) !important;
}

/* White buttons on the blue bar. */
#footer-bar a,
#footer-bar a i,
#footer-bar a span,
#footer-bar a p {
    color: #ffffff !important;
}

#footer-bar a {
    position: relative;
    box-sizing: border-box !important;
    height: 60px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: nav-pop 340ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

#footer-bar a:nth-child(2) { animation-delay: 35ms; }
#footer-bar a:nth-child(3) { animation-delay: 70ms; }
#footer-bar a:nth-child(4) { animation-delay: 105ms; }
#footer-bar a:nth-child(5) { animation-delay: 140ms; }

@keyframes nav-pop {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Bevel on the glyph: dark edge below, faint light edge above, soft cast shadow. */
#footer-bar a i {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55),
                 0 -1px 0 rgba(255, 255, 255, 0.18),
                 0 2px 5px rgba(0, 0, 0, 0.40);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 180ms ease;
}

/* Press: the glyph dips and the tile lights up. */
#footer-bar a:active i {
    transform: scale(0.88);
}

#footer-bar a:active {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* Selected tab: raised gradient tile, glowing edge, glyph lifted clear of the surface. */
/* Duplicated selector matches the gas-tracker rule it has to outrank. */
#footer-bar.footer-bar-1 a.active-nav,
#footer-bar a.active-nav {
    background-color: #4a89dc !important;
    background-image: linear-gradient(180deg, #64a2ec 0%, #3f7ecb 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                inset 0 -1px 0 rgba(0, 0, 0, 0.20),
                0 0 14px rgba(96, 162, 240, 0.45) !important;
}

#footer-bar a.active-nav i {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55))
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.40));
}

#footer-bar a.active-nav span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Divider between buttons, so the row reads as separate keys instead of one strip.
   Edge-to-edge lines look harsh, so the line fades out at both ends. */
#footer-bar a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.22) 45%,
                rgba(255, 255, 255, 0.22) 55%,
                rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* The active tile is its own edge; a divider against it looks like a stray line. */
#footer-bar a.active-nav::before,
#footer-bar a.active-nav + a::before {
    display: none;
}

/* Long page names in the header truncate instead of shoving the menu button aside. */
#header-bar-logged-in a {
    min-width: 0;
}

#header-bar-logged-in .font-semibold {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gold pip marking the live tab. */
#footer-bar a.active-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 16px;
    height: 3px;
    margin-left: -8px;
    border-radius: 2px;
    background: #ffd166;
    box-shadow: 0 0 8px rgba(255, 209, 102, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    #footer-bar a,
    #footer-bar a i {
        animation: none;
        transition: none;
    }
}

/* Login / Register bar: same treatment while signed out. */
.login-cta {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
    background: #2b679b !important;
}

/* The experimental safe-area version readout would land behind the bar; drop it. */
#safe-area-version {
    display: none !important;
}

/* ---- Active car switcher (home + maintenance) ---- */
#car-switcher { margin-bottom: 12px; }
.car-sw {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 12px; border-radius: 12px; background: #fff;
    border: 1px solid #e6eaef; box-shadow: 0 1px 2px rgba(16,24,40,.05);
    text-align: left;
}
.car-sw-icon {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    background: linear-gradient(180deg,#eef3f9 0%,#e2e9f1 100%);
    color: #2b679b; display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.car-sw-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.car-sw-name { font-size: 14px; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-sw-sub { font-size: 11px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-sw-chev { font-size: 11px; color: #9ca3af; transition: transform 200ms ease; }
#car-switcher.is-open .car-sw-chev { transform: rotate(180deg); }

.car-sheet { display: none; margin-top: 6px; background: #fff; border: 1px solid #e6eaef; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(16,24,40,.08); }
#car-switcher.is-open .car-sheet { display: block; }
.car-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-bottom: 1px solid #f1f3f5; background: #fff; }
.car-opt:last-of-type { border-bottom: 0; }
.car-opt-name { font-size: 14px; font-weight: 700; color: #111827; }
.car-opt-sub { font-size: 11px; color: #6b7280; }
.car-opt-check { margin-left: auto; color: #059669; font-size: 13px; }
.car-sheet-manage { display: block; padding: 11px 12px; font-size: 13px; font-weight: 700; color: #2b679b; background: #f7f9fb; border-top: 1px solid #eef1f4; }

/* ---- reminder badges ---- */
.gt-menu-badge {
    position: absolute; top: -3px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.gt-tile-badge {
    position: absolute; top: 2px; right: 50%; margin-right: -30px;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}