pinakes/crates/pinakes-ui/assets/styles/_sections.scss

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

// Statistics

.statistics-page {
  padding: 20px;
}

.stats-overview,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $space-8;
  margin-bottom: $space-12;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  background: $bg-2;
  border: 1px solid $border;
  border-radius: $radius;
  padding: 20px;
  @include flex(row, flex-start, center, $space-8);

  &.stat-primary {
    border-left: 3px solid $accent;
  }

  &.stat-success {
    border-left: 3px solid $success;
  }

  &.stat-info {
    border-left: 3px solid $type-document-text;
  }

  &.stat-warning {
    border-left: 3px solid $warning;
  }

  &.stat-purple {
    border-left: 3px solid $type-audio-text;
  }

  &.stat-danger {
    border-left: 3px solid $error;
  }
}

.stat-icon {
  flex-shrink: 0;
  color: $text-2;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: $font-size-6xl;
  font-weight: $font-weight-bold;
  color: $text-0;
  line-height: $line-height-tight;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: $font-size-md;
  color: $text-2;
  margin-top: $space-2;
  font-weight: $font-weight-medium;
}

.stats-section {
  background: $bg-2;
  border: 1px solid $border;
  border-radius: $radius;
  padding: $space-8;
  margin-bottom: 20px;
}

.section-title {
  font-size: $font-size-3xl;
  font-weight: $font-weight-semibold;
  color: $text-0;
  margin-bottom: 20px;

  // Alternative smaller size used in some places
  &.small {
    font-size: $font-size-xl;
    margin-bottom: $space-6;
    padding-bottom: 6px;
    border-bottom: 1px solid $border-subtle;
  }
}

// Chart bars

.chart-bars {
  @include flex(column, flex-start, stretch, $space-8);
}

.bar-item {
  display: grid;
  grid-template-columns: 120px 1fr 80px;
  align-items: center;
  gap: $space-8;
}

.bar-label {
  font-size: $font-size-lg;
  font-weight: $font-weight-medium;
  color: $text-1;
  text-align: right;
}

.bar-track {
  height: 28px;
  background: $bg-3;
  border-radius: $radius-sm;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: $radius-sm;

  &.bar-primary {
    background: linear-gradient(90deg, $accent 0%, $gradient-accent-end 100%);
  }

  &.bar-success {
    background: linear-gradient(90deg, $success 0%, $gradient-success-end 100%);
  }
}

.bar-value {
  font-size: $font-size-lg;
  font-weight: $font-weight-semibold;
  color: $text-1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

// Settings

.settings-section {
  margin-bottom: $space-8;
}

.settings-card {
  background: $bg-2;
  border: 1px solid $border;
  border-radius: $radius-md;
  padding: 20px;
  margin-bottom: $space-8;

  &.danger-card {
    border: 1px solid $error-border-light;
  }
}

.settings-card-header {
  @include flex-between;
  margin-bottom: $space-8;
  padding-bottom: $space-6;
  border-bottom: 1px solid $border-subtle;
}

.settings-card-title {
  font-size: $font-size-xl;
  font-weight: $font-weight-semibold;
}

.settings-card-body {
  padding-top: $space-1;
}

.settings-field {
  @include flex-between;
  padding: $space-4 0;
  border-bottom: 1px solid $border-subtle;

  &:last-child {
    border-bottom: none;
  }

  select {
    min-width: 120px;
  }
}

// Config status

.config-path {
  font-size: $font-size-base;
  color: $text-2;
  margin-bottom: $space-6;
  font-family: $font-family-mono;
  padding: 6px $space-5;
  background: $bg-0;
  border-radius: $radius-sm;
  border: 1px solid $border-subtle;
}

.config-status {
  @include flex(row, flex-start, center, 6px);
  padding: 3px $space-5;
  border-radius: 12px;
  font-size: $font-size-base;
  font-weight: $font-weight-semibold;

  &.writable {
    background: $success-light;
    color: $success;
  }

  &.readonly {
    background: $error-medium;
    color: $error;
  }
}

// Root list

.root-list {
  list-style: none;
}

.root-item {
  @include flex-between;
  padding: $space-4 $space-6;
  background: $bg-0;
  border: 1px solid $border-subtle;
  border-radius: $radius-sm;
  margin-bottom: $space-2;
  font-family: $font-family-mono;
  font-size: $font-size-md;
  color: $text-1;
}

// Info row

.info-row {
  @include flex-between;
  padding: 6px 0;
  border-bottom: 1px solid $border-subtle;
  font-size: $font-size-lg;

  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  color: $text-1;
  font-weight: $font-weight-medium;
}

.info-value {
  color: $text-0;
}

// Tasks

.tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: $space-8;
  padding: $space-6;
}

