/**
 * ACP Soft Button System — Login-Look (Tint + Hover-Overlay)
 * Tone via --acp-btn-tone: accent (primary), red (danger), border/muted (secondary)
 * Light/Dark via --acp-btn-text* + --acp-btn-tint* (gesetzt in acp-theme-boot.js)
 */

:root {
    --acp-btn-tone: var(--color-accent, #06b6d4);
    --acp-btn-danger: #ef4444;
    --acp-btn-radius: calc(var(--radius-card, 0.25rem) + 1px);
    --acp-btn-sub: var(--color-sub, #1f2125);
    --acp-btn-card: var(--color-card, #1c1e21);
    --acp-btn-border: var(--color-border, #353535);
    /* Dark defaults — Light Mode überschreibt via theme-boot */
    --acp-btn-text: #e5e5e5;
    --acp-btn-text-hover: #f5f5f5;
    --acp-btn-tint: 8%;
    --acp-btn-tint-hover: 14%;
    --acp-btn-tint-active: 18%;
    --acp-btn-overlay-hover: 22%;
    --acp-btn-overlay-active: 28%;
    --acp-btn-border-mix: 38%;
    --acp-btn-border-mix-hover: 52%;
}

.acp-theme-light {
    --acp-btn-tint: 12%;
    --acp-btn-tint-hover: 18%;
    --acp-btn-tint-active: 22%;
    --acp-btn-overlay-hover: 14%;
    --acp-btn-overlay-active: 20%;
    --acp-btn-border-mix: 42%;
    --acp-btn-border-mix-hover: 58%;
}

/* ── Base soft button surface ── */
.acp-btn,
.login-submit,
button.bg-dash-accent,
a.bg-dash-accent,
button[class*="bg-dash-accent"],
a[class*="bg-dash-accent"],
.pick-btn-open,
.pick-create-submit,
.pick-create-toggle,
.pick-logout-btn,
.pick-btn-danger,
.pick-btn-manage,
.pick-btn-icon,
.kick-member-btn,
.rights-icon-btn,
.rights-save-btn,
.gv-unsaved-modal-btn,
.dash-news-modal-btn,
.dash-shout-send,
.profile-modal-btn,
.profile-action-btn,
button.bg-red-500,
button.bg-red-600,
a.bg-red-500,
a.bg-red-600,
button[class*="bg-red-500"],
button[class*="bg-red-600"],
a[href="/logout.php"],
.register-btn,
button.btn:not(.acp-btn-raw) {
    --acp-btn-tone: var(--color-accent, #06b6d4);
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--acp-btn-radius);
    border: 1px solid color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-border-mix), var(--acp-btn-border));
    background: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-tint), var(--acp-btn-sub)) !important;
    color: color-mix(in srgb, var(--acp-btn-tone) 28%, var(--acp-btn-text)) !important;
    font-weight: 700;
    box-shadow: inset 0 0 0 9999px transparent !important;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.45s ease,
        transform 0.2s ease;
    transform: none !important;
}

/* Keep children above any future overlays */
.acp-btn > *,
.login-submit > *,
button.bg-dash-accent > *,
a.bg-dash-accent > *,
button[class*="bg-dash-accent"] > *,
a[class*="bg-dash-accent"] > *,
.pick-btn-open > *,
.pick-create-submit > *,
.pick-create-toggle > *,
.pick-logout-btn > *,
.pick-btn-danger > *,
.pick-btn-manage > *,
.pick-btn-icon > *,
.kick-member-btn > *,
.rights-icon-btn > *,
.rights-save-btn > *,
.gv-unsaved-modal-btn > *,
.dash-news-modal-btn > *,
.dash-shout-send > *,
.profile-modal-btn > *,
.profile-action-btn > *,
button.bg-red-500 > *,
button.bg-red-600 > *,
a[href="/logout.php"] > *,
.register-btn > *,
button.btn:not(.acp-btn-raw) > * {
    position: relative;
    z-index: 1;
}

