/* ==============================================
   CÀI ĐẶT GỐC (VARIABLES) - PHONG CÁCH TỐI GIẢN
   ============================================== */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa; /* Nền xám rất nhạt */
  --text-color: #212529; /* Chữ đen nhạt */
  --error-color: #dc3545;
  --success-color: #28a745;
  --card-background: #ffffff;
  --border-color: #e7e7e7; /* Viền mờ */
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  /* Font hệ thống hiện đại */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 16px; /* Cỡ chữ gốc */
}
body.dark-mode {
  --background-color: #121212; /* Nền đen sâu */
  --text-color: #e0e0e0;
  --card-background: #1e1e1e;
  --border-color: #333;
  background-color: var(--background-color);
  color: var(--text-color);
}
h2, h3, h4 {
  color: var(--primary-color);
  margin-bottom: 16px;
  letter-spacing: -0.2px;
}
.form-section {
  background: var(--card-background);
  padding: 24px; /* Tăng khoảng trắng */
  margin-bottom: 24px;
  border-radius: 12px; /* Bo góc mềm mại */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Bóng mờ */
  border: 1px solid var(--border-color);
}
.dark-mode .form-section {
  background: #1e1e1e;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 15px;
}
input, select, textarea {
  width: 100%;
  max-width: 500px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 8px; /* Bo góc mềm */
  font-size: 16px; /* Giữ nguyên cỡ chữ */
  background: var(--card-background);
  color: var(--text-color);
  transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* Hiệu ứng focus */
}
textarea#borrowItems, textarea#technicianNote {
  height: 150px;
  resize: vertical;
}
button {
  background-color: var(--primary-color) !important;
  color: white !important;
  padding: 12px 24px;
  border: none !important;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600; /* Chữ nút đậm */
  transition: background-color 0.3s, transform 0.1s;
  margin: 5px;
}
button:hover {
  background-color: #0056b3 !important;
  transform: translateY(-1px);
}
button:active {
  transform: translateY(0);
}
#darkModeToggle::before {
  content: "Chuyển chế độ tối";
}
.dark-mode #darkModeToggle::before {
  content: "Chuyển chế độ sáng";
}
/* Nút chuyển đổi giao diện bảng */
#tableViewToggle::before {
  content: "Xem dạng Thẻ"; /* Mặc định là xem cuộn */
}
body.card-view-mobile #tableViewToggle::before {
  content: "Xem dạng Bảng cuộn";
}
.ui-button, button.ui-widget {
  background-color: var(--primary-color) !important;
  color: white !important;
  border: none !important;
}
.ui-button:hover, button.ui-widget:hover {
  background-color: #0056b3 !important;
}

