/* Global Navigation Icon masking classes */

:root {
  --icon-arrow-left: url("../../fontawesome/svgs/regular/arrow-left.svg");
  --icon-arrow-right: url("../../fontawesome/svgs/regular/arrow-right.svg");
  --icon-arrow-down: url("../../fontawesome/svgs/regular/arrow-down.svg");
  --icon-checkbox-orange-unchecked: url("../../fontawesome/svgs/regular/checkbox/orange/unchecked.svg");
  --icon-checkbox-orange-checked: url("../../fontawesome/svgs/regular/checkbox/orange/checked.svg");
  --icon-avatar-default: url("../../fontawesome/svgs/regular/image-viewer.svg");
  --icon-tick-circle: url("../../fontawesome/svgs/regular/tick-circle.svg");
  --icon-row-vertical: url("../../fontawesome/svgs/regular/row-vertical.svg");
  --icon-hierarchy: url("../../fontawesome/svgs/regular/hierarchy.svg");
  --icon-element-3: url("../../fontawesome/svgs/regular/element-3.svg");
  --icon-arrow-3: url("../../fontawesome/svgs/regular/arrow-3.svg");
  --icon-edit-2: url("../../fontawesome/svgs/regular/edit-2.svg");
  --icon-trash: url("../../fontawesome/svgs/regular/trash.svg");
  --icon-menu: url("../../fontawesome/svgs/regular/menu.svg");
  --icon-buildings-2: url("../../fontawesome/svgs/regular/buildings-2.svg");
  --icon-task: url("../../fontawesome/svgs/regular/task.svg");
  --icon-money-2: url("../../fontawesome/svgs/regular/money-2.svg");
  --icon-people: url("../../fontawesome/svgs/regular/people.svg");
  --icon-user: url("../../fontawesome/svgs/regular/user.svg");
  --icon-import: url("../../fontawesome/svgs/regular/import.svg");
  --icon-security-user: url("../../fontawesome/svgs/regular/security-user.svg");
  --icon-notification: url("../../fontawesome/svgs/regular/notification.svg");
  --icon-close-circle: url("../../fontawesome/svgs/regular/close-circle.svg");
  --icon-setting-2: url("../../fontawesome/svgs/regular/setting-2.svg");
  --icon-add-square: url("../../fontawesome/svgs/regular/add-square.svg");
  --icon-more-inline: url("../../fontawesome/svgs/regular/more-inline.svg");
  --icon-document-upload: url("../../fontawesome/svgs/regular/document-upload.svg");
  --icon-document-download: url("../../fontawesome/svgs/regular/document-download.svg");
  --icon-copy: url("../../fontawesome/svgs/regular/copy.svg");
  --icon-edit: url("../../fontawesome/svgs/regular/edit.svg");
  --icon-close: url("../../fontawesome/svgs/regular/close.svg");
  --icon-forbidden-2: url("../../fontawesome/svgs/regular/forbidden-2.svg");
  --icon-danger: url("../../fontawesome/svgs/regular/danger.svg");
  --icon-search-normal: url("../../fontawesome/svgs/regular/search-normal.svg");
  --icon-arrow-2: url("../../fontawesome/svgs/regular/arrow-2.svg");
  --icon-qrcode: url("../../fontawesome/svgs/solid/qrcode.svg");
  --icon-shopping-cart: url("../../fontawesome/svgs/regular/shopping-cart.svg");
  --icon-dollar-circle: url("../../fontawesome/svgs/regular/dollar-circle.svg");
  --icon-box-add: url("../../fontawesome/svgs/regular/box-add.svg");
  --icon-shapes: url("../../fontawesome/svgs/regular/shapes.svg");
  --icon-tooltip-rectangle: url("../../fontawesome/svgs/regular/tooltip/tooltip-rectangle.svg");
  --icon-tick: url("../../fontawesome/svgs/regular/tick.svg");
  --icon-logout: url("../../fontawesome/svgs/regular/logout.svg");
  --icon-sidebar-left: url("../../fontawesome/svgs/regular/sidebar-left.svg");
  --icon-sidebar-right: url("../../fontawesome/svgs/regular/sidebar-right.svg");
  --icon-buildings: url("../../fontawesome/svgs/regular/buildings.svg");
  --icon-chart: url("../../fontawesome/svgs/regular/chart.svg");
  --icon-tag-user: url("../../fontawesome/svgs/regular/tag-user.svg");
  --icon-driver: url("../../fontawesome/svgs/regular/driver.svg");
  --icon-info-circle: url("../../fontawesome/svgs/regular/info-circle.svg");
  --icon-scan-barcode: url("../../fontawesome/svgs/regular/scan-barcode.svg");
  --icon-tag-2: url("../../fontawesome/svgs/regular/tag-2.svg");
  --icon-dropbox: url("../../fontawesome/svgs/regular/dropbox.svg");
  --icon-truck-fast: url("../../fontawesome/svgs/regular/truck-fast.svg");
  --icon-note-favorite: url("../../fontawesome/svgs/regular/note-favorite.svg");
  --icon-house-2: url("../../fontawesome/svgs/regular/house-2.svg");
  --icon-hashtag: url("../../fontawesome/svgs/regular/hashtag.svg");
  --icon-calendar-dashboard: url("../../fontawesome/svgs/regular/calendar-dashboard.svg");
  --icon-calendar-edit: url("../../fontawesome/svgs/regular/calendar-edit.svg");
  --icon-note-text: url("../../fontawesome/svgs/regular/note-text.svg");
  --icon-hashtag-up: url("../../fontawesome/svgs/regular/hashtag-up.svg");
  --icon-barcode: url("../../fontawesome/svgs/regular/barcode.svg");
  --icon-weight: url("../../fontawesome/svgs/regular/weight.svg");
  --icon-layer: url("../../fontawesome/svgs/regular/layer.svg");
  --icon-convertshape: url("../../fontawesome/svgs/regular/convertshape.svg");
  --icon-table-edit: url("../../fontawesome/svgs/regular/table-edit.svg");
  --icon-refresh-2: url("../../fontawesome/svgs/regular/refresh-2.svg");
  --icon-send-2: url("../../fontawesome/svgs/regular/send-2.svg");
  --icon-home: url("../../fontawesome/svgs/regular/home.svg");
  --icon-tag: url("../../fontawesome/svgs/regular/tag.svg");
  --icon-document-forward: url("../../fontawesome/svgs/regular/document-forward.svg");
  --icon-finger-cricle: url("../../fontawesome/svgs/regular/finger-cricle.svg");
  --icon-monitor: url("../../fontawesome/svgs/regular/monitor.svg");
  --icon-box: url("../../fontawesome/svgs/regular/box.svg");
  --icon-percentage-circle: url("../../fontawesome/svgs/regular/percentage-circle.svg");
  --icon-user-edit: url("../../fontawesome/svgs/regular/user-edit.svg");
  --icon-radio-orange-full: url("../../fontawesome/svgs/regular/radio-button/radio-button-orange-full-fill.svg");
  --icon-radio-orange-none: url("../../fontawesome/svgs/regular/radio-button/radio-button-orange-none-fill.svg");
  --icon-radio-orange-half: url("../../fontawesome/svgs/regular/radio-button/radio-button-orange-half-fill.svg");
  --icon-add-circle: url("../../fontawesome/svgs/regular/add-circle.svg");
  --icon-close-big: url("../../fontawesome/svgs/regular/close-big.svg");
  --icon-code-circle: url("../../fontawesome/svgs/regular/code-circle.svg");
  --icon-building: url("../../fontawesome/svgs/regular/building.svg");
  --icon-location: url("../../fontawesome/svgs/regular/location.svg");
  --icon-arrow-2: url("../../fontawesome/svgs/regular/arrow-2.svg");
  --icon-arrow-3: url("../../fontawesome/svgs/regular/arrow-3.svg");
  --icon-coin: url("../../fontawesome/svgs/regular/coin.svg");
  --icon-filter: url("../../fontawesome/svgs/regular/filter.svg");
  --icon-undo: url("../../fontawesome/svgs/regular/undo.svg");
  --icon-link-2: url("../../fontawesome/svgs/regular/link-2.svg");
  --icon-data: url("../../fontawesome/svgs/regular/data.svg");
  --icon-printer: url("../../fontawesome/svgs/regular/printer.svg");
  --icon-minus-circle: url("../../fontawesome/svgs/regular/minus-cirlce.svg");
}

