/* company_targets.css v1.0.0 - the Company targets screen (TASK-2026-181, slice 2C-b). Classes of the approved mockups only; the shared mr-* / mb-* pieces live in multi_branch.css. */

/* the month row: the month and its state, then the month list */
.mb-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.mb-period .form-group { margin-bottom: 0; }
.mb-period select { width: auto; min-width: 12rem; max-width: 100%; }
.mb-ptitle { display: grid; gap: 2px; margin-inline-end: auto; min-width: 0; }
.mb-ptitle b { font-size: var(--fs-title); }
.mb-ptitle span { color: var(--muted); font-size: var(--fs-small); }
/* the company target, edited in place */
.mb-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.mb-edit .form-group { margin-bottom: 0; }
.mb-edit input { width: 12rem; max-width: 100%; }
/* a person's own target */
.mb-my { display: grid; gap: var(--space-3); }
.mb-my-v { font-size: var(--fs-display-s, 2.2857rem); font-weight: 700; line-height: 1.2; }
.ctg-basis { margin-top: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* the change log, folded */
.ctg-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; text-align: start; }
.ctg-fold:hover .ctg-fold-t { color: var(--brand); }
.ctg-fold-t { font-weight: 700; min-width: 0; }
.ctg-fold-m { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.ctg-fold i { color: var(--muted); transition: transform .2s; }
.ctg-fold[aria-expanded="true"] i { transform: rotate(180deg); }
.ctg-none { margin: 0; }
.ctg-warn { color: var(--warning); }
@media (max-width: 720px) {
  .mb-period select { min-width: 0; width: 100%; }
  .mb-period .form-group { flex: 1 1 100%; }
}
