/* Flowly — Button */

/* =============================================================
   5. FLOWLY-BTN — botão com variantes
   ============================================================= */
.flowly-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--flowly-space-2);
    padding: var(--flowly-space-3) var(--flowly-space-5);
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--flowly-radius-md);
    font-family: var(--flowly-font-main);
    font-size: var(--flowly-text-sm);
    font-weight: var(--flowly-weight-semibold);
    letter-spacing: var(--flowly-letter-snug);
    transition: background var(--flowly-duration-fast) var(--flowly-ease-out),
                color var(--flowly-duration-fast) var(--flowly-ease-out),
                transform var(--flowly-duration-fast) var(--flowly-ease-out),
                box-shadow var(--flowly-duration-fast) var(--flowly-ease-out);
    user-select: none;
    white-space: nowrap;
}

.flowly-btn:hover {
    transform: translateY(-1px);
}

.flowly-btn:active {
    transform: translateY(0) scale(0.97);
}

.flowly-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Primary — CTA principal */
.flowly-btn--primary {
    background: var(--flowly-accent-primary);
    /* Texto escuro sobre o verde — branco dava ~2.3:1 (falha WCAG AA). */
    color: var(--flowly-text-inverse);
    box-shadow: var(--flowly-shadow-glow-primary);
}

.flowly-btn--primary:hover {
    background: color-mix(in srgb, var(--flowly-accent-primary) 90%, white);
}

/* Secondary — ações secundárias */

/* Legacy aliases: .btn-primary / .btn-secondary used em templates antigos
   (auth modal, dialogs). Mapeia ao mesmo visual do flowly-btn.
   :not(.task-expansion-inline-button) evita conflito com botões da task expansion
   que já tem styling próprio menor. */
.btn-primary:not(.task-expansion-inline-button),
.btn-secondary:not(.task-expansion-inline-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--flowly-radius-md, 8px);
    font-size: calc(14px * var(--flowly-text-k));
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--flowly-duration-fast, 140ms) var(--flowly-ease-out, ease),
                color var(--flowly-duration-fast, 140ms) var(--flowly-ease-out, ease),
                transform var(--flowly-duration-fast, 140ms) var(--flowly-ease-out, ease);
    text-decoration: none;
}
.btn-primary:not(.task-expansion-inline-button) {
    background: var(--flowly-accent-primary);
    color: var(--flowly-text-inverse);
    box-shadow: var(--flowly-shadow-glow-primary);
}
.btn-primary:not(.task-expansion-inline-button):hover {
    background: color-mix(in srgb, var(--flowly-accent-primary) 90%, white);
}
.btn-secondary:not(.task-expansion-inline-button) {
    background: var(--flowly-bg-elevated, rgba(255, 255, 255, 0.04));
    border-color: var(--flowly-border-subtle, rgba(255, 255, 255, 0.08));
    color: var(--flowly-text-primary, #f8fafc);
}
.btn-secondary:not(.task-expansion-inline-button):hover {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.07));
}
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-inline {
    padding: 7px 14px !important;
    width: auto !important;
    font-size: calc(13px * var(--flowly-text-k));
}

/* Ghost — ações terciárias */
.flowly-btn--ghost {
    background: transparent;
    color: var(--flowly-text-secondary);
}

.flowly-btn--ghost:hover {
    background: var(--flowly-bg-glass);
    color: var(--flowly-text-primary);
}

.flowly-btn--ghost.is-active {
    background: rgb(var(--flowly-accent-primary-rgb, 10, 132, 255) / 0.16);
    color: var(--flowly-accent-primary);
}

/* Ghost subtle — ghost com peso visual leve (bg + border) */
.flowly-btn--ghost--subtle {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--flowly-border-subtle, rgba(255, 255, 255, 0.08));
    color: var(--flowly-text-secondary);
}

.flowly-btn--ghost--subtle:hover {
    background: var(--flowly-bg-glass-strong, rgba(255, 255, 255, 0.08));
    border-color: var(--flowly-border-strong, rgba(255, 255, 255, 0.16));
    color: var(--flowly-text-primary);
}

.flowly-btn--ghost--subtle.is-active {
    background: rgb(var(--flowly-accent-primary-rgb, 10, 132, 255) / 0.12);
    border-color: rgb(var(--flowly-accent-primary-rgb, 10, 132, 255) / 0.32);
    color: var(--flowly-accent-primary);
}

/* Danger — delete, reset */
.flowly-btn--danger {
    background: rgb(var(--flowly-accent-danger-rgb) / 0.1);
    color: var(--flowly-accent-danger);
    border: 1px solid rgb(var(--flowly-accent-danger-rgb) / 0.24);
}

.flowly-btn--danger:hover {
    background: rgb(var(--flowly-accent-danger-rgb) / 0.18);
}

/* Sizes */
.flowly-btn--sm {
    padding: var(--flowly-space-2) var(--flowly-space-3);
    min-height: 36px;
    font-size: var(--flowly-text-xs);
}

.flowly-btn--icon {
    padding: 0;
    width: 44px;
    min-width: 44px;
    position: relative; /* ancora badges/indicadores */
}

/* Contador no canto do botão (ex.: nº de tarefas atrasadas a puxar). */