/* Global Navigation Icon masking base styles */
[class*="nav-icon-"] {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--Secondary-secondary-500, #153541);
}

/* Checkbox icons (custom orange set) - use background-image because they are multi-color */
.nav-icon-checkbox-checked {
    background-image: var(--icon-checkbox-orange-checked) !important;
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.nav-icon-checkbox-unchecked {
    background-image: var(--icon-checkbox-orange-unchecked) !important;
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}


.nav-menu-icon-mask,
.nav-icon-menu {
    -webkit-mask-image: var(--icon-menu);
    mask-image: var(--icon-menu);
}

.nav-icon-buildings-2 {
    -webkit-mask-image: var(--icon-buildings-2);
    mask-image: var(--icon-buildings-2);
}

.nav-icon-task {
    -webkit-mask-image: var(--icon-task);
    mask-image: var(--icon-task);
}

.nav-icon-money-2 {
    -webkit-mask-image: var(--icon-money-2);
    mask-image: var(--icon-money-2);
}

.nav-icon-people {
    -webkit-mask-image: var(--icon-people);
    mask-image: var(--icon-people);
}

.nav-icon-user {
    -webkit-mask-image: var(--icon-user);
    mask-image: var(--icon-user);
}

.nav-icon-import {
    -webkit-mask-image: var(--icon-import);
    mask-image: var(--icon-import);
}

.nav-user-icon-mask,
.nav-icon-security-user {
    -webkit-mask-image: var(--icon-security-user);
    mask-image: var(--icon-security-user);
}

.nav-icon-notification {
    -webkit-mask-image: var(--icon-notification);
    mask-image: var(--icon-notification);
}

/* Global rules for generated components */
.breadcrumb-tree-container .expand-icon,
.breadcrumb-tree-container .collapse-icon {
    -webkit-mask-image: var(--icon-arrow-right);
    mask-image: var(--icon-arrow-right);
}

/* Global rules for Select2 and dropdown fields */
.select2-selection__clear,
.dropdown-quick-create-container .select2-container .select2-selection__clear {
    -webkit-mask-image: var(--icon-close-circle);
    mask-image: var(--icon-close-circle);
}

.select2-selection__arrow::after,
.dropdown-quick-create-btn-icon {
    -webkit-mask-image: var(--icon-arrow-down);
    mask-image: var(--icon-arrow-down);
}

.nav-arrow-mask,
.nav-icon-arrow-right {
    -webkit-mask-image: var(--icon-arrow-right);
    mask-image: var(--icon-arrow-right);
}

.nav-cat-actions-icon-right {
    -webkit-mask-image: var(--icon-arrow-down);
    mask-image: var(--icon-arrow-down);
}

.nav-icon-arrow-left {
    -webkit-mask-image: var(--icon-arrow-left);
    mask-image: var(--icon-arrow-left);
}

.nav-icon-arrow-down {
    -webkit-mask-image: var(--icon-arrow-down);
    mask-image: var(--icon-arrow-down);
}

.nav-icon-arrow-3 {
    -webkit-mask-image: var(--icon-arrow-3);
    mask-image: var(--icon-arrow-3);
}

.nav-icon-setting-2 {
    -webkit-mask-image: var(--icon-setting-2);
    mask-image: var(--icon-setting-2);
}

.nav-icon-add-square {
    -webkit-mask-image: var(--icon-add-square);
    mask-image: var(--icon-add-square);
}

.nav-icon-more-inline {
    -webkit-mask-image: var(--icon-more-inline);
    mask-image: var(--icon-more-inline);
}

.nav-icon-document-upload,
.upload-icon {
    -webkit-mask-image: var(--icon-document-upload);
    mask-image: var(--icon-document-upload);
}

.nav-icon-document-download {
    -webkit-mask-image: var(--icon-document-download);
    mask-image: var(--icon-document-download);
}

.nav-icon-copy {
    -webkit-mask-image: var(--icon-copy);
    mask-image: var(--icon-copy);
}

.nav-icon-edit {
    -webkit-mask-image: var(--icon-edit);
    mask-image: var(--icon-edit);
}

.nav-icon-trash {
    -webkit-mask-image: var(--icon-trash);
    mask-image: var(--icon-trash);
}

.nav-icon-tick-circle {
    -webkit-mask-image: var(--icon-tick-circle);
    mask-image: var(--icon-tick-circle);
}

.nav-icon-close {
    -webkit-mask-image: var(--icon-close);
    mask-image: var(--icon-close);
}

.nav-icon-close-circle {
    -webkit-mask-image: var(--icon-close-circle);
    mask-image: var(--icon-close-circle);
}

.nav-icon-forbidden-2 {
    -webkit-mask-image: var(--icon-forbidden-2);
    mask-image: var(--icon-forbidden-2);
}

.nav-icon-danger {
    -webkit-mask-image: var(--icon-danger);
    mask-image: var(--icon-danger);
}

.nav-icon-search {
    -webkit-mask-image: var(--icon-search-normal);
    mask-image: var(--icon-search-normal);
}

.nav-icon-equivalent {
    -webkit-mask-image: var(--icon-arrow-2);
    mask-image: var(--icon-arrow-2);
}

.nav-icon-qrcode {
    -webkit-mask-image: var(--icon-qrcode);
    mask-image: var(--icon-qrcode);
}

.nav-icon-shopping-cart {
    -webkit-mask-image: var(--icon-shopping-cart);
    mask-image: var(--icon-shopping-cart);
}

.nav-icon-dollar-circle {
    -webkit-mask-image: var(--icon-dollar-circle);
    mask-image: var(--icon-dollar-circle);
}

.nav-icon-box-add {
    -webkit-mask-image: var(--icon-box-add);
    mask-image: var(--icon-box-add);
}

.nav-icon-shapes {
    -webkit-mask-image: var(--icon-shapes);
    mask-image: var(--icon-shapes);
}

/* Tooltip elements */
.nav-icon-tooltip-rectangle {
    -webkit-mask-image: var(--icon-tooltip-rectangle);
    mask-image: var(--icon-tooltip-rectangle);
}

/* Pagination and navigation arrows */
.nav-icon-arrow-left {
    -webkit-mask-image: var(--icon-arrow-left);
    mask-image: var(--icon-arrow-left);
}

.nav-icon-arrow-right {
    -webkit-mask-image: var(--icon-arrow-right);
    mask-image: var(--icon-arrow-right);
}

.nav-icon-arrow-down {
    -webkit-mask-image: var(--icon-arrow-down);
    mask-image: var(--icon-arrow-down);
}

/* Utility icons */
.nav-icon-tick {
    -webkit-mask-image: var(--icon-tick);
    mask-image: var(--icon-tick);
}

.nav-icon-trash {
    -webkit-mask-image: var(--icon-trash);
    mask-image: var(--icon-trash);
}

.nav-icon-logout {
    -webkit-mask-image: var(--icon-logout);
    mask-image: var(--icon-logout);
}

/* Sidebar specialized icons */
.nav-icon-sidebar-left {
    -webkit-mask-image: var(--icon-sidebar-left);
    mask-image: var(--icon-sidebar-left);
}

.nav-icon-sidebar-right {
    -webkit-mask-image: var(--icon-sidebar-right);
    mask-image: var(--icon-sidebar-right);
}

.nav-icon-buildings {
    -webkit-mask-image: var(--icon-buildings);
    mask-image: var(--icon-buildings);
}

.nav-icon-chart {
    -webkit-mask-image: var(--icon-chart);
    mask-image: var(--icon-chart);
}

.nav-icon-tag-user {
    -webkit-mask-image: var(--icon-tag-user);
    mask-image: var(--icon-tag-user);
}

.nav-icon-security-user {
    -webkit-mask-image: var(--icon-security-user);
    mask-image: var(--icon-security-user);
}

.nav-icon-setting-2 {
    -webkit-mask-image: var(--icon-setting-2);
    mask-image: var(--icon-setting-2);
}

.nav-icon-driver {
    -webkit-mask-image: var(--icon-driver);
    mask-image: var(--icon-driver);
}

.nav-icon-info-circle {
    -webkit-mask-image: var(--icon-info-circle);
    mask-image: var(--icon-info-circle);
}

.nav-icon-image-viewer {
    -webkit-mask-image: var(--icon-avatar-default);
    mask-image: var(--icon-avatar-default);
}

/* Category actions aliases (backward compatibility) */
.nav-cat-actions-icon-right {
    -webkit-mask-image: var(--icon-arrow-right);
    mask-image: var(--icon-arrow-right);
}

.nav-icon-scan-barcode {
    -webkit-mask-image: var(--icon-scan-barcode);
    mask-image: var(--icon-scan-barcode);
}

.nav-icon-tag-2 {
    -webkit-mask-image: var(--icon-tag-2);
    mask-image: var(--icon-tag-2);
}

.nav-icon-element-3 {
    -webkit-mask-image: var(--icon-element-3);
    mask-image: var(--icon-element-3);
}

.nav-icon-dropbox {
    -webkit-mask-image: var(--icon-dropbox);
    mask-image: var(--icon-dropbox);
}

.nav-icon-truck-fast {
    -webkit-mask-image: var(--icon-truck-fast);
    mask-image: var(--icon-truck-fast);
}

.nav-icon-note-favorite {
    -webkit-mask-image: var(--icon-note-favorite);
    mask-image: var(--icon-note-favorite);
}

.nav-icon-house-2 {
    -webkit-mask-image: var(--icon-house-2);
    mask-image: var(--icon-house-2);
}

.nav-icon-logout {
    -webkit-mask-image: var(--icon-logout);
    mask-image: var(--icon-logout);
}
.nav-icon-hashtag {
    -webkit-mask-image: var(--icon-hashtag);
    mask-image: var(--icon-hashtag);
}

.nav-icon-calendar-dashboard {
    -webkit-mask-image: var(--icon-calendar-dashboard);
    mask-image: var(--icon-calendar-dashboard);
}

.nav-icon-calendar-edit {
    -webkit-mask-image: var(--icon-calendar-edit);
    mask-image: var(--icon-calendar-edit);
}

.nav-icon-note-text {
    -webkit-mask-image: var(--icon-note-text);
    mask-image: var(--icon-note-text);
}

.nav-icon-hashtag-up {
    -webkit-mask-image: var(--icon-hashtag-up);
    mask-image: var(--icon-hashtag-up);
}

.nav-icon-barcode {
    -webkit-mask-image: var(--icon-barcode);
    mask-image: var(--icon-barcode);
}

.nav-icon-weight {
    -webkit-mask-image: var(--icon-weight);
    mask-image: var(--icon-weight);
}

.nav-icon-layer {
    -webkit-mask-image: var(--icon-layer);
    mask-image: var(--icon-layer);
}

.nav-icon-convert-shape {
    -webkit-mask-image: var(--icon-convertshape);
    mask-image: var(--icon-convertshape);
}

.nav-icon-table-edit {
    -webkit-mask-image: var(--icon-table-edit);
    mask-image: var(--icon-table-edit);
}

.nav-icon-refresh {
    -webkit-mask-image: var(--icon-refresh-2);
    mask-image: var(--icon-refresh-2);
}

.nav-icon-hierarchy {
    -webkit-mask-image: var(--icon-hierarchy);
    mask-image: var(--icon-hierarchy);
}

.nav-icon-send-2 {
    -webkit-mask-image: var(--icon-send-2);
    mask-image: var(--icon-send-2);
}

.nav-icon-search-normal {
    -webkit-mask-image: var(--icon-search-normal);
    mask-image: var(--icon-search-normal);
}

.nav-icon-home {
    -webkit-mask-image: var(--icon-home);
    mask-image: var(--icon-home);
}

.nav-icon-tag {
    -webkit-mask-image: var(--icon-tag);
    mask-image: var(--icon-tag);
}

.nav-icon-document-forward {
    -webkit-mask-image: var(--icon-document-forward);
    mask-image: var(--icon-document-forward);
}

.nav-icon-finger-circle {
    -webkit-mask-image: var(--icon-finger-cricle);
    mask-image: var(--icon-finger-cricle);
}

.nav-icon-monitor {
    -webkit-mask-image: var(--icon-monitor);
    mask-image: var(--icon-monitor);
}

.nav-icon-box {
    -webkit-mask-image: var(--icon-box);
    mask-image: var(--icon-box);
}

.nav-icon-percentage-circle {
    -webkit-mask-image: var(--icon-percentage-circle);
    mask-image: var(--icon-percentage-circle);
}

.nav-icon-user-edit {
    -webkit-mask-image: var(--icon-user-edit);
    mask-image: var(--icon-user-edit);
}

/* Status Radio Button Icons (Orange Set) */
.status-icon-full {
    -webkit-mask-image: var(--icon-radio-orange-full);
    mask-image: var(--icon-radio-orange-full);
}

.status-icon-none {
    -webkit-mask-image: var(--icon-radio-orange-none);
    mask-image: var(--icon-radio-orange-none);
}

.status-icon-half {
    -webkit-mask-image: var(--icon-radio-orange-half);
    mask-image: var(--icon-radio-orange-half);
}

/* View Mode Icons */
.view-mode-icon.list-icon {
    -webkit-mask-image: var(--icon-row-vertical);
    mask-image: var(--icon-row-vertical);
}

.view-mode-icon.tree-icon {
    -webkit-mask-image: var(--icon-hierarchy);
    mask-image: var(--icon-hierarchy);
}

.view-mode-icon.grid-icon {
    -webkit-mask-image: var(--icon-element-3);
    mask-image: var(--icon-element-3);
}

/* Table sorting arrow */
.sortable::after {
    -webkit-mask-image: var(--icon-arrow-3) !important;
    mask-image: var(--icon-arrow-3) !important;
}

/* Action icons */
.edit-icon {
    -webkit-mask-image: var(--icon-edit-2);
    mask-image: var(--icon-edit-2);
}

.trash-icon {
    -webkit-mask-image: var(--icon-trash);
    mask-image: var(--icon-trash);
}

.plus-circle-icon,
.nav-icon-add-circle {
    -webkit-mask-image: var(--icon-add-circle);
    mask-image: var(--icon-add-circle);
}

.nav-icon-minus-circle {
    -webkit-mask-image: var(--icon-minus-circle);
    mask-image: var(--icon-minus-circle);
}

.nav-icon-code-circle {
    -webkit-mask-image: var(--icon-code-circle);
    mask-image: var(--icon-code-circle);
}

.nav-icon-building {
    -webkit-mask-image: var(--icon-building);
    mask-image: var(--icon-building);
}

.nav-icon-location {
    -webkit-mask-image: var(--icon-location);
    mask-image: var(--icon-location);
}

.nav-icon-arrow-2 {
    -webkit-mask-image: var(--icon-arrow-2);
    mask-image: var(--icon-arrow-2);
}

.nav-icon-coin {
    -webkit-mask-image: var(--icon-coin);
    mask-image: var(--icon-coin);
}

.nav-icon-print {
    -webkit-mask-image: var(--icon-print);
    mask-image: var(--icon-print);
}

.nav-icon-boxes {
    -webkit-mask-image: var(--icon-boxes);
    mask-image: var(--icon-boxes);
}

.filter-add-icon {
    -webkit-mask-image: var(--icon-filter);
    mask-image: var(--icon-filter);
}

.nav-icon-undo {
    -webkit-mask-image: var(--icon-undo);
    mask-image: var(--icon-undo);
}

.nav-icon-link-2 {
    -webkit-mask-image: var(--icon-link-2);
    mask-image: var(--icon-link-2);
}

.nav-icon-data {
    -webkit-mask-image: var(--icon-data);
    mask-image: var(--icon-data);
    transform: rotate(90deg);
}

.nav-icon-printer {
    -webkit-mask-image: var(--icon-printer);
    mask-image: var(--icon-printer);
}

.nav-icon-arrow-3 {
    -webkit-mask-image: var(--icon-arrow-3);
    mask-image: var(--icon-arrow-3);
}