/* ── Workspace grid (multi-workspace split view) ───────────────────── */

/* Use minmax(0, 1fr) for both axes so cells with overflow content (long
   terminal lines, wide tab strips, deep task-dashboard panels) cannot
   push their track past the equal share — without minmax(0, …) a single
   `1fr` track defaults to its min-content size, which collapsed the
   bottom row of the grid when the cell content was unbreakable. The
   PaneStage uses the same trick. */
/* Density target: mobile.css. The grid is meant to fit four workspaces in
   one viewport, so we follow the same compact padding/gaps the mobile
   layout uses (1–2 px instead of 6–10 px) — desktop users zooming into
   four cells need every pixel of content area. */
.workspace-grid {
  display: grid;
  height: 100%;
  min-height: 0;
  gap: 2px;
  padding: 2px;
  background: var(--bg);
  overflow: hidden;
  align-content: stretch;
  justify-content: stretch;
}

/* Narrow/mobile degradation: single cell */
.workspace-grid--solo {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

/* 2-column layout */
.workspace-grid--cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

/* 2-row layout */
.workspace-grid--rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 4-cell grid */
.workspace-grid--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Top cell spans full width, two below split half/half */
.workspace-grid--top-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a a"
    "b c";
}

/* Left cell spans full height, two on the right split top/bottom */
.workspace-grid--left-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a b"
    "a c";
}

.workspace-grid__cell {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.workspace-grid__cell--focused {
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
}

/* ── Per-cell workspace container ──────────────────────────────────── */

.workspace-cell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* Force the embedded pane component to fill the available cell height.
   Pane components (TaskDashboardPane, GitPane, FileManagerPane, …) render
   a plain `.workspace-pane__body` as their root — without a sized parent
   they collapse to natural content height and leave the bottom of the
   cell empty. Using grid here guarantees the single rendered child
   stretches across the row regardless of its intrinsic size. */
.workspace-cell__pane {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

/* Belt-and-braces: the parent grid track already stretches its single
   item, but several pane bodies (task-dashboard, headless-judge, file
   manager) ship their own `<style scoped>` sizing rules that depend on
   the OWN root being sized like a flex/grid container. If the rendered
   root is `.workspace-pane__body` without the modifier-specific scoped
   rule (e.g. for terminal panes), `align-self: stretch` alone leaves the
   element at content height because `.workspace-pane__body` declares no
   height of its own. Pinning every direct child to the full track keeps
   those panes filling the cell regardless of which scoped rules they
   carry. */
.workspace-cell__pane > * {
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.workspace-cell__no-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 11px;
}

/* Drag-over highlight */
.workspace-cell--drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* Swap arrows in the cell header */
.workspace-cell-header__btn--swap {
  font-size: 11px;
  opacity: 0.7;
}

.workspace-cell-header__btn--swap:hover {
  opacity: 1;
  color: var(--accent);
}

/* Empty cell placeholder */
.workspace-cell--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--panel);
  cursor: pointer;
  position: relative;
}

.workspace-cell__pick-btn {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 10px;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.workspace-cell__pick-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ── Cell header ──────────────────────────────────────────────────── */

/* Single row that combines the workspace picker (icon + name + chevron),
   the workspace's compact tab strip, and the cell action buttons (swap
   arrows + clear). Stacking the picker label and tabs in separate rows
   wasted ~22 px of vertical real estate per cell — meaningful in a 2×2
   grid where every cell is already a quarter of the viewport.

   Heights/fonts mirror mobile.css density: 24 px row, 10 px text. */
.workspace-cell-header {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 2px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  min-height: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Style as a small chip so it reads as a workspace identity badge rather
   than blending into the tab strip on its right — same row, same height,
   same font otherwise made it look like just another tab. */
.workspace-cell-header__picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  max-width: 45%;
  border: 1px solid rgba(var(--tint), 0.14);
  background: rgba(var(--tint), 0.05);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  margin: 0 6px 0 0;
  border-radius: 3px;
  align-self: center;
  transition:
    background 0.12s,
    border-color 0.12s;
}

.workspace-cell-header__picker:hover {
  background: rgba(var(--tint), 0.12);
  border-color: rgba(var(--tint), 0.28);
}

.workspace-cell-header__icon {
  flex-shrink: 0;
  font-size: 11px;
}

.workspace-cell-header__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-cell-header__chev {
  font-size: 8px;
  color: var(--muted);
  flex-shrink: 0;
}

.workspace-cell-header__tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  container-type: inline-size;
  container-name: workspace-cell-tabs;
}

.workspace-cell-header__btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 3px;
  border-radius: 2px;
  flex-shrink: 0;
  line-height: 1;
  align-self: center;
  transition:
    color 0.1s,
    background 0.1s;
}

.workspace-cell-header__btn:hover {
  color: var(--text);
  background: rgba(var(--tint), 0.06);
}

.workspace-cell-header__btn--danger:hover {
  color: var(--danger);
}

/* ── Compact tab strip ────────────────────────────────────────────── */

/* Lives inside .workspace-cell-header__tabs so the row already has its own
   padding, background, and border — strip those here. */