/* ==============================================
   BẢNG (TABLE) - PHONG CÁCH TỐI GIẢN
   ============================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background: var(--card-background);
  border-radius: 12px;
  overflow: hidden; /* Quan trọng để bo góc */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  table-layout: auto; /* Cho phép trình duyệt tự điều chỉnh cột */
}
.dark-mode table {
  background: #1e1e1e;
  box-shadow: none;
  border: 1px solid var(--border-color);
}
th, td {
  padding: 16px; /* Tăng padding */
  text-align: left;
  border-bottom: 1px solid var(--border-color); /* Chỉ giữ viền ngang */
  border-right: none; /* Bỏ viền dọc */
  /* === THAY ĐỔI: Cho phép xuống dòng === */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
th:last-child, td:last-child {
  border-right: none;
}
/* === TIÊU ĐỀ TỐI GIẢN (Xám/Đen) === */
th {
  background-color: #f9f9f9; /* Nền xám nhạt */
  color: #555; /* Chữ xám đậm */
  font-weight: 600;
  text-transform: uppercase; /* Chữ hoa */
  font-size: 12px; /* Chữ nhỏ */
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  /* Ưu tiên không xuống dòng cho tiêu đề */
  white-space: nowrap;
}
.dark-mode th {
  background-color: #2a2a2a; /* Nền tối */
  color: #aaa;
  border-bottom: 2px solid var(--border-color);
}
tr:nth-child(even) {
  background-color: #fcfcfc; /* Nền sọc ngựa vằn rất nhạt */
}
.dark-mode tr:nth-child(even) {
  background-color: #222;
}

/* ==============================================
   CÁC THÀNH PHẦN KHÁC (SPINNER, UI, v.v.)
   ============================================== */
.warning {
  color: var(--error-color);
  font-weight: bold;
}
.unreconciled {
  color: var(--success-color);
  font-weight: bold;
}
.error {
  color: var(--error-color);
  margin-bottom: 10px;
  padding: 10px;
  background: #ffe6e6;
  border-radius: 4px;
  animation: fadeIn 0.5s;
}
.success {
  color: var(--success-color);
  background: #e6ffe6;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  background: var(--card-background);
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dark-mode .ui-autocomplete {
  background: #2a2a2a;
  color: #e0e0e0;
}
#returnUnusedSection {
  margin-top: 20px;
}
#unusedItemsTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
/* Bảng này giữ lại phong cách cũ vì nó là bảng con */
#unusedItemsTable th, #unusedItemsTable td {
  border: 1px solid var(--border-color);
  padding: 8px;
  text-align: left;
}
#unusedItemsTable th {
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
  border-bottom: 2px solid #0056b3;
  font-size: 14px; /* Reset font-size */
  text-transform: none; /* Reset text-transform */
  letter-spacing: 0;
  white-space: normal; /* Cho phép tiêu đề bảng này xuống dòng */
}
.dark-mode #unusedItemsTable th {
  background-color: #0056b3;
  border-bottom: 2px solid #003d82;
}
.quantity-return-input {
  width: 80px;
}
.ticket-range-input, .quantity-return-input, .item-row input {
  max-width: 120px;
}
#excelUploadForm, #excelDataTable {
  margin-top: 20px;
}
.form-hint {
  display: block;
  color: var(--text-color);
  font-size: 14px;
  margin-bottom: 10px;
  font-style: italic;
}
.dark-mode .form-hint {
  color: #b0b0b0;
}
#managerNote {
  width: 100%;
  max-width: 500px;
  height: 80px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
.dark-mode #managerNote {
  background: #333;
  color: #e0e0e0;
  border-color: #444;
}
#reportSection {
  margin-top: 20px;
}
#reportTable td {
  vertical-align: top;
}
#reportTable td:nth-child(3), #reportTable td:nth-child(4), #reportTable td:nth-child(5) {
  white-space: pre-wrap;
}
#managerNote:focus {
  border-color: var(--primary-color);
  outline: none;
}

/* ==============================================
   CSS CHO RESPONSIVE (DI ĐỘNG) - NỘI DUNG TỰ XUỐNG DÒNG
   ============================================== */
