/* ============================================================================
   FYSH — Role identity shield
   CR: fysh-role-shield-2026-07-18

   Subtle, brand-consistent shield badge that visually identifies buyers,
   vendors and admins wherever a user's role is displayed.

   Called via the PHP helper role_shield() in config/env.php — that helper
   emits the SVG shape and glyph; this stylesheet handles the palette and
   sizing so the badge remains editable in one place.

   Palette rationale:
     - buyer  → deep green    (browsing, growth, exploratory)
     - vendor → FYSH blue     (property ownership, primary brand action)
     - admin  → FYSH gold     (staff / authority, brand emphasis)
     - neutral → navy         (fallback for unknown roles, never seen in prod)

   The colours are declared as CSS custom properties on each modifier so the
   same shield can be recoloured downstream (e.g. inverted on dark surfaces)
   without rewriting the base selectors.
============================================================================ */

.fysh-shield {
    --fysh-shield-body:    #0F2340;
    --fysh-shield-tint:    #F1F5FB;
    --fysh-shield-glyph:   #FFFFFF;
    --fysh-shield-border:  rgba(15, 35, 64, 0.18);
    --fysh-shield-label:   #0F2340;

    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}

.fysh-shield__svg {
    width:  var(--fysh-shield-size, 16px);
    height: var(--fysh-shield-size, 16px);
    display: block;
    flex-shrink: 0;
    overflow: visible;
}

/* Shield outline — subtle: soft tint fill with a hairline border in the role
   colour so the badge sits on light and dark surfaces without shouting. */
.fysh-shield__body {
    fill:   var(--fysh-shield-tint);
    stroke: var(--fysh-shield-body);
    stroke-width: 1.25;
    stroke-linejoin: round;
    paint-order: fill stroke;
}

/* Inner glyph — role-differentiating symbol (buyer: magnifier, vendor: home,
   admin: star). Sized to remain legible from 14px up. */
.fysh-shield__glyph {
    stroke: var(--fysh-shield-body);
    fill:   var(--fysh-shield-body);
}
/* Buyer's magnifier is an outlined glyph, no fill. */
.fysh-shield--buyer .fysh-shield__glyph[fill="none"],
.fysh-shield--vendor .fysh-shield__glyph[fill="none"] {
    fill: none;
}

.fysh-shield__label {
    font-family: inherit;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fysh-shield-label);
    line-height: 1.2;
    white-space: nowrap;
}

/* ── Sizes ────────────────────────────────────────────────────────────────── */
.fysh-shield--xs { --fysh-shield-size: 14px; }
.fysh-shield--sm { --fysh-shield-size: 16px; }
.fysh-shield--md { --fysh-shield-size: 20px; }
.fysh-shield--lg { --fysh-shield-size: 28px; }

.fysh-shield--with-label { gap: 6px; }
.fysh-shield--lg.fysh-shield--with-label { gap: 8px; }

/* ── Role palettes ────────────────────────────────────────────────────────── */
.fysh-shield--buyer {
    --fysh-shield-body:   #14733E;
    --fysh-shield-tint:   #E4F4EC;
    --fysh-shield-border: rgba(20, 115, 62, 0.25);
    --fysh-shield-label:  #0E5A30;
}
.fysh-shield--vendor {
    --fysh-shield-body:   #1E5BA8;
    --fysh-shield-tint:   #E6F1FB;
    --fysh-shield-border: rgba(30, 91, 168, 0.22);
    --fysh-shield-label:  #123F79;
}
.fysh-shield--admin {
    --fysh-shield-body:   #8A6E20;
    --fysh-shield-tint:   #FBF3DD;
    --fysh-shield-border: rgba(201, 168, 76, 0.5);
    --fysh-shield-label:  #6B5312;
}
/* Admin body outline stays gold; the glyph fills gold too. */
.fysh-shield--admin .fysh-shield__body { stroke: #C9A84C; }
.fysh-shield--admin .fysh-shield__glyph {
    fill:   #C9A84C;
    stroke: #8A6E20;
}

/* ── Standalone (no label) subtle emphasis ────────────────────────────────── */
.fysh-shield:not(.fysh-shield--with-label) .fysh-shield__body {
    filter: drop-shadow(0 1px 0 rgba(15, 35, 64, 0.05));
}

/* ── On dark surfaces (navy backgrounds) ──────────────────────────────────── */
.is-dark .fysh-shield,
.wb-sidebar .fysh-shield,
.byg-hero .fysh-shield,
.sg-hero .fysh-shield {
    --fysh-shield-label:  rgba(255, 255, 255, 0.85);
}
.wb-sidebar .fysh-shield--buyer  .fysh-shield__body,
.wb-sidebar .fysh-shield--vendor .fysh-shield__body,
.wb-sidebar .fysh-shield--admin  .fysh-shield__body {
    fill-opacity: 0.9;
}

/* ── Print — high contrast, no shadow ─────────────────────────────────────── */
@media print {
    .fysh-shield__body   { filter: none; fill: transparent; stroke: currentColor; }
    .fysh-shield__glyph  { fill: currentColor; stroke: currentColor; }
    .fysh-shield--buyer  { color: #14733E; }
    .fysh-shield--vendor { color: #1E5BA8; }
    .fysh-shield--admin  { color: #8A6E20; }
}