.tab-strip--compact {
  flex: 1;
  min-width: 0;
  padding: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  display: flex;
  /* Align to the bottom so each tab's 3 px accent border-bottom sits flush
     with the bottom edge of the header strip — otherwise center-alignment
     leaves a gap and the active-tab underline floats mid-strip. */
  align-items: flex-end;
  gap: 1px;
  background: transparent;
  border-bottom: none;
}

.tab-strip--compact::-webkit-scrollbar {
  display: none;
}

.tab-strip--compact .tab {
  /* Asymmetric vertical padding so the visible gap between text and the
     3 px accent border-bottom is wider than the gap above — the bold
     underline carries visual weight, so symmetric padding makes it feel
     crammed against the text. */
  padding: 2px 5px 6px;
  height: 22px;
  font-size: 9px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 2px;
}

.tab-strip--compact .tab small {
  display: none;
}

/* In a split, only the focused cell can be "the" active cell — so a full
   accent underline in a non-focused cell competes with the focused cell
   for attention. Dim the active-tab underline there; the focused cell
   keeps the full accent underline as its active-cell indicator. */
.workspace-cell:not(.workspace-cell--focused) .tab-strip--compact .tab--active {
  border-bottom-color: color-mix(in srgb, var(--accent), transparent 70%);
}

.tab-strip-compact-picker__trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 18px;
  min-width: 0;
  border: 1px solid rgba(var(--tint), 0.08);
  border-radius: 2px;
  background: rgba(var(--tint), 0.04);
  color: var(--text);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  padding: 0 5px;
}

.tab-strip-compact-picker__trigger:hover {
  background: rgba(var(--tint), 0.08);
}

.tab-strip-compact-picker__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-strip-compact-picker__icon {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 10px;
}

.tab-strip-compact-picker__backdrop {
  position: fixed;
  inset: 0;
  z-index: 8998;
  background: transparent;
}

.tab-strip-compact-picker__dropdown {
  position: fixed;
  z-index: 8999;
  overflow-y: auto;
  padding: 3px 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-elevated);
  box-shadow: var(--shadow);
}

.tab-strip-compact-picker__item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
}

.tab-strip-compact-picker__item:hover {
  background: rgba(var(--tint), 0.06);
}

.tab-strip-compact-picker__item--active {
  border-left-color: var(--accent);
  background: rgba(var(--tint), 0.08);
}

.tab-strip-compact-picker__item--menu-target {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 88%);
}

.tab-strip-compact-picker__item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-strip-compact-picker__item-status {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 9px;
}

.tab-strip-compact-picker__item-menu {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: -3px -4px -3px 0;
  border-radius: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.tab-strip-compact-picker__item-menu:hover {
  background: rgba(var(--tint), 0.12);
  color: var(--text);
}

@container workspace-cell-tabs (max-width: 420px) {
  .tab-strip--compact .tab {
    display: none;
  }

  .tab-strip--compact .tab-strip-compact-picker__trigger {
    display: inline-flex;
  }
}

@media (max-width: 768px), (max-height: 500px) {
  .workspace-cell .tab-strip--compact .tab {
    display: none;
  }

  .workspace-cell .tab-strip--compact .tab-strip-compact-picker__trigger {
    display: inline-flex;
  }
}

/* ── Workspace picker popover ─────────────────────────────────────── */

.ws-picker {
  /* Solid panel bg — --panel-elevated is 95 % opaque, which lets the cell
     content bleed through and makes the workspace list hard to scan. */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  width: 320px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ws-picker__search {
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  outline: none;
  flex-shrink: 0;
}

.ws-picker__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.ws-picker__row {
  display: flex;
  align-items: center;
  width: 100%;
  transition: background 0.1s;
}

.ws-picker__row:hover {
  background: rgba(var(--tint), 0.06);
}

.ws-picker__row--current {
  background: color-mix(in srgb, var(--accent), transparent 90%);
}

.ws-picker__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  padding: 0;
}

.ws-picker__chevron--placeholder {
  cursor: default;
}

.ws-picker__chevron:hover:not(.ws-picker__chevron--placeholder) {
  color: var(--text);
}

.ws-picker__item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 10px;
  text-align: left;
}

.ws-picker__row--current .ws-picker__item {
  border-left-color: var(--accent);
}

.ws-picker__icon {
  flex-shrink: 0;
}

.ws-picker__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-picker__badge {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}

.ws-picker__star {
  flex-shrink: 0;
  color: gold;
  font-size: 11px;
  margin-right: 2px;
}

.ws-picker__kind-counts {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 4px;
}

.ws-picker__breadcrumb {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 4px;
  font-style: italic;
}

.ws-picker__empty {
  color: var(--muted);
  font-size: 12px;
  padding: 10px;
  text-align: center;
  margin: 0;
}

.ws-picker__footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.ws-picker__cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
  transition:
    color 0.1s,
    border-color 0.1s;
}

.ws-picker__cancel:hover {
  color: var(--text);
  border-color: rgba(var(--tint), 0.2);
}

.ws-picker__backdrop {
  position: fixed;
  inset: 0;
  z-index: 8998;
  background: transparent;
}