.task-card {
  background: $bg-2;
  border: 1px solid $border;
  border-radius: $radius;
  overflow: hidden;
  transition: all $transition-slower;

  &:hover {
    border-color: $border-strong;
    box-shadow: $shadow-card-hover;
    transform: translateY(-2px);
  }

  &-enabled {
    border-left: 3px solid $success;
  }

  &-disabled {
    border-left: 3px solid $text-3;
    opacity: 0.7;
  }
}

.task-card-header {
  @include flex-between;
  align-items: flex-start;
  padding: $space-8;
  border-bottom: 1px solid $border-subtle;
}

.task-header-left {
  flex: 1;
  min-width: 0;
}

.task-name {
  font-size: $font-size-3xl;
  font-weight: $font-weight-semibold;
  color: $text-0;
  margin-bottom: $space-1;
}

.task-schedule {
  @include flex(row, flex-start, center, 6px);
  font-size: $font-size-md;
  color: $text-2;
  font-family: $font-family-mono-alt;
}

.schedule-icon {
  font-size: 14px;
}

.task-status-badge {
  flex-shrink: 0;
}

.status-badge {
  @include flex(row, flex-start, center, 6px);
  padding: $space-1 10px;
  border-radius: $radius-sm;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  text-transform: uppercase;
  letter-spacing: $letter-spacing-wide;

  &.status-enabled {
    background: $green-medium;
    color: $success;

    .status-dot {
      animation: pulse 1.5s infinite;
    }
  }

  &.status-disabled {
    background: $bg-3;
    color: $text-2;
  }

  .status-dot {
    @include status-dot;
    background: currentColor;
  }
}

.task-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: $space-6;
  padding: $space-8;
}

.task-info-item {
  @include flex(row, flex-start, flex-start, 10px);
}

.task-info-icon {
  font-size: 18px;
  color: $text-2;
  flex-shrink: 0;
}

.task-info-content {
  flex: 1;
  min-width: 0;
}

.task-info-label {
  font-size: $font-size-sm;
  color: $text-2;
  font-weight: $font-weight-semibold;
  @include text-uppercase($letter-spacing-wide);
  margin-bottom: $space-1;
}

.task-info-value {
  font-size: $font-size-md;
  color: $text-1;
  font-weight: $font-weight-medium;
  @include text-truncate;
}

.task-card-actions {
  display: flex;
  gap: $space-4;
  padding: $space-5 $space-8;
  background: $bg-1;
  border-top: 1px solid $border-subtle;

  button {
    flex: 1;
  }
}

// Database actions

.db-actions {
  @include flex(column, flex-start, stretch, $space-8);
  padding: $space-5;
}

.db-action-row {
  @include flex(row, space-between, center, $space-8);
  padding: $space-5;
  border-radius: 6px;
  background: $overlay-inverse-light;
}

.db-action-info {
  flex: 1;

  h4 {
    font-size: 0.95rem;
    font-weight: $font-weight-semibold;
    color: $text-0;
    margin-bottom: $space-1;
  }
}

.db-action-confirm {
  @include flex(row, flex-start, center, $space-4);
  flex-shrink: 0;
}

// Library page

.library-toolbar {
  @include flex-between;
  padding: $space-4 0;
  margin-bottom: $space-6;
  gap: $space-6;
  flex-wrap: wrap;
}

.toolbar-left {
  @include flex(row, flex-start, center, $space-5);
}

.toolbar-right {
  @include flex(row, flex-start, center, $space-5);
}

.sort-control,
.page-size-control {
  select {
    padding: $space-2 24px $space-2 $space-4;
    font-size: $font-size-base;
    background: $bg-2;
  }
}

.page-size-control {
  @include flex(row, flex-start, center, $space-2);
}

.library-stats {
  @include flex-between;
  padding: $space-1 0 6px 0;
  font-size: $font-size-base;
}

.type-filter-row {
  @include flex(row, flex-start, center, 6px);
  padding: $space-2 0;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

// Pagination

.pagination {
  @include flex-center;
  gap: $space-2;
  margin-top: $space-8;
  padding: $space-4 0;
}

.page-btn {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.page-ellipsis {
  color: $text-2;
  padding: 0 $space-2;
  font-size: $font-size-md;
  user-select: none;
}