/* ============================================================
   EAZYDEV handcrafted icon system — global styling.

   Loaded by base.html, public_base.html, platform_admin/base.html.
   Pairs with stock/templatetags/ez_icons.py +
   template/icons/_dispatch.html.

   Every glyph inherits its color from `currentColor`, so the
   utilities below set color (or background) only — never override
   stroke widths or stroke-linecap/linejoin.
============================================================ */

:root {
    --ez-brand-500: #6366f1;
    --ez-brand-600: #5b5cf0;
    --ez-brand-700: #4f46e5;
    --ez-brand-violet: #8b5cf6;
    --ez-success: #16a34a;
    --ez-warning: #f59e0b;
    --ez-danger:  #dc2626;
}

/* Base glyph — inline-block so it sits cleanly next to text. */
.ez-ico {
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
    line-height: 1;
    color: currentColor;
}

/* Size modifiers (default size comes from the {% ez_icon %} tag). */
.ez-ico-lg { width: 28px;  height: 28px;  }
.ez-ico-xl { width: 36px;  height: 36px;  }

/* Orientation modifiers.
 * .ez-ico--flip mirrors an icon horizontally — used to turn the shared
 * "arrow-right" glyph into a left-pointing "Back / Previous" arrow.
 * (Referenced by ~12 templates incl. the reviews carousel prev button.) */
.ez-ico--flip     { transform: scaleX(-1); }
.ez-ico--rotate90 { transform: rotate(90deg); }
.ez-ico--flip-up  { transform: rotate(-90deg); }   /* turn arrow-right into an up arrow */

/* Color modifiers — use these on the <svg class="ez-ico ..."> directly. */
.ez-ico--brand    { color: var(--ez-brand-600); }
.ez-ico--success  { color: var(--ez-success);   }
.ez-ico--warning  { color: var(--ez-warning);   }
.ez-ico--danger   { color: var(--ez-danger);    }
.ez-ico--muted    { color: rgba(15, 23, 42, 0.55); }
.ez-ico--white    { color: #ffffff; }

/* Decorative "tile" — 40x40 rounded brand-gradient square, white glyph.
   Used for premium section heads, dashboard widgets, AI cards. */
.ez-ico-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ez-brand-500) 0%, var(--ez-brand-violet) 100%);
    color: #ffffff;
    box-shadow:
        0 6px 16px -6px rgba(99, 102, 241, 0.55),
        0 2px 4px rgba(15, 23, 42, 0.10);
    flex-shrink: 0;
}

/* Soft secondary variant — tinted indigo wash, brand-colored glyph. */
.ez-ico-badge.soft {
    background: rgba(99, 102, 241, 0.12);
    color: var(--ez-brand-700);
    box-shadow: none;
}

.ez-ico-badge.success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.ez-ico-badge.warning { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.ez-ico-badge.danger  { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); }

.ez-ico-badge.sm { width: 32px; height: 32px; border-radius: 10px; }
.ez-ico-badge.lg { width: 48px; height: 48px; border-radius: 14px; }

/* Placeholder (unknown icon name) — barely visible but never crashes. */
.ez-ico--placeholder { color: rgba(15, 23, 42, 0.30); }

/* =====================================================================
   v3.80 — abbreviated figure + exact-value tooltip ({% ez_figure %})
   Works on light (dashboard/public) and dark (platform-admin) surfaces.
   ===================================================================== */
.ez-fig { display: inline-flex; align-items: center; gap: 4px; }
.ez-fig-val { font: inherit; color: inherit; }
.ez-fig-i {
  position: relative; flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #94a3b8;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; vertical-align: middle;
  transition: color .15s ease, background .15s ease;
}
.ez-fig-i:hover, .ez-fig-i:focus-visible {
  color: #6366f1; background: rgba(99, 102, 241, 0.14); outline: none;
}
.ez-fig-i::after {
  content: attr(data-exact);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(220px, 72vw); text-align: center;
  white-space: normal; overflow-wrap: anywhere;
  background: #0f172a; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4;
  padding: 6px 10px; border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease;
  pointer-events: none; z-index: 300;
}
.ez-fig-i::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f172a;
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease; z-index: 300;
}
.ez-fig-i:hover::after, .ez-fig-i:focus::after, .ez-fig-i:focus-visible::after,
.ez-fig-i:hover::before, .ez-fig-i:focus::before, .ez-fig-i:focus-visible::before {
  opacity: 1; visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .ez-fig-i, .ez-fig-i::after, .ez-fig-i::before { transition: none; }
}
/* end v3.80 figure tooltip */