/* aistarter dashboard — Lovable design system */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------ */
/* CSS Custom Properties — dark theme (default)                       */
/* ------------------------------------------------------------------ */
:root {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --card: 217 33% 17%;
    --card-foreground: 210 40% 98%;
    --primary: 213 94% 56%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217 19% 27%;
    --secondary-foreground: 210 40% 98%;
    --muted: 215 14% 34%;
    --muted-foreground: 215 20% 65%;
    --accent: 217 19% 27%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 215 14% 27%;
    --input: 215 14% 27%;
    --ring: 213 94% 56%;
    --radius: 0.5rem;
    --status-queued: 45 93% 58%;
    --status-running: 213 94% 56%;
    --status-completed: 142 71% 45%;
    --status-failed: 0 84% 60%;
    --status-cancelled: 215 14% 50%;
    --status-dead-letter: 270 60% 55%;
    --sidebar-background: 222 47% 11%;
    --sidebar-foreground: 215 20% 65%;
    --sidebar-border: 215 14% 27%;
}

/* ------------------------------------------------------------------ */
/* Light theme override                                               */
/* ------------------------------------------------------------------ */
.light {
    --background: 0 0% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --primary: 213 94% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 214 32% 91%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 85%;
    --input: 214 32% 85%;
    --ring: 213 94% 50%;
    --status-queued: 45 93% 47%;
    --status-running: 213 94% 50%;
    --status-completed: 142 71% 40%;
    --status-failed: 0 84% 55%;
    --status-cancelled: 215 14% 55%;
    --status-dead-letter: 270 60% 50%;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 215 16% 47%;
    --sidebar-border: 214 32% 85%;
}

/* ------------------------------------------------------------------ */
/* Base body & font                                                   */
/* ------------------------------------------------------------------ */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.font-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ------------------------------------------------------------------ */
/* Stat card                                                          */
/* ------------------------------------------------------------------ */
.stat-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1rem;
    transition: all 0.2s;
}

/* ------------------------------------------------------------------ */
/* Data table                                                         */
/* ------------------------------------------------------------------ */
.data-table {
    width: 100%;
    font-size: 0.875rem;
}

.data-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    color: hsl(var(--muted-foreground));
}

.data-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid hsl(var(--border));
}

.data-table tbody tr {
    transition: background-color 0.15s;
}

.data-table tbody tr:hover {
    background-color: hsl(var(--accent) / 0.5);
}

/* ------------------------------------------------------------------ */
/* Status badges                                                      */
/* ------------------------------------------------------------------ */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-queued {
    background-color: hsl(var(--status-queued) / 0.15);
    color: hsl(var(--status-queued));
    border: 1px solid hsl(var(--status-queued) / 0.3);
}

.status-running {
    background-color: hsl(var(--status-running) / 0.15);
    color: hsl(var(--status-running));
    border: 1px solid hsl(var(--status-running) / 0.3);
}

.status-completed {
    background-color: hsl(var(--status-completed) / 0.15);
    color: hsl(var(--status-completed));
    border: 1px solid hsl(var(--status-completed) / 0.3);
}

.status-failed {
    background-color: hsl(var(--status-failed) / 0.15);
    color: hsl(var(--status-failed));
    border: 1px solid hsl(var(--status-failed) / 0.3);
}

.status-cancelled {
    background-color: hsl(var(--status-cancelled) / 0.15);
    color: hsl(var(--status-cancelled));
    border: 1px solid hsl(var(--status-cancelled) / 0.3);
}

.status-dead_letter {
    background-color: hsl(var(--status-dead-letter) / 0.15);
    color: hsl(var(--status-dead-letter));
    border: 1px solid hsl(var(--status-dead-letter) / 0.3);
}

/* ------------------------------------------------------------------ */
/* Live dot indicator                                                 */
/* ------------------------------------------------------------------ */
.live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    display: inline-block;
    background-color: hsl(var(--status-completed));
    animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ------------------------------------------------------------------ */
/* Animated number                                                    */
/* ------------------------------------------------------------------ */
.animate-number {
    animation: number-tick 0.3s ease-out;
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                          */
/* ------------------------------------------------------------------ */
@keyframes pulse-ring {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes number-tick {
    0% {
        opacity: 0.5;
        transform: translateY(-4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------------------------ */
/* Scrollbar (preserved)                                              */
/* ------------------------------------------------------------------ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ------------------------------------------------------------------ */
/* Event stream container (preserved)                                 */
/* ------------------------------------------------------------------ */
.event-stream {
    max-height: 28rem;
    overflow-y: auto;
}

/* ------------------------------------------------------------------ */
/* Table row hover state (preserved)                                  */
/* ------------------------------------------------------------------ */
tr.cursor-pointer:hover td {
    background-color: rgba(55, 65, 81, 0.5);
}

/* ------------------------------------------------------------------ */
/* Smooth transitions (preserved)                                     */
/* ------------------------------------------------------------------ */
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-duration: 150ms;
}