/*
 * miller-columns.css
 * Styles for the MillerColumns multi-column content editor.
 *
 * Requires: theme-terracotta-workshop.css (or equivalent that provides the
 * CSS custom properties used throughout: --color-*, --font-*, --space-*,
 * --radius-*, --border-*, --shadow-*, --duration-*, --ease-*)
 *
 * Does NOT include: dialog styles, toast styles, preview/nav-sidebar styles,
 * mode toggle styles, or theme token definitions.
 */

/* ── COLUMNS SCROLL CONTAINER ── */
.miller-columns {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--color-surface-page);
  -webkit-overflow-scrolling: touch;
}

/* ── COLUMN ── */
.col {
  flex-shrink: 0;
  width: 280px;
  height: calc(100vh - var(--space-xl) - var(--space-xl));
  display: flex;
  flex-direction: column;
  padding: 0;
  /* NO transform — Safari drag breaks on transformed ancestors */
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
  animation: colSlideIn var(--duration-normal) var(--ease-enter);
  transition: box-shadow var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
  position: relative;
}

@keyframes colSlideIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.col.col-active {
  box-shadow: var(--shadow-lg);
}

.col.col-drop-target {
  box-shadow: 0 0 0 2px var(--color-primary),
              0 0 20px rgba(196, 101, 58, 0.2),
              var(--shadow-md);
  animation: colGlow 1s ease-in-out infinite alternate;
}

@keyframes colGlow {
  from {
    box-shadow: 0 0 0 2px var(--color-primary),
                0 0 16px rgba(196, 101, 58, 0.15),
                var(--shadow-md);
  }
  to {
    box-shadow: 0 0 0 2px var(--color-primary),
                0 0 28px rgba(196, 101, 58, 0.3),
                var(--shadow-md);
  }
}

/* ── COLUMN HEADER ── */
.col-header {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-thin) var(--border-style) var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.col-header-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-header-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── COLUMN LIST (scrollable body) ── */
.col-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xs) 0;
  position: relative;
}

.col-list::-webkit-scrollbar { width: 4px; }
.col-list::-webkit-scrollbar-track { background: transparent; }
.col-list::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 2px;
}

/* ── ADD DROPDOWN ── */
.col-add-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.col-add-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.col-add-trigger:hover {
  color: var(--color-primary);
  background: var(--color-surface-sunken);
}

.col-add-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--color-surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 160px;
  padding: var(--space-xs) 0;
  overflow: hidden;
}

.col-add-menu.open {
  display: block;
  animation: menuIn 150ms ease;
}

@keyframes menuIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.col-add-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  text-align: left;
  transition: background var(--duration-fast);
}

.col-add-menu button:hover {
  background: var(--color-surface-sunken);
}

.col-add-menu button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* ── ROW ITEMS ── */
.row-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 5px var(--space-md);
  cursor: pointer;
  border-radius: 0;
  user-select: none;
  position: relative;
  transition: background var(--duration-fast) var(--ease-default);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  animation: rowFadeIn var(--duration-fast) var(--ease-enter);
}

@keyframes rowFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.row-item:hover {
  background: var(--color-surface-sunken);
}

.row-item.selected {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-card));
}

/* Nest-drop highlight: shown on folder rows when dragging onto the middle zone */
.row-item.drop-nest {
  outline: 2px solid #c4a83a;
  outline-offset: -2px;
  background: rgba(196, 168, 58, 0.08);
}

/* ── ROW PARTS ── */
.row-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.row-icon.folder-icon {
  color: var(--color-secondary);
}

.row-body {
  flex: 1;
  min-width: 0;
}

.row-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.row-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ── HEADER ROWS ── */
.row-header {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-xs) !important;
}

.row-header-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
}

.row-chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── HOVER ACTIONS ── */
.row-actions {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-fast);
  margin-left: auto;
}

.row-item:hover .row-actions {
  opacity: 1;
}

.row-actions button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.row-actions button:hover {
  color: var(--color-text-heading);
  background: var(--color-surface-sunken);
}

.row-actions .act-delete:hover {
  color: var(--color-status-error);
}

/* ── DROP INDICATOR BAR ──
 * This element is appended to <body> and uses position:fixed.
 * position:fixed avoids scroll offset math and renders correctly even
 * when ancestor elements have CSS transforms (Safari workaround).
 */
.drop-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  transition: top 80ms ease, left 80ms ease, width 80ms ease;
}

/* ── DRAG GHOST ──
 * Positioned via JS (left/top inline styles). Appended to <body>.
 */
#drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.85;
  max-width: 260px;
  background: var(--color-surface-card);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
}