/* packages/ui/function_metrics.css
   Вкладка «Метрики» экрана функции. Цвета — только токены темы
   (packages/theme/tokens.css): своих значений этот файл не заводит. */

.fm { display: grid; gap: 1.1rem; max-width: 1120px; color: var(--ink); }
.fm-content { position: relative; min-height: 220px; }

/* Фильтры — одна карточка на приглушённой поверхности: это не форма записи,
   и выглядеть как форма настроек она не должна. */
.fm-controls {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: start;
  padding: .9rem 1rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fm-field { display: grid; gap: .3rem; flex: 1 1 200px; min-width: 170px; }
.fm-field-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.fm-field-hint { font-size: .75rem; color: var(--ink-3); line-height: 1.35; }
.fm-select {
  width: 100%; min-height: 36px; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 7px; padding: .35rem .5rem;
}
.fm-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Выключенный селект обязан читаться выключенным, а не сломанным: рядом с ним
   стоит .fm-field-hint с причиной. */
.fm-select:disabled { color: var(--ink-3); background: var(--surface-2); cursor: not-allowed; }

.fm-period-note { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-3); }

.fm-section { margin-top: 1.3rem; }
.fm-section-title { margin: 0 0 .7rem; font-size: 1rem; font-weight: 650; color: var(--ink); }

.fm-grid { display: grid; gap: .7rem; }
.fm-grid-usage, .fm-grid-cost, .fm-grid-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-card {
  display: flex; flex-direction: column; gap: .25rem; min-width: 0; min-height: 96px;
  padding: .8rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow);
}
.fm-card-label { font-size: .8rem; color: var(--ink-2); }
.fm-card-value {
  font-size: 1.45rem; line-height: 1.15; font-weight: 650;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.fm-card-hint { font-size: .76rem; color: var(--ink-3); line-height: 1.35; }

.fm-comparison {
  padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-3);
}
.fm-comparison .fm-card { background: var(--surface); }

.fm-note, .fm-empty { margin: .6rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink-3); }
/* Неполнота — не ошибка экрана, но и не проходная сноска: она объясняет,
   почему числа рядом нельзя складывать в итог. */
.fm-warning {
  margin: .6rem 0 0; padding: .55rem .75rem; font-size: .82rem; line-height: 1.45;
  color: var(--warn); background: var(--surface-3); border-left: 3px solid var(--warn);
}

.fm-table-scroll { overflow-x: auto; }
.fm-table { width: 100%; }
.fm-table th, .fm-table td { white-space: nowrap; }
.fm-table td:not(:first-child), .fm-table th:not(:first-child) { text-align: right; }

.fm-showcase { border-top: 1px solid var(--divider); padding-top: 1rem; }
.fm-showcase:empty { display: none; }

@media (max-width: 720px) {
  .fm-grid-usage, .fm-grid-cost, .fm-grid-compare { grid-template-columns: 1fr; }
  .fm-card { min-height: auto; }
}