/* ============================
   FXV Gridstack Layout Controls
   ============================ */

:root {
  --fxv-panel-gap: 0;   /* 0 = panels touch; increase to add gutters */
  --fxv-side-gap: 0;    /* page left/right padding */
  --fxv-top-gap: 0;     /* gap below navbar */
}

/* Page-wide edges + top spacing (optional) */
.container-fluid {
  padding-left: var(--fxv-side-gap) !important;
  padding-right: var(--fxv-side-gap) !important;
}
.grid-stack {
  padding-top: var(--fxv-top-gap);
}

/* Remove Bootstrap row gutters if grid is inside a .row */
.row { --bs-gutter-x: 0; }

/* GRIDSTACK: force no gaps from library CSS */
.grid-stack { --gs-gutter: 0px !important; }
.grid-stack > .grid-stack-item { padding: 0 !important; margin: 0 !important; }

/* Panel look */
.grid-stack-item > .grid-stack-item-content {
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
  border-radius: var(--bs-border-radius, .375rem);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

/* Drag affordances */
.grid-handle,
.card .card-header { cursor: move; }

/* Wider resize handles for zero-gutter layout */
.grid-stack .ui-resizable-handle { position: absolute; z-index: 20; }
.grid-stack .ui-resizable-e,
.grid-stack .ui-resizable-w { width: 10px; }
.grid-stack .ui-resizable-n,
.grid-stack .ui-resizable-s { height: 10px; }




/* Enable overlapping when page setting is on */
.js-gridstack.fxv-allow-overlap { position: relative; overflow: visible; }

/* Hero underlay paints behind everything; size via CSS var per-page */
.js-gridstack.fxv-allow-overlap .grid-stack-item.fxv-hero {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 100% !important;
  height: var(--fxv-hero-h, 420px) !important;
  z-index: 0 !important;
  pointer-events: none; /* click-through */
}

/* Other items above hero */
.js-gridstack.fxv-allow-overlap .grid-stack-item:not(.fxv-hero) { z-index: 1; }