/* =============================================================================
   System buttons — SINGLE SOURCE OF TRUTH
   Load AFTER system-tokens.css and surface CSS (app.css / all-pages.css / …).
   Brand: #173630 · glass edge · soft motion · site-wide Bootstrap .btn*
   ============================================================================= */

/* ── Base ─────────────────────────────────────────────────────────────────── */
body .btn,
body a.btn,
body button.btn,
body input.btn {
    --_btn-shine: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.34) 48%,
        transparent 62%
    );

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: var(--btn-font-weight, 600);
    font-family: inherit;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border-radius: var(--btn-radius, var(--sys-radius));
    border-style: solid;
    border-width: 1px;
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    box-shadow: var(--btn-glass-inset, inset 0 1px 0 rgba(255, 255, 255, 0.45));
    transition:
        transform var(--motion-btn, 220ms cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--motion-btn, 220ms cubic-bezier(0.22, 1, 0.36, 1)),
        background var(--motion-btn, 220ms cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--motion-fast, 0.15s ease),
        color var(--motion-fast, 0.15s ease),
        filter var(--motion-fast, 0.15s ease);
    will-change: transform;
}

body .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--_btn-shine);
    background-size: 220% 100%;
    background-position: 120% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease, background-position 0.65s ease;
}

body .btn > * {
    position: relative;
    z-index: 2;
}

/* Ripple hosts must stay out of flex flow or the button grows on click */
body .btn > .admin-ripple-fx,
body .btn > .ripple-wave,
body .btn > .ripple-effect {
    position: absolute !important;
    z-index: 1;
}

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

body .btn:hover::before {
    opacity: 1;
    background-position: -40% 0;
}

body .btn:active {
    transform: translateY(0) scale(0.98);
}

body .btn:focus-visible {
    outline: none;
    box-shadow: var(--btn-glass-inset), var(--btn-focus-ring);
}

body .btn:disabled,
body .btn.disabled {
    opacity: 0.55;
    transform: none !important;
    filter: grayscale(0.15);
    box-shadow: none;
    cursor: not-allowed;
}

body .btn:disabled::before,
body .btn.disabled::before {
    display: none;
}

body .btn::after,
body [class*="-module-page"] .btn::after,
body .dashboard-wrapper .btn::after,
body .dashboard-wrapper [class*="-module-page"] .btn::after {
    content: none !important;
    display: none !important;
}

