/**
 * AgriTrack 2026 - Unified UI Icon Styling & Lucide / Font Awesome Integration
 * Designed to seamlessly blend with the AgriTrack / USTP Claveria design system:
 * - Primary Icons: Lucide Icons
 * - Complementary Icons: Font Awesome (e.g. specialized brands, star ratings)
 * - Strict Icon Color Consistency across all dashboards, portals, and modules.
 */

:root {
    --icon-ustp-navy: #0A1931;
    --icon-ustp-gold: #F4B41A;
    --icon-agri-green: #16a34a;
    --icon-green-mid: #2e7d32;
    --icon-green-pale: #EAF3DE;
    --icon-status-warning: #d97706;
    --icon-status-danger: #dc2626;
    --icon-status-info: #0284c7;
    --icon-muted: #64748b;
    --icon-border-subtle: #e2e8f0;
}

/* ============================================================
   1. Base Icon Reset & Alignment (Lucide + Font Awesome)
   ============================================================ */
i[data-lucide],
svg.lucide {
    display: inline-block;
    vertical-align: middle;
    width: 1.15em;
    height: 1.15em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.15s ease, stroke 0.15s ease;
}

/* Font Awesome Base Harmonization */
i.fa,
i.fa-solid,
i.fa-regular,
i.fa-brands,
.fa-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

/* Standalone container helper */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   2. Standard Size Classes (Lucide & Font Awesome Parity)
   ============================================================ */
.icon-xs,
i[data-lucide].icon-xs,
svg.lucide.icon-xs,
i.fa.icon-xs,
i.fa-solid.icon-xs,
i.fa-regular.icon-xs {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
}

.icon-sm,
i[data-lucide].icon-sm,
svg.lucide.icon-sm,
i.fa.icon-sm,
i.fa-solid.icon-sm,
i.fa-regular.icon-sm {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}

.icon-md,
i[data-lucide].icon-md,
svg.lucide.icon-md,
i.fa.icon-md,
i.fa-solid.icon-md,
i.fa-regular.icon-md {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

.icon-lg,
i[data-lucide].icon-lg,
svg.lucide.icon-lg,
i.fa.icon-lg,
i.fa-solid.icon-lg,
i.fa-regular.icon-lg {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
}

.icon-xl,
i[data-lucide].icon-xl,
svg.lucide.icon-xl,
i.fa.icon-xl,
i.fa-solid.icon-xl,
i.fa-regular.icon-xl {
    width: 28px !important;
    height: 28px !important;
    font-size: 28px !important;
}

.icon-2xl,
i[data-lucide].icon-2xl,
svg.lucide.icon-2xl,
i.fa.icon-2xl,
i.fa-solid.icon-2xl,
i.fa-regular.icon-2xl {
    width: 36px !important;
    height: 36px !important;
    font-size: 36px !important;
}

/* ============================================================
   3. Strict Brand & Status Color Consistency Utilities
   ============================================================ */
.icon-ustp-navy,
.icon-navy          { color: #0A1931 !important; stroke: #0A1931; }
.icon-ustp-gold,
.icon-gold          { color: #F4B41A !important; stroke: #F4B41A; }
.icon-green-deep    { color: #1a3d2b !important; stroke: #1a3d2b; }
.icon-green-mid,
.icon-green         { color: #16a34a !important; stroke: #16a34a; }
.icon-green-fresh   { color: #2e7d32 !important; stroke: #2e7d32; }
.icon-amber         { color: #d97706 !important; stroke: #d97706; }
.icon-amber-bright  { color: #f59e0b !important; stroke: #f59e0b; }
.icon-emerald       { color: #10b981 !important; stroke: #10b981; }
.icon-blue,
.icon-info          { color: #0284c7 !important; stroke: #0284c7; }
.icon-indigo        { color: #4f46e5 !important; stroke: #4f46e5; }
.icon-danger,
.icon-red           { color: #dc2626 !important; stroke: #dc2626; }
.icon-muted,
.icon-slate         { color: #64748b !important; stroke: #64748b; }
.icon-white         { color: #ffffff !important; stroke: #ffffff; }

/* Star Rating Visual Standardization */
.star-rating-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}

.icon-star-gold,
.fa-star.star-gold {
    color: #F4B41A !important;
}

.icon-star-muted,
.fa-star.star-muted {
    color: #cbd5e1 !important;
}

/* ============================================================
   4. Icon Badges & Metric Card Accents
   ============================================================ */
.kpi-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-icon-badge.green {
    background: #EAF3DE;
    color: #16a34a;
    border: 1px solid #cde3bc;
}

.kpi-icon-badge.amber {
    background: #FEF6E8;
    color: #d97706;
    border: 1px solid #fbd38d;
}

.kpi-icon-badge.blue {
    background: #eff6ff;
    color: #0284c7;
    border: 1px solid #bfdbfe;
}

.kpi-icon-badge.red {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.kpi-icon-badge.purple {
    background: #faf5ff;
    color: #9333ea;
    border: 1px solid #e9d5ff;
}

.kpi-icon-badge.gray {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.kpi-icon-badge.navy-gold {
    background: #0A1931;
    color: #F4B41A;
    border: 1px solid rgba(244, 180, 26, 0.25);
    box-shadow: 0 3px 8px rgba(10, 25, 49, 0.22);
}

.kpi-icon-badge.navy-gold svg,
.kpi-icon-badge.navy-gold i {
    color: #F4B41A !important;
    stroke: #F4B41A !important;
}

/* Subtle hover bounce on metric badges */
.stat-card:hover .kpi-icon-badge,
.w-stat-card:hover .kpi-icon-badge {
    transform: translateY(-2px) scale(1.05);
}

/* ============================================================
   5. Button & Action Pairing
   ============================================================ */
.btn-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.btn-with-icon:hover i[data-lucide],
.btn-with-icon:hover svg.lucide,
.btn-with-icon:hover i.fa,
.btn-with-icon:hover i.fa-solid {
    transform: translateY(-1px);
}

/* Table inline action icons */
.action-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.action-icon-btn:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.action-icon-btn.primary:hover {
    background: #EAF3DE;
    color: #16a34a;
    border-color: #cde3bc;
}

.action-icon-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* Pulse animation for live indicators */
.icon-pulse {
    animation: icon-pulse-glow 2s infinite ease-in-out;
}

@keyframes icon-pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.92); }
}

/* ============================================================
   6. Unified Card & Section Header Badges (Operations Command Center Standard)
   Matches the dashboard "Live Fleet Location Preview" badge specification
   ============================================================ */
.card-title-row,
.w-card-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.card-icon,
.w-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #f0fdf4 !important;
    border: 1px solid #dcfce7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #16a34a !important;
}

.card-icon svg,
.card-icon i,
.w-card-icon svg,
.w-card-icon i {
    width: 18px !important;
    height: 18px !important;
    color: #16a34a !important;
    stroke: #16a34a !important;
    stroke-width: 2 !important;
    display: block !important;
}

.card-icon.amber {
    background: #fffbeb !important;
    border-color: #fef3c7 !important;
    color: #d97706 !important;
}
.card-icon.amber svg,
.card-icon.amber i {
    color: #d97706 !important;
    stroke: #d97706 !important;
}

.card-icon.red,
.card-icon.danger {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}
.card-icon.red svg,
.card-icon.red i,
.card-icon.danger svg,
.card-icon.danger i {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
}

.card-title,
.w-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0A1931 !important;
    letter-spacing: -0.01em !important;
}