/* prettier-ignore */
/*# sourceMappingURL=user.min.css.map */

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Đảm bảo overlay nằm trên các thành phần khác */
  /* nằm trên modal backdrop */
}

.loading-overlay.fullscreen {
  position: fixed;
}

/* Cấu trúc chung cho callout */
.callout {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-left: 4px solid;
  border-radius: 0.25rem;
  background-color: var(--bs-callout-bg, #f8f9fa);
  color: var(--bs-callout-color, inherit);
  border-left-color: var(--bs-callout-border, #ccc);
}

.callout-primary {
  --bs-callout-bg: var(--bs-primary-bg-subtle, #e7f1ff);
  --bs-callout-border: var(--bs-primary, #0d6efd);
  --bs-callout-color: var(--bs-primary, #0d6efd);
}

.callout-success {
  --bs-callout-bg: var(--bs-success-bg-subtle, #e6f4ea);
  --bs-callout-border: var(--bs-success, #198754);
  --bs-callout-color: var(--bs-success, #198754);
}

.callout-danger {
  --bs-callout-bg: var(--bs-danger-bg-subtle, #fcebea);
  --bs-callout-border: var(--bs-danger, #dc3545);
  --bs-callout-color: var(--bs-danger, #dc3545);
}

.callout-warning {
  --bs-callout-bg: var(--bs-warning-bg-subtle, #fff8e5);
  --bs-callout-border: var(--bs-warning, #ffc107);
  --bs-callout-color: var(--bs-warning, #d39e00);
}

.callout-info {
  --bs-callout-bg: var(--bs-info-bg-subtle, #e7faff);
  --bs-callout-border: var(--bs-info, #0dcaf0);
  --bs-callout-color: var(--bs-info, #0dcaf0);
}

.callout-light {
  --bs-callout-bg: var(--bs-light, #f8f9fa);
  --bs-callout-border: var(--bs-gray-400, #dee2e6);
  --bs-callout-color: var(--bs-gray-800, #343a40);
}

.callout-dark {
  --bs-callout-bg: var(--bs-gray-800, #343a40);
  --bs-callout-border: var(--bs-dark, #212529);
  --bs-callout-color: var(--bs-light, #f8f9fa);
}

/* Tạo hiệu ứng callout ở đầu dòng */
tr.callout-danger {
  border-left: 3px solid #dc3545;
  /* đỏ */
  /* background-color: #f8d7da;  */
}

tr.callout-warning {
  border-left: 2px solid #ffc107;
  /* vàng */
  /* background-color: #fff3cd;  */
}

tr.callout-info {
  border-left: 2px solid #0dcaf0;
  /* xanh dương */
  /* background-color: #cff4fc;  */
}

td.cell-danger {
  border-bottom: #dc3545 1px solid;
}

td.cell-warning {
  border-bottom: #ffc107 1px solid;
}

/* tắt chế độ padding cho ô đầu tiên */
.table>tbody>tr>td:first-child {
  padding-left: 0.25rem !important;
}

th.resizable {
  position: relative;
}

th.resizable .resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}

.table>thead {
  user-select: none;
  /* border-top: #e3e6ed 1px solid !important; */
}

/* .table thead th {
  position: relative;
  user-select: none;
  white-space: nowrap;
  background: linear-gradient(#fff, #f7f7f7);
  vertical-align: middle;
  transition: background .2s;
} */

/* Kéo thả đổi vị trí cột */
.th-draggable {
  cursor: grab
}

.th-dragging {
  opacity: .6;
  cursor: grabbing;
  /* background: #ffe69c !important; */
  border: #e3e6ed 1px solid !important;
}

/* .drop-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #0d6efd;
  opacity: .8;
  z-index: 3;
  display: none;
} */

.drop-target-highlight::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: #e3e6ed;
}

table>tbody.row-new-datas>tr:last-child {
  border-block-end: 1px solid #cbd0dd;
}

/* Cột tay cầm kéo */
.drag-cell {
  width: 44px;
  padding: 0.25rem 0.5rem;
}

/* Nút 3 chấm chỉ hiện khi hover dòng */
.drag-handle {
  opacity: 0;
  transition: opacity .15s ease-in-out, transform .1s ease-in-out;
  cursor: grab;
  /* border-radius: 9999px; */
  position: absolute;
  left: 16px;
}

tr:hover .drag-handle {
  opacity: 1;
}

.drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
}

/* Trong lúc đang kéo, làm mờ dòng để dễ nhìn */
tr.dragging {
  opacity: .6;
}

/* Gợi ý vị trí chèn (drop indicator) */
tbody tr.drop-before {
  box-shadow: 0 -2px 0 0 var(--bs-primary) inset;
}

tbody tr.drop-after {
  box-shadow: 0 2px 0 0 var(--bs-primary) inset;
}

/* định dạng cell focus */
td:focus {
  outline: none !important;
  background-color: #ffeeba !important;
  box-shadow: inset 0 0 0 1px #ffc107 !important;
}

/* định dạng offcanvas */
.offcanvas.offcanvas-size-sm {
  width: 300px;
}

.offcanvas.offcanvas-size-md {
  width: 600px;
}

.offcanvas.offcanvas-size-lg {
  width: 900px;
}

/* Resize handle */
.resize-handle {
  width: 15px;
  height: 15px;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: se-resize;
  background: rgba(0, 0, 0, 0.1);
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
  opacity: 0;
}

/* canh lề kiểu dữ liệu cho cột */
th.type-numeric,
td.type-numeric,
th.type-number,
td.type-number,
th.type-currency,
td.type-currency,
th.type-decimal,
td.type-decimal {
  text-align: right;
}

th.type-integer,
td.type-integer {
  text-align: right;
}

/* canh lề phải cho input type number trong form filter */
/* input[type="number"] {
  text-align: right;
} */

/* .form-control[type="number"] {
  text-align: right;
  padding-right: 1.5rem;
} */

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Canh phải luôn */
input[type="number"] {
  text-align: right;
}

.choices {
    font-size: 12px;
}
.choices .choices__inner {
  /* border-radius: var(--phoenix-border-radius); */
  /* line-height: 1.5rem !important; */
  font-size: 12px !important;
  /* background-color: var(--phoenix-emphasis-bg) !important;
  min-height: var(--phoenix-choices-inner-min-height) !important;
  background-size: 9px 12px;
  border: 1px solid var(--phoenix-border-color);
  padding: 6px 1rem 6px 3.5rem;
  -webkit-box-shadow: inset 0 1px 2px transparent;
  box-shadow: inset 0 1px 2px transparent; */
}
.choices__placeholder {
  opacity: .5;
  font-size: 12px;
}
.choices .choices__list--dropdown .choices__item--selectable {
  /* padding: 2px 1rem;
  padding-left: 20px; */
  font-size: 12px !important;
  /* background-color: var(--phoenix-secondary-bg);
  color: var(--phoenix-body-color); */
}


.bg-light {
  --phoenix-bg-opacity: 1;
  background-color: rgba(239, 242, 246, 0.73) !important;
}

/*ghim tiêu đề bảng*/
.table>tbody>tr.row-header.pin-header,
.table>thead>tr.row-header.pin-header {
  position: sticky;
  background: #ffffff;
  /*position: sticky;*/
  top: 1px;
  z-index: 10;
  /*nếu muốn border*/
  outline: 0.1rem solid #e9ebec;
}



/* ============================= */
/* PRINT COMMON CSS */
/* ============================= */
@media print {
  /* Reset cơ bản */
  html,
  body {
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Fix Chrome in màu */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Tránh cắt giữa block */
  .no-break,
  .print-block,
  .section,
  .card,
  .panel {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Chủ động ngắt trang */
  .page-break {
    page-break-before: always !important;
    break-before: page !important;
  }

  /* Ngắt sau block */
  .page-break-after {
    page-break-after: always !important;
    break-after: page !important;
  }

  /* Table chuẩn khi in */
  table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
  }

  /* Không cắt dòng table */
  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  td,
  th {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Header table lặp lại mỗi trang */
  thead {
    display: table-header-group;
  }

  /* Footer table */
  tfoot {
    display: table-footer-group;
  }

  /* Ảnh không bị vỡ */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Không bị vỡ flex layout */
  .row,
  .flex,
  .d-flex {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Không cắt danh sách */
  ul,
  ol,
  li {
    page-break-inside: avoid;
  }

  /* Tránh orphan/widow */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    orphans: 3;
    widows: 3;
  }

  /* Ẩn khi in */
  .no-print {
    display: none !important;
  }

  /* Chỉ hiển thị khi in */
  .only-print {
    display: block !important;
  }
}