/* Dòng 【稼働可】 trên issue list gốc của Redmine.
   `display: block` là thứ biến cụm này thành DÒNG THỨ HAI bên dưới totals — nó nằm
   trong `<span class="totals">` của group row, vốn là inline. */
.aio-capacity {
  display: block;
  margin-top: 0.15em;
  font-weight: normal;
}

.aio-capacity-label {
  color: #555;
  margin-right: 0.3em;
}

.aio-capacity-chip {
  margin-right: 0.9em;
  white-space: nowrap;
}

/* Chỉ CON SỐ phần trăm in đậm, không phải cả chip — cùng lý do với hai cột tỉ lệ của
   bảng effort: màu nói mức độ, chữ đậm chỉ ra chỗ cần nhìn trước. */
.aio-capacity-percent {
  font-weight: bold;
}

/* Cùng hệ màu với ô lịch của plugin: xanh an toàn, cam cảnh báo, đỏ vượt.

   `.aio-ratio-*` là cột % của bảng Workforce Efforts Management. Dùng CHUNG bốn màu này
   (một hệ màu cho cả plugin) nhưng là bốn class RIÊNG, vì hai màn có ngưỡng riêng —
   xem `aio_effort_ratio_class`. Stylesheet này được hook layout nạp trên MỌI trang nên
   màn effort không cần thêm asset nào.

   Bốn mã hex ở đây là FALLBACK, không phải nguồn sự thật duy nhất: admin đổi màu trong
   plugin settings thì hook layout đè `--aio-ratio-colour-*` trên `:root` (xem
   `JoyAio::Common::RatioPalette`). Không đổi gì ⇒ không có thẻ `<style>` nào
   được thêm, và bốn dòng dưới đây là thứ duy nhất tô màu. */
