/* css/mobile.css - สไตล์สำหรับหน้าจอมือถือ */

/* Mobile Portrait: Show only specific columns and adjust layout */
@media (max-width: 768px) {
    /* Swap: hide desktop-buttons, show mobile-hamburger */
    .desktop-buttons { display: none !important; }
    .mobile-hamburger { display: table-cell !important; }
    .mobile-visible { display: table-cell !important; }
    
    body { font-size: 12px; }
    .excel-sheet { font-size: 11px; }
    .excel-sheet th, .excel-sheet td { padding: 3px 6px; min-height: 44px; min-width: 70px; }
    .input-cell { font-size: 12px; min-height: 44px; padding: 8px; }
    .preview-table { font-size: 9px; }
    .preview-table th, .preview-table td { padding: 2px 4px; min-height: 32px; }
    
    /* Equal width tabs - SCROLLABLE */
    .tabs { 
        flex-wrap: nowrap; 
        gap: 5px; 
        padding: 8px; 
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar {
        display: none;
    }
    .tab-btn { 
        flex: 0 0 auto;  
        min-width: fit-content;
        border-radius: 4px; 
        margin: 0; 
        padding: 10px 12px; 
        font-size: 13px; 
        white-space: nowrap;
    }
    .tab-btn.save-btn {
        background: #28a745;
        color: white;
    }
    
    .tab-content { padding: 10px; }
    h2 { font-size: 16px; }
    #inp_search { width: 100%; margin-bottom: 10px; }
    .create-new-btn { 
        width: 100%; 
        margin-top: 0;
        padding: 12px;
        min-height: 44px;
        font-size: 16px;
    }
    
    /* Header layout - Mobile: stack vertically */
    .flex-between-col {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .flex-between-col h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    #inp_search { 
        min-height: 44px;
        padding: 8px 12px;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    /* Form and Input Fields - Touch friendly */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea,
    .input-cell {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px; /* Prevent iOS zoom on focus */
        border-radius: 6px;
        border: 1px solid #ccc;
        width: 100%;
    }
    
    /* Excel sheet inputs on mobile */
    .excel-sheet .input-cell {
        min-height: 40px;
        padding: 6px 8px;
        font-size: 14px;
    }
    
    /* Focus states */
    input:focus,
    select:focus,
    textarea:focus,
    .input-cell:focus {
        outline: none;
        border-color: #FF6B00;
        box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
    }
    
    /* Status select dropdown */
    .status-select {
        min-height: 44px;
        padding: 8px;
        font-size: 14px;
    }
    
    /* Form labels on mobile */
    td:first-child,
    th:first-child {
        font-size: 12px;
        white-space: nowrap;
    }
    
    /* Hamburger menu improvements */
    .hamburger { 
        font-size: 18px; 
        padding: 8px 12px; 
        cursor: pointer; 
        background: #f8f9fa;
        border: 1px solid #ccc;
        border-radius: 6px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        z-index: 10;
    }
    .hamburger:active {
        background: #e9ecef;
    }

    /* ===== FORM (tab-input) - Desktop/Mobile Split Tables ===== */
    /* Desktop: Show desktop table, hide mobile table */
    .desktop-form-table { display: block; }
    .mobile-form-table { display: none; }
    
    @media (max-width: 768px) {
        /* Mobile: Hide desktop table, show mobile table */
        .desktop-form-table { display: none !important; }
        .mobile-form-table { display: block !important; }
        
        /* Mobile form table styling */
        .form-table-mobile {
            width: 100%;
            font-size: 12px;
        }
        
        .form-table-mobile tr {
            display: flex;
            width: 100%;
            margin-bottom: 4px;
        }
        
        .form-table-mobile td {
            display: block;
            padding: 6px 8px;
            font-size: 12px;
        }
        
        .form-table-mobile .form-label {
            width: 32% !important;
            font-weight: bold;
            background: #e0e0e0;
        }
        
        .form-table-mobile .form-input-full {
            width: 68% !important;
            background: #fff9c4;
        }
        
        .form-table-mobile .input-cell {
            font-size: 12px;
            min-height: 36px;
            width: 100%;
        }
        
        .form-table-mobile .bg-green-header {
            width: 100% !important;
            text-align: center;
            font-weight: bold;
            background: #81c784;
        }
    }

    /* Table scroll for input form */
    #tab-input .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== #inputTable Mobile Adjustments ===== */
    /* Make table scrollable horizontally */
    #inputTable {
        min-width: 900px;
    }
    
    /* Expand the 'เลือกรายละเอียด' column */
    #inputTable th:nth-child(2),
    #inputTable td:nth-child(2) {
        min-width: 250px !important;
        width: 250px !important;
    }
    
    #inputTable th.bg-green-header[colspan="2"] {
        min-width: 250px !important;
    }
    
    /* Ensure other columns have reasonable widths */
    #inputTable th:nth-child(1),
    #inputTable td:nth-child(1) {
        min-width: 100px !important;
    }
    
    #inputTable th:nth-child(3),
    #inputTable td:nth-child(3),
    #inputTable th:nth-child(4),
    #inputTable td:nth-child(4),
    #inputTable th:nth-child(5),
    #inputTable td:nth-child(5),
    #inputTable th:nth-child(6),
    #inputTable td:nth-child(6),
    #inputTable th:nth-child(7),
    #inputTable td:nth-child(7) {
        min-width: 80px !important;
        text-align: center;
    }
    
    /* Make the table container scrollable */
    #tab-input .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Dropdown Styling */
    .action-dropdown { 
        position: absolute !important; 
        right: 5px !important; 
        top: 40px !important; 
        z-index: 999999 !important; 
        background: white !important; 
        border: 1px solid #999 !important; 
        border-radius: 6px !important; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; 
        min-width: 160px !important;
        display: none;
    }
    
    .action-dropdown.show {
        display: block !important;
        animation: fadeIn 0.2s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .mobile-hamburger {
        position: relative !important;
        overflow: visible !important; /* Ensure dropdown isn't clipped */
    }
    
    .action-item { 
        display: block; 
        width: 100%; 
        padding: 12px 16px; 
        text-align: left; 
        border: none; 
        background: #fff; 
        cursor: pointer; 
        font-size: 14px; 
        border-bottom: 1px solid #eee;
        white-space: nowrap;
        color: #333;
    }
    .action-item:hover, .action-item:active { 
        background: #f0f0f0; 
    }
    .action-item:last-child { 
        border-bottom: none; 
        border-radius: 0 0 6px 6px;
    }
    .action-item:first-child {
        border-radius: 6px 6px 0 0;
    }
}

/* Desktop: Mobile table always hidden */
@media (min-width: 769px) {
    .mobile-form-table { display: none !important; }
    .desktop-form-table { display: block !important; }
}

/* Small Mobile Screen Adjustments */
@media (max-width: 480px) {
    .excel-sheet { font-size: 10px; }
    .excel-sheet th, .excel-sheet td { padding: 2px 4px; min-height: 40px; min-width: 60px; }
    .input-cell { min-height: 40px; padding: 6px; }
    .preview-table { font-size: 8px; }
    .preview-table th, .preview-table td { padding: 1px 2px; }
    /* Disabled mobile scaling for A4 to avoid PDF/export conflicts */
    /* .a4-page { transform: scale(0.55); transform-origin: top center; width: 182%; margin-left: -41%; } */
}

body.pdf-export .a4-page {
    transform: none !important;
    width: 210mm !important;
    margin-left: 0 !important;
}