/**
 * gridstack SASS styles 13.2.0
 * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
 */
.grid-stack {
  position: relative;
}

.grid-stack-placeholder > .placeholder-content {
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0;
  position: absolute;
  width: auto;
  z-index: 0 !important;
}

.grid-stack > .grid-stack-item {
  position: absolute;
  padding: 0;
  top: 0;
  width: var(--gs-column-width);
  height: var(--gs-cell-height);
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  margin: 0;
  position: absolute;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
  overflow-y: hidden;
}

.grid-stack:not(.grid-stack-rtl) > .grid-stack-item {
  left: 0;
}

.grid-stack.grid-stack-rtl > .grid-stack-item {
  right: 0;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}

.grid-stack-item > .ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
  user-select: none;
  z-index: 100;
}
.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
  display: none;
}
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw,
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 101;
}
.grid-stack-item > .ui-resizable-ne {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-sw {
  transform: rotate(45deg);
}
.grid-stack-item > .ui-resizable-nw {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-se {
  transform: rotate(-45deg);
}
.grid-stack-item > .ui-resizable-nw {
  cursor: nw-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-n {
  cursor: n-resize;
  height: 10px;
  top: var(--gs-item-margin-top);
  left: 25px;
  right: 25px;
}
.grid-stack-item > .ui-resizable-ne {
  cursor: ne-resize;
  width: 20px;
  height: 20px;
  top: var(--gs-item-margin-top);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-e {
  cursor: e-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-se {
  cursor: se-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  right: var(--gs-item-margin-right);
}
.grid-stack-item > .ui-resizable-s {
  cursor: s-resize;
  height: 10px;
  left: 25px;
  bottom: var(--gs-item-margin-bottom);
  right: 25px;
}
.grid-stack-item > .ui-resizable-sw {
  cursor: sw-resize;
  width: 20px;
  height: 20px;
  bottom: var(--gs-item-margin-bottom);
  left: var(--gs-item-margin-left);
}
.grid-stack-item > .ui-resizable-w {
  cursor: w-resize;
  width: 10px;
  top: 15px;
  bottom: 15px;
  left: var(--gs-item-margin-left);
}
.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
  display: none !important;
}
.grid-stack-item.ui-draggable-dragging {
  will-change: left, right, top;
}
.grid-stack-item.ui-resizable-resizing {
  will-change: width, height;
}

.ui-draggable-dragging,
.ui-resizable-resizing {
  z-index: 10000;
}
.ui-draggable-dragging > .grid-stack-item-content,
.ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}

.grid-stack-animate,
.grid-stack-animate .grid-stack-item {
  transition: left 0.3s, right 0.3s, top 0.3s, height 0.3s, width 0.3s;
}

.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
  transition: left 0s, right 0s, top 0s, height 0s, width 0s;
}

.grid-stack > .grid-stack-item[gs-y="0"] {
  top: 0px;
}

.grid-stack:not(.grid-stack-rtl) > .grid-stack-item[gs-x="0"] {
  left: 0%;
}

.grid-stack.grid-stack-rtl > .grid-stack-item[gs-x="0"] {
  right: 0%;
}

.gs-print-show {
  display: none;
}

@media print {
  @page gs-landscape {
    size: landscape;
  }
  @page gs-portrait {
    size: portrait;
  }
  /* ========================================================================
     PRINT LAYOUT
     GridStack normally positions items with `position: absolute`, which browsers
     can't paginate at all (it's removed from the flow). For print we switch to
     block/float flow instead: items auto-size their height to content and flow
     left to right, wrapping naturally across pages without being sliced in half.
     Trade-off: this ignores the exact on-screen Y coordinate, so if one item in
     a row is much taller than its siblings, shorter siblings in the next row
     still can't start higher than that tall item's bottom (plain CSS has no
     print-safe masonry packing) - hidden items don't cause this though, since
     a display:none item simply takes no space and following items move up.
     ======================================================================== */
  .grid-stack {
    display: block !important;
    height: auto !important;
    position: static !important;
  }
  .grid-stack > .grid-stack-item {
    display: block !important;
    float: left !important;
    position: static !important;
    height: auto !important; /* Let it grow with content */
    left: auto !important;
    top: auto !important;
    /* Proportional width based on grid columns */
    width: calc(100% * var(--gs-w) / var(--gs-columns, 12)) !important;
    /* Prevent slicing items across pages */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .grid-stack > .grid-stack-item > .grid-stack-item-content {
    position: relative !important; /* change from absolute to relative to dictate parent height */
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    /* Convert absolute positioning offsets to margins to keep the gaps */
    margin-top: var(--gs-item-margin-top) !important;
    margin-right: var(--gs-item-margin-right) !important;
    margin-bottom: var(--gs-item-margin-bottom) !important;
    margin-left: var(--gs-item-margin-left) !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }
  /* ========================================================================
     PER-WIDGET PrintOptions
     ======================================================================== */
  .gs-print-hide {
    display: none;
  }
  .gs-print-show {
    display: block;
  }
  /* needs to out-specificity the base item rule above (display: block !important)
     so a hidden widget actually collapses instead of still reserving its slot */
  .grid-stack > .grid-stack-item.gs-print-hide {
    display: none !important;
  }
  /* pageBreak/orientation need the item to be a normal block box: Chrome's print
     engine ignores forced page breaks on floated elements, so pull these out of
     the float flow (their width is kept as-is - a plain block box already can't
     have a later float rise up beside it, so nothing else tucks into the row). */
  .grid-stack > .grid-stack-item[gs-page-break=true],
  .grid-stack > .grid-stack-item[gs-print-orientation] {
    float: none !important;
    clear: both !important;
  }
  .grid-stack > .grid-stack-item[gs-page-break=true] {
    page-break-before: always !important;
    break-before: page !important;
  }
  .grid-stack > .grid-stack-item[gs-print-orientation=landscape] {
    page: gs-landscape;
    /* Force item to take proper landscape width, overriding portrait-page sizing.
       vmax ensures we get the long edge of the paper regardless of default printer orientation */
    min-width: calc(100vmax * var(--gs-w) / var(--gs-columns, 12)) !important;
  }
  .grid-stack > .grid-stack-item[gs-print-orientation=portrait] {
    page: gs-portrait;
    /* vmin ensures we get the short edge of the paper */
    min-width: calc(100vmin * var(--gs-w) / var(--gs-columns, 12)) !important;
  }
  /* Hide interactive elements during print */
  .grid-stack > .grid-stack-item > .ui-resizable-handle {
    display: none !important;
  }
}