/* Lucide Icons — base styles (load BEFORE component CSS so overrides work) */
/* Lucide's createIcons() replaces <i data-lucide="x"> with <svg class="lucide lucide-x">.
   After replacement the <i> is GONE — the <svg> is the element.
   So we style .lucide (the SVG) with safe fixed defaults, not 100%. */

/* Pre-processed state: <i data-lucide> still exists, SVG is a child */
[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    line-height: 1;
}

/* The SVG itself (both pre- and post-processed).
   IMPORTANT: Use fixed pixel sizes, NOT 100% — after createIcons() runs
   the <i> wrapper is gone and 100% would fill the parent container
   (which can be a <button>, <span>, <td>, etc.), making icons massive. */
[data-lucide] > .lucide,
.lucide {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}