/* Marketplace App Icon Gradients */
/* These gradients provide consistent, modern styling for app icons across the entire application */

.app-icon-container {
    position: relative;
}

/* Default gradient for all app icons */
.app-icon-container>div {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Category-specific gradients */
.app-icon-container[data-category="communication"]>div {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-icon-container[data-category="productivity"]>div {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.app-icon-container[data-category="analytics"]>div {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.app-icon-container[data-category="integration"]>div {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.app-icon-container[data-category="hr"]>div {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.app-icon-container[data-category="payroll"]>div {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.app-icon-container[data-category="security"]>div {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.app-icon-container[data-category="reporting"]>div {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.app-icon-container[data-category="operations"]>div {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.app-icon-container[data-category="workflow"]>div {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

.app-icon-container[data-category="utility"]>div {
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}

.app-icon-container[data-category="finance"]>div {
    background: linear-gradient(135deg, #fdbb2d 0%, #22c1c3 100%);
}

.app-icon-container[data-category="crm"]>div {
    background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);
}

.app-icon-container[data-category="marketing"]>div {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.app-icon-container[data-category="sales"]>div {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.app-icon-container[data-category="support"]>div {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

.app-icon-container[data-category="education"]>div {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-icon-container[data-category="healthcare"]>div {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.app-icon-container[data-category="retail"]>div {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.app-icon-container[data-category="food_beverage"]>div {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.app-icon-container[data-category="manufacturing"]>div {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.app-icon-container[data-category="technology"]>div {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-icon-container[data-category="transportation"]>div {
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}

.app-icon-container[data-category="construction"]>div {
    background: linear-gradient(135deg, #fdbb2d 0%, #22c1c3 100%);
}

.app-icon-container[data-category="professional_services"]>div {
    background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);
}

/* Hover effects for interactive icons */
.app-icon-container:hover>div {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Size-specific adjustments */
.app-icon-container .avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
}

.app-icon-container .avatar-sm {
    width: 2rem;
    height: 2rem;
}

.app-icon-container .avatar {
    width: 2.5rem;
    height: 2.5rem;
}

.app-icon-container .avatar-lg {
    width: 3rem;
    height: 3rem;
}

.app-icon-container .avatar-xl {
    width: 4rem;
    height: 4rem;
}

/* Ensure images override gradients when present */
.app-icon-container img {
    background: transparent !important;
}