/* Hover / active — login-style fill */
.acp-btn:hover,
.login-submit:hover,
button.bg-dash-accent:hover,
a.bg-dash-accent:hover,
button[class*="bg-dash-accent"]:hover,
a[class*="bg-dash-accent"]:hover,
.pick-btn-open:hover,
.pick-create-submit:hover,
.pick-create-toggle:hover,
.pick-logout-btn:hover,
.pick-btn-danger:hover,
.pick-btn-manage:hover,
.pick-btn-icon:hover,
.kick-member-btn:hover,
.rights-icon-btn:hover:not(:disabled),
.rights-save-btn:hover,
.gv-unsaved-modal-btn:hover,
.dash-news-modal-btn:hover,
.dash-shout-send:hover,
.profile-modal-btn:hover,
.profile-action-btn:hover,
button.bg-red-500:hover,
button.bg-red-600:hover,
a.bg-red-500:hover,
a.bg-red-600:hover,
button[class*="bg-red-500"]:hover,
button[class*="bg-red-600"]:hover,
a[href="/logout.php"]:hover,
.register-btn:hover,
button.btn:not(.acp-btn-raw):hover {
    color: color-mix(in srgb, var(--acp-btn-tone) 40%, var(--acp-btn-text-hover)) !important;
    border-color: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-border-mix-hover), var(--acp-btn-border));
    background: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-tint-hover), var(--acp-btn-sub)) !important;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-overlay-hover), transparent) !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

.acp-btn:active,
.login-submit:active,
button.bg-dash-accent:active,
a.bg-dash-accent:active,
button[class*="bg-dash-accent"]:active,
a[class*="bg-dash-accent"]:active,
.pick-btn-open:active,
.pick-create-submit:active,
.pick-create-toggle:active,
.pick-logout-btn:active,
.pick-btn-danger:active,
.pick-btn-manage:active,
.pick-btn-icon:active,
.kick-member-btn:active,
.rights-icon-btn:active:not(:disabled),
.rights-save-btn:active,
.gv-unsaved-modal-btn:active,
.dash-news-modal-btn:active,
.dash-shout-send:active,
.profile-modal-btn:active,
.profile-action-btn:active,
button.bg-red-500:active,
button.bg-red-600:active,
button[class*="bg-red-500"]:active,
button[class*="bg-red-600"]:active,
a[href="/logout.php"]:active,
.register-btn:active,
button.btn:not(.acp-btn-raw):active {
    background: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-tint-active), var(--acp-btn-sub)) !important;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-overlay-active), transparent) !important;
    transform: none !important;
}

/* Icon nudge on primary CTAs with arrow (login) */
.login-submit:hover .login-submit-icon,
.acp-btn:hover .login-submit-icon {
    color: var(--acp-btn-text-hover);
    transform: translateX(2px);
}

.login-submit-icon {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--acp-btn-tone) 70%, var(--acp-btn-text));
    transition: transform 0.4s ease, color 0.4s ease;
}

/* ── Primary tone (explicit) ── */
.acp-btn--primary,
.login-submit,
button.bg-dash-accent,
a.bg-dash-accent,
button[class*="bg-dash-accent"],
a[class*="bg-dash-accent"],
.pick-btn-open,
.pick-create-submit,
.pick-create-toggle,
.rights-save-btn,
.dash-news-modal-btn--primary,
.dash-shout-send,
.profile-modal-btn--primary,
.profile-action-btn--primary,
.register-btn,
button.btn:not(.acp-btn-raw) {
    --acp-btn-tone: var(--color-accent, #06b6d4);
}

/* ── Danger tone ── */
.acp-btn--danger,
.pick-btn-danger,
.kick-member-btn,
.pick-logout-btn,
.rights-icon-btn--danger,
.gv-unsaved-modal-btn--danger,
.dash-news-modal-btn--danger,
.profile-modal-btn--danger,
.profile-action-btn--danger,
button.bg-red-500,
button.bg-red-600,
a.bg-red-500,
a.bg-red-600,
button[class*="bg-red-500"],
button[class*="bg-red-600"],
a[href="/logout.php"] {
    --acp-btn-tone: var(--acp-btn-danger);
}

/* ── Secondary / muted tone ── */
.acp-btn--secondary,
.pick-btn-manage,
.pick-btn-icon:not(.is-leave):not(.is-active),
.rights-icon-btn:not(.rights-icon-btn--danger),
.gv-unsaved-modal-btn:not(.gv-unsaved-modal-btn--danger):not(.gv-unsaved-modal-btn--primary),
.dash-news-modal-btn--ghost,
.profile-modal-btn--ghost {
    --acp-btn-tone: color-mix(in srgb, var(--color-muted, #7b7b7b) 55%, var(--acp-btn-border));
}

/* Leave / accent-active icon buttons keep accent or danger */
.pick-btn-icon.is-leave {
    --acp-btn-tone: var(--acp-btn-danger);
}

.pick-btn-icon.is-active,
.pick-btn-icon.btn-pick-manage-team.is-active {
    --acp-btn-tone: var(--color-accent, #06b6d4);
}

/* Secondary outline chips that use dash-sub + border (common icon actions) */
button.bg-dash-sub.border-dash-border,
a.bg-dash-sub.border-dash-border,
button.border-dash-border.bg-dash-sub,
a.border-dash-border.bg-dash-sub {
    --acp-btn-tone: color-mix(in srgb, var(--color-muted, #7b7b7b) 55%, var(--acp-btn-border));
    position: relative;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-border-mix), var(--acp-btn-border)) !important;
    background: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-tint), var(--acp-btn-sub)) !important;
    color: color-mix(in srgb, var(--acp-btn-tone) 28%, var(--acp-btn-text)) !important;
    box-shadow: inset 0 0 0 9999px transparent !important;
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.45s ease,
        transform 0.2s ease;
    transform: none !important;
}

button.bg-dash-sub.border-dash-border:hover,
a.bg-dash-sub.border-dash-border:hover,
button.border-dash-border.bg-dash-sub:hover,
a.border-dash-border.bg-dash-sub:hover {
    color: color-mix(in srgb, var(--acp-btn-tone) 40%, var(--acp-btn-text-hover)) !important;
    border-color: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-border-mix-hover), var(--acp-btn-border)) !important;
    background: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-tint-hover), var(--acp-btn-sub)) !important;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-overlay-hover), transparent) !important;
    transform: none !important;
}

