/**
 * Mobile & Responsive Design Enhancements
 * PaymentPost - CPRS Payment Application
 * 
 * This file contains mobile-specific styles and responsive design improvements
 * for better usability on phones and tablets
 */

/* ==========================================================================
   Base Mobile Styles
   ========================================================================== */

/* Ensure smooth font rendering on mobile */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent horizontal scrolling on mobile */
body, html {
    overflow-x: hidden;
    width: 100%;
}

/* Improve touch scrolling */
* {
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Form Improvements for Mobile
   ========================================================================== */

/* Make input fields more touch-friendly */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    min-height: 44px; /* Apple's minimum touch target size */
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.75rem;
}

/* Better spacing between form elements on mobile */
.form-group {
    margin-bottom: 1.5rem;
}

/* Ensure labels are readable on mobile */
label {
    font-size: 16px;
    margin-bottom: 0.5rem;
    display: block;
}

/* ==========================================================================
   Button Touch Targets
   ========================================================================== */

/* Make buttons larger for touch */
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
    font-size: 16px;
}

/* Ensure adequate spacing between buttons */
.btn + .btn {
    margin-left: 0.5rem;
}

/* ==========================================================================
   Help Icons & Tooltips
   ========================================================================== */

/* Make help icons larger and more touch-friendly */
.thumbnail img {
    min-width: 24px !important;
    min-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 4px;
}

/* Larger tap area for help icons */
.thumbnail {
    display: inline-block;
    padding: 8px;
    margin: 0 4px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Mobile devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    /* Reduce padding on small screens */
    #step1-box {
        padding: 0.5rem !important;
        margin: 0.5rem;
    }
    
    /* Stack form elements vertically */
    .form-row {
        flex-direction: column;
    }
    
    .form-row > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Full width cards on mobile */
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    /* Reduce heading sizes */
    h4 {
        font-size: 1.1rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    /* Make error messages more visible */
    .text-danger {
        font-size: 14px;
        padding: 0.5rem 0;
    }
    
    /* Improve logo visibility */
    .logo img {
        max-width: 120px;
        height: auto;
    }
    
    /* Make iframes responsive */
    iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        min-height: 300px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    #step1-box {
        padding: 1rem !important;
        max-width: 540px;
        margin: 0 auto;
    }
    
    .logo img {
        max-width: 140px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #step1-box {
        max-width: 720px;
        padding: 1.5rem !important;
    }
    
    /* Allow two-column layout on tablets */
    .form-row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .form-row > .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 0.5rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #step1-box {
        max-width: 600px;
    }
}

/* ==========================================================================
   Touch-Specific Interactions
   ========================================================================== */

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover states that don't work on touch */
    .btn:hover {
        /* Keep default state */
    }
    
    /* Make active/tap states more prominent */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    input:focus,
    select:focus,
    textarea:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
}

/* ==========================================================================
   Landscape Mode Optimization
   ========================================================================== */

/* Optimize for landscape on small devices */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce padding to save vertical space */
    #step1-box {
        padding: 0.5rem !important;
    }
    
    h4 {
        font-size: 1rem;
        padding: 0.5rem 0;
    }
    
    .form-group {
        margin-bottom: 0.75rem;
    }
    
    /* Compress header */
    .header-modified {
        padding: 0.5rem;
    }
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Ensure sufficient color contrast */
.text-danger {
    color: #dc3545 !important;
    font-weight: 500;
}

/* Improve focus indicators */
*:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Better focus for custom elements */
.btn:focus,
.form-control:focus,
select:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

/* ==========================================================================
   Error Message Improvements
   ========================================================================== */

/* Make error messages more prominent on mobile */
.alert {
    font-size: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.toast {
    min-width: 280px;
    max-width: 90vw;
}

/* ==========================================================================
   Loading & Performance
   ========================================================================== */

/* Reduce animations on slower devices */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide unnecessary elements when printing */
    .navbar,
    .header-modified,
    .btn,
    footer {
        display: none !important;
    }
    
    /* Ensure content fits on page */
    body {
        font-size: 12pt;
    }
    
    #step1-box {
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   Dark Mode Support (if needed in future)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Prepare for potential dark mode support */
    /* Currently commented out - uncomment if dark mode is implemented
    
    body {
        background-color: #1a1a1a;
        color: #f0f0f0;
    }
    
    .card {
        background-color: #2a2a2a;
        border-color: #404040;
    }
    
    .form-control {
        background-color: #333;
        color: #f0f0f0;
        border-color: #555;
    }
    */
}

/* ==========================================================================
   Tables Responsive
   ========================================================================== */

/* Make tables scroll horizontally on small screens */
@media (max-width: 767.98px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 14px;
    }
    
    table th,
    table td {
        padding: 0.5rem;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Modal Improvements for Mobile
   ========================================================================== */

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: none;
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
}

/* ==========================================================================
   Utility Classes for Responsive Design
   ========================================================================== */

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

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

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

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

/* Full width on mobile */
.mobile-full-width {
    width: 100% !important;
}

@media (min-width: 768px) {
    .mobile-full-width {
        width: auto !important;
    }
}

/* ==========================================================================
   Safe Area Insets (for notched devices like iPhone X+)
   ========================================================================== */

@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .header-modified {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    
    footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}