/* NEW-82 S2b — BBNT theo phụ lục-tháng (views/contract_periods.js). Tiền tố cpd-; chỉ token màu của app.css. */
.cpd-s { font-size: 12px; }
.cpd-chip { margin-left: 2px; }
.cpd-steps { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; font-size: 11px; }
.cpd-step { padding: 1px 6px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.cpd-step.done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-text); }
.cpd-table td { vertical-align: top; }
.cpd-table .btn.small { margin: 2px 0; }
.cpd-terms ul { margin: 0 0 8px; padding-left: 18px; }
.cpd-term { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin: 0 0 8px; }
.cpd-term-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cpd-term-row label { flex: 1 1 140px; }
.cpd-preview { margin: 8px 0; padding: 8px; background: var(--surface-2); border-radius: 6px; }
.cpd-list { list-style: none; margin: 6px 0; padding: 0; }
.cpd-item { padding: 8px 0; border-top: 1px solid var(--line); }
.cpd-acts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.cpd-bulk { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
/* Bảng 10 cột chỉ hiện khi khung đủ rộng; khung hẹp (tab phụ lục cạnh chatter, điện thoại) ⇒ mỗi tháng một thẻ, ô xếp lưới nhãn: giá trị */
.cpd-wrap { container-type: inline-size; }
@container (max-width: 980px) {
  .cpd-table thead { display: none; }
  .cpd-table, .cpd-table tbody { display: block; width: 100%; }
  .cpd-table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; border: 1px solid var(--line);
    border-radius: 8px; margin: 0 0 10px; padding: 8px 10px; }
  .cpd-table td { display: block; border: 0; padding: 2px 0; text-align: left; }
  .cpd-wrap .cpd-table td.num { text-align: left; }
  .cpd-wrap .cpd-table td { white-space: normal; min-width: 0; overflow-wrap: anywhere; }   /* app.css ≤ 760 px: td nowrap */
  .cpd-table td:first-child, .cpd-table td:last-child { grid-column: 1 / -1; }
  .cpd-table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; }
  .cpd-wrap .cpd-table td[data-label]:first-child::before { display: none; }
}
@media (max-width: 760px) {
  .cpd-wrap { overflow: visible; }
  .cpd-table thead { display: none; }
}
/* hộp thao tác tháng (UI.modal): nhãn trên, ô dưới — mỗi ô một dòng (2.6.0) */
.modal label.cpd-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.modal label.cpd-f input, .modal label.cpd-f textarea { color: var(--ink); font-size: 14px; }
/* NEW-82 30/10: nhắc "Chưa ghi khách đồng ý nghiệm thu" (viền nét đứt — nhắc, không phải quá hạn) + "không đo được gửi trễ"; nhãn dài xuống dòng ở màn hẹp */
.cpd-nudge { border: 1px dashed var(--line); }
.cpd-implied { margin-top: 3px; }
.cpd-nudge, .cpd-implied { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; }