/* Kick buttons already danger-bordered — keep danger tone */
.kick-member-btn.bg-dash-sub,
button.kick-member-btn {
    --acp-btn-tone: var(--acp-btn-danger);
}

/* Plus-toggle may rotate when open */
.pick-create-toggle.is-open {
    transform: rotate(45deg) !important;
}

/* Disabled */
.acp-btn:disabled,
.login-submit:disabled,
.pick-btn-danger:disabled,
button:disabled.bg-dash-accent,
button[class*="bg-dash-accent"]:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.acp-btn:disabled:hover,
.pick-btn-danger:disabled:hover {
    box-shadow: none !important;
    background: color-mix(in srgb, var(--acp-btn-tone) var(--acp-btn-tint), var(--acp-btn-sub)) !important;
}

/* Login submit sizing (matches inputs) */
.login-submit {
    width: 100%;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.8125rem;
    line-height: 1;
}

@media (max-width: 639px) {
    .login-submit {
        height: 2.75rem;
        min-height: 2.75rem;
        font-size: 1rem;
    }
    .login-submit:active {
        transform: scale(0.99) !important;
    }
}

/* Opt-out */
.acp-btn-raw,
.acp-btn-raw:hover,
.acp-btn-raw:active {
    --acp-btn-tone: unset;
    box-shadow: unset !important;
    background: revert-layer !important;
    border: revert-layer !important;
    color: revert-layer !important;
    transform: revert-layer !important;
}

/* Controls that must NOT get soft-button treatment */
.login-input-toggle,
.login-checkbox,
.login-checkbox-input,
.login-checkbox-box,
button.login-input-toggle,
.acp-nav-unread-badge {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.login-input-toggle:hover,
.login-checkbox:hover {
    box-shadow: none !important;
    background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
    .acp-btn,
    .login-submit,
    button.bg-dash-accent,
    a.bg-dash-accent,
    button[class*="bg-dash-accent"],
    a[class*="bg-dash-accent"],
    .pick-btn-open,
    .pick-create-submit,
    .pick-create-toggle,
    .pick-logout-btn,
    .pick-btn-danger,
    .pick-btn-manage,
    .pick-btn-icon,
    .kick-member-btn,
    .rights-icon-btn,
    .rights-save-btn,
    .gv-unsaved-modal-btn,
    .dash-news-modal-btn,
    .dash-shout-send,
    .profile-modal-btn,
    .profile-action-btn,
    button.bg-red-500,
    button.bg-red-600,
    a[href="/logout.php"],
    .register-btn,
    button.btn:not(.acp-btn-raw),
    button.bg-dash-sub.border-dash-border,
    a.bg-dash-sub.border-dash-border,
    .login-submit-icon {
        transition: none !important;
    }
}