/* Mobile Responsiveness Hotfix for ADT and Response Tool Pages */
/* This file contains targeted fixes for mobile layout issues */

/* ============================================
   GLOBAL MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Prevent horizontal overflow and forced zooming */
    body {
        overflow-x: hidden;
    }
    
    /* Make all containers fluid on mobile */
    .container, .page-view .container {
        padding: 10px !important;
        max-width: 100% !important;
    }
    
    /* Stack grid layouts vertically on mobile */
    .main-grid, .content-grid, .viz-layout {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Make tables scrollable horizontally */
    .data-table, .comparison-table, .criteria-table, .bone-table, .drug-classes-table, .risk-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure cards take full width */
    .card, .page-view .card {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
}

/* ============================================
   ADT PAGE SPECIFIC FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Fix header layout on mobile */
    .adt-page .header-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .adt-page .logo {
        justify-content: center !important;
    }
    
    .adt-page .guideline-badges {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .adt-page .badge {
        margin: 5px !important;
    }
    
    /* Fix main grid stacking */
    .adt-page .main-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Fix calculator tabs - make them scrollable */
    .adt-page .calculator-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .adt-page .tab-btn {
        min-width: 120px !important;
        flex-shrink: 0 !important;
    }
    
    /* Fix calculator container padding */
    .adt-page .calculator-container {
        padding: 15px !important;
        min-height: auto !important;
    }
    
    /* Fix input grids - single column on mobile */
    .adt-page .input-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix scenario selector */
    .adt-page .scenario-selector {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Fix drug recommendations layout */
    .adt-page .drug-recommendations {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Fix medical history grid */
    .adt-page .medical-history-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix export buttons */
    .adt-page .export-options {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .adt-page .export-btn {
        min-width: 100% !important;
    }
    
    /* Fix validation metrics */
    .adt-page .validation-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Fix timeline inputs */
    .adt-page .timeline-inputs {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix guideline priorities */
    .adt-page .guideline-priorities {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix drug factor group */
    .adt-page .drug-factor-group {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix treatment history */
    .adt-page .treatment-history {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix monitoring guidelines */
    .adt-page .guideline-items {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix safety categories */
    .adt-page .safety-categories {
        grid-template-columns: 1fr !important;
    }
    
    /* Make all inputs full width on mobile */
    .adt-page .input-group input,
    .adt-page .input-group select,
    .adt-page .medication-selector select {
        width: 100% !important;
    }
    
    /* Fix result card layout */
    .adt-page .result-item {
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .adt-page .result-label {
        min-width: auto !important;
        text-align: left !important;
    }
    
    .adt-page .result-value {
        text-align: left !important;
    }
    
    /* Fix detail items */
    .adt-page .detail-item {
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .adt-page .detail-label {
        min-width: auto !important;
    }
}

/* Smaller mobile devices (iPhone SE, etc.) */
@media (max-width: 400px) {
    .adt-page .tab-btn {
        min-width: 100px !important;
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
    }
    
    .adt-page .calculator-header h3 {
        font-size: 1.2rem !important;
    }
    
    .adt-page .input-group label {
        font-size: 0.9rem !important;
    }
    
    .adt-page .calculate-btn {
        padding: 12px !important;
        font-size: 1rem !important;
    }
}

/* ============================================
   RESPONSE TOOL SPECIFIC FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Fix header layout */
    .response-tool-page .header-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .response-tool-page .logo-section {
        justify-content: center !important;
    }
    
    /* Fix main grid */
    .response-tool-page .main-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Fix calculator tabs */
    .response-tool-page .calculator-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .response-tool-page .tab-btn {
        min-width: 120px !important;
        flex-shrink: 0 !important;
    }
    
    /* Fix calculator container */
    .response-tool-page .calculator-container {
        padding: 15px !important;
        min-height: auto !important;
    }
    
    /* Fix input grids */
    .response-tool-page .input-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix reference grid */
    .response-tool-page .reference-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix workflow steps */
    .response-tool-page .workflow-steps {
        flex-direction: column !important;
    }
    
    /* Fix algorithm steps */
    .response-tool-page .algorithm-steps {
        flex-direction: column !important;
    }
    
    /* Fix hierarchy steps */
    .response-tool-page .hierarchy-steps {
        flex-direction: column !important;
    }
    
    /* Fix timeline category */
    .response-tool-page .timeline-category {
        flex-direction: column !important;
    }
    
    /* Fix result items */
    .response-tool-page .result-item {
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    .response-tool-page .result-label {
        min-width: auto !important;
        text-align: left !important;
    }
    
    .response-tool-page .result-value {
        text-align: left !important;
    }
    
    /* Fix rule box */
    .response-tool-page .rule-box {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .response-tool-page .rule-item {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* Smaller mobile devices for Response Tool */
@media (max-width: 400px) {
    .response-tool-page .tab-btn {
        min-width: 100px !important;
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
    }
    
    .response-tool-page .calculator-header h3 {
        font-size: 1.2rem !important;
    }
    
    .response-tool-page .input-group label {
        font-size: 0.9rem !important;
    }
    
    .response-tool-page .calculate-btn {
        padding: 12px !important;
        font-size: 1rem !important;
    }
}

/* ============================================
   TABLE RESPONSIVENESS FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Make tables scrollable with proper headers */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 20px !important;
    }
    
    /* Add data labels for mobile table cells */
    .data-table td:before,
    .comparison-table td:before,
    .criteria-table td:before,
    .bone-table td:before,
    .drug-classes-table td:before,
    .risk-table td:before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: var(--color-primary-dark, #2c3e50);
    }
    
    /* Hide table headers but keep them for accessibility */
    .data-table thead,
    .comparison-table thead,
    .criteria-table thead,
    .bone-table thead,
    .drug-classes-table thead,
    .risk-table thead {
        display: none !important;
    }
    
    /* Style table cells for mobile */
    .data-table td,
    .comparison-table td,
    .criteria-table td,
    .bone-table td,
    .drug-classes-table td,
    .risk-table td {
        display: block !important;
        padding: 10px 15px !important;
        border-bottom: 1px solid #eee !important;
        text-align: left !important;
    }
    
    .data-table tr,
    .comparison-table tr,
    .criteria-table tr,
    .bone-table tr,
    .drug-classes-table tr,
    .risk-table tr {
        display: block !important;
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
    }
}

/* ============================================
   FORM ELEMENT FIXES
   ============================================ */
@media (max-width: 768px) {
    /* Make all form inputs full width */
    .form-input,
    .form-select,
    .input-field,
    input.input-field,
    select.input-field,
    textarea.input-field,
    .adt-page .input-group input,
    .adt-page .input-group select,
    .response-tool-page .input-group input,
    .response-tool-page .input-group select {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix checkbox and radio layouts */
    .checkbox-group,
    .radio-group {
        flex-direction: column !important;
    }
    
    .checkbox-label,
    .radio-label {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Mobile-only utility classes */
    .mobile-scroll-x {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mobile-stack {
        flex-direction: column !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
}

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */
.dark .data-table td:before,
.dark .comparison-table td:before,
.dark .criteria-table td:before,
.dark .bone-table td:before,
.dark .drug-classes-table td:before,
.dark .risk-table td:before {
    color: #cbd5e0 !important;
}

.dark .data-table tr,
.dark .comparison-table tr,
.dark .criteria-table tr,
.dark .bone-table tr,
.dark .drug-classes-table tr,
.dark .risk-table tr {
    border-color: #4a5568 !important;
}

.dark .data-table td,
.dark .comparison-table td,
.dark .criteria-table td,
.dark .bone-table td,
.dark .drug-classes-table td,
.dark .risk-table td {
    border-bottom-color: #4a5568 !important;
}