/* ---------------------------------------------------------------------------
 * The button system.
 *
 * This lived in auth.css until 2026-09-15 -- a file named after the login
 * screen -- while admin/base.html.twig loaded only admin.css. Every admin page
 * with a working button had separately remembered to add auth.css; the
 * section-delete confirmation page and the preview had not, and drew buttons
 * with the right classes and no styling at all.
 *
 * It lives on its own now and is loaded by the layouts, so forgetting is no
 * longer possible rather than merely unlikely.
 *
 * `.vt-btn` is behaviour-only: a button without a size modifier renders
 * squashed. Colours come from tokens.css, the only file that may define one.
 * ------------------------------------------------------------------------ */

.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--vt-font);
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.vt-btn--lg {
  padding: 13px 26px;
  font-size: .96rem;
  border-radius: 8px;
}

.vt-btn--primary {
  background: var(--vt-action);
  color: var(--vt-white);
  box-shadow: 0 4px 18px rgba(240, 90, 0, .32);
}

.vt-btn--primary:hover {
  background: var(--vt-action-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(240, 90, 0, .45);
}

.vt-btn--full {
  width: 100%;
}

/*
 * Шаблони screen card actions (templates & builder plan, task 3,
 * design/Анкета Valeo Travel.dc.html, TPLCARDS card footer). Sizes/colours
 * lifted verbatim from the "Редакция"/"Преглед"/"Дублиране" buttons' inline
 * styles -- distinct from the login/access "lg" size and the orange
 * "primary" variant, so new modifiers rather than reuse of those.
 */
.vt-btn--sm {
  padding: 9px 16px;
  font-size: 13.5px;
  border-radius: 8px;
}

.vt-btn--blue {
  background: var(--vt-blue);
  color: var(--vt-white);
}

.vt-btn--outline {
  background: var(--vt-white);
  color: var(--vt-blue);
  border: 1px solid var(--vt-border-soft);
}

.vt-btn--ghost {
  background: transparent;
  color: var(--vt-text-secondary);
  border: none;
  padding: 9px 6px;
  font-size: 13.5px;
}

/* The builder's remove-confirm page "Да, изтрий" action -- reuses the
 * existing --vt-danger token (tokens.css), the same one the CSRF-failure
 * flash already uses, rather than introducing a new colour. */
.vt-btn--danger {
  background: var(--vt-danger);
  color: var(--vt-white);
}

/* Редакция/Преглед render as disabled placeholders (Task 4 brings the
 * builder they'd link to) -- an aria-disabled <span>, same convention as
 * the admin shell's nav placeholders, not a real disabled <button>. */
.vt-btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}