/**
 * @fileoverview Version History Panel styles
 *
 * Styling for the version history slide-in panel.
 */

/* ============================================================================
   PANEL CONTAINER
   ============================================================================ */

.wn-version-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--wn-panel-md);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  z-index: var(--wn-z-panel);
  border-left: 1px solid var(--wn-zinc-700);
  background-color: var(--wn-zinc-900);
  box-shadow: var(--wn-shadow-panel);
  animation: slideIn var(--wn-transition-normal) ease-out;
  overflow: hidden;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ============================================================================
   PANEL HEADER
   ============================================================================ */

.wn-version-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wn-space-4) var(--wn-space-5);
  border-bottom: 1px solid var(--wn-zinc-700);
  flex-shrink: 0;
}

.wn-version-panel-title {
  display: flex;
  align-items: center;
  gap: var(--wn-space-3);
  font-size: var(--wn-font-base);
  font-weight: 600;
  color: var(--wn-zinc-50);
  margin: 0;
}

.wn-version-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--wn-space-1);
}

.wn-version-panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wn-icon-btn-md);
  height: var(--wn-icon-btn-md);
  padding: 0;
  border: none;
  border-radius: var(--wn-radius-sm);
  background-color: transparent;
  color: var(--wn-zinc-400);
  cursor: pointer;
  transition:
    background-color var(--wn-transition-fast),
    color var(--wn-transition-fast);
}

.wn-version-panel-btn:hover {
  background-color: var(--wn-overlay-10);
  color: var(--wn-zinc-50);
}

.wn-version-panel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wn-version-panel-btn--danger {
  color: var(--wn-error-400);
}

.wn-version-panel-btn--danger:hover:not(:disabled) {
  background-color: var(--wn-error-alpha-10);
  color: var(--wn-error-300);
}

/* ============================================================================
   PANEL CONTENT
   ============================================================================ */

.wn-version-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--wn-space-3);
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.wn-version-panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wn-space-4);
  padding: var(--wn-space-8);
  color: var(--wn-zinc-500);
  font-size: var(--wn-font-base);
}

/* ============================================================================
   ERROR STATE
   ============================================================================ */

.wn-version-panel-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wn-space-4);
  padding: var(--wn-space-8);
  text-align: center;
  color: var(--wn-error-400);
  font-size: var(--wn-font-base);
}

.wn-version-panel-error button {
  padding: var(--wn-space-2) var(--wn-space-4);
  border: 1px solid var(--wn-zinc-700);
  border-radius: var(--wn-radius-sm);
  background-color: transparent;
  color: var(--wn-zinc-400);
  font-size: var(--wn-font-xs);
  cursor: pointer;
  transition:
    background-color var(--wn-transition-fast),
    color var(--wn-transition-fast);
}

.wn-version-panel-error button:hover {
  background-color: var(--wn-overlay-10);
  color: var(--wn-zinc-50);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.wn-version-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wn-space-3);
  padding: var(--wn-space-9) var(--wn-space-5);
  text-align: center;
  color: var(--wn-zinc-600);
}

.wn-version-panel-empty p {
  margin: 0;
  font-size: var(--wn-font-base);
  font-weight: 500;
  color: var(--wn-zinc-500);
}

.wn-version-panel-empty span {
  font-size: var(--wn-font-xs);
}

/* ============================================================================
   VERSION LIST
   ============================================================================ */

.wn-version-list {
  display: flex;
  flex-direction: column;
  gap: var(--wn-space-2);
}

/* ============================================================================
   VERSION ITEM
   ============================================================================ */

.wn-version-item {
  display: flex;
  flex-direction: column;
  gap: var(--wn-space-2);
  width: 100%;
  padding: var(--wn-space-3) var(--wn-space-4);
  border: 1px solid transparent;
  border-radius: var(--wn-radius-md);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--wn-transition-fast),
    border-color var(--wn-transition-fast);
}

.wn-version-item:hover {
  background-color: var(--wn-overlay-5);
}

.wn-version-item--selected {
  border-color: var(--wn-brand-500);
  background-color: var(--wn-brand-alpha-10);
}

.wn-version-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wn-version-item-time {
  display: flex;
  align-items: center;
  gap: var(--wn-space-2);
  font-size: var(--wn-font-xs);
  font-weight: 500;
  color: var(--wn-zinc-50);
}

.wn-version-item-size {
  font-size: var(--wn-font-xs);
  color: var(--wn-zinc-600);
}

.wn-version-item-label {
  display: inline-flex;
  align-items: center;
  gap: var(--wn-space-1);
  padding: var(--wn-space-1) var(--wn-space-2);
  border-radius: var(--wn-radius-sm);
  background-color: var(--wn-info-alpha-20);
  font-size: var(--wn-font-xs);
  font-weight: 500;
  color: var(--wn-info-400);
  width: fit-content;
}

.wn-version-item-preview {
  margin: 0;
  font-size: var(--wn-font-xs);
  color: var(--wn-zinc-500);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============================================================================
   SPIN ANIMATION
   ============================================================================ */

.wn-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================================
   LIGHT MODE OVERRIDES
   ============================================================================ */

.wn-light .wn-version-panel {
  border-left-color: var(--wn-zinc-200);
  background-color: #fff;
  box-shadow: var(--wn-shadow-panel);
}

.wn-light .wn-version-panel-header {
  border-bottom-color: var(--wn-zinc-200);
}

.wn-light .wn-version-panel-title {
  color: var(--wn-zinc-900);
}

.wn-light .wn-version-panel-btn {
  color: var(--wn-zinc-500);
}

.wn-light .wn-version-panel-btn:hover {
  background-color: var(--wn-overlay-light-5);
  color: var(--wn-zinc-900);
}

.wn-light .wn-version-panel-btn--danger {
  color: var(--wn-error-500);
}

.wn-light .wn-version-panel-btn--danger:hover:not(:disabled) {
  background-color: var(--wn-error-alpha-10);
  color: var(--wn-error-600);
}

.wn-light .wn-version-panel-loading {
  color: var(--wn-zinc-400);
}

.wn-light .wn-version-panel-error button {
  border-color: var(--wn-zinc-200);
  color: var(--wn-zinc-500);
}

.wn-light .wn-version-panel-error button:hover {
  background-color: var(--wn-overlay-light-5);
  color: var(--wn-zinc-900);
}

.wn-light .wn-version-panel-empty {
  color: var(--wn-zinc-400);
}

.wn-light .wn-version-panel-empty p {
  color: var(--wn-zinc-500);
}

.wn-light .wn-version-item:hover {
  background-color: var(--wn-overlay-light-3);
}

.wn-light .wn-version-item--selected {
  border-color: var(--wn-brand-500);
  background-color: var(--wn-brand-alpha-10);
}

.wn-light .wn-version-item-time {
  color: var(--wn-zinc-900);
}

.wn-light .wn-version-item-size {
  color: var(--wn-zinc-400);
}

.wn-light .wn-version-item-label {
  background-color: var(--wn-info-alpha-15);
}

.wn-light .wn-version-item-preview {
  color: var(--wn-zinc-500);
}