/**
 * Mobile-First CSS Optimizations for BillChain Lite
 * Following industry best practices for mobile UX/UI
 * Based on: Material Design, iOS Human Interface Guidelines, and Web Accessibility Standards
 */

/* ===================================================================
   TYPOGRAPHY - Mobile-First Font Sizes
   =================================================================== */

/* Base font size optimized for mobile readability (16px minimum) */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 640px) {
    h1 { font-size: 1.75rem; line-height: 1.3; } /* 28px */
    h2 { font-size: 1.5rem; line-height: 1.4; }   /* 24px */
    h3 { font-size: 1.25rem; line-height: 1.4; }  /* 20px */
    p, body { font-size: 1rem; line-height: 1.6; } /* 16px */
}

/* ===================================================================
   TOUCH TARGETS - Minimum 44x44px (Apple HIG Standard)
   =================================================================== */

/* Ensure all interactive elements meet minimum touch target size */
@media (max-width: 1024px) {
    button,
    a.btn,
    .touch-target,
    input[type="button"],
    input[type="submit"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
    }

    /* Larger tap targets for primary actions */
    .btn-primary,
    .action-button {
        min-height: 56px !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }

    /* Icon buttons need proper touch area even if icon is small */
    button > i,
    a > i {
        pointer-events: none; /* Click passes through icon to button */
    }
}

/* ===================================================================
   SPACING & LAYOUT - Mobile-Optimized Padding/Margins
   =================================================================== */

@media (max-width: 640px) {
    /* Reduce excessive padding on mobile */
    .container,
    .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Cards should have less padding on mobile */
    .card,
    .bg-white {
        padding: 1rem !important;
    }

    /* Stack form fields vertically with proper spacing */
    form > div,
    .form-group {
        margin-bottom: 1.25rem;
    }

    /* Reduce gaps between grid items */
    .grid {
        gap: 0.75rem !important;
    }
}

/* ===================================================================
   FORMS - Mobile-Optimized Input Fields
   =================================================================== */

@media (max-width: 1024px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        min-height: 48px !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        border: 2px solid #e5e7eb !important;
    }

    /* Focus state more prominent on mobile */
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        outline: none !important;
    }

    /* Labels more prominent on mobile */
    label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
}

/* ===================================================================
   NAVIGATION - Mobile Menu Optimizations
   =================================================================== */

/* Hide desktop navigation on mobile */
@media (max-width: 1023px) {
    .desktop-nav {
        display: none !important;
    }
}

/* Show mobile navigation only on small screens */
@media (min-width: 1024px) {
    #mobileMenuButton,
    #mobileMenuOverlay {
        display: none !important;
    }
}

/* Mobile menu animations */
.mobile-menu-enter {
    animation: slideInLeft 0.3s ease-out;
}

.mobile-menu-exit {
    animation: slideOutLeft 0.3s ease-in;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* ===================================================================
   TABLES - Responsive Table Design
   =================================================================== */

@media (max-width: 768px) {
    /* Option 1: Horizontal scroll for tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        display: block;
        width: 100%;
    }

    table {
        min-width: 600px; /* Prevent table from being too narrow */
    }

    /* Option 2: Stack table rows as cards (better UX for small tables) */
    .table-cards {
        display: block;
    }

    .table-cards thead {
        display: none; /* Hide headers */
    }

    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }

    .table-cards tr {
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1rem;
        background: white;
    }

    .table-cards td {
        padding: 0.5rem 0;
        border: none;
    }

    /* Show label for each cell */
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        margin-right: 0.5rem;
        color: #6b7280;
    }
}

/* ===================================================================
   CARDS - Mobile-Optimized Card Layout
   =================================================================== */

@media (max-width: 640px) {
    /* Make cards full-width on mobile */
    .card {
        border-radius: 12px !important;
        margin-bottom: 1rem !important;
    }

    /* Stack card grids */
    .card-grid {
        grid-template-columns: 1fr !important;
    }

    /* Horizontal scroll for card lists */
    .card-list-horizontal {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .card-list-horizontal > * {
        flex: 0 0 85% !important;
        scroll-snap-align: start !important;
    }
}

/* ===================================================================
   MODALS & OVERLAYS - Mobile-Optimized
   =================================================================== */

@media (max-width: 640px) {
    /* Full-screen modals on mobile */
    .modal,
    .dialog {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Bottom sheets for mobile (better UX than full screen) */
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
}

/* ===================================================================
   CHARTS & GRAPHS - Mobile Optimizations
   =================================================================== */

@media (max-width: 640px) {
    /* Make charts responsive */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Reduce chart legend size on mobile */
    .chart-legend {
        font-size: 0.75rem !important;
    }

    /* Chart containers */
    .chart-container {
        padding: 1rem !important;
        overflow-x: auto !important;
    }
}

/* ===================================================================
   CONTEXT SWITCHER - Mobile Optimizations
   =================================================================== */

@media (max-width: 768px) {
    /* Make context switcher compact */
    #contextSwitcherContainer {
        font-size: 0.875rem !important;
    }

    /* Hide long text, show only icons on very small screens */
    @media (max-width: 480px) {
        .context-switcher-text {
            display: none !important;
        }

        .context-switcher-icon {
            display: block !important;
        }
    }
}

/* ===================================================================
   UTILITIES - Mobile-Specific Helper Classes
   =================================================================== */

/* Hide on mobile */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Full-width on mobile */
@media (max-width: 640px) {
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===================================================================
   PERFORMANCE - Hardware Acceleration & Smooth Scrolling
   =================================================================== */

/* Enable smooth scrolling globally */
html {
    scroll-behavior: smooth;
}

/* Hardware acceleration for animated elements */
.animated,
.transition,
button,
a {
    will-change: transform, opacity;
    transform: translateZ(0); /* Force GPU acceleration */
}

/* Optimize scrolling performance */
.overflow-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* ===================================================================
   ACCESSIBILITY - Mobile Accessibility Enhancements
   =================================================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button,
    a,
    input {
        border: 2px solid currentColor !important;
    }
}

/* ===================================================================
   SAFE AREAS - iOS Notch & Bottom Bar Support
   =================================================================== */

@supports (padding: max(0px)) {
    .safe-area-top {
        padding-top: max(env(safe-area-inset-top), 1rem) !important;
    }

    .safe-area-bottom {
        padding-bottom: max(env(safe-area-inset-bottom), 1rem) !important;
    }

    .safe-area-left {
        padding-left: max(env(safe-area-inset-left), 1rem) !important;
    }

    .safe-area-right {
        padding-right: max(env(safe-area-inset-right), 1rem) !important;
    }
}

/* ===================================================================
   LOADING STATES - Mobile-Optimized Skeletons
   =================================================================== */

@media (max-width: 640px) {
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s ease-in-out infinite;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
}

/* ===================================================================
   PWA SUPPORT - Full Screen Mode
   =================================================================== */

@media (display-mode: standalone) {
    /* Styles when app is installed as PWA */
    body {
        user-select: none; /* Disable text selection in PWA mode */
        -webkit-user-select: none;
    }
}