/* Responsive Design */

/* Touch-friendly enhancements */
@media (pointer: coarse) {
    .btn, button {
        min-height: 44px;
        min-width: 44px;
    }

    input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    select, input, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}

@media (max-width: 1024px) {
    .navbar-container {
        padding: 1rem;
    }

    .main-container {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .navbar-container {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 0.75rem 1rem;
    }

    .navbar-menu {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .nav-link {
        text-align: center;
        padding: 0.5rem 0.75rem;
    }

    .menu-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    .admin-card {
        padding: 1rem !important;
    }

    .card-icon {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .admin-card h3 {
        font-size: 1rem;
    }

    .admin-card p {
        font-size: 0.8rem;
    }

    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        font-size: 0.85rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.75rem 0.5rem !important;
    }

    .form-actions {
        flex-direction: column !important;
    }

    .btn {
        width: 100%;
    }

    .orders-grid {
        grid-template-columns: 1fr !important;
    }

    /* Menu images responsive */
    .menu-images-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }

    .menu-image-item img {
        height: 120px;
    }

    /* Order page mobile */
    .menu-item-row {
        padding: 0.75rem !important;
    }

    .order-container {
        padding: 0;
    }

    /* Calendar mobile */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .card-body {
        padding: 0.5rem !important;
    }

    /* Store card grid responsive */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(340px"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .navbar-brand a {
        font-size: 1.2rem;
    }

    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .btn-small {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .login-card,
    .form-card {
        margin: 0.5rem !important;
        padding: 1rem !important;
    }

    .menu-card,
    .order-card,
    .admin-card {
        padding: 0.75rem !important;
    }

    .admin-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }

    .card-icon {
        font-size: 1.75rem !important;
        margin-bottom: 0.25rem !important;
    }

    .admin-card h3 {
        font-size: 0.9rem;
        margin: 0.25rem 0;
    }

    .admin-card p {
        font-size: 0.75rem;
        display: none;
    }

    .menu-card-header {
        flex-direction: column;
    }

    .price {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }

    .password-display {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1rem;
    }

    .admin-container {
        padding: 0.75rem !important;
    }

    .admin-header h1 {
        font-size: 1.5rem;
    }

    /* Menu images small screen */
    .menu-images-grid {
        grid-template-columns: 1fr !important;
    }

    .menu-image-item img {
        height: 180px;
    }

    /* Order form mobile */
    .menu-item-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .menu-item-row label {
        font-size: 0.95rem;
    }

    /* Filter bar mobile */
    .filter-bar {
        flex-direction: column !important;
    }

    .filter-bar .btn {
        width: 100%;
    }

    /* Date picker area */
    div[style*="display: flex"][style*="查詢日期"] {
        flex-direction: column !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Print Styles */
@media print {
    .navbar, .footer, .admin-actions, .form-actions {
        display: none;
    }

    body {
        background: white;
    }

    .admin-table, .orders-grid {
        page-break-inside: avoid;
    }
}