/* VGO Unified Button System
 * This file provides consistent button styling across all VGO contexts
 * to prevent admin vs frontend styling conflicts
 */

/* Base Button Styles - High Specificity for Override */
.vgo-container .vgo-button,
.vgo-dashboard-container .vgo-button,
.vgo-tab-content .vgo-button,
.vgo-template-customizer .vgo-button,
.vgo-proposals-container .vgo-button,
body .vgo-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border: 1px solid !important;
    border-radius: var(--vgo-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Primary Button - Always Blue with White Text */
.vgo-container .vgo-button-primary,
.vgo-dashboard-container .vgo-button-primary,
.vgo-tab-content .vgo-button-primary,
.vgo-template-customizer .vgo-button-primary,
.vgo-proposals-container .vgo-button-primary,
body .vgo-button-primary {
    background: var(--vgo-primary) !important;
    border-color: var(--vgo-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(34, 113, 177, 0.2) !important;
}

.vgo-container .vgo-button-primary:hover,
.vgo-dashboard-container .vgo-button-primary:hover,
.vgo-tab-content .vgo-button-primary:hover,
.vgo-template-customizer .vgo-button-primary:hover,
.vgo-proposals-container .vgo-button-primary:hover,
body .vgo-button-primary:hover {
    background: #1e5a8a !important;
    border-color: #1e5a8a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(34, 113, 177, 0.3) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.vgo-container .vgo-button-primary:focus,
.vgo-dashboard-container .vgo-button-primary:focus,
.vgo-tab-content .vgo-button-primary:focus,
.vgo-template-customizer .vgo-button-primary:focus,
.vgo-proposals-container .vgo-button-primary:focus,
body .vgo-button-primary:focus {
    background: #1e5a8a !important;
    border-color: var(--vgo-primary-light) !important;
    color: #ffffff !important;
    outline: 2px solid var(--vgo-primary-light) !important;
    outline-offset: 2px !important;
}

/* Secondary Button - Light Background with Dark Text */
.vgo-container .vgo-button-secondary,
.vgo-dashboard-container .vgo-button-secondary,
.vgo-tab-content .vgo-button-secondary,
.vgo-template-customizer .vgo-button-secondary,
.vgo-proposals-container .vgo-button-secondary,
body .vgo-button-secondary {
    background: #ffffff !important;
    border-color: #dcdcde !important;
    color: #50575e !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.vgo-container .vgo-button-secondary:hover,
.vgo-dashboard-container .vgo-button-secondary:hover,
.vgo-tab-content .vgo-button-secondary:hover,
.vgo-template-customizer .vgo-button-secondary:hover,
.vgo-proposals-container .vgo-button-secondary:hover,
body .vgo-button-secondary:hover {
    background: #f6f7f7 !important;
    border-color: #c3c4c7 !important;
    color: #3c434a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.vgo-container .vgo-button-secondary:focus,
.vgo-dashboard-container .vgo-button-secondary:focus,
.vgo-tab-content .vgo-button-secondary:focus,
.vgo-template-customizer .vgo-button-secondary:focus,
.vgo-proposals-container .vgo-button-secondary:focus,
body .vgo-button-secondary:focus {
    background: #f6f7f7 !important;
    border-color: var(--vgo-primary-light) !important;
    color: #3c434a !important;
    outline: 2px solid var(--vgo-primary-light) !important;
    outline-offset: 2px !important;
}

/* Danger Button - Red for Destructive Actions */
.vgo-container .vgo-button-danger,
.vgo-dashboard-container .vgo-button-danger,
.vgo-tab-content .vgo-button-danger,
.vgo-template-customizer .vgo-button-danger,
.vgo-proposals-container .vgo-button-danger,
body .vgo-button-danger {
    background: #d63638 !important;
    border-color: #d63638 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(214, 54, 56, 0.2) !important;
}

.vgo-container .vgo-button-danger:hover,
.vgo-dashboard-container .vgo-button-danger:hover,
.vgo-tab-content .vgo-button-danger:hover,
.vgo-template-customizer .vgo-button-danger:hover,
.vgo-proposals-container .vgo-button-danger:hover,
body .vgo-button-danger:hover {
    background: #b02a2c !important;
    border-color: #b02a2c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(214, 54, 56, 0.3) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.vgo-container .vgo-button-danger:focus,
.vgo-dashboard-container .vgo-button-danger:focus,
.vgo-tab-content .vgo-button-danger:focus,
.vgo-template-customizer .vgo-button-danger:focus,
.vgo-proposals-container .vgo-button-danger:focus,
body .vgo-button-danger:focus {
    background: #b02a2c !important;
    border-color: #b02a2c !important;
    color: #ffffff !important;
    outline: 2px solid #d63638 !important;
    outline-offset: 2px !important;
}

/* Disabled Button State */
.vgo-container .vgo-button:disabled,
.vgo-dashboard-container .vgo-button:disabled,
.vgo-tab-content .vgo-button:disabled,
.vgo-template-customizer .vgo-button:disabled,
.vgo-proposals-container .vgo-button:disabled,
body .vgo-button:disabled,
.vgo-container .vgo-button-disabled,
.vgo-dashboard-container .vgo-button-disabled,
.vgo-tab-content .vgo-button-disabled,
.vgo-template-customizer .vgo-button-disabled,
.vgo-proposals-container .vgo-button-disabled,
body .vgo-button-disabled {
    background: #f6f7f7 !important;
    border-color: #dcdcde !important;
    color: #a7aaad !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
}

.vgo-container .vgo-button:disabled:hover,
.vgo-dashboard-container .vgo-button:disabled:hover,
.vgo-tab-content .vgo-button:disabled:hover,
.vgo-template-customizer .vgo-button:disabled:hover,
.vgo-proposals-container .vgo-button:disabled:hover,
body .vgo-button:disabled:hover,
.vgo-container .vgo-button-disabled:hover,
.vgo-dashboard-container .vgo-button-disabled:hover,
.vgo-tab-content .vgo-button-disabled:hover,
.vgo-template-customizer .vgo-button-disabled:hover,
.vgo-proposals-container .vgo-button-disabled:hover,
body .vgo-button-disabled:hover {
    background: #f6f7f7 !important;
    border-color: #dcdcde !important;
    color: #a7aaad !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Button Icon Styling */
.vgo-container .vgo-button .dashicons,
.vgo-dashboard-container .vgo-button .dashicons,
.vgo-tab-content .vgo-button .dashicons,
.vgo-template-customizer .vgo-button .dashicons,
.vgo-proposals-container .vgo-button .dashicons,
body .vgo-button .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    margin-right: 4px !important;
}

/* Button Size Variants */
.vgo-container .vgo-button-small,
.vgo-dashboard-container .vgo-button-small,
.vgo-tab-content .vgo-button-small,
.vgo-template-customizer .vgo-button-small,
.vgo-proposals-container .vgo-button-small,
body .vgo-button-small {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 28px !important;
}

.vgo-container .vgo-button-large,
.vgo-dashboard-container .vgo-button-large,
.vgo-tab-content .vgo-button-large,
.vgo-template-customizer .vgo-button-large,
.vgo-proposals-container .vgo-button-large,
body .vgo-button-large {
    padding: 14px 24px !important;
    font-size: 16px !important;
    min-height: 44px !important;
}

/* Dashboard btn class compatibility */
.vgo-container .vgo-btn,
.vgo-dashboard-container .vgo-btn,
.vgo-tab-content .vgo-btn,
.vgo-template-customizer .vgo-btn,
.vgo-proposals-container .vgo-btn,
body .vgo-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border: 1px solid !important;
    border-radius: var(--vgo-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

.vgo-container .vgo-btn-primary,
.vgo-dashboard-container .vgo-btn-primary,
.vgo-tab-content .vgo-btn-primary,
.vgo-template-customizer .vgo-btn-primary,
.vgo-proposals-container .vgo-btn-primary,
body .vgo-btn-primary {
    background: var(--vgo-primary) !important;
    border-color: var(--vgo-primary) !important;
    color: #ffffff !important;
}

.vgo-container .vgo-btn-primary:hover,
.vgo-dashboard-container .vgo-btn-primary:hover,
.vgo-tab-content .vgo-btn-primary:hover,
.vgo-template-customizer .vgo-btn-primary:hover,
.vgo-proposals-container .vgo-btn-primary:hover,
body .vgo-btn-primary:hover {
    background: #1e5a8a !important;
    border-color: #1e5a8a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.vgo-container .vgo-btn-secondary,
.vgo-dashboard-container .vgo-btn-secondary,
.vgo-tab-content .vgo-btn-secondary,
.vgo-template-customizer .vgo-btn-secondary,
.vgo-proposals-container .vgo-btn-secondary,
body .vgo-btn-secondary {
    background: #ffffff !important;
    border-color: #dcdcde !important;
    color: #50575e !important;
}

.vgo-container .vgo-btn-secondary:hover,
.vgo-dashboard-container .vgo-btn-secondary:hover,
.vgo-tab-content .vgo-btn-secondary:hover,
.vgo-template-customizer .vgo-btn-secondary:hover,
.vgo-proposals-container .vgo-btn-secondary:hover,
body .vgo-btn-secondary:hover {
    background: #f6f7f7 !important;
    border-color: #c3c4c7 !important;
    color: #3c434a !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Loading State */
.vgo-container .vgo-button.loading,
.vgo-dashboard-container .vgo-button.loading,
.vgo-tab-content .vgo-button.loading,
.vgo-template-customizer .vgo-button.loading,
.vgo-proposals-container .vgo-button.loading,
body .vgo-button.loading {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.vgo-container .vgo-button.loading::after,
.vgo-dashboard-container .vgo-button.loading::after,
.vgo-tab-content .vgo-button.loading::after,
.vgo-template-customizer .vgo-button.loading::after,
.vgo-proposals-container .vgo-button.loading::after,
body .vgo-button.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
    border: 2px solid transparent !important;
    border-top: 2px solid currentColor !important;
    border-radius: 50% !important;
    animation: vgo-spin 1s linear infinite !important;
}

@keyframes vgo-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .vgo-container .vgo-button,
    .vgo-dashboard-container .vgo-button,
    .vgo-tab-content .vgo-button,
    .vgo-template-customizer .vgo-button,
    .vgo-proposals-container .vgo-button,
    body .vgo-button {
        padding: 12px 16px !important;
        min-height: 40px !important;
    }
}

/* Override any conflicting WordPress admin styles */
.wp-admin .vgo-button,
.wp-admin .vgo-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Ensure buttons work properly in all VGO contexts */
.vgo-template-customizer .vgo-button:hover,
.vgo-template-dashboard .vgo-button:hover,
.vgo-proposals-listing .vgo-button:hover,
.vgo-proposals-form .vgo-button:hover {
    text-decoration: none !important;
}

/* Fix link styling conflicts */
a.vgo-button,
a.vgo-btn {
    text-decoration: none !important;
}

a.vgo-button:hover,
a.vgo-btn:hover {
    text-decoration: none !important;
}

a.vgo-button:focus,
a.vgo-btn:focus {
    text-decoration: none !important;
}