@media (max-width: 768px) {
  body {
    padding: 10px 5px;
    font-size: 15px; /* Cỡ chữ di động chuẩn */
  }
  h2, h3, h4 {
    font-size: 1.2em;
  }
  .form-section {
    padding: 15px;
  }
  
  /* Sửa lỗi font: Đồng bộ font-size */
  input, select, textarea {
    font-size: 15px; /* Đồng bộ với body */
    padding: 12px;
  }
  button {
    font-size: 15px; /* Đồng bộ */
    padding: 12px 20px;
    width: 100%;
    margin-bottom: 10px;
  }
  
  /* === THAY ĐỔI LỚN: KHÔNG DÙNG CARD, GIỮ NGUYÊN BẢNG === */
  table {
    /* Không cần display: block */
    /* Không cần overflow-x: auto */
    /* Không cần white-space: nowrap */
    box-shadow: none; /* Bỏ shadow trên di động */
    border-radius: 8px; /* Giữ bo góc nhẹ */
    border: 1px solid var(--border-color); /* Thêm viền nhẹ */
  }
  
  th, td {
    font-size: 15px; /* Đồng bộ font */
    padding: 10px 8px; /* Giảm padding cho di động */
    white-space: normal; /* Đảm bảo nội dung xuống dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-right: 1px solid var(--border-color); /* Thêm kẻ dọc nhẹ */
  }
  th:last-child, td:last-child {
    border-right: none; /* Bỏ kẻ dọc cuối */
  }
  
  /* Giữ lại tiêu đề ngang */
  table thead {
    display: table-header-group; 
  }
  /* Giữ lại cấu trúc hàng/cột */
  table tbody, table tr, table td {
    display: table-row-group; /* Reset về mặc định */
  }
  table tr {
      display: table-row; /* Reset về mặc định */
      width: auto;
      margin-bottom: 0; 
      border: none; 
      border-radius: 0; 
      padding: 0; 
      background: none; 
  }
  table td {
    display: table-cell; /* Reset về mặc định */
    position: static; /* Reset */
    padding: 10px 8px; /* Reset padding */
    border-bottom: 1px solid var(--border-color); /* Giữ kẻ ngang */
    text-align: left; /* Reset */
    min-height: auto; /* Reset */
    vertical-align: middle; /* Căn giữa dọc */
  }
  /* Bỏ label :before */
  table td:before {
    display: none;
  }
  
  /* Sửa lỗi hiển thị Checkbox */
  input[type="checkbox"] {
    width: auto; 
    max-width: none;
    height: 20px;
    width: 20px;
    vertical-align: middle; /* Căn giữa checkbox */
  }
  
  /* Căn giữa cột số lượng */
  #borrowedItemsTable td:nth-child(3),
  #reconciledTicketsTable td:nth-child(3) {
    text-align: center;
  }

  /* === BỘ QUY TẮC DÀNH CHO CARD VIEW (KHI BODY CÓ CLASS .card-view-mobile) === */
  /* Ghi đè lại các quy tắc bảng cuộn/xuống dòng */
  body.card-view-mobile table {
    display: block;
    overflow-x: hidden; /* Không cuộn ngang */
    white-space: normal; /* Cho phép xuống dòng */
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  body.card-view-mobile table thead {
    display: none; /* Ẩn tiêu đề ngang */
  }
  body.card-view-mobile table tbody,
  body.card-view-mobile table tr,
  body.card-view-mobile table td {
    display: block;
    width: 100%;
  }
  /* Thiết kế CARD (cho mỗi <tr>) */
  body.card-view-mobile table tr {
    display: block; /* Ghi đè table-row */
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background: var(--card-background); /* Nền card */
    white-space: normal; /* Cho phép xuống dòng */
  }
  /* Thiết kế HÀNG (cho mỗi <td>) */
  body.card-view-mobile table td {
    display: block; /* Ghi đè table-cell */
    position: relative;
    padding: 12px 10px 12px 45%; /* Padding chuẩn: 45% cho label */
    border: none;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-height: 40px; /* Chiều cao tối thiểu */
    border-bottom: 1px solid var(--border-color); /* Kẻ ngang giữa các ô */
    font-size: 15px; /* Đồng bộ font */
    white-space: normal; /* Cho phép xuống dòng */
    vertical-align: top; /* Căn trên cho card view */
  }
  body.card-view-mobile table tr td:last-child {
    border-bottom: none; /* Bỏ kẻ ngang ở ô cuối */
  }
  /* Thiết kế LABEL (Tiêu đề :before) */
  body.card-view-mobile table td:before {
    display: block; /* Hiển thị lại label */
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 40%;
    font-weight: bold; /* Đậm hơn */
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* --- Ngoại lệ cho giao diện thẻ --- */
  /* Sửa Checkbox */
  body.card-view-mobile input[type="checkbox"] {
    width: auto;
    max-width: none;
    height: 20px;
    width: 20px;
    margin: 0;
  }
  /* Căn phải ô checkbox */
  body.card-view-mobile #borrowedItemsTable td:nth-child(4) {
    text-align: right;
  }
  /* Sửa cột căn giữa */
  body.card-view-mobile #borrowedItemsTable td:nth-child(3),
  body.card-view-mobile #reconciledTicketsTable td:nth-child(3) {
    text-align: center;
    padding-left: 10px; /* Reset padding 45% */
    padding-right: 10px;
    font-weight: 600; /* Làm nổi bật số lượng */
  }
  /* Ẩn label của cột căn giữa */
  body.card-view-mobile #borrowedItemsTable td:nth-child(3):before,
  body.card-view-mobile #reconciledTicketsTable td:nth-child(3):before {
    display: none;
  }
  /* --- ĐỊNH NGHĨA DATA LABELS (Chỉ dùng cho Card View) --- */
