/* Custom styles for the application - DaisyUI compatible */
.task-running {
    animation: pulse 2s infinite;
}

/* Enhanced console output using DaisyUI theme tokens */
.console-output {
    background: oklch(var(--b2));
    color: oklch(var(--bc));
    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    padding: 12px;
    border-radius: var(--rounded-box);
    height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid oklch(var(--b3));
}

.log-line {
    margin-bottom: 2px;
    padding: 2px 0;
    display: block;
}

/* Theme-aware log colors using DaisyUI semantic colors */
.log-line.error, .log-error {
    color: oklch(var(--er));
}

.log-line.success, .log-success {
    color: oklch(var(--su));
}

.log-line.info, .log-info {
    color: oklch(var(--in));
}

.log-line.warn, .log-warn {
    color: oklch(var(--wa));
}

.log-line.debug, .log-debug {
    color: oklch(var(--bc) / 0.6);
}

/* Enhanced log entry styling */
.log-entry {
    border-left: 3px solid transparent;
    padding-left: 8px;
    margin-bottom: 1px;
}

.log-entry.log-error {
    border-left-color: oklch(var(--er));
}

.log-entry.log-warn {
    border-left-color: oklch(var(--wa));
}

.log-entry.log-info {
    border-left-color: oklch(var(--in));
}

.log-entry.log-debug {
    border-left-color: oklch(var(--bc) / 0.3);
}

/* Custom scrollbar for console using theme tokens */
.console-output::-webkit-scrollbar {
    width: 8px;
}

.console-output::-webkit-scrollbar-track {
    background: oklch(var(--b3));
    border-radius: 4px;
}

.console-output::-webkit-scrollbar-thumb {
    background: oklch(var(--bc) / 0.3);
    border-radius: 4px;
}

.console-output::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--bc) / 0.5);
}

/* Custom animation for running tasks */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

.log-entry {
    transition: all 0.3s ease;
}

.log-entry:hover {
    transform: translateY(-1px);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Enhance badges and status indicators */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* Enhanced menu hover effects */
.menu li > a:hover {
    background: oklch(var(--p) / 0.1);
    color: oklch(var(--p));
}

/* Theme transition */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Helper classes for consistent spacing */
.content-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.section-spacing {
    @apply space-y-6;
}

/* Loading indicator styles */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block !important;
}

.htmx-request .btn:not(.htmx-indicator) {
    opacity: 0.7;
    pointer-events: none;
}

/* Ensure loading spinner is visible */
.loading-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Make sure the loading indicator takes precedence */
.htmx-indicator.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Add any additional custom styles here */