/* FD Dashboard — Custom styles (Tailwind handles most styling) */

/* ── Global Transitions ── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, opacity;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Terminal / Raw Logs ── */
#terminal-output::-webkit-scrollbar { width: 8px; }
#terminal-output::-webkit-scrollbar-track { background: #1a1a2e; }
#terminal-output::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 4px; }
#terminal-output::-webkit-scrollbar-thumb:hover { background: #5a5a7a; }

.terminal-line {
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}
.terminal-line-system { color: #94a3b8; font-style: italic; }
.terminal-line-error { color: #f87171; }

/* ── Log Viewer ── */
.log-viewer::-webkit-scrollbar { width: 6px; }
.log-viewer::-webkit-scrollbar-track { background: #f1f5f9; }
.log-viewer::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Sidebar ── */
.nav-link.active { background-color: #3b82f6; }

#sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

/* ── Card Hover Lift ── */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ── Loading Skeleton ── */
@keyframes skeleton-pulse {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
}

.skeleton-text {
    height: 1em;
    width: 80%;
}

.skeleton-number {
    height: 2rem;
    width: 60%;
    margin-top: 4px;
}

.skeleton-card {
    height: 80px;
    border-radius: 12px;
}

/* ── Pulse Animation ── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.animate-pulse-dot {
    animation: pulse-dot 1.5s ease-in-out infinite;
}

/* ── Toast Animations ── */
@keyframes toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.toast-enter { animation: toast-in 0.3s ease-out; }

@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
.toast-exit { animation: toast-out 0.3s ease-in forwards; }

/* ── Step Card Animations ── */
@keyframes step-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.step-card {
    animation: step-in 0.2s ease-out;
}
.step-card.step-collapsed {
    opacity: 0.7;
    transition: all 0.2s ease;
}
.step-card.step-collapsed:hover {
    opacity: 1;
}

/* Step cards scrollbar */
#step-cards::-webkit-scrollbar { width: 4px; }
#step-cards::-webkit-scrollbar-track { background: transparent; }
#step-cards::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
#step-cards::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Sidebar Drag & Drop ── */
.nav-draggable { cursor: grab; user-select: none; }
.nav-draggable:active { cursor: grabbing; }

/* ── Confirmation Overlay ── */
.confirm-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* ── Status Badges ── */
.badge-running { background-color: #3b82f6; color: white; }
.badge-completed { background-color: #22c55e; color: white; }
.badge-failed { background-color: #ef4444; color: white; }
.badge-stopped { background-color: #f59e0b; color: white; }
.badge-queued { background-color: #8b5cf6; color: white; }
.badge-starting { background-color: #6b7280; color: white; }

/* ── Spinner ── */
.spinner {
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Scrollbar (general) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Table Row Hover ── */
tbody tr {
    transition: background-color 0.1s ease;
}

/* ── Empty State ── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}
.empty-state svg {
    margin: 0 auto 0.75rem;
    color: #e5e7eb;
}

/* ── Progress Bar Glow ── */
#progress-bar {
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}
#progress-bar.bg-green-500 {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}