/* ============================================================================
   HSH_AI.Current.Rail.FIX.css
   Left rail (explorerRail) as in-flow flex item, bounded by fixed header/footer.
   This file is an override layer; it must be loaded AFTER HSH_AI.css.
   ============================================================================ */

:root {
  --rail-width-default: 320px;
  --rail-width-current: var(--rail-width-default);
  --rail-width-collapsed: 44px; /* will be refined by JS at runtime */
}

/* ---------- page row: rail + main ---------- */
#pageRow {
  position: fixed;
  top: var(--header-height);
  bottom: var(--footer-height);
  left: 0;
  right: 0;

  display: flex;
  flex-direction: row;
  align-items: stretch;

  /* IMPORTANT: prevent unexpected horizontal scroll */
  overflow: hidden;
}

/* ---------- rail container (legacy id/class retained) ---------- */
#explorerRail.hsh-rail{
  position: relative !important;	/* in-flow */
  top: auto !important;
  left: auto !important;
  height: 100% !important;

  width: var(--rail-width-current) !important;
  min-width: var(--rail-width-collapsed) !important;
  max-width: 80vw !important;

  transform: none !important;		/* kill legacy drawer translate */
  box-shadow: none !important;
}

/* rail header */
#explorerRail .hsh-rail-header {
  /*
     Center the rail title text visually within the header.
     Use a 3-column grid where the outer columns reserve space equal to the
     collapsed rail width so the middle column is *truly* centered.
  */
  display: grid;
  grid-template-columns: var(--rail-width-collapsed) 1fr var(--rail-width-collapsed);
  align-items: center;
  padding: 6px 8px;
  gap: 8px;

  border-bottom: 1px solid rgba(0,0,0,.12);
  background: #f7f7f7;
}

#explorerRail.hsh-rail,
#explorerRail.hsh-rail.is-open {
  transform: none !important;
}

#explorerRail .hsh-rail-title {
  font-family:	Arial, sans-serif;
  font-size:	12pt;
  /*font-size: 13px;*/
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-self: center;
  text-align: center;
}

/* rail collapse button (always visible, left) */
#btnCollapseRail {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1;
  cursor: pointer;
}

/* Place header controls explicitly into grid columns */
#explorerRail .hsh-rail-header #btnCollapseRail { grid-column: 1; justify-self: start; }
#explorerRail .hsh-rail-header .hsh-rail-title  { grid-column: 2; }

/* explorer body */
#explorerRailBody.hsh-rail-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 8px;
}

/* -------------------------------------------------------------------------
   Explorer collapse behaviour
   -------------------------------------------------------------------------
   IMPORTANT:
   The explorer toggle button now lives *inside* the explorer markup.
   Therefore, when the explorer is collapsed we must keep #explorerRailBody
   visible so the toggle remains discoverable.

   We only hide the explorer's content wrapper (.hsh-explorer-content).
   ------------------------------------------------------------------------- */

/* Keep body visible (so the explorer header + toggle remain visible) */
#explorerRail.explorer-collapsed #explorerRailBody {
  display: block !important;
}

/* Hide only the explorer content (table etc.) */
#explorerRail.explorer-collapsed .hsh-explorer-content {
  display: none !important;
}

/* rail collapsed: keep header visible; you may later hide title if desired */
#explorerRail.rail-collapsed {
  width: var(--rail-width-collapsed);
}

/* When rail is collapsed, hide the header title text (leave ≡ visible) */
#explorerRail.rail-collapsed .hsh-rail-title{
  display: none !important;
}

/* explorer toggle button (legacy id retained, right) */
#btnCloseexplorerRail {
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- rail resizer handle ---------- */
.hsh-rail-resizer {
  position: absolute;
  top: 0;
  right: 0;                 /* ✅ no negative offset */
  width: 10px;              /* tune */
  height: 100%;
  cursor: col-resize;
  background: transparent;

  z-index: 99999;           /* ✅ sits above any interior content */
  pointer-events: auto;     /* explicit */
}

/* optional: make the “hot” part straddle the edge visually */
.hsh-rail-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  right: -4px;              /* visual straddle only */
  width: 8px;
  height: 100%;
}

body.hsh-resize-active {
		user-select: none;
}

.hsh-rail-resizer:hover {
  background: rgba(0,0,0,.06);
}

/* --- hard guarantee: rail resizer cursor never “inherits” something else --- */
#explorerRailResizer.hsh-rail-resizer,
#explorerRailResizer {
  cursor: col-resize !important;
}

/* --- while dragging, force cursor everywhere (incl. iframes / fixed panels) --- */
body.hsh-resize-active,
body.hsh-resize-active * {
  cursor: col-resize !important;
}

/* ---------- main content area: everything to the right of the rail ---------- */
#mainArea {
  position: relative;
  flex: 1 1 auto;
  min-width: 0; /* critical for flex overflow */
  height: 100%;
  overflow: hidden;
}

/* Make your existing #content participate cleanly */
#mainArea #content {
  position: relative;
  height: 100%;
  overflow: auto;
}

/* ---------- fixed panels honour rail width (Approach 1) ---------- */
/* These are legacy selectors from your base CSS */
/*
.slide-panel {
  left: var(--rail-width-current) !important;
  width: calc(100% - var(--rail-width-current)) !important;
}
*/
/*
.canvas-tabs-host {
  left: var(--rail-width-current) !important;
  width: calc(100% - var(--rail-width-current)) !important;
}
*/
/* Safety: prevent horizontal overflow from inner iframe containers */
.iframe-container {
  overflow-x: hidden;
}

/* Fixed panels: use left+right (stretch), not left+width (avoid over-constraint drift) */
/* ensure no left inset is creating a visible “gap” */
/*
.slide-panel {
  left:  var(--rail-width-current) !important;
  right: 0 !important;
  width: auto !important;
  padding-left: 0px !important;
}

.canvas-tabs-host {
  left:  var(--rail-width-current) !important;
  right: 0 !important;
  width: auto !important;
  padding-left: 0px !important;
}
*/
.slide-panel,
.canvas-tabs-host {
  left:  var(--rail-offset-left) !important;
  right: 0 !important;
  width: auto !important;
}
/* ----------- */

/* Main content: if you want #content flush too */
#mainArea #content{
  padding-left: 0px !important;
}