/* static/css/v2_money.css — раздел «Деньги» (docs/v2/02_SCREENS.md §6).

   Только токены платформы (static/css/tokens.css): цвета, радиусы, тени.
   Поэтому светлая и тёмная тема работают сами, без отдельных правил.
   Подписи кнопок и бейджей не переносятся на вторую строку (nowrap).
   На телефоне (≤860px) таблица превращается в карточки. */

.mn-wrap { display: grid; gap: var(--s-3); max-width: 1180px; }

/* ── вкладки раздела ── */
.mn-tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
.mn-tabs::-webkit-scrollbar { display: none; }
.mn-tab { border: 0; background: none; padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer;
  color: var(--ink-2); font: inherit; font-weight: 560; white-space: nowrap; flex: 0 0 auto;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.mn-tab:hover { background: var(--fill); }
.mn-tab.on { background: var(--ink); color: var(--surface); }
.mn-tab-n { opacity: .6; font-variant-numeric: tabular-nums; margin-left: 4px; }
.mn-tab-go { opacity: .6; margin-left: 2px; }

/* ── панель над списком: фильтры, период, сводка ── */
.mn-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mn-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.mn-chip { border: 0; background: var(--fill); color: var(--ink-2); font: inherit; font-size: var(--text-sm);
  font-weight: 560; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.mn-chip:hover { background: var(--fill-2); }
.mn-chip.on { background: var(--accent-sf); color: var(--accent); }
.mn-period { flex: 0 0 220px; }
.mn-hint { color: var(--ink-3); font-size: var(--text-sm); text-wrap: pretty; padding: 0 4px; }
.mn-sum { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.mn-stat { background: var(--surface); box-shadow: var(--shadow-border); border-radius: var(--r-pill);
  padding: 6px 14px; color: var(--ink-2); font-size: var(--text-sm); white-space: nowrap; }
.mn-stat b { color: var(--ink); font-size: var(--text-md); font-variant-numeric: tabular-nums; margin-right: 2px; }
.mn-stat.bad b { color: var(--red); }

/* ── таблица ── */
.mn-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-border);
  overflow: hidden; }
.mn-row { display: grid; gap: var(--s-3); align-items: center; padding: 11px 16px;
  border-top: 1px solid var(--line); }
.mn-row:first-child { border-top: 0; }
.mn-mk { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 150px 120px 264px; }
.mn-pay { grid-template-columns: minmax(0, 1.6fr) 200px minmax(0, 1fr) 150px 120px; }
.mn-head { color: var(--ink-3); font-size: var(--text-xs); font-weight: 650; padding-top: 10px;
  padding-bottom: 8px; white-space: nowrap; }
.mn-row > div { min-width: 0; }
.mn-row.is-closed .mn-c-obj, .mn-row.is-closed .mn-c-why, .mn-row.is-closed .mn-c-trip { opacity: .72; }

.mn-obj { display: flex; align-items: baseline; gap: 8px; max-width: 100%; border: 0; background: none;
  padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.mn-obj:hover .mn-title { color: var(--accent); }
.mn-num { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
  flex: 0 0 auto; }
.mn-title { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur) var(--ease); }
.mn-sub { display: block; color: var(--ink-3); font-size: var(--text-xs); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-c-why b, .mn-c-trip b, .mn-c-due b, .mn-c-last b, .mn-c-amt b { font-weight: 560;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-c-trip, .mn-c-due, .mn-c-last, .mn-c-amt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-dim { color: var(--ink-3); font-size: var(--text-sm); white-space: nowrap; }
.mn-lbl { display: none; }
.mn-veh { font-size: var(--text-2xs); font-weight: 700; color: var(--ink-2); background: var(--fill);
  border-radius: var(--r-pill); padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.mn-note { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--text-xs); margin-top: -6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* действия справа: кнопки в строку, без переноса подписей */
.mn-c-act { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: nowrap; }
.mn-c-act .btn { white-space: nowrap; flex: 0 0 auto; }

/* машина и день прямо в строке */
.mn-inline { grid-column: 1 / -1; display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
  justify-content: flex-end; }
.mn-inline .inp { padding: 8px 12px; font-size: var(--text-md); }
.mn-inline .btn { white-space: nowrap; }

/* ── бейджи статусов ── */
.mn-badge { display: inline-block; font-size: var(--text-xs); font-weight: 650; border-radius: var(--r-pill);
  padding: 3px 10px; white-space: nowrap; background: var(--fill); color: var(--ink-2);
  vertical-align: middle; }
.mn-badge.st-open, .mn-badge.st-overdue { background: var(--red-sf); color: var(--red); }
.mn-badge.st-scheduled { background: var(--blue-sf); color: var(--blue); }
.mn-badge.st-done { background: var(--ok-sf); color: var(--ok); }
.mn-badge.st-written_off { background: var(--fill); color: var(--ink-3); }
.mn-badge.st-today { background: var(--warn-sf); color: var(--warn); }
.mn-c-due .mn-badge { margin-left: 6px; }

/* ── телефон: строки таблицы становятся карточками ── */
@media (max-width: 860px) {
  .mn-period { flex: 1 1 100%; }
  .mn-head { display: none; }
  .mn-card { background: none; box-shadow: none; border-radius: 0; overflow: visible;
    display: grid; gap: var(--s-2); }
  .mn-row { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-border);
    border-top: 0; padding: 14px 16px; gap: 10px var(--s-3); }
  .mn-mk, .mn-pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mn-c-obj { grid-column: 1 / -1; }
  .mn-mk .mn-c-st { grid-column: 1 / -1; grid-row: 2; }
  .mn-c-act { grid-column: 1 / -1; justify-content: stretch; }
  .mn-c-act:empty { display: none; }
  .mn-c-act .btn { flex: 1 1 0; justify-content: center; }
  .mn-lbl { display: block; color: var(--ink-3); font-size: var(--text-2xs); font-weight: 650;
    text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: 2px; }
  .mn-c-due .mn-badge { margin-left: 4px; }
  .mn-note { margin-top: 0; white-space: normal; }
  .mn-inline { justify-content: stretch; }
  .mn-inline .inp { flex: 1 1 120px; min-width: 0; }
}