/**
 * Icon System CSS - Lucide Icons Integration
 * Modern CSS-based icon system for Tracker Pro Analytics
 * 
 * Usage: <i data-lucide="icon-name" class="icon"></i>
 *        <i data-lucide="icon-name" class="icon icon-sm"></i>
 *        <i data-lucide="icon-name" class="icon icon-lg"></i>
 */

/* ============================================
   1. BASE ICON STYLES
   ============================================ */

/* Base icon element styles */
.icon,
[data-lucide],
svg[data-lucide],
svg.lucide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: middle;
    flex-shrink: 0;
    color: inherit;
}

/* Ensure SVG inherits color from parent */
svg[data-lucide],
svg.lucide {
    color: inherit;
}

/* ============================================
   2. ICON SIZES
   ============================================ */

/* Extra small - 12px */
.icon-xs,
.icon.icon-xs {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0.75rem;
}

/* Small - 16px */
.icon-sm,
.icon.icon-sm {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

/* Default/Medium - 20px */
.icon-md,
.icon.icon-md {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
}

/* Large - 24px */
.icon-lg,
.icon.icon-lg {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

/* Extra large - 32px */
.icon-xl,
.icon.icon-xl {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
}

/* 2X - 40px */
.icon-2x,
.icon.icon-2x {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2.5rem;
}

/* 3X - 48px */
.icon-3x,
.icon.icon-3x {
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
}

/* ============================================
   3. ICON COLORS
   ============================================ */

/* Inherit from parent (default) */
.icon-inherit {
    color: inherit;
}

/* Primary */
.icon-primary {
    color: var(--primary);
}

/* Secondary */
.icon-secondary {
    color: var(--secondary);
}

/* Accent */
.icon-accent {
    color: var(--accent);
}

/* Success */
.icon-success {
    color: var(--success);
}

/* Warning */
.icon-warning {
    color: var(--warning);
}

/* Danger/Error */
.icon-danger,
.icon-error {
    color: var(--danger, var(--error));
}

/* Info */
.icon-info {
    color: var(--info);
}

/* Muted */
.icon-muted {
    color: var(--text-muted);
}

/* White */
.icon-white {
    color: #ffffff;
}

/* ============================================
   4. ICON 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 - for notifications */
.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Bounce animation - for attention */
.icon-bounce {
    animation: icon-bounce 1s ease infinite;
}

@keyframes icon-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Shake animation - for errors/alerts */
.icon-shake {
    animation: icon-shake 0.5s ease-in-out;
}

@keyframes icon-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* ============================================
   5. ICON WITH TEXT SPACING
   ============================================ */

/* Icon before text */
.icon+span,
.icon+.text,
[data-lucide]+span,
[data-lucide]+.text {
    margin-left: 0.5rem;
}

/* Icon after text */
span+.icon,
.text+.icon,
span+[data-lucide],
.text+[data-lucide] {
    margin-left: 0.5rem;
}

/* ============================================
   6. NAVIGATION ICONS
   ============================================ */

/* Navigation link icon styling */
.nav-link .icon,
.nav-link [data-lucide] {
    width: 1.125rem;
    height: 1.125rem;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}

.nav-link:hover .icon,
.nav-link:hover [data-lucide] {
    opacity: 1;
    transform: scale(1.1);
}

.nav-link.active .icon,
.nav-link.active [data-lucide] {
    opacity: 1;
    color: var(--primary);
}

/* Dropdown menu icons */
.dropdown-item .icon,
.dropdown-item [data-lucide] {
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
    margin-right: 0.5rem;
}

.dropdown-item:hover .icon,
.dropdown-item:hover [data-lucide] {
    opacity: 1;
}

/* ============================================
   7. BUTTON ICONS
   ============================================ */

/* Button icon styling */
.btn .icon,
.btn [data-lucide],
button .icon,
button [data-lucide] {
    width: 1rem;
    height: 1rem;
}

.btn-sm .icon,
.btn-sm [data-lucide] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-lg .icon,
.btn-lg [data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Icon-only button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-icon .icon,
.btn-icon [data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   8. STATUS ICONS
   ============================================ */

/* Status indicator with icon */
.status-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.status-icon.status-success .icon {
    color: var(--success);
}

.status-icon.status-warning .icon {
    color: var(--warning);
}

.status-icon.status-error .icon {
    color: var(--danger, var(--error));
}

.status-icon.status-info .icon {
    color: var(--info);
}

/* ============================================
   9. CARD HEADER ICONS
   ============================================ */

/* Section/Card header icons */
.section-icon,
.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--primary);
}

.section-icon .icon,
.section-icon [data-lucide],
.card-icon .icon,
.card-icon [data-lucide] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   10. STAT CARD ICONS
   ============================================ */

/* Large stat card icon */
.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.stat-icon .icon,
.stat-icon [data-lucide] {
    width: 1.75rem;
    height: 1.75rem;
}

/* ============================================
   11. NOTIFICATION ICONS
   ============================================ */

/* Notification bell with badge */
.notification-bell {
    position: relative;
}

.notification-bell .icon,
.notification-bell [data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   12. TABLE ACTION ICONS
   ============================================ */

/* Table action buttons */
.action-icons {
    display: flex;
    gap: 0.5rem;
}

.action-icons .btn-icon {
    padding: 0.375rem;
}

.action-icons .btn-icon .icon,
.action-icons .btn-icon [data-lucide] {
    width: 1rem;
    height: 1rem;
}

/* Edit action */
.action-icons .btn-edit:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Delete action */
.action-icons .btn-delete:hover {
    color: var(--danger, var(--error));
    border-color: var(--danger, var(--error));
}

/* View action */
.action-icons .btn-view:hover {
    color: var(--info);
    border-color: var(--info);
}

/* ============================================
   12.1 ACTION BUTTON ICONS (action-btn class)
   ============================================ */

/* Action buttons with SVG icons */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary, #8b949e);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.action-btn svg,
.action-btn [data-lucide] {
    width: 16px;
    height: 16px;
    color: inherit;
    stroke: currentColor;
    pointer-events: none;
    /* Mouse events should pass through icon */
}

/* Primary/Default Hover */
.action-btn:hover {
    background-color: rgba(99, 102, 241, 0.1);
    /* light primary bg */
    color: var(--primary, #6366f1);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Danger Hover */
.action-btn.danger:hover {
    background-color: rgba(248, 81, 73, 0.1);
    /* light danger bg */
    color: var(--danger, #f85149);
    border-color: rgba(248, 81, 73, 0.2);
}

/* Success Hover */
.action-btn.success:hover {
    background-color: rgba(63, 185, 80, 0.1);
    /* light success bg */
    color: var(--success, #3fb950);
    border-color: rgba(63, 185, 80, 0.2);
}

/* ============================================
   13. FORM INPUT ICONS
   ============================================ */

/* Input with icon */
.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrapper .icon,
.input-icon-wrapper [data-lucide] {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    pointer-events: none;
}

.input-icon-wrapper input {
    padding-left: 2.5rem;
}

/* Icon on right */
.input-icon-wrapper.icon-right .icon,
.input-icon-wrapper.icon-right [data-lucide] {
    left: auto;
    right: 0.75rem;
}

.input-icon-wrapper.icon-right input {
    padding-left: 1rem;
    padding-right: 2.5rem;
}

/* ============================================
   14. EMPTY STATE ICONS
   ============================================ */

/* Large centered empty state icon */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--glass);
    color: var(--text-muted);
}

.empty-state-icon .icon,
.empty-state-icon [data-lucide] {
    width: 2rem;
    height: 2rem;
}

/* ============================================
   15. TOOLTIP/BADGE ICONS
   ============================================ */

/* Icon badge (small indicator) */
.icon-badge {
    position: relative;
    display: inline-flex;
}

.icon-badge::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger, var(--error));
}

.icon-badge.badge-success::after {
    background: var(--success);
}

.icon-badge.badge-warning::after {
    background: var(--warning);
}

/* ============================================
   16. MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {

    /* Slightly larger icons on mobile for better touch targets */
    .nav-link .icon,
    .nav-link [data-lucide] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .btn-icon {
        padding: 0.625rem;
    }

    .btn-icon .icon,
    .btn-icon [data-lucide] {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ============================================
   17. UTILITY CLASSES
   ============================================ */

/* Flip horizontally */
.icon-flip-x {
    transform: scaleX(-1);
}

/* Flip vertically */
.icon-flip-y {
    transform: scaleY(-1);
}

/* Rotate 90deg */
.icon-rotate-90 {
    transform: rotate(90deg);
}

/* Rotate 180deg */
.icon-rotate-180 {
    transform: rotate(180deg);
}

/* Rotate 270deg */
.icon-rotate-270 {
    transform: rotate(270deg);
}

/* Inline icon (for text) */
.icon-inline {
    display: inline;
    vertical-align: -0.125em;
}