/* ============================================================================================
   kicons.css — the icon set the HR employee profile draws with
   --------------------------------------------------------------------------------------------
   The rest of the ERP draws icons from the icomoon webfont. This set is SVG: one file per glyph
   under `svgicons/`, pulled in here as a mask so the shape comes from the file and the colour from
   the element. An icon is one empty element wearing two classes:

       <i class="ksty ksty-user"></i>

   `.ksty` is the box - 1em square, on the text baseline, painted in `currentColor`. `.ksty-user` names
   the shape. Nothing else is needed: an icon in a heading is heading-sized, an icon in a pill is
   pill-sized, and an icon inside an accented tile takes that tile's colour, because both size and
   colour are inherited rather than set per place.

   Two vocabularies reach the same file. Ours is plain (`user`, `calendar`); every icomoon name the
   profile ever carried is aliased onto it (`.ksty-icon-user`, `.ksty-icon-calendar3`), and so is the
   bare `icon-` form of every one of our own names. So a panel or menu entry that names its icon in
   PHP may write either, and markup built as `ksty-{{ $entry['icon'] }}` works whichever it gets.

   A name with no glyph draws the dot that `.ksty` itself carries, rather than a gap or - worse, with
   a mask - a solid square. That reads as deliberate and never breaks a layout.

   Adding an icon: drop a 24x24 SVG into `svgicons/` drawn the same way as its neighbours (no fill,
   `stroke="#000"`, 1.7 stroke, round caps and joins - only the alpha is used, so the black is just
   what makes the mask opaque), then add its line below. Nothing else changes.
   ========================================================================================= */

.ksty {

  /* the shape, overridden by every .ksty-* below; on its own it is the unknown-name dot */
  --ksty: url("svgicons/dot.svg");

  width: 1em; height: 1em;
  display: inline-block; flex: none;
  vertical-align: -0.145em;

  /* the glyph is a stencil: the file supplies the alpha, this supplies the colour */
  background-color: currentColor;
  -webkit-mask: var(--ksty) center / contain no-repeat;
          mask: var(--ksty) center / contain no-repeat;

}

/* A shade larger than the text it sits with, for the places that want the icon to lead. */
.ksty-lg { width: 1.25em; height: 1.25em; }

/* ---- the glyphs --------------------------------------------------------------------------- */

/* people */
.ksty-user, .ksty-icon-user                                                { --ksty: url("svgicons/user.svg"); }
.ksty-user-tie, .ksty-icon-user-tie                                        { --ksty: url("svgicons/user-tie.svg"); }
.ksty-users, .ksty-icon-users, .ksty-icon-users4                           { --ksty: url("svgicons/users.svg"); }
.ksty-user-plus, .ksty-icon-user-plus                                      { --ksty: url("svgicons/user-plus.svg"); }
.ksty-user-check, .ksty-icon-user-check                                    { --ksty: url("svgicons/user-check.svg"); }
.ksty-user-minus, .ksty-icon-user-minus                                    { --ksty: url("svgicons/user-minus.svg"); }
.ksty-user-x, .ksty-icon-user-x, .ksty-icon-user-block                     { --ksty: url("svgicons/user-x.svg"); }

/* contact */
.ksty-mail, .ksty-icon-mail, .ksty-icon-envelop, .ksty-icon-envelop2       { --ksty: url("svgicons/mail.svg"); }
.ksty-mail-open, .ksty-icon-mail-open, .ksty-icon-mail-read                { --ksty: url("svgicons/mail-open.svg"); }
.ksty-phone, .ksty-icon-phone, .ksty-icon-phone2                           { --ksty: url("svgicons/phone.svg"); }
.ksty-phone-call, .ksty-icon-phone-call, .ksty-icon-phone-wave             { --ksty: url("svgicons/phone-call.svg"); }
.ksty-smartphone, .ksty-icon-smartphone, .ksty-icon-mobile                 { --ksty: url("svgicons/smartphone.svg"); }
.ksty-map-pin, .ksty-icon-map-pin, .ksty-icon-location4, .ksty-icon-map-marker { --ksty: url("svgicons/map-pin.svg"); }
.ksty-globe, .ksty-icon-globe, .ksty-icon-earth                            { --ksty: url("svgicons/globe.svg"); }
.ksty-book, .ksty-icon-book, .ksty-icon-address-book                       { --ksty: url("svgicons/book.svg"); }

