/* company_month.css v1.0.1 - the Company month screen (TASK-2026-181, slice 2C-b). Classes of the approved mockups only; the shared mr-* / mb-* pieces live in multi_branch.css.
   The pieces that screen alone draws (the period row, the checks list) are written here, scoped under the page's own root class so no other page is touched. Logical sides only. */

/* the period row: the month and the branch list */
.cmo-page .mb-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.cmo-page .mb-period .form-group { margin-bottom: 0; }
.cmo-page .mb-period select { width: auto; min-width: 12rem; max-width: 100%; }
.cmo-page .mb-ptitle { display: grid; gap: 2px; margin-inline-end: auto; min-width: 0; }
.cmo-page .mb-ptitle b { font-size: var(--fs-title); }
.cmo-page .mb-ptitle span { color: var(--muted); font-size: var(--fs-small); }

/* the checks list */
.cmo-page .mr-checks { list-style: none; margin: 0; padding: 0; }
.cmo-page .mr-checks > li { display: block; padding-inline-start: var(--space-3); border-inline-start: 3px solid transparent; }
.cmo-page .mr-checks > li + li { border-top: 1px solid var(--line); }
.cmo-page .mr-checks > li[data-tone="warn"] { border-inline-start-color: var(--warning); }
.cmo-page .mr-checks > li[data-tone="ok"] { border-inline-start-color: var(--success); }
.cmo-page .mr-ck-row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.cmo-page .mr-ck-t { flex: 1 1 auto; min-width: 0; }
.cmo-page .mr-ck-t small { display: block; color: var(--muted); font-size: var(--fs-small); }
.cmo-page .mr-ck-btn { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.cmo-page .mr-ck-btn > i { margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
.cmo-page .mr-ck-btn[aria-expanded="true"] > i { transform: rotate(180deg); }
.cmo-page .mr-ck-note { color: var(--success); font-size: var(--fs-small); white-space: nowrap; }
.cmo-page .mr-ck-note[hidden] { display: none; }
.cmo-page .mr-ck-p { padding: var(--space-1) 0 var(--space-3); display: grid; gap: var(--space-3); }
.cmo-page .mr-ck-p[hidden] { display: none; }
.cmo-page .mr-ck-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--fs-small); }
.cmo-page .mr-ck-rows li { display: flex; justify-content: space-between; gap: var(--space-3); }
.cmo-page .mr-ck-rows li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.cmo-page .mb-0 { margin-bottom: 0; }

/* the owner's note, and the company's own expenses lines under the comparison */
.cmo-page .cmo-note { margin-bottom: var(--space-3); }
.cmo-page .cmo-co-lines { margin-top: var(--space-4); }

/* the dialogs open outside the page: the list of branches in the close dialog uses the same checks list */
.bx-dlg .mr-checks { list-style: none; margin: 0; padding: 0; }
.bx-dlg .mr-checks > li { display: block; padding-inline-start: var(--space-3); border-inline-start: 3px solid transparent; }
.bx-dlg .mr-checks > li + li { border-top: 1px solid var(--line); }
.bx-dlg .mr-checks > li[data-tone="warn"] { border-inline-start-color: var(--warning); }
.bx-dlg .mr-checks > li[data-tone="ok"] { border-inline-start-color: var(--success); }
.bx-dlg .mr-ck-row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.bx-dlg .mr-ck-t { flex: 1 1 auto; min-width: 0; }
.bx-dlg .mr-ck-t small { display: block; color: var(--muted); font-size: var(--fs-small); }
.bx-dlg #cmo-note, .bx-dlg #cmo-reason { width: 100%; min-height: 6rem; resize: vertical; }

@media (max-width: 768px) {
  .cmo-page .mb-period select { min-width: 0; width: 100%; }
  .cmo-page .mb-period .form-group { flex: 1 1 100%; }
}