/**
 * Fluent UI System Icons - SVG Icon Styles
 * Replaces Font Awesome CDN dependency with inline SVGs
 * Source: https://github.com/microsoft/fluentui-system-icons (MIT License)
 */

/* Base icon styling */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    fill: currentColor;
    width: 1em;
    height: 1em;
    line-height: 1;
}

/* Icon sizing classes */
.icon-xs {
    width: 12px;
    height: 12px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

.icon-2xl {
    width: 48px;
    height: 48px;
}

/* Icon colors */
.icon-primary {
    color: #107c10;
}

.icon-secondary {
    color: #6c757d;
}

.icon-success {
    color: #28a745;
}

.icon-warning {
    color: #f39c12;
}

.icon-danger {
    color: #dc3545;
}

.icon-info {
    color: #17a2b8;
}

.icon-muted {
    color: rgba(255, 255, 255, 0.5);
}

/* Light mode adjustments */
.light-mode .icon-muted {
    color: rgba(0, 0, 0, 0.5);
}

/* Spinner animation */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

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

/* Icon spacing in text */
.icon + span,
span + .icon,
.icon + a,
a + .icon {
    margin-left: 0.4em;
}

/* Button icons */
.btn .icon {
    margin-right: 0.4em;
}

.btn .icon:last-child {
    margin-right: 0;
}

/* Nav link icons */
.nav-link .icon {
    margin-right: 0.5em;
    opacity: 0.9;
}

/* Dropdown item icons */
.dropdown-item .icon {
    margin-right: 0.5em;
    opacity: 0.8;
}

/* Icon in headers */
h1 .icon,
h2 .icon,
h3 .icon,
h4 .icon {
    margin-right: 0.3em;
}

/* Feature card icons */
.feature-icon .icon {
    width: 3rem;
    height: 3rem;
}

/* Login logo icon */
.login-logo .icon {
    width: 48px;
    height: 48px;
}

/* User avatar icon */
.user-avatar .icon,
.user-avatar-large .icon {
    width: 100%;
    height: 100%;
}

/* Template preview icons */
.template-preview .icon {
    width: 40px;
    height: 40px;
}

/* Capability item icons */
.capability-item .icon {
    width: 2rem;
    height: 2rem;
    color: #107c10;
    margin-bottom: 10px;
}

/* Request icon styling */
.request-icon.completed {
    color: #28a745;
}

.request-icon.in-progress {
    color: #17a2b8;
}

.request-icon.pending {
    color: #f39c12;
}

/* Schedule card icons */
.schedule-card .icon {
    color: #107c10;
}

/* Suggested question icons */
.suggested-question .icon {
    margin-right: 0.5em;
    opacity: 0.8;
}

/* Error state icons */
.error-state .icon {
    font-size: 4rem;
    margin-bottom: 2rem;
}

/* No dashboard selected icons */
.no-dashboard-selected .icon {
    width: 64px;
    height: 64px;
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Dashboard tile icons */
.dashboard-tile .icon {
    margin-right: 0.5em;
}

/* Modal close button */
.modal-close .icon {
    width: 20px;
    height: 20px;
}

/* Access badge icons */
.access-badge .icon {
    margin-right: 0.3em;
}

/* Form label icons */
.form-group label .icon {
    margin-right: 0.3em;
    opacity: 0.8;
}

/* Button-only icons (no margin) */
.btn-icon-only .icon {
    margin: 0;
}

/* Control button icons */
.control-btn .icon {
    width: 20px;
    height: 20px;
}

/* Send button icon */
.send-btn .icon {
    width: 20px;
    height: 20px;
}