/* Lucide icon system for the dazos layout (CRM-3746). Hand-authored; the sprite and lucide.mask.css are generated.
   ONE way to render an icon: {dz_icon('pencil')} (Smarty), $this->Icon->render('pencil') (CakePHP),
   DZIcon.render('pencil') (JS). Every helper emits:
     <svg class="dz-icon [dz-icon-20] ..." data-icon="pencil" aria-hidden="true" focusable="false"><use href="…sprite.svg?v=…#pencil"/></svg>
   Presentation attributes live HERE, not in the sprite: content cloned through <use> inherits from the
   consuming <svg>, and Lucide's stroke settings sit on the root element that a <symbol> loses. */

.dz-icon {
  display: inline-block;
  width: 1.25em;            /* em-based by default so icons follow the text size like the fonts did */
  height: 1.25em;
  vertical-align: -0.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;     /* single colour from the surrounding text / theme token, light and dark */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Design-system sizes (README §4): 16 inline / dense tables · 20 buttons, nav, alerts · 24 feature / empty state.
   32 and 48 exist only as legacy-compat for former fa-2x / fa-3x sites and are flagged for design review. */
.dz-icon-16 { width: 16px; height: 16px; }
.dz-icon-20 { width: 20px; height: 20px; }
.dz-icon-24 { width: 24px; height: 24px; }
.dz-icon-32 { width: 32px; height: 32px; }
.dz-icon-48 { width: 48px; height: 48px; }

/* Fixed-width column alignment (former fa-fw). */
.dz-icon-fw { width: 1.25em; height: 1.25em; }

/* Loading spinners (former fa-spin / fa-pulse): pair with the loader-circle icon. */
.dz-icon-spin { animation: dz-icon-spin 1s linear infinite; }
@keyframes dz-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Former fa-rotate-* / fa-flip-* */
.dz-icon-rotate-90  { transform: rotate(90deg); }
.dz-icon-rotate-180 { transform: rotate(180deg); }
.dz-icon-rotate-270 { transform: rotate(270deg); }
.dz-icon-flip-h { transform: scaleX(-1); }
.dz-icon-flip-v { transform: scaleY(-1); }

/* Icon rendered for an unknown name: keeps the box so layouts do not collapse; visible only in debug mode. */
.dz-icon-missing { }
.dz-icon-debug .dz-icon-missing { outline: 2px dashed #d32f2f; outline-offset: 1px; }

/* Universal icon button from assets/navigation-chrome-rules.md: 38×38 (36 in dense bars), 8px radius,
   transparent, 20px icon in the secondary-text role; active/open = accentSoft background + accent icon.
   The chrome redesign tickets (CRM-3240 / CRM-3241) consume this; colours fall back to the design-system defaults. */
.dz-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #5a6a7a);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dz-icon-btn.dz-dense { width: 36px; height: 36px; }
.dz-icon-btn .dz-icon { width: 20px; height: 20px; }
.dz-icon-btn:hover { background: var(--color-bg, #f4f6f8); }
.dz-icon-btn:focus-visible { outline: 2px solid var(--color-main, #008ce0); outline-offset: 2px; }
.dz-icon-btn.active,
.dz-icon-btn[aria-expanded="true"] {
  background: var(--color-main-light, #e1f3fc);
  color: var(--color-main, #008ce0);
}

/* QA aid: DZIcon.debug() (or ?dzicondebug=1 outside production) flags leftover legacy icon markup in red. */
.dz-legacy-icon-flag {
  outline: 2px solid #d32f2f !important;
  outline-offset: 1px;
  background: rgba(211, 47, 47, .18) !important;
}