/* Hierarquia de ações (padrão: 03-builder/sdd/05-PADRAO-HIERARQUIA-DE-ACOES.md)
   Um componente, quatro níveis, dois tamanhos. Pais e backoffice usam as mesmas classes.
   Gerado por ActionHelper (action_link, action_button, action_zone). */

:root {
  --action-h-md: 44px;
  --action-h-sm: 36px;
  --action-h-icon: 40px;
  --action-h-icon-sm: 36px;
  --action-radius: var(--radius-classic-md, 10px);

  --action-primary-bg: var(--color-gold-brass, #C5A059);
  --action-primary-bg-hover: var(--color-gold-light, #E2C98A);
  --action-primary-fg: var(--color-ink-deep, #070E1A);

  --action-secondary-fg: var(--color-gold-text, #7A5A12);
  --action-secondary-border: var(--color-gold-text, #7A5A12);
  --action-secondary-hover-bg: var(--color-gold-brass-10, rgba(197, 160, 89, 0.1));

  --action-tertiary-fg: var(--color-gold-text, #7A5A12);
  --action-tertiary-border: rgba(122, 90, 18, 0.28);

  --action-danger-fg: var(--destructive-text, #B42318);
  --action-danger-hover-bg: rgba(180, 35, 24, 0.1);

  --action-focus: var(--color-ink-midnight, #0F1E36);
}

html.dark,
[data-surface="dark"] {
  --action-secondary-border: var(--color-gold-brass, #C5A059);
  --action-tertiary-border: rgba(197, 160, 89, 0.3);
  --action-danger-hover-bg: rgba(248, 113, 113, 0.14);
  --action-focus: var(--color-gold-light, #E2C98A);
}

/* ---------- Base ---------- */

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: var(--action-h-md);
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--action-radius);
  background: transparent;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.action-btn--sm {
  min-height: var(--action-h-sm);
  padding: 0 0.875rem;
  font-size: 0.8125rem;
}

.action-btn--icon {
  width: var(--action-h-icon);
  min-width: var(--action-h-icon);
  min-height: var(--action-h-icon);
  padding: 0;
}

.action-btn--icon.action-btn--sm {
  width: var(--action-h-icon-sm);
  min-width: var(--action-h-icon-sm);
  min-height: var(--action-h-icon-sm);
}

.action-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.action-btn__label {
  min-width: 0;
}

.action-btn:focus-visible {
  outline: 3px solid var(--action-focus);
  outline-offset: 2px;
}

/* ---------- Níveis ---------- */

.action-btn--primary {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-weight: 700;
}

.action-btn--primary:hover {
  background: var(--action-primary-bg-hover);
  border-color: var(--action-primary-bg-hover);
  color: var(--action-primary-fg);
}

.action-btn--secondary {
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-fg);
  font-weight: 600;
}

.action-btn--secondary:hover {
  background: var(--action-secondary-hover-bg);
  color: var(--action-secondary-fg);
}

.action-btn--tertiary {
  border-color: var(--action-tertiary-border);
  color: var(--action-tertiary-fg);
  font-weight: 500;
}

.action-btn--tertiary:hover {
  background: var(--action-secondary-hover-bg);
  color: var(--action-tertiary-fg);
}

.action-btn--tertiary.action-btn--icon {
  border-color: transparent;
}

.action-btn--danger {
  border-color: var(--action-danger-fg);
  color: var(--action-danger-fg);
  font-weight: 600;
}

.action-btn--danger:hover {
  background: var(--action-danger-hover-bg);
  color: var(--action-danger-fg);
}

/* ---------- Estados ---------- */

.action-btn:disabled,
.action-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.action-btn[aria-busy="true"] {
  pointer-events: none;
  cursor: progress;
}

.action-btn[aria-busy="true"]::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: action-btn-spin 0.7s linear infinite;
}

@keyframes action-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .action-btn { transition: none; }
  .action-btn[aria-busy="true"]::after { animation-duration: 2s; }
}

/* ---------- Zona de ação ---------- */

.action-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* button_to envolve o botão em <form>; o form não participa do layout. */
.action-zone form.action-form,
form.action-form {
  display: contents;
}

.action-zone [data-action-level="primary"] { order: 0; }
.action-zone [data-action-level="secondary"] { order: 1; }
.action-zone [data-action-level="danger"] { order: 2; }
.action-zone [data-action-level="tertiary"] { order: 3; }

@media (max-width: 479px) {
  .action-zone [data-action-level="primary"],
  .action-zone [data-action-level="secondary"],
  .action-zone [data-action-level="tertiary"] {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Pilha de ações no celular: largura total, rótulo à esquerda, no máximo 2 linhas. */
@media (max-width: 1023px) {
  .action-btn--stack {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .action-btn--stack .action-btn__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* ---------- Barra fixa de aprovar (celular, nó 2611 / D-04) ---------- */

/* Instância única por breakpoint, sem JavaScript: abaixo de md vale a barra, a partir de md vale o botão do cartão. */
.approve-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(4rem + 1px + env(safe-area-inset-bottom, 0px)); /* acima da bottom nav (h-16 + borda) */
  z-index: 30;
  margin: 0; /* neutraliza o space-y do pai */
  padding: 0.75rem 1rem;
  background: var(--card, #fff);
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.12));
}

.approve-bar .action-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .approve-bar { display: none; }
}

@media (max-width: 767px) {
  .status-card__primary--desktop-only { display: none; }
}

/* Preservação de utilitários responsivos Tailwind sobre action-btn e action-zone */
.action-btn.hidden,
.action-zone.hidden {
  display: none !important;
}

@media (min-width: 1024px) {
  .action-btn.lg\:hidden,
  .action-zone.lg\:hidden {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .action-btn.max-lg\:hidden,
  .action-zone.max-lg\:hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .action-btn.md\:hidden,
  .action-zone.md\:hidden {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .action-btn.max-md\:hidden,
  .action-zone.max-md\:hidden {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .action-btn.sm\:hidden,
  .action-zone.sm\:hidden {
    display: none !important;
  }
}

@media (max-width: 639px) {
  .action-btn.max-sm\:hidden,
  .action-zone.max-sm\:hidden {
    display: none !important;
  }
}