/* =========================================================
   TÙY CHỈNH GIAO DIỆN MOBILE RESPONSIVE
   ========================================================= */

/* 1. Xử lý Bảng dữ liệu (DataTables) không bị vỡ giao diện trên Mobile */
.datatable-scroll, 
.table-wrapper, 
.table-responsive {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Giúp cuộn mượt mà trên iOS */
    border: 1px solid #f4f4f4;
}

/* Đảm bảo bảng bên trong có độ rộng tối thiểu, nếu màn hình nhỏ hơn sẽ xuất hiện thanh cuộn */
table.dataTable, 
table.table {
    min-width: 700px; /* Tùy chỉnh theo nhu cầu */
}

/* 2. Xử lý Dropdown menu người dùng ở Header không bị tràn ra ngoài màn hình */
@media screen and (max-width: 767px) {
    .navbar-custom-menu .dropdown-menu {
        position: absolute;
        right: 0 !important;
        left: auto !important;
        min-width: 160px;
    }
    
    .top-nav {
        display: flex;
        align-items: center;
        padding-right: 15px;
    }

    /* 3. Chỉnh lại các nút Action trong DataTables để không bị rớt dòng lộn xộn */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }
    .btn-group .btn {
        float: none;
        display: inline-block;
        padding: 5px 10px;
    }
}

@media screen and (max-width: 767px) {
    /* Tạo khoảng cách giữa các ô nhập liệu khi bị rớt dòng trên mobile */
    .form-group, 
    .form-inline .form-control {
        margin-bottom: 15px;
        width: 100% !important;
    }
    
    /* Căn giữa và mở rộng các nút bấm Lọc / Tìm kiếm */
    .btn-primary, 
    .btn-default, 
    #btn_search {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Gắn khoảng cách trên cho container của các form tìm kiếm */
    div[style*="padding: 15px; background-color: #f9fafb;"] {
        padding: 10px !important;
    }
}

#cgstRow, #sgstRow, #igstRow{
	display: none;
}

#customerTableInsideQuote_wrapper, #inpCustomerId, #changeCustomer{
	display: none;
}

#customerTableInsideQuote_filter{
	margin-bottom: 0;
}

#customerTableInsideQuote_filter label{
	float: left;
}

.marginer{
	margin: 15px 0;
}

.btn-group a{
	width:45px;
}

#gstErrMSG, #panErrMSG{
	display: none;
}

.btn-group, .btn-group-vertical{
    margin-bottom: -10px !important;
    margin-top: 5px !important;	
}


/* Data tables */

.datatable-scroll {
	width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

#quotationTable_length,
#quotationTable_filter,
#customerTable_length,
#customerTable_filter,
#orderTable_length,
#orderTable_filter,
#commentTable_length,
#commentTable_filter{
	display: inline-block;
}

#quotationTable_filter,
#customerTable_filter,
#orderTable_filter,
#commentTable_filter{
	float: right;
}

@media screen and (max-width:438px){
	
	#quotationTable_length,
	#quotationTable_filter,
	#customerTable_length,
	#customerTable_filter,
	#orderTable_length,
	#orderTable_filter,
	#commentTable_length,
	#commentTable_filter{
		display: block;
	}

	#quotationTable_filter,
	#orderTable_filter,
	#customerTable_filter,
	#commentTable_filter{
		float: none;
	}
}

/* Dashboard */

@media screen and (min-width:768px) and (max-width:992px){
	.widget-small a{
		width:70px;
	}
}


/* footer */

#footer{
	background:#fff;
	padding:15px;
}

/* =========================================================
   TỐI ƯU HÓA TRẢI NGHIỆM CHẠM (TOUCH) & TYPOGRAPHY TRÊN MOBILE
   ========================================================= */
@media screen and (max-width: 767px) {
    /* 1. Tăng kích thước chữ tổng thể */
    body, p, span, a, div, td, th {
        font-size: 15px !important;
    }
    
 

    /* 4. Tăng độ rộng các hàng trong bảng để dễ bấm các nút Action */
    .table>tbody>tr>td, 
    .table>tbody>tr>th, 
    .table>thead>tr>th {
        padding: 12px 10px !important;
        vertical-align: middle !important;
    }
}

