/* ==================================================
   OCTOPUS VIEWER overrides to ensure Safari works
   ================================================== */

/* 1. ROOT: Establish the vertical stack */
octopusviewer-viewer {
    display: flex !important;
    flex-direction: column !important;
    /* Force a viewport-relative height */
    height: 75vh !important; 
    min-height: 600px !important;
    width: 100% !important;
}

/* 2. BODY: Force Horizontal Layout (Row) */
.octopusviewer-body {
    display: flex !important;
    flex-direction: row !important; 
    flex: 1 1 auto !important;      
    height: 100% !important;        
    min-height: 0 !important;       
    width: 100% !important;
    overflow: hidden !important;    
}

/* 3. SIDEBARS: Prevent squishing */
.sidebar, 
.sidebar-left, 
.sidebar-right {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    flex-shrink: 0 !important;      
}

/* 4. MAIN IMAGE CONTAINER */
.octopusviewer-media-view {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;      
    height: 100% !important;
    width: 100% !important;         
    min-width: 0 !important;        
    min-height: 0 !important;
    position: relative !important;
}

/* 5. INSIDE THE MEDIA VIEW */
.octopusviewer-media-view-main {
    flex: 1 1 auto !important;
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;       
}

/* 6. OPENSEADRAGON MAP ENGINE */
octopusviewer-openseadragon,
.openseadragon-container, 
.openseadragon-canvas {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;  /* Anchor to parent */
    top: 0;
    left: 0;
}

/* 7. Canvas Safety */
canvas {
    width: 100%;
    height: 100%;
}