/* Экран «Расходы + маржа» (План №1, биллинг). Базовые классы — в styles.css;
   здесь только маржа-специфика: знак маржи, переключатель месяца, сортировка,
   абонетка-пилюли, модалки (редактор абонетки + карточка денег клиента). */

/* знак маржи */
.mp { color: #15a05a; font-weight: 650 }
.mn { color: #dc2626; font-weight: 650 }

/* инлайн-редактор абонетки в ячейке */
.editc { display: inline-flex; align-items: center; gap: 7px }
.pen { cursor: pointer; color: var(--accent); font-size: 12px; border: 1px solid var(--border);
  border-radius: 7px; padding: 1px 6px; background: var(--surface-2) }
.pen:hover { background: var(--accent-soft) }
.setlink { cursor: pointer; color: var(--accent); font-weight: 600; border-bottom: 1px dashed var(--accent) }

td.amt, .amt { font-variant-numeric: tabular-nums }
.subline { display: block; font-size: 11px; color: var(--muted); margin-top: 3px }
.payday-line { display: block; font-size: 11px; color: var(--muted); margin-top: 2px }

/* пилюли состояния абонетки */
.pill { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; border: 1px solid var(--border) }
.pill.warn { color: #b45309; background: #fff7ed; border-color: #fed7aa }
.pill.end { color: #dc2626; background: #fef2f2; border-color: #fecaca }

/* переключатель месяца ◀ месяц ▶ */
.monthnav { display: inline-flex; align-items: center; gap: 11px; font-weight: 650;
  font-size: 14px; color: var(--text) }
.monthnav button { border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 7px; width: 28px; height: 28px; cursor: pointer; color: var(--text-2);
  font-family: inherit; font-size: 13px; line-height: 1 }
.monthnav button:hover:not(:disabled) { background: var(--surface-3) }
.monthnav button:disabled { opacity: .4; cursor: default }

/* кликабельное имя клиента */
.clk { cursor: pointer }
.clk:hover { color: var(--accent); text-decoration: underline }

/* сортируемые заголовки таблицы */
thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap }
thead th.sortable:hover { color: var(--text) }
thead th.sortable.act { color: var(--text) }
th .arr { font-size: 9px }

/* ── модалки ── */
.modal-bg { position: fixed; inset: 0; background: rgba(10,12,18,.45);
  display: none; place-items: center; z-index: 50 }
.modal-bg.on { display: grid }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 22px 22px 18px; width: 340px; box-shadow: 0 18px 50px rgba(9,30,66,.28) }
.modal h3 { font-size: 15px; font-weight: 650; margin: 0 0 4px }
.modal .sub { font-size: 12px; color: var(--muted); margin-bottom: 16px }
.modal label { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 6px }
.modal input { width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 14px; background: var(--surface-2); color: var(--text);
  font-family: inherit }
.modal .acts { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px }
.ubtn { padding: 8px 15px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-family: inherit }
.ubtn.primary { background: var(--accent); border-color: var(--accent); color: #fff }
.ubtn:hover { background: var(--surface-3) }
.ubtn.primary:hover { background: var(--accent-2) }
.ubtn.sm { padding: 6px 12px; font-size: 12px; margin-top: 13px }

/* карточка денег клиента (широкая модалка) */
.modal.wide { width: 600px; max-width: 92vw }
.cm-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 4px }
.cm-head .ubtn { padding: 4px 11px }
.cm-section { margin-top: 20px }
.cm-title { font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 12px }
.tline { list-style: none; margin: 0 0 0 6px; padding: 0; border-left: 2px solid var(--border) }
.tline li { position: relative; padding: 0 0 13px 18px; font-size: 13px; color: var(--text) }
.tline li:last-child { padding-bottom: 0 }
.tline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface) }
.tline li.end::before { background: #dc2626 }
.tline .when { color: var(--muted); font-size: 11.5px; margin-top: 1px }
.cm-table { width: 100%; font-size: 13px; border-collapse: collapse }
.cm-table th { font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  font-weight: 600; text-align: right; padding: 4px 8px }
.cm-table th:first-child { text-align: left }
.cm-table td { padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--border) }
.cm-table td:first-child { text-align: left; color: var(--text-2) }

/* график «Динамика маржи» (costs.js renderTrend) — SVG-бары по месяцам */
.mg-wrap { padding: 18px 18px 10px }
.mg-svg { width: 100%; height: auto; display: block }
.mg-svg .mg-bar { fill: var(--accent) }
.mg-svg .mg-axis { stroke: var(--border); stroke-width: 1 }
.mg-svg .mg-x { font-size: 11px; fill: var(--muted); text-anchor: middle }
.mg-svg .mg-v { font-size: 11px; font-weight: 600; fill: var(--text); text-anchor: middle }
.mg-svg .mg-mut { fill: var(--faint) }