/* buttons.css — единая система кнопок из эталон-макетов (реактивы, ядро).
   Дизайн-решение владельца (полное выравнивание по макету): у экранов-эталонов
   кнопки не Bootstrap-outline, а три роли — действие / вторичное / тихое —
   плюс icon-only и навигационная ссылка. Всё на токенах (tokens.css).

   ВАЖНО про Bootstrap: приложение грузит Bootstrap с его `.btn`/`.btn-primary`.
   Поэтому здесь НЕ переопределяем `.btn`/`.btn-primary` (иначе сломается весь
   продукт) — вводим САМОДОСТАТОЧНЫЕ классы, не пересекающиеся с Bootstrap:
   `.btn-ghost` · `.btn-quiet` · `.ic-btn` · `.navlink`. Первичное действие
   («Добавить») остаётся на существующем bootstrap `.btn.btn-primary` — он уже
   совпадает с макетом (accent-фон). Размер — модификатор `.btn-sm`
   (у Bootstrap он есть; для ghost/quiet дублируем ниже, чтобы работал и без
   bootstrap-.btn). */

/* ── вторичная (ghost): «Импорт», «Списание» ── */
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1;
    padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
    text-decoration: none;
    background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-xs);
    transition: background var(--m-fast) var(--ease), border-color var(--m-fast), color var(--m-fast);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-ghost i { font-size: 1rem; vertical-align: -.08em; }

/* ── первичная (solid): «Добавить …» — accent-фон.
   Своя, НЕ bootstrap .btn-primary: у эталон-макета первичная кнопка тех же
   метрик, что ghost/quiet, — bootstrap .btn-sm давал другую высоту, из-за чего
   кнопки в шапке «плыли». Цвет тот же (--accent == --bs-primary override). ── */
.btn-solid {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1;
    padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
    text-decoration: none;
    background: var(--accent); color: var(--on-accent, #fff); border: 1px solid var(--accent);
    box-shadow: var(--shadow-xs);
    transition: background var(--m-fast) var(--ease), border-color var(--m-fast), color var(--m-fast);
}
.btn-solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent, #fff); }
.btn-solid i { font-size: 1rem; vertical-align: -.08em; }

/* Малый размер — единая высота 32px для ВСЕХ типов (ghost/quiet/solid), чтобы
   в одной строке-шапке с .ic-btn (32×32) кнопки стояли ровно, без дрейфа.
   box-sizing:border-box (bootstrap reboot) → min-height включает бордер. */
.btn-ghost.btn-sm, .btn-ghost.sm,
.btn-quiet.btn-sm, .btn-quiet.sm,
.btn-solid.btn-sm, .btn-solid.sm { padding: 4px 12px; min-height: 32px; font-size: var(--text-sm); }

/* ── тихая (quiet): третичное действие без рамки ── */
.btn-quiet {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1;
    padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
    text-decoration: none; border: 1px solid transparent;
    background: transparent; color: var(--ink-2);
    transition: background var(--m-fast) var(--ease), color var(--m-fast);
}
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn-quiet i { font-size: 1rem; vertical-align: -.08em; }

/* ── icon-only: «Экспорт», «Печать», «Ещё» ── */
.ic-btn {
    width: 32px; height: 32px; border: none; background: transparent; color: var(--ink-3);
    border-radius: var(--r-sm); cursor: pointer; display: inline-grid; place-items: center;
    font-size: .95rem; text-decoration: none;
    transition: background var(--m-fast), color var(--m-fast);
}
.ic-btn:hover { background: var(--surface-2); color: var(--ink); }
.ic-btn.danger:hover { background: var(--bad-soft); color: var(--bad); }
.ic-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── тихая навигационная ссылка (не кнопка): «Карта препарата →» ── */
.navlink {
    font-size: var(--text-sm); font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--accent-strong); text-decoration: none;
}
.navlink:hover { color: var(--accent-hover); text-decoration: underline; }