/* Bulk uploader page styles */

.bulk-uploader-cancel-button {
    min-height: 52px;
    padding: 0 14px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--coral);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    box-shadow: 5px 5px 0 rgba(21, 22, 26, 0.18), 9px 9px 0 var(--ink);
    transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.bulk-uploader-recover-button {
    min-height: 52px;
    padding: 0 14px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff3cf;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    box-shadow: 5px 5px 0 rgba(21, 22, 26, 0.12), 9px 9px 0 var(--ink);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.bulk-uploader-skip-button,
.bulk-uploader-retry-button,
.bulk-uploader-retry-pbr-button {
    min-height: 34px;
    padding: 0 10px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 900;
}

.bulk-uploader-skip-button {
    background: #ffffff;
    color: var(--coral);
}

.bulk-uploader-retry-button,
.bulk-uploader-retry-pbr-button {
    min-height: 34px;
    box-shadow: none !important;
}

.bulk-uploader-skip-button:disabled,
.bulk-uploader-retry-button:disabled,
.bulk-uploader-retry-pbr-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.bulk-uploader-cancel-button:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 rgba(21, 22, 26, 0.18), 12px 12px 0 var(--ink);
}

.bulk-uploader-recover-button:hover,
.bulk-uploader-recover-button:focus-visible {
    background: #ffe29e;
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 rgba(21, 22, 26, 0.16), 12px 12px 0 var(--ink);
}

.bulk-uploader-cancel-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    box-shadow: none;
}

.auth-switch a {
    color: var(--blue);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.content-page {
    display: grid;
    gap: 22px;
}

.content-hero h1 {
    margin: 0;
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 0.95;
}

.content-panel {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 30px);
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--panel-shadow);
}

.content-panel h2,
.content-panel p {
    margin: 0;
}

.content-panel h2 {
    font-size: 1.35rem;
}

.content-panel p {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.55;
}

.content-panel a {
    color: var(--blue);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.bulk-uploader-page {
    display: grid;
    gap: 22px;
}

.bulk-uploader-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.8fr);
    gap: 20px;
    align-items: stretch;
    background:
        linear-gradient(135deg, rgba(0, 168, 198, 0.16), transparent 42%),
        linear-gradient(315deg, rgba(245, 197, 66, 0.18), transparent 56%),
        #ffffff;
}

.bulk-uploader-hero-copy {
    display: grid;
    gap: 10px;
}

.bulk-uploader-status {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 5px 5px 0 var(--ink);
}

.bulk-uploader-status span,
.bulk-uploader-capability-grid span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bulk-uploader-status strong,
.bulk-uploader-capability-grid strong {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.05;
}

.bulk-uploader-status p,
.bulk-uploader-capability-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.bulk-uploader-status-tier-0 {
    background:
        linear-gradient(135deg, rgba(203, 215, 223, 0.46), transparent 50%),
        linear-gradient(315deg, rgba(245, 197, 66, 0.2), transparent 62%),
        #ffffff;
}

.bulk-uploader-status-tier-0 strong {
    color: var(--muted);
}

.bulk-uploader-status-tier-1 {
    background:
        linear-gradient(135deg, rgba(140, 198, 63, 0.24), transparent 46%),
        linear-gradient(315deg, rgba(0, 168, 198, 0.16), transparent 58%),
        #ffffff;
    box-shadow: 5px 5px 0 var(--lime), 10px 10px 0 var(--ink);
}

.bulk-uploader-status-tier-1 strong,
.bulk-uploader-status-tier-1 span {
    color: var(--green);
}

.bulk-uploader-status-tier-2 {
    background:
        linear-gradient(135deg, rgba(229, 72, 77, 0.18), transparent 40%),
        linear-gradient(315deg, rgba(0, 168, 198, 0.16), transparent 54%),
        linear-gradient(90deg, rgba(245, 197, 66, 0.16), transparent 100%),
        #ffffff;
    box-shadow: 5px 5px 0 var(--coral), 10px 10px 0 var(--cyan), 14px 14px 0 var(--ink);
}

.bulk-uploader-status-tier-2 strong,
.bulk-uploader-status-tier-2 span {
    color: var(--coral);
}

