/* =========================================================
   Rangli gradient ikonka konteynerlari
   (stats sahifasidagi .rec-card-icon uslubida)

   Ishlatish:
     <div class="card-icon-container icon-grad-sky">
       <i class="fas fa-book-open"></i>
     </div>

   Konsept: gradient fon + oq ikonka + yumshoq soya.
   ========================================================= */

.icon-grad {
    background-image: var(--grad) !important;
    background-color: transparent !important;
    color: #fff !important;
    /* Gradient yoniga yengil soya (juda kuchli emas) */
    box-shadow: 0 4px 10px -6px var(--grad-glow, rgba(79, 70, 229, 0.45)) !important;
}

/* ── Muhim: main.css dagi quyidagi qoidalar `color: var(--primary)
   !important` bilan binafsha rangni MAJBURLAYDI:
     .card-icon-container              (0,1,0)
     .card-icon-container .skill-ico   (0,2,0)
   .icon-grad (0,1,0) ularni yenga olmaydi. Shuning uchun
   specificity 0,3,0 da aniq ustidan ustiga yozamiz. */
.card-icon-container.icon-grad,
.card-icon-container.icon-grad .skill-ico,
.kpi-icon-box.icon-grad,
.kpi-icon-box.icon-grad i,
.setting-icon-box.icon-grad,
.setting-icon-box.icon-grad i {
    color: #fff !important;
}

.kpi-icon-box i,
.setting-icon-box i,
.rec-card-icon i {
    color: #fff !important;
}

/* Gradientlar (stats.css dagi --grad-* bilan bir xil) */
.icon-grad-primary {
    --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --grad-glow: rgba(79, 70, 229, 0.7);
}

.icon-grad-green {
    --grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --grad-glow: rgba(16, 185, 129, 0.7);
}

.icon-grad-amber {
    --grad: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --grad-glow: rgba(245, 158, 11, 0.7);
}

.icon-grad-violet {
    --grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    --grad-glow: rgba(139, 92, 246, 0.7);
}

.icon-grad-sky {
    --grad: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --grad-glow: rgba(14, 165, 233, 0.7);
}

.icon-grad-pink {
    --grad: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    --grad-glow: rgba(236, 72, 153, 0.7);
}

.icon-grad-teal {
    --grad: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    --grad-glow: rgba(20, 184, 166, 0.7);
}

.icon-grad-orange {
    --grad: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
    --grad-glow: rgba(251, 146, 60, 0.7);
}

.icon-grad-indigo {
    --grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --grad-glow: rgba(99, 102, 241, 0.7);
}

.icon-grad-purple {
    --grad: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    --grad-glow: rgba(168, 85, 247, 0.7);
}

/* ── MAIN sahifasi: 4 ta bo'lim kartasi ──
   Radius biroz kichikroq — "XP bar" ko'rinishini yo'q qilish. */
.card-icon-container.icon-grad {
    border-radius: 14px;
}

/* ── STATS sahifasi: KPI kartalari ── */
.kpi-icon-box.icon-grad {
    border-radius: 14px;
}

/* ── PROFILE sahifasi: sozlama qatorlari ── */
.setting-icon-box.icon-grad {
    border-radius: var(--radius-sm, 10px);
}

/* ── Welcome banner (compass) ── */
.banner-icon-box.icon-grad {
    border-radius: 14px;
}

/* ── News kartalari ── */
.news-icon.icon-grad {
    border-radius: 14px;
    border-color: transparent;
}

/* Hoverda yengil ko'tarilish (kartа ikonkalari uchun) —
   kichik siljish, kattalik o'zgarishi yo'q (porlash bo'lmasin) */
.flip-card:hover .card-icon-container.icon-grad,
.kpi-card:hover .kpi-icon-box.icon-grad,
.setting-row:hover .setting-icon-box.icon-grad {
    transform: translateY(-2px);
    transition: transform 0.25s ease;
}

/* ── PRO sahifasi: check/cross ikonkalari ── */
.check-icon.icon-grad,
.cross-icon.icon-grad {
    border-radius: 50%;
}