/* Docking UI - generic, uses the colour tokens from cockpit.css. */

.dock-host {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 6px;
  padding: 6px 8px 8px;
}

/* --- Toolbar ---------------------------------------------------------- */
.dock-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
}
.dock-toolbar-label { color: var(--text-dim); letter-spacing: 0.08em; margin-right: 4px; }
.dock-toolbar-extra { margin-left: auto; }
.dock-view-toggle {
  background: transparent;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
  font: inherit;
  padding: 2px 8px;
  cursor: pointer;
}
.dock-view-toggle--open { color: var(--text-primary); border-color: var(--border-bright); }
.dock-view-toggle:hover { color: var(--accent-self); border-color: var(--accent-self); }

/* --- Splits ----------------------------------------------------------- */
/* Every level is a flex container whose children use flex-basis 0 and
   grow by their ratio; min-size 0 everywhere so content can never force a
   pane bigger than its share (it scrolls inside .dock-content instead). */
.dock-root { flex: 1; display: flex; min-height: 0; }
.dock-root > *, .dock-pane > * { flex: 1; min-width: 0; min-height: 0; }

.dock-split { display: flex; min-width: 0; min-height: 0; }
.dock-split--row { flex-direction: row; }
.dock-split--column { flex-direction: column; }
.dock-pane { display: flex; min-width: 0; min-height: 0; overflow: hidden; }

.dock-splitter { flex: 0 0 6px; }
.dock-split--row > .dock-splitter { cursor: col-resize; }
.dock-split--column > .dock-splitter { cursor: row-resize; }
.dock-splitter:hover { background: color-mix(in srgb, var(--accent-self) 25%, transparent); }

.dock-resize-overlay { position: fixed; inset: 0; z-index: 20; }
.dock-resize-overlay--row { cursor: col-resize; }
.dock-resize-overlay--column { cursor: row-resize; }

/* --- Stacks & tabs ---------------------------------------------------- */
.dock-stack {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel));
  border: 1px solid var(--border-dim);
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.dock-stack--hover { border-color: var(--accent-self); }

.dock-tabs {
  display: flex;
  flex: 0 0 auto;
  min-height: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #08111a;
  border-bottom: 1px solid var(--border-dim);
}
.dock-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 2px 3px 12px;
  font-size: var(--font-sm);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-dim);
  border-right: 1px solid var(--border-dim);
  cursor: grab;
  user-select: none;
}
.dock-tab:hover { color: var(--text-primary); }
.dock-tab--active {
  color: var(--text-primary);
  background: var(--bg-panel-raised);
  box-shadow: inset 0 2px 0 var(--accent-self);
}
.dock-tab-close {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0 5px;
  cursor: pointer;
  opacity: 0.4;
}
.dock-tab-close:hover { opacity: 1; color: var(--accent-critical); }

.dock-content { position: relative; flex: 1; min-height: 0; overflow: auto; }

/* --- Drop targets (only rendered while a tab is being dragged) --------- */
.dock-drop { position: absolute; inset: 0; z-index: 5; }
.dock-drop-zone { position: absolute; }
.dock-drop-zone--left   { left: 0; top: 0; bottom: 0; width: 25%; }
.dock-drop-zone--right  { right: 0; top: 0; bottom: 0; width: 25%; }
.dock-drop-zone--top    { left: 25%; right: 25%; top: 0; height: 25%; }
.dock-drop-zone--bottom { left: 25%; right: 25%; bottom: 0; height: 25%; }
.dock-drop-zone--center { left: 25%; right: 25%; top: 25%; bottom: 25%; }

.dock-drop-preview {
  position: absolute;
  pointer-events: none;
  background: color-mix(in srgb, var(--accent-self) 16%, transparent);
  border: 1px solid var(--accent-self);
  transition: all 0.08s ease-out;
}
.dock-drop-preview--center { inset: 0; }
.dock-drop-preview--left   { left: 0; top: 0; bottom: 0; width: 50%; }
.dock-drop-preview--right  { right: 0; top: 0; bottom: 0; width: 50%; }
.dock-drop-preview--top    { left: 0; right: 0; top: 0; height: 50%; }
.dock-drop-preview--bottom { left: 0; right: 0; bottom: 0; height: 50%; }