/**
 * @file
 * Defines the flexbox-based layout for the main viewer and panel container.
 */

/* Main container for the viewer and the side panel. */
#wdb-main-container {
  display: flex;
  flex-direction: row;
  /* Arrange elements horizontally. */
  min-height: 400px;
  /* It's good to specify a minimum height. */
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

/* The OpenSeadragon viewer itself. */
#openseadragon-viewer {
  flex: 1 1 auto;
  /* default: fill remaining space when no saved layout */
  min-width: 200px;
  /* Minimum width. */
  background-color: #000;
  position: relative;
  z-index: 1;
  /* ensure #wdb-resizer (z-index:3000) sits above */
}

/* The title of the annotation panel. */
#wdb-annotation-panel-title {
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #ccc;
  background-color: #f8f8f8;
  flex-shrink: 0;
  /* The title should not shrink. */
}

/* The right-side panel, which is a vertical flex container. */
#wdb-annotation-info-panel {
  display: flex;
  flex-direction: column;
  /* Arrange child elements vertically. */
  padding: 0;
  min-width: 270px;
  flex: 0 0 270px;
  /* default: 270px panel */
  /* Split.js制御下で幅を固定 */
  height: 100%;
  overflow-y: hidden;
  /* avoid covering resizer-h with scrolling layer */
  overflow-x: hidden;
  /* prevent children from widening the panel */
  /* Show scrollbar if content overflows. */
  font-size: 0.8rem;
  /* Contain paint to avoid ghosting during fast resizes */
  contain: paint;
  /* Enable container queries so inner layout can respond to panel width */
  container-type: inline-size;
}

/* Content areas within the side panel. */
#wdb-annotation-panel-content,
#wdb-full-text-content {
  padding: 4px 10px 10px 10px;
  flex-grow: 1;
  /* Use all remaining space. */
  overflow-y: auto;
  /* scrolling happens inside content areas */
  overflow-x: hidden;
  /* avoid horizontal scrollbars in panel */
  min-width: 0;
  /* allow shrink inside flex item */
  word-break: break-word;
  /* break long tokens */
  overflow-wrap: anywhere;
  /* allow breaks even without spaces */
  /* Also scroll if content is long. */
  font-size: 0.9rem;
  line-height: 1.5rem;
}

/* Upper panel (Annotation Details). */
#wdb-annotation-details-area {
  flex: 1 1 70%;
  /* Set initial height to 70%. */
  display: flex;
  flex-direction: column;
  min-height: 100px;
  /* Minimum height. */
  overflow: hidden;
  min-width: 0;
  /* allow shrink to avoid overflow */
  /* To enable scrolling on child elements. */
}

/* Control the display order in the annotation panel. */
.annotation-details-popup {
  display: flex;
  flex-direction: column;
}

/* Word block at the top. */
.annotation-detail-word {
  order: 1;
}

/* Sign block second. */
.annotation-detail-sign {
  order: 2;
}

/* Constituent signs list third. */
.annotation-detail-constituent-signs {
  order: 3;
}

/* New wrapper for right side (sign + constituents) used in wide split mode; harmless default elsewhere. */
.annotation-detail-right {
  display: block;
  order: 2;
  /* appear after .annotation-detail-word (order:1) in base flex layout */
}

#wdb-annotation-info-panel .annotation-detail-constituent-signs h3 {
  margin: 0;
  padding: 0;
}

/* Lower panel (Full Text). */
#wdb-full-text-area {
  flex: 1 1 30%;
  /* Set initial height to 30%. */
  display: flex;
  flex-direction: column;
  min-height: 100px;
  /* Minimum height. */
  overflow: hidden;
  min-width: 0;
  /* allow shrink to avoid overflow */
  /* To enable scrolling on child elements. */
}

/* Styles for panel titles and content. */
#wdb-annotation-info-panel h3 {
  margin: 4px;
  padding: 0 6px;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
  /* Title area should not shrink. */
  font-weight: bold;
  font-size: 0.9rem;
}

/* Promote toolbar to its own layer to reduce repaint artifacts */
#wdb-panel-toolbar {
  will-change: transform;
  transform: translateZ(0);
  padding-right: 2px;
  /* keep visual right spacing for toolbar buttons */
}


/* Handle for horizontal resizing (between viewer and panel). */
#wdb-resizer {
  flex-basis: 6px;
  /* Handle width. */
  flex-shrink: 0;
  /* Prevent the handle from shrinking. */
  background-color: #eee;
  cursor: col-resize;
  /* Set mouse cursor to horizontal resize. */
  height: 100%;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  /* Enable touch/pen drag with Pointer Events */
  touch-action: none;
  position: relative;
  /* allow hit-area pseudo to extend */
  z-index: 3000;
  /* ensure above viewer overlays/controls */
  pointer-events: auto;
}

#wdb-resizer:hover {
  background-color: #ddd;
}

/* Touch feedback when pressing the gutter */
#wdb-resizer:active,
#wdb-resizer:active::before {
  background-color: #ddd;
}

