/* ===================================
   VISTAPHANTOR - ICON REFERENCE CSS
   Comprehensive icon documentation and utilities
   =================================== */

/* Bootstrap Icons (bi-) - Primary sidebar icons */
/* Navigation & Controls */
.bi-list { }                    /* Hamburger menu */
.bi-x { }                       /* Close button */
.bi-x-lg { }                    /* Large close button */
.bi-arrow-bar-left { }          /* Collapse sidebar */
.bi-arrow-bar-right { }         /* Expand sidebar */
.bi-pin-angle { }               /* Unpinned state */
.bi-pin-angle-fill { }          /* Pinned state */
.bi-chevron-down { }            /* Dropdown closed */
.bi-chevron-up { }              /* Dropdown open */

/* Main Navigation */
.bi-house-door { }              /* Home/Dashboard */
.bi-search { }                  /* Search functionality */
.bi-building { }                /* Properties/Buildings */
.bi-bank { }                    /* Banking/Finance */
.bi-film { }                    /* Video content */
.bi-camera-video { }            /* Video uploads */
.bi-collection-play { }         /* Video collections */
.bi-person { }                  /* User profile */
.bi-person-plus { }             /* User management */
.bi-gear { }                    /* Settings */
.bi-envelope { }                /* Messages/Support */
.bi-briefcase { }               /* Business tools */
.bi-chat-dots { }               /* Chat/Support */
.bi-life-preserver { }          /* Help/Support */
.bi-box-arrow-right { }         /* Logout */

/* Additional Sidebar Icons */
.bi-calendar { }                /* Calendar/Events */
.bi-graph-up { }                /* Analytics/Charts */
.bi-file-earmark { }            /* Documents */
.bi-credit-card { }             /* Payments */
.bi-tools { }                   /* Maintenance */
.bi-shield-check { }            /* Security */
.bi-bell { }                    /* Notifications */
.bi-star { }                    /* Favorites */
.bi-heart { }                   /* Likes */
.bi-share { }                   /* Share */
.bi-download { }                /* Download */
.bi-upload { }                  /* Upload */
.bi-folder { }                  /* Folders */
.bi-image { }                   /* Images */
.bi-camera { }                  /* Camera */
.bi-phone { }                   /* Phone */
.bi-globe { }                   /* Website */
.bi-linkedin { }                /* LinkedIn */
.bi-facebook { }                /* Facebook */
.bi-twitter { }                 /* Twitter */
.bi-instagram { }               /* Instagram */

/* Status & Feedback */
.bi-check-circle { }            /* Success */
.bi-exclamation-triangle { }    /* Warning/Error */
.bi-info-circle { }             /* Information */
.bi-moon-fill { }               /* Dark mode enabled */
.bi-sun { }                     /* Light mode */

/* Boxicons (bx-) - Alternative icon set */
/* Additional sidebar options */
.bx-home { }                    /* Alternative home icon */
.bx-search { }                  /* Alternative search */
.bx-building { }                 /* Alternative building */
.bx-user { }                    /* Alternative user */
.bx-cog { }                     /* Alternative settings */
.bx-envelope { }                /* Alternative envelope */
.bx-briefcase { }               /* Alternative briefcase */
.bx-chat { }                    /* Alternative chat */
.bx-help-circle { }             /* Alternative help */
.bx-log-out { }                 /* Alternative logout */

/* Additional Boxicons */
.bx-calendar { }                /* Calendar */
.bx-chart { }                   /* Charts */
.bx-file { }                    /* Files */
.bx-credit-card { }             /* Credit card */
.bx-wrench { }                  /* Tools */
.bx-shield { }                  /* Shield */
.bx-bell { }                    /* Bell */
.bx-star { }                    /* Star */
.bx-heart { }                   /* Heart */
.bx-share { }                   /* Share */
.bx-download { }                /* Download */
.bx-upload { }                  /* Upload */
.bx-folder { }                  /* Folder */
.bx-image { }                   /* Image */
.bx-camera { }                  /* Camera */
.bx-phone { }                   /* Phone */
.bx-globe { }                   /* Globe */
.bx-linkedin { }                /* LinkedIn */
.bx-facebook { }                /* Facebook */
.bx-twitter { }                 /* Twitter */
.bx-instagram { }               /* Instagram */

/* Font Awesome (fa-) - Extended icon support */
/* Enhanced sidebar features */
.fa-home { }                    /* Font Awesome home */
.fa-search { }                  /* Font Awesome search */
.fa-building { }                /* Font Awesome building */
.fa-user { }                    /* Font Awesome user */
.fa-cog { }                     /* Font Awesome settings */
.fa-envelope { }                /* Font Awesome envelope */
.fa-briefcase { }               /* Font Awesome briefcase */
.fa-comments { }                /* Font Awesome chat */
.fa-question-circle { }         /* Font Awesome help */
.fa-sign-out-alt { }            /* Font Awesome logout */

