/* ==========================================================================
   Responsive Breakpoints:
   - Desktop:   > 1024px
   - iPad Pro:  821px – 1024px
   - iPad Air:  431px – 820px
   - Phone:     ≤ 430px
   ========================================================================== */

/* CSS custom properties for header height (used by pages for top offset) */
:root {
    --header-height: 80px;
    --header-height-tablet: 100px;
    --header-height-phone: 90px;
}

/* Custom Header - replaces MudAppBar for full control */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background-color: var(--mud-palette-appbar-background, #ffffff);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0;
}

/* Header Grid Layout - True centering regardless of logo/button widths */
.header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Logo sizes - Desktop */
img.logo-xfound {
    height: 30px;
}

img.logo-vwst {
    height: 48px;
}

/* Title - desktop size set here so media queries can override */
.header-title {
    white-space: nowrap;
    font-size: 40px !important;
}

/* iPad Pro (821px – 1024px) */
@media (max-width: 1024px) {
    .header-wrapper {
        min-height: var(--header-height-tablet);
        padding: 0;
    }

    .header-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logos actions"
            "title title";
        row-gap: 8px;
        padding: 12px 16px;
    }

    .header-left {
        grid-area: logos;
        justify-content: flex-start;
        gap: 8px;
    }

    .header-center {
        grid-area: title;
        justify-content: center;
    }

    .header-right {
        grid-area: actions;
        justify-content: flex-end;
    }

    .header-title {
        white-space: normal;
        text-align: center;
    }

    /* Adjust logo sizes for iPad Pro */
    img.logo-xfound {
        height: 28px;
    }

    img.logo-vwst {
        height: 36px;
    }

    /* Smaller title on iPad Pro */
    .header-center .mud-typography {
        font-size: 1.8rem !important;
    }
}

/* iPad Air (391px – 820px) */
@media (max-width: 820px) {
    .header-wrapper {
        min-height: var(--header-height-tablet);
    }

    .header-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logos actions"
            "title title";
        row-gap: 6px;
        padding: 10px 12px;
    }

    .header-left {
        grid-area: logos;
        justify-content: flex-start;
    }

    .header-right {
        grid-area: actions;
        justify-content: flex-end;
    }

    .header-center {
        grid-area: title;
        justify-content: center;
    }

    /* Smaller title on iPad Air */
    .header-center .mud-typography {
        font-size: 1.4rem !important;
    }

    /* Adjust logo sizes */
    img.logo-xfound {
        height: 24px;
    }

    img.logo-vwst {
        height: 32px;
    }

    /* Bottom app bar: stack links vertically on narrow tablets */
    .footer-links {
        flex-direction: column;
        gap: 2px;
    }
}

/* Phone (≤ 430px) */
@media (max-width: 430px) {
    .header-wrapper {
        min-height: var(--header-height-phone);
    }

    .header-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logos actions"
            "title title";
        row-gap: 4px;
        padding: 8px 10px;
    }

    .header-left {
        grid-area: logos;
        justify-content: flex-start;
    }

    .header-right {
        grid-area: actions;
        justify-content: flex-end;
    }

    .header-center {
        grid-area: title;
        justify-content: center;
    }

    /* Smaller title on phone */
    .header-center .mud-typography {
        font-size: 1.1rem !important;
    }

    /* Adjust logo sizes for phone - smallest */
    img.logo-xfound {
        height: 18px;
    }

    img.logo-vwst {
        height: 24px;
    }
}

/* ==========================================================================
   Drawer panels - pure CSS top offset (no JS flicker)
   ========================================================================== */
.main-drawer {
    padding-top: 40px;
    top: calc(var(--header-height) + 10px) !important;
}

.detail-drawer {
    top: calc(var(--header-height) + 10px) !important;
}

@media (max-width: 1024px) {
    .main-drawer {
        top: calc(var(--header-height-tablet) + 2px) !important;
    }
    .detail-drawer {
        top: calc(var(--header-height-tablet) + 2px) !important;
    }
}

@media (max-width: 430px) {
    .main-drawer {
        top: calc(var(--header-height-phone) + 2px) !important;
    }
    .detail-drawer {
        top: calc(var(--header-height-phone) + 2px) !important;
    }
}

/* ==========================================================================
   Drawer toggle buttons - pure CSS positioning (no JS flicker)
   ========================================================================== */
.drawer-toggle-btn {
    position: fixed !important;
    top: calc(var(--header-height) + 30px);
    z-index: 9999;
    width: 32px;
    height: 32px;
    min-width: 32px !important;
    min-height: 32px !important;
    opacity: 0.7;
}

.drawer-toggle-left {
    left: 20px;
    right: auto;
}

.drawer-toggle-right {
    right: 20px;
    left: auto !important;
}

@media (max-width: 1024px) {
    .drawer-toggle-btn {
        top: calc(var(--header-height-tablet) + 18px);
    }
}

@media (max-width: 430px) {
    .drawer-toggle-btn {
        top: calc(var(--header-height-phone) + 18px);
    }
}

/* ==========================================================================
   Responsive Drawer width
   ========================================================================== */
@media (max-width: 1024px) {
    .mud-drawer--left.mud-drawer--open-responsive-lg {
        width: 320px !important;
    }
}

@media (max-width: 820px) {
    .mud-drawer--left.mud-drawer--open-responsive-lg,
    .mud-drawer--left.mud-drawer--open-responsive-md {
        width: 280px !important;
    }
}

@media (max-width: 430px) {
    .mud-drawer--left.mud-drawer--open-responsive-lg,
    .mud-drawer--left.mud-drawer--open-responsive-md {
        width: 100% !important;
    }
}

/* ==========================================================================
   Bottom app bar / footer responsive
   ========================================================================== */

/* Desktop: both rows side-by-side in one line */
.footer-row-top,
.footer-row-bottom {
    display: flex;
    align-items: center;
}

.footer-row-top {
    flex: 1;
}


/* Phone: stack footer into two rows */
@media (max-width: 430px) {
    .footer-bar .mud-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        padding: 8px 8px 10px;
        min-height: 70px;
        height: auto;
    }

    .footer-row-top {
        width: 100%;
        justify-content: center;
        gap: 8px;
        font-size: 0.75rem;
    }

    .footer-row-bottom {
        width: 100%;
        justify-content: center;
        padding-top: 6px;
    }
}

/* Increase bottom padding on the main content so taller footer doesn't overlap */
@media (max-width: 430px) {
    .mud-main-content {
        padding-bottom: 90px !important;
    }
}