/**
 * Natural Gas - PWA & Mobile Enhancements
 * Additional responsive styles for PWA standalone mode and mobile devices
 */

/* PWA standalone mode adjustments */
@media (display-mode: standalone) {
    /* Remove extra top padding in standalone mode since there's no browser chrome */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Sticky header accounts for safe area */
    header.sticky {
        top: env(safe-area-inset-top);
    }
}

/* Touch-friendly tap targets - minimum 44px */
@media (max-width: 768px) {
    /* Ensure buttons and links are easily tappable */
    .nav-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Better spacing for form inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        min-height: 44px;
    }
    
    /* Cards should have slightly more padding on mobile for touch */
    .bg-white.rounded-lg.shadow,
    .bg-white.rounded-xl {
        padding: 1rem;
    }
    
    /* Make action buttons in tables/cards more tappable */
    a.text-indigo-600,
    button.text-indigo-600,
    a.text-red-600,
    button.text-red-600 {
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide scrollbar on mobile for cleaner look */
    .overflow-x-auto::-webkit-scrollbar {
        height: 4px;
    }
    .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }
}

/* Small mobile devices */
@media (max-width: 375px) {
    /* Reduce font sizes slightly */
    .text-3xl {
        font-size: 1.5rem !important;
    }
    .text-2xl {
        font-size: 1.25rem !important;
    }
}

/* Prevent text overflow in tight spaces */
.truncate-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Pull to refresh indicator area */
body {
    overscroll-behavior-y: contain;
}

/* Disable long-press context menu on app-like elements */
@media (display-mode: standalone) {
    img, a, button {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* But allow text selection in content areas */
    p, span, td, th, li, h1, h2, h3, h4, h5, h6, label, input, textarea {
        -webkit-user-select: text;
        user-select: text;
    }
}