input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ═══════════════════════════════════════════════════════════
 * Prometheus — NexusEdge Design System
 * Custom component classes for the Leptos WASM UI
 * ═══════════════════════════════════════════════════════════ */

@layer base {
  :root {
    --color-primary: #14b8a6;
    --color-primary-dark: #0d9488;
    --color-bg-cream: #fffdf7;
    --color-bg-off-white: #faf8f5;
    --color-bg-warm-beige: #f5ede8;
    --color-border-tan: #e8d4c4;
    --color-border-tan-hover: #d4b8a8;
    --color-terracotta: #c4a484;
    --color-russet: #c2714f;
  }

  body {
    @apply bg-bg-cream text-gray-900 font-sans antialiased;
  }

  /* Smooth scrolling globally */
  html {
    scroll-behavior: smooth;
  }

  /* Focus styles for accessibility */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
  }
}

@layer components {
  /* ── Cards ──────────────────────────────────────────── */
  .prometheus-card {
    @apply bg-cream border border-border-tan rounded-card p-6
           shadow-card transition-all duration-200;
  }
  .prometheus-card:hover {
    @apply border-border-tan-hover shadow-card-hover;
  }

  /* ── Buttons ────────────────────────────────────────── */
  .btn-primary {
    @apply bg-primary text-white rounded-btn px-4 py-2
           font-medium transition-colors duration-200
           hover:bg-primary-dark
           focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-ghost {
    @apply bg-transparent border border-primary text-primary
           rounded-btn px-4 py-2 font-medium transition-all duration-200
           hover:bg-primary-light
           focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
  }

  .btn-destructive {
    @apply bg-error text-white rounded-btn px-4 py-2
           font-medium transition-colors duration-200
           hover:bg-red-700
           focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2;
  }

  .btn-icon {
    @apply p-2 rounded-btn text-gray-500 transition-colors duration-200
           hover:text-primary hover:bg-primary-light;
  }

  /* ── Form inputs ────────────────────────────────────── */
  .input-field {
    @apply border border-border-tan rounded-btn px-3 py-2
           bg-bg-off-white text-gray-900
           transition-colors duration-200
           placeholder:text-gray-400
           focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
  }

  .input-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .input-error {
    @apply text-error text-sm mt-1;
  }

  /* ── Metric cards ───────────────────────────────────── */
  .metric-card {
    @apply bg-bg-off-white border border-border-tan rounded-card p-4
           transition-all duration-200;
  }

  .metric-value {
    @apply text-terracotta text-3xl font-bold leading-none;
  }

  .metric-label {
    @apply text-gray-500 text-sm font-medium mt-1;
  }

  .metric-trend {
    @apply text-xs font-medium;
  }
  .metric-trend-up {
    @apply text-success;
  }
  .metric-trend-down {
    @apply text-error;
  }

  /* ── Badges ─────────────────────────────────────────── */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-badge
           text-xs font-medium;
  }

  .badge-online {
    @apply bg-success/20 text-success;
  }
  .badge-training {
    @apply bg-primary/20 text-primary;
  }
  .badge-error {
    @apply bg-error/20 text-error;
  }
  .badge-deployed {
    @apply bg-info/20 text-info;
  }
  .badge-pending {
    @apply bg-warning/20 text-warning;
  }

  /* ── Sidebar ────────────────────────────────────────── */
  .sidebar {
    @apply w-sidebar bg-cream border-r border-border-tan
           flex flex-col h-screen fixed left-0 top-0 z-40;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-4 py-2.5 mx-2 rounded-btn
           text-gray-600 font-medium text-sm
           transition-all duration-200
           hover:bg-primary-light hover:text-primary;
  }

  .sidebar-link-active {
    @apply bg-primary-light text-primary font-semibold;
  }

  /* ── Header ─────────────────────────────────────────── */
  .header {
    @apply sticky top-0 z-30 bg-cream/80 backdrop-blur-sm
           border-b border-border-tan px-6 py-3
           flex items-center justify-between;
  }

  /* ── Tables ─────────────────────────────────────────── */
  .data-table {
    @apply w-full text-sm;
  }
  .data-table thead {
    @apply bg-bg-off-white;
  }
  .data-table th {
    @apply px-4 py-3 text-left text-xs font-semibold text-gray-500
           uppercase tracking-wider border-b border-border-tan;
  }
  .data-table td {
    @apply px-4 py-3 border-b border-border-tan/50 text-gray-700;
  }
  .data-table tbody tr {
    @apply transition-colors duration-150 hover:bg-bg-off-white;
  }

  /* ── Modal ──────────────────────────────────────────── */
  .modal-backdrop {
    @apply fixed inset-0 z-50 bg-black/50 backdrop-blur-sm
           flex items-center justify-center p-4;
  }
  .modal-content {
    @apply bg-cream rounded-card shadow-modal p-6
           w-full max-w-lg max-h-[90vh] overflow-y-auto
           animate-fade-in;
  }

  /* ── Toast notifications ────────────────────────────── */
  .toast {
    @apply fixed bottom-4 right-4 z-[100] px-4 py-3 rounded-btn
           shadow-lg text-white font-medium text-sm
           animate-slide-in-right;
  }
  .toast-success {
    @apply bg-gradient-to-r from-primary to-primary-dark;
  }
  .toast-error {
    @apply bg-error;
  }
  .toast-warning {
    @apply bg-warning;
  }

  /* ── Pipeline visualization ─────────────────────────── */
  .pipeline-stage {
    @apply flex flex-col items-center gap-2 px-4 py-3
           rounded-card border border-border-tan bg-bg-off-white
           transition-all duration-300;
  }
  .pipeline-stage-active {
    @apply border-primary bg-primary-light ring-2 ring-primary/30;
  }
  .pipeline-stage-completed {
    @apply border-success/50 bg-success/10;
  }
  .pipeline-connector {
    @apply w-8 h-0.5 bg-border-tan self-center;
  }
  .pipeline-connector-active {
    @apply bg-primary;
  }

  /* ── Chat interface ─────────────────────────────────── */
  .chat-message-user {
    @apply bg-primary text-white rounded-2xl rounded-br-sm
           px-4 py-2.5 max-w-[80%] ml-auto;
  }
  .chat-message-agent {
    @apply bg-bg-off-white border border-border-tan
           rounded-2xl rounded-bl-sm px-4 py-2.5 max-w-[80%];
  }

  /* ── Code blocks ────────────────────────────────────── */
  .code-block {
    @apply bg-gray-900 text-gray-100 rounded-btn p-4 font-mono text-sm
           overflow-x-auto;
  }

  /* ── File upload ────────────────────────────────────── */
  .file-upload-zone {
    @apply border-2 border-dashed border-border-tan rounded-card
           p-8 text-center transition-colors duration-200
           hover:border-primary hover:bg-primary-light/30;
  }
  .file-upload-zone-active {
    @apply border-primary bg-primary-light/50;
  }

  /* ── Skeleton loaders ───────────────────────────────── */
  .skeleton {
    @apply bg-bg-warm-beige rounded animate-pulse;
  }
  .skeleton-text {
    @apply h-4 w-full skeleton;
  }
  .skeleton-card {
    @apply h-32 w-full skeleton rounded-card;
  }

  /* ── Scrollbar styling ──────────────────────────────── */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-border-tan rounded-full hover:bg-border-tan-hover;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}