/* objects */
.ksty-building, .ksty-icon-building, .ksty-icon-office                     { --ksty: url("svgicons/building.svg"); }
.ksty-briefcase, .ksty-icon-briefcase                                      { --ksty: url("svgicons/briefcase.svg"); }
.ksty-monitor, .ksty-icon-monitor, .ksty-icon-tv                           { --ksty: url("svgicons/monitor.svg"); }
.ksty-home, .ksty-icon-home, .ksty-icon-home5                              { --ksty: url("svgicons/home.svg"); }
.ksty-plane, .ksty-icon-plane, .ksty-icon-airplane                         { --ksty: url("svgicons/plane.svg"); }
.ksty-id-card, .ksty-icon-id-card, .ksty-icon-vcard                        { --ksty: url("svgicons/id-card.svg"); }
.ksty-key, .ksty-icon-key                                                  { --ksty: url("svgicons/key.svg"); }
.ksty-tag, .ksty-icon-tag, .ksty-icon-price-tag                            { --ksty: url("svgicons/tag.svg"); }
.ksty-trash, .ksty-icon-trash, .ksty-icon-trash-alt                        { --ksty: url("svgicons/trash.svg"); }
.ksty-crown, .ksty-icon-crown                                              { --ksty: url("svgicons/crown.svg"); }
.ksty-award, .ksty-icon-award, .ksty-icon-medal-star                       { --ksty: url("svgicons/award.svg"); }
.ksty-shield-check, .ksty-icon-shield-check                                { --ksty: url("svgicons/shield-check.svg"); }
.ksty-life-buoy, .ksty-icon-life-buoy, .ksty-icon-lifebuoy                 { --ksty: url("svgicons/life-buoy.svg"); }

/* money */
.ksty-dollar, .ksty-icon-dollar, .ksty-icon-coin-dollar                    { --ksty: url("svgicons/dollar.svg"); }
.ksty-coins, .ksty-icon-coins                                              { --ksty: url("svgicons/coins.svg"); }

/* documents */
.ksty-file, .ksty-icon-file, .ksty-icon-file-empty2                        { --ksty: url("svgicons/file.svg"); }
.ksty-file-text, .ksty-icon-file-text, .ksty-icon-file-text2, .ksty-icon-file-text3 { --ksty: url("svgicons/file-text.svg"); }
.ksty-file-check, .ksty-icon-file-check                                    { --ksty: url("svgicons/file-check.svg"); }
.ksty-folder, .ksty-icon-folder, .ksty-icon-folder-open                    { --ksty: url("svgicons/folder.svg"); }
.ksty-clipboard, .ksty-icon-clipboard, .ksty-icon-clipboard2, .ksty-icon-clipboard3 { --ksty: url("svgicons/clipboard.svg"); }
.ksty-layers, .ksty-icon-layers, .ksty-icon-stack-text                     { --ksty: url("svgicons/layers.svg"); }

/* time */
.ksty-calendar, .ksty-icon-calendar, .ksty-icon-calendar3                  { --ksty: url("svgicons/calendar.svg"); }
.ksty-calendar-clock, .ksty-icon-calendar-clock, .ksty-icon-calendar52     { --ksty: url("svgicons/calendar-clock.svg"); }
.ksty-clock, .ksty-icon-clock, .ksty-icon-alarm                            { --ksty: url("svgicons/clock.svg"); }
.ksty-clock-check, .ksty-icon-clock-check, .ksty-icon-alarm-check          { --ksty: url("svgicons/clock-check.svg"); }
.ksty-history, .ksty-icon-history                                          { --ksty: url("svgicons/history.svg"); }
.ksty-git-commit, .ksty-icon-git-commit, .ksty-icon-timeline               { --ksty: url("svgicons/git-commit.svg"); }
.ksty-activity, .ksty-icon-activity, .ksty-icon-stats-dots                 { --ksty: url("svgicons/activity.svg"); }

/* arrows and chevrons */
.ksty-chevron-right, .ksty-icon-chevron-right, .ksty-icon-arrow-right5     { --ksty: url("svgicons/chevron-right.svg"); }
.ksty-chevron-left, .ksty-icon-chevron-left                                { --ksty: url("svgicons/chevron-left.svg"); }
.ksty-chevron-down, .ksty-icon-chevron-down                                { --ksty: url("svgicons/chevron-down.svg"); }
.ksty-arrow-right, .ksty-icon-arrow-right, .ksty-icon-arrow-right8         { --ksty: url("svgicons/arrow-right.svg"); }
.ksty-arrow-left, .ksty-icon-arrow-left, .ksty-icon-arrow-left8            { --ksty: url("svgicons/arrow-left.svg"); }
.ksty-corner-up-left, .ksty-icon-corner-up-left, .ksty-icon-undo2          { --ksty: url("svgicons/corner-up-left.svg"); }
.ksty-external-link, .ksty-icon-external-link, .ksty-icon-new-tab          { --ksty: url("svgicons/external-link.svg"); }
.ksty-log-in, .ksty-icon-log-in, .ksty-icon-enter3                         { --ksty: url("svgicons/log-in.svg"); }
.ksty-download, .ksty-icon-download                                        { --ksty: url("svgicons/download.svg"); }
.ksty-upload, .ksty-icon-upload                                            { --ksty: url("svgicons/upload.svg"); }
.ksty-save, .ksty-icon-save, .ksty-icon-floppy-disk                        { --ksty: url("svgicons/save.svg"); }
.ksty-refresh, .ksty-icon-refresh, .ksty-icon-reload-alt                   { --ksty: url("svgicons/refresh.svg"); }

