/* Button Color and Visibility Fixes for Dashboard */

/* Primary Buttons - Always Visible */
.btn-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Secondary Buttons */
.btn-secondary {
    background: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* Success Buttons */
.btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

/* Danger Buttons */
.btn-danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* Outline Buttons - Proper Visibility */
.btn-outline-primary {
    background: transparent !important;
    border: 2px solid #2563eb !important;
    color: #2563eb !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.btn-outline-secondary {
    background: transparent !important;
    border: 2px solid #64748b !important;
    color: #64748b !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

.btn-outline-success {
    background: transparent !important;
    border: 2px solid #22c55e !important;
    color: #22c55e !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}

.btn-outline-danger {
    background: transparent !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.btn-outline-light {
    background: transparent !important;
    border: 2px solid #f1f5f9 !important;
    color: #f1f5f9 !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background: #f1f5f9 !important;
    border-color: #f1f5f9 !important;
    color: #1e293b !important;
}

/* Table Action Buttons - Small Size */
.table .btn-sm {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.table .btn-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
}

.table .btn-success {
    background: #22c55e !important;
    color: #ffffff !important;
    border: none !important;
}

.table .btn-danger {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Card Header Buttons */
.card-header .btn {
    color: #ffffff !important;
}

.card-header .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.card-header .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Dashboard Card Header - Your Datasets Button */
.card-header.bg-white .btn-outline-secondary {
    border: 2px solid #6366f1 !important;
    color: #6366f1 !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.card-header.bg-white .btn-outline-secondary:hover {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3) !important;
}

.card-header.bg-white .btn-outline-secondary:active {
    transform: translateY(0);
}

/* Guest Banner Buttons */
.alert .btn-light {
    background: #ffffff !important;
    color: #1e293b !important;
    border: none !important;
}

.alert .btn-light:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

/* Ensure Button Text is Always Visible */
.btn {
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Fix for Dark Theme Buttons */
body[data-theme="dark"] .btn-primary,
.dark .btn-primary {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

body[data-theme="dark"] .btn-success,
.dark .btn-success {
    background: #10b981 !important;
    color: #ffffff !important;
}

/* Button Group Fixes */
.btn-group .btn {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.btn-group .btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Mobile Button Fixes */
@media (max-width: 767px) {
    .btn {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }
    
    .btn-sm {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
    }
    
    /* Ensure buttons are always visible on mobile */
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-success,
    .btn-outline-danger {
        border-width: 2px !important;
        font-weight: 600 !important;
    }
}

/* Icon Buttons */
.btn i {
    opacity: 1 !important;
}

/* Focus States */
.btn:focus,
.btn:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.5) !important;
    outline-offset: 2px !important;
}

/* Active States */
.btn:active {
    transform: scale(0.98) !important;
}

/* Link Buttons */
a.btn {
    text-decoration: none !important;
}

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