/* =============================================================================
   Bulk Actions Overview page
   =============================================================================
   Scope: classes used exclusively on /bulkactions and /bulkactions/{id}/history.
   All rules are prefixed with .bulkactions-page so they cannot leak into other
   pages even though this file is loaded globally. The wrapper class is set on
   the top-level <div> in overview.blade.php and history.blade.php.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   Entity/Operation selector (top kachel with Product/Offer/Seller columns)
   -------------------------------------------------------------------------- */

/* One column in the 3-up grid, holds a group label + a stack of operation links */
.bulkactions-page .ba-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Group title row ("Product", "Offer", "Seller") with entity icon inline */
.bulkactions-page .ba-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Muted entity icon next to the group label */
.bulkactions-page .ba-group-label i {
    color: #6c757d;
}

/* Clickable operation entry ("Sync", "Validate Assets", ...). Uses Bootstrap's
   .btn.btn-outline-info for the blue outline and filled-on-hover effect, plus
   .active toggled by JS for the selected state. We only add inline-flex here
   so the operation icon sits inline with the label (Bootstrap .btn is inline-
   block by default). */
.bulkactions-page a.ba-operation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Small operation icon inside the pill. Dimmed when inactive, full when active. */
.bulkactions-page .ba-operation-icon {
    font-size: 0.8rem;
    opacity: 0.5;
}

.bulkactions-page a.ba-operation.active .ba-operation-icon {
    opacity: 1;
}


/* -----------------------------------------------------------------------------
   Selected files list in the upload modal
   -----------------------------------------------------------------------------
   Shown only when the user picks more than one file. A single file is already
   named in the custom-file label, so the list stays hidden in that case.
   -------------------------------------------------------------------------- */

/* Container: hidden by default; fixed max height with scroll for long lists. */
.bulkactions-page .selected-files-tags {
    display: none;
    max-height: 150px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    background-color: #f8f9fa;
}

/* Revealed state (JS toggles .has-files when multi-file selection happens). */
.bulkactions-page .selected-files-tags.has-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* File name pill. Piggybacks on Bootstrap .badge.badge-pill for layout;
   this rule only adds the pastel palette, non-bold weight, and line-breaking
   for long filenames (badges default to white-space: nowrap). */
.bulkactions-page .selected-files-tags .file-tag {
    background-color: #e7f3ff;
    color: #004085;
    border: 1px solid #b8daff;
    font-size: .875rem;
    font-weight: normal;
    word-break: break-all;
}


/* -----------------------------------------------------------------------------
   History table (history.blade.php)
   -----------------------------------------------------------------------------
   Pipeline widget (chunk stages, error badges, pulse animation) and row-level
   tweaks (muted empty-history rows, timestamp cluster under the status label,
   filename ellipsis). Used only on /bulkactions/{action}/history but lives
   here so the view stays template-only (no inline <style> block).
   -------------------------------------------------------------------------- */

/* Muted row for history entries that have no persisted data any more. */
.bulkactions-page .history-row--empty {
    color: darkgrey;
}

/* Small cluster of clock + calendar lines below the status label. */
.bulkactions-page .history-entry-meta {
    font-size: 0.85em;
    margin-top: 2px;
}

/* Icon spacing inside .history-entry-meta (fa-clock, fa-calendar). */
.bulkactions-page .history-entry-meta i {
    margin-right: 3px;
}

/* Filename cell: ellipsize long names, keep them on one line. */
.bulkactions-page .history-filename {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Pipeline capsule: holds stage-icons + arrows on one horizontal line. */
.bulkactions-page .pipeline-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 25px;
    border: 1px solid #e9ecef;
    white-space: nowrap;
}

/* Arrow between two stages; recolored via .active / .error modifiers. */
.bulkactions-page .pipeline-arrow {
    color: #6c757d;
    font-size: 12px;
    margin: 0 4px;
    opacity: 0.7;
}

.bulkactions-page .pipeline-arrow.active {
    color: #28a745;
    opacity: 1;
}

.bulkactions-page .pipeline-arrow.error {
    color: #dc3545;
    opacity: 1;
}