/* ============================================
   AIE™ v1.0.9.3 — MOBILE RESPONSIVE ENHANCEMENTS
   Additional mobile fixes beyond timeline modal
   ============================================ */

@media (max-width: 768px) {
    /* ===================================
       GLOBAL MOBILE FIXES
       =================================== */
    
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Prevent horizontal scroll from any element */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* ===================================
       HEADER & NAVIGATION
       =================================== */
    
    .app-header {
        padding: 12px 16px;
    }
    
    .app-title {
        font-size: 16px;
    }
    
    .app-subtitle {
        font-size: 11px;
        display: none; /* Hide subtitle on very small screens */
    }
    
    .header-actions {
        gap: 8px;
    }
    
    .header-actions .btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* ===================================
       PATIENT BANNER (Top of each phase)
       =================================== */
    
    .patient-banner {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .patient-info {
        font-size: 13px;
        width: 100%;
    }
    
    .patient-name {
        font-size: 16px;
    }
    
    .patient-demographics {
        flex-wrap: wrap;
        font-size: 12px;
        gap: 8px;
    }
    
    /* ===================================
       PHASE CONTENT
       =================================== */
    
    .phase-content {
        padding: 16px;
    }
    
    .phase-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .phase-description {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 16px;
    }
    
    /* ===================================
       FORMS & INPUTS
       =================================== */
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Prevent iOS zoom on focus */
        padding: 12px;
        width: 100%;
    }
    
    .form-help {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .form-error {
        font-size: 12px;
    }
    
    /* ===================================
       BUTTONS
       =================================== */
    
    .btn {
        font-size: 15px;
        padding: 14px 20px;
        min-height: 44px; /* Apple's recommended touch target */
    }
    
    .btn-lg {
        font-size: 16px;
        padding: 16px 24px;
        min-height: 48px;
    }
    
    .btn-sm {
        font-size: 13px;
        padding: 10px 16px;
        min-height: 38px;
    }
    
    /* ===================================
       CARDS & SECTIONS
       =================================== */
    
    .card,
    .data-section {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .data-section-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    /* ===================================
       CALCULATED FIELDS
       =================================== */
    
    .calculated-field {
        padding: 12px;
        margin: 12px 0;
    }
    
    .calculated-field-label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .calculated-field-value {
        font-size: 18px;
    }
    
    /* ===================================
       SYNDROME CARDS (Phase 1)
       =================================== */
    
    .syndrome-card {
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .syndrome-card-header h3 {
        font-size: 16px;
    }
    
    .syndrome-description {
        font-size: 13px;
        line-height: 1.5;
    }
    
    /* ===================================
       AGENT CARDS (Phase 2-7)
       =================================== */
    
    .agent-card {
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .agent-name {
        font-size: 16px;
    }
    
    .agent-class {
        font-size: 12px;
    }
    
    .agent-dose {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* ===================================
       DOSING TIMELINE (Phase 4)
       =================================== */
    
    .dosing-card {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .dose-recommendation {
        padding: 12px;
        font-size: 14px;
    }
    
    /* ===================================
       ALERTS & WARNINGS
       =================================== */
    
    .alert {
        padding: 12px;
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 16px;
    }
    
    .alert-title {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    /* ===================================
       MODALS (General improvements)
       =================================== */
    
    .modal-content {
        width: 95%;
        max-width: 95vw;
        max-height: 95vh;
        margin: 0;
        border-radius: 12px 12px 0 0; /* Rounded only at top */
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-title {
        font-size: 18px;
    }
    
    .modal-body {
        padding: 16px;
        font-size: 14px;
        line-height: 1.6;
    }
    
    .modal-actions {
        padding: 16px;
        gap: 10px;
    }
    
    /* ===================================
       TABLES (Convert to cards on mobile)
       =================================== */
    
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ===================================
       CHECKBOXES & RADIO BUTTONS
       =================================== */
    
    .checkbox-group,
    .radio-group {
        margin-bottom: 12px;
        padding: 12px;
        min-height: 44px;
    }
    
    .checkbox-group input[type="checkbox"],
    .radio-group input[type="radio"] {
        width: 22px;
        height: 22px;
        margin-right: 10px;
    }
    
    .checkbox-group label,
    .radio-group label {
        font-size: 15px;
        line-height: 1.5;
    }
    
    /* ===================================
       PHASE NAVIGATION (Bottom buttons)
       =================================== */
    
    .phase-navigation {
        padding: 16px;
        gap: 12px;
    }
    
    .phase-navigation .btn {
        font-size: 16px;
        padding: 16px;
        width: 100%;
    }
    
    /* ===================================
       LOADING & STATES
       =================================== */
    
    .loading-spinner {
        font-size: 14px;
    }
    
    .empty-state {
        padding: 32px 16px;
        font-size: 14px;
    }
    
    /* ===================================
       RESISTANCE PATTERN DISPLAY
       =================================== */
    
    .resistance-badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    /* ===================================
       CULTURE PLAN (Phase 0)
       =================================== */
    
    .culture-checkbox {
        margin-bottom: 12px;
    }
    
    /* ===================================
       FIX: Prevent text from overflowing
       =================================== */
    
    p, li, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* ===================================
       FIX: Images must not overflow
       =================================== */
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* ===================================
       TOUCH-FRIENDLY SPACING
       =================================== */
    
    .clickable,
    button,
    a,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ===================================
   VERY SMALL SCREENS (< 375px)
   iPhone SE, small Android
   =================================== */

@media (max-width: 375px) {
    .app-title {
        font-size: 14px;
    }
    
    .phase-title {
        font-size: 20px;
    }
    
    .btn {
        font-size: 14px;
        padding: 12px 16px;
    }
    
    .modal-content {
        width: 98%;
        max-width: 98vw;
    }
    
    .modal-title {
        font-size: 16px;
    }
    
    .modal-body {
        font-size: 13px;
    }
}

/* ===================================
   LANDSCAPE MODE ON MOBILE
   =================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .phase-content {
        padding: 12px;
    }
    
    .patient-banner {
        padding: 10px;
    }
}