body.card-view-mobile #overviewTable td:nth-child(1):before { content: "Tên vật tư"; }
  body.card-view-mobile #overviewTable td:nth-child(2):before { content: "Tổng mượn"; }
  body.card-view-mobile #overviewTable td:nth-child(3):before { content: "Tổng sử dụng"; }
  body.card-view-mobile #overviewTable td:nth-child(4):before { content: "Đã trả"; }
  body.card-view-mobile #overviewTable td:nth-child(5):before { content: "Còn lại"; }
  body.card-view-mobile #borrowHistoryTable td:nth-child(1):before { content: "Thời gian"; }
  body.card-view-mobile #borrowHistoryTable td:nth-child(2):before { content: "Nội dung mượn"; }
  body.card-view-mobile #returnHistoryTable td:nth-child(1):before { content: "Thời gian"; }
  body.card-view-mobile #returnHistoryTable td:nth-child(2):before { content: "Nội dung trả"; }
  body.card-view-mobile #borrowedItemsTable td:nth-child(1):before { content: "Số sổ"; }
  body.card-view-mobile #borrowedItemsTable td:nth-child(2):before { content: "Tên vật tư"; }
  body.card-view-mobile #borrowedItemsTable td:nth-child(4):before { content: "Xác nhận"; }
  body.card-view-mobile #reconciledTicketsTable td:nth-child(1):before { content: "Số sổ"; }
  body.card-view-mobile #reconciledTicketsTable td:nth-child(2):before { content: "Tên vật tư"; }
  body.card-view-mobile #managerOverviewTable td:nth-child(1):before { content: "Tên vật tư"; }
  body.card-view-mobile #managerOverviewTable td:nth-child(2):before { content: "Mã vật tư"; }
  body.card-view-mobile #managerOverviewTable td:nth-child(3):before { content: "Tổng mượn"; }
  body.card-view-mobile #managerOverviewTable td:nth-child(4):before { content: "Tổng sử dụng"; }
  body.card-view-mobile #managerOverviewTable td:nth-child(5):before { content: "Đã trả"; }
  body.card-view-mobile #managerOverviewTable td:nth-child(6):before { content: "Còn lại"; }
  body.card-view-mobile #managerOverviewTable td:nth-child(7):before { content: "Chi tiết số sổ"; }
  body.card-view-mobile #ticketRangesTable td:nth-child(1):before { content: "Số bắt đầu"; }
  body.card-view-mobile #ticketRangesTable td:nth-child(2):before { content: "Số kết thúc"; }
  body.card-view-mobile #ticketRangesTable td:nth-child(3):before { content: "Xóa"; }
  body.card-view-mobile #excelDataTable td:nth-child(1):before { content: "Ngày"; }
  body.card-view-mobile #excelDataTable td:nth-child(2):before { content: "Mã vật tư"; }
  body.card-view-mobile #excelDataTable td:nth-child(3):before { content: "Tên vật tư"; }
  body.card-view-mobile #excelDataTable td:nth-child(4):before { content: "Số sổ"; }
  body.card-view-mobile #excelDataTable td:nth-child(5):before { content: "Số lượng"; }
  body.card-view-mobile #excelDataTable td:nth-child(6):before { content: "Email"; }
  body.card-view-mobile #excelDataTable td:nth-child(7):before { content: "Ghi chú"; }
  body.card-view-mobile #managerSelectedItemsTable td:nth-child(1):before { content: "Mã vật tư"; }
  body.card-view-mobile #managerSelectedItemsTable td:nth-child(2):before { content: "Tên vật tư"; }
  body.card-view-mobile #managerSelectedItemsTable td:nth-child(3):before { content: "Số lượng"; }
  body.card-view-mobile #managerSelectedItemsTable td:nth-child(4):before { content: "Xóa"; }
  body.card-view-mobile #transferItemsTable td:nth-child(1):before { content: "Tên vật tư"; }
  body.card-view-mobile #transferItemsTable td:nth-child(2):before { content: "Mã vật tư"; }
  body.card-view-mobile #transferItemsTable td:nth-child(3):before { content: "Đang nợ"; }
  body.card-view-mobile #transferItemsTable td:nth-child(4):before { content: "SL chuyển"; }

} /* <-- Dấu đóng cho @media (max-width: 768px) */


