/* Màu viền dùng chung cho KHUNG form chứng từ (VoucherEdit): thanh tiêu đề, kẻ dọc đầu phiếu,
   thẻ bọc lưới, kẻ trên dòng tổng. Đổi ở đây là đổi cả khung, không đụng nút/input/lưới. */
:root {
  --voucher-frame-border: #E3E7EB;
}


#poup-voucher-detail {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.body-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-y: auto;
  background-color: #f3f3f3;
}

.main-information,
.tab-detail,
.summary {
  /*    height:100%;*/
  width: 100%;
  min-width: 0;
}

/*
 * Hàng giữa của .body-container (grid-template-rows: auto 1fr auto) PHẢI co được.
 *
 * Grid item mặc định mang min-height:auto — tức không nhỏ hơn min-content của chính nó. Min-content
 * của .tab-detail = .tab-header 42px + gap 4px + flex-basis 450px của .tab-content = 496px. Khi
 * phần còn lại của khung nhỏ hơn 496px thì hàng 1fr KHÔNG co, .body-container tràn và hiện thanh
 * cuộn dọc cho cả form — trong khi thứ đáng co lại là lưới nội dung.
 *
 * Đo 25/08/2026 trên /INOutwardDetail, viewport 900px (màn 1080p rất hay rơi vào khoảng này):
 *   khung 852px − đầu phiếu 259px − dòng tổng 113px = 480px cho hàng giữa, mà hàng giữa đòi 496px
 *   ⇒ thừa đúng 16px ⇒ cuộn dọc. Ngưỡng của form đó là viewport < 916px; viewport 1000px thì hết.
 * Form mẫu /PUOrderDetail cùng viewport KHÔNG bị, chỉ vì đầu phiếu của nó thấp hơn (225px) nên hàng
 * giữa còn 514px — tức đây là ngưỡng chung, không phải lỗi riêng một form.
 *
 * Đặt min-height:0 để hàng 1fr co đúng phần được chia; lưới bên trong tự thu theo (đo lại: thừa
 * 16 → 0, lưới vẫn hiện). KHÔNG chữa bằng cách hạ flex-basis của .tab-content — đó là né triệu
 * chứng, và làm lưới thấp đi cả ở cửa sổ cao.
 */
.tab-detail {
  min-height: 0;
}

/*==============SUMMARY=============*/
/* Dải tổng là NỬA DƯỚI của thẻ lưới: cùng nền, cùng lề 16px, chỉ bo 2 góc dưới và không có
   viền trên (đường ngăn giữa lưới và dải tổng do .tab-panel vẽ bằng border-bottom). */
.summary {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  bottom: 0;
  padding: 8px 16px 10px 16px;
  margin: 0 16px;
  /* ghi đè `width: 100%` của rule gộp phía trên: 100% + margin 32px là tràn phải,
     dải tổng sẽ rộng hơn .tab-panel đúng 32px và hết ăn khớp */
  width: auto;
  background: #fff;
  border: 1px solid var(--voucher-frame-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.summaryimp {
  display: grid;
  grid-template-columns: 33% 33% 34%;
  bottom: 0;
  padding: 8px 8px 10px 8px;
  background: #b9dbff42;
}

.summary label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}


.summary-value,
.summary-foreign-currency-value {
  display: flex;
  flex-direction: row-reverse;
  font-weight: 500;
  /*width: 160px;*/
}

/*==============MAIN-INFO=============*/
.main-information {
  padding: 8px 16px 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.main-information .row {
  margin-right: 0px;
  margin-left: 0px;
}

/*.main-information label,*/
/*.tab-header-extend label {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  height: 26px;*/
/*  font-weight: 400;*/
/*}*/
.main-information label {
  display: flex;
  align-items: center;
  height: 26px;
  font-weight: 500;
}



/* Kẻ dọc ngăn cột trái/phải của đầu phiếu (theo ảnh mẫu) — thay cho kẻ ngang dưới đầu phiếu. */
.main-infomation__right {
  flex-basis: 35%;
  border-left: 1px solid var(--voucher-frame-border);
  padding-left: 16px;
}

.main-infomation__left {
  flex-basis: 65%;
}

.tab-header-extend {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tab-header-extend .tab-header-extend-item {
  display: flex;
  align-items: center;
}

/*==============TAB-CONTENT=============*/

.tab-detail {
  display: flex;
  flex-direction: column;
}

/* Thẻ bọc <TabHeader> + <TabContent> (VoucherEditor.razor). Nền/bo góc/đổ bóng đặt ở ĐÂY chứ
   không ở .tab-detail: .tab-detail là ô lưới của .body-container, tô nền lên nó là tô cả ô.
   flex:1 + min-height:0 để khối lưới ăn hết phần cao còn lại mà vẫn co được (xem chú thích
   min-height:0 của .tab-detail ở đầu file). */
.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 16px;
  background-color: #fff;
  border: 1px solid var(--voucher-frame-border);
  /* không kẻ dưới: dòng tổng của lưới (nền #f3f3f3) đã tự tách khỏi dải tổng bên dưới */
  border-bottom: none;
  /* chỉ bo 2 góc TRÊN: 2 góc dưới do .summary bo, hai khối ghép thành một thẻ */
  border-radius: 8px 8px 0 0;
  /* để lưới (góc vuông) không đè lên góc bo của thẻ */
  overflow: hidden;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 16px 0 16px;
}

.tab-header-button {
  gap: 4px;
}

.tab-content {
  flex: 1 1 450px;
  width: 100%;
  min-height: 0;
}


/*==============TOP HEADER=============*/

/* KHÔNG nới lề ngang của thanh tiêu đề: nhóm nút + checkbox của một số form đã kín chỗ
   (đo /finance/cash/payment-orders 26/08/2026: nới lên 16px thì nhãn "Nộp vào ngân sách nhà nước" xuống 4 dòng và
   chui xuống dưới nút "Ghi sổ"). Lệch 8px so với lề thân phiếu là có chủ đích. */
.top-header {
  display: flex;
  padding: 8px;
  justify-content: space-between;
  align-items: center;
}
.top-header.header-form {
  border-bottom: 1px solid var(--voucher-frame-border);
}

.top-header .header-title,
.top-header .header-action,
.top-header .header-button {
  display: flex;
  align-items: center;
  gap: 4px;
}



/*
.vhb-secondary.e-btn { color: #6c757d; }
.vhb-success.e-btn   { color: #28a745; }
.vhb-info.e-btn      { color: #17a2b8; }
.vhb-primary.e-btn   { color: #007bff; }
.vhb-error.e-btn,
.vhb-danger.e-btn    { color: #dc3545; }
.vhb-warning.e-btn   { color: #ffc107; }
*/

.top-header .header-title .icon {
  width: 32px;
  height: 32px;
  font-size: 28px;
  color: gainsboro;
}

.top-header .header-title .title {
  font-weight: 700;
  /*font-size: 1.2rem;*/
  font-size: 1.4rem;
  top: -7px;
  left: 20px;
  color: #111;
  white-space: nowrap;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
}

.content-voucher__container {
  height: 100%;
}

.content-voucher__detail {
  height: calc(100% - 48px);
}

.content-voucher__detail div:first-child {
  height: 100%;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.arrow-expand > i {
  transition: all ease 0.3s;
}

.arrow-expand.expanded > i {
  transform: rotate(90deg);
}

.toggle-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  gap: 16px;
}

.toggle-box__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}

.toggle-box__highlight {
  color: #ffaaaa;
}


.filter-voucher {
  padding: 16px;
}

.filter-voucher__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  display: inline-block;
}

