/* Sky widget integration styles for weather.html */

/* Ensure Sky tab container fills available space */
#w-sky {
    position: relative;
    min-height: 600px;
    height: 70vh;
    max-height: 900px;
    background: #0a0e14;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate; /* Create stacking context */
  }
  
  /* Sky mount point fills the container */
  #skyMount {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  /* Normal mode: contained within tab */
  #skyMount .sky-root {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  
  /* When sky-root itself is in fullscreen */
  .sky-root:fullscreen {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #000 !important;
  }
  
  /* When sky-root is inside a fullscreen parent */
  :fullscreen .sky-root {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Canvas wrapper in fullscreen */
  :fullscreen .sky-canvas-wrap,
  .sky-root:fullscreen .sky-canvas-wrap {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Canvas in fullscreen */
  :fullscreen .sky-canvas,
  .sky-root:fullscreen .sky-canvas {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }
  
  /* Hide Sky tab content by default */
  #w-sky.widget-tab-content:not(.active) {
    display: none;
  }
  
  #w-sky.widget-tab-content.active {
    display: block;
  }
  
  /* Sky card should be on top */
  #w-sky sky-card,
  :fullscreen sky-card,
  .sky-root:fullscreen sky-card {
    position: fixed !important;
    z-index: 10000;
  }
  
  /* UI components positioning */
  #w-sky ui-player {
    position: absolute !important;
    z-index: 100;
  }
  
  #w-sky ui-side-toolbar {
    position: absolute !important;
    z-index: 100;
  }
  
  #w-sky ui-bottom-toolbar {
    position: absolute !important;
    z-index: 100;
  }
  
  /* In fullscreen, UI components are absolute */
  :fullscreen ui-player,
  .sky-root:fullscreen ui-player {
    position: absolute !important;
    z-index: 100;
  }
  
  :fullscreen ui-side-toolbar,
  .sky-root:fullscreen ui-side-toolbar {
    position: absolute !important;
    z-index: 100;
  }
  
  :fullscreen ui-bottom-toolbar,
  .sky-root:fullscreen ui-bottom-toolbar {
    position: absolute !important;
    z-index: 100;
  }
  
  /* Status message */
  #skyMount .sky-status {
    position: absolute !important;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
  }