/* ==============================================
   CSS CHO MÀN HÌNH RẤT NHỎ (480px)
   ============================================== */
@media (max-width: 480px) {
  body {
    font-size: 14px; /* Giảm 1px cho màn hình nhỏ nhất */
  }
  input, select, textarea {
    font-size: 14px; /* Đồng bộ */
  }
  button {
    font-size: 14px; /* Đồng bộ */
  }
  th, td {
    font-size: 14px; /* Đồng bộ */
    padding: 8px 6px; /* Giảm padding thêm */
  }
  
  /* Cập nhật padding cho card view trên màn hình rất nhỏ */
  body.card-view-mobile table td {
    padding: 10px 10px 10px 40%; 
  }
  body.card-view-mobile table td:before {
    width: 35%; 
    font-size: 13px;
  }

  input[type="date"] {
    width: 100%;
    max-width: 500px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* Đồng bộ */
    background-color: var(--card-background);
    -webkit-appearance: none;
    appearance: none;
  }
  input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 5px;
    cursor: pointer;
    filter: invert(0.6);
  }       
  .dark-mode input[type="date"] {
    background-color: #333;
    color: #e0e0e0;
    border-color: #444;
  } 
  .dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }
}

/* ==============================================
   FIX PLACEHOLDER (Dán vào cuối)
   ============================================== */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: inherit; /* Luôn dùng cỡ chữ của input */
  color: #aaa;
  opacity: 1; /* Firefox */
}
.dark-mode ::placeholder {
  color: #666;
}
/* File: styles.css (Dán vào cuối) */

/* CSS cho bảng Chuyển vật tư */
#transferItemsTable .transfer-quantity-input {
  width: 80px; /* Input số lượng nhỏ */
  max-width: 100px;
  padding: 8px; /* Giảm padding */
}

/* Responsive cho bảng Chuyển vật tư */
@media (max-width: 768px) {
  /* Bảng cuộn ngang */
  #transferItemsTable th, #transferItemsTable td { white-space: nowrap; } /* Đảm bảo cuộn */
  #transferItemsTable td:nth-child(1) { min-width: 150px; } /* Tên VT */
  #transferItemsTable td:nth-child(2) { min-width: 100px; } /* Mã VT */
  #transferItemsTable td:nth-child(3) { min-width: 80px; text-align: center; } /* Đang nợ */
  #transferItemsTable td:nth-child(4) { min-width: 120px; } /* SL chuyển */

  /* Giao diện thẻ */
  body.card-view-mobile #transferItemsTable th,
  body.card-view-mobile #transferItemsTable td { white-space: normal; } /* Cho phép xuống dòng trong thẻ */

  body.card-view-mobile #transferItemsTable td:nth-child(1):before { content: "Tên vật tư"; }
  body.card-view-mobile #transferItemsTable td:nth-child(2):before { content: "Mã vật tư"; }
  body.card-view-mobile #transferItemsTable td:nth-child(3):before { content: "Đang nợ"; }
  body.card-view-mobile #transferItemsTable td:nth-child(4):before { content: "SL chuyển"; }

  /* Căn giữa cột "Đang nợ" trong card view */
  body.card-view-mobile #transferItemsTable td:nth-child(3) {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
  }
  body.card-view-mobile #transferItemsTable td:nth-child(3):before {
    display: none;
  }
}
@media (max-width: 480px) {
    /* Điều chỉnh padding cho bảng transfer trên màn hình rất nhỏ nếu cần */
    #transferItemsTable td { padding: 8px 6px; }
}
h2 {
  text-align: center; /* Căn giữa chữ */
}

