/* =========================================================
   Thanh tab "Lịch trình | Chi phí" và tab Chi phí trên trang lịch trình
   (templates/index.html, templates/_chi_phi.html, static/js/metravel-chi-phi.js).
   Chỉ dùng biến màu của tokens.css.
   ========================================================= */

/* ---- Thanh tab ---- */
.lt-tabs {
  display: flex; gap: 4px; margin: 24px 0 0;
  border-bottom: 1px solid var(--mt-border);
}
.lt-tabs[hidden] { display: none; }
.lt-tabs [role="tab"] {
  min-height: 44px; padding: 0 18px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  font: inherit; font-weight: 600; font-size: 16px; color: var(--mt-muted);
  cursor: pointer; margin-bottom: -1px;
}
.lt-tabs [role="tab"][aria-selected="true"] {
  color: var(--mt-primary); border-bottom-color: var(--mt-primary);
}
.lt-tabs [role="tab"]:focus-visible { outline: 3px solid var(--mt-primary); outline-offset: -3px; }
#mt-pn-lich[hidden], #mt-pn-chi-phi[hidden] { display: none; }

/* ---- Segmented control Dự kiến | Thực tế | Báo cáo ---- */
.cp-phan {
  display: inline-flex; padding: 3px; gap: 2px; margin-bottom: 16px;
  background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: 999px;
}
.cp-phan button {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--mt-muted);
  cursor: pointer;
}
.cp-phan button[aria-pressed="true"] { background: var(--mt-primary); color: var(--mt-on-primary); }
.cp-sap-co {
  padding: 20px; border-radius: 12px; background: var(--mt-surface);
  color: var(--mt-muted); font-size: 14px;
}

/* ---- Số người ---- */
.cp-so-nguoi { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.cp-so-nguoi-nhan { font-weight: 600; color: var(--mt-text); }
.cp-dem { display: inline-flex; align-items: center; gap: 6px; }
.cp-dem-nut {
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: var(--mt-primary); color: var(--mt-on-primary);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.cp-dem-nut:hover { background: var(--mt-primary-hover); }
.cp-dem-nut:disabled { background: var(--mt-border); color: var(--mt-muted); cursor: default; }
.cp-dem-so { min-width: 2ch; text-align: center; font-size: 20px; color: var(--mt-text); }
.cp-phong { font-size: 13px; color: var(--mt-muted); }

/* ---- Bảng ---- */
.cp-bang {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--mt-on-primary); border: 1px solid var(--mt-border); border-radius: 12px; overflow: hidden;
}
.cp-bang th {
  text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 600;
  color: var(--mt-muted); background: var(--mt-surface);
}
.cp-bang td { padding: 0; border-top: 1px solid var(--mt-border); vertical-align: middle; }
.cp-bang .cp-so { text-align: right; padding-right: 14px; white-space: nowrap; }
.cp-bang th.cp-so { padding-right: 14px; }
.cp-dong {
  display: block; width: 100%; min-height: 52px; padding: 10px 14px;
  background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.cp-dong:hover .cp-ten { color: var(--mt-primary); text-decoration: underline; }
.cp-dong:focus-visible { outline: 3px solid var(--mt-primary); outline-offset: -3px; }
.cp-ten { display: block; font-weight: 600; color: var(--mt-text); }
.cp-chu-thich { display: block; font-size: 12px; color: var(--mt-muted); margin-top: 2px; }
.cp-chu-thich:empty { display: none; }
.cp-trong { font-size: 13px; color: var(--mt-muted); font-style: italic; }
.cp-du-phong td:first-child { padding: 10px 14px; }
.cp-du-phong { background: var(--mt-surface); }

/* Dòng đang nhập số (JS chèn ngay dưới dòng được bấm) */
.cp-sua td { padding: 10px 14px; background: var(--mt-primary-soft); }
.cp-sua form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-sua input {
  flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--mt-border); border-radius: 8px; font: inherit; font-size: 15px;
  background: var(--mt-on-primary); color: var(--mt-text);
}
.cp-nut-nho {
  min-height: 44px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--mt-primary); background: var(--mt-on-primary); color: var(--mt-primary);
}
.cp-nut-nho--chinh { background: var(--mt-primary); color: var(--mt-on-primary); }

/* Màn hình hẹp: chú thích xuống dòng, số tiền không bị bóp */
@media (max-width: 519px) {
  .cp-bang { font-size: 13px; }
  .cp-dong { padding: 10px 10px; }
  .cp-bang .cp-so { padding-right: 10px; }
}

/* ---- Thẻ tổng: nền primary, dải gold đáy ---- */
.cp-tong {
  margin-top: 16px; padding: 18px 20px 22px; border-radius: 14px;
  background: var(--mt-primary); color: var(--mt-on-primary); box-shadow: var(--mt-gold-bar);
}
.cp-tong p { margin: 0; }
.cp-tong-nhan { font-size: 14px; color: var(--mt-on-primary-muted); }
.cp-tong-so { font-size: 30px; line-height: 1.2; margin: 4px 0 6px !important; color: var(--mt-gold-text); }
.cp-tong-phu { font-size: 13px; color: var(--mt-on-primary-muted); }

/* ---- Ô chat nhập nhanh ---- */
.cp-chat { margin-top: 18px; padding: 14px; border: 1px solid var(--mt-border); border-radius: 12px; background: var(--mt-on-primary); }
.cp-chat[hidden] { display: none; }
.cp-chat-nhan { margin: 0 0 8px; font-weight: 600; color: var(--mt-text); font-size: 14px; }
.cp-chat-log { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.cp-tin { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.cp-tin--khach { align-self: flex-end; background: var(--mt-primary); color: var(--mt-on-primary); }
.cp-tin--mt { align-self: flex-start; background: var(--mt-surface); color: var(--mt-text); }
.cp-tin--cho { align-self: flex-start; background: var(--mt-note-bg); color: var(--mt-note-text); font-size: 13px; }
.cp-chip-hang { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-chip {
  min-height: 36px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--mt-primary-soft); color: var(--mt-primary); font: inherit; font-size: 13px; font-weight: 600;
}
.cp-chip:hover { background: var(--mt-primary); color: var(--mt-on-primary); }
.cp-chat-form { display: flex; gap: 8px; }
.cp-chat-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--mt-border); border-radius: 999px; font: inherit; font-size: 15px; color: var(--mt-text);
}
.cp-chat-form input:focus { outline: none; border-color: var(--mt-primary); }
.cp-chat-gui {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mt-primary); color: var(--mt-on-primary); font: inherit; font-weight: 600;
}
.cp-chat-gui:hover { background: var(--mt-primary-hover); }

/* ---- Gợi ý mức chi của MeTravel (bảng dự toán cũ, thu gọn) ---- */
.cp-goi-y { margin-top: 18px; }
.cp-goi-y > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-weight: 600; color: var(--mt-primary); font-size: 15px;
}
.cp-goi-y[open] > summary { margin-bottom: 8px; }

.cp-ghi-chu { margin: 18px 0 10px; font-size: 13px; color: var(--mt-muted); }
.cp-bat-dau { width: 100%; }
@media (min-width: 640px) { .cp-bat-dau { width: auto; } }