/*
 * BrightSaaS Button Styles & Animated Glow Overrides
 * Reference: ATemplates/brightsaas/brightsaas/brightsaas.niotheme.com/assets/css/appb350.css
 *
 * Provides pixel-perfect .btn, .btn-pill, .btn-primary, and .btn-glow styles
 * with rotating gradient and animated glow effects for the third column (column="third")
 * and dialog buttons.
 */

@property --gradient-bg-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate-gradient {
    0% {
        --gradient-bg-angle: 0deg;
        --gradient-border-angle: 0deg;
    }
    100% {
        --gradient-bg-angle: 360deg;
        --gradient-border-angle: 360deg;
    }
}

@keyframes brightsaas-glow-pulse {
    0%, 100% {
        box-shadow: inset 0 -5px 8px rgba(99, 102, 241, 0.4),
                    0 0 15px rgba(99, 102, 241, 0.45),
                    0 0 25px rgba(99, 102, 241, 0.25);
    }
    50% {
        box-shadow: inset 0 -5px 8px rgba(99, 102, 241, 0.55),
                    0 0 22px rgba(99, 102, 241, 0.75),
                    0 0 38px rgba(99, 102, 241, 0.45);
    }
}

/* ─── Formbox Bottom Container Layout ──────────────────────────────────── */
.main .formbox > .bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 0 15px !important;
    height: 60px !important;
    border-top: 1px solid var(--form-primary-border-color, #1e293b) !important;
    background: var(--form-secondary-bg-color, #0b0f19) !important;
    z-index: 6 !important;
}

/* ─── Base Button (.btn) in Formbox & Dashboard AI Card ───────────────── */
.main .formbox .btn,
.main .formbox > .bottom > span.btn,
.dash_ai_card .btn,
.dash_btn_focus_cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem 1.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.5rem !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    user-select: none !important;
    border-radius: 0.375rem;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    min-width: 96px !important;
    letter-spacing: 0.01em !important;
    box-sizing: border-box !important;
    transition: color 0.2s ease-in-out,
                background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out,
                transform 0.2s ease-in-out !important;
}

/* ─── .btn-pill ─────────────────────────────────────────────────────────── */
.main .formbox .btn-pill,
.main .formbox > .bottom > span.btn-pill,
.dash_ai_card .btn-pill,
.dash_btn_focus_cta.btn-pill {
    border-radius: 50rem !important;
}

/* ─── .btn-primary (Submit / Create / Save / Update Button) ───────────────
   Full BrightSaaS Gradient, Animated Rotation & Glowing Box-Shadow
────────────────────────────────────────────────────────────────────────── */
.main .formbox .btn-primary,
.main .formbox > .bottom > span.submit.btn-primary,
.main .formbox > .bottom > span.btn-primary,
.dash_ai_card .btn-primary,
.dash_btn_focus_cta.btn-primary {
    --gradient-bg-angle: 360deg;
    --gradient-border-angle: 360deg;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #6366f1 !important;
    background-image: linear-gradient(var(--gradient-bg-angle, 360deg), #6366f1 0%, #4338ca 50%, #6366f1 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 200% 200% !important;
    background-position: 0 0 !important;
    border: 1px solid rgba(99, 102, 241, 1) !important;
    box-shadow: inset 0 -5px 8px rgba(99, 102, 241, 0.4),
                0 0 15px rgba(99, 102, 241, 0.45),
                0 0 25px rgba(99, 102, 241, 0.25) !important;
    animation: rotate-gradient 4s linear infinite, brightsaas-glow-pulse 2.8s ease-in-out infinite !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.main .formbox .btn-primary:hover,
.main .formbox > .bottom > span.submit.btn-primary:hover,
.main .formbox > .bottom > span.btn-primary:hover,
.dash_ai_card .btn-primary:hover,
.dash_btn_focus_cta.btn-primary:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-position: 100% 100% !important;
    border-color: #7375f2 !important;
    box-shadow: inset 0 -5px 8px rgba(99, 102, 241, 0.5),
                0 0 22px rgba(99, 102, 241, 0.8),
                0 0 40px rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1px) !important;
}

.main .formbox .btn-primary:active,
.main .formbox > .bottom > span.submit.btn-primary:active,
.main .formbox > .bottom > span.btn-primary:active,
.dash_ai_card .btn-primary:active,
.dash_btn_focus_cta.btn-primary:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-position: 100% 100% !important;
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25),
                0 0 15px rgba(99, 102, 241, 0.5) !important;
}

/* ─── .btn-glow (Cancel / Dismiss Button) ─────────────────────────────────
   BrightSaaS Ghost Glowing Button with Crisp Title Text & Indigo Tint
────────────────────────────────────────────────────────────────────────── */
.main .formbox .btn-glow,
.main .formbox > .bottom > span.cancel.btn-glow,
.main .formbox > .bottom > span.btn-glow {
    color: #d5dcf2 !important;
    -webkit-text-fill-color: #d5dcf2 !important;
    background-color: rgba(99, 102, 241, 0.1) !important;
    background-image: none !important;
    border: 1px solid #475569 !important;
    box-shadow: inset 0 -4px 6px rgba(99, 102, 241, 0.1) !important;
}

.main .formbox .btn-glow:hover,
.main .formbox > .bottom > span.cancel.btn-glow:hover,
.main .formbox > .bottom > span.btn-glow:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    box-shadow: inset 0 -4px 6px rgba(99, 102, 241, 0.15),
                0 0 14px rgba(99, 102, 241, 0.3) !important;
    transform: translateY(-1px) !important;
}

.main .formbox .btn-glow:active,
.main .formbox > .bottom > span.cancel.btn-glow:active,
.main .formbox > .bottom > span.btn-glow:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.3) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ─── Processing State for Formbox Submit Button ───────────────────────── */
.main .formbox.processing > .bottom > span.submit:before {
    content: "";
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1rem, rgba(255, 255, 255, 0.25) 1rem, rgba(255, 255, 255, 0.25) 2rem);
    background-size: 200% 200%;
    animation: barberpole 2s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

/* ─── Responsive: Mobile Devices ───────────────────────────────────────── */
@media (max-width: 767.98px) {
    .main .formbox .btn,
    .main .formbox > .bottom > span.btn {
        padding: 0.3125rem 1.125rem !important;
        font-size: 0.8125rem !important;
        min-width: 80px !important;
    }
}

/* ─── Files View: Empty Trash Animated Button Contrast & Readability ───── */
.files_empty_trash_btn,
.files_empty_trash_btn .files_anim_text_wrapper,
.files_empty_trash_btn .files_anim_text_wrapper .letter,
body.dark_mode .files_empty_trash_btn,
body.dark_mode .files_empty_trash_btn .files_anim_text_wrapper,
body.dark_mode .files_empty_trash_btn .files_anim_text_wrapper .letter {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.files_empty_trash_btn .letter,
body.dark_mode .files_empty_trash_btn .letter {
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 0.8) !important;
}