/* 2. Thu nhỏ VÀ CĂN GIỮA logo trên máy tính */
#app-logo {
  display: block; /* Bắt buộc phải có để margin: auto hoạt động */
  max-width: 120px; /* Kích thước mới cho máy tính */
  height: auto;
  margin: 0 auto 20px; /* Căn giữa (trên 0, trái/phải tự động, dưới 20px) */
}

/* 3. Thu nhỏ logo trên di động (vẫn giữ căn giữa) */
@media (max-width: 768px) {
  #app-logo {
    max-width: 100px; /* Kích thước mới cho di động */
    margin-bottom: 15px;
  }
}

/* File: styles.css */
/* === DÁN VÀO CUỐI FILE === */

/* Định dạng bảng Lịch sử thời gian thực */
#realtimeHistoryTable td {
  vertical-align: top;
}

#realtimeHistoryTable td ul {
  margin-left: 20px;
  margin-top: 5px;
  padding-left: 0;
  list-style-type: '— '; /* Thêm gạch đầu dòng */
}
#realtimeHistoryTable td li {
  font-size: 14px;
  font-style: italic;
  padding-left: 5px;
}

/* Căn giữa bộ lọc */
#historyFilterType {
  margin-bottom: 20px;
  max-width: 250px;
}
/* Căn chỉnh bộ lọc lịch sử */
#historyFilterType,
#historyFilterTech {
  margin-bottom: 20px;
  max-width: 250px;
}
* Định dạng bảng Lịch sử KTV (Mới) */
#ktvHistoryTable td {
  vertical-align: top;
}
#ktvHistoryTable td ul {
  margin-left: 20px;
  margin-top: 5px;
  padding-left: 0;
  list-style-type: '— ';
}
#ktvHistoryTable td li {
  font-size: 14px;
  font-style: italic;
  padding-left: 5px;
}
#ktvHistoryFilterType {
  margin-bottom: 20px;
  max-width: 250px;
}
/* Kiểu cho nút Tab KTV (Chung) */
.ktv-tab-button {
  padding: 8px 16px;
  margin-right: 5px;
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  color: var(--secondary-color);
  cursor: pointer;
  border-radius: 4px 4px 0 0; /* Bo góc trên */
  font-size: 15px;
  transition: all 0.2s ease-in-out; /* Transition cho mượt */
  position: relative; /* Cần cho z-index và top */
  z-index: 1; /* Nút không active nằm dưới */
  opacity: 0.7; /* Làm mờ nút không active */
  border-bottom: 1px solid var(--border-color); /* Giữ viền dưới */
}

/* Kiểu cho nút Tab KTV đang active */
.ktv-tab-button.active {
  background-color: var(--card-background);
  color: var(--primary-color);
  border-bottom: 1px solid var(--card-background); /* Che viền dưới của div chứa tabs */
  font-weight: bold;
  opacity: 1; /* Rõ nét */
  z-index: 3; /* Nổi lên trên */
  top: 1px; /* Dịch lên 1px để che viền */
}

/* Hover effect (làm rõ hơn khi di chuột qua nút không active) */
.ktv-tab-button:not(.active):hover {
  opacity: 0.9;
  background-color: #e9ecef; /* Màu nền sáng hơn một chút */
}

