.attachment-header {
    background: #f5f7fb;
    border: 1px solid #e3e6ec;
    border-radius: 0;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

.attachment-card {
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 0;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .attachment-card:hover {
        border-color: #cdd4e0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    }

.order-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .4rem;
    border-radius: 0;
    background: #eef1f6;
    color: #465266;
    font-size: .78rem;
    font-weight: 700;
}

.attachment-name {
    font-size: .95rem;
    color: #212529;
}

/* Stacked/mobile view: give each row its own visual grouping since the
   desktop header is hidden and columns collapse to full width */
@media (max-width: 991.98px) {
    .attachment-card {
        row-gap: .35rem;
    }

    .attachment-name {
        font-size: 1rem;
    }
}