/* Expand horizontal gutter hit area for touch (visual width stays 6px) */
#wdb-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  /* expand into viewer side */
  right: -12px;
  /* expand into panel side */
  cursor: col-resize;
  background: transparent;
  touch-action: none;
  pointer-events: auto;
}

/* Handle for vertical resizing (between annotation details and full text). */
#wdb-resizer-horizontal {
  flex-basis: 6px;
  /* Handle height. */
  min-height: 6px;
  flex-shrink: 0;
  background-color: #eee;
  cursor: row-resize;
  /* Set mouse cursor to vertical resize. */
  width: 100%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: relative;
  z-index: 3000;
  /* ensure above surrounding content */
  pointer-events: auto;
  touch-action: none;
}

#wdb-resizer-horizontal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: -12px;
  /* expand hit area to ~30px without changing visual size */
  cursor: row-resize;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
}

#wdb-resizer-horizontal:hover {
  background-color: #ddd;
}

/* Touch feedback when pressing the vertical gutter */
#wdb-resizer-horizontal:active,
#wdb-resizer-horizontal:active::before {
  background-color: #ddd;
}

/* Split.js removed: no gutter styles needed */

/* ---------------------------------------------- */
/* Wide panel: 2-column layout for details area   */
/* When the right panel is >= 540px wide          */
/* ---------------------------------------------- */
@container (min-width: 540px) {

  /* Prevent outer content from scrolling; let inner columns handle it */
  #wdb-main-container.layout--split #wdb-annotation-panel-content {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* Ensure details area can shrink so inner scroll works */
  #wdb-main-container.layout--split #wdb-annotation-details-area {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  /* Split mode only: convert details content to a 2-column grid */
  #wdb-main-container.layout--split #wdb-annotation-details-area .annotation-details-popup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50:50 */
    grid-template-rows: 1fr;
    /* single row: left word, right (sign+cons) */
    grid-template-areas: "word right";
    column-gap: 0;
    /* draw divider via border */
    row-gap: 0;
    /* eliminate gap so left border appears continuous */
    align-items: start;
    height: 100%;
    min-height: 0;
    /* allow inner areas to shrink and scroll */
    overflow: hidden;
    /* prevent double scroll; let inner areas scroll */
  }

  /* Area placement */
  #wdb-main-container.layout--split #wdb-annotation-details-area .annotation-detail-word {
    grid-area: word;
    min-height: 0;
    height: 100%;
    overflow: auto;
    /* scroll only the Word column */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Keep Word header visible while left column scrolls */
  #wdb-main-container.layout--split #wdb-annotation-details-area .annotation-detail-word .item-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
  }

  /* Right column wrapper holds Sign (sticky) + Constituents (flow) */
  #wdb-main-container.layout--split #wdb-annotation-details-area .annotation-detail-right {
    grid-area: right;
    display: block;
    min-height: 0;
    height: 100%;
    overflow: auto;
    /* unified scroll on right side */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-left: 1px solid #ccc;
    padding-left: 10px;
  }

  /* Keep the small Sign header area visible when right column scrolls */
  #wdb-main-container.layout--split #wdb-annotation-details-area .annotation-detail-right .annotation-detail-sign .item-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
  }
}

/* ------------------------------ */
/* Responsive layout extensions   */
/* ------------------------------ */

/* Split mode: default (desktop). Nothing extra needed beyond base rules. */

/* Stacked mode: viewer over panel (mobile portrait). */
#wdb-main-container.layout--stacked {
  flex-direction: column;
}

#wdb-main-container.layout--stacked #wdb-resizer {
  display: none;
  /* Hide vertical resizer in stacked mode. */
}

#wdb-main-container.layout--stacked #openseadragon-viewer {
  flex: 1 1 70%;
  /* give more height to viewer on stacked */
  /* Allow proper fill based on container height without clamping to 200px */
  min-height: 0;
}

#wdb-main-container.layout--stacked #wdb-annotation-info-panel {
  flex: 1 1 30%;
  min-height: 0;
  /* Fixed 50:50 columns under toolbar */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 50:50 */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "toolbar toolbar"
    "details fulltext";
  column-gap: 0;
  /* no gap between columns (we draw a border) */
  row-gap: 8px;
  /* keep vertical spacing */
  /* Let inner columns scroll individually to avoid double scrollbars */
  overflow: hidden;
}

/* Assign grid areas */
#wdb-main-container.layout--stacked #wdb-panel-toolbar {
  grid-area: toolbar;
}

#wdb-main-container.layout--stacked #wdb-annotation-details-area {
  grid-area: details;
}

#wdb-main-container.layout--stacked #wdb-full-text-area {
  grid-area: fulltext;
}

/* Make sure children behave as blocks within grid (avoid flex-basis interference) */
#wdb-main-container.layout--stacked #wdb-annotation-details-area,
#wdb-main-container.layout--stacked #wdb-full-text-area {
  /* Allow shrink inside grid row so inner content can scroll */
  min-height: 0;
}

