/* ====== KH-Plus modern look ====== */
:root {
    --kp-surface: #ffffff;
    --kp-bg: #f6f8fb;
  }
  
  html, body { height: 100%; }
  body { background: var(--kp-bg); }
  
  /* Navbar */
  .navbar { box-shadow: 0 6px 24px rgba(0,0,0,.05); }
  
  /* Cards */
  .card-modern {
    background: var(--kp-surface);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(28, 39, 49, 0.06);
  }
  
  /* Page title */
  .page-title { font-weight: 600; letter-spacing: .2px; }
  
  /* Table */
  .table-modern th, .table-modern td { padding: .9rem .75rem; vertical-align: middle; }
  .table-modern thead th {
    position: sticky; top: 0; background: var(--kp-surface); z-index: 1;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .table-modern tbody tr:hover { background: #f9fafc; }
  .cell-ellipsis {
    max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  
  /* Icon buttons */
  .btn-icon { display: inline-flex; align-items: center; gap: .4rem; }
  
  /* Toast */
  #toast { box-shadow: 0 8px 24px rgba(0,0,0,.15); }
  
  /* Utilities */
  .badge-soft { background: rgba(0,0,0,.05); color: #0b1320; }
  
  .thumb { width:56px; height:56px; object-fit:cover; border-radius:.5rem; border:1px solid rgba(0,0,0,.08); }
  .thumb-sm { width:44px; height:44px; object-fit:cover; border-radius:.4rem; border:1px solid rgba(0,0,0,.08); }
  .thumb-list { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
  .thumb, .thumb-sm { cursor: zoom-in; }

  /* === KH-Plus enhancements === */
:root{
  --brand-600:#2563eb; --brand-700:#1d4ed8;
  --radius:14px; --shadow:0 6px 24px rgba(17,24,39,.08);
}

/* Buttons */
.btn-primary{ background:var(--brand-600); border-color:var(--brand-600); }
.btn-primary:hover{ background:var(--brand-700); border-color:var(--brand-700); }
.btn-outline-primary{ color:var(--brand-700); border-color:var(--brand-700); }
.btn-outline-primary:hover{ background:var(--brand-700); color:#fff; }

/* Numbers alignment + nicer digits */
.table-modern .num{ text-align:right; font-variant-numeric: tabular-nums; }

/* Section rows (A/B/C) */
.section-row{ background:#fff7ed; font-weight:700; }

/* KPI bar */
.kpi{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:12px 0 18px; }
.kpi .item{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; }
.kpi .label{ color:#64748b; font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
.kpi .val{ font-size:20px; font-weight:800; }

/* Nâng card 1 chút (đã có .card-modern, bổ sung padding utility nhẹ) */
.card-modern.px-3{ padding-left:1rem; padding-right:1rem; }
.card-modern.py-3{ padding-top:1rem; padding-bottom:1rem; }

/* Print gọn cho trang báo cáo chi tiết */
@media print{
  .navbar, .toolbar, .btn, .kpi{ display:none !important; }
  body{ background:#fff; }
}

/* ===== KH-Plus Projects List — safe add-on (no overrides) ===== */

/* Toolbar gọn cho ô tìm kiếm + nút lọc */
.kp-toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.kp-toolbar .kp-search{ min-width:260px; }

/* Cột dài hiển thị ellipsis và có tooltip */
.cell-ellipsis{ max-width: 320px; } /* nhỏ hơn 1 chút cho vừa table */
@media (max-width: 991.98px){ .cell-ellipsis{ max-width: 200px; } }

/* Header bảng nhìn “app” hơn */
.table-modern thead th{
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
}

/* Badge phần trăm quản lý nổi hơn mà vẫn nhẹ */
.badge-soft-primary{
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,.18);
}

/* Hàng rỗng */
.empty-state{ padding: 2rem 0; color:#6b7280; }

/* ===== Responsive stacked table for small screens (<=992px) ===== */
@media (max-width: 991.98px){
  /* Ẩn header bảng, biến mỗi <tr> thành 1 card */
  .table-modern.table-stack thead{ display:none; }
  .table-modern.table-stack,
  .table-modern.table-stack tbody,
  .table-modern.table-stack tr,
  .table-modern.table-stack td{ display:block; width:100%; }

  .table-modern.table-stack tbody tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    box-shadow: var(--shadow);
    margin-bottom:12px;
    padding:10px 12px;
  }

  .table-modern.table-stack td{
    border:0;
    padding:6px 0;
  }

  /* Nhãn cột lấy từ thuộc tính data-th của <td> */
  .table-modern.table-stack td::before{
    content: attr(data-th);
    display:block;
    font-size:12px;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:2px;
  }

  /* Hàng action để cuối card */
  .table-modern.table-stack td.actions{
    padding-top:8px; margin-top:6px;
    border-top:1px dashed rgba(0,0,0,.08);
    display:flex; justify-content:flex-end; gap:8px;
  }

  /* Ở chế độ card thì cho phép tên/địa chỉ xuống dòng (không ellipsis) */
  .table-modern.table-stack .cell-ellipsis{
    white-space:normal; overflow:visible; text-overflow:clip;
  }
}

/* ===== Navbar KH-Plus ===== */
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.navbar-nav .nav-link.active {
  font-weight: 600;
  position: relative;
}

.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.35rem;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-600);
}

/* Dropdown nhìn “app” hơn */
.navbar .dropdown-menu {
  border-radius: .75rem;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: var(--shadow);
  min-width: 230px;
}

.navbar .dropdown-item {
  font-size: .95rem;
}

/* Icon toggle cho dòng tổng chi phí (nhân công / vật tư) */
.kp-toggle {
  font-size: 0.8rem;
  opacity: 0.75;
  transition: transform .15s ease, opacity .15s ease;
}

/* Cho label của dòng có toggle căn gọn hơn một chút */
tr[data-section] td:nth-child(2) {
  display: flex;
  align-items: center;
}

/* Highlight 2 dòng lợi nhuận ở mục C */
.profit-row td {
  font-weight: 600;
}

.profit-row td:nth-child(3) { /* cột THU = lợi nhuận */
  font-size: 1.05rem;
  color: #16a34a; /* xanh lời lãi nhẹ mắt */
}

/* === Báo cáo tổng hợp công trình === */

/* Hàng tổng cộng cuối bảng */
.table-summary tfoot tr {
  background: #f9fafb;
  font-weight: 600;
}

.table-summary tfoot td {
  border-top: 2px solid rgba(0,0,0,.08);
}

/* Cảnh báo lỗ và vượt dự toán chi phí */
.report-row-loss .cell-profit {
  color: #b91c1c;
  font-weight: 600;
}

.cell-cost-paid-over {
  background: #fef2f2;
  color: #b91c1c;
  font-weight: 600;
}

/* Hiển thị tỷ lệ lợi nhuận nhẹ nhàng hơn một chút */
.cell-profit-rate {
  font-size: 0.85rem;
  opacity: 0.85;
}
/* ===== Chi tiết báo cáo công trình: KPI & meta ===== */

.report-meta-card {
  height: 100%;
  font-size: 0.9rem;
}

.report-kpi-grid {
  --kpi-min-h: 88px;
}

.report-kpi-card {
  background: #f9fafb;
  border-radius: 0.9rem;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}

.report-kpi-card .kpi-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
}

.report-kpi-card .kpi-value {
  font-size: 1.1rem;
  font-weight: 650;
}

.report-kpi-card .kpi-sub {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Lợi nhuận dương/âm */
.report-kpi-card.kpi-profit .kpi-value {
  color: #16a34a;
}

.report-kpi-card.kpi-negative {
  border: 1px solid #fca5a5;
}

.report-kpi-card.kpi-negative .kpi-value {
  color: #b91c1c;
}

@media (max-width: 767.98px) {
  .report-meta-card {
    margin-bottom: 0.5rem;
  }
}

/* Ghi chú & cách tính ở cuối trang detail */
.report-notes {
  padding-left: 1.1rem;
  color: #4b5563;
}

.report-notes li + li {
  margin-top: 0.2rem;
}

.report-notes strong {
  color: #111827;
}

#itemsTable .item-qty-input,
#itemsTable .item-discount-input {
  max-width: 80px;
}

#itemsTable .item-price-input {
  max-width: 140px;
}

#itemsTable .item-name-input {
  min-width: 260px;
}

/* Mã cột A/B/1/2/... */
.kp-code-cell {
  font-weight: 600;
  color: #495057;
}

/* Icon tròn đầu dòng */
.kp-section-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
  font-size: 0.9rem;
  color: #495057;
}

/* Link "Xem chi tiết" */
.kp-link-detail {
  font-size: 0.78rem;
  text-decoration: none;
  color: #0d6efd;
  opacity: 0.8;
}
.kp-link-detail:hover {
  opacity: 1;
  text-decoration: underline;
}

/* KPI: trạng thái lãi / lỗ */
.report-kpi-card.kpi-profit {
  background: #e8f9f0;
}
.report-kpi-card.kpi-loss {
  background: #ffecec;
}

/* ===== Dòng tổng từng nhóm chi phí trong báo cáo detail ===== */
/* Áp dụng cho các dòng có data-section: 1, 2, 3.0, 4 (mgmt) */
tr[data-section] {
  font-weight: 600;
  background: #f8fafc;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

/* Khi hover các dòng này thì nhạt nhạt cho có cảm giác focus */
tr[data-section]:hover {
  background: #eef2ff;
}

/* Icon + nút tam giác nhìn rõ hơn một chút trên dòng tổng */
tr[data-section] .kp-section-icon {
  background: #e5edff;
  color: #1d4ed8;
}

tr[data-section] .kp-toggle {
  opacity: 0.9;
}


/* Chữ màu đỏ cho các dòng tổng: 1, 2, 3.0, 4 */
tr[data-section] td {
  color: #b91c1c; /* đỏ đậm */
}

/* Giữ icon tròn vẫn màu xanh như cũ */
tr[data-section] .kp-section-icon {
  color: #1d4ed8;
}

/* Cột mã (1, 2, 3.0, 4) cũng đỏ theo */
tr[data-section] .kp-code-cell {
  color: #b91c1c;
}