/* CFWF Custom Styles */

/* Splitter drag handles */
.splitter-v,
.splitter-h {
  flex-shrink: 0;
  background: oklch(var(--b3));
  transition: background 0.15s;
}
.splitter-v {
  width: 4px;
  cursor: col-resize;
}
.splitter-h {
  height: 4px;
  cursor: row-resize;
}
.splitter-v:hover,
.splitter-h:hover {
  background: oklch(var(--p));
}

/* Tree indentation */
.tree-node { padding-left: 0.75rem; }
.tree-node .tree-node { padding-left: 1rem; }

/* Tree node styles */
.tree-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.tree-label:hover { background: oklch(var(--b3)); }
.tree-label.active { background: oklch(var(--p) / 0.15); color: oklch(var(--p)); }

/* Chevron icon */
.tree-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.15s;
  opacity: 0.5;
}
.tree-chevron.open { transform: rotate(90deg); }

/* File list row */
.file-row {
  cursor: pointer;
  transition: background 0.1s;
}
.file-row:hover { background: oklch(var(--b3)); }
.file-row.selected { background: oklch(var(--p) / 0.12); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc) / 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / 0.35); }

/* Panel containers */
.panel {
  overflow: auto;
  position: relative;
}

/* Drop zone highlight */
.drop-active {
  outline: 2px dashed oklch(var(--p));
  outline-offset: -4px;
  background: oklch(var(--p) / 0.05);
}

/* Preview tab bar */
.preview-tab {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.6;
}
.preview-tab:hover { opacity: 0.8; }
.preview-tab.active {
  border-color: oklch(var(--p));
  opacity: 1;
}

/* Toast container */
.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Upload progress bar */
.upload-progress {
  height: 3px;
  background: oklch(var(--p));
  transition: width 0.3s;
}

/* File table: horizontally scrollable with sticky columns */
.file-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
}
.file-table {
  min-width: max-content;
}
.file-table .col-checkbox {
  position: sticky;
  left: 0;
  z-index: 20;
  background: oklch(var(--b1));
  width: 2rem;
}
.file-table .col-name {
  position: sticky;
  left: 2rem;
  z-index: 20;
  background: oklch(var(--b1));
  min-width: 12rem;
  max-width: 20rem;
}
.file-table thead .col-checkbox,
.file-table thead .col-name {
  z-index: 30;
}
.file-row:hover .col-checkbox,
.file-row:hover .col-name {
  background: oklch(var(--b3));
}
.file-row.selected .col-checkbox,
.file-row.selected .col-name {
  background: oklch(var(--p) / 0.12);
}

/* Rendered markdown preview */
.rendered-markdown {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  overflow: auto;
  height: 100%;
}
.rendered-markdown h1 { font-size: 1.5em; font-weight: 700; margin: 1em 0 0.5em; border-bottom: 1px solid oklch(var(--bc) / 0.15); padding-bottom: 0.3em; }
.rendered-markdown h2 { font-size: 1.3em; font-weight: 600; margin: 1em 0 0.5em; border-bottom: 1px solid oklch(var(--bc) / 0.1); padding-bottom: 0.2em; }
.rendered-markdown h3 { font-size: 1.1em; font-weight: 600; margin: 0.8em 0 0.4em; }
.rendered-markdown h4, .rendered-markdown h5, .rendered-markdown h6 { font-size: 1em; font-weight: 600; margin: 0.6em 0 0.3em; }
.rendered-markdown p { margin: 0.5em 0; }
.rendered-markdown ul, .rendered-markdown ol { margin: 0.5em 0; padding-left: 1.5em; }
.rendered-markdown ul { list-style: disc; }
.rendered-markdown ol { list-style: decimal; }
.rendered-markdown li { margin: 0.25em 0; }
.rendered-markdown code {
  background: oklch(var(--bc) / 0.1);
  padding: 0.15em 0.35em;
  border-radius: 0.25em;
  font-size: 0.85em;
}
.rendered-markdown pre {
  background: oklch(var(--bc) / 0.08);
  padding: 0.75em 1em;
  border-radius: 0.375em;
  overflow-x: auto;
  margin: 0.75em 0;
}
.rendered-markdown pre code { background: none; padding: 0; }
.rendered-markdown blockquote {
  border-left: 3px solid oklch(var(--p));
  padding: 0.25em 1em;
  margin: 0.5em 0;
  color: oklch(var(--bc) / 0.7);
}
.rendered-markdown a { color: oklch(var(--p)); text-decoration: underline; }
.rendered-markdown img { max-width: 100%; border-radius: 0.375em; margin: 0.5em 0; }
.rendered-markdown table { border-collapse: collapse; margin: 0.75em 0; width: 100%; }
.rendered-markdown th, .rendered-markdown td { border: 1px solid oklch(var(--bc) / 0.15); padding: 0.4em 0.75em; text-align: left; }
.rendered-markdown th { background: oklch(var(--bc) / 0.05); font-weight: 600; }
.rendered-markdown hr { border: none; border-top: 1px solid oklch(var(--bc) / 0.15); margin: 1em 0; }

/* Drop target highlight (for internal drag-and-drop) */
.drop-target {
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
  background: oklch(var(--p) / 0.08);
}

/* Drag ghost (pill showing filename/count) */
.drag-ghost {
  position: fixed;
  top: -1000px;
  pointer-events: none;
  background: oklch(var(--b2));
  border: 1px solid oklch(var(--bc) / 0.2);
  border-radius: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  box-shadow: 0 4px 12px oklch(var(--bc) / 0.15);
  white-space: nowrap;
}

/* CodeMirror overrides for preview */
.cm-editor { height: 100%; }
.cm-editor .cm-scroller { overflow: auto; }