/* table-paginate.css — thanh phân trang hiển thị cho bảng dữ liệu lớn.
   Đi kèm js/table-paginate.js; nhúng toàn cục qua config/security.php.

   LƯU Ý: thanh này chèn vào trong main.wrap của từng trang, nơi theme.css và
   <style> riêng của trang có rule toàn cục cho button kèm !important — khai
   báo tường minh + !important để mọi trang hiển thị giống nhau
   (xem ghi chú đầu css/table-columns.css). */

.tp-hide {
  display: none !important;
}

.tp-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 6px 0 0 !important;
  font-size: 12.5px !important;
}

.tp-bar .tp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  border: 1px solid #cddaf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ui-blue, #3159ad) !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.tp-bar .tp-btn:hover:not(:disabled) {
  border-color: var(--ui-blue, #3159ad) !important;
  box-shadow: none !important;
  transform: none !important;
}
.tp-bar .tp-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.tp-bar .tp-info {
  font-weight: 700 !important;
}
.tp-bar .tp-rows {
  color: #5b6b85 !important;
}

/* Dark theme — biến --panel/--line/--text/--blue do body.theme-dark đặt trong css/theme.css */
body.theme-dark .tp-bar .tp-btn {
  background: var(--panel, #111827) !important;
  color: var(--blue, #60a5fa) !important;
  border-color: var(--line, #334155) !important;
}
body.theme-dark .tp-bar .tp-info {
  color: var(--text, #e5e7eb) !important;
}
body.theme-dark .tp-bar .tp-rows {
  color: var(--muted, #94a3b8) !important;
}