/* admin_web_panel/style.css */
/* GIỮ NGUYÊN các style gốc */
body {
    font-family: sans-serif;
    margin: 5px; /* Giữ margin body nhỏ */
}
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 5px; /* Giữ margin-top table nhỏ */
}
th, td {
    border: 1px solid #ddd;
    padding: 3px; /* Giữ padding table nhỏ */
    /* font-size: 0.85em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE TABLE NẾU CẦN CHỮ TO HƠN CẢ TRONG TABLE */
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #ddd;
}
button {
    margin-right: 3px; /* Giữ margin button nhỏ */
    padding: 3px 6px; /* Giữ padding button nhỏ */
    cursor: pointer;
    /* font-size: 0.8em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE NÚT */
}

/* --- ORIGINAL .document-images STYLE (minimum gap) --- */
/* Container cho 2 ảnh bên trong cột hình ảnh */
/* Style này được dùng bên trong .details-content-wrapper */
.document-images {
    display: flex;
    gap: 5px; /* Giữ GAP giữa các ảnh containers nhỏ */
    margin-top: 3px; /* Giữ margin-top nhỏ */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
/* --- END ORIGINAL .document-images STYLE --- */


.image-container {
    text-align: center;
    /* margin-bottom: 0; */
}
 .image-container img {
     max-width: 100%;
     height: auto;
     border: 1px solid #ddd;
     padding: 1px; /* Giữ PADDING CỦA ẢNH nhỏ */
     /* max-width: 100px; */ /* Giữ hoặc bỏ max-width ảnh nếu cần */
     max-height: 250px; /* Thêm giới hạn chiều cao tối đa cho ảnh */
     object-fit: contain; /* Giữ tỷ lệ ảnh */
 }

/* Hide sections initially */
#auth-section {
}
#admin-panel {
    display: none;
}

 /* === BẮT ĐẦU: STYLE CHO BẢNG CHI TIẾT (ĐÃ CHỈNH SỬA CHO FLEXBOX VÀ SCROLL) === */
 #request-details {
    display: flex; /* Sử dụng Flexbox layout */
    flex-direction: column; /* Sắp xếp các phần tử con theo chiều dọc */

    /* === ĐẶT CHIỀU CAO CHO KHUNG CHI TIẾT === */
    /* Điều chỉnh giá trị max-height này để kiểm soát chiều cao tổng thể */
    max-height: 95vh; /* Ví dụ: Chiều cao tối đa là 85% chiều cao viewport */
    /* Hoặc dùng height cố định nếu muốn */
    /* height: 600px; */

    min-height: 80px; /* Giữ MIN-HEIGHT nếu cần */
    border: 1px solid red;
    padding: 5px; /* Giữ PADDING TỔNG THỂ nhỏ */
    background-color: #f9f9f9;

    /* Quan trọng cho scroll nội bộ */
    box-sizing: border-box; /* Tính padding và border vào tổng chiều cao */
    overflow: hidden; /* Ngăn thanh cuộn ngoài cùng cho #request-details */
    /* display: none; // Dòng này chỉ để ẩn lúc đầu, JS sẽ xử lý hiển thị */

    /* Thêm khoảng cách giữa các phần tử con trực tiếp của #request-details */
    /* Bao gồm h2, .details-content-wrapper, .actions, #back-to-list */
    gap: 8px; /* Điều chỉnh khoảng cách giữa các phần tử này */
 }
 /* === KẾT THÚC: STYLE CHO BẢNG CHI TIẾT === */


  #loading-indicator {
     font-style: italic;
     color: grey;
     /* font-size: 0.7em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE LOADING */
     margin-top: 3px; /* Giữ margin nhỏ */
     margin-bottom: 3px; /* Giữ margin nhỏ */
  }


/* --- STYLE CHO CONTAINER BỌC NỘI DUNG CUỘN (ĐÃ CHỈNH SỬA CHO FLEXBOX VÀ SCROLL) --- */
.details-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 5px; /* Giữ GAP GIỮA 2 CỘT nhỏ (info và images) */
    flex-wrap: wrap;
    /* margin-bottom: 5px; */ /* Bỏ margin-bottom vì đã dùng gap trên #request-details */
    margin: 0; /* Đảm bảo không có margin */

    /* === QUAN TRỌNG: LÀM CHO PHẦN NÀY CÓ THỂ CUỘN === */
    flex-grow: 1; /* Cho phép phần này mở rộng để chiếm hết không gian dọc còn lại trong #request-details */
    overflow-y: auto; /* Thêm thanh cuộn dọc khi nội dung bên trong tràn */
    /* Tùy chọn: padding-right để thanh cuộn không che nội dung */
    padding-right: 8px;
}
/* --- END STYLE CHO CONTAINER BỌC NỘI DUNG CUỘN --- */


/* Cột chứa thông tin người dùng */
.user-info-section {
    flex: 1;
    min-width: 180px; /* Giữ MIN-WIDTH nhỏ */
    /* Điều chỉnh margin cho các thẻ p bên trong user-info-section */
}