/* Vertical divider between Annotation and Full Text in stacked mode */
#wdb-main-container.layout--stacked #wdb-full-text-area {
  border-left: 1px solid #ccc;
}

/* Hide resizer in stacked (no drag) */
#wdb-main-container.layout--stacked #wdb-resizer-horizontal {
  display: none;
}

/* Drawer resize handle removed (drag disabled) */


/* Drawer mode: panel overlays from bottom; viewer fills main area. */
#wdb-main-container.layout--drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Stack toolbar host and viewer */
}

/* Sticky toolbar host that will contain #wdb-panel-toolbar in drawer mode */
#wdb-toolbar-host {
  position: sticky;
  top: 0;
  z-index: 900;
  /* below drawer panel (1000) but above viewer */
}

#wdb-main-container.layout--drawer #wdb-resizer,
#wdb-main-container.layout--drawer #wdb-resizer-horizontal {
  display: none;
  /* Hide both resizers in drawer mode. */
}

/* Hide OpenSeadragon controls and navigator in drawer mode (mobile) */
#wdb-main-container.layout--drawer .openseadragon-container .openseadragon-controls,
#wdb-main-container.layout--drawer .openseadragon-container .openseadragon-navigator {
  display: none !important;
}

#wdb-main-container.layout--drawer #wdb-annotation-info-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: height .25s ease, opacity .25s ease, transform .25s ease;
  transform: translateY(6px);
  z-index: 1000;
  background: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  /* Inner fixed layout for details/fulltext: 50:50 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 50:50 */
  grid-template-rows: 1fr;
  grid-template-areas: "details fulltext";
  align-items: stretch;
  /* ensure children fill row height */
  overflow: hidden;
  /* avoid outer scroll; let inner panes scroll */
}

#wdb-main-container.layout--drawer.drawer-open #wdb-annotation-info-panel {
  /* Robust viewport height with fallbacks (prefer stable svh last) */
  height: 60vh;
  height: 60dvh;
  height: 60svh;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  overflow: hidden;
  /* outer stays fixed; inner panes scroll */
}

/* Map areas in drawer */
#wdb-main-container.layout--drawer #wdb-annotation-details-area {
  grid-area: details;
}

#wdb-main-container.layout--drawer #wdb-full-text-area {
  grid-area: fulltext;
}

#wdb-main-container.layout--drawer #wdb-resizer-horizontal {
  display: none;
}

/* Vertical divider between Annotation and Full Text in drawer mode */
#wdb-main-container.layout--drawer #wdb-full-text-area {
  border-left: 1px solid #ccc;
}

/* Ensure inner panes can shrink and scroll in drawer as well */
#wdb-main-container.layout--drawer #wdb-annotation-details-area,
#wdb-main-container.layout--drawer #wdb-full-text-area {
  min-height: 0;
  height: 100%;
  /* fill the 60vh row */
}

/* In drawer, make inner scroll areas able to shrink */
#wdb-main-container.layout--drawer #wdb-annotation-panel-content,
#wdb-main-container.layout--drawer #wdb-full-text-content {
  min-height: 0;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Drawer: show title and keep it sticky at the top */
#wdb-main-container.layout--drawer #wdb-annotation-panel-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f8f8;
  /* match panel header style */
}

/* In stacked, ensure equal fill and inner shrink */
#wdb-main-container.layout--stacked #wdb-annotation-details-area,
#wdb-main-container.layout--stacked #wdb-full-text-area {
  height: 100%;
}

#wdb-main-container.layout--stacked #wdb-annotation-panel-content,
#wdb-main-container.layout--stacked #wdb-full-text-content {
  min-height: 0;
}

/* Floating action button to toggle panel (mobile) */
.wdb-panel-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1100;
  background: #0b1220;
  color: #fff;
  border: 1px solid #334155;
  border-radius: 24px;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.wdb-panel-fab:focus {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
}

/* Prevent page background scroll while drawer is open */
body.wdb-drawer-opened {
  overflow: hidden;
  /* Prevent background scroll chaining while drawer is open */
  overscroll-behavior: none;
}

/* Sensible defaults by viewport width (can be overridden by JS) */
@media (max-width: 720px) {
  #wdb-main-container:not(.layout--drawer):not(.layout--stacked) {
    /* If no mode is set yet on small screens, use stacked as default. */
    flex-direction: column;
  }
}

/* Ensure full-height usage in portrait (mobile/tablet) */
@media (orientation: portrait) {

  /* Avoid forcing the container to full viewport height; let JS compute when needed. */
  /* In drawer mode, keep viewer filling remaining vertical space */
  #wdb-main-container.layout--drawer #openseadragon-viewer {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Drawer: viewer should always be allowed to grow/shrink freely */
#wdb-main-container.layout--drawer #openseadragon-viewer {
  flex: 1 1 auto;
  min-height: 0;
}

/* While drawer is open, block pointer events to the viewer underneath */
#wdb-main-container.layout--drawer.drawer-open #openseadragon-viewer,
#wdb-main-container.layout--drawer.drawer-open .openseadragon-container {
  pointer-events: none !important;
}