/**
 * Base styles - core layout, page transitions, buttons, footer navigation.
 */

html,
body {
    height: 100%;
}

body {
    overflow: hidden;
    /* prevent window scroll */
}

main {
    position: relative;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Non-kiosk header background (kiosk mode uses inline style) */
body:not(.kiosk-mode) header {
    background-color: var(--bs-secondary);
}

/* Header text shadow for better visibility */
header {
    position: relative;
    text-shadow: 0 0 5px black;
}

/* Ensure button icons are sized correctly */
svg.bi {
    width: 2.5rem;
    height: 2.5rem;
}

/* Page overlays: keep in tree for opacity transition */
.page {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
    overflow-y: auto;
    z-index: -1;
}

.page.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Centre the initial "Please wait..." content */
#page-initial {
    display: grid;
    place-items: center;
}

/* Inactive (default) button style */
.btn {
    font-weight: normal;
    filter: brightness(100%);
    transition: filter 0.2s ease-in-out, font-weight 0.2s ease-in-out;
}

/* Active button style */
.btn.active {
    font-weight: 300;
    filter: brightness(80%);
}

/* Footer navigation buttons - icon on top, text below */
footer .btn[data-page] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
}