/**
 * LakásŐr - Icon System Styles
 * Consistent styling for SVG icons across the app
 */

/* ==========================================================================
   Base Icon Styles
   ========================================================================== */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Size variants */
.icon-xs { width: 0.75rem; height: 0.75rem; }      /* 12px */
.icon-sm { width: 1rem; height: 1rem; }            /* 16px */
.icon-md { width: 1.25rem; height: 1.25rem; }      /* 20px */
.icon-base { width: 1.5rem; height: 1.5rem; }      /* 24px - default */
.icon-lg { width: 2rem; height: 2rem; }            /* 32px */
.icon-xl { width: 2.5rem; height: 2.5rem; }        /* 40px */
.icon-2xl { width: 3rem; height: 3rem; }           /* 48px */
.icon-3xl { width: 4rem; height: 4rem; }           /* 64px */

/* Stroke width variants */
.icon-thin { stroke-width: 1; }
.icon-light { stroke-width: 1.5; }
.icon-regular { stroke-width: 2; }
.icon-bold { stroke-width: 2.5; }

/* Color variants */
.icon-primary { color: var(--color-primary); }
.icon-secondary { color: var(--color-text-secondary); }
.icon-muted { color: var(--color-text-muted); }
.icon-success { color: var(--color-success); }
.icon-warning { color: var(--color-warning); }
.icon-danger { color: var(--color-danger); }
.icon-info { color: var(--color-info); }

/* ==========================================================================
   Icon Containers
   ========================================================================== */

/* Rounded icon container */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    /* Prevent distortion and overflow on mobile */
    flex-shrink: 0;
    min-width: 2.5rem;
    min-height: 2.5rem;
    line-height: 1;
    vertical-align: middle;
}

.icon-box .icon {
    flex-shrink: 0;
}

.icon-box-sm {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    min-width: 2rem;
    min-height: 2rem;
}

.icon-box-lg {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    min-width: 3rem;
    min-height: 3rem;
}

/* Colored icon boxes */
.icon-box-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.icon-box-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.icon-box-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.icon-box-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.icon-box-info {
    background: var(--color-info-light);
    color: var(--color-info);
}

/* Circle variant */
.icon-circle {
    border-radius: var(--radius-full);
    /* Ensure perfect circle - equal width and height */
    aspect-ratio: 1;
    box-sizing: content-box;
}

/* ==========================================================================
   Button Icons
   ========================================================================== */

/* Icon inside button */
.btn .icon {
    width: 1.125em;
    height: 1.125em;
    margin-right: var(--space-2);
    margin-left: calc(var(--space-1) * -1);
}

/* Icon-only button */
.btn-icon {
    padding: var(--space-2);
    aspect-ratio: 1;
}

.btn-icon .icon {
    margin: 0;
}

/* Icon after text */
.btn .icon-right {
    margin-right: calc(var(--space-1) * -1);
    margin-left: var(--space-2);
}

/* ==========================================================================
   Card & Section Icons
   ========================================================================== */

/* Large decorative icon for cards */
.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
}

.card-icon .icon {
    width: 2rem;
    height: 2rem;
}

/* Section header icon */
.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: var(--space-3);
    color: var(--color-primary);
    flex-shrink: 0;
}

.section-icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* ==========================================================================
   Tab Bar Icons
   ========================================================================== */

.tab-bar-item .icon {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 1.75;
    transition: transform 0.2s ease;
}

.tab-bar-item.active .icon {
    stroke-width: 2.25;
}

.tab-bar-item:active .icon {
    transform: scale(0.9);
}

/* ==========================================================================
   Navbar Icons
   ========================================================================== */

.navbar-brand .icon {
    width: 1.75rem;
    height: 1.75rem;
}

/* ==========================================================================
   Hero Visual Icons
   ========================================================================== */

.hero-visual .icon {
    width: 6rem;
    height: 6rem;
    stroke-width: 1.25;
    color: var(--color-primary);
    opacity: 0.85;
}

@media (min-width: 768px) {
    .hero-visual .icon {
        width: 8rem;
        height: 8rem;
    }
}

/* ==========================================================================
   Feature Cards
   ========================================================================== */

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-4);
    background: var(--color-primary-light);
    border-radius: var(--radius-xl);
    color: var(--color-primary);
}

.feature-icon .icon {
    width: 1.75rem;
    height: 1.75rem;
}

/* ==========================================================================
   Why Section Icons
   ========================================================================== */

.why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, var(--color-primary-light), transparent);
    border-radius: var(--radius-xl);
    color: var(--color-primary);
}

.why-icon .icon {
    width: 2rem;
    height: 2rem;
}

/* ==========================================================================
   Status Icons
   ========================================================================== */

/* Risk level icons */
.risk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.risk-icon-low { color: var(--color-success); }
.risk-icon-medium { color: var(--color-warning); }
.risk-icon-high { color: var(--color-danger); }

/* Toast notification icons */
.toast-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Calculator Section Icons
   ========================================================================== */

.calc-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.calc-section-icon .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
}

/* ==========================================================================
   Animations
   ========================================================================== */

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

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

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

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

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Ensure icons don't affect line height negatively */
.icon {
    line-height: 0;
}

/* Hidden icons for screen readers when decorative */
.icon[aria-hidden="true"] {
    pointer-events: none;
}

/* Focus visible for interactive icons */
button .icon,
a .icon {
    pointer-events: none;
}

/* ==========================================================================
   Dark Mode Adjustments
   ========================================================================== */

[data-theme="dark"] .icon-box {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .icon-box-primary {
    background: rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] .icon-box-success {
    background: rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .icon-box-warning {
    background: rgba(234, 179, 8, 0.15);
}

[data-theme="dark"] .icon-box-danger {
    background: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .icon-box-info {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .why-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), transparent);
}

[data-theme="dark"] .feature-icon {
    background: rgba(99, 102, 241, 0.15);
}

/* ==========================================================================
   Mobile Responsive - Icon Box in Flex Containers
   ========================================================================== */

@media (max-width: 640px) {
    /* Prevent icon-box from shrinking in flex containers */
    .flex .icon-box,
    .flex-col .icon-box,
    .card .icon-box {
        flex-shrink: 0;
    }
    
    /* Ensure icon-box-lg doesn't become too large on small screens */
    .icon-box-lg {
        padding: var(--space-3);
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
    
    /* Adjust icon size inside icon-box for mobile */
    .icon-box .icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .icon-box-lg .icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ==========================================================================
   Severity Dots (for contract analyzer)
   ========================================================================== */

.severity-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}

.severity-dot.high {
    background-color: #ef4444;
}

.severity-dot.medium {
    background-color: #f59e0b;
}

.severity-dot.low {
    background-color: #22c55e;
}