/* Pokemon Bot Dashboard - Custom Theme */

/* CSS custom properties matching Tailwind config */
:root {
    --poke-red: #E3350D;
    --poke-blue: #2F6DB5;
    --poke-yellow: #F8D030;
    --poke-green: #4CAF50;
    --poke-dark: #1a1a2e;
    --poke-darker: #16213e;
    --poke-card: #1f2937;
}

/* HTMX indicator styles */
.htmx-indicator {
    opacity: 0;
    transition: opacity 300ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Channel row hover effect */
.channel-row {
    transition: background-color 150ms ease;
}

.channel-row:hover {
    background-color: rgba(47, 109, 181, 0.1);
}

/* Drag handle cursor */
.drag-handle {
    cursor: grab;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Status indicator dot */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.running {
    background-color: var(--poke-green);
    animation: pulse 2s ease-in-out infinite;
}

.status-dot.starting,
.status-dot.reconnecting,
.status-dot.restarting {
    background-color: var(--poke-yellow);
    animation: pulse 1.5s ease-in-out infinite;
}

.status-dot.stopped {
    background-color: #6b7280;
}

.status-dot.error {
    background-color: var(--poke-red);
}

/* Pulse animation for active status */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 8px 2px currentColor;
    }
}

/* SortableJS ghost class override */
.sortable-ghost {
    opacity: 0.4;
}

/* Live indicator dot */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.live-dot.live {
    background-color: var(--poke-green);
}

.live-dot.offline {
    background-color: #6b7280;
}

/* Pokemon type badge colors */
.type-badge { color: white; font-weight: 600; }
.type-normal { background-color: #A8A878; }
.type-fire { background-color: #F08030; }
.type-water { background-color: #6890F0; }
.type-electric { background-color: #F8D030; color: #333; }
.type-grass { background-color: #78C850; }
.type-ice { background-color: #98D8D8; color: #333; }
.type-fighting { background-color: #C03028; }
.type-poison { background-color: #A040A0; }
.type-ground { background-color: #E0C068; color: #333; }
.type-flying { background-color: #A890F0; }
.type-psychic { background-color: #F85888; }
.type-bug { background-color: #A8B820; }
.type-rock { background-color: #B8A038; }
.type-ghost { background-color: #705898; }
.type-dragon { background-color: #7038F8; }
.type-dark { background-color: #705848; }
.type-steel { background-color: #B8B8D0; color: #333; }
.type-fairy { background-color: #EE99AC; color: #333; }

/* Error event row highlight */
.event-error {
    border-left: 3px solid var(--poke-red);
    background-color: rgba(227, 53, 13, 0.08);
}

/* Error count badge */
.error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--poke-red);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Stat card */
.stat-card {
    background-color: var(--poke-card);
    border: 1px solid #374151;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--poke-yellow);
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}