/* Mobile-first tweaks on top of Bootstrap 5 (loaded from CDN). */

/* Prevent iOS auto-zoom on focus: inputs must be >= 16px. */
input,
select,
textarea,
.form-control,
.form-select {
    font-size: 16px;
}

/* Comfortable tap targets everywhere. */
.btn,
.form-control,
.form-select,
.nav-link,
.dropdown-item {
    min-height: 44px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table td .btn-sm,
.table th .btn-sm {
    min-height: 38px;
}

/* Bigger, easier navbar targets on phones. */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        font-size: 1.05rem;
    }
    .navbar .dropdown-menu {
        border: 0;
        padding-left: 0.75rem;
    }
}

/* Sticky, full-width action bar for forms on small screens. */
.form-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.form-actions .btn {
    flex: 1 1 auto;
}

@media (max-width: 575.98px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    header h1.h4,
    header .h4 {
        font-size: 1.15rem;
    }
    .card-body {
        padding: 1rem;
    }

    .form-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin: 0 -0.25rem;
        padding: 0.75rem 0.25rem;
        border-top: 1px solid var(--bs-border-color);
        z-index: 20;
    }
    .form-actions .btn {
        flex: 1 1 100%;
    }

    /* ----- Responsive tables → stacked cards ----- */
    .table-stack thead {
        display: none;
    }
    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td,
    .table-stack tfoot {
        display: block;
        width: 100%;
    }
    .table-stack tr {
        border: 1px solid var(--bs-border-color);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.9rem;
        background: #fff;
    }
    .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        border: 0;
        border-bottom: 1px solid var(--bs-border-color-translucent);
        padding: 0.55rem 0;
        min-height: 0;
    }
    .table-stack td:last-child {
        border-bottom: 0;
    }
    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        text-align: left;
        white-space: nowrap;
    }
    /* Cells without a label (e.g. single-action) span full width. */
    .table-stack td[data-label=""]::before,
    .table-stack td:not([data-label])::before {
        content: "";
    }
    /* Action cell: stack buttons full width. */
    .table-stack td.actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding-top: 0.6rem;
    }
    .table-stack td.actions::before {
        content: "";
    }
    .table-stack td.actions .btn,
    .table-stack td.actions form {
        width: 100%;
    }
    .table-stack td.actions .btn {
        min-height: 42px;
    }

    /* Empty-state row stays centered. */
    .table-stack td.empty-row {
        justify-content: center;
        text-align: center;
    }
    .table-stack td.empty-row::before {
        content: "";
    }

    /* Form-style tables (delivery/return items): label above full-width field. */
    .table-stack--form td {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0.25rem;
    }
    .table-stack--form td::before {
        margin-bottom: 0.15rem;
    }
    .table-stack--form td .form-control,
    .table-stack--form td .form-select {
        width: 100%;
    }
    .table-stack--form td.actions .btn {
        width: 100%;
    }
}