/* =========================================================
public_html/genebean/Styles/modes/modules-layout.css
   Job: layout & structure only
========================================================= */

/* =========================================================
   MODULES MODE — LAYOUT & STRUCTURE ONLY
========================================================= */
/* -----------------------------------------
   Canvas layout (ANCHOR)
----------------------------------------- */
:root {
  --gb-app-header-height: 34px; /* adjust if needed */
  --gb-app-header-left-offset: 24px; /* adjust if needed */
  --gb-app-header-bottom-offset: 24px;
}
/* =========================================================
   MODULES MODE — EXECUTION ENTRY NEUTRALIZATION
========================================================= */

#workspace-canvas[data-mode="modules"] {
  padding-top: 0;
}
header.execution-entry {
  margin: 0;
  padding: 0;
}
#workspace-canvas {
  margin: 0;
  padding: 0;
}

.modules-canvas {
  position: relative;
  display: grid;

  /* Header row + content row */
  grid-template-rows: auto 1fr;

  /* Sidebar + workspace */
  grid-template-columns: 260px 1fr;

  min-height: 100svh;
  overflow: hidden;
}
/* -----------------------------------------
   Modules Header (layout only)
----------------------------------------- */
.modules-header {
  grid-column: 1 / -1;      /* span sidebar + workspace */
  grid-row: 1; 
  position: relative;
  top: var(--nav-height);
  z-index: 20;
}
.modules-header {
  grid-column: 1 / -1;   /* span sidebar + workspace */
  grid-row: 1;

  padding: 20px 32px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modules-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.modules-header p {
  margin: 0;
  font-size: 14px;
}


/* -----------------------------------------
   Sidebar
----------------------------------------- */
.modules-sidebar {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  padding: 18px 14px;
  border-right: 1px solid transparent;
  margin-top: var(--nav-height);
}

/* -----------------------------------------
   Module list
----------------------------------------- */
.modules-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.module-pill {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* -----------------------------------------
   Workspace
----------------------------------------- */
.modules-workspace {
  margin-top: var(--nav-height);
  grid-column: 2;
  grid-row: 2;
  /* overflow: auto; */
}

/* =========================================================
   COLLAPSE TOGGLE — POSITION & MECHANICS
========================================================= */

.modules-collapse-toggle {
  position: absolute;
  top: 50%;
  left: calc(260px - 16px);
  transform: translateY(-50%);
  width: 24px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
}

.modules-collapse-toggle:focus,
.modules-collapse-toggle:focus-visible {
  outline: none;
}

.modules-collapse-toggle:hover,
.modules-collapse-toggle:active {
  border: none;
  box-shadow: none;
}

.modules-collapse-toggle .chevron {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  transition: transform 0.25s ease;
}

/* =========================================================
   COLLAPSED STATE — STRUCTURE ONLY
========================================================= */

.modules-canvas.is-collapsed {
  grid-template-columns: 32px 1fr;
}

.modules-canvas.is-collapsed .modules-sidebar {
  padding: 0;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hide all sidebar content */
.modules-list {
  transition: opacity 160ms ease;
}

.modules-canvas.is-collapsed .modules-list {
  opacity: 0;
  pointer-events: none;
}
.modules-canvas.is-collapsed .modules-list {
  visibility: hidden;
}

/* Hide any text-based elements defensively */
.modules-canvas.is-collapsed .module-pill {
  display: none;
}
.modules-canvas.is-collapsed .modules-collapse-toggle {
  left: 0;
  width: 32px;
  height: 64px;
  border-left: none;

}

.modules-canvas.is-collapsed .chevron {
  transform: rotate(180deg);
}

/* =========================================================
   RESPONSIVE — MOBILE (STRUCTURE)
========================================================= */

@media (max-width: 900px) {

  .modules-canvas {
    grid-template-columns: 220px 1fr;
    height: calc(100svh - var(--nav-height));
  }
  .modules-header {
    padding: 16px;
  }
  .modules-sidebar {
    padding: 12px 10px;
  }

  .module-pill {
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .modules-workspace {
    padding: 16px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .modules-collapse-toggle {
    display: flex;
    left: calc(220px - 16px);
    top: 50%;
    transform: translateY(-50%);
  }

  .modules-canvas.is-collapsed .modules-collapse-toggle {
    left: 0;
  }
}

/* =========================================================
   TRANSITIONS REQUIRED FOR SIDEBAR COLLAPSE ANIMATION
========================================================= */

.modules-canvas {
  transition: grid-template-columns 320ms cubic-bezier(.22,.61,.36,1);
}
.module-pill {
  transform: translateZ(0);
}
/* =========================================================
   PILL FADE LOGIC — ASYMMETRIC (OUT FAST, IN DELAYED)
========================================================= */

.modules-list {
  opacity: 1;
  transition:
    opacity 160ms ease,
    visibility 0s linear 160ms;
}

/* COLLAPSED: fade out immediately */
.modules-canvas.is-collapsed .modules-list {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 120ms ease,
    visibility 0s linear 120ms;
}

/* EXPANDING: delay fade-in until sidebar opens */
.modules-canvas:not(.is-collapsed) .modules-list {
  transition:
    opacity 160ms ease 150ms,
    visibility 0s linear 0s;
}