/* FnButton — DIE eine geteilte Button-Optik (KONZEPT-Design-Komponenten-Standard, Teilaufgabe 1).
   Tokens-only. Erster Konsument: Administration → Dialog-Standards (Teilaufgabe 6).
   Module definieren KEINE eigenen *-btn-Klassen mehr — Migration der 16 Alt-Klassen folgt. */

.fn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fn-font);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--fn-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

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

.fn-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.fn-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.fn-btn-primary {
    background: var(--fn-primary);
    color: var(--fn-on-primary);
}

.fn-btn-primary:hover:not([disabled]) {
    background: var(--fn-primary-hover);
}

.fn-btn-secondary {
    background: var(--fn-bg-alt);
    color: var(--fn-text);
    border-color: var(--fn-border-strong);
}

.fn-btn-secondary:hover:not([disabled]) {
    background: var(--fn-hover);
}

.fn-btn-ghost {
    background: transparent;
    color: var(--fn-text-secondary);
}

.fn-btn-ghost:hover:not([disabled]) {
    color: var(--fn-text);
    background: var(--fn-hover);
}

.fn-btn-danger {
    background: var(--fn-danger-soft);
    color: var(--fn-danger);
    border-color: var(--fn-danger);
}

.fn-btn-danger:hover:not([disabled]) {
    background: var(--fn-hover);
}

/* Icon-Button: quadratischer Modifier (kombinieren mit fn-btn-secondary/-ghost) —
   ersetzt die verstreuten 28-30px-Icon-Buttons der Module (Blätterpfeile, Hover-Aktionen …). */
.fn-btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
}

/* Lucide-Icons in Buttons: einheitliche Größe (JS-injizierte SVGs, global — kein ::deep nötig). */
.fn-btn .lucide {
    width: 15px;
    height: 15px;
    flex: none;
}

/* Loading-Spinner (FnButton Loading="true") — currentColor, damit er in jeder Variante passt. */
.fn-btn-spin {
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: fn-btn-spin .7s linear infinite;
}

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