/* 
 * EZKEY - Icons System CSS
 * Unified icon system with Font Awesome and SVG fallbacks
 * Version: 1.0
 */

/* ===== Font Awesome Loading ===== */
/* Primary Font Awesome CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* Ensure Font Awesome fonts are properly loaded */
.fas, .far, .fab, .fal, .fad, .fa {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome', sans-serif !important;
    font-weight: 900; /* For solid icons */
}

.far {
    font-weight: 400; /* For regular icons */
}

/* ===== Icon Fallback System ===== */
.icon-fallback {
    display: none; /* Hidden by default, shown when Font Awesome fails */
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: middle;
}

/* Show fallback icons when Font Awesome isn't loaded */
.no-fontawesome .fas,
.no-fontawesome .far,
.no-fontawesome .fab,
.no-fontawesome .fal,
.no-fontawesome .fad,
.no-fontawesome .fa {
    display: none !important;
}

.no-fontawesome .icon-fallback {
    display: inline-block !important;
}

/* ===== SVG Icon Definitions ===== */
/* User Icons */
.icon-fallback.icon-user {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
}

/* Finance Icons */
.icon-fallback.icon-wallet {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h12a2 2 0 0 1 0 4H5a2 2 0 0 0 0 4h12a2 2 0 0 0 0 4h1a1 1 0 0 0 1-1v-3'/%3e%3cpath d='M10 12h.01'/%3e%3c/svg%3e");
}

.icon-fallback.icon-plus-circle {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 8v8m-4-4h8'/%3e%3c/svg%3e");
}

/* Shopping Icons */
.icon-fallback.icon-shopping-cart {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m1 1 6 6m0 0 8 8m-8-8V1m0 0h8'/%3e%3c/svg%3e");
}

.icon-fallback.icon-shopping-bag {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3e%3cpath d='M3 6h18'/%3e%3cpath d='M16 10a4 4 0 0 1-8 0'/%3e%3c/svg%3e");
}

/* Navigation Icons */
.icon-fallback.icon-home {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3e%3cpolyline points='9,22 9,12 15,12 15,22'/%3e%3c/svg%3e");
}

.icon-fallback.icon-menu {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='4' x2='20' y1='12' y2='12'/%3e%3cline x1='4' x2='20' y1='6' y2='6'/%3e%3cline x1='4' x2='20' y1='18' y2='18'/%3e%3c/svg%3e");
}

.icon-fallback.icon-x {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6 6 18'/%3e%3cpath d='m6 6 12 12'/%3e%3c/svg%3e");
}

.icon-fallback.icon-arrow-left {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10 19l-7-7m0 0l7-7m-7 7h18'/%3e%3c/svg%3e");
}

/* Time & Activity Icons */
.icon-fallback.icon-clock {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpolyline points='12,6 12,12 16,14'/%3e%3c/svg%3e");
}

.icon-fallback.icon-history {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3e%3cpath d='M21 3v5h-5'/%3e%3cpath d='M12 7v5l4 2'/%3e%3c/svg%3e");
}

/* Communication Icons */
.icon-fallback.icon-headset {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z'/%3e%3c/svg%3e");
}

/* Status Icons */
.icon-fallback.icon-check-circle {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3e%3cpath d='M22 4 12 14.01l-3-3'/%3e%3c/svg%3e");
}

/* File & Document Icons */
.icon-fallback.icon-inbox {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='22,12 18,12 15,21 9,21 6,12 2,12'/%3e%3cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3e%3c/svg%3e");
}

.icon-fallback.icon-file-x {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3e%3cpolyline points='14,2 14,8 20,8'/%3e%3cline x1='9.5' y1='12.5' x2='14.5' y2='17.5'/%3e%3cline x1='14.5' y1='12.5' x2='9.5' y2='17.5'/%3e%3c/svg%3e");
}

/* Tools & Settings Icons */
.icon-fallback.icon-cog {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3e%3cpath d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3e%3c/svg%3e");
}

