/* ═══════════════════════════════════════════════════════════════
   BUTTONS - Terminal Theme
   ═══════════════════════════════════════════════════════════════ */

/* Base Button Styles */
.btn {
    font-family: var(--font-mono) !important;
    border-radius: 0 !important;
    letter-spacing: 0.05em !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.btn:hover,
.btn:focus {
    text-decoration: none !important;
}

/* Primary Button */
.btn-primary {
    background: var(--phosphor-green) !important;
    color: #000 !important;
    border: 2px solid var(--phosphor-green) !important;
    text-shadow: none !important;
    box-shadow:
        0 0 15px rgba(0, 255, 65, 0.4),
        inset 0 0 10px rgba(0, 255, 65, 0.2) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #00cc33 !important;
    color: #000 !important;
    border-color: var(--phosphor-green) !important;
    box-shadow:
        0 0 25px rgba(0, 255, 65, 0.6),
        inset 0 0 15px rgba(0, 255, 65, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Secondary Button */
.btn-secondary,
.btn-outline-secondary {
    background: rgba(0, 255, 65, 0.1) !important;
    color: var(--phosphor-green) !important;
    border: 2px solid rgba(0, 255, 65, 0.5) !important;
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
    transition: all 0.3s ease !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: rgba(0, 255, 65, 0.2) !important;
    color: var(--phosphor-green) !important;
    border-color: var(--phosphor-green) !important;
    text-shadow:
        0 0 10px var(--phosphor-glow),
        0 0 20px rgba(0, 255, 65, 0.3);
    transform: translateY(-1px) !important;
}

/* Danger Button */
.btn-danger {
    background: rgba(255, 65, 65, 0.2) !important;
    border: 2px solid #ff4141 !important;
    color: #ff4141 !important;
}

.btn-danger:hover {
    background: rgba(255, 65, 65, 0.3) !important;
    box-shadow: 0 0 15px rgba(255, 65, 65, 0.4) !important;
}

/* Success Button */
.btn-success {
    background: rgba(0, 255, 65, 0.2) !important;
    border: 2px solid var(--phosphor-green) !important;
    color: var(--phosphor-green) !important;
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
}

.btn-success:hover {
    background: rgba(0, 255, 65, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.5) !important;
    color: var(--phosphor-green) !important;
    border-color: var(--phosphor-green) !important;
}

/* Navbar button variant (small, inline, terminal-style)
   This class is intended to adjust spacing and letter-spacing only;
   color/background/border should come from the button `type` (e.g. .btn-primary)
*/
.nav-btn {
    /* Slightly smaller and tighter for navbar use */
    padding: 0.18rem 0.45rem !important;
    font-size: 0.78rem !important;
    text-transform: lowercase !important;
    letter-spacing: 0.12em !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    /* ensure no underline */
    display: inline-block !important;
}

.nav-btn:hover,
.nav-btn:focus {
    text-decoration: none !important;
    /* explicitly prevent underlines on hover/focus */
    outline: none !important;
}

/* Small size helper for nav buttons when used alongside component API */
.btn-sm.nav-btn {
    padding: 0.14rem 0.38rem !important;
    font-size: 0.75rem !important;
}

/* HTMX in-flight state — dim and lock the triggering button */
button.htmx-request,
.btn.htmx-request {
    opacity: 0.5;
    cursor: wait;
    pointer-events: none;
}