/* =============================================================================
   GL-SHELL — 3-Pane Band Command Center shell
   Phase B: Center workspace + Right context panel
   Loaded only by index-dev.html — production index.html is untouched.
   ============================================================================= */

/* ── Shell wrapper ─────────────────────────────────────────────────────────── */
#gl-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  position: relative;
}
/* Desktop: fixed-height shell — each column scrolls independently */
@media (min-width: 901px) {
  #gl-shell {
    height: calc(100vh - 52px); /* viewport minus topbar */
    overflow: hidden;           /* children are the scroll containers */
  }
  /* Hide footer on desktop — shell is the full workspace */
  #gl-shell ~ footer { display: none; }
  /* Prevent body scroll — only column internals scroll */
  html, body { overflow: hidden; height: 100vh; }
}

/* ── Left rail (Milestone 4 Phase 2) ───────────────────────────────────────── */
#gl-left-rail {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-card, #1e293b);
  border-right: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: width 0.2s ease;
  scrollbar-width: none;
}
#gl-left-rail::-webkit-scrollbar { width: 0; }

/* Collapsed state */
#gl-shell.gl-shell--nav-collapsed #gl-left-rail {
  width: 56px;
}
#gl-shell.gl-shell--nav-collapsed .gl-rail-item {
  justify-content: center;
  padding: 8px 0;
  width: calc(100% - 8px);
  margin: 1px 4px;
}

/* Toggle button */
.gl-rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  background: none;
  border: none;
  color: var(--text-dim, #475569);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.gl-rail-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f1f5f9);
}

/* Section */
.gl-rail-section {
  margin-bottom: 4px;
}
/* Home item — visually separated from section groups */
.gl-rail-item--home {
  margin-bottom: 4px;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gl-rail-section-title {
  font-size: 0.6em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.35);
  padding: 10px 16px 3px;
  white-space: nowrap;
  overflow: hidden;
}
#gl-shell.gl-shell--nav-collapsed .gl-rail-section-title {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Nav item */
.gl-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 12px);
  margin: 1px 6px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
}
.gl-rail-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f1f5f9);
}
.gl-rail-item--active {
  background: var(--accent-glow, rgba(99, 102, 241, 0.15));
  color: var(--accent-light, #818cf8);
}

/* Icon */
.gl-rail-icon {
  font-size: 1.15em;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Label — hidden when collapsed */
.gl-rail-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
}
#gl-shell.gl-shell--nav-collapsed .gl-rail-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* ── Center workspace inside the shell ─────────────────────────────────────── */
/*
   .main-content normally has max-width:960px; margin:0 auto (from app-shell.css).
   Inside #gl-shell it must be a flex child that shrinks when the panel opens,
   so we override the centering and let the flex layout take over.
*/
#gl-shell > .main-content {
  flex: 1 1 0;
  min-width: 0;          /* allow compression below max-width */
  max-width: none;       /* let flex control width, not a hard cap */
  margin: 0;             /* remove the auto-centering */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  transition: flex-basis 0.3s cubic-bezier(0.32, 0, 0, 1);
}
/* Desktop: override min-height so center workspace scrolls within shell */
@media (min-width: 901px) {
  #gl-shell > .main-content {
    min-height: 0;       /* let flex height control, not min-height */
  }
}

/* ── Right context panel ───────────────────────────────────────────────────── */
#gl-right-panel {
  /* Hidden by default — zero width, overflow clipped */
  width: 0;
  flex-shrink: 0;
  overflow: hidden;

  /* Visual treatment */
  background: var(--bg-card, #1e293b);
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));

  /* Layout */
  display: flex;
  flex-direction: column;

  /* Animate open/close */
  transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Panel open — triggered by class on #gl-shell */
#gl-shell.gl-shell--panel-open #gl-right-panel {
  width: 420px;
}

/* ── Panel internals ───────────────────────────────────────────────────────── */
.gl-rp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.15);
  min-height: 44px;
  position: relative;   /* establish stacking context */
  z-index: 60;          /* above sd-header z-index:50 — keeps ✕ always clickable */
}

.gl-rp-title {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #475569);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}

.gl-rp-close-btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.gl-rp-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.gl-rp-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Isolate stacking context so sd-header sticky positioning cannot
     escape this container and paint over .gl-rp-header above it. */
  isolation: isolate;
  /* Thin scrollbar consistent with app-shell.css */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.gl-rp-content::-webkit-scrollbar { width: 4px; }
.gl-rp-content::-webkit-scrollbar-track { background: transparent; }
.gl-rp-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* ── Desktop: hide hamburger when rail is visible ─────────────────────────── */
@media (min-width: 901px) {
  .hamburger { display: none; }
}

/* ── Medium screens: hide rail toggle (rail is locked collapsed) ──────────── */
@media (max-width: 1199px) and (min-width: 901px) {
  .gl-rail-toggle { display: none; }
}

/* ── Medium screens: cap panel width to protect center workspace ───────────── */
@media (max-width: 1199px) and (min-width: 901px) {
  #gl-shell.gl-shell--panel-open #gl-right-panel {
    width: 360px; /* narrower than desktop 420px to give center workspace more room */
  }
}

/* ── Mobile: hide left rail, panel overlays instead of pushing ────────────── */
@media (max-width: 900px) {
  #gl-left-rail {
    display: none;
  }
  #gl-right-panel {
    position: fixed;
    right: 0;
    top: 0;              /* full-screen overlay — intentionally covers topbar */
    bottom: 0;
    height: 100%;
    width: 0;
    z-index: 1100;       /* above topbar (z≈1000) — panel is a true full-screen sheet on mobile */
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  }

  #gl-shell.gl-shell--panel-open #gl-right-panel {
    width: 92vw;
    max-width: 420px;
  }

  /* On mobile the center workspace does NOT compress — panel overlays */
  #gl-shell > .main-content {
    transition: none;
  }

  /* Larger tap target for close button on mobile */
  .gl-rp-close-btn {
    padding: 8px 16px;
    font-size: 1em;
  }

}

/* ── Overlay root — top-level stacking context for persistent UI ──────────── */
#gl-overlay-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}

/* ── Now Playing bar (Milestone 4 Phase 3) ────────────────────────────────── */
/* Critical layout styles are inline on the HTML element (stacking fix).
   These rules handle show/hide and visual refinements only. */
#gl-now-playing.gl-np--visible {
  display: flex !important; /* override inline styles which don't set display */
}

.gl-np-song {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
}
.gl-np-song:hover .gl-np-title {
  color: var(--text, #f1f5f9);
}

.gl-np-icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

.gl-np-title {
  font-weight: 700;
  font-size: 0.85em;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.gl-np-meta {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--text-dim, #475569);
  white-space: nowrap;
  flex-shrink: 0;
}

.gl-np-action {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #818cf8;
  font-size: 0.72em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.gl-np-action:hover {
  background: rgba(99, 102, 241, 0.25);
}

.gl-np-close {
  background: none;
  border: none;
  color: var(--text-dim, #475569);
  cursor: pointer;
  padding: 4px;
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.gl-np-close:hover {
  color: var(--text, #f1f5f9);
}

/* Offset shell content so it doesn't sit behind the bar */
#gl-shell.gl-shell--now-playing {
  padding-bottom: 48px;
}

/* Mobile: compact Now Playing bar */
@media (max-width: 900px) {
  #gl-now-playing {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .gl-np-meta { display: none; }
  .gl-np-action { padding: 4px 10px; font-size: 0.68em; }
  .gl-np-close { padding: 8px; font-size: 1.1em; } /* larger touch target */
}