/* Court Designer page styles - Full Screen Layout */

/* Court Designer isolation and full-screen setup */
.court-designer-isolation {
    position: relative;
    z-index: 1;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
    display: block;
}

/* React app container - full available space */
#root {
    height: 100% !important;
    width: 100% !important;
    position: relative;
    overflow: hidden;
    display: block;
}

/* Ensure the court designer takes full screen */
.court-designer-body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Full height layout support */
.court-designer-layout {
    height: 100vh !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

.court-designer-nav {
    flex-shrink: 0 !important;
}

.court-designer-content {
    flex: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    height: 0 !important; /* Forces flex child to not exceed container */
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .court-designer-body {
        height: -webkit-fill-available; /* iOS Safari fix */
        height: 100vh;
    }
    
    .court-designer-layout {
        height: -webkit-fill-available; /* iOS Safari fix */
        height: 100vh;
    }
}

/* Ensure proper mobile navigation handling */
@media only screen and (max-width: 991px) {
    body.court-designer-page {
        padding-top: 0;
    }
    
    .court-designer-nav .ui-navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navbar-bg, #1a3054);
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
}

/* Remove any margin/padding that might interfere with full-screen layout */
.court-designer-page * {
    box-sizing: border-box;
}

/* The embedded court designer sizes itself to this, rather than to the viewport. It sits
   between the site header and footer, so a viewport height here would always overflow the
   page. Adjust this one value to change how tall the app is; no rebuild is needed. */
.court-designer-app-root {
    --court-designer-min-height: 34rem;
    max-width: 100%;
    overflow-x: hidden;
}