/* =========================================================
   BIẾN FORM THÀNH GIAO DIỆN NATIVE APP TRÊN MOBILE
   ========================================================= */
@media screen and (max-width: 767px) {
    
    /* 1. Xóa bỏ giới hạn Grid của Desktop, nới rộng ra sát mép màn hình */
    .card {
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        margin: 0 !important;
    }
    .card-body {
        padding: 10px 15px !important;
    }

    /* 2. Ép Label nằm trên Input và có style như App (chữ in đậm, xám) */
    .form-horizontal .form-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important; /* Khoảng cách giữa các ô */
        display: block !important;
    }
    .form-horizontal .control-label {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        padding-top: 0 !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #666 !important;
    }
    
    /* Xóa bỏ padding bị dư của các cột (col-md-3, col-md-8...) */
    .form-group [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* 3. Style Ô Nhập Liệu (Inputs) giống iOS/Android */
    .form-control, 
    select.form-control, 
    input.form-control {
        height: 52px !important; /* Tăng độ cao lên 52px chuẩn App */
        border-radius: 12px !important; /* Bo góc tròn trịa */
        border: 1px solid #e0e0e0 !important; /* Viền nhạt */
        background-color: #f7f9fc !important; /* Nền xám xanh cực nhạt */
        padding: 10px 16px !important;
        font-size: 16px !important; /* Chống zoom */
        color: #333 !important;
        box-shadow: none !important;
        transition: all 0.2s ease;
    }
    
    textarea.form-control {
        border-radius: 12px !important;
        padding: 16px !important;
    }

    /* Hiệu ứng khi bấm vào ô nhập liệu (Focus) */
    .form-control:focus {
        background-color: #ffffff !important;
        border-color: #007aff !important; /* Màu xanh đặc trưng của iOS */
        box-shadow: 0 0 0 3px rgba(0,122,255,0.1) !important;
    }

    /* 4. Tối ưu Hộp chọn (Select / Dropdown) */
    select.form-control {
        appearance: none;
        -webkit-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
        background-repeat: no-repeat !important;
        background-position: right 15px top 50% !important;
        background-size: 12px auto !important;
        padding-right: 40px !important;
    }

    /* 5. Nút Bấm "Save" / "Update" siêu to khổng lồ ở cuối Form */
    form .btn-primary,
    form button[type="submit"] {
        width: 100% !important;
        height: 54px !important; /* Nút rất to */
        border-radius: 12px !important; /* Bo góc */
        font-size: 18px !important;
        font-weight: bold !important;
        margin-top: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        letter-spacing: 0.5px;
    }
    
    /* (Tùy chọn) Neo nút Lưu ở luôn dưới cùng màn hình (Sticky Bottom) */
    .row > .col-md-offset-3, 
    .row > .col-md-offset-5 {
        position: sticky;
        bottom: 20px;
        z-index: 100;
        margin-left: 0 !important;
    }
}

/* =========================================================
   ĐIỀU KHIỂN SIDEBAR TRÊN MOBILE
   ========================================================= */
