/* Full-Screen Mode Styles
   Used for RFP Stage 3 Answer Questions full-screen mode
   
   styles/components/fullscreen.css
*/

/* Full-screen mode styles */
.fullscreen-mode-active {
  /* Applied to body element when in full-screen mode */
}

.fullscreen-hidden {
  display: none !important;
}

.fullscreen-content {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: var(--surface-default, #ffffff) !important;
  overflow: hidden !important;
}

.fullscreen-content .rfp-answer-questions-stage {
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0px 8px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Adjust control pane for full-screen */
.fullscreen-content .control-pane-container {
  flex: 0 0 auto;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
}

/* Adjust grid container for full-screen */
.fullscreen-content .grid-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Adjust topic tabs for full-screen */
.fullscreen-content .grid-tabs-container {
  flex: 0 0 auto;
  height: 40px;
  min-height: 40px;
}


/* Navigation prevention overlay */
.fullscreen-navigation-blocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  display: none;
}

.fullscreen-mode-active .fullscreen-navigation-blocker {
  display: block;
}

/* Full-screen mode specific adjustments for AG Grid */
.fullscreen-content .ag-root-wrapper {
  border: none !important;
}

.fullscreen-content .ag-header {
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1)) !important;
}

/* Ensure topic tabs are properly styled in full-screen */
.fullscreen-content .grid-tabs-container {
  background: var(--surface-background, #f8f9fa);
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
  padding: 0 8px;
}

/* Full-screen mode button states */
.fullscreen-btn[variant="primary"] sl-icon,
.fullscreen-btn[variant="primary"]::part(base) sl-icon {
  color: white !important;
  opacity: 1 !important;
  display: inline-block !important;
}

.fullscreen-btn sl-icon {
  transition: all 0.3s ease;
  opacity: 1;
}

/* Ensure icon is visible on Shoelace primary button */
sl-button.fullscreen-btn[variant="primary"] sl-icon {
  --color: white;
  color: white !important;
}

/* Prevent scrolling on body when in full-screen mode */
.fullscreen-mode-active {
  overflow: hidden;
}