.aio-capacity-good,   .aio-ratio-good   { color: var(--aio-ratio-colour-good, #2e7d32); }
.aio-capacity-warn,   .aio-ratio-warn   { color: var(--aio-ratio-colour-warn, #ef6c00); }
.aio-capacity-danger, .aio-ratio-danger { color: var(--aio-ratio-colour-danger, #c62828); }
.aio-capacity-none,   .aio-ratio-none   { color: var(--aio-ratio-colour-none, #888888); }

/* Chip có popup chi tiết (bấm được): cùng popup với màn Workforce Efforts Management. */
.aio-capacity-chip[data-aio-detail] {
  cursor: pointer;
  border-radius: 3px;
}

.aio-capacity-chip[data-aio-detail]:hover {
  text-decoration: underline dotted;
}

.aio-capacity-chip[data-aio-detail]:focus-visible {
  outline: 2px solid #628db6;
  outline-offset: 1px;
}

/* ------------------------------------------------------------------------------
   Thanh trạng thái + nội dung popup chi tiết của CAPACITY. Khung popup dùng chung
   (`.aio-dialog*`) và thẻ số dùng chung (`.aio-metric*`) đã chuyển sang
   `common/detail_popup.css` (common's hook nạp TRƯỚC file này) — những gì còn lại ở
   đây chỉ được partial `_effort_detail` của module này dùng (dòng của màn Workforce
   Efforts Management và chip 【稼働可】 trên issue list, cùng partial). Nằm ở đây,
   không trong `_styles.html.erb`, vì stylesheet này nạp trên MỌI trang.
   ------------------------------------------------------------------------------ */

/* Thanh: nền xám = toàn bộ năng lực (dưới 100%) hoặc toàn bộ estimate (khi vượt).
   `.aio-bar-fill` đặc tới 100% năng lực; `.aio-bar-over` sọc = phần VƯỢT, có vạch đứng
   ở ranh giới 100%. */
.aio-bar { position: relative; display: flex; height: 0.9em; border-radius: 999px;
          background: #e9edf1; overflow: hidden; }
.aio-bar-fill, .aio-bar-over { display: block; height: 100%; }
.aio-bar-fill { background-color: currentColor; }
.aio-bar-over { background-image: repeating-linear-gradient(45deg, currentColor 0 5px, transparent 5px 9px);
               opacity: 0.75; box-shadow: inset 2px 0 0 #fff; }
.aio-bar-none { background: repeating-linear-gradient(45deg, #eceff2 0 5px, #f7f8f9 5px 10px); }

/* Hai dòng chữ cạnh thanh: "Ước lượng 61% · 244.0h / 400.0h" và phần còn dư / vượt. */
.aio-bar-stats { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; line-height: 1.35; }
.aio-bar-hours { color: #555; font-size: 0.9em; }
.aio-bar-left { font-size: 0.9em; color: #666; }
.aio-bar-left-over { font-weight: bold; }

/* Bố cục riêng của NỘI DUNG popup (khung `.aio-dialog-body` bọc ngoài là của chung, xem
   common/detail_popup.css): thanh + chỉ số + link mở ticket + bảng member. */
.aio-detail-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1em; margin-bottom: 1em; }
.aio-detail-bar .aio-bar { height: 1.2em; }
.aio-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr)); gap: 0.5em; }
.aio-detail-actions { margin: 0.9em 0 0; }
.aio-open-issues { display: inline-block; padding: 0.3em 0.8em; border: 1px solid #cfd6de; border-radius: 6px; background: #fff; }
.aio-open-issues::after { content: ' ↗'; }
.aio-open-issues:hover { background: #e8f1fb; text-decoration: none; }
table.aio-member-table td.aio-number, table.aio-member-table th.aio-number { text-align: right; white-space: nowrap; }
table.aio-member-table td.aio-member-name, table.aio-member-table th.aio-member-name { text-align: start; }
table.aio-member-table td.aio-member-ratio { display: flex; align-items: center; gap: 0.5em; min-width: 9em; }
table.aio-member-table td.aio-member-ratio .aio-bar { flex: 1 1 auto; height: 0.6em; }
table.aio-member-table td.aio-member-ratio strong { min-width: 3em; text-align: right; }

@media (max-width: 720px) {
  .aio-detail-bar { grid-template-columns: 1fr; }
}

p.query-totals.aio-capacity-totals {
  margin-top: 0.15em;
}

/* Redmine core: `a.toggle-all` trong group row là `float: inline-end` + `display: none`,
   chỉ hiện khi hover. Float được đặt ở DÒNG hiện tại, mà `.aio-capacity` là block nên
   nó cắt dòng inline của `<td>` — float bị đẩy xuống dưới dòng 【Available】. Ô `td`
   lại là block formatting context (table-cell), tức chiều cao ô CÓ tính float, nên
   ô cao thêm đúng một dòng khi hover và đường kẻ ngang tụt xuống.

   Nhấc link ra khỏi flow để hover không đổi chiều cao ô. `:has` giới hạn phạm vi vào
   đúng group row có dòng 【Available】 — CSS này nạp trên MỌI trang, các list khác
   (time entries, projects, users) phải giữ nguyên hành vi float gốc.
   `inset-block-start` khớp `padding-block-start: 0.8em` của core để link nằm trên
   dòng đầu; `inset-inline-end: 0` để `margin-inline-end: 4px` của core vẫn là
   khoảng cách duy nhất tới mép, y như khi còn float. */
tr.group:has(span.totals .aio-capacity) > td {
  position: relative;
}

tr.group:has(span.totals .aio-capacity) > td > a.toggle-all {
  float: none;
  position: absolute;
  inset-block-start: 0.8em;
  inset-inline-end: 0;
}

/* ------------------------------------------------------------------------------
   Màn cấu hình plugin, tab "Dòng trên danh sách ticket".

   MỌI luật dưới đây bám `#aio_capacity_settings`: stylesheet này nạp trên MỌI trang
   của Redmine (hook layout), nên một luật chung chung hơn sẽ lan sang màn khác.

   Màu lấy từ biến `--oc-*` của chính core (Redmine 7 dùng bảng Open Color), kèm giá trị
   dự phòng — để tab này trông cùng một hệ với phần còn lại của Redmine, kể cả theme.
   ------------------------------------------------------------------------------ */

/* `.tabular p` của core chừa 180px bên trái cho cột nhãn; đoạn giải thích không có
   nhãn nào nên trả lại bề rộng đó. */
#aio_capacity_settings p.aio-cap-intro {
  padding-inline-start: 0;
  color: var(--oc-gray-7, #495057);
}

#aio_capacity_settings ul.aio-cap-formula {
  margin: 0.2em 0 0.6em;
  padding-inline-start: 1.2em;
  color: var(--oc-gray-7, #495057);
}

#aio_capacity_settings ul.aio-cap-formula li { margin: 0.15em 0; }

/* Role đang lên 【稼働可】 (xanh) và role bị ẩn ở tab "Bảng effort" (xám gạch). */
#aio_capacity_settings .aio-cap-role-tag {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 0 9px;
  border: 1px solid var(--oc-blue-7, #1c7ed6);
  border-radius: 999px;
  background: var(--oc-blue-0, #e7f5ff);
  color: var(--oc-blue-9, #1864ab);
  font-size: 0.9em;
}

#aio_capacity_settings .aio-cap-role-tag-off {
  border-color: var(--oc-gray-4, #ced4da);
  background: var(--oc-gray-0, #f8f9fa);
  color: var(--oc-gray-6, #868e96);
  text-decoration: line-through;
}

/* --- lưới field của hàng tổng ------------------------------------------------ */

/* `.tabular label` của core: float trái, lề âm 180px, rộng 175px, in đậm canh phải —
   thiết kế cho nhãn cột trái của form. <label> bọc checkbox ở đây là một ô bấm nằm
   trong lưới, nên phải xoá sạch bộ đó. */
#aio_capacity_settings label.aio-cap-field {
  float: none;
  margin: 0 !important;
  inline-size: auto;
  text-align: start;
  font-weight: normal;
  line-height: 1.4;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
}

#aio_capacity_settings .aio-cap-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 4px 16px;
  margin: 0.4em 0 0.2em;
}

#aio_capacity_settings label.aio-cap-field input { margin: 0; }
#aio_capacity_settings label.aio-cap-field:hover { background: var(--oc-gray-1, #f1f3f5); }

#aio_capacity_settings label.aio-cap-field:has(input:checked) .aio-cap-field-name {
  text-decoration: line-through;
  color: var(--oc-gray-6, #868e96);
}

/* Tài khoản placeholder (spec 2026-09-25): phần estimate chưa có người nhận. Đặt ở
   file dùng chung vì popup chi tiết hiện cả trên màn effort lẫn issue list. */
.aio-placeholder-note { display: block; font-size: 0.85em; color: #8a6d00; }
.aio-placeholder-chip {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 3px;
  font-size: 0.8em; background: #fff3cd; color: #8a6d00;
}