.bulk-uploader-status-tier-3 {
    background:
        radial-gradient(circle at top right, rgba(245, 197, 66, 0.34), transparent 34%),
        linear-gradient(135deg, rgba(0, 143, 104, 0.18), transparent 42%),
        linear-gradient(315deg, rgba(0, 168, 198, 0.16), transparent 54%),
        #fffef6;
    box-shadow: 5px 5px 0 var(--yellow), 10px 10px 0 var(--cyan), 14px 14px 0 var(--ink);
}

.bulk-uploader-status-tier-3 strong,
.bulk-uploader-status-tier-3 span {
    color: #8e5c00;
}

.bulk-uploader-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bulk-uploader-capability-grid article {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 248, 246, 0.98));
    box-shadow: var(--chroma-shadow-small);
}

.bulk-uploader-shell,
.bulk-uploader-staged {
    gap: 18px;
}

.bulk-uploader-shell-heading {
    align-items: start;
}

.bulk-uploader-form {
    gap: 16px;
}

.bulk-uploader-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 14px;
}

.bulk-uploader-form-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bulk-uploader-form .control-row {
    display: grid;
    gap: 8px;
}

.bulk-uploader-form .control-row small,
.bulk-uploader-gated p {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.45;
}

.bulk-uploader-pipeline-panel,
.bulk-uploader-plan-panel {
    gap: 12px;
}

.bulk-uploader-review-panel,
.bulk-uploader-review-form {
    display: grid;
    gap: 14px;
}

.bulk-uploader-review-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.bulk-uploader-review-heading h3,
.bulk-uploader-review-heading p {
    margin: 0;
}

.bulk-uploader-review-summary {
    margin-top: 4px;
}

.bulk-uploader-review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bulk-uploader-review-toggle,
.bulk-uploader-result-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 900;
}

.bulk-uploader-result-select {
    justify-self: start;
}

.bulk-uploader-review-badge {
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 4px 10px;
    background: #f4fff1;
    color: var(--green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bulk-uploader-review-badge-pending {
    background: #fff8d8;
    color: #8e5c00;
}

.bulk-uploader-review-badge-deleted {
    background: #ffe4e5;
    color: #a81d22;
}

.bulk-uploader-result-row-deleted {
    opacity: 0.74;
}

.bulk-uploader-live-status {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(0, 168, 198, 0.16), rgba(245, 197, 66, 0.16)),
        #ffffff;
}

.bulk-uploader-live-status[hidden] {
    display: none;
}

.bulk-uploader-file-preview {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(245, 197, 66, 0.18), rgba(0, 168, 198, 0.12)),
        #ffffff;
}

.bulk-uploader-file-count {
    margin: 0;
    color: var(--ink);
    font-weight: 900;
}

.bulk-uploader-file-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    font-weight: 800;
}

.bulk-uploader-action-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bulk-uploader-progress-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bulk-uploader-run-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.bulk-uploader-run-facts article,
.bulk-uploader-item-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.bulk-uploader-run-facts article {
    padding: 10px 12px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
}

.bulk-uploader-run-facts span,
.bulk-uploader-item-facts span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bulk-uploader-run-facts strong {
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 900;
}

.bulk-uploader-progress-meta strong,
.bulk-uploader-item-progress strong {
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 900;
}

.bulk-uploader-progress-meta span,
.bulk-uploader-item-progress small {
    color: var(--muted);
    font-weight: 800;
}

.bulk-uploader-progress-track {
    position: relative;
    overflow: hidden;
    height: 12px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: #edf2f6;
}

.bulk-uploader-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background:
        linear-gradient(90deg, var(--yellow), var(--cyan));
    transition: width 220ms ease;
}

.bulk-uploader-progress-fill[data-status="running"] {
    background:
        linear-gradient(90deg, var(--yellow), var(--cyan));
}

.bulk-uploader-progress-fill[data-status="completed"] {
    background:
        linear-gradient(90deg, var(--lime), var(--green));
}

