/*!
 * Bootstrap Icons - project extensions
 *
 * Loaded straight after css/app/bootstrap-icons.min.css (Bootstrap Icons
 * v1.11.3), so anything declared here also wins over the vendor file.
 *
 * There are two ways to add an icon, and picking the wrong one is why custom
 * icons usually come out as an empty box:
 *
 *   1. ALIAS a glyph the installed font already has -> section 1.
 *      Cheap, but limited to the 2050 glyphs inside fonts/bootstrap-icons.woff2
 *      (codepoints \f101 - \f903). A codepoint copied from a NEWER Bootstrap
 *      Icons release renders as tofu: the CSS and the .woff2 ship together, so
 *      if the class is missing from bootstrap-icons.min.css the glyph is
 *      missing from our font too, and no `content` rule can conjure it up.
 *
 *   2. EMBED the SVG -> section 2.
 *      Works for any icon from any set, new Bootstrap Icons included, because
 *      the shape travels in this file instead of the font.
 */

/* ---------------------------------------------------------------------------
 * 1. Aliases for glyphs the font already carries
 *
 * Bootstrap's own `[class^=bi-]::before` rule supplies the font-family, sizing
 * and alignment, so an alias only has to name the codepoint. Keep the `bi-`
 * prefix or none of that applies.
 *
 * Copy the line below, rename it, and paste the codepoint from
 * https://icons.getbootstrap.com (or grep the class out of
 * bootstrap-icons.min.css) to add another.
 * ------------------------------------------------------------------------ */

/* Example: person-badge under a name that reads as PKHA at the call site. */
.bi-custom-employee::before {
    content: "\f4d3";
}

/* ---------------------------------------------------------------------------
 * 2. SVG-backed icons the installed font does not have
 *
 * `<i class="bi-svg-bluesky"></i>` - no companion class needed.
 *
 * The SVG is used as a MASK, not as an image: the shape is cut out and filled
 * with `currentColor`, and it is sized in `em`. That is the whole reason for
 * the mask - these then inherit colour and font-size from their parent exactly
 * like the font icons, so they follow `data-bs-theme` and every dark/semi-dark/
 * bordered theme for free, with no per-theme override anywhere.
 *
 * The catch is the flip side of the same coin: a mask keeps only the shape, so
 * a multi-colour logo comes out in one colour. Use a real `<img>` for those.
 *
 * To add one: open the icon's .svg, copy its `<path d="...">`, and paste it
 * into the template at the bottom of this file. Strip any `fill`, `stroke` or
 * `style` attribute while you are there - a hard-coded colour is ignored by the
 * mask at best, and at worst it is the one thing that breaks dark mode.
 * ------------------------------------------------------------------------ */

[class^="bi-svg-"],
[class*=" bi-svg-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: var(--bi-icon) no-repeat center / contain;
    mask: var(--bi-icon) no-repeat center / contain;
}

/* Bluesky - added to Bootstrap Icons in v1.13, absent from our v1.11.3 font. */
.bi-svg-bluesky {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948'/%3E%3C/svg%3E");
}

.bi-sidebar-toggle {
    --bi-icon: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LDUgTDMsNSBMMywxOSBMOCwxOSBMOCw1IFogTTEwLDUgTDEwLDE5IEwyMSwxOSBMMjEsNSBMMTAsNSBaIE0yLjgxODE4MTgyLDMgTDIxLjE4MTgxODIsMyBDMjIuMTg1OTcyMywzIDIzLDMuODk1NDMwNSAyMyw1IEwyMywxOSBDMjMsMjAuMTA0NTY5NSAyMi4xODU5NzIzLDIxIDIxLjE4MTgxODIsMjEgTDIuODE4MTgxODIsMjEgQzEuODE0MDI3NzMsMjEgMSwyMC4xMDQ1Njk1IDEsMTkgTDEsNSBDMSwzLjg5NTQzMDUgMS44MTQwMjc3MywzIDIuODE4MTgxODIsMyBaIi8+Cjwvc3ZnPg==");
}

/* Sidebar panels, the sidebar's two keys. Drawn as strokes, so they keep a
 * `stroke` - the mask reads only the shape, never the colour.
 *
 * Close: a rounded frame split by a narrow left pane. */
.bi-svg-sidebar-close {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='2.7' y='3.7' width='14.6' height='12.6' rx='3'/%3E%3Cpath d='M7.6 3.7v12.6'/%3E%3C/svg%3E");
}

/* Open: the same frame with a short bar standing in its left side. */
.bi-svg-sidebar-open {
    --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.75' y='4.25' width='14.5' height='11.5' rx='3.25'/%3E%3Cpath d='M6.75 7.75v4.5'/%3E%3C/svg%3E");
}

/* Template for the next one. Percent-encode `<` as %3C and `>` as %3E, use
 * single quotes inside the data URI, and drop any `fill`/`class` attributes -
 * the mask only reads the shape, and the colour comes from currentColor.
 *
 * .bi-svg-my-icon {
 *     --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='PASTE PATH DATA HERE'/%3E%3C/svg%3E");
 * }
 */