/* Responsive utilities */

/* Large screens and up */
@media (min-width: 1920px) {
    .form-control {
        max-width: 800px;
        font-size: var(--font-size-xl);
        padding: var(--spacing-lg) var(--spacing-xl);
    }

    .products-table {
        font-size: var(--font-size-lg);
    }

    .products-table th,
    .products-table td {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

/* Desktop */
@media (max-width: 1200px) {
    .form-table td {
        padding: var(--spacing-md);
    }

    .filter-group {
        min-width: 200px;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .container {
        padding: 15px;
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    .form-control {
        max-width: 500px;
    }

    .package-unit-container {
        flex-direction: column;
        align-items: stretch;
        max-width: 500px;
    }

    .filter-group {
        min-width: 180px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    /* Stack form table */
    .form-table,
    .form-table tbody,
    .form-table tr,
    .form-table td {
        display: block;
    }

    .form-table .form-label {
        width: auto;
        text-align: left;
        padding-right: 0;
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-sm);
    }

    .form-control {
        max-width: none;
    }

    /* Stack filters */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }

    .filter-group {
        min-width: auto;
        flex: none;
    }

    /* Responsive tables */
    .products-table {
        font-size: var(--font-size-sm);
    }

    .products-table th,
    .products-table td {
        padding: var(--spacing-sm);
    }

    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
        min-width: 150px;
    }

    .card-header {
        padding: var(--spacing-md);
    }

    .card-body {
        padding: var(--spacing-md);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .container {
        padding: 5px;
    }

    h2 {
        font-size: var(--font-size-lg);
    }

    .filter-bar {
        padding: var(--spacing-md);
    }

    .btn {
        min-width: auto;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .form-table td {
        padding: var(--spacing-sm);
    }

    .btn-container {
        padding: var(--spacing-md);
    }
}

/* Utility classes */
.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }

.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }

.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--color-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }