<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Responsive CSS</title>
    <style>
        /* ------------------------------ */
        /* Enhanced Global Custom Styles */
        /* ------------------------------ */
        
        /* Critical viewport setting for mobile devices */
        /* This should be in your HTML <head>, not in CSS */
        
        /* 1. Body and general container tweaks */
        body {
            user-select: none; /* Disable text selection globally */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            width: 100%;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

        /* Container system for responsive layouts */
        .container {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        @media (min-width: 576px) {
            .container {
                max-width: 540px;
            }
        }

        @media (min-width: 768px) {
            .container {
                max-width: 720px;
            }
        }

        @media (min-width: 992px) {
            .container {
                max-width: 960px;
            }
        }

        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }
        }

        /* Responsive grid system */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .col {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
            padding: 0 15px;
            margin-bottom: 1rem;
        }

        @media (max-width: 768px) {
            .col {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        textarea, input[type="text"], input[type="number"], input[type="email"], select {
            user-select: text !important; /* Allow input text selection */
            font-size: 16px; /* Prevents zoom on iOS */
            min-height: 44px; /* Better touch target */
            padding: 10px 15px;
            width: 100%;
            max-width: 100%;
        }

        /* Prevent printing of pages */
        @media print {
            body {
                display: none !important;
            }
        }

        /* ------------------------------ */
        /* Alerts & Cards */
        .alert, .card {
            word-wrap: break-word;
            margin-bottom: 1rem;
        }

        /* ------------------------------ */
        /* Buttons */
        .btn {
            min-height: 44px; /* Minimum touch target size */
            font-size: 0.95rem;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            touch-action: manipulation; /* Remove touch delay */
        }

        /* Remove hover effects on touch devices */
        @media (hover: none) {
            .btn:hover {
                opacity: 1; /* Or adjust as needed */
            }
        }

        /* ------------------------------ */
        /* Round1 & Round2 Timer */
        #timerBox, #timer-box {
            font-weight: 600;
            font-size: 1.5rem;
            text-align: center;
            padding: 10px;
        }

        /* ------------------------------ */
        /* Password Strength Bar */
        .progress-bar {
            transition: width 0.3s ease;
            height: 10px;
            border-radius: 5px;
        }

        /* ------------------------------ */
        /* File Upload Previews (Round2) */
        #file-preview, #pdf-controls, #image-preview, #pdf-canvas {
            max-width: 100%;
            height: auto;
        }

        #pdf-canvas {
            width: 100% !important;
            height: auto !important;
        }

        /* ------------------------------ */
        /* Enhanced Mobile-specific tweaks */
        @media (max-width: 768px) {
            h2, h3, h4 {
                font-size: 1.1rem;
                line-height: 1.4;
            }

            .card-body {
                padding: 1rem !important;
            }

            .form-check-label {
                font-size: 0.9rem;
            }

            .img-thumbnail {
                max-width: 100% !important;
                height: auto;
            }

            .btn-primary, .btn-success {
                width: 100%;
                margin-top: 0.5rem;
                margin-bottom: 0.5rem;
            }

            /* Timer adjustments */
            #timerBox, #timer-box {
                font-size: 1.2rem;
            }

            /* PDF controls smaller */
            #pdf-controls button {
                font-size: 0.8rem;
                padding: 0.5rem;
                margin: 0 0.1rem;
                min-height: 36px;
            }
            
            /* Form improvements for mobile */
            form {
                padding: 10px;
            }
            
            /* Better spacing for mobile */
            .mobile-spacing {
                margin-bottom: 1rem;
            }
        }

        /* Extra small screens (<576px) */
        @media (max-width: 576px) {
            h2, h3, h4 {
                font-size: 1rem;
            }

            .card-body {
                padding: 0.75rem !important;
            }

            .form-check-label {
                font-size: 0.85rem;
            }

            .btn {
                font-size: 0.9rem;
                min-height: 44px;
                padding: 12px 16px;
            }
            
            /* Hide less critical elements on very small screens */
            .mobile-hide {
                display: none !important;
            }
            
            /* Improve form elements for very small screens */
            input, select, textarea {
                font-size: 14px; /* Better fit on small screens */
            }
        }

        /* Very small devices (phones in portrait, less than 360px) */
        @media (max-width: 360px) {
            body {
                font-size: 14px;
            }
            
            .btn {
                font-size: 0.85rem;
                padding: 10px 14px;
            }
            
            #timerBox, #timer-box {
                font-size: 1.1rem;
            }
        }

        /* Tablet-specific adjustments */
        @media (min-width: 769px) and (max-width: 1024px) {
            .container {
                max-width: 90%;
            }
            
            /* Adjust font sizes for tablet */
            body {
                font-size: 15px;
            }
        }

        /* Prevent long words from breaking layout */
        .text-break {
            overflow-wrap: break-word;
            word-wrap: break-word;
            -ms-word-break: break-all;
            word-break: break-word;
        }

        /* Accessibility improvements */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            
            .progress-bar {
                transition: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Mobile Responsiveness Test</h1>
        <p>This page demonstrates the enhanced responsive CSS styles.</p>
        
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h3>Card Title</h3>
                        <p>This is a test card to demonstrate responsive behavior across different screen sizes.</p>
                        <button class="btn btn-primary">Test Button</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h3>Another Card</h3>
                        <p>Content will stack on mobile devices and appear side-by-side on larger screens.</p>
                        <button class="btn btn-success">Another Button</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mobile-spacing">
            <h3>Form Elements</h3>
            <input type="text" placeholder="Test input field">
            <textarea placeholder="Test textarea"></textarea>
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </div>
        
        <div id="timerBox">00:00:00</div>
        
        <div class="progress-bar" style="width: 65%; background: blue; color: white;">65%</div>
    </div>
</body>
</html>