/* Eye Icons */
.icon-fallback.icon-eye {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3e%3ccircle cx='12' cy='12' r='3'/%3e%3c/svg%3e");
}

.icon-fallback.icon-eye-off {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24'/%3e%3cpath d='M1 1l22 22'/%3e%3c/svg%3e");
}

/* ===== Missing Icons for complete coverage ===== */
.icon-fallback.icon-spinner {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 12a9 9 0 11-6.219-8.56'/%3e%3c/svg%3e");
}

.icon-fallback.icon-mobile-alt {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3e%3cpath d='M12 18h.01'/%3e%3c/svg%3e");
}

.icon-fallback.icon-credit-card {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect width='20' height='14' x='2' y='5' rx='2'/%3e%3cline x1='2' x2='22' y1='10' y2='10'/%3e%3c/svg%3e");
}

.icon-fallback.icon-chevron-right {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m9 18 6-6-6-6'/%3e%3c/svg%3e");
}

.icon-fallback.icon-check {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
}

.icon-fallback.icon-times {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6 6 18'/%3e%3cpath d='m6 6 12 12'/%3e%3c/svg%3e");
}

.icon-fallback.icon-exclamation-triangle {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3cline x1='12' x2='12.01' y1='17' y2='17'/%3e%3c/svg%3e");
}

.icon-fallback.icon-minus {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12h14'/%3e%3c/svg%3e");
}

.icon-fallback.icon-plus {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 5v14m-7-7h14'/%3e%3c/svg%3e");
}

.icon-fallback.icon-sign-out-alt {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3e%3cpolyline points='16,17 21,12 16,7'/%3e%3cline x1='21' x2='9' y1='12' y2='12'/%3e%3c/svg%3e");
}

.icon-fallback.icon-bars {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='4' x2='20' y1='12' y2='12'/%3e%3cline x1='4' x2='20' y1='6' y2='6'/%3e%3cline x1='4' x2='20' y1='18' y2='18'/%3e%3c/svg%3e");
}

.icon-fallback.icon-file-circle-xmark {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3e%3cpolyline points='14,2 14,8 20,8'/%3e%3ccircle cx='12' cy='16' r='4'/%3e%3cpath d='M10 14l4 4m0-4l-4 4'/%3e%3c/svg%3e");
}

/* ===== Icon Size Classes ===== */
.icon-xs {
    font-size: 0.75rem; /* 12px */
}

.icon-sm {
    font-size: 0.875rem; /* 14px */
}

.icon-base {
    font-size: 1rem; /* 16px */
}

.icon-lg {
    font-size: 1.125rem; /* 18px */
}

.icon-xl {
    font-size: 1.25rem; /* 20px */
}

.icon-2xl {
    font-size: 1.5rem; /* 24px */
}

.icon-3xl {
    font-size: 1.875rem; /* 30px */
}

.icon-4xl {
    font-size: 2.25rem; /* 36px */
}

.icon-5xl {
    font-size: 3rem; /* 48px */
}

.icon-6xl {
    font-size: 3.75rem; /* 60px */
}

/* ===== Icon Animation Classes ===== */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

.icon-bounce {
    animation: icon-bounce 1s ease-in-out infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ===== Icon Color Classes ===== */
.icon-primary {
    color: var(--color-black, #000000);
}

.icon-secondary {
    color: var(--color-gray-600, #4b5563);
}

.icon-muted {
    color: var(--color-gray-400, #9ca3af);
}

.icon-success {
    color: var(--color-green-500, #10b981);
}

.icon-warning {
    color: var(--color-yellow-500, #f59e0b);
}

.icon-error {
    color: var(--color-red-500, #ef4444);
}

.icon-info {
    color: var(--color-blue-500, #3b82f6);
}

.icon-white {
    color: #ffffff;
}

/* ===== Responsive Icon Sizes ===== */
@media (max-width: 640px) {
    .icon-responsive {
        font-size: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .icon-responsive {
        font-size: 1.125rem;
    }
}

@media (min-width: 1025px) {
    .icon-responsive {
        font-size: 1.25rem;
    }
}