/* Additional Font Awesome Icons */
.fa-calendar { }                /* Calendar */
.fa-chart-line { }              /* Charts */
.fa-file { }                    /* File */
.fa-credit-card { }             /* Credit card */
.fa-wrench { }                  /* Wrench */
.fa-shield-alt { }              /* Shield */
.fa-bell { }                    /* Bell */
.fa-star { }                    /* Star */
.fa-heart { }                   /* Heart */
.fa-share { }                   /* Share */
.fa-download { }                /* Download */
.fa-upload { }                  /* Upload */
.fa-folder { }                  /* Folder */
.fa-image { }                   /* Image */
.fa-camera { }                  /* Camera */
.fa-phone { }                   /* Phone */
.fa-globe { }                   /* Globe */
.fa-linkedin { }                /* LinkedIn */
.fa-facebook { }                /* Facebook */
.fa-twitter { }                 /* Twitter */
.fa-instagram { }               /* Instagram */

/* Remix Icons (ri-) - Modern icon set */
/* Contemporary sidebar elements */
.ri-home-line { }               /* Remix home */
.ri-search-line { }             /* Remix search */
.ri-building-line { }           /* Remix building */
.ri-user-line { }               /* Remix user */
.ri-settings-line { }           /* Remix settings */
.ri-mail-line { }               /* Remix mail */
.ri-briefcase-line { }          /* Remix briefcase */
.ri-chat-line { }               /* Remix chat */
.ri-question-line { }           /* Remix help */
.ri-logout-box-line { }         /* Remix logout */

/* Additional Remix Icons */
.ri-calendar-line { }           /* Calendar */
.ri-bar-chart-line { }          /* Charts */
.ri-file-line { }               /* File */
.ri-bank-card-line { }          /* Bank card */
.ri-tools-line { }              /* Tools */
.ri-shield-line { }             /* Shield */
.ri-notification-line { }       /* Notification */
.ri-star-line { }               /* Star */
.ri-heart-line { }              /* Heart */
.ri-share-line { }              /* Share */
.ri-download-line { }           /* Download */
.ri-upload-line { }             /* Upload */
.ri-folder-line { }             /* Folder */
.ri-image-line { }              /* Image */
.ri-camera-line { }             /* Camera */
.ri-phone-line { }              /* Phone */
.ri-global-line { }             /* Global */
.ri-linkedin-line { }           /* LinkedIn */
.ri-facebook-line { }           /* Facebook */
.ri-twitter-line { }            /* Twitter */
.ri-instagram-line { }          /* Instagram */

/* Icon Utility Classes */
.icon-sm { font-size: 0.875rem; }
.icon-md { font-size: 1rem; }
.icon-lg { font-size: 1.125rem; }
.icon-xl { font-size: 1.25rem; }
.icon-2xl { font-size: 1.5rem; }

/* Icon Colors */
.icon-primary { color: #3b82f6; }
.icon-secondary { color: #6b7280; }
.icon-success { color: #10b981; }
.icon-warning { color: #f59e0b; }
.icon-danger { color: #ef4444; }
.icon-info { color: #06b6d4; }

/* Icon Hover Effects */
.icon-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.icon-spin {
    animation: icon-spin 2s linear infinite;
}

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

/* Icon Loading States */
.icon-loading {
    opacity: 0.6;
    animation: icon-pulse 1.5s ease-in-out infinite;
}

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

/* Dark Mode Icon Adjustments */
.dark .icon-secondary {
    color: #9ca3af;
}

.dark .icon-primary {
    color: #60a5fa;
}

/* Responsive Icon Sizing */
@media (max-width: 768px) {
    .icon-xl { font-size: 1.125rem; }
    .icon-2xl { font-size: 1.25rem; }
}

@media (max-width: 480px) {
    .icon-lg { font-size: 1rem; }
    .icon-xl { font-size: 1.125rem; }
}

/* Icon Accessibility */
.icon-accessible {
    position: relative;
}

.icon-accessible::after {
    content: attr(aria-label);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
    margin-left: 0.5rem;
}

.icon-accessible:hover::after {
    opacity: 1;
}

/* Icon Animation Variants */
.icon-bounce {
    animation: icon-bounce 1s infinite;
}

@keyframes icon-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

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

@keyframes icon-wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

/* Sidebar Icon Specific Styles */
.sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.sidebar-icon:hover {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.sidebar-icon.active {
    background-color: #3b82f6;
    color: white;
}

/* Icon Fallback System */
.icon-fallback {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Fallback for when icon fonts fail to load */
.icon-fallback.bi-house-door {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z'/%3E%3C/svg%3E");
}

.icon-fallback.bi-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.098zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

.icon-fallback.bi-building {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 11.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3C/svg%3E");
}