/* Tablet app – mobile & small-screen styles */
/* Breakpoints: 768px (tablet), 600px (phone), 480px (small phone) */

/* ---------------------------------------------------------------------------
   Shared: safe area, touch targets, reduced padding
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .tablet-container {
        padding: 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    body {
        -webkit-tap-highlight-color: transparent;
    }

    /* Header: stack title + actions */
    .tablet-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        padding: 16px 20px;
        margin-bottom: 20px;
        border-radius: 10px;
    }

    .tablet-header h1 {
        font-size: 1.75rem;
        gap: 10px;
    }

    .header-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-actions .btn,
    .header-actions .btn-primary,
    .header-actions .btn-secondary {
        flex: 1 1 auto;
        min-width: 0;
        padding: 12px 16px;
        font-size: 0.95rem;
        min-height: 44px;
    }

    .btn-back {
        margin-right: 0;
        margin-bottom: 0;
        padding: 12px 16px;
        min-height: 44px;
    }

    /* Orders list: stacked layout */
    .order-row-main {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 20px;
    }

    .order-number {
        font-size: 1.75rem;
        min-width: 70px;
    }

    .order-info {
        flex: 1 1 100%;
        order: 2;
        gap: 12px;
    }

    .order-info > div {
        font-size: 1.1rem;
    }

    .order-customer-name {
        font-size: 1.2rem;
    }

    .order-action-button {
        order: 3;
        width: 100%;
        min-width: 0;
    }

    .order-action-button .btn-action {
        width: 100%;
        min-width: 0;
        padding: 14px 20px;
        min-height: 48px;
    }

    .order-status-badge.order-status-completed {
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding: 12px 20px;
    }

    .order-actions {
        order: 4;
        width: 100%;
        min-width: 0;
        justify-content: stretch;
    }

    .order-actions .btn {
        width: 100%;
        min-height: 48px;
    }

    /* Order details: single column */
    .order-details-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .info-card,
    .items-card,
    .actions-card {
        padding: 18px;
        margin-bottom: 16px;
    }

    .info-card.compact {
        padding: 12px 16px;
    }

    .info-card h2,
    .items-card h2,
    .actions-card h2 {
        font-size: 1.25rem;
        margin-bottom: 14px;
    }

    .order-item-row {
        padding: 14px 16px;
        gap: 14px;
    }

    .item-quantity-badge {
        font-size: 1.1rem;
        padding: 10px 14px;
        min-width: 52px;
    }

    .item-name {
        font-size: 1.15rem;
    }

    .action-buttons .btn-action {
        padding: 16px 24px;
        min-height: 48px;
    }
}

/* ---------------------------------------------------------------------------
   Sound selector bar (orders list)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sound-selector-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px;
        margin-bottom: 12px;
    }

    .sound-selector-bar label {
        width: 100%;
        font-size: 0.9rem;
    }

    .sound-select {
        flex: 1;
        min-width: 0;
        min-height: 44px;
    }

    .btn-test-sound {
        min-height: 44px;
    }

    .sound-bar-spacer {
        display: none;
    }

    .btn-momenteel {
        flex: 1 1 100%;
        min-height: 44px;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   Connect page
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .tablet-connect-container {
        padding: 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .tablet-connect-card {
        padding: 1.5rem;
    }

    .tablet-connect-card h1 {
        font-size: 1.5rem;
    }

    .tablet-connect-field input {
        min-height: 48px;
        font-size: 16px; /* avoids zoom on iOS */
    }

    .tablet-connect-submit {
        min-height: 48px;
        padding: 14px;
    }
}

/* ---------------------------------------------------------------------------
   Loyalty page
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .tablet-loyalty .loyalty-scan-section {
        margin: 1.5rem 0 0;
        padding: 1.25rem;
    }

    .tablet-loyalty .loyalty-or {
        margin: 1.25rem 0 0.75rem;
        font-size: 0.9rem;
    }

    .tablet-loyalty .loyalty-manual-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tablet-loyalty .loyalty-manual-row .btn-primary {
        width: 100%;
        min-height: 48px;
    }

    .loyalty-scan-area {
        padding: 0.75rem;
    }
}

@media (max-width: 600px) {
    .loyalty-modal-content {
        max-width: none;
        margin: 12px;
        margin-left: max(12px, env(safe-area-inset-left));
        margin-right: max(12px, env(safe-area-inset-right));
    }

    .loyalty-modal-actions button {
        min-height: 48px;
    }
}

/* ---------------------------------------------------------------------------
   Modals: full-bleed on small screens, touch-friendly
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .modal,
    .confirmation-modal,
    .pin-code-modal {
        padding: 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        align-items: flex-end;
    }

    .modal-content,
    .confirmation-modal-content,
    .pin-code-modal-content {
        max-width: none;
        width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header,
    .confirmation-modal-header {
        padding: 20px 20px 16px;
    }

    .modal-header h2,
    .confirmation-modal-header h2 {
        font-size: 1.35rem;
    }

    .confirmation-modal-header i {
        font-size: 2.75rem;
    }

    .modal-body,
    .confirmation-modal-body,
    .pin-code-modal-body {
        padding: 20px;
    }

    .modal-footer,
    .confirmation-modal-footer {
        padding: 16px 20px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        flex-wrap: wrap;
        gap: 10px;
    }

    .modal-footer .btn,
    .modal-footer .btn-primary,
    .modal-footer .btn-secondary,
    .confirmation-btn-cancel,
    .confirmation-btn-confirm {
        flex: 1 1 100%;
        min-height: 48px;
    }

    .pin-code-modal-content {
        border-radius: 16px 16px 0 0;
        padding: 24px 20px;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .pin-code-input {
        padding: 16px;
        font-size: 1.75rem;
        min-height: 56px;
    }

    .pin-code-submit-btn {
        min-height: 48px;
    }

    .generate-code-form-wrap .form-code-row {
        flex-direction: column;
    }

    .generate-code-form-wrap .form-code-row .btn-sm {
        width: 100%;
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------------------
   Discount codes list (if used on tablet)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .discount-codes-container {
        width: 100%;
    }

    .discount-code-row {
        padding: 14px 16px;
    }

    .discount-code-main {
        flex-direction: column;
        gap: 10px;
    }

    .discount-code-info {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .empty-state {
        padding: 40px 20px;
    }

    .empty-state i {
        font-size: 3rem;
    }

    .empty-state h2 {
        font-size: 1.35rem;
    }

    .empty-state p {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------------------
   Small phone: tighter typography and spacing
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .tablet-container {
        padding: 10px;
    }

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

    .order-number {
        font-size: 1.5rem;
        min-width: 60px;
    }

    .order-info > div {
        font-size: 1rem;
    }

    .order-customer-name {
        font-size: 1.1rem;
    }

    .btn-icon {
        padding: 12px 18px;
        font-size: 1.1rem;
    }

    .auto-refresh-toggle label {
        font-size: 1rem;
    }

    .auto-refresh-toggle input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}