/* Unified Block Panel — content left, tabbed rail right */

/* ── Panel container ─────────────────────────────────── */
.unified-block-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(960px, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bs-body-bg, #fff);
  border-left: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
  z-index: 1051; /* above block-comments-panel (1050) */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
}

/* ── Drag-to-resize handle (left edge) ───────────────── */
.ubv-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  transition: background-color 0.15s;
}

.ubv-resize-handle:hover,
.ubv-resize-handle.ubv-resizing {
  background-color: var(--bs-primary, #0d6efd);
  opacity: 0.4;
}

.unified-block-panel.visible {
  transform: translateX(0);
}

/* Push main content when unified panel is open (desktop) — JS overrides with exact px value */
@media (min-width: 769px) {
  body:has(.unified-block-panel.visible) .main-content {
    margin-right: min(960px, 100vw);
  }
}

/* ── Header ──────────────────────────────────────────── */
.ubv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
  flex-shrink: 0;
}

.ubv-title-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.ubv-block-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bs-body-color, #212529);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ubv-status-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}

.ubv-status-badge:empty { display: none; }

.ubv-status-badge.ubv-status-completed { background: #d1e7dd; color: #0f5132; }
.ubv-status-badge.ubv-status-in_progress { background: #cfe2ff; color: #084298; }
.ubv-status-badge.ubv-status-not_started { background: #e9ecef; color: #495057; }

.ubv-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.ubv-close-btn {
  background: none;
  border: none;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  color: var(--bs-secondary, #6c757d);
  border-radius: 4px;
  transition: background-color 0.15s;
  line-height: 1;
}

.ubv-close-btn:hover {
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-body-color, #212529);
}

/* ── Top tab strip (narrow only) ─────────────────────── */
/* On wide viewports the rail carries its own section dropdown; the top nav bar
   is hidden. On narrow it is promoted to the single navigation control. */
.ubv-nav-bar {
  display: none;
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
}

.ubv-nav-select {
  width: 100%;
}

/* ── Body: two-pane layout (block left + rail right) ─── */
.ubv-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Block content pane — left 60% */
.ubv-block-pane {
  flex: 0 0 60%;
  min-width: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Divider */
.ubv-divider {
  flex: 0 0 1px;
  background: var(--bs-border-color, #dee2e6);
  align-self: stretch;
}

/* Rail — right 40%, holds its own sub-tab strip + one active pane */
.ubv-rail {
  flex: 0 0 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Rail section selector (dropdown — frees the full rail width for the pane,
   and adding a new pane is just another <option>) */
.ubv-rail-bar {
  flex-shrink: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
}

.ubv-rail-select {
  width: 100%;
}

/* Rail panes — exactly one active at a time */
.ubv-rail-panes {
  flex: 1;
  min-height: 0;
  display: flex;
}

.ubv-rail-pane {
  display: none;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.ubv-rail-pane.active {
  display: flex;
}

/* Comments pane: borrowed content scrolls, compose pinned at bottom */
.ubv-comments-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ubv-compose-area {
  flex-shrink: 0;
}

.ubv-compose-area .comments-panel-compose {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.ubv-comments-body .comments-panel-content {
  flex: 1;
  min-height: 0;
}

/* Details / History panes scroll vertically */
.ubv-details-content,
.ubv-history-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Relationships pane scrolls vertically */
.ubv-relationships-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
}

/* History pane: borrowed .history-panel-content fills it */
.ubv-history-body .history-panel-content {
  flex: 1;
  min-height: 0;
}

/* ── Details form ────────────────────────────────────── */
.ubv-details-form {
  padding: 12px 16px;
}

.ubv-detail-field {
  margin-bottom: 1rem;
}

.ubv-detail-field .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.25rem;
}

.ubv-detail-field input,
.ubv-detail-field select {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* ── Block body content ──────────────────────────────── */
.ubv-content-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.75rem 0;
  color: var(--bs-body-color, #212529);
  word-break: break-word;
}

.ubv-block-description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--bs-body-color, #212529);
  white-space: pre-wrap;
  word-break: break-word;
}

.ubv-no-content,
.ubv-load-error {
  font-size: 0.875rem;
  font-style: italic;
}

.ubv-grid-notice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ubv-grid-wrapper {
  overflow-x: auto;
  min-width: 0;
}

.ubv-grid-wrapper .grid-container {
  min-width: 500px;
}

/* ── Skeleton loader ─────────────────────────────────── */
.ubv-block-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
  animation: ubv-shimmer 1.4s infinite linear;
}

.ubv-skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--bs-tertiary-bg, #e9ecef) 25%,
    var(--bs-secondary-bg, #f8f9fa) 50%,
    var(--bs-tertiary-bg, #e9ecef) 75%
  );
  background-size: 200% 100%;
}

.ubv-skeleton-title {
  height: 20px;
  width: 65%;
}

.ubv-skeleton-short {
  width: 40%;
}

@keyframes ubv-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Inline content edit ─────────────────────────────── */
.ubv-content-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.ubv-content-edit-area {
  display: flex;
  flex-direction: column;
}

.ubv-content-edit-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  margin-bottom: 0.25rem;
}

.ubv-content-edit-area .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #6c757d);
}

.ubv-content-textarea {
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

/* ── Narrow (≤768px): single top strip, one full-width view ── */
@media (max-width: 768px) {
  .unified-block-panel {
    width: 100vw;
  }

  /* Promote the top nav dropdown (includes Block) */
  .ubv-nav-bar {
    display: block;
  }

  /* Hide the rail's own dropdown — the top nav dropdown drives everything */
  .ubv-rail-bar {
    display: none;
  }

  /* Body shows exactly one full-width view (Block OR the active rail pane) */
  .ubv-body {
    flex-direction: column;
  }

  .ubv-divider {
    display: none;
  }

  /* Block tab active: block pane full-width, rail hidden */
  .ubv-body.ubv-show-block .ubv-block-pane {
    flex: 1 1 auto;
    max-height: none;
    width: 100%;
  }

  .ubv-body.ubv-show-block .ubv-rail {
    display: none;
  }

  /* A rail tab active: rail full-width, block pane hidden */
  .ubv-body.ubv-show-rail .ubv-block-pane {
    display: none;
  }

  .ubv-body.ubv-show-rail .ubv-rail {
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
  }
}

/* On wide viewports both block + rail are always shown; the show-block /
   show-rail body classes only matter on narrow. */
@media (min-width: 769px) {
  .ubv-body .ubv-block-pane,
  .ubv-body .ubv-rail {
    display: flex;
  }
}

/* ── Dark mode ───────────────────────────────────────── */
[data-bs-theme="dark"] .unified-block-panel {
  background: var(--bs-body-bg, #212529);
  border-left-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .ubv-header {
  background: var(--bs-tertiary-bg, #2b3035);
}

[data-bs-theme="dark"] .ubv-skeleton-line {
  background: linear-gradient(90deg, #2b3035 25%, #343a40 50%, #2b3035 75%);
  background-size: 200% 100%;
}

/* ── Relationships content ───────────────────────────── */
.ubv-rel-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ubv-rel-section {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  padding: 10px 0;
}

.ubv-rel-section:last-of-type {
  border-bottom: none;
}

.ubv-rel-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.ubv-rel-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ubv-rel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.875rem;
}

.ubv-rel-dir {
  flex-shrink: 0;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 1rem;
  line-height: 1;
}

.ubv-rel-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-link-color, #0d6efd);
  text-decoration: none;
}

.ubv-rel-link:hover {
  text-decoration: underline;
}

.ubv-rel-type-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 4px;
  padding: 1px 6px;
}

.ubv-rel-status {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #6c757d);
}

.ubv-rel-status.ubv-rel-status-completed  { background: #d1e7dd; color: #0f5132; }
.ubv-rel-status.ubv-rel-status-in_progress { background: #cfe2ff; color: #084298; }
.ubv-rel-status.ubv-rel-status-blocked    { background: #f8d7da; color: #842029; }
.ubv-rel-status.ubv-rel-status-not_started { background: #e9ecef; color: #495057; }
.ubv-rel-status.ubv-rel-status-cancelled  { background: #e9ecef; color: #6c757d; }

.ubv-rel-remove {
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.5;
  border: none;
  background: transparent;
}

.ubv-rel-remove:hover {
  opacity: 1;
  color: var(--bs-danger, #dc3545);
  background: var(--bs-danger-bg-subtle, #f8d7da);
  border-radius: 4px;
}

.ubv-rel-add-btn {
  padding: 1px 8px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--bs-secondary-color, #6c757d);
  background: transparent;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 4px;
}

.ubv-rel-add-btn:hover {
  background: var(--bs-secondary-bg, #e9ecef);
}

/* ── Add relationship form ───────────────────────────── */
.ubv-rel-add-section {
  padding-top: 12px;
}

.ubv-rel-add-form {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 6px;
  border: 1px solid var(--bs-border-color, #dee2e6);
}

.ubv-rel-search-wrapper {
  position: relative;
}

.ubv-rel-search-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
}

.ubv-rel-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.875rem;
}

.ubv-rel-search-item:hover {
  background: var(--bs-secondary-bg, #e9ecef);
}

.ubv-rel-search-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ubv-rel-search-type {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-left: 8px;
}

.ubv-rel-search-empty {
  padding: 8px 10px;
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* ── Dark mode for relationships ─────────────────────── */
[data-bs-theme="dark"] .ubv-rel-add-form {
  background: var(--bs-tertiary-bg, #2b3035);
}

[data-bs-theme="dark"] .ubv-rel-search-results {
  background: var(--bs-body-bg, #212529);
}

[data-bs-theme="dark"] .ubv-rel-search-item:hover {
  background: var(--bs-secondary-bg, #343a40);
}

[data-bs-theme="dark"] .ubv-rel-type-badge {
  background: var(--bs-secondary-bg, #343a40);
}

/* ── Flow Journey timeline ───────────────────────────── */
.ubv-journey-list {
  display: flex;
  flex-direction: column;
}

.ubv-journey-hop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.8125rem;
}

.ubv-journey-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--bs-secondary-color, #6c757d);
  background: transparent;
}

.ubv-journey-lane {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-body-color, #212529);
}

.ubv-journey-flow-tag {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ubv-journey-hop-seam {
  background: var(--bs-primary-bg-subtle, #cfe2ff);
  border-radius: 4px;
  padding: 3px 6px;
  margin: 2px -2px;
}

[data-bs-theme="dark"] .ubv-journey-hop-seam {
  background: rgba(13, 110, 253, 0.15);
}

.ubv-journey-seam-icon {
  flex-shrink: 0;
  color: var(--bs-primary, #0d6efd);
  font-size: 0.8rem;
  line-height: 1;
}

.ubv-journey-seam-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-primary, #0d6efd);
  font-weight: 500;
}

.ubv-journey-time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}

/* Mobile: relationships pane stacks naturally in vertical layout */
@media (max-width: 768px) {
  .ubv-relationships-pane {
    padding: 10px 12px;
  }
}