/*
 * Loan System — Icon Fallback CSS
 * Uses CSS custom properties + inline SVG so icons work even if Font Awesome CDN fails.
 * These supplement Font Awesome — if FA loads, it takes priority.
 * If FA fails, these SVG icons render correctly.
 */

/* ── Base icon class ── */
.ls-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em; height: 1em;
    vertical-align: middle;
    fill: currentColor;
}

/* ── SVG icon data URIs used as pseudo-element backgrounds ── */
/* These override ONLY when Font Awesome fails to load the glyph */

/* Navigation icons */
.fa-house::before,
.fa-home::before        { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' width='14' height='14'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }

/* Fallback: use Unicode symbols when SVG fails */
/* These appear as text characters that look similar to icons */
.ls-icon-home::before    { content: "⌂"; font-family: Arial, sans-serif; }
.ls-icon-money::before   { content: "৳"; font-family: Arial, sans-serif; }
.ls-icon-card::before    { content: "💳"; font-family: Arial, sans-serif; }
.ls-icon-help::before    { content: "❓"; font-family: Arial, sans-serif; }
.ls-icon-user::before    { content: "👤"; font-family: Arial, sans-serif; }
.ls-icon-check::before   { content: "✓"; font-family: Arial, sans-serif; }
.ls-icon-times::before   { content: "✕"; font-family: Arial, sans-serif; }
.ls-icon-bell::before    { content: "🔔"; font-family: Arial, sans-serif; }
.ls-icon-lock::before    { content: "🔒"; font-family: Arial, sans-serif; }
.ls-icon-eye::before     { content: "👁"; font-family: Arial, sans-serif; }
.ls-icon-arrow-r::before { content: "→"; font-family: Arial, sans-serif; }
.ls-icon-arrow-l::before { content: "←"; font-family: Arial, sans-serif; }
.ls-icon-spinner::before { content: "⟳"; font-family: Arial, sans-serif; }
.ls-icon-camera::before  { content: "📷"; font-family: Arial, sans-serif; }
.ls-icon-sign::before    { content: "✍"; font-family: Arial, sans-serif; }
.ls-icon-bank::before    { content: "🏦"; font-family: Arial, sans-serif; }
.ls-icon-send::before    { content: "✉"; font-family: Arial, sans-serif; }
.ls-icon-warn::before    { content: "⚠"; font-family: Arial, sans-serif; }
.ls-icon-info::before    { content: "ℹ"; font-family: Arial, sans-serif; }
.ls-icon-clock::before   { content: "⏱"; font-family: Arial, sans-serif; }
.ls-icon-download::before{ content: "⬇"; font-family: Arial, sans-serif; }
.ls-icon-refresh::before { content: "↻"; font-family: Arial, sans-serif; }
.ls-icon-star::before    { content: "★"; font-family: Arial, sans-serif; }
.ls-icon-shield::before  { content: "🛡"; font-family: Arial, sans-serif; }

/* ── Bottom nav icon text fallbacks (show text if FA fails) ── */
.ls-nav-item i:empty::after { content: attr(data-icon-text); font-style: normal; font-size: .8rem; }

/* ── Spinner animation for loading states ── */
@keyframes ls-fa-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fa-spin, .ls-spin    { animation: ls-fa-spin .8s linear infinite !important; display: inline-block; }

/* ── Button loader fallback ── */
.ls-btn-loader i.fa-spinner:empty::before { content: "⟳"; }

/* ── Ensure nav icons visible even without FA ── */
.ls-nav-item .fas,
.ls-nav-item .far,
.ls-nav-item .fab {
    min-width: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Icon sizing consistency ── */
.ls-form-section-title i,
.ls-menu-icon i,
.ls-status-icon i,
.ls-notif-icon i,
.ls-empty-icon i,
.ls-stat-icon i {
    font-size: inherit;
    line-height: 1;
}

/* ── Upload box icon ── */
.ls-upload-placeholder i.fa-camera-plus::before,
.ls-upload-placeholder i.fa-camera-plus {
    display: block;
    font-size: 1.6rem;
    color: var(--ls-primary);
    opacity: .6;
}

/* ── Alert icons ── */
.ls-alert::before {
    display: inline-block;
    margin-right: 6px;
    font-family: Arial, sans-serif;
}
.ls-alert-success::before { content: "✓ "; color: #155724; }
.ls-alert-danger::before  { content: "! "; color: #721c24; }
.ls-alert-warning::before { content: "⚠ "; color: #856404; }
.ls-alert-info::before    { content: "ℹ "; color: #0c5460; }