/* Shared mobile card-stack behaviour for .table-responsive-stack tables.
   Previously duplicated inline in bookingMgmt/admin.php, _form.php, viewconsole.php. */

.col-fixed-120 {
    width: 120px;
    white-space: normal;
    word-break: break-word;
}

.col-fixed-200 {
    width: 200px;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 768px) {
    .table-responsive-stack thead {
        display: none;
    }

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

    .table-responsive-stack tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 8px;
        background: #fff;
    }

    .table-responsive-stack td {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        text-align: right;
    }

    .table-responsive-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
    }

    .table-responsive-stack td.text-end {
        justify-content: flex-start;
        gap: 10px;
    }

    .table-responsive-stack td.col-fixed-120,
    .table-responsive-stack td.col-fixed-200 {
        width: 100%;
    }
}