/* Custom styles for tape details section */

/* Make cards in the tape details section more compact */
.tape-info-row {
    margin-bottom: 1rem;
}

/* Make all cards in the tape details info section the same height */
.tape-info-row .card {
    margin-bottom: 0.5rem;
    height: 100%;
}

.tape-info-row .card-body {
    min-height: 90px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
}

.tape-info-row .card-title {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* Ensure proper spacing in the card body */
.tape-info-row .card-body > div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Make elements inside cards more compact */
.tape-info-row .d-flex {
    margin-bottom: 0.25rem;
}

.tape-info-row small.text-muted {
    font-size: 0.75rem;
    line-height: 1;
}

.tape-info-row .card-text {
    font-size: 0.95rem;
    line-height: 1.2;
}

.tape-info-row .btn-sm {
    padding: 0.1rem 0.25rem;
    font-size: 0.75rem;
}

/* Keep cards on one row when enough space is available */
@media (min-width: 768px) {
    .tape-info-row {
        display: flex;
        flex-wrap: nowrap;
    }
    
    .tape-info-row .col-md-4 {
        width: calc(100% / 3);
        flex: 0 0 calc(100% / 3);
        max-width: calc(100% / 3);
    }
}

/* Make sure the cards stay responsive at smaller screen sizes */
@media (max-width: 767px) {
    .tape-info-row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .tape-info-row .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}