.filter-voucher__action {
  display: flex;
  justify-content: space-between;
}



.multi-col-row {
  display: flex;
  width: 100%;
}

.multi-col-row .col-code {
  flex: 0 0 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-col-row .col-name {
  flex: 0 0 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}

.multi-col-row .col-grp {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: #666;
}

/*.e-grid td.e-rowcell.e-leftalign {
    font-size:15px ;
}
.e-grid td.e-rowcell.e-centeralign {
    font-size: 15px;
}
.e-grid td.e-rowcell.e-rightalign {
    font-size: 15px;
}*/
.voucher-date {
  font-size: 1.05rem;
  color: black;
  font-style: italic;
  font-weight: 470;
}

.legend-printed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 13px;
  color: #555;
}

.legend-color {
  width: 32px;
  height: 18px;
  background: #bbf7c1;
  border: 1px solid #c6e8cd;
  border-radius: 2px;
  display: inline-block;
}

/* ============================================================================
   Tooltip tự vẽ cho form chứng từ (khung VoucherEditor)
   Kèm wwwroot/js/voucher-tooltip.js — JS gỡ `title` khỏi DOM rồi dựng thẻ này ở cuối <body>.
   Tooltip mặc định của trình duyệt không style được, đó là lý do phải tự vẽ.
   Chỉ có MỘT thẻ .vtip cho cả trang, JS dời nó theo phần tử đang hover.
   ============================================================================ */

.vtip {
  position: fixed;
  z-index: 100000;
  display: none;
  max-width: 320px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #1f1f1f;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  white-space: normal;
  word-break: break-word;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  pointer-events: none; /* không bao giờ cướp chuột của phần tử bên dưới */
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.13s ease-out,
    transform 0.13s ease-out;
}

/* Hiện: mờ dần + phóng nhẹ + trượt về phía phần tử. Điểm neo đặt ở cạnh giáp phần tử
   nên tooltip "nở ra" từ chỗ mũi nhọn chứ không phải từ giữa thẻ. */
.vtip--below {
  transform-origin: top center;
}
.vtip--above {
  transform-origin: bottom center;
}

.vtip--below {
  transform: scale(0.94) translateY(-4px);
}
.vtip--above {
  transform: scale(0.94) translateY(4px);
}

.vtip.vtip--show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Mũi nhọn: hình vuông xoay 45°, cùng màu nền. JS đặt toạ độ ngang cho nó
   trỏ đúng tâm phần tử kể cả khi tooltip bị kẹp lệch ở mép màn hình. */
.vtip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #1f1f1f;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

.vtip--below .vtip-arrow {
  top: -4px;
}
.vtip--above .vtip-arrow {
  bottom: -4px;
}

/* Người dùng bật "giảm chuyển động" trong hệ điều hành thì bỏ hiệu ứng, chỉ hiện/ẩn. */
@media (prefers-reduced-motion: reduce) {
  .vtip {
    transition: none;
    transform: none;
  }

  .vtip.vtip--show {
    transform: none;
  }
}