.bulk-uploader-progress-fill[data-status="failed"] {
    background:
        linear-gradient(90deg, var(--coral), #a81d22);
}

.bulk-uploader-progress-fill[data-status="timeout"] {
    background:
        linear-gradient(90deg, #ff9155, var(--yellow));
}

.bulk-uploader-progress-fill[data-status="canceled"] {
    background:
        linear-gradient(90deg, #7b6cff, #4f95ff);
}

.bulk-uploader-progress-fill[data-status="queued"],
.bulk-uploader-progress-fill[data-status="idle"] {
    background:
        linear-gradient(90deg, #d3d9df, #adb8c4);
}

.bulk-uploader-item-progress {
    display: grid;
    gap: 6px;
    min-width: 210px;
}

.bulk-uploader-item-facts {
    justify-content: space-between;
}

.bulk-uploader-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bulk-uploader-item-actions form[hidden] {
    display: none;
}

.bulk-uploader-timeout-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 4px 8px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: #fff0d9;
    color: #9a4d00;
    font-size: 0.78rem;
    font-weight: 900;
}

.bulk-uploader-action-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 900;
}

.bulk-uploader-action-tags-inline {
    min-width: 220px;
}

.bulk-uploader-run-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bulk-uploader-run-actions form {
    margin: 0;
}

.bulk-uploader-manifest-button {
    width: fit-content;
    min-width: 260px;
}

.bulk-uploader-staged-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bulk-uploader-staged-summary article {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
}

.bulk-uploader-staged-summary span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bulk-uploader-staged-summary strong {
    color: var(--ink);
    line-height: 1.2;
}

.bulk-uploader-run-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.bulk-uploader-result-card > strong {
    font-size: 1.15rem;
    line-height: 1.1;
}

.bulk-uploader-result-list {
    display: grid;
    gap: 10px;
}

.bulk-uploader-result-row {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #ffffff;
}

.bulk-uploader-result-row strong {
    color: var(--ink);
    line-height: 1.1;
}

.bulk-uploader-result-row a {
    color: var(--blue);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.bulk-uploader-result-row small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.4;
}

.bulk-uploader-result-row-ok {
    background:
        linear-gradient(90deg, rgba(140, 198, 63, 0.18), rgba(0, 168, 198, 0.08)),
        #ffffff;
}

.bulk-uploader-result-row-error {
    background:
        linear-gradient(90deg, rgba(229, 72, 77, 0.18), rgba(245, 197, 66, 0.12)),
        #ffffff;
}

.bulk-uploader-result-row-timeout {
    background:
        linear-gradient(90deg, rgba(255, 145, 85, 0.18), rgba(245, 197, 66, 0.16)),
        #ffffff;
}


@media (max-width: 900px) {
    .bulk-uploader-hero,
    .bulk-uploader-capability-grid,
    .bulk-uploader-form-grid,
    .bulk-uploader-staged-summary,
    .bulk-uploader-run-facts {
        grid-template-columns: 1fr;
    }

    .bulk-uploader-form-grid-compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .bulk-uploader-run-actions,
    .bulk-uploader-review-actions,
    .bulk-uploader-item-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .bulk-uploader-manifest-button,
    .bulk-uploader-run-actions form,
    .bulk-uploader-run-actions a,
    .bulk-uploader-run-actions button,
    .bulk-uploader-review-actions button,
    .bulk-uploader-item-actions form,
    .bulk-uploader-item-actions button {
        width: 100%;
        min-width: 0;
    }

    .bulk-uploader-review-toggle {
        justify-content: flex-start;
    }

    .admin-table-panel {
        overflow: visible;
    }

    .admin-table-scroll {
        overflow: visible;
    }

    .admin-table {
        display: block;
        min-width: 0;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table tr[data-bulk-plan-row] {
        margin-bottom: 12px;
        border: 2px solid var(--ink);
        border-radius: 10px;
        background: #ffffff;
        box-shadow: var(--chroma-shadow-small);
        overflow: hidden;
    }

    .admin-table tr[data-bulk-plan-row] td {
        padding: 12px 14px;
        border: 0;
        border-bottom: 1px solid var(--line);
    }

    .admin-table tr[data-bulk-plan-row] td:last-child {
        border-bottom: 0;
    }

    .admin-table tr[data-bulk-plan-row] td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .bulk-uploader-action-tags-inline {
        min-width: 0;
    }

    .bulk-uploader-item-progress {
        min-width: 0;
    }

    .bulk-uploader-run-grid {
        grid-template-columns: 1fr;
    }

    .bulk-uploader-result-card {
        gap: 10px;
    }

    .bulk-uploader-result-row {
        gap: 8px;
        padding: 12px;
    }
}