/* ============================================
   HOSTFLOW ICON SYSTEM
   Professional SVG Icons (Lucide-style)
   ============================================ */

/* Base Icon Styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon svg {
    width: 100%;
    height: 100%;
}

/* Icon Sizes */
.icon-xs { font-size: 12px; }
.icon-sm { font-size: 16px; }
.icon-md { font-size: 20px; }
.icon-lg { font-size: 24px; }
.icon-xl { font-size: 32px; }
.icon-2xl { font-size: 40px; }
.icon-3xl { font-size: 48px; }

/* Icon in navigation */
.nav-icon {
    font-size: 18px;
    display: inline-flex;
    width: 20px;
    justify-content: center;
}

/* Icon in stat cards */
.stat-icon {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    color: var(--green-primary);
}

.stat-card.income .stat-icon { color: var(--green-primary); }
.stat-card.expenses .stat-icon { color: var(--red); }
.stat-card.mileage .stat-icon { color: var(--blue); }
.stat-card.profit .stat-icon { color: var(--green-light); }
.stat-card.property-costs .stat-icon { color: #8B5CF6; }

/* Feature card icons */
.feature-icon {
    font-size: 40px;
    margin-bottom: 16px;
    color: var(--green-primary);
}

/* Tip/Banner icons */
.tip-icon,
.banner-icon,
.pending-icon,
.email-icon {
    font-size: 24px;
    flex-shrink: 0;
}

/* Logo icon */
.logo-icon {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Platform icons */
.platform-logo {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

/* Capture/upload icons */
.capture-icon,
.upload-icon,
.capture-big-icon {
    font-size: 24px;
    color: var(--text-secondary);
}

.capture-big-icon {
    font-size: 48px;
}

/* Empty state icons */
.empty-icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Button icons - inline with text */
.btn .icon {
    margin-right: 6px;
}

/* Transaction/receipt icons */
.transaction-icon,
.receipt-icon,
.pending-receipt-thumb {
    font-size: 20px;
}

/* Action button icons */
.action-btn .icon {
    font-size: 16px;
}

/* Modal header icons */
.modal-header h2 .icon {
    margin-right: 8px;
}

/* Timer display */
.hero-cta-icon {
    font-size: 20px;
    margin-right: 8px;
}

/* ============================================
   INLINE SVG ICON COMPONENTS
   Copy these SVGs where needed in HTML
   ============================================ */

/* 
   Usage in HTML:
   <span class="icon icon-md"><svg>...</svg></span>
   
   Or use the icon-* classes with background-image for simpler usage
*/

/* Icon color variations */
.icon-green { color: var(--green-primary); }
.icon-red { color: var(--red); }
.icon-blue { color: var(--blue); }
.icon-yellow { color: var(--yellow); }
.icon-muted { color: var(--text-muted); }
.icon-white { color: white; }

/* SVG in buttons should inherit color */
.btn svg {
    vertical-align: middle;
}

.btn-primary svg {
    stroke: white;
}

/* Card header inline SVG styling */
.card-header h3 svg {
    vertical-align: -3px;
    margin-right: 8px;
}

/* Navigation SVG icons */
.nav-icon svg {
    stroke: currentColor;
}

.nav-link.active .nav-icon svg {
    stroke: white;
}

/* Stat card SVG icons */
.stat-icon svg {
    stroke: currentColor;
}

/* Platform logo SVG */
.platform-logo svg {
    stroke: var(--text-secondary);
}

/* Upload area icons */
.upload-icon svg,
.capture-icon svg,
.empty-icon svg {
    stroke: var(--text-muted);
}

/* Tip icons */
.tip-icon svg {
    stroke: var(--green-primary);
}

/* Banner icons */
.banner-icon svg,
.email-icon svg {
    stroke: var(--green-primary);
}

/* Success icons */
.success-icon svg {
    stroke: var(--green-primary);
}

/* Modal titles with icons */
.modal-header h2 svg {
    vertical-align: -4px;
    margin-right: 8px;
}