/*
 * Lucide icon sizing.
 *
 * Icons are authored in markup as <i data-lucide="name"></i> and rendered to
 * inline <svg class="lucide lucide-name"> by lucide.createIcons() (wired in
 * public/js/lucide-init.js). These rules size those SVGs so they sit inline
 * like text glyphs. There is no Font Awesome on this site.
 */

i[data-lucide],
svg.lucide {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  line-height: 1;
}

svg.lucide {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Compact contexts (small buttons, badges, dropdown items, tables): a slightly
   heavier stroke keeps the glyph legible at small sizes. */
.btn-sm svg.lucide,
.badge svg.lucide,
.dropdown-item svg.lucide,
table svg.lucide {
  stroke-width: 2.25;
}

/* Large display contexts: a thinner stroke reads cleaner. */
.btn-lg svg.lucide {
  stroke-width: 1.75;
}

/*
 * Argon's sidebar collapse caret used Font Awesome's \f105 glyph via ::after.
 * With FA gone, draw it as a masked Lucide chevron-right that picks up
 * currentColor — same shape, same 90° rotation when [aria-expanded='true'].
 *
 * Mask di-load dari file SVG nyata (/img/ui/chevron-right.svg), BUKAN
 * data: URI inline. Content-Security-Policy `default-src 'self'` (di-set
 * di server staging/prod) memblok `data:` URI sebagai sumber gambar/mask
 * ("violates ... default-src 'self'") sehingga caret tidak muncul. File
 * SVG same-origin lolos `'self'`.
 */
.navbar-vertical .navbar-nav .nav-link[data-toggle='collapse']::after,
.navbar-vertical .navbar-nav .nav-link[data-toggle='collapse']:after {
  content: "";
  font-family: inherit;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: auto;
  background-color: #ced4da;
  -webkit-mask: url("/img/ui/chevron-right.svg") center / contain no-repeat;
          mask: url("/img/ui/chevron-right.svg") center / contain no-repeat;
  transition: transform .15s ease, background-color .15s ease;
}

.navbar-vertical .navbar-nav .nav-link[data-toggle='collapse'][aria-expanded='true']::after,
.navbar-vertical .navbar-nav .nav-link[data-toggle='collapse'][aria-expanded='true']:after {
  background-color: #5e72e4;
  transform: rotate(90deg);
}