/* ==========================================================================
   Icons — single class for inline Lucide SVG icons
   Usage:
     <span class="icon" data-icon="settings"></span>
     <span class="icon icon-sm" data-icon="check"></span>
   The JS helper (assets/js/icons.js) injects the SVG path on init.
   ========================================================================== */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    flex-shrink: 0;
    line-height: 1;
    color: currentColor;
}

.icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sizes — based on font-size of the parent (em-relative) */
.icon-xs { font-size: 12px; }
.icon-sm { font-size: 14px; }
.icon-md { font-size: 16px; }   /* default for buttons/inputs */
.icon-lg { font-size: 20px; }
.icon-xl { font-size: 24px; }
.icon-2xl { font-size: 32px; }

/* Variants */
.icon-muted   { color: var(--text-muted); }
.icon-success { color: var(--success); }
.icon-warning { color: var(--warning); }
.icon-danger  { color: var(--danger); }
.icon-info    { color: var(--info); }
.icon-brand   { color: var(--brand); }

/* Filled wrapper variant — used in empty-states, alert leads */
.icon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-secondary);
}
.icon-pill .icon { font-size: 18px; }
.icon-pill-lg { width: 48px; height: 48px; }
.icon-pill-lg .icon { font-size: 22px; }

.icon-pill.tone-brand   { background: var(--brand-soft); color: var(--brand); }
.icon-pill.tone-success { background: var(--success-bg); color: var(--success); }
.icon-pill.tone-warning { background: var(--warning-bg); color: var(--warning); }
.icon-pill.tone-danger  { background: var(--danger-bg);  color: var(--danger); }
.icon-pill.tone-info    { background: var(--info-bg);    color: var(--info); }

/* Status dot — 8px solid circle */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    vertical-align: middle;
    flex-shrink: 0;
}
.status-dot.tone-success { background: var(--success); }
.status-dot.tone-warning { background: var(--warning); }
.status-dot.tone-danger  { background: var(--danger); }
.status-dot.tone-info    { background: var(--info); }
.status-dot.tone-brand   { background: var(--brand); }