/* Article Labeling Platform - Main Stylesheet */
/* Unified CSS architecture with organized hierarchy */

/* ========================================
   0. TAILWIND CSS - Loaded separately from /dist/tailwind.css
   ======================================== */
/* Note: Tailwind utilities are now served from a separate file */

/* ========================================
   1. FOUNDATIONS - Design tokens and base styles
   ======================================== */
@import './1-foundations/variables.css';
@import './1-foundations/reset.css';

/* ========================================
   2. LAYOUTS - Page structure and layout primitives
   ======================================== */
/* Note: ALL layouts migrated to Tailwind (app-shell, tabs) */
/* Note: grids.css deleted - all utilities provided by Tailwind */

/* ========================================
   3. COMPONENTS - Reusable UI components
   ======================================== */
/* Note: ALL components migrated to Tailwind (buttons, forms, cards, badges, progress, alerts, toasts, loading, modals, article-content, keyboard, navigation) */

/* ========================================
   4. FEATURES - Page-specific feature styles
   ======================================== */
/* Note: ALL features migrated to Tailwind! */
/* - article-detail-panel, article-review, articles */
/* - batch-review, dashboard, dataset, debug */
/* - error-analysis, import, model-comparison */
/* - pipeline, promotion, retrain */

/* ========================================
   5. UTILITIES - Now provided by Tailwind CSS
   ======================================== */
/* Removed: spacing.css, text.css, helpers.css (replaced by Tailwind) */

/* ========================================
   LEGACY SUPPORT - Styles from unified.css
   ======================================== */

/* Tab content animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page-specific main containers */
.unified-main {
  margin-top: calc(var(--tab-nav-height) + 2.5rem); /* Tab bar height + breathing room (~16px gap) */
  min-height: calc(100vh - var(--header-height) - var(--tab-nav-height));
}

/* Note: .tab-content (children of unified-main) should NOT have margin-top
   since parent already accounts for header + tabs */

.retrain-main {
  /* No margin-top when inside .tab-content - parent handles positioning */
  min-height: calc(100vh - var(--header-height));
}

/* Tab content - Note: margin handled by parent .unified-main */
.tab-content {
  display: none;
  padding: 0 2rem 2rem 2rem;
  animation: fadeIn 0.2s ease-in-out;
  height: calc(100vh - var(--header-height) - var(--tab-nav-height));
  overflow: hidden;
}

.tab-content.active {
  display: block;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.pagination-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--theme-transition);
  font-size: 0.875rem;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Classification badges */
.classification-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

.classification-badge.nsfw {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.classification-badge.safe {
  background: var(--color-success-light);
  color: var(--color-success);
}

/* Test set metrics */
.metrics-section {
  background: var(--color-surface);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-shadow: none;
  margin-bottom: 2rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.metric-card {
  padding: 1rem;
  background: var(--color-background-tertiary);
  border-radius: 4px;
  border: 1px solid var(--color-border-light);
}

.metric-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Responsive design */
@media (max-width: 768px) {
  .tab-content {
    padding: 1rem;
  }

  .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}