/* Background AI jobs – progress bars and the live feed. Hand-written (not Tailwind-built) like listing.css. */
.ai-progress {
    display: block;
    width: 100%;
    height: 0.625rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
    appearance: none;
    -webkit-appearance: none;
}
.ai-progress::-webkit-progress-bar { background: #e2e8f0; border-radius: 999px; }
.ai-progress::-webkit-progress-value { background: #2563eb; border-radius: 999px; transition: width 0.4s ease; }
.ai-progress::-moz-progress-bar { background: #2563eb; border-radius: 999px; }
.ai-progress-success::-webkit-progress-value { background: #059669; }
.ai-progress-success::-moz-progress-bar { background: #059669; }
.ai-progress-warning::-webkit-progress-value { background: #d97706; }
.ai-progress-warning::-moz-progress-bar { background: #d97706; }
.ai-progress-danger::-webkit-progress-value { background: #dc2626; }
.ai-progress-danger::-moz-progress-bar { background: #dc2626; }
.ai-progress-muted::-webkit-progress-value { background: #94a3b8; }
.ai-progress-muted::-moz-progress-bar { background: #94a3b8; }
.ai-progress-sm { height: 0.375rem; }

.ai-progress-row { display: flex; align-items: center; gap: 0.75rem; }
.ai-progress-row .ai-progress { flex: 1; }
.ai-progress-percent { min-width: 3rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: #0f172a; }

.ai-live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #2563eb;
    margin-right: 0.35rem;
    animation: ai-live-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

.ai-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: #475569;
}
.ai-current code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: #0f172a; background: #f1f5f9; padding: 0.1rem 0.4rem; border-radius: 0.375rem; }

.ai-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; max-height: 24rem; overflow: auto; }
.ai-feed-item {
    display: grid;
    grid-template-columns: 4.25rem 7.5rem minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    font-size: 0.8125rem;
}
.ai-feed-item-failed { background: #fef2f2; }
.ai-feed-item-skipped { opacity: 0.8; }
.ai-feed-time { color: #64748b; font-variant-numeric: tabular-nums; }
.ai-feed-sku { font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-feed-text { color: #334155; min-width: 0; overflow-wrap: anywhere; }
.ai-feed-text-error { color: #b91c1c; }
.ai-feed-empty { padding: 1.25rem 0.5rem; text-align: center; color: #64748b; font-size: 0.8125rem; }
@media (max-width: 640px) { .ai-feed-item { grid-template-columns: 4rem minmax(0, 1fr); } .ai-feed-text { grid-column: 1 / -1; } }

.ai-banner-job { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; width: 100%; }
.ai-banner-job .ai-progress { flex: 1 1 10rem; max-width: 20rem; }
.ai-banner-job-label { font-weight: 600; }
.ai-banner-job-numbers { font-variant-numeric: tabular-nums; white-space: nowrap; }

.ai-job-cell-progress { min-width: 12rem; }
.ai-job-cell-numbers { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.ai-status-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ai-status-tab { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: #475569; border: 1px solid #e2e8f0; background: #fff; }
.ai-status-tab:hover { background: #f1f5f9; }
.ai-status-tab-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.ai-status-tab-active:hover { background: #1d4ed8; }

/* Výpis úloh: dlouhý název se zalomí místo roztažení tabulky, akce jsou ikony + menu na konci řádku */
.ai-job-title { min-width: 14rem; max-width: 26rem; overflow-wrap: anywhere; }
.data-table td .row-actions { flex-wrap: nowrap; }
.data-table td .row-actions form { display: contents; }