@media screen and (max-width: 767px) {
    /* Mặc định đẩy Sidebar ra khỏi màn hình bên trái */
    .main-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 810;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    
    /* Khi có class sidebar-open (bấm nút hoặc vuốt), kéo nó trở lại */
    .sidebar-open .main-sidebar {
        transform: translateX(0);
    }
    
    /* Làm tối phần nội dung nền để tập trung vào Menu */
    .sidebar-open .content-wrapper {
        opacity: 0.4;
        pointer-events: none; /* Khóa thao tác nền khi menu đang mở */
        transition: opacity 0.3s ease;
    }

    /* Đẩy Footer xuống cuối trang và gỡ bỏ vị trí cố định */
		#footer {
		    position: relative !important;
		    bottom: auto !important;
		    clear: both !important;
		    margin-top: 30px !important;
		    padding: 20px 10px !important;
		    background-color: transparent !important;
		    z-index: 10;
		}
	/* Đảm bảo content-wrapper dãn nở theo nội dung bên trong */
	.content-wrapper {
	    height: auto !important;
	    min-height: 100vh !important;
	    padding-bottom: 80px !important; /* Tạo khoảng thở phía dưới nút Lưu */
	    overflow: visible !important;
	}

	/* Tạo khoảng cách an toàn cho bảng nhập liệu */
	#importTable {
	    margin-bottom: 25px !important;
	}

	/* Ẩn hoàn toàn cột thứ 2 (Tên hàng hóa) trong bảng ở phần Thead và Tbody */
    #importTable thead th:nth-child(2),
    #importTable tbody td:nth-child(2) {
        display: none !important;
    }

    /* Fix lỗi lệch cột TFOOT sau khi ẩn cột phía trên */
    #importTable tfoot td {
        display: table-cell !important;
    }
    
    /* Gỡ bỏ các chiều rộng cố định làm hỏng form */
    #importTable input.form-control {
        min-width: 100px !important;
    }

    /* 1. Gỡ bỏ lệnh ẩn nội dung dọc và tạo khoảng trống ảo cho bảng */
    .table-responsive, 
    div[style*="overflow-x: auto"] {
        overflow-y: visible !important; /* Bắt buộc để không cắt mất dropdown */
        padding-bottom: 220px !important; /* Tạo không gian ảo phía dưới để chứa hộp gợi ý */
    }

    /* 2. Đẩy hộp gợi ý lên lớp cao nhất và làm nổi bật trên mobile */
    .suggestion-box {
        z-index: 999999 !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
        border: 2px solid #009688 !important; /* Viền xanh đồng bộ với theme */
        background: #ffffff !important;
    }
    
    /* 3. Tối ưu từng dòng kết quả trong hộp gợi ý để dễ chạm */
    .suggestion-item {
        padding: 12px 15px !important; /* Tăng diện tích chạm */
        font-size: 15px !important;
        border-bottom: 1px solid #eee !important;
    }
}

@media screen and (max-width: 767px) {
	/* Fix dồn dòng ở header Ngày nhập khi thêm Tổng số lượng */
    .date-header h3 {
        font-size: 15px !important;
    }
    
    /* Gập các khối thông tin chuyến hàng thành 2 dòng trên mobile để vừa chỗ chứa nút Sửa */
    .trip-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
    
    .trip-header > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
	
    /* 1. XÓA TRIỆT ĐỂ SIDEBAR THU NHỎ (MINI) */
    body.sidebar-mini .content-wrapper,
    body.sidebar-mini .main-footer {
        margin-left: 0 !important; /* Trả lại 100% không gian cho màn hình chính */
    }
    
    body.sidebar-mini .main-sidebar {
        transform: translateX(-100%) !important; /* Đẩy sidebar ra hẳn ngoài viền trái */
        width: 250px !important;
    }
    
    body.sidebar-open .main-sidebar {
        transform: translateX(0) !important; /* Chỉ kéo vào khi bấm nút toggle */
    }

    /* 2. CHỐNG BÓP MÉO BẢNG CHI TIẾT (Cho phép vuốt ngang) */
    #importTable {
        display: block;
        width: 100%;
        overflow-x: auto !important; /* Kích hoạt cuộn ngang trực tiếp trên thẻ table */
        -webkit-overflow-scrolling: touch;
        white-space: nowrap; /* Ngăn text rớt dòng làm méo bảng */
    }
    
    #importTable th, 
    #importTable td {
        min-width: 120px; /* Đảm bảo các cột có không gian tối thiểu */
    }
    
    #importTable td:first-child {
        min-width: 200px; /* Ô "Gõ Mã/Tên sản phẩm" cần rộng hơn */
    }

    /* 3. ĐƯA NÚT BẤM THÀNH KHỐI LỚN BÊN DƯỚI */
    #btnAddRow, 
    button[name="save"] {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        height: 50px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
    
    /* Gỡ bỏ float và căn lề của cột chứa nút */
    .col-md-6.text-right {
        text-align: center !important;
    }

    /* 4. CHỈNH LẠI PADDING CỦA CARD */
    .card-body {
        padding: 10px 5px !important; /* Mở rộng tối đa không gian 2 bên viền */
    }
}