/* 
 * ELITE RMB Responsive Styles
 * This file contains mobile-friendly styles for the ELITE RMB application
 */

/* Base responsive adjustments */
@media (max-width: 768px) {
    /* General spacing and sizing */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Adjust font sizes for better readability on small screens */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    /* Improve form elements on mobile */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
    
    /* Make buttons more tappable */
    button, .btn, [type="button"], [type="submit"] {
        padding: 0.75rem 1rem !important;
        min-height: 44px; /* Minimum touch target size */
    }
    
    /* Adjust table display for small screens */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Fix navigation for mobile */
    nav .container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Improve card layouts */
    .card, .bg-white {
        padding: 1rem !important;
    }
    
    /* Fix grid layouts */
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust spacing */
    .py-10 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Fix overflow issues */
    pre {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    /* Further reduce padding */
    .p-6, .p-8 {
        padding: 1rem !important;
    }
    
    /* Stack flex items */
    .flex {
        flex-direction: column !important;
    }
    
    /* Fix spacing between stacked flex items */
    .flex > * + * {
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
    }
    
    /* Make sure buttons are full width */
    .flex button, .flex .btn, .flex [type="button"], .flex [type="submit"] {
        width: 100% !important;
    }
    
    /* Fix spacing in forms */
    .space-y-4 > * + * {
        margin-top: 1rem !important;
    }
}

/* Fix specific components */

/* Dashboard stats cards */
@media (max-width: 768px) {
    .dashboard-stats {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Fix user profile section */
    .user-profile {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .user-profile-details {
        margin-top: 1rem !important;
        margin-left: 0 !important;
    }
    
    /* Transaction details */
    .transaction-details {
        flex-direction: column !important;
    }
    
    .transaction-details > div {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    /* Currency converter */
    .currency-converter {
        flex-direction: column !important;
    }
    
    .currency-converter > div {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    /* QR code display */
    .qr-code-container {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    .qr-code-container img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Fix mobile menu */
@media (max-width: 768px) {
    .mobile-menu-button {
        display: flex !important;
    }
    
    .desktop-menu {
        display: none !important;
    }
    
    .mobile-menu {
        width: 100% !important;
    }
    
    /* Improve mobile menu appearance */
    .mobile-menu a {
        display: block !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
    }
    
    .mobile-menu a:last-child {
        border-bottom: none !important;
    }
}

/* Fix email testing tool specifically */
@media (max-width: 768px) {
    #email-tester .grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    #email-tester .debug-info {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    #email-tester pre {
        font-size: 12px !important;
    }
    
    #email-tester .config-card {
        margin-bottom: 1rem !important;
    }
}

/* Fix tables on mobile */
@media (max-width: 768px) {
    .responsive-table {
        display: block !important;
        width: 100% !important;
    }
    
    .responsive-table thead {
        display: none !important;
    }
    
    .responsive-table tbody {
        display: block !important;
        width: 100% !important;
    }
    
    .responsive-table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    .responsive-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.5rem !important;
        text-align: right !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    .responsive-table td:last-child {
        border-bottom: none !important;
    }
    
    .responsive-table td:before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
        text-align: left;
    }
}

/* Fix form layouts */
@media (max-width: 768px) {
    .form-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .form-grid > div {
        margin-bottom: 1rem !important;
    }
    
    .form-actions {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .form-actions > button {
        margin-bottom: 0.5rem !important;
        width: 100% !important;
    }
}

/* Tailwind CSS specific fixes */
@media (max-width: 768px) {
    /* Fix grid columns */
    .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    /* Fix width classes */
    .md\:w-1\/2, .md\:w-1\/3, .md\:w-1\/4, .md\:w-2\/3, .md\:w-3\/4 {
        width: 100% !important;
    }
    
    /* Fix flex direction */
    .md\:flex-row {
        flex-direction: column !important;
    }
    
    /* Fix gap */
    .md\:gap-6, .md\:gap-8 {
        gap: 1rem !important;
    }
}