/* ========================================
   Global Gradient Background Classes
   ========================================
   These classes provide gradient backgrounds for cards and other elements.
   They only apply when explicitly used via class names.
   ======================================== */

/* Primary Gradient (Blue) */
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    background-image: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

/* Success Gradient (Green) */
.bg-gradient-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    background-image: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

/* Info Gradient (Cyan) */
.bg-gradient-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
    background-image: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
}

/* Warning Gradient (Yellow) */
.bg-gradient-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    background-image: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}

/* Danger Gradient (Red) */
.bg-gradient-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    background-image: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

/* Secondary Gradient (Gray) */
.bg-gradient-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    background-image: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

/* Dark Gradient */
.bg-gradient-dark {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%) !important;
    background-image: linear-gradient(135deg, #343a40 0%, #212529 100%) !important;
}

/* ========================================
   Card Header with Gradient Support
   ========================================
   Override theme CSS when gradient classes are explicitly used
   ======================================== */

/* Override theme CSS background when gradient classes are present - Maximum specificity */
html.theme-cmdpad .card-header.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    background-image: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

html.theme-cmdpad .card-header.bg-gradient-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    background-image: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

html.theme-cmdpad .card-header.bg-gradient-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
    background-image: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
}

html.theme-cmdpad .card-header.bg-gradient-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    background-image: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

html.theme-cmdpad .card-header.bg-gradient-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    background-image: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

html.theme-cmdpad .card-header.bg-gradient-dark {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%) !important;
    background-image: linear-gradient(135deg, #343a40 0%, #212529 100%) !important;
}

html.theme-cmdpad .card-header.bg-gradient-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    background-image: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}

/* Override text color with maximum specificity when gradient + text-white are combined */
html.theme-cmdpad .card-header.bg-gradient-primary.text-white,
html.theme-cmdpad .card-header.bg-gradient-success.text-white,
html.theme-cmdpad .card-header.bg-gradient-info.text-white,
html.theme-cmdpad .card-header.bg-gradient-danger.text-white,
html.theme-cmdpad .card-header.bg-gradient-secondary.text-white,
html.theme-cmdpad .card-header.bg-gradient-dark.text-white {
    color: #ffffff !important;
}

html.theme-cmdpad .card-header.bg-gradient-warning.text-dark {
    color: #212529 !important;
}

/* Handle cases without theme class but with gradient classes (for dashboard_base.html) */
.card-header.bg-gradient-primary.text-white,
.card-header.bg-gradient-success.text-white,
.card-header.bg-gradient-info.text-white,
.card-header.bg-gradient-danger.text-white,
.card-header.bg-gradient-secondary.text-white,
.card-header.bg-gradient-dark.text-white {
    color: #ffffff !important;
}

.card-header.bg-gradient-warning.text-dark {
    color: #212529 !important;
}

/* Ensure gradient backgrounds override any other background */
.card-header.bg-gradient-primary,
.card-header.bg-gradient-success,
.card-header.bg-gradient-info,
.card-header.bg-gradient-danger,
.card-header.bg-gradient-secondary,
.card-header.bg-gradient-dark,
.card-header.bg-gradient-warning {
    background-color: transparent !important;
}

/* Additional override for cases where theme CSS might still interfere */
html.theme-cmdpad .card-header.bg-gradient-primary.text-white *,
html.theme-cmdpad .card-header.bg-gradient-success.text-white *,
html.theme-cmdpad .card-header.bg-gradient-info.text-white *,
html.theme-cmdpad .card-header.bg-gradient-danger.text-white *,
html.theme-cmdpad .card-header.bg-gradient-secondary.text-white *,
html.theme-cmdpad .card-header.bg-gradient-dark.text-white * {
    color: #ffffff !important;
}

.card-header.bg-gradient-primary.text-white *,
.card-header.bg-gradient-success.text-white *,
.card-header.bg-gradient-info.text-white *,
.card-header.bg-gradient-danger.text-white *,
.card-header.bg-gradient-secondary.text-white *,
.card-header.bg-gradient-dark.text-white * {
    color: #ffffff !important;
}