/* Inline background-job bar, shown at the top of a page (above its header) while a long-running
   job is in flight — archive imports and bulk photo operations (trash/restore/delete/favorite/
   album/empty-trash). It replaces the old floating toast region: anchored in the page flow so it
   never floats over or blocks content. Survives navigation — every page re-attaches to a live job
   on load (see lib/bulk-jobs.js) and re-renders this bar, so progress follows the user around. */
.job-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.job-bar[hidden] { display: none; }

.job-bar-text { white-space: nowrap; }

.job-bar-track {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}
.job-bar-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}
/* Before a job knows its total (e.g. empty-trash still counting) sweep an indeterminate sliver
   instead of a misleading filled bar. */
.job-bar.indeterminate .job-bar-fill {
    width: 30% !important;
    transition: none;
    animation: job-bar-sweep 1.1s ease-in-out infinite;
}
@keyframes job-bar-sweep {
    0%   { margin-left: -30%; }
    100% { margin-left: 100%; }
}

/* Error state: sticky (no auto-dismiss) so a failure is seen even after the user walks away and
   comes back — the bar's text spans the row and a ✕ dismisses it. */
.job-bar.is-error {
    color: var(--text-primary);
    border-bottom-color: #f87171;
}
.job-bar.is-error .job-bar-icon { color: #f87171; display: flex; flex-shrink: 0; }
.job-bar.is-error .job-bar-text { flex: 1; white-space: normal; }

.job-bar-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.job-bar-dismiss:hover { color: var(--text-primary); }