/* Giảm margin cho các thẻ p bên trong #request-details, đặc biệt là trong user-info-section */
#request-details p {
    margin: 1px 0; /* Giữ MARGIN CHO CÁC ĐOẠN VĂN nhỏ */
    /* font-size: 0.8em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE THÔNG TIN */
    /* line-height: 1.1; */ /* <-- BỎ HOẶC ĐẶT LẠI LINE-HEIGHT */
}

/* Giảm margin cho tiêu đề H2 và H3 trong request-details */
#request-details h2 {
    margin: 0; /* Bỏ margin-top/bottom vì đã dùng gap trên #request-details */
    /* font-size: 1em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE H2 */
    flex-shrink: 0; /* Ngăn tiêu đề co lại */
}
#request-details h3 {
    margin: 0; /* Bỏ margin-top/bottom vì đã dùng gap hoặc margin riêng */
     margin-top: 5px; /* Thêm margin-top riêng nếu cần khoảng cách trên h3 */
    /* font-size: 0.9em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE H3 */
}


/* Cột chứa hình ảnh (đã có style cho flex) */
.details-content-wrapper .document-images {
    flex: 1;
    min-width: 180px; /* Giữ MIN-WIDTH nhỏ */
    /* Style display, gap, direction, wrap, align đã có ở trên */
}

/* Media Query để chuyển về bố cục 1 cột trên màn hình nhỏ (<= 768px) */
@media (max-width: 768px) {
    .details-content-wrapper {
        flex-direction: column;
        gap: 0; /* Bỏ gap giữa 2 cột khi về 1 cột */
        /* margin-bottom: 5px; */ /* Đã bỏ */
        overflow-y: visible; /* Tắt scroll nội bộ trên màn hình nhỏ nếu không cần */
        flex-grow: 0; /* Tắt flex-grow trên màn hình nhỏ */
    }
    .user-info-section,
    .details-content-wrapper .document-images {
        width: 100%;
        min-width: unset;
        /* margin-bottom: 8px; /* Thêm margin dưới cùng cho từng phần */
    }
     .details-content-wrapper .document-images {
         flex-direction: row;
         justify-content: center;
         gap: 3px;
         margin-top: 5px; /* Điều chỉnh lại margin-top cho cụm ảnh */
         margin-bottom: 5px; /* Điều chỉnh lại margin-bottom cho cụm ảnh */
    }
     .details-content-wrapper .document-images .image-container {
          text-align: center;
     }
     /* Điều chỉnh lại margin cho tiêu đề h3 khi về 1 cột */
     #request-details h3 {
         margin-top: 8px;
         margin-bottom: 3px;
     }

     /* Trên màn hình nhỏ, toàn bộ #request-details có thể cần cuộn */
     #request-details {
         overflow-y: auto; /* Cho phép cuộn toàn bộ khung nếu cần trên màn hình nhỏ */
     }
}
/* --- END NEW FLEXBOX STYLES --- */


/* --- STYLE CHO PHẦN ACTIONS (NÚT APPROVE/REJECT VÀ INPUT LÝ DO) --- */
.actions {
    margin-top: 0; /* Bỏ margin-top vì đã dùng gap trên #request-details */
    /* display: flex; */ /* Tùy chọn: dùng flex cho hàng nút nếu muốn căn chỉnh dễ hơn */
    /* gap: 3px; */      /* Tùy chọn: khoảng cách giữa các nút */
    /* align-items: center; */ /* Tùy chọn */
    flex-shrink: 0; /* Ngăn phần actions co lại */
}
/* Điều chỉnh riêng cho input lý do */
#reject-reason {
    padding: 2px; /* Giữ padding input nhỏ */
    /* font-size: 0.85em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE INPUT */
    margin-top: 3px; /* Giữ margin nhỏ */
    margin-bottom: 3px; /* Giữ margin nhỏ */
    /* width: 100px; */
    /* height: 20px; */
}


/* --- STYLE CHO TRẠNG THÁI HÀNH ĐỘNG --- */
#action-status {
    margin-top: 3px; /* Giữ MARGIN-TOP nhỏ */
    margin-bottom: 3px; /* Giữ MARGIN-BOTTOM nhỏ */
    font-weight: bold;
    color: blue;
    /* font-size: 0.8em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE STATUS */
}

/* --- STYLE CHO NÚT BACK TO LIST --- */
#back-to-list {
    margin-top: 0; /* Bỏ margin-top vì đã dùng gap trên #request-details */
     /* Tùy chọn: Thêm margin-top riêng nếu vẫn muốn khoảng cách với Actions */
     /* margin-top: 8px; */

    /* font-size: 0.85em; */ /* <-- BỎ HOẶC ĐẶT LẠI FONT SIZE NÚT BACK */
    padding: 4px 7px; /* Giữ padding nhỏ */
    flex-shrink: 0; /* Ngăn nút back co lại */
}

/* --- END STYLE CHO CÁC PHẦN DƯỚI --- */