/* Dark mode adjustments */
.dark-mode .ktv-tab-button {
  background-color: #2a2a2a;
  color: #aaa;
}
.dark-mode .ktv-tab-button.active {
  background-color: var(--card-background);
  color: var(--primary-color);
  border-bottom: 1px solid var(--card-background);
}
.dark-mode .ktv-tab-button:not(.active):hover {
  background-color: #3a3a3a;
  opacity: 0.9;
}
/* Kiểu cho header có thể click */
.toggle-header {
  cursor: pointer;
  background-color: var(--primary-color); /* Nền xanh */
  color: white; /* Chữ trắng */
  padding: 10px 15px; /* Tăng padding */
  margin: -24px -24px 15px -24px; /* Căn lề âm để tràn ra form-section */
  border-radius: 12px 12px 0 0; /* Bo góc trên */
  transition: background-color 0.2s;
  position: relative; /* Cho vị trí mũi tên */
  display: flex; /* Cho căn chỉnh mũi tên */
  align-items: center; /* Căn giữa dọc mũi tên */
}

/* Bỏ margin âm cho header đầu tiên */
#mainPage .toggle-section:first-of-type > .toggle-header {
    margin-top: -24px;
}
/* Thêm margin top cho các section sau */
.toggle-section + .toggle-section,
.toggle-section + .form-section:not(#errorReportForm) {
    margin-top: 24px;
}


.toggle-header:hover {
  background-color: #0056b3; /* Đậm hơn khi hover */
  color: white; /* Giữ chữ trắng */
}

/* Kiểu cho nội dung ẩn/hiện */
.toggle-content {
  padding-top: 5px; /* Thêm chút khoảng cách trên */
}

/* Căn chỉnh mũi tên (Ngay sau text) */
.toggle-header::after {
  content: ' ▶'; /* Mũi tên mặc định (đóng) */
  font-size: 0.8em;
  margin-left: 8px; /* Khoảng cách với text */
  /* float: right; ĐÃ XÓA */
  transition: transform 0.2s ease-in-out;
}
.toggle-header.active::after {
  content: ' ▼'; /* Mũi tên khi mở */
}

/* Dark mode (Giữ nguyên nền xanh) */
.dark-mode .toggle-header {
   background-color: var(--primary-color);
   color: white;
}
.dark-mode .toggle-header:hover {
   background-color: #0056b3;
}
/* Bảng KTV trả hàng */
#ktvReturnItemsTable .ktv-return-input {
  width: 80px;
  max-width: 100px;
  padding: 8px;
  text-align: center;
}
#ktvReturnItemsTable td:nth-child(3) { /* Cột "Đang nợ" */
  text-align: center;
  font-weight: bold;
}

/* Data labels cho bảng mới trên di động */
@media (max-width: 768px) {
  body.card-view-mobile #ktvReturnItemsTable td:nth-child(1):before { content: "Tên vật tư"; }
  body.card-view-mobile #ktvReturnItemsTable td:nth-child(2):before { content: "Mã vật tư"; }
  body.card-view-mobile #ktvReturnItemsTable td:nth-child(3):before { content: "Đang nợ"; }
  body.card-view-mobile #ktvReturnItemsTable td:nth-child(4):before { content: "Số lượng trả"; }

  /* Căn giữa cột "Đang nợ" trong card view */
  body.card-view-mobile #ktvReturnItemsTable td:nth-child(3) {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
  }
  body.card-view-mobile #ktvReturnItemsTable td:nth-child(3):before {
    display: none;
  }
}
@media (max-width: 768px) {
  body.card-view-mobile #unusedItemsTable td:nth-child(1):before { content: "Tên vật tư"; }
  body.card-view-mobile #unusedItemsTable td:nth-child(2):before { content: "Mã vật tư"; }
  body.card-view-mobile #unusedItemsTable td:nth-child(3):before { content: "Đang nợ"; } /* <<< SỬA LABEL */
  body.card-view-mobile #unusedItemsTable td:nth-child(4):before { content: "Số lượng trả"; }
}
/* Đánh dấu vật tư KTV yêu cầu trả */
#unusedItemsTable tr.requested-return td {
    background-color: #e9f5ff; /* Màu nền xanh nhạt */
}
#unusedItemsTable tr.requested-return input.quantity-return-input {
    border: 2px solid var(--primary-color); /* Viền xanh */
}
.dark-mode #unusedItemsTable tr.requested-return td {
    background-color: #2a3b4d;
}