/**
 * SVG Icons Styling
 * Consistent styling for all SVG icons across the application
 * Replaces FontAwesome dependencies with modern SVG icons
 */

/* ======================
   BASE SVG ICON STYLES
   ====================== */

svg {
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Input Icons */
.input-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Navigation Icons */
.nav-link svg,
.user-menu-item svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Filled icons (exceptions to outline rule) */
.user-menu-item svg,
.chevron-icon {
    fill: currentColor;
    stroke: none;
}

/* Password Control Icons */
.password-toggle svg,
.password-generate svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Button Icons */
.btn svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Header Icons */
.user-avatar svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
}

.chevron-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

/* ======================
   RESPONSIVE SIZING
   ====================== */

@media (max-width: 768px) {
    .password-toggle svg,
    .password-generate svg {
        width: 14px;
        height: 14px;
    }
    
    .input-icon svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .password-toggle svg,
    .password-generate svg {
        width: 12px;
        height: 12px;
    }
    
    .input-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* ======================
   ICON STATES
   ====================== */

/* Hover states */
.nav-link:hover svg,
.user-menu-item:hover svg,
.password-toggle:hover svg,
.password-generate:hover svg {
    color: #4361EE;
}

/* Active states */
.nav-link.active svg {
    color: #4361EE;
}

/* Disabled states */
.btn:disabled svg {
    opacity: 0.5;
}

/* ======================
   ANIMATION SUPPORT
   ====================== */

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

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

/* Chevron rotation for dropdowns */
.user-menu-dropdown[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

/* ======================
   ACCESSIBILITY
   ====================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    svg {
        stroke-width: 2.5px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .spinner-icon {
        animation: none;
    }
    
    .chevron-icon {
        transition: none;
    }
}