/* states */
.ksty-check, .ksty-icon-check, .ksty-icon-check2, .ksty-icon-checkmark3    { --ksty: url("svgicons/check.svg"); }
.ksty-check-circle, .ksty-icon-check-circle, .ksty-icon-checkmark-circle, .ksty-icon-checkmark-circle2 { --ksty: url("svgicons/check-circle.svg"); }
.ksty-x, .ksty-icon-x, .ksty-icon-cross2                                   { --ksty: url("svgicons/x.svg"); }
.ksty-x-circle, .ksty-icon-x-circle                                        { --ksty: url("svgicons/x-circle.svg"); }
.ksty-plus, .ksty-icon-plus, .ksty-icon-plus2                              { --ksty: url("svgicons/plus.svg"); }
.ksty-plus-circle, .ksty-icon-plus-circle, .ksty-icon-plus-circle2         { --ksty: url("svgicons/plus-circle.svg"); }
.ksty-ban, .ksty-icon-ban, .ksty-icon-blocked                              { --ksty: url("svgicons/ban.svg"); }
.ksty-alert-triangle, .ksty-icon-alert-triangle, .ksty-icon-warning22      { --ksty: url("svgicons/alert-triangle.svg"); }
.ksty-info, .ksty-icon-info, .ksty-icon-info22                             { --ksty: url("svgicons/info.svg"); }
.ksty-eye, .ksty-icon-eye                                                  { --ksty: url("svgicons/eye.svg"); }
.ksty-eye-off, .ksty-icon-eye-off, .ksty-icon-eye-blocked                  { --ksty: url("svgicons/eye-off.svg"); }
.ksty-circle, .ksty-icon-circle, .ksty-icon-circle2                        { --ksty: url("svgicons/circle.svg"); }
.ksty-dot, .ksty-icon-dot                                                  { --ksty: url("svgicons/dot.svg"); }
.ksty-loader, .ksty-icon-loader, .ksty-icon-spinner11, .ksty-icon-spinner2 { --ksty: url("svgicons/loader.svg"); }

/* tools */
.ksty-search, .ksty-icon-search, .ksty-icon-search4                        { --ksty: url("svgicons/search.svg"); }
.ksty-settings, .ksty-icon-settings, .ksty-icon-cog3                       { --ksty: url("svgicons/settings.svg"); }
.ksty-pencil, .ksty-icon-pencil, .ksty-icon-pencil5                        { --ksty: url("svgicons/pencil.svg"); }
.ksty-list, .ksty-icon-list, .ksty-icon-list-unordered                     { --ksty: url("svgicons/list.svg"); }
.ksty-grid, .ksty-icon-grid, .ksty-icon-menu7                              { --ksty: url("svgicons/grid.svg"); }
.ksty-network, .ksty-icon-network, .ksty-icon-tree5, .ksty-icon-tree7      { --ksty: url("svgicons/network.svg"); }
.ksty-sidebar, .ksty-icon-sidebar                                          { --ksty: url("svgicons/sidebar.svg"); }
.ksty-sparkle, .ksty-icon-sparkle                                          { --ksty: url("svgicons/sparkle.svg"); }
.ksty-moon, .ksty-icon-moon                                                { --ksty: url("svgicons/moon.svg"); }
.ksty-sun, .ksty-icon-sun, .ksty-icon-brightness-high                      { --ksty: url("svgicons/sun.svg"); }
.ksty-maximize, .ksty-icon-maximize, .ksty-icon-enlarge                    { --ksty: url("svgicons/maximize.svg"); }
.ksty-bell, .ksty-icon-bell, .ksty-icon-bell2, .ksty-icon-notification     { --ksty: url("svgicons/bell.svg"); }
.ksty-megaphone, .ksty-icon-megaphone, .ksty-icon-bullhorn                 { --ksty: url("svgicons/megaphone.svg"); }
.ksty-wallet, .ksty-icon-wallet, .ksty-icon-wallet2                        { --ksty: url("svgicons/wallet.svg"); }