/* FcsSplitView / FcsSplitPane — the shared workbench frame, and the splitter it owns.
 *
 * Colours default to the Radzen theme vars, so the frame follows the host's light/dark toggle with
 * nothing hardcoded here. A host with its own palette overrides the six --fcs-split-* properties on
 * .fcs-split-view rather than fighting these selectors; see FCS.Gallery's app.css.
 *
 * Two Radzen details the defaults below have to respect:
 *   * --rz-base-100/200/300/400 are a FIXED light ramp in the standard palette — standard-dark
 *     ships the same near-white values — so a head bar or drag bar painted with them stays light
 *     on a dark page. Only --rz-base-background-color and --rz-text-color invert, so the surfaces
 *     here are mixed from those two.
 *   * --rz-border-normal is a border SHORTHAND (`width solid colour`), not a colour, so it cannot
 *     go inside `1px solid var(...)` — that expands to `1px solid 1px solid #hex` and the border
 *     silently vanishes. The border colour is derived here instead.
 *
 * The height of .fcs-split-fill is written by fcs-splitview.js. The calc() below is only the
 * pre-measurement guess that keeps the first paint from collapsing to content height. */

.fcs-split-view {
  /* Aliases of the shared tokens in fcs-theme.css, kept as their own names so a host can retint one
     workbench frame without touching every control. The derivation lives there, once — this sheet
     used to carry its own copy of the same color-mix() formulas, which is exactly the duplication
     the token layer exists to remove. The fallbacks keep the frame usable if a host has linked
     fcs-splitview.css but not fcs-theme.css. */
  --fcs-split-border: var(--fcs-border, color-mix(in srgb, var(--rz-base-background-color, #0d1117) 82%, var(--rz-text-color, #c6d2dd)));
  --fcs-split-surface: var(--fcs-surface, var(--rz-base-background-color, #0d1117));
  --fcs-split-head-bg: var(--fcs-surface-raised, color-mix(in srgb, var(--rz-base-background-color, #161b22) 94%, var(--rz-text-color, #c6d2dd)));
  --fcs-split-head-fg: var(--fcs-fg, var(--rz-text-color, #c6d2dd));
  --fcs-split-bar: var(--fcs-border-subtle, color-mix(in srgb, var(--rz-base-background-color, #26313d) 88%, var(--rz-text-color, #c6d2dd)));
  --fcs-split-bar-hover: var(--fcs-surface-active, color-mix(in srgb, var(--rz-base-background-color, #344451) 74%, var(--rz-text-color, #c6d2dd)));

  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.fcs-split-fill {
  height: calc(100dvh - 8rem);
  min-height: var(--fcs-split-min-height, 320px);
}

.fcs-split-bordered {
  border: 1px solid var(--fcs-split-border);
  border-radius: var(--rz-border-radius, 8px);
  overflow: hidden;
  background: var(--fcs-split-surface);
}

/* ---- The splitter: panes and bars in one flex row (or column). ---- */

.fcs-split-view > .fcs-splitter {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.fcs-splitter-vertical {
  flex-direction: column;
}

/* A pane is sized by its inline flex-basis (its Size, or where a drag left it) and may shrink so
   the bars always fit. Only the LAST open pane grows (Radzen's "lastresizable" rule): that one
   fills whatever the collapsed panes gave up, and every other pane keeps the exact share it was
   given or dragged to. Inside, a column so a head bar and a scrolling body can share the pane. */
.fcs-splitter-pane {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.fcs-splitter-pane-last {
  flex-grow: 1;
}

/* A pane with no Size takes what is left rather than its content width — which would let a wide
   preview starve the editor beside it. */
.fcs-splitter-pane-auto {
  flex: 1 1 0%;
}

.fcs-splitter-pane-collapsed {
  flex: 0 0 0px !important;
}

/* A pane hidden with Visible="false". display:none rather than unmounting: the pane keeps its
   component instance, so an editor inside keeps its content, cursor and undo history, and the
   pane set stays fixed so the view's pane order stays valid. */
.fcs-splitter-pane.fcs-split-hidden {
  display: none !important;
}

/* Mid-drag, the panes' contents must not take the pointer (an iframe or a canvas would) and
   nothing should get selected. */
.fcs-splitter-resizing .fcs-splitter-pane {
  pointer-events: none;
  user-select: none;
}

/* ---- The bar: two move buttons around a grabber. ----
   The button before the grabber moves the bar towards the end, the one after it towards the
   start; FcsSplitPane shows each only while that move is possible. All three slots are always in
   the flow (hidden ones keep their place), so a shown button never drifts onto the grabber. A
   button's box is the bar's own 8px — the icon overhangs it evenly — so two bars standing side by
   side (both their panes collapsed) never take each other's clicks. */
.fcs-splitter-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--fcs-split-bar);
  color: var(--fcs-split-head-fg);
  opacity: 0.4;
  user-select: none;
  touch-action: none;
}

.fcs-splitter-bar:hover,
.fcs-splitter-bar:focus-within {
  background: var(--fcs-split-bar-hover);
  opacity: 1;
}

.fcs-splitter-horizontal > .fcs-splitter-bar {
  width: 8px;
  flex-direction: column;
}

.fcs-splitter-vertical > .fcs-splitter-bar {
  height: 8px;
  flex-direction: row;
}

.fcs-splitter-horizontal > .fcs-splitter-bar-resizable { cursor: col-resize; }
.fcs-splitter-vertical > .fcs-splitter-bar-resizable { cursor: row-resize; }

.fcs-splitter-bar > * {
  flex: 0 0 auto;
}

.fcs-splitter-none {
  visibility: hidden;
  pointer-events: none;
}

.fcs-splitter-forward,
.fcs-splitter-backward {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.fcs-splitter-forward:focus-visible,
.fcs-splitter-backward:focus-visible,
.fcs-splitter-grabber:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--fcs-split-bar-hover);
}

.fcs-splitter-forward::before,
.fcs-splitter-backward::before {
  font-family: var(--rz-icon-font-family, "Material Symbols Outlined");
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.fcs-splitter-horizontal > .fcs-splitter-bar > .fcs-splitter-forward,
.fcs-splitter-horizontal > .fcs-splitter-bar > .fcs-splitter-backward {
  width: 8px;
  height: 16px;
}

.fcs-splitter-vertical > .fcs-splitter-bar > .fcs-splitter-forward,
.fcs-splitter-vertical > .fcs-splitter-bar > .fcs-splitter-backward {
  width: 16px;
  height: 8px;
}

.fcs-splitter-horizontal .fcs-splitter-forward::before { content: "arrow_right"; }
.fcs-splitter-horizontal .fcs-splitter-backward::before { content: "arrow_left"; }
.fcs-splitter-vertical .fcs-splitter-forward::before { content: "arrow_drop_down"; }
.fcs-splitter-vertical .fcs-splitter-backward::before { content: "arrow_drop_up"; }

.fcs-splitter-grabber {
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 1px;
}

.fcs-splitter-horizontal > .fcs-splitter-bar > .fcs-splitter-grabber {
  width: 2px;
  height: 16px;
}

.fcs-splitter-vertical > .fcs-splitter-bar > .fcs-splitter-grabber {
  width: 16px;
  height: 2px;
}

/* A single pane keeps the fill and scroll semantics but has nothing to move. */
.fcs-split-single .fcs-splitter-bar {
  display: none;
}

/* ---- Inside a pane. ---- */

.fcs-split-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.fcs-split-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--fcs-split-border);
  background: var(--fcs-split-head-bg);
  color: var(--fcs-split-head-fg);
  font-size: 13px;
}

.fcs-split-pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fcs-split-pane-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Anything that must sit under the head bar without joining the scroll area. */
.fcs-split-pane-banner {
  flex: 0 0 auto;
}

/* min-height:0 is what lets a flex child actually shrink, and so what lets the scrollbar land
   inside the pane rather than on the page. */
.fcs-split-pane-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.fcs-split-pane-scroll {
  overflow: auto;
}

/* Editors and terminals size themselves to the pane and do their own scrolling. */
.fcs-split-pane-clip {
  overflow: hidden;
}

/* Narrow viewports: stack the panes and let the page scroll, which is the only thing that reads
   on a phone. The JS still runs but the height it writes is overridden here. */
@media (max-width: 760px) {
  .fcs-split-fill {
    height: auto !important;
    min-height: 0;
  }

  .fcs-split-view.fcs-split-stack > .fcs-splitter {
    display: block;
    height: auto;
  }

  .fcs-split-view.fcs-split-stack .fcs-splitter-pane {
    width: 100% !important;
    height: var(--fcs-split-stack-height, 520px) !important;
  }

  .fcs-split-view.fcs-split-stack .fcs-splitter-bar {
    display: none;
  }
}