/**
 * Touch Menu — Stylesheet
 * Desktop: right sidebar (60px), slide-outs animate left
 * Mobile (≤850px): bottom bar (45px), slide-outs animate up
 *
 * Uses app.css CSS variables where possible:
 *   --dark-green, --lt-dark-green, --teal, --teal-dark, --teal-darkest
 */

/* ─── Slide-out panel ──────────────────────────────── */
.slideOut {
    position: relative;
    right: -80px;
    opacity: 0;
    top: calc(50% - 40px);
    z-index: -2;
    width: 250px;
    text-align: center;
    box-shadow: -5px 4px 16px -4px rgba(0, 0, 0, 0.52);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    overflow: hidden;
    color: white;
    font-weight: bold;
    will-change: transform, opacity;
}

@media only screen and (max-width: 850px) {
    .slideOut {
        position: fixed;
        right: auto;
        top: auto;
        transform: translate(-50%);
        left: 50%;
        bottom: -160px;
        width: 95vw;
        box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.35);
        border-top-left-radius: 12px;
        border-bottom-left-radius: 0;
        border-top-right-radius: 12px;
    }
}

/* ─── Sub-buttons ──────────────────────────────────── */
.mainButton .subButton:first-child {
    padding-top: 10px;
}

.mainButton .subButton:last-child {
    padding-bottom: 10px;
}

.subButton {
    padding: 10px 0 0 0;
    background: url(data:image/png;base64,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);
    background-color: rgba(16, 16, 16, 0.65);
    transition: background-color 500ms linear;
}

.subButton:hover,
.subButton:active {
    background-color: rgba(0, 91, 107, 0.60);
    cursor: pointer;
}

.subButton .subButton {
    background-color: rgba(2, 48, 58, 0.40);
}

.subButton .subButton:hover,
.subButton .subButton:active {
    background-color: var(--lt-dark-green);
}

/* ─── Menu track container (sidebar / bottom bar) ──── */
#menuTrackContainer {
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    z-index: 10;
}

@media only screen and (max-width: 850px) {
    #menuTrackContainer {
        top: auto;
        width: 100%;
        height: 45px;
        margin-bottom: env(safe-area-inset-bottom);
        bottom: 0;
    }
}

/* ─── Menu track (the visible bar) ─────────────────── */
#menuTrack {
    width: 60px;
    height: 100vh;
    font-weight: 400;
    color: rgb(0, 127, 185);
    background: url(data:image/png;base64,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);
    background-color: rgba(16, 16, 16, 0.9);
    box-shadow: -5px 1px 15px -5px rgba(0, 0, 0, 0.63);
}

@media only screen and (max-width: 850px) {
    #menuTrack {
        width: 100vw;
        height: 45px;
    }
}

/* ─── White underlay behind buttons (z-index backdrop) ─ */
.solidWhiteUnderlay {
    width: 60px;
    height: 100vh;
    position: absolute;
    color: white;
    top: 0;
    right: 0;
    background-color: white;
    z-index: -1;
}

@media only screen and (max-width: 850px) {
    .solidWhiteUnderlay {
        width: 100vw;
        height: 45px;
    }
}

/* ─── Main buttons ─────────────────────────────────── */
@media only screen and (max-width: 850px) {
    .mainButton {
        float: left;
    }
}

.mainBtnContent {
    z-index: 200;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer;
}

@media only screen and (max-width: 850px) {
    .mainBtnContent {
        transform: translate(-1%, -50%);
        width: 100%;
    }
}

.mainBtnContent .buttonIcon,
.mainBtnContent .buttonLabel {
    position: fixed;
    width: 60px;
}

.mainBtnContent .buttonIcon {
    top: -45px;
}

@media only screen and (max-width: 850px) {
    .mainBtnContent .buttonIcon {
        top: -27px;
    }
}

.mainBtnContent .buttonIcon img {
    width: 40px;
}

.mainBtnContent .buttonLabel {
    top: -2px;
    font-size: 8px;
    text-transform: uppercase;
}

@media only screen and (max-width: 850px) {
    .mainBtnContent .buttonIcon img {
        width: 28px;
    }
}

/* ─── Button count sizing (desktop = height, mobile = width) ─ */
.b1 { height: calc(100vh - 40%); }
.b2 { height: calc(100vh - 50%); }
.b3 { height: calc(100vh - 70%); }
.b4 { height: calc(100vh - 73%); }
.b5 { height: calc(100vh - 79%); }
.b6 { height: calc(100vh - 79%); }

@media only screen and (max-width: 850px) {
    .b1, .b2, .b3, .b4, .b5, .b6 {
        width: calc(100vw - 55%);
        height: 60px;
    }
    .b3 { width: calc(100vw - 70%); }
    .b4 { width: calc(100vw - 77%); }
    .b5 { width: calc(100vw - 81%); }
    .b6 { width: calc(100vw - 81%); }
}

/* ─── Accordion (hidden by default) ────────────────── */
#menuTrackContainer .tm_accordion {
    display: none;
}

/* ─── Main content area ────────────────────────────── */
#mainContent {
    width: calc(100vw - 60px);
    height: 100vh;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    padding: 2rem;
}

@media only screen and (max-width: 850px) {
    #mainContent {
        width: 100vw;
        height: auto;
        min-height: 100%;
        padding-bottom: 60px; /* space for bottom bar */
    }
}