/* ── Primary (brand glass) ────────────────────────────────────────────────── */
body .btn-primary,
body .dashboard-wrapper .btn-primary,
body .admin-shell .btn-primary,
body .store-shell .btn-primary,
body .auth-split-body .btn-primary,
body .pos-terminal-shell .btn-primary,
body .db-setup-page .btn-primary {
    color: #fff !important;
    background: var(--btn-primary-fill);
    background-color: var(--accent-primary-500, #173630);
    border-color: var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
    text-shadow: 0 1px 0 rgba(7, 10, 9, 0.12);
}

body .btn-primary:hover,
body .dashboard-wrapper .btn-primary:hover,
body .admin-shell .btn-primary:hover,
body .store-shell .btn-primary:hover,
body .auth-split-body .btn-primary:hover,
body .pos-terminal-shell .btn-primary:hover,
body .db-setup-page .btn-primary:hover {
    color: #fff !important;
    background: var(--btn-primary-fill-hover);
    border-color: color-mix(in srgb, #ffffff 55%, #173630);
    box-shadow: var(--btn-primary-shadow-hover);
    filter: brightness(1.02);
}

body .btn-primary:active,
body .dashboard-wrapper .btn-primary:active,
body .admin-shell .btn-primary:active {
    box-shadow: var(--btn-glass-inset), 0 2px 8px rgba(23, 54, 48, 0.24);
    filter: brightness(0.98);
}

body .btn-primary:focus-visible {
    box-shadow: var(--btn-primary-shadow), var(--btn-focus-ring);
}

body .btn-check:checked + .btn-primary,
body .btn-primary.active,
body .show > .btn-primary {
    color: #fff !important;
    background: var(--btn-primary-fill-hover);
    border-color: var(--btn-primary-border);
}

/* ── Outline primary (glass chip) ─────────────────────────────────────────── */
body .btn-outline-primary,
body .dashboard-wrapper .btn-outline-primary,
body .admin-shell .btn-outline-primary,
body .store-shell .btn-outline-primary {
    color: var(--btn-outline-color) !important;
    background: var(--btn-outline-bg);
    border-color: var(--btn-outline-border);
    box-shadow: var(--btn-glass-inset), 0 1px 2px rgba(7, 10, 9, 0.04);
}

body .btn-outline-primary:hover,
body .dashboard-wrapper .btn-outline-primary:hover,
body .admin-shell .btn-outline-primary:hover,
body .store-shell .btn-outline-primary:hover {
    color: #fff !important;
    background: var(--btn-primary-fill);
    border-color: var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow-hover);
}

/* ── Secondary / light glass ──────────────────────────────────────────────── */
body .btn-secondary,
body .btn-outline-secondary,
body .dashboard-wrapper .btn-outline-secondary {
    color: var(--btn-secondary-color) !important;
    background: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    box-shadow: var(--btn-glass-inset), 0 1px 2px rgba(7, 10, 9, 0.04);
}

body .btn-secondary:hover,
body .btn-outline-secondary:hover,
body .dashboard-wrapper .btn-outline-secondary:hover {
    color: var(--accent-primary-700, #0d201c) !important;
    background: color-mix(in srgb, #ffffff 70%, rgba(23, 54, 48, 0.12));
    border-color: color-mix(in srgb, #173630 32%, #cbd5e1);
    box-shadow: var(--btn-glass-inset), 0 6px 16px rgba(23, 54, 48, 0.12);
}

body .btn-light {
    color: var(--btn-secondary-color) !important;
    background: var(--btn-glass-bg);
    border-color: var(--btn-glass-border);
    box-shadow: var(--btn-glass-inset);
}

body .btn-light:hover {
    background: color-mix(in srgb, #ffffff 82%, rgba(23, 54, 48, 0.1));
    border-color: color-mix(in srgb, #173630 28%, #e2e8f0);
    color: var(--accent-primary-700, #0d201c) !important;
}

/* ── Semantic (keep brand motion + glass edge) ────────────────────────────── */
body .btn-success {
    color: #fff !important;
    background: linear-gradient(145deg, #34d399 0%, #22c55e 50%, #16a34a 100%);
    border-color: color-mix(in srgb, #ffffff 40%, #16a34a);
    box-shadow: var(--btn-glass-inset), 0 4px 14px rgba(34, 197, 94, 0.28);
}

body .btn-success:hover {
    color: #fff !important;
    filter: brightness(1.03);
    box-shadow: var(--btn-glass-inset), 0 8px 22px rgba(34, 197, 94, 0.34);
}

body .btn-danger {
    color: #fff !important;
    background: linear-gradient(145deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    border-color: color-mix(in srgb, #ffffff 40%, #dc2626);
    box-shadow: var(--btn-glass-inset), 0 4px 14px rgba(239, 68, 68, 0.26);
}

body .btn-danger:hover {
    color: #fff !important;
    filter: brightness(1.03);
    box-shadow: var(--btn-glass-inset), 0 8px 22px rgba(239, 68, 68, 0.34);
}

body .btn-outline-danger {
    color: #dc2626 !important;
    background: color-mix(in srgb, #ffffff 78%, rgba(239, 68, 68, 0.06));
    border-color: color-mix(in srgb, #ef4444 35%, #e2e8f0);
    box-shadow: var(--btn-glass-inset);
}

body .btn-outline-danger:hover {
    color: #fff !important;
    background: linear-gradient(145deg, #f87171 0%, #ef4444 55%, #dc2626 100%);
    border-color: color-mix(in srgb, #ffffff 40%, #dc2626);
}

body .btn-warning {
    color: #422006 !important;
    background: linear-gradient(145deg, #fcd34d 0%, #f59e0b 55%, #d97706 100%);
    border-color: color-mix(in srgb, #ffffff 45%, #d97706);
    box-shadow: var(--btn-glass-inset), 0 4px 14px rgba(245, 158, 11, 0.26);
}

body .btn-info {
    color: #fff !important;
    background: linear-gradient(145deg, #2c5a51 0%, #173630 55%, #112a25 100%);
    border-color: var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
}

body .btn-info:hover {
    color: #fff !important;
    background: var(--btn-primary-fill-hover);
    box-shadow: var(--btn-primary-shadow-hover);
}

body .btn-link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--accent-primary-600, #122b26) !important;
    font-weight: 600;
}

body .btn-link:hover {
    color: var(--accent-primary-700, #0d201c) !important;
    transform: none;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

body .btn-link::before {
    display: none;
}

/* ── Sizes ────────────────────────────────────────────────────────────────── */
body .btn-sm {
    min-height: 2rem;
    padding: 0.28rem 0.7rem;
    font-size: 0.8125rem;
    gap: 0.3rem;
}

body .btn-lg {
    min-height: 2.85rem;
    padding: 0.7rem 1.35rem;
    font-size: 1rem;
    gap: 0.5rem;
}

body .btn:not(.btn-sm):not(.btn-lg) {
    min-height: 2.4rem;
    padding: 0.48rem 1.05rem;
    font-size: 0.875rem;
}

/* Icon-only / tight chips keep glass but less padding */
body .btn.btn-icon,
body .btn-sm.btn-icon {
    min-width: 2.25rem;
    padding-inline: 0.55rem;
}

/* ── Shop marketing CTAs (same brand language, pill radius) ───────────────── */
body .btn-shop-primary,
body .shop-cta-band .btn-shop-cta {
    color: #fff !important;
    background: var(--btn-primary-fill);
    border: 1px solid var(--btn-primary-border);
    border-radius: var(--btn-radius, var(--sys-radius));
    box-shadow: var(--btn-primary-shadow);
    font-weight: 700;
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    transition:
        transform var(--motion-btn),
        box-shadow var(--motion-btn),
        filter var(--motion-fast);
}

body .btn-shop-primary:hover,
body .shop-cta-band .btn-shop-cta:hover {
    color: #fff !important;
    background: var(--btn-primary-fill-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
    filter: brightness(1.02);
}

body .btn-shop-secondary {
    color: var(--btn-outline-color) !important;
    background: var(--btn-outline-bg);
    border: 1px solid var(--btn-outline-border);
    border-radius: var(--btn-radius, var(--sys-radius));
    box-shadow: var(--btn-glass-inset);
    font-weight: 700;
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

body .btn-shop-secondary:hover {
    color: #fff !important;
    background: var(--btn-primary-fill);
    border-color: var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
}

body .btn-shop-ghost {
    color: var(--accent-primary-600, #122b26) !important;
    background: transparent;
    border: none;
    box-shadow: none;
    font-weight: 700;
}

body .btn-shop-ghost:hover {
    color: var(--accent-primary-700, #0d201c) !important;
}

/* Confirm modal primary inherits .btn-primary automatically */

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body .btn,
    body .btn-shop-primary,
    body .btn-shop-secondary,
    body .shop-cta-band .btn-shop-cta {
        transition: none !important;
        transform: none !important;
    }

    body .btn::before,
    body .btn:hover::before {
        display: none !important;
    }
}