// =============================================================================
// Libraries Index — Page-specific styles
// =============================================================================

@use '../variables' as *;
@use '../mixins' as *;

.libraries-index {
  padding: 1.5rem;
  max-width: 100%;
  overflow-x: hidden;
}

// -----------------------------------------------------------------------------
// Header
// -----------------------------------------------------------------------------

.libraries-index__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.libraries-index__title {
  font-size: $font-size-2xl;
  line-height: $line-height-2xl;
  letter-spacing: $letter-spacing-2xl;
  font-weight: $font-weight-bold;
  color: $neutral-900;

  .dark & {
    color: $neutral-50;
  }
}

// -----------------------------------------------------------------------------
// Filters bar
// -----------------------------------------------------------------------------

.libraries-index__filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

// -----------------------------------------------------------------------------
// Search
// -----------------------------------------------------------------------------

.libraries-index__search {
  position: relative;
  width: 16rem;
}

.libraries-index__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: $neutral-400;
}

.libraries-index__search-input {
  padding-left: 2.5rem;
}

// -----------------------------------------------------------------------------
// Table cell helpers
// -----------------------------------------------------------------------------

.libraries-index__slug {
  font-family: $font-mono;
  font-size: $font-size-sm;
  color: $neutral-500;
}

.libraries-index__version {
  font-size: $font-size-sm;
  color: $neutral-600;

  .dark & {
    color: $neutral-300;
  }
}

// -----------------------------------------------------------------------------
// Empty state
// -----------------------------------------------------------------------------

.libraries-index__empty {
  padding: 3rem 0;
  text-align: center;
}

.libraries-index__empty-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: $neutral-300;
  margin: 0 auto 0.5rem;
}

.libraries-index__empty-text {
  font-size: $font-size-sm;
  color: $neutral-500;
}

// -----------------------------------------------------------------------------
// Drawer skeleton
// -----------------------------------------------------------------------------

.libraries-index__skeleton {
  height: 2.5rem;
  background: $neutral-200;
  border-radius: $radius;
  animation: pulse 1.5s ease-in-out infinite;

  .dark & {
    background: $neutral-700;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

// -----------------------------------------------------------------------------
// Checkbox
// -----------------------------------------------------------------------------

.libraries-index__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}

.libraries-index__checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: $radius-sm;
  border: 1px solid $neutral-300;
  color: $primary-500;

  .dark & {
    border-color: $neutral-600;
  }
}

.libraries-index__checkbox-text {
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-700;

  .dark & {
    color: $neutral-200;
  }
}

.libraries-index__checkbox-hint {
  margin-top: 0.25rem;
  margin-left: 1.625rem;
  font-size: $font-size-xs;
  color: $neutral-500;
}

// -----------------------------------------------------------------------------
// Radio group
// -----------------------------------------------------------------------------

.libraries-index__field-label {
  display: block;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  color: $neutral-700;
  margin-bottom: 0.375rem;

  .dark & {
    color: $neutral-200;
  }
}

.libraries-index__radio-group {
  display: flex;
  gap: 1rem;
}

.libraries-index__radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  font-size: $font-size-sm;
  color: $neutral-700;

  .dark & {
    color: $neutral-200;
  }
}

.libraries-index__radio {
  width: 1rem;
  height: 1rem;
  border: 1px solid $neutral-300;
  color: $primary-500;

  .dark & {
    border-color: $neutral-600;
  }
}

.libraries-index__field-error {
  margin-top: 0.25rem;
  font-size: $font-size-xs;
  color: $error-500;
}

// -----------------------------------------------------------------------------
// File upload
// -----------------------------------------------------------------------------

.libraries-index__file-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.libraries-index__file-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: $radius;
  border: 1px solid $neutral-300;
  background: #fff;
  font-size: $font-size-sm;
  color: $neutral-700;
  cursor: pointer;
  transition: background-color 0.15s;

  &:hover {
    background: $neutral-50;
  }

  .dark & {
    border-color: $neutral-600;
    background: $neutral-900;
    color: $neutral-200;

    &:hover {
      background: $neutral-800;
    }
  }
}

.libraries-index__file-input {
  display: none;
}

.libraries-index__file-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: $font-size-sm;
}

.libraries-index__file-name-text {
  font-family: $font-mono;
  color: $primary-600;

  .dark & {
    color: $primary-400;
  }
}

.libraries-index__file-clear {
  color: $neutral-400;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.15s;

  &:hover {
    color: $error-500;
  }
}

.libraries-index__file-existing {
  font-size: $font-size-sm;
  font-family: $font-mono;
  color: $neutral-500;
}

.libraries-index__file-placeholder {
  font-size: $font-size-sm;
  color: $neutral-400;
}

// -----------------------------------------------------------------------------
// Spinner
// -----------------------------------------------------------------------------

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

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