/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/site.css?ngGlobalStyle ***!
  \*******************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800;900&display=swap);
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/site.css?ngGlobalStyle (1) ***!
  \***********************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap);
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles/dashboard-design-system.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap);
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap);
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss?ngGlobalStyle (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);
/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css?ngGlobalStyle ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
:root{--dt-row-selected: 13, 110, 253;--dt-row-selected-text: 255, 255, 255;--dt-row-selected-link: 9, 10, 11;--dt-row-stripe: 0, 0, 0;--dt-row-hover: 0, 0, 0;--dt-column-ordering: 0, 0, 0;--dt-html-background: white}:root.dark{--dt-html-background: rgb(33, 37, 41)}table.dataTable td.dt-control{text-align:center;cursor:pointer}table.dataTable td.dt-control:before{display:inline-block;color:rgba(0, 0, 0, 0.5);content:"▶"}table.dataTable tr.dt-hasChild td.dt-control:before{content:"▼"}html.dark table.dataTable td.dt-control:before,:root[data-bs-theme=dark] table.dataTable td.dt-control:before{color:rgba(255, 255, 255, 0.5)}html.dark table.dataTable tr.dt-hasChild td.dt-control:before,:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before{color:rgba(255, 255, 255, 0.5)}table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting_asc_disabled,table.dataTable thead>tr>th.sorting_desc_disabled,table.dataTable thead>tr>td.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting_asc_disabled,table.dataTable thead>tr>td.sorting_desc_disabled{cursor:pointer;position:relative;padding-right:26px}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after{position:absolute;display:block;opacity:.125;right:10px;line-height:9px;font-size:.8em}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:before{bottom:50%;content:"▲";content:"▲"/""}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:after{top:50%;content:"▼";content:"▼"/""}table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:after{opacity:.6}table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting_asc_disabled:before{display:none}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}div.dataTables_scrollBody>table.dataTable>thead>tr>th:before,div.dataTables_scrollBody>table.dataTable>thead>tr>th:after,div.dataTables_scrollBody>table.dataTable>thead>tr>td:before,div.dataTables_scrollBody>table.dataTable>thead>tr>td:after{display:none}div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:2px;z-index:10}div.dataTables_processing>div:last-child{position:relative;width:80px;height:15px;margin:1em auto}div.dataTables_processing>div:last-child>div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:rgb(13, 110, 253);background:rgb(var(--dt-row-selected));animation-timing-function:cubic-bezier(0, 1, 1, 0)}div.dataTables_processing>div:last-child>div:nth-child(1){left:8px;animation:datatables-loader-1 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(2){left:8px;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(3){left:32px;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(4){left:56px;animation:datatables-loader-3 .6s infinite}@keyframes datatables-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes datatables-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes datatables-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:left}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}/*! Bootstrap 5 integration for DataTables
 *
 * ©2020 SpryMedia Ltd, all rights reserved.
 * License: MIT datatables.net/license/mit
 */table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important;border-spacing:0}table.dataTable td,table.dataTable th{box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{box-shadow:none}table.dataTable>tbody>tr{background-color:transparent}table.dataTable>tbody>tr.selected>*{box-shadow:inset 0 0 0 9999px rgb(13, 110, 253);box-shadow:inset 0 0 0 9999px rgb(var(--dt-row-selected));color:rgb(255, 255, 255);color:rgb(var(--dt-row-selected-text))}table.dataTable>tbody>tr.selected a{color:rgb(9, 10, 11);color:rgb(var(--dt-row-selected-link))}table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05)}table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1).selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.95);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95)}table.dataTable.table-hover>tbody>tr:hover>*{box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075)}table.dataTable.table-hover>tbody>tr.selected:hover>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.975);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975)}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:auto;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:.85em}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap;justify-content:flex-end}div.dataTables_wrapper div.dt-row{position:relative}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody>table>thead .sorting:before,div.dataTables_scrollBody>table>thead .sorting_asc:before,div.dataTables_scrollBody>table>thead .sorting_desc:before,div.dataTables_scrollBody>table>thead .sorting:after,div.dataTables_scrollBody>table>thead .sorting_asc:after,div.dataTables_scrollBody>table>thead .sorting_desc:after{display:none}div.dataTables_scrollBody>table>tbody tr:first-child th,div.dataTables_scrollBody>table>tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}div.dataTables_wrapper div.dataTables_paginate ul.pagination{justify-content:center !important}}table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled){padding-right:20px}table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled):before,table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled):after{right:5px}table.table-bordered.dataTable{border-right-width:0}table.table-bordered.dataTable thead tr:first-child th,table.table-bordered.dataTable thead tr:first-child td{border-top-width:1px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:first-child,table.table-bordered.dataTable th:first-child,table.table-bordered.dataTable td:first-child,table.table-bordered.dataTable td:first-child{border-left-width:1px}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:1px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-bottom-width:1px}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child{padding-right:0}:root[data-bs-theme=dark]{--dt-row-hover: 255, 255, 255;--dt-row-stripe: 255, 255, 255;--dt-column-ordering: 255, 255, 255}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.css?ngGlobalStyle ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
@keyframes dtb-spinner {
  100% {
    transform: rotate(360deg);
  }
}
div.dataTables_wrapper {
  position: relative;
}

div.dt-buttons {
  position: initial;
}
div.dt-buttons .dt-button {
  overflow: hidden;
  text-overflow: ellipsis;
}

div.dt-button-info {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  margin-top: -100px;
  margin-left: -200px;
  background-color: white;
  border-radius: 0.75em;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 2003;
  overflow: hidden;
}
div.dt-button-info h2 {
  padding: 2rem 2rem 1rem 2rem;
  margin: 0;
  font-weight: normal;
}
div.dt-button-info > div {
  padding: 1em 2em 2em 2em;
}

div.dtb-popover-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 2003;
}

button.dtb-hide-drop {
  display: none !important;
}

div.dt-button-collection-title {
  text-align: center;
  padding: 0.3em 0 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 0.9em;
}

div.dt-button-collection-title:empty {
  display: none;
}

span.dt-button-spacer {
  display: inline-block;
  margin: 0.5em;
  white-space: nowrap;
}
span.dt-button-spacer.bar {
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  padding-left: 0.5em;
}
span.dt-button-spacer.bar:empty {
  height: 1em;
  width: 1px;
  padding-left: 0;
}

div.dt-button-collection .dt-button-active {
  padding-right: 3em;
}
div.dt-button-collection .dt-button-active:after {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 1em;
  display: inline-block;
  content: "✓";
  color: inherit;
}
div.dt-button-collection .dt-button-active.dt-button-split {
  padding-right: 0;
}
div.dt-button-collection .dt-button-active.dt-button-split:after {
  display: none;
}
div.dt-button-collection .dt-button-active.dt-button-split > *:first-child {
  padding-right: 3em;
}
div.dt-button-collection .dt-button-active.dt-button-split > *:first-child:after {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 1em;
  display: inline-block;
  content: "✓";
  color: inherit;
}
div.dt-button-collection .dt-button-active-a a {
  padding-right: 3em;
}
div.dt-button-collection .dt-button-active-a a:after {
  position: absolute;
  right: 1em;
  display: inline-block;
  content: "✓";
  color: inherit;
}
div.dt-button-collection span.dt-button-spacer {
  width: 100%;
  font-size: 0.9em;
  text-align: center;
  margin: 0.5em 0;
}
div.dt-button-collection span.dt-button-spacer:empty {
  height: 0;
  width: 100%;
}
div.dt-button-collection span.dt-button-spacer.bar {
  border-left: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 0;
}

html.dark div.dt-button-info {
  background-color: var(--dt-html-background);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

div.dt-buttons div.btn-group {
  position: initial;
}
div.dt-buttons div.dropdown-menu {
  margin-top: 4px;
}
div.dt-buttons div.dropdown-menu .dt-button {
  position: relative;
}
div.dt-buttons div.dropdown-menu div.dt-button-split {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
}
div.dt-buttons div.dropdown-menu div.dt-button-split a:first-child {
  min-width: auto;
  flex: 1 0 50px;
  padding-right: 0;
}
div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child {
  min-width: 33px;
  flex: 0;
  background: transparent;
  border: none;
  line-height: 1rem;
  color: var(--bs-dropdown-link-color);
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
}
div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child:hover {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child:after {
  position: relative;
  left: -3px;
}
div.dt-buttons div.dropdown-menu.fixed {
  position: fixed;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -75px;
  border-radius: 5px;
  background-color: white;
  padding: 0.5em;
}
div.dt-buttons div.dropdown-menu.fixed.two-column {
  margin-left: -200px;
}
div.dt-buttons div.dropdown-menu.fixed.three-column {
  margin-left: -225px;
}
div.dt-buttons div.dropdown-menu.fixed.four-column {
  margin-left: -300px;
}
div.dt-buttons div.dropdown-menu.fixed.columns {
  margin-left: -409px;
}
@media screen and (max-width: 1024px) {
  div.dt-buttons div.dropdown-menu.fixed.columns {
    margin-left: -308px;
  }
}
@media screen and (max-width: 640px) {
  div.dt-buttons div.dropdown-menu.fixed.columns {
    margin-left: -203px;
  }
}
@media screen and (max-width: 460px) {
  div.dt-buttons div.dropdown-menu.fixed.columns {
    margin-left: -100px;
  }
}
div.dt-buttons div.dropdown-menu.fixed > :last-child {
  max-height: 100vh;
  overflow: auto;
}
div.dt-buttons div.dropdown-menu.two-column > :last-child, div.dt-buttons div.dropdown-menu.three-column > :last-child, div.dt-buttons div.dropdown-menu.four-column > :last-child {
  display: block !important;
  -ms-column-gap: 8px;
  -o-column-gap: 8px;
  column-gap: 8px;
}
div.dt-buttons div.dropdown-menu.two-column > :last-child > *, div.dt-buttons div.dropdown-menu.three-column > :last-child > *, div.dt-buttons div.dropdown-menu.four-column > :last-child > * {
  break-inside: avoid;
}
div.dt-buttons div.dropdown-menu.two-column {
  width: 400px;
}
div.dt-buttons div.dropdown-menu.two-column > :last-child {
  padding-bottom: 1px;
  column-count: 2;
}
div.dt-buttons div.dropdown-menu.three-column {
  width: 450px;
}
div.dt-buttons div.dropdown-menu.three-column > :last-child {
  padding-bottom: 1px;
  column-count: 3;
}
div.dt-buttons div.dropdown-menu.four-column {
  width: 600px;
}
div.dt-buttons div.dropdown-menu.four-column > :last-child {
  padding-bottom: 1px;
  column-count: 4;
}
div.dt-buttons div.dropdown-menu .dt-button {
  border-radius: 0;
}
div.dt-buttons div.dropdown-menu.columns {
  width: auto;
}
div.dt-buttons div.dropdown-menu.columns > :last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: 818px;
  padding-bottom: 1px;
}
div.dt-buttons div.dropdown-menu.columns > :last-child .dt-button {
  min-width: 200px;
  flex: 0 1;
  margin: 0;
}
div.dt-buttons div.dropdown-menu.columns.dtb-b3 > :last-child, div.dt-buttons div.dropdown-menu.columns.dtb-b2 > :last-child, div.dt-buttons div.dropdown-menu.columns.dtb-b1 > :last-child {
  justify-content: space-between;
}
div.dt-buttons div.dropdown-menu.columns.dtb-b3 .dt-button {
  flex: 1 1 32%;
}
div.dt-buttons div.dropdown-menu.columns.dtb-b2 .dt-button {
  flex: 1 1 48%;
}
div.dt-buttons div.dropdown-menu.columns.dtb-b1 .dt-button {
  flex: 1 1 100%;
}
@media screen and (max-width: 1024px) {
  div.dt-buttons div.dropdown-menu.columns > :last-child {
    width: 612px;
  }
}
@media screen and (max-width: 640px) {
  div.dt-buttons div.dropdown-menu.columns > :last-child {
    width: 406px;
  }
  div.dt-buttons div.dropdown-menu.columns.dtb-b3 .dt-button {
    flex: 0 1 32%;
  }
}
@media screen and (max-width: 460px) {
  div.dt-buttons div.dropdown-menu.columns > :last-child {
    width: 200px;
  }
}
div.dt-buttons span.dt-button-spacer.empty {
  margin: 1px;
}
div.dt-buttons span.dt-button-spacer.bar:empty {
  height: inherit;
}
div.dt-buttons .btn.processing {
  color: rgba(0, 0, 0, 0.2);
}
div.dt-buttons .btn.processing:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  box-sizing: border-box;
  display: block;
  content: " ";
  border: 2px solid #282828;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: dtb-spinner 1500ms infinite linear;
  -o-animation: dtb-spinner 1500ms infinite linear;
  -ms-animation: dtb-spinner 1500ms infinite linear;
  -webkit-animation: dtb-spinner 1500ms infinite linear;
  -moz-animation: dtb-spinner 1500ms infinite linear;
}

div.dt-button-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

@media screen and (max-width: 767px) {
  div.dt-buttons {
    float: none;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5em;
  }
  div.dt-buttons a.btn {
    float: none;
  }
}
:root[data-bs-theme=dark] div.dropdown-menu.dt-button-collection.fixed {
  background-color: #212529;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/summernote/dist/summernote-lite.min.css?ngGlobalStyle ***!
  \************************************************************************************************************************************************************************************************************************************************************/
@font-face{font-display:auto;font-family:summernote;font-style:normal;font-weight:400;src:url('summernote.eot?#iefix') format("embedded-opentype"),url('summernote.woff2') format("woff2"),url('summernote.woff') format("woff"),url('summernote.ttf') format("truetype")}[class*=" note-icon"]:before,[class^=note-icon]:before{display:inline-block;font-family:summernote;font-size:inherit;font-style:normal;text-decoration:inherit;text-rendering:auto;text-transform:none;vertical-align:middle;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;speak:none}.note-icon-fw{text-align:center;width:1.25em}.note-icon-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.note-icon-pull-left{float:left}.note-icon-pull-right{float:right}.note-icon.note-icon-pull-left{margin-right:.3em}.note-icon.note-icon-pull-right{margin-left:.3em}.note-icon-align:before{content:"\ea01"}.note-icon-align-center:before{content:"\ea02"}.note-icon-align-indent:before{content:"\ea03"}.note-icon-align-justify:before{content:"\ea04"}.note-icon-align-left:before{content:"\ea05"}.note-icon-align-outdent:before{content:"\ea06"}.note-icon-align-right:before{content:"\ea07"}.note-icon-arrow-circle-down:before{content:"\ea08"}.note-icon-arrow-circle-left:before{content:"\ea09"}.note-icon-arrow-circle-right:before{content:"\ea0a"}.note-icon-arrow-circle-up:before{content:"\ea0b"}.note-icon-arrows-alt:before{content:"\ea0c"}.note-icon-arrows-h:before{content:"\ea0d"}.note-icon-arrows-v:before{content:"\ea0e"}.note-icon-bold:before{content:"\ea0f"}.note-icon-caret:before{content:"\ea10"}.note-icon-chain-broken:before{content:"\ea11"}.note-icon-circle:before{content:"\ea12"}.note-icon-close:before{content:"\ea13"}.note-icon-code:before{content:"\ea14"}.note-icon-col-after:before{content:"\ea15"}.note-icon-col-before:before{content:"\ea16"}.note-icon-col-remove:before{content:"\ea17"}.note-icon-eraser:before{content:"\ea18"}.note-icon-float-left:before{content:"\ea19"}.note-icon-float-none:before{content:"\ea1a"}.note-icon-float-right:before{content:"\ea1b"}.note-icon-font:before{content:"\ea1c"}.note-icon-frame:before{content:"\ea1d"}.note-icon-italic:before{content:"\ea1e"}.note-icon-link:before{content:"\ea1f"}.note-icon-magic:before{content:"\ea20"}.note-icon-menu-check:before{content:"\ea21"}.note-icon-minus:before{content:"\ea22"}.note-icon-orderedlist:before{content:"\ea23"}.note-icon-pencil:before{content:"\ea24"}.note-icon-picture:before{content:"\ea25"}.note-icon-question:before{content:"\ea26"}.note-icon-redo:before{content:"\ea27"}.note-icon-rollback:before{content:"\ea28"}.note-icon-row-above:before{content:"\ea29"}.note-icon-row-below:before{content:"\ea2a"}.note-icon-row-remove:before{content:"\ea2b"}.note-icon-special-character:before{content:"\ea2c"}.note-icon-square:before{content:"\ea2d"}.note-icon-strikethrough:before{content:"\ea2e"}.note-icon-subscript:before{content:"\ea2f"}.note-icon-summernote:before{content:"\ea30"}.note-icon-superscript:before{content:"\ea31"}.note-icon-table:before{content:"\ea32"}.note-icon-text-height:before{content:"\ea33"}.note-icon-trash:before{content:"\ea34"}.note-icon-underline:before{content:"\ea35"}.note-icon-undo:before{content:"\ea36"}.note-icon-unorderedlist:before{content:"\ea37"}.note-icon-video:before{content:"\ea38"}.note-frame{border-radius:4px;-ms-box-sizing:border-box;box-sizing:border-box;color:#000;font-family:sans-serif}.note-toolbar{background-color:#f5f5f5;border-bottom:1px solid;border-color:#ddd;border-top-left-radius:3px;border-top-right-radius:3px;color:#333;padding:10px 5px}.note-btn-group{display:inline-block;margin-right:8px;position:relative}.note-btn-group>.note-btn-group{margin-right:0}.note-btn-group>.note-btn:first-child{margin-left:0}.note-btn-group .note-btn+.note-btn,.note-btn-group .note-btn+.note-btn-group,.note-btn-group .note-btn-group+.note-btn,.note-btn-group .note-btn-group+.note-btn-group{margin-left:-1px}.note-btn-group>.note-btn-group:not(:first-child)>.note-btn,.note-btn-group>.note-btn:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.note-btn-group>.note-btn-group:not(:last-child)>.note-btn,.note-btn-group>.note-btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.note-btn-group.open>.note-dropdown{display:block}.note-btn{background-color:#fff;background-image:none;border:1px solid #dae0e5;border-radius:3px;color:#333;cursor:pointer;display:inline-block;font-size:14px;font-weight:400;line-height:1.4;margin-bottom:0;outline:0;padding:5px 10px;text-align:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.note-btn.focus,.note-btn:focus,.note-btn:hover{background-color:#ebebeb;border-color:#dae0e5;color:#333}.note-btn.disabled.focus,.note-btn.disabled:focus,.note-btn[disabled].focus,.note-btn[disabled]:focus,fieldset[disabled] .note-btn.focus,fieldset[disabled] .note-btn:focus{background-color:#fff;border-color:#dae0e5}.note-btn.active,.note-btn.focus,.note-btn:active,.note-btn:focus,.note-btn:hover{background-color:#ebebeb;border:1px solid #dae0e5;border-radius:1px;color:#333;outline:0;text-decoration:none}.note-btn.active,.note-btn:active{background-image:none;box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.note-btn.disabled,.note-btn[disabled],fieldset[disabled] .note-btn{box-shadow:none;cursor:not-allowed;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=65);filter:alpha(opacity=65);-webkit-opacity:.65;-khtml-opacity:.65;-moz-opacity:.65;opacity:.65}.note-btn>span.note-icon-caret:first-child{margin-left:-1px}.note-btn>span.note-icon-caret:nth-child(2){margin-right:-5px;padding-left:3px}.note-btn-primary{background:#fa6362;color:#fff}.note-btn-primary.focus,.note-btn-primary:focus,.note-btn-primary:hover{background-color:#fa6362;border:1px solid #dae0e5;border-radius:1px;color:#fff;text-decoration:none}.note-btn-block{display:block;width:100%}.note-btn-block+.note-btn-block{margin-top:5px}input[type=button].note-btn-block,input[type=reset].note-btn-block,input[type=submit].note-btn-block{width:100%}button.close{-webkit-appearance:none;background:transparent;border:0;cursor:pointer;padding:0}.close{color:#000;float:right;font-size:21px;line-height:1;opacity:.2}.close:hover{-ms-filter:alpha(opacity=100);filter:alpha(opacity=100);-webkit-opacity:1;-khtml-opacity:1;-moz-opacity:1;opacity:1}.note-dropdown{position:relative}.note-color .dropdown-toggle{padding-left:5px;width:30px}.note-dropdown-menu{background:#fff;background-clip:padding-box;border:1px solid #e2e2e2;box-shadow:0 1px 1px rgba(0,0,0,.06);display:none;float:left;left:0;min-width:100px;padding:5px;position:absolute;text-align:left;top:100%;z-index:1000}.note-dropdown-menu>:last-child{margin-right:0}.note-btn-group.open .note-dropdown-menu,.note-dropdown-item{display:block}.note-dropdown-item:hover{background-color:#ebebeb}a.note-dropdown-item,a.note-dropdown-item:hover{color:#000;margin:5px 0;text-decoration:none}.note-modal{bottom:0;display:none;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);filter:alpha(opacity=100);left:0;-webkit-opacity:1;-khtml-opacity:1;-moz-opacity:1;opacity:1;position:fixed;right:0;top:0;z-index:1050}.note-modal.open{display:block}.note-modal-content{background:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.2);border-radius:5px;box-shadow:0 3px 9px rgba(0,0,0,.5);margin:30px 20px;outline:0;position:relative;width:auto}.note-modal-header{border:1px solid #ededef;padding:10px 20px}.note-modal-body{padding:20px 30px;position:relative}.note-modal-body kbd{background-color:#000;border-radius:2px;-ms-box-sizing:border-box;box-sizing:border-box;color:#fff;font-weight:700;padding:3px 5px}.note-modal-footer{height:40px;padding:10px;text-align:center}.note-modal-footer a{color:#337ab7;text-decoration:none}.note-modal-footer a:focus,.note-modal-footer a:hover{color:#23527c;text-decoration:underline}.note-modal-footer .note-btn{float:right}.note-modal-title{color:#42515f;font-size:20px;line-height:1.4;margin:0}.note-modal-backdrop{background:#000;bottom:0;display:none;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);filter:alpha(opacity=50);left:0;-webkit-opacity:.5;-khtml-opacity:.5;-moz-opacity:.5;opacity:.5;position:fixed;right:0;top:0;z-index:1040}.note-modal-backdrop.open{display:block}@media (min-width:768px){.note-modal-content{margin:30px auto;width:600px}}@media (min-width:992px){.note-modal-content-large{width:900px}}.note-modal .note-help-block{color:#737373;display:block;margin-bottom:10px;margin-top:5px}.note-modal .note-nav{display:flex;flex-wrap:wrap;list-style:none;margin-bottom:0;padding-left:0}.note-modal .note-nav-link{background-color:transparent;color:#007bff;display:block;padding:.5rem 1rem;text-decoration:none;-webkit-text-decoration-skip:objects}.note-modal .note-nav-link:focus,.note-modal .note-nav-link:hover{color:#0056b3;text-decoration:none}.note-modal .note-nav-link.disabled{color:#868e96}.note-modal .note-nav-tabs{border-bottom:1px solid #ddd}.note-modal .note-nav-tabs .note-nav-item{margin-bottom:-1px}.note-modal .note-nav-tabs .note-nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.note-modal .note-nav-tabs .note-nav-link:focus,.note-modal .note-nav-tabs .note-nav-link:hover{border-color:#e9ecef #e9ecef #ddd}.note-modal .note-nav-tabs .note-nav-link.disabled{background-color:transparent;border-color:transparent;color:#868e96}.note-modal .note-nav-tabs .note-nav-item.show .note-nav-link{background-color:#fff;border-color:#ddd #ddd #fff;color:#495057}.note-modal .note-tab-content{margin:15px auto}.note-modal .note-tab-content>.note-tab-pane,.note-modal .note-tab-content>.note-tab-pane:target~.note-tab-pane:last-child{display:none}.note-modal .note-tab-content>.note-tab-pane:target,.note-modal .note-tab-content>:last-child{display:block}.note-form-group{padding-bottom:20px}.note-form-group:last-child{padding-bottom:0}.note-form-label{color:#42515f;display:block;font-size:16px;font-weight:700;margin-bottom:10px;width:100%}.note-input{background:#fff;border:1px solid #ededef;-ms-box-sizing:border-box;box-sizing:border-box;display:block;font-size:14px;outline:0;padding:6px 4px;width:100%}.note-input::-webkit-input-placeholder{color:#eee}.note-input:-moz-placeholder,.note-input::-moz-placeholder{color:#eee}.note-input:-ms-input-placeholder{color:#eee}.note-tooltip{display:block;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);filter:alpha(opacity=0);font-size:13px;-webkit-opacity:0;-khtml-opacity:0;-moz-opacity:0;opacity:0;position:absolute;transition:opacity .15s;z-index:1070}.note-tooltip.in{-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);filter:alpha(opacity=90);-webkit-opacity:.9;-khtml-opacity:.9;-moz-opacity:.9;opacity:.9}.note-tooltip.top{margin-top:-3px;padding:5px 0}.note-tooltip.right{margin-left:3px;padding:0 5px}.note-tooltip.bottom{margin-top:3px;padding:5px 0}.note-tooltip.left{margin-left:-3px;padding:0 5px}.note-tooltip.bottom .note-tooltip-arrow{border-bottom-color:#000;border-width:0 5px 5px;left:50%;margin-left:-5px;top:0}.note-tooltip.top .note-tooltip-arrow{border-top-color:#000;border-width:5px 5px 0;bottom:0;left:50%;margin-left:-5px}.note-tooltip.right .note-tooltip-arrow{border-right-color:#000;border-width:5px 5px 5px 0;left:0;margin-top:-5px;top:50%}.note-tooltip.left .note-tooltip-arrow{border-left-color:#000;border-width:5px 0 5px 5px;margin-top:-5px;right:0;top:50%}.note-tooltip-arrow{border-color:transparent;border-style:solid;height:0;position:absolute;width:0}.note-tooltip-content{background-color:#000;color:#fff;font-family:sans-serif;max-width:200px;padding:3px 8px;text-align:center}.note-popover{background:#fff;border:1px solid #ccc;display:block;display:none;font-family:sans-serif;font-size:13px;position:absolute;z-index:1060}.note-popover.in{display:block}.note-popover.top{margin-top:-10px;padding:5px 0}.note-popover.right{margin-left:10px;padding:0 5px}.note-popover.bottom{margin-top:10px;padding:5px 0}.note-popover.left{margin-left:-10px;padding:0 5px}.note-popover.bottom .note-popover-arrow{border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25);border-top-width:0;left:20px;margin-left:-10px;top:-11px}.note-popover.bottom .note-popover-arrow:after{border-bottom-color:#fff;border-top-width:0;content:"\0020";margin-left:-10px;top:1px}.note-popover.top .note-popover-arrow{border-bottom-width:0;border-top-color:#999;border-top-color:rgba(0,0,0,.25);bottom:-11px;left:20px;margin-left:-10px}.note-popover.top .note-popover-arrow:after{border-bottom-width:0;border-top-color:#fff;bottom:1px;content:"\0020";margin-left:-10px}.note-popover.right .note-popover-arrow{border-left-width:0;border-right-color:#999;border-right-color:rgba(0,0,0,.25);left:-11px;margin-top:-10px;top:50%}.note-popover.right .note-popover-arrow:after{border-left-width:0;border-right-color:#fff;content:"\0020";left:1px;margin-top:-10px}.note-popover.left .note-popover-arrow{border-left-color:#999;border-left-color:rgba(0,0,0,.25);border-right-width:0;margin-top:-10px;right:-11px;top:50%}.note-popover.left .note-popover-arrow:after{border-left-color:#fff;border-right-width:0;content:"\0020";margin-top:-10px;right:1px}.note-popover-arrow{border:11px solid transparent;height:0;position:absolute;width:0}.note-popover-arrow:after{border:10px solid transparent;content:"\0020";display:block;height:0;position:absolute;width:0}.note-popover-content{background-color:#fff;color:#000;min-height:30px;min-width:100px;padding:3px 8px;text-align:center}.note-editor{position:relative}.note-editor .note-dropzone{background-color:#fff;color:#87cefa;display:none;opacity:.95;position:absolute;z-index:100}.note-editor .note-dropzone .note-dropzone-message{display:table-cell;font-size:28px;font-weight:700;text-align:center;vertical-align:middle}.note-editor .note-dropzone.hover{color:#098ddf}.note-editor.dragover .note-dropzone{display:table}.note-editor .note-editing-area{position:relative}.note-editor .note-editing-area .note-editable{outline:none}.note-editor .note-editing-area .note-editable sup{vertical-align:super}.note-editor .note-editing-area .note-editable sub{vertical-align:sub}.note-editor .note-editing-area .note-editable img.note-float-left{margin-right:10px}.note-editor .note-editing-area .note-editable img.note-float-right{margin-left:10px}.note-editor.note-airframe,.note-editor.note-frame{border:1px solid rgba(0,0,0,.196)}.note-editor.note-airframe.codeview .note-editing-area .note-editable,.note-editor.note-frame.codeview .note-editing-area .note-editable{display:none}.note-editor.note-airframe.codeview .note-editing-area .note-codable,.note-editor.note-frame.codeview .note-editing-area .note-codable{display:block}.note-editor.note-airframe .note-editing-area,.note-editor.note-frame .note-editing-area{overflow:hidden}.note-editor.note-airframe .note-editing-area .note-editable,.note-editor.note-frame .note-editing-area .note-editable{overflow:auto;padding:10px;word-wrap:break-word}.note-editor.note-airframe .note-editing-area .note-editable[contenteditable=false],.note-editor.note-frame .note-editing-area .note-editable[contenteditable=false]{background-color:hsla(0,0%,50%,.114)}.note-editor.note-airframe .note-editing-area .note-codable,.note-editor.note-frame .note-editing-area .note-codable{background-color:#222;border:none;border-radius:0;box-shadow:none;-ms-box-sizing:border-box;box-sizing:border-box;color:#ccc;display:none;font-family:Menlo,Monaco,monospace,sans-serif;font-size:14px;margin-bottom:0;outline:none;padding:10px;resize:none;width:100%}.note-editor.note-airframe.fullscreen,.note-editor.note-frame.fullscreen{left:0;position:fixed;top:0;width:100%!important;z-index:1050}.note-editor.note-airframe.fullscreen .note-resizebar,.note-editor.note-frame.fullscreen .note-resizebar{display:none}.note-editor.note-airframe .note-status-output,.note-editor.note-frame .note-status-output{border:0;border-top:1px solid #e2e2e2;color:#000;display:block;font-size:14px;height:20px;line-height:1.42857143;margin-bottom:0;width:100%}.note-editor.note-airframe .note-status-output:empty,.note-editor.note-frame .note-status-output:empty{border-top:0 solid transparent;height:0}.note-editor.note-airframe .note-status-output .pull-right,.note-editor.note-frame .note-status-output .pull-right{float:right!important}.note-editor.note-airframe .note-status-output .text-muted,.note-editor.note-frame .note-status-output .text-muted{color:#777}.note-editor.note-airframe .note-status-output .text-primary,.note-editor.note-frame .note-status-output .text-primary{color:#286090}.note-editor.note-airframe .note-status-output .text-success,.note-editor.note-frame .note-status-output .text-success{color:#3c763d}.note-editor.note-airframe .note-status-output .text-info,.note-editor.note-frame .note-status-output .text-info{color:#31708f}.note-editor.note-airframe .note-status-output .text-warning,.note-editor.note-frame .note-status-output .text-warning{color:#8a6d3b}.note-editor.note-airframe .note-status-output .text-danger,.note-editor.note-frame .note-status-output .text-danger{color:#a94442}.note-editor.note-airframe .note-status-output .alert,.note-editor.note-frame .note-status-output .alert{background-color:#f5f5f5;border-radius:0;color:#000;margin:-7px 0 0;padding:7px 10px 2px}.note-editor.note-airframe .note-status-output .alert .note-icon,.note-editor.note-frame .note-status-output .alert .note-icon{margin-right:5px}.note-editor.note-airframe .note-status-output .alert-success,.note-editor.note-frame .note-status-output .alert-success{background-color:#dff0d8!important;color:#3c763d!important}.note-editor.note-airframe .note-status-output .alert-info,.note-editor.note-frame .note-status-output .alert-info{background-color:#d9edf7!important;color:#31708f!important}.note-editor.note-airframe .note-status-output .alert-warning,.note-editor.note-frame .note-status-output .alert-warning{background-color:#fcf8e3!important;color:#8a6d3b!important}.note-editor.note-airframe .note-status-output .alert-danger,.note-editor.note-frame .note-status-output .alert-danger{background-color:#f2dede!important;color:#a94442!important}.note-editor.note-airframe .note-statusbar,.note-editor.note-frame .note-statusbar{background-color:hsla(0,0%,50%,.114);border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid rgba(0,0,0,.196)}.note-editor.note-airframe .note-statusbar .note-resizebar,.note-editor.note-frame .note-statusbar .note-resizebar{cursor:ns-resize;height:9px;padding-top:1px;width:100%}.note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar,.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar{border-top:1px solid rgba(0,0,0,.196);margin:1px auto;width:20px}.note-editor.note-airframe .note-statusbar.locked .note-resizebar,.note-editor.note-frame .note-statusbar.locked .note-resizebar{cursor:default}.note-editor.note-airframe .note-statusbar.locked .note-resizebar .note-icon-bar,.note-editor.note-frame .note-statusbar.locked .note-resizebar .note-icon-bar{display:none}.note-editor.note-airframe .note-placeholder,.note-editor.note-frame .note-placeholder{padding:10px}.note-editor.note-airframe{border:0}.note-editor.note-airframe .note-editing-area .note-editable{padding:0}.note-popover.popover{display:none;max-width:none}.note-popover.popover .popover-content a{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.note-popover.popover .arrow{left:20px!important}.note-toolbar{position:relative}.note-editor .note-toolbar,.note-popover .popover-content{margin:0;padding:0 0 5px 5px}.note-editor .note-toolbar>.note-btn-group,.note-popover .popover-content>.note-btn-group{margin-left:0;margin-right:5px;margin-top:5px}.note-editor .note-toolbar .note-btn-group .note-table,.note-popover .popover-content .note-btn-group .note-table{min-width:0;padding:5px}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker{font-size:18px}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher{cursor:pointer;height:10em;position:absolute!important;width:10em;z-index:3}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;height:5em;position:relative!important;width:5em;z-index:1}.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted,.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat;height:1em;position:absolute!important;width:1em;z-index:2}.note-editor .note-toolbar .note-style .dropdown-style blockquote,.note-editor .note-toolbar .note-style .dropdown-style pre,.note-popover .popover-content .note-style .dropdown-style blockquote,.note-popover .popover-content .note-style .dropdown-style pre{margin:0;padding:5px 10px}.note-editor .note-toolbar .note-style .dropdown-style h1,.note-editor .note-toolbar .note-style .dropdown-style h2,.note-editor .note-toolbar .note-style .dropdown-style h3,.note-editor .note-toolbar .note-style .dropdown-style h4,.note-editor .note-toolbar .note-style .dropdown-style h5,.note-editor .note-toolbar .note-style .dropdown-style h6,.note-editor .note-toolbar .note-style .dropdown-style p,.note-popover .popover-content .note-style .dropdown-style h1,.note-popover .popover-content .note-style .dropdown-style h2,.note-popover .popover-content .note-style .dropdown-style h3,.note-popover .popover-content .note-style .dropdown-style h4,.note-popover .popover-content .note-style .dropdown-style h5,.note-popover .popover-content .note-style .dropdown-style h6,.note-popover .popover-content .note-style .dropdown-style p{margin:0;padding:0}.note-editor .note-toolbar .note-color-all .note-dropdown-menu,.note-popover .popover-content .note-color-all .note-dropdown-menu{min-width:337px}.note-editor .note-toolbar .note-color .dropdown-toggle,.note-popover .popover-content .note-color .dropdown-toggle{padding-left:5px;width:20px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette{display:inline-block;margin:0;width:160px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette:first-child,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette:first-child{margin:0 5px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title{border-bottom:1px solid #eee;font-size:12px;margin:2px 7px;text-align:center}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select{border-radius:5px;cursor:pointer;font-size:11px;margin:3px;padding:0 3px;width:100%}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select:hover,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select:hover{background:#eee}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-row,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-row{height:20px}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select-btn,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select-btn{display:none}.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn{border:1px solid #eee}.note-editor .note-toolbar .note-para .note-dropdown-menu,.note-popover .popover-content .note-para .note-dropdown-menu{min-width:228px;padding:5px}.note-editor .note-toolbar .note-para .note-dropdown-menu>div+div,.note-popover .popover-content .note-para .note-dropdown-menu>div+div{margin-left:5px}.note-editor .note-toolbar .note-dropdown-menu,.note-popover .popover-content .note-dropdown-menu{min-width:160px}.note-editor .note-toolbar .note-dropdown-menu.right,.note-popover .popover-content .note-dropdown-menu.right{left:auto;right:0}.note-editor .note-toolbar .note-dropdown-menu.right:before,.note-popover .popover-content .note-dropdown-menu.right:before{left:auto!important;right:9px}.note-editor .note-toolbar .note-dropdown-menu.right:after,.note-popover .popover-content .note-dropdown-menu.right:after{left:auto!important;right:10px}.note-editor .note-toolbar .note-dropdown-menu.note-check a i,.note-popover .popover-content .note-dropdown-menu.note-check a i{color:#00bfff;visibility:hidden}.note-editor .note-toolbar .note-dropdown-menu.note-check a.checked i,.note-popover .popover-content .note-dropdown-menu.note-check a.checked i{visibility:visible}.note-editor .note-toolbar .note-fontsize-10,.note-popover .popover-content .note-fontsize-10{font-size:10px}.note-editor .note-toolbar .note-color-palette,.note-popover .popover-content .note-color-palette{line-height:1}.note-editor .note-toolbar .note-color-palette div .note-color-btn,.note-popover .popover-content .note-color-palette div .note-color-btn{border:0;border-radius:0;height:20px;margin:0;padding:0;width:20px}.note-editor .note-toolbar .note-color-palette div .note-color-btn:hover,.note-popover .popover-content .note-color-palette div .note-color-btn:hover{transform:scale(1.2);transition:all .2s}.note-modal .modal-dialog{border-radius:5px;box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0}.note-modal .form-group{margin-left:0;margin-right:0}.note-modal .note-modal-form{margin:0}.note-modal .note-image-dialog .note-dropzone{border:4px dashed #d3d3d3;color:#d3d3d3;font-size:30px;line-height:4;margin-bottom:10px;min-height:100px;text-align:center}.note-placeholder{color:gray;display:none;position:absolute}.note-handle .note-control-selection{border:1px solid #000;display:none;position:absolute}.note-handle .note-control-selection>div{position:absolute}.note-handle .note-control-selection .note-control-selection-bg{background-color:#000;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);filter:alpha(opacity=30);height:100%;-webkit-opacity:.3;-khtml-opacity:.3;-moz-opacity:.3;opacity:.3;width:100%}.note-handle .note-control-selection .note-control-handle,.note-handle .note-control-selection .note-control-holder,.note-handle .note-control-selection .note-control-sizing{border:1px solid #000;height:7px;width:7px}.note-handle .note-control-selection .note-control-sizing{background-color:#000}.note-handle .note-control-selection .note-control-nw{border-bottom:none;border-right:none;left:-5px;top:-5px}.note-handle .note-control-selection .note-control-ne{border-bottom:none;border-left:none;right:-5px;top:-5px}.note-handle .note-control-selection .note-control-sw{border-right:none;border-top:none;bottom:-5px;left:-5px}.note-handle .note-control-selection .note-control-se{bottom:-5px;cursor:se-resize;right:-5px}.note-handle .note-control-selection .note-control-se.note-control-holder{border-left:none;border-top:none;cursor:default}.note-handle .note-control-selection .note-control-selection-info{background-color:#000;border-radius:5px;bottom:0;color:#fff;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);filter:alpha(opacity=70);font-size:12px;margin:5px;-webkit-opacity:.7;-khtml-opacity:.7;-moz-opacity:.7;opacity:.7;padding:5px;right:0}.note-hint-popover{min-width:100px;padding:2px}.note-hint-popover .popover-content{max-height:150px;overflow:auto;padding:3px}.note-hint-popover .popover-content .note-hint-group .note-hint-item{display:block!important;padding:3px}.note-hint-popover .popover-content .note-hint-group .note-hint-item.active,.note-hint-popover .popover-content .note-hint-group .note-hint-item:hover{background-color:#428bca;clear:both;color:#fff;cursor:pointer;display:block;font-weight:400;line-height:1.4;outline:0;text-decoration:none;white-space:nowrap}body .note-fullscreen-body,html .note-fullscreen-body{overflow:hidden!important}.note-editable ol li,.note-editable ul li{list-style-position:inside}.note-editor .note-editing-area .note-editable table{border-collapse:collapse;width:100%}.note-editor .note-editing-area .note-editable table td,.note-editor .note-editing-area .note-editable table th{border:1px solid #ececec;padding:5px 3px}.note-editor .note-editing-area .note-editable a{background-color:inherit;color:#337ab7;font-family:inherit;font-weight:inherit;text-decoration:inherit}.note-editor .note-editing-area .note-editable a:focus,.note-editor .note-editing-area .note-editable a:hover{color:#23527c;outline:0;text-decoration:underline}.note-editor .note-editing-area .note-editable figure{margin:0}.note-modal .note-modal-body label{display:inline-block;margin-bottom:2px;padding:2px 5px}.note-modal .note-modal-body .help-list-item:hover{background-color:#e0e0e0}@-moz-document url-prefix(){.note-modal .note-image-input{height:auto}}.help-list-item label{display:inline-block;margin-bottom:5px}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/animation.css ***!
  \**********************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
.bounce,
.hatch {
    transform-origin: 50% 100%
}

.floating,
.pulse {
    animation-iteration-count: infinite
}

.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important
}

.slideLeft,
.slideUp {
    animation-duration: 1s;
    visibility: visible !important
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }

    50% {
        transform: translateY(8%)
    }

    65% {
        transform: translateY(-4%)
    }

    80% {
        transform: translateY(4%)
    }

    95% {
        transform: translateY(-2%)
    }

    100% {
        transform: translateY(0)
    }
}

.slideUp {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease
}

@keyframes slideUp {
    0% {
        transform: translateY(100%)
    }

    50% {
        transform: translateY(-8%)
    }

    65% {
        transform: translateY(4%)
    }

    80% {
        transform: translateY(-4%)
    }

    95% {
        transform: translateY(2%)
    }

    100% {
        transform: translateY(0)
    }
}

.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%)
    }

    50% {
        transform: translateX(-8%)
    }

    65% {
        transform: translateX(4%)
    }

    80% {
        transform: translateX(-4%)
    }

    95% {
        transform: translateX(2%)
    }

    100% {
        transform: translateX(0)
    }
}

.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important
}

.expandOpen,
.slideExpandUp {
    animation-timing-function: ease-out;
    visibility: visible !important
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%)
    }

    50% {
        transform: translateX(8%)
    }

    65% {
        transform: translateX(-4%)
    }

    80% {
        transform: translateX(4%)
    }

    95% {
        transform: translateX(-2%)
    }

    100% {
        transform: translateX(0)
    }
}

.slideExpandUp {
    animation-name: slideExpandUp;
    -webkit-animation-name: slideExpandUp;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    -webkit-animation-timing-function: ease -out
}

@keyframes slideExpandUp {
    0% {
        transform: translateY(100%) scaleX(.5)
    }

    30% {
        transform: translateY(-8%) scaleX(.5)
    }

    40% {
        transform: translateY(2%) scaleX(.5)
    }

    50% {
        transform: translateY(0) scaleX(1.1)
    }

    60% {
        transform: translateY(0) scaleX(.9)
    }

    70% {
        transform: translateY(0) scaleX(1.05)
    }

    80% {
        transform: translateY(0) scaleX(.95)
    }

    90% {
        transform: translateY(0) scaleX(1.02)
    }

    100% {
        transform: translateY(0) scaleX(1)
    }
}

.expandUp {
    animation-name: expandUp;
    -webkit-animation-name: expandUp;
    animation-duration: .7s;
    -webkit-animation-duration: .7s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important
}

.fadeIn,
.pulse {
    animation-duration: 1s
}

@keyframes expandUp {
    0% {
        transform: translateY(100%) scale(.6) scaleY(.5)
    }

    60% {
        transform: translateY(-7%) scaleY(1.12)
    }

    75% {
        transform: translateY(3%)
    }

    100% {
        transform: translateY(0) scale(1) scaleY(1)
    }
}

.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0
    }

    60% {
        transform: scale(1.1)
    }

    80% {
        transform: scale(.9);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.expandOpen {
    animation-name: expandOpen;
    -webkit-animation-name: expandOpen;
    animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-timing-function: ease-out
}

.bigEntrance,
.pullUp {
    animation-timing-function: ease-out
}

@keyframes expandOpen {
    0% {
        transform: scale(1.8)
    }

    50% {
        transform: scale(.95)
    }

    80% {
        transform: scale(1.05)
    }

    90% {
        transform: scale(.98)
    }

    100% {
        transform: scale(1)
    }
}

.bigEntrance {
    animation-name: bigEntrance;
    -webkit-animation-name: bigEntrance;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important
}

@keyframes bigEntrance {
    0% {
        transform: scale(.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: .2
    }

    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
        opacity: 1
    }

    45% {
        transform: scale(.98) rotate(1deg) translateX(0) translateY(0);
        opacity: 1
    }

    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0) translateY(0);
        opacity: 1
    }

    75% {
        transform: scale(.99) rotate(1deg) translateX(0) translateY(0);
        opacity: 1
    }

    90% {
        transform: scale(1.01) rotate(0) translateX(0) translateY(0);
        opacity: 1
    }

    100% {
        transform: scale(1) rotate(0) translateX(0) translateY(0);
        opacity: 1
    }
}

.hatch {
    animation-name: hatch;
    -webkit-animation-name: hatch;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    visibility: visible !important
}

@keyframes hatch {
    0% {
        transform: rotate(0) scaleY(.6)
    }

    20% {
        transform: rotate(-2deg) scaleY(1.05)
    }

    35% {
        transform: rotate(2deg) scaleY(1)
    }

    50% {
        transform: rotate(-2deg)
    }

    65% {
        transform: rotate(1deg)
    }

    80% {
        transform: rotate(-1deg)
    }

    100% {
        transform: rotate(0)
    }
}

.bounce {
    animation-name: bounce;
    -webkit-animation-name: bounce;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%
}

@keyframes bounce {
    0% {
        transform: translateY(0) scaleY(.6)
    }

    60% {
        transform: translateY(-100%) scaleY(1.1)
    }

    70% {
        transform: translateY(0) scaleY(.95) scaleX(1.05)
    }

    80% {
        transform: translateY(0) scaleY(1.05) scaleX(1)
    }

    90% {
        transform: translateY(0) scaleY(.95) scaleX(1)
    }

    100% {
        transform: translateY(0) scaleY(1) scaleX(1)
    }
}

.pulse {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite
}

.floating,
.stretchLeft {
    animation-duration: 1.5s
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(.9);
        opacity: .7
    }

    50% {
        transform: scale(1);
        opacity: 1
    }
}

.floating {
    animation-name: floating;
    -webkit-animation-name: floating;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(8%)
    }
}

.tossing {
    animation-name: tossing;
    -webkit-animation-name: tossing;
    animation-duration: 2.5s;
    -webkit-animation-duration: 2.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes tossing {

    0%,
    100% {
        transform: rotate(-4deg)
    }

    50% {
        transform: rotate(4deg)
    }
}

.pullUp {
    animation-name: pullUp;
    -webkit-animation-name: pullUp;
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%
}

.pullDown,
.stretchLeft {
    animation-timing-function: ease-out
}

@keyframes pullUp {
    0% {
        transform: scaleY(.1)
    }

    40% {
        transform: scaleY(1.02)
    }

    60% {
        transform: scaleY(.98)
    }

    80% {
        transform: scaleY(1.01)
    }

    100% {
        transform: scaleY(1)
    }
}

.pullDown {
    animation-name: pullDown;
    -webkit-animation-name: pullDown;
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%
}

@keyframes pullDown {
    0% {
        transform: scaleY(.1)
    }

    40% {
        transform: scaleY(1.02)
    }

    60% {
        transform: scaleY(.98)
    }

    80% {
        transform: scaleY(1.01)
    }

    100% {
        transform: scaleY(1)
    }
}

.stretchLeft {
    animation-name: stretchLeft;
    -webkit-animation-name: stretchLeft;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%
}

@keyframes stretchLeft {
    0% {
        transform: scaleX(.3)
    }

    40% {
        transform: scaleX(1.02)
    }

    60% {
        transform: scaleX(.98)
    }

    80% {
        transform: scaleX(1.01)
    }

    100% {
        transform: scaleX(1)
    }
}

.stretchRight {
    animation-name: stretchRight;
    -webkit-animation-name: stretchRight;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%
}

@keyframes stretchRight {
    0% {
        transform: scaleX(.3)
    }

    40% {
        transform: scaleX(1.02)
    }

    60% {
        transform: scaleX(.98)
    }

    80% {
        transform: scaleX(1.01)
    }

    100% {
        transform: scaleX(1)
    }
}

.pulsate {
    animation: 1s ease-out infinite pulsate;
    opacity: 1
}

.bell {
    display: block;
    width: 40px;
    height: 40px;
    font-size: 40px;
    margin: 5px auto 0;
    color: #9e9e9e;
    -webkit-animation: 4s ease-in-out .7s infinite ring;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: 4s ease-in-out .7s infinite ring;
    -moz-transform-origin: 50% 4px;
    animation: 4s ease-in-out .7s infinite ring;
    transform-origin: 50% 4px
}

@keyframes ring {

    0%,
    100%,
    43% {
        transform: rotate(0)
    }

    1%,
    9% {
        transform: rotate(30deg)
    }

    11%,
    3% {
        transform: rotate(-28deg)
    }

    5% {
        transform: rotate(34deg)
    }

    7% {
        transform: rotate(-32deg)
    }

    13% {
        transform: rotate(26deg)
    }

    15% {
        transform: rotate(-24deg)
    }

    17% {
        transform: rotate(22deg)
    }

    19% {
        transform: rotate(-20deg)
    }

    21% {
        transform: rotate(18deg)
    }

    23% {
        transform: rotate(-16deg)
    }

    25% {
        transform: rotate(14deg)
    }

    27% {
        transform: rotate(-12deg)
    }

    29% {
        transform: rotate(10deg)
    }

    31% {
        transform: rotate(-8deg)
    }

    33% {
        transform: rotate(6deg)
    }

    35% {
        transform: rotate(-4deg)
    }

    37% {
        transform: rotate(2deg)
    }

    39% {
        transform: rotate(-1deg)
    }

    41% {
        transform: rotate(1deg)
    }
}

@keyframes fadeinbackdrop {
    to {
        opacity: 0.6
    }
}

.slide-left {
    animation-duration: 1s;
    visibility: visible !important
}
.slide-left {
    animation-name: slide-left;
    -webkit-animation-name: slide-left;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out
}

@keyframes slide-left {
    0% {
        transform: translateX(100%)
    }
}

[dir="rtl"] .slide-left {
    animation-duration: 1s;
    visibility: visible !important
}
[dir="rtl"] .slide-left {
    animation-name: slide-right;
    -webkit-animation-name: slide-right;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out
}

@keyframes slide-right {
    0% {
        transform: translateX(-100%)
    }
}

/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/site.css?ngGlobalStyle (2) ***!
  \***********************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/****************************************
    Author: Heavycoders
    URL: https://heavycoders.com

    CSS Contents
    1. General CSS
    2. Cards
    3. Tables
    4. Modals
    5. Buttons
    6. Dropdowns
    7. Top Navbar
    8. Sidebar Layout
    9. Drawer Layout
    10. Swal Library CSS
    11. Datatable Library CSS
    12. Theme Customizer
    13. Invoice
    14. POS
    15. Product
    16. Invoice
****************************************/

/* VERSION: 2025-12-14-POS-HEADER-ICONS-v5-CRITICAL */

/* CRITICAL: Ensure header icons are always clickable */
header .btn-icon,
header button.btn-icon,
.app-navbar .btn-icon,
.app-navbar button,
.app-navbar .btn,
.menu-toggle,
button.menu-toggle {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-flex !important;
    z-index: 9999 !important;
}

/* CRITICAL: Ensure POS screens are always visible */
.pos-container,
.pos-content-area,
.pos-wrapper,
[class*="pos-"],
app-pos,
.modules-pos {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================
   CRITICAL FIX: Hide ALL menu content in main
   This must be at the top to override everything
   MAXIMUM PRIORITY - HIDE SIDEBAR MENU IN MAIN
   ============================================ */
body.sidebar-layout main .app-menu,
body.sidebar-layout main aside.app-menu,
body.sidebar-layout main>.app-menu,
body.sidebar-layout main>aside.app-menu,
body.sidebar-layout main * .app-menu,
body.sidebar-layout main router-outlet~.app-menu,
body.sidebar-layout main router-outlet+.app-menu,
body.sidebar-layout main app-admin-dashboard~.app-menu,
body.sidebar-layout main app-admin-dashboard+.app-menu,
/* ONLY hide the app-menu if it appears inside main (wrong place), NOT the actual sidebar */
.sidebar-layout main>aside.app-menu,
.sidebar-layout main aside.app-menu:not(.sidebar-mini .app-menu) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
}

/* CRITICAL: Ensure the ACTUAL sidebar menu is visible */
body.sidebar-layout>aside.app-menu,
body.sidebar-layout aside.app-menu,
.sidebar-layout aside.app-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: fixed !important;
    pointer-events: auto !important;
}

/* CRITICAL: Hide ALL children of menu elements in main */
/* REMOVED: This was hiding dropdown menu items */

/* REMOVED: These rules were hiding dropdown menus and breaking buttons */

/* REMOVED: Footer is hidden anyway, these rules were breaking dropdowns */

/* REMOVED: This was part of the navigation hiding logic, but it's now handled by aside.app-menu selector */

/* CRITICAL: When sidebar is toggled, ensure menu doesn't appear in main */
/* REMOVED: This was hiding dropdown menus and action menus */

/* CRITICAL: Ensure main element itself doesn't contain menu */
.sidebar-layout main {
    /* Ensure main doesn't accidentally contain sidebar menu */
    /* REMOVED: contain property was clipping fixed-position submenus! */
}

/* CRITICAL: Nuclear option - hide ANY list items in main that look like menu items */
.sidebar-layout main ul>li>a[routerLink],
.sidebar-layout main ul>li>a[href*="/"],
.sidebar-layout main ul>li>div[style*="font-size"],
.sidebar-layout main ul>li>div[style*="padding"] {
    /* Only hide if they're in a structure that looks like a menu */
}

/* REMOVED: All these rules were hiding legitimate content like reports lists and dropdown menus */


/****************************************
* 1. General CSS Start
* VERSION: 2025-12-14-MODAL-FIX-v3-FINAL
* FORCE REFRESH: Press Ctrl+F5 or Clear Cache
* FIX: Removed 'contain' property that was clipping modals
****************************************/

/* Importing Font Awesome And CSS */
/* Font Awesome is now loaded directly in index.html for better reliability */

/* Global Icon Visibility Fixes */
i.fa,
i[class*="fa-"],
i[class^="fa "] {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

i.feather,
i[class*="feather"],
i[class*="icon-"] {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

i.bi,
i[class*="bi-"] {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

/* Variables */
:root {
    --colorPrimary: #fd7e14;
    --colorPrimaryShadow: transparent;
    --colorPrimaryLight: #fed5b3;
    --colorPrimaryDark: #e46902;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fff8f3;
    --colorOnSurface: #212529;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
    --colorBorderBefore: linear-gradient(45deg, transparent, transparent, transparent, transparent, transparent, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px transparent;
    --windowBackgroundGD: radial-gradient(circle, transparent 0%, transparent, transparent 100%);
    --colorWindowBackground: #fff8f3;
    --colorBackgroundGD: radial-gradient(circle, transparent 0%, transparent, transparent 100%);
    --colorBackground: #ffffff;
}

.theme-default {
    --colorPrimary: #1dbf73;
    --colorPrimaryShadow: transparent;
    --colorPrimaryLight: #63f3a2;
    --colorPrimaryDark: #008d47;
    --colorOnPrimary: #ffffff;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fcfffe;
    --colorOnSurface: #212529;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
    --colorBorderBefore: linear-gradient(45deg, transparent, transparent, transparent, transparent, transparent, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px transparent;
    --windowBackgroundGD: radial-gradient(circle, transparent 0%, transparent, transparent 100%);
    --colorWindowBackground: #fcfffe;
    --colorBackgroundGD: radial-gradient(circle, transparent 0%, transparent, transparent 100%);
    --colorBackground: #ffffff;
}

.theme-1 {
    --colorPrimary: #4885ed;
    --colorPrimaryLight: #b9d1f8;
    --colorPrimaryDark: #155ad1;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #f4f8fe;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #f4f8fe;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-2 {
    --colorPrimary: #b78961;
    --colorPrimaryLight: #e7d8ca;
    --colorPrimaryDark: #9e6f48;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fbf9f6;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fbf9f6;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-3 {
    --colorPrimary: #a7e92f;
    --colorPrimaryLight: #e5f8c1;
    --colorPrimaryDark: #96d22a;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fbfef7;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fbfef7;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.upload-dropzone {
    border: 2px dashed var(--colorBorder);
    border-radius: 10px;
    padding: 28px;
    text-align: center;
    background-color: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.upload-dropzone.drag-over,
.upload-dropzone.has-file {
    border-color: var(--colorPrimary);
    background-color: rgba(253, 126, 20, 0.08);
    box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.1);
}

.upload-dropzone .upload-link {
    color: var(--colorPrimary);
    text-decoration: underline;
    cursor: pointer;
}

.theme-4 {
    --colorPrimary: #6610f2;
    --colorPrimaryLight: #711ef7;
    --colorPrimaryDark: #5e0ae4;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #f7f7ff;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #f7f7ff;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-5 {
    --colorPrimary: #dc3545;
    --colorPrimaryLight: #f4bec3;
    --colorPrimaryDark: #981a26;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fdf4f5;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fdf4f5;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-6 {
    --colorPrimary: #D84797;
    --colorPrimaryLight: #f2c0db;
    --colorPrimaryDark: #bd287a;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fdf5f9;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fdf5f9;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-7 {
    --colorPrimary: #0B5563;
    --colorPrimaryLight: #30a1b8;
    --colorPrimaryDark: #084753;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #f7f7ff;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #f7f7ff;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-8 {
    --colorPrimary: #fd7e14;
    --colorPrimaryLight: #fed5b3;
    --colorPrimaryDark: #e46902;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fff8f3;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fff8f3;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-9 {
    --colorPrimary: #034336;
    --colorPrimaryLight: #24bb9d;
    --colorPrimaryDark: #01382d;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fbfffe;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fbfffe;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-10 {
    --colorPrimary: #00296b;
    --colorPrimaryLight: #4e8bee;
    --colorPrimaryDark: #002258;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fafcff;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #f7f7ff;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-11 {
    --colorPrimary: #17a2b8;
    --colorPrimaryLight: #bbeef6;
    --colorPrimaryDark: #148c9f;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #f4fcfe;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #f4fcfe;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-12 {
    --colorPrimary: #8233e6;
    --colorPrimaryLight: #d5bbf7;
    --colorPrimaryDark: #3a0e72;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fcfaff;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fcfaff;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-13 {
    --colorPrimary: #ffba08;
    --colorPrimaryLight: #ffeab5;
    --colorPrimaryDark: #e6a707;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #fffbf0;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #fffbf0;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-14 {
    --colorPrimary: #9aaca4;
    --colorPrimaryLight: #cdd6d2;
    --colorPrimaryDark: #8b9b94;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #f5f7f6;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #f5f7f6;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-15 {
    --colorPrimary: #415a77;
    --colorPrimaryLight: #b3bdc9;
    --colorPrimaryDark: #3b516b;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #eceff1;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #eceff1;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-16 {
    --colorPrimary: #00d1a7;
    --colorPrimaryLight: #b3f1e5;
    --colorPrimaryDark: #00bc96;
    --colorOnPrimary: #fffffff2;
    --colorOnPrimaryLight: #000;
    --colorSurface: #f3fdfb;
    --colorOnSurface: #212529;
    --colorBackground: #ffffff;
    --colorWindowBackground: #f3fdfb;
    --colorTextPrimary: #2b2b2b;
    --colorTextLight: #5d5d5d;
    --colorBorder: rgba(145, 158, 171, .32);
}

.theme-glass-1 {
    --colorPrimary: #4deeeb;
    --colorPrimaryShadow: #4deeea;
    --colorPrimaryLight: #b3f1e5;
    --colorPrimaryDark: #41cfcd;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #4deeeb;
    --colorTextPrimary: #4deeeb;
    --colorTextLight: #4deeea;
    --colorBorder: #4deeeb23;
    --colorBorderBefore: linear-gradient(45deg, transparent, #4debe74d, #4deeea99, #4deeea99, #4deeea4d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #4deeea;
    --windowBackgroundGD: radial-gradient(circle, rgb(18, 55, 61) 0%, #121923, #121923 100%);
    --colorWindowBackground: #4deeea1a;
    --colorBackgroundGD: radial-gradient(circle, rgb(18, 55, 61) 0%, #121923, #121923 100%);
    --colorBackground: transparent;
}

.theme-glass-2 {
    --colorPrimary: #e14dee;
    --colorPrimaryShadow: #e14dee;
    --colorPrimaryLight: #efb3f1;
    --colorPrimaryDark: #ca41cf;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #ee4dee;
    --colorTextPrimary: #ee4de6;
    --colorTextLight: #ee4dee;
    --colorBorder: #ee4de623;
    --colorBorderBefore: linear-gradient(45deg, transparent, #de4deb4d, #e14dee99, #e94dee99, #ee4de64d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #e94dee;
    --windowBackgroundGD: radial-gradient(circle, rgb(61, 18, 61) 0%, #221223, #211223 100%);
    --colorWindowBackground: #ee4dee1a;
    --colorBackgroundGD: radial-gradient(circle, rgb(61, 18, 61) 0%, #221223, #231223 100%);
    --colorBackground: transparent;
}

.theme-glass-3 {
    --colorPrimary: #ee4d90;
    --colorPrimaryShadow: #ee4d8b;
    --colorPrimaryLight: #f1b3cd;
    --colorPrimaryDark: #cf417c;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #ee4d8b;
    --colorTextPrimary: #ee4d83;
    --colorTextLight: #ee4d8b;
    --colorBorder: #ee4d8b23;
    --colorBorderBefore: linear-gradient(45deg, transparent, #eb4d8f4d, #ee4d9d99, #ee4da699, #ee4d9d4d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #ee4d98;
    --windowBackgroundGD: radial-gradient(circle, rgb(61, 18, 36) 0%, #231218, #23121a 100%);
    --colorWindowBackground: #ee4d901a;
    --colorBackgroundGD: radial-gradient(circle, rgb(61, 18, 38) 0%, #23121a, #231219 100%);
    --colorBackground: transparent;
}

.theme-glass-4 {
    --colorPrimary: #4d93ee;
    --colorPrimaryShadow: #4d93ee;
    --colorPrimaryLight: #b3cef1;
    --colorPrimaryDark: #4183cf;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #4d98ee;
    --colorTextPrimary: #4d98ee;
    --colorTextLight: #4da0ee;
    --colorBorder: #4d93ee23;
    --colorBorderBefore: linear-gradient(45deg, transparent, #4d92eb4d, #4d98ee99, #4da0ee99, #4d98ee4d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #4da0ee;
    --windowBackgroundGD: radial-gradient(circle, rgb(18, 38, 61) 0%, #121a23, #121923 100%);
    --colorWindowBackground: #4da0ee1a;
    --colorBackgroundGD: radial-gradient(circle, rgb(18, 37, 61) 0%, #121b23, #121a23 100%);
    --colorBackground: transparent;
}

.theme-glass-5 {
    --colorPrimary: #7bee4d;
    --colorPrimaryShadow: #80ee4d;
    --colorPrimaryLight: #ccf1b3;
    --colorPrimaryDark: #6ecf41;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #80ee4d;
    --colorTextPrimary: #7bee4d;
    --colorTextLight: #8dee4d;
    --colorBorder: #7bee4d23;
    --colorBorderBefore: linear-gradient(45deg, transparent, #7aeb4d4d, #73ee4d99, #7bee4d99, #80ee4d4d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #7bee4d;
    --windowBackgroundGD: radial-gradient(circle, rgb(30, 61, 18) 0%, #162312, #182312 100%);
    --colorWindowBackground: #7bee4d1a;
    --colorBackgroundGD: radial-gradient(circle, rgb(22, 61, 18) 0%, #172312, #152312 100%);
    --colorBackground: transparent;
}

.theme-glass-6 {
    --colorPrimary: #eed64d;
    --colorPrimaryShadow: #eeeb4d;
    --colorPrimaryLight: #f1edb3;
    --colorPrimaryDark: #cfc641;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #eed64d;
    --colorTextPrimary: #eed04d;
    --colorTextLight: #eed04d;
    --colorBorder: #eee34d23;
    --colorBorderBefore: linear-gradient(45deg, transparent, #ebdb4d4d, #eede4d99, #eed64d99, #eede4d4d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #eed04d;
    --windowBackgroundGD: radial-gradient(circle, rgb(61, 55, 18) 0%, #232112, #231f12 100%);
    --colorWindowBackground: #eede4d1a;
    --colorBackgroundGD: radial-gradient(circle, rgb(61, 55, 18) 0%, #232012, #232012 100%);
    --colorBackground: transparent;
}

.theme-glass-7 {
    --colorPrimary: #ee4d4d;
    --colorPrimaryShadow: #ee4d4d;
    --colorPrimaryLight: #f1b3b3;
    --colorPrimaryDark: #cf4141;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #ee4d4d;
    --colorTextPrimary: #ee4d4d;
    --colorTextLight: #ee4d4d;
    --colorBorder: #ee4d4d23;
    --colorBorderBefore: linear-gradient(45deg, transparent, #eb4d4d4d, #ee4d4d99, #ee4d4d99, #ee4d4d4d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #ee4d4d;
    --windowBackgroundGD: radial-gradient(circle, rgb(61, 18, 18) 0%, #231212, #231212 100%);
    --colorWindowBackground: #ee604d1a;
    --colorBackgroundGD: radial-gradient(circle, rgb(61, 18, 18) 0%, #231212, #231212 100%);
    --colorBackground: transparent;
}

.theme-glass-8 {
    --colorPrimary: #eea34d;
    --colorPrimaryShadow: #ee954d;
    --colorPrimaryLight: #f1d4b3;
    --colorPrimaryDark: #cf8d41;
    --colorOnPrimary: #000;
    --colorOnPrimaryLight: #000;
    --colorSurface: #121923;
    --colorOnSurface: #ee8d4d;
    --colorTextPrimary: #eea34d;
    --colorTextLight: #eea34d;
    --colorBorder: #ee9b4d23;
    --colorBorderBefore: linear-gradient(45deg, transparent, #eba74d4d, #ee954d99, #eea84d99, #eea34d4d, transparent);
    --colorBorderBeforeShadow: 0 8px 17px 0px #eea84d;
    --windowBackgroundGD: radial-gradient(circle, rgb(61, 41, 18) 0%, #231c12, #231b12 100%);
    --colorWindowBackground: #ee9b4d1a;
    --colorBackgroundGD: radial-gradient(circle, rgb(61, 44, 18) 0%, #231c12, #231d12 100%);
    --colorBackground: transparent;
}

.dark {
    --colorSurface: #0d1117;
    --colorOnSurface: #96a2b4;
    --colorBackground: #161b22;
    --colorWindowBackground: #0d1117;
    --colorTextPrimary: #b2b9c2;
    --colorTextLight: #b3b3b3;
    --colorBorder: #979da652;
}


/* common css for scroolbar */
/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 4px;
    border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e5e5e58f;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.39);
    background-color: #9090908f;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-transition: background-color 600000s 0s, color 600000s 0s;
    transition: background-color 600000s 0s, color 600000s 0s;
}

html {
    background: transparent;
}

body {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    color: var(--colorTextLight);
    overflow-x: hidden;
    background: var(--windowBackgroundGD);
    background-color: var(--colorWindowBackground);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* CRITICAL: Override body for sidebar-layout to prevent blank space after footer */
body.sidebar-layout {
    background-attachment: scroll !important;
    /* Change from fixed to prevent rendering issues */
    min-height: 0 !important;
    /* Already set above, but ensure it's here too */
    height: auto !important;
    /* Already set above, but ensure it's here too */
}

a {
    color: var(--colorPrimary);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    text-decoration: none;
    font-size: 13px;
}

a:active,
a:focus,
a:hover {
    color: var(--colorPrimary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorTextPrimary);
}

h4 {
    font-size: 17px;
}

p,
ul:not(.list-unstyled),
ol {
    line-height: 22px
}

.ph-100 {
    height: 100px;
}

.float-right {
    float: right;
}

.avatar {
    background: var(--colorPrimary);
    border-radius: 50%;
    color: var(--colorTextPrimary);
}

.min-h-350 {
    min-height: 350px;
}

.fas,
.far,
.fab,
.fal {
    font-size: 13px
}

.shadow-primary {
    box-shadow: 0 2px 6px var(--colorPrimaryLight)
}

.bg-primary {
    background-color: var(--colorPrimary) !important
}

.bg-light {
    background-color: #dfdfdf3d !important
}

.bg-whitesmoke {
    background-color: #dfdfdf3d !important
}

.bg-transparent {
    background-color: #dfdfdf3d !important
}

.bg-primary-transparent {
    background-color: #e2e2e249;
    color: var(--colorPrimary);
}

.bg-warning-transparent {
    background-color: #ff99003a;
    color: #ff9900;
}

.bg-danger-transparent {
    background-color: #ff00003a;
    color: #ff0000;
}

.bg-info-transparent {
    background-color: #00a2ff4d;
    color: #00a2ff;
}

.sticky {
    position: fixed !important;
    top: 0
}

.text-primary,
.text-primary-all *,
.text-primary-all *:before,
.text-primary-all *:after {
    color: var(--colorPrimary) !important
}

.text-on-primary {
    color: var(--colorOnPrimary) !important
}

.text-center {
    text-align: center !important;
}

.shadow {
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1)
}

.border-primary {
    border: 1px solid var(--colorPrimary);
}

.align-items-center {
    align-items: center !important;
}

.summary .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.summary .list-group-item {
    background-color: var(--colorBackground);
    border: 1px solid var(--colorBorder);
    color: var(--colorTextPrimary);
}

/***** Badges **********/
.badges .badge {
    margin: 0 8px 10px 0
}

.badge {
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    padding: 7px 10px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    min-width: 80px;
}

.badge.badge-success {
    background-color: #148110;
    color: #fff;
}

.badge.badge-warning {
    color: #fff;
    background-color: #e79d13;
}

.badge.badge-danger {
    color: #fff;
    background-color: #e81313;
}

.badge.badge-primary {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.badge.badge-red {
    background-color: #e81313;
    color: #ffffff;
}

.badge.badge-black {
    background-color: #000
}

.badge.badge-light {
    background-color: #f2f2f2;
    color: #000
}

.badge.badge-secondary {
    color: #fff;
    background-color: #e79d13;
}

/**** Forms Input CSS *******/

select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
    background: linear-gradient(var(--colorPrimary), var(--colorPrimary));
    background-color: var(--colorPrimary) !important;
    /* for IE */
    color: var(--colorOnPrimary) !important;
}

select:focus>option:checked {
    background: linear-gradient(var(--colorPrimary), var(--colorPrimary));
    background-color: var(--colorPrimary) !important;
    /* for IE */
    color: var(--colorOnPrimary) !important;
}

.form-select:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: none !important;
    outline: none
}

.form-control,
.input-group-text,
.form-select,
.form-check-input,
.selectpicker {
    background-color: var(--colorBackground);
    border-color: var(--colorBorder);
    color: var(--colorOnSurface);
}

.selectpicker {
    display: block;
}

.form-control:focus,
.input-group-text:focus,
.form-select:focus,
.selectpicker {
    background-color: var(--colorSurface);
    border-color: var(--colorPrimary);
    color: var(--colorOnSurface);
}

.form-check-input:checked {
    background-color: var(--colorPrimary);
    border-color: var(--colorPrimaryDark);
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #dee2e630;
    opacity: 0.5;
}

.ng-select.ng-select-opened .ng-select-container {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    z-index: 3 !important;
}

.ng-dropdown-panel {
    margin: 0;
    margin-top: 7px;
    inset-inline-start: 0;
    outline: 1px solid var(--colorBorder);
    background: var(--colorBackgroundGD);
    background-color: var(--colorBackground);
    z-index: 3 !important;
}

.ng-select-container.ng-has-value .ng-placeholder {
    display: none;
}

.ng-select .ng-clear-wrapper {
    inset-inline-end: 0;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    padding: 5px 8px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary) !important;
}

.ng-select.ng-invalid.ng-touched .ng-select-container {
    border-color: var(--colorPrimary);
}

.ng-select .ng-select-container .ng-value-container .ng-input>input {
    color: var(--colorTextPrimary);
}

.ng-select .ng-arrow-wrapper {
    width: 25px;
}

.ng-select.h-icon .ng-arrow-wrapper {
    display: none;
}

.ng-select .ng-arrow-wrapper .ng-arrow {
    border-color: var(--colorTextLight) transparent transparent;
    border-style: solid;
    border-width: 5px 5px 2.5px;
}

.ng-select.ng-select-opened>.ng-select-container .ng-arrow {
    top: -2px;
    border-color: transparent transparent var(--colorTextLight);
    border-width: 0 5px 5px;
    border-style: solid;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
    background-color: var(--colorSurface);
    color: var(--colorTextPrimary);
    margin-inline-end: 3px;
    padding: 0 6px;
}

.d-invtotal {
    font-size: 18px;
    font-weight: 500;
    color: var(--colorPrimary) !important;
}

textarea.form-control {
    height: 64px !important
}

.custom-control {
    line-height: 1.6rem
}

.form-group,
.form-check {
    margin-bottom: 15px
}

.form-group .control-label,
.form-group>label {
    font-weight: 500;
    color: var(--colorTextPrimary);
    font-size: 13px;
}

.form-check>label {
    color: var(--colorTextPrimary);
}

.form-text {
    font-size: 12px;
    line-height: 22px
}

.input-group-text {
    font-size: 14px;
    padding: 10px 15px;
    height: 38px;
}

.form-control,
.input-group-text {
    background-color: var(--colorBackground);
    border-color: var(--colorBorder);
}

.nav-tabs {
    border-bottom: 1px solid var(--colorBorder);
}

.nav-primary.nav-tabs .nav-link {
    color: var(--color-primary);
}

.nav-primary.nav-tabs .nav-link.active {
    background-color: var(--colorBackground);
    color: var(--colorPrimary);
    border-top: 3px solid var(--colorPrimary);
}

/* Image picker */
.image-preview {
    width: 220px;
    height: 220px;
    border: 2px dashed var(--colorBorder);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    background-color: var(--colorBackground);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--colorOnPrimary);
    cursor: pointer;
}

.image-preview label {
    position: absolute;
    z-index: 5;
    opacity: 0.8;
    cursor: pointer;
    background-color: var(--colorPrimary);
    width: 120px;
    height: 40px;
    font-size: 12px;
    line-height: 40px;
    text-transform: uppercase;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    border-radius: 8px;
}

.image-preview input {
    line-height: 200px;
    font-size: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}

.image-preview img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 220px;
    max-height: 220px;
}

.image-upload {
    border: 1px solid var(--colorBorder);
    position: relative;
    margin-bottom: 35px;
    border-radius: 5px;
}

.image-upload .image-uploads {
    text-align: center;
    width: 100%;
    padding: 20px 0;
    border-radius: 5px;
    position: absolute;
    top: 0;
}

.image-upload input[type=file] {
    width: 100%;
    opacity: 0;
    height: 100px;
    position: relative;
    z-index: 9;
    cursor: pointer;
}

.image-upload .image-uploads h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--colorTextLight);
}

.file-upload {
    border: 1px solid var(--colorBorder);
    position: relative;
    margin-bottom: 35px;
    border-radius: 5px;
}

.file-upload .file-uploads {
    text-align: center;
    width: 100%;
    padding: 20px 0;
    border-radius: 5px;
    position: absolute;
    top: 0;
}

.file-upload input[type=file] {
    width: 100%;
    opacity: 0;
    height: 100px;
    position: relative;
    z-index: 9;
    cursor: pointer;
}

.file-upload .file-uploads h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--colorTextLight);
}

.attachment-list .item {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--colorBorder);
}

.attachment-list .icon {
    padding: 10px;
    margin: 0 10px;
    width: 50px;
    height: 50px;
    background-color: var(--colorPrimary);
    border-radius: 50%;
    text-align: center;
}

.attachment-list .icon i {
    font-size: 30px;
    color: var(--colorOnPrimary);
}

.attachment-list .content h4 {
    margin: 0;
    font-size: 14px;
}

.tooltip {
    font-size: 12px
}

.tooltip-inner {
    padding: 7px 13px
}

.quantity-input {
    width: 160px;
}

.border {
    border: 1px solid var(--colorBorder) !important;
}

.border-primary {
    border: 1px solid var(--colorPrimary);
}

.disabled {
    pointer-events: none;
    opacity: .65;
}

/* Page Title */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 15px;
    border-left: 3px solid var(--colorPrimary);
    border-radius: 5px;
    box-shadow: 0 4px 25px 0 rgb(0 0 0 / 2%);
}

.page-header .page-block {
    width: 100%;
}

.page-header .page-header-title {
    display: block;
}

.page-header h4,
.page-header .h4 {
    margin-top: 5px;
    margin-bottom: 2px;
    margin-right: 8px;
    padding-right: 8px;
    font-weight: 500;
    font-size: 18px;
    color: var(--colorTextPrimary);
}

.page-header .breadcrumb {
    padding: 0;
    display: inline-flex;
    margin-bottom: 0;
    background: transparent;
    font-size: 13px;
}

.page-header .breadcrumb a {
    color: var(--colorPrimary);
}

.page-header .breadcrumb .breadcrumb-item:last-child {
    color: var(--colorTextLight);
}

.breadcrumb-item+.breadcrumb-item {
    padding: 0;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding: 0 5px;
    color: var(--colorTextLight);
    content: '\f105';
    font-family: "FontAwesome";
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 575.98px) {
    .page-header .breadcrumb {
        display: flex;
        margin-bottom: 0;
        font-size: 11px;
    }
}

[dir="rtl"] .page-header {
    border-left: 0;
    border-right: 3px solid var(--colorPrimary);
    padding-left: initial;
    padding-right: 15px;
}

[dir="rtl"] .page-header h4,
.page-header .h4 {
    margin-left: 8px;
    margin-right: initial;
    padding-left: 8px;
    padding-right: initial;
}

[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
    content: '\f104';
    font-family: "FontAwesome";
}

/* Profile widget style start */
.profile-widget .profile-widget-picture {
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
    float: left;
    width: 100px;
    margin: -35px -5px 0 30px;
    position: relative;
    z-index: 1;
    background-color: var(--colorPrimary);
}

.profile-widget .profile-widget-header {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px
}

.profile-widget .profile-widget-items {
    display: flex;
    position: relative
}

.profile-widget .profile-widget-items:after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: -25px;
    right: 0;
    height: 1px;
    background-color: var(--colorBorder);
}

.profile-widget .profile-widget-items .profile-widget-item {
    flex: 1;
    text-align: center;
    border-right: 1px solid var(--colorBorder);
    padding: 10px 0
}

.profile-widget .profile-widget-items .profile-widget-item:last-child {
    border-right: none
}

.profile-widget .profile-widget-items .profile-widget-item .profile-widget-item-label {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--colorTextLight)
}

.profile-widget .profile-widget-items .profile-widget-item .profile-widget-item-value {
    color: var(--colorTextPrimary);
    font-weight: 600;
    font-size: 16px
}

.profile-widget .profile-widget-description {
    padding: 20px;
    line-height: 26px
}

.profile-widget .profile-widget-description .profile-widget-name {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600
}

@media (max-width: 575.98px) {
    .profile-widget .profile-widget-picture {
        left: 50%;
        transform: translate(-50%, 0);
        margin: 40px 0;
        float: none
    }

    .profile-widget .profile-widget-items .profile-widget-item {
        border-top: 1px solid #f2f2f2
    }
}

/* Profile widget style end */

.table-white {
    width: 18px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOElEQVR4nO2WrU4EMRSFiwISEIvj5wnAgYRXWAV6PRh4hOURwBEMLI8AAYVhQa4EO8kYmPbcpm5RlJRUNO1FwHQGwZxk1D1zvtvmiArRqVOTAjAmItvGB2D8V+AH8b9VluV809dcFMVcAlZKrTQNllIuJ2Ai2mihWOsJWGu900Krtzlwn9nwzBjT+2lfjDFLAM7jPK11PzEDGERQWGtnxS/l/nUZUeaAAx9FG16ImiKiywh8yJmOI9NuXTCAvegwQw58GkDflVKLdcFVVS0Q0TQAn3DbXQXg27rQIPcuAI84w03Qvv1cYK31QXCgaw785IcfANZygQGsukyf/ZgYiOjFbzbJBQ2yJz77mRu+fdu8+uChz37lhl/tU0pt5QZLKTc9eJoM/Svk3lo7kxvsMl129/roJNrQJ5T0wnwNTsKHAAAAAElFTkSuQmCC");
    filter: opacity(0.7) drop-shadow(0 0 0 var(--colorOnPrimary));
}


.loader {
    border: 3px solid var(--colorBorder);
    border-radius: 50%;
    border-top: 3px solid var(--colorOnSurface);
    width: 40px;
    height: 40px;
    /* Safari */
    animation: spin 1s linear infinite;
}

.loader-full::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    background-color: #f1f1f127;
    border-radius: 3px
}

.loader-full::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    margin: auto;
    z-index: 999;
    border: 3px solid var(--colorBorder);
    border-radius: 50%;
    border-top: 3px solid var(--colorOnSurface);
    width: 40px;
    height: 40px;
    /* Safari */
    animation: spin 1s linear infinite;
}

/* Safari */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.w-2 {
    width: 20px;
}

/****************************
* 2. Cards CSS Start
****************************/
.card {
    border-radius: 5px;
    margin-block-end: 1.4rem;
    border: 1px solid var(--colorBorder);
    background-color: var(--colorBackground);
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .08);
    background-position: center top;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}

.card:before {
    position: absolute;
    content: "";
    height: 80%;
    width: 1px;
    inset-inline-start: 0;
    background: var(--colorBorderBefore);
    inset-block-start: 10%;
    box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow);
}

.card .card-header,
.card .card-body,
.card .card-footer {
    background-color: transparent;
}

.card .card-header .title {
    font-size: 16px;
    line-height: 28px;
    padding-right: 10px;
    margin-bottom: 0;
    color: var(--colorTextPrimary);
}

.card .card-header {
    border-bottom: 1px solid #dee2e630;
    line-height: 30px;
    align-self: center;
    width: 100%;
    display: flex;
    align-items: center
}

.card .card-footer {
    background-color: transparent;
    border: none
}

@media (max-width: 767.98px) {
    .card .card-header {
        height: auto;
        flex-wrap: wrap
    }

    .card .card-header,
    .card .card-body,
    .card .card-footer {
        background-color: transparent;
        padding: 10px
    }
}

.card hr {
    color: var(--colorBorder);
}

/****************************
* 3. Tables CSS Start
****************************/
.table {
    margin: 0;
}

.table thead {
    background: #dfdfdf28;
    border-bottom: 1px solid var(--colorBorder);
}

.table thead th {
    font-weight: 600;
    color: var(--colorTextPrimary);
    padding: 10px;
    white-space: nowrap;
}

.table th,
.table td {
    text-align: start;
}

.table-sm tbody td {
    padding-left: 10px;
    padding-right: 10px;
}

.table td,
.table:not(.table-bordered) th {
    border-top: none;
    border-bottom: 1px solid var(--colorBorder);
}

.table> :not(:last-child)> :last-child>* {
    border-bottom: 1px solid var(--colorBorder);
}

.table:not(.table-sm):not(.table-md):not(.dataTable) td,
.table:not(.table-sm):not(.table-md):not(.dataTable) th {
    color: var(--colorTextPrimary);
    padding: 10px;
    vertical-align: middle;
}

.table:not(.table-sm) thead th {
    border-bottom: none;
    color: var(--colorTextPrimary);
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: start;
}

.table.table-md th,
.table.table-md td {
    padding: 10px 15px
}

.table tr td {
    color: var(--colorTextPrimary);
}

.table.table-bordered tr {
    border-color: var(--colorBorder);
}

.table.table-bordered td,
.table.table-bordered th {
    border-color: var(--colorBorder);
    color: var(--colorTextLight);
}

.table-links {
    color: #34395e;
    font-size: 12px;
    margin-top: 5px;
    opacity: 0;
    transition: all 0.3s
}

.table-links a {
    color: var(--colorPrimary);
}

table tr:hover .table-links {
    opacity: 1
}

.tb-search {
    max-width: 300px;
}

.tb-search input,
.tb-search button {
    margin: 0;
    height: 36px;
}

.tb-search input {
    border-radius: 18px 0 0 18px;
    padding-left: 18px;
    font-size: 12px;
}

.tb-search button {
    border-radius: 0 18px 18px 0;
    min-width: 40px;
}

.tb-length {
    font-size: 12px;
}

.tb-length select {
    font-size: 14px;
    max-width: 80px;
}

.tb-paginate {
    justify-content: flex-end;
}

.tb-paginate .pg-num {
    max-width: 40px;
    border-radius: 0;
    border-bottom: 2px solid var(--colorPrimary);
    color: var(--colorTextLight);
}

.tb-total {
    font-size: 12px;
}

@media only screen and (max-width: 767px) {
    .tb-length {
        justify-content: center;
    }

    .tb-paginate {
        justify-content: center;
    }

    .tb-search {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .tb-total {
        text-align: center;
    }
}

/****************************
* 4. Modals CSS Start
****************************/
.modal-container {
    z-index: 200;
}

.modal .modal-backdrop {
    z-index: -1;
    background-color: #000;
    opacity: 0;
    z-index: -1;
    animation-name: fadeinbackdrop;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.modal.show {
    display: block;
}

.modal.show .modal-content {
    border: 1px solid var(--colorBorder);
}

.back-btn::before {
    font-family: "FontAwesome";
    content: "\f060\00a0";
    font-size: 18px;
    color: var(--colorTextPrimary);
}

.back-btn {
    margin: 0;
    border: 0;
    outline: 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--colorTextLight);
    background: transparent;
}

.back-btn.text-on-primary::before {
    font-family: "FontAwesome";
    content: "\f060\00a0";
    font-size: 18px;
    color: var(--colorOnPrimary);
}

[dir="rtl"] .back-btn::before {
    content: "\f061\00a0";
}

.home-btn::before {
    font-family: "FontAwesome";
    content: "\f015\00a0";
    font-size: 18px;
    padding: 0;
    margin: 7px;
    margin-inline-end: 3px;
    color: var(--colorTextPrimary);
}

.home-btn {
    margin: 0;
    border: 0;
    outline: 0;
    background: var(--colorSurface);
    border-radius: 5px;
}

.home-btn.text-on-primary::before {
    color: var(--colorOnPrimary);
}

.home-btn.text-primary::before {
    color: var(--colorPrimary);
}

.modal-header,
.modal-body,
.modal-footer {
    padding: 10px 15px;
}

.modal-footer {
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #dee2e630;
}

.modal-header {
    border-bottom: none;
    border-bottom: 1px solid #dee2e630;
    background: var(--colorBackgroundGD);
    background-color: var(--colorBackground);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.modal-header h5 {
    font-size: 16px;
}

.modal-content {
    max-width: 100%;
    border: none;
    background: var(--colorBackgroundGD);
    background-color: var(--colorBackground);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.modal.show .modal-content {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)
}

.modal.right .modal-content::before {
    position: absolute;
    content: "";
    height: 80%;
    width: 1px;
    inset-inline-start: 0;
    background: var(--colorBorderBefore);
    inset-block-start: 10%;
    box-shadow: 8px 0 0 17px var(--colorBorderBeforeShadow);
}

.modal.right .modal-dialog {
    position: relative;
    inset-inline-end: 0;
    margin: auto;
    width: 600px;
    height: 100%;
    overflow-y: auto;
}

.modal.right .modal-content {
    position: fixed;
    inset-inline-end: 0;
    margin: auto;
    width: 600px;
    height: 100%;
    overflow-y: auto;
}

.modal.right .modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

.modal.right .modal-footer {
    position: sticky;
    bottom: 0;
}

/* Language dropdown menu styling */
.btn-language-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: transparent !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    height: 38px !important;
    transition: all 0.2s ease !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.btn-language-toggle:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

.header-lang-flag {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.header-lang-name {
    line-height: 1 !important;
}

.language-dropdown {
    /* Responsive width - controlled by RTL/LTR rules in styles.scss */
    width: auto !important;
    min-width: 260px !important;
    max-width: min(600px, 90vw) !important;
    padding: 20px !important;
    margin-top: 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--colorBorder) !important;
    position: absolute !important;
    /* NOTE: left/right alignment is handled by RTL/LTR rules in styles.scss */
    top: 100% !important;
    z-index: 10000 !important;
    background: white !important;
    display: none;
    height: auto !important;
    overflow: visible !important;
}

.language-dropdown.show {
    display: block !important;
}

/* Hide any centered language modal */
.modal.language {
    display: none !important;
    visibility: hidden !important;
}

.modal.language .modal-body {
    padding: 20px !important;
}

.language-dropdown .language-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-auto-flow: row !important;
}

.modal.language .language-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    grid-auto-flow: row !important;
}

.modal.language .language-picker,
.language-dropdown .language-picker {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    transition: all 0.2s ease !important;
    background-color: white !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modal.language .language-picker:hover,
.language-dropdown .language-picker:hover {
    background-color: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
}

.modal.language .language-picker.active,
.language-dropdown .language-picker.active {
    background-color: #e8e0ff !important;
    border-color: #9d7aff !important;
}

.modal.language .language-flag,
.language-dropdown .language-flag {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.modal.language .language-picker.active .language-flag,
.language-dropdown .language-picker.active .language-flag {
    border-color: #9d7aff !important;
}

.modal.language .language-name,
.language-dropdown .language-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #212529 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

@media only screen and (max-width: 767px) {
    .modal.right .modal-dialog {
        width: 100%;
    }

    .modal.language .modal-content {
        width: 100%;
    }

    .modal.language .language-grid {
        grid-template-columns: 1fr;
    }
}

.heading-style-one h3 {
    line-height: 1;
    font-weight: 500;
    font-size: 1rem;
    margin: 0;
}

.heading-style-one p {
    line-height: 1.5;
    font-weight: 400;
    font-size: .75rem;
    margin: 0;
}

.heading-style-two {
    background-color: var(--colorSurface);
    border-inline-start: 2px solid var(--colorPrimary);
    border-radius: 3px;
    padding: 6px;
    padding-inline-start: 8px;
    margin-bottom: 14px;
}

.heading-style-two h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

/****************************************
* NUCLEAR: HIDE ANY ELEMENT ON RIGHT SIDE - MAXIMUM SPECIFICITY - DISABLED TO ENABLE RIGHT SIDEBAR
****************************************/
/* COMMENTED OUT TO ENABLE RIGHT SIDEBAR
html body *[style*="right: 0"],
html body *[style*="right:0"],
html body *[style*="position: fixed"][style*="right"],
html body > *:last-child[style*="fixed"],
html body aside:last-of-type,
html body div:last-of-type[style*="fixed"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -9999 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
}
*/

/****************************************
* HIDE RIGHT SIDEBAR - All alerts integrated into dashboard - DISABLED TO ENABLE RIGHT SIDEBAR
****************************************/
/* COMMENTED OUT TO ENABLE RIGHT SIDEBAR
.sidebarrightmenu .sidebar-right,
.sidebar-right,
.right-sidebar,
.notification-sidebar,
.alert-sidebar,
[class*="sidebar-right"],
[class*="right-sidebar"],
aside.sidebar-right,
div.sidebar-right,
body > aside:last-child,
body > div:last-child {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -9999 !important;
    max-width: 0 !important;
    min-width: 0 !important;
}
*/

/****************************************
* RESTORE RIGHT SIDEBAR STYLING - Ensure content is visible
****************************************/
.sidebarrightmenu .sidebar-right,
.sidebar-right,
.right-sidebar,
.notification-sidebar,
.alert-sidebar,
aside.sidebar-right,
div.sidebar-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    right: 0 !important;
    top: 70px !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    width: auto !important;
    min-width: 300px !important;
    max-width: 400px !important;
    z-index: 1050 !important;
    background: #ffffff !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1) !important;
    overflow-y: auto !important;
}

.sidebar-right *,
.right-sidebar *,
.notification-sidebar *,
.alert-sidebar * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure modern-alert-card and alert-icon styles are applied in right sidebar */
.sidebar-right .modern-alert-card,
.right-sidebar .modern-alert-card,
.notification-sidebar .modern-alert-card,
.alert-sidebar .modern-alert-card {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-right .alert-icon,
.right-sidebar .alert-icon,
.notification-sidebar .alert-icon,
.alert-sidebar .alert-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-right .alert-icon.info,
.right-sidebar .alert-icon.info,
.notification-sidebar .alert-icon.info,
.alert-sidebar .alert-icon.info {
    background: #DBEAFE !important;
    color: #3B82F6 !important;
}

.sidebar-right .alert-icon.warning,
.right-sidebar .alert-icon.warning,
.notification-sidebar .alert-icon.warning,
.alert-sidebar .alert-icon.warning {
    background: #FEF3C7 !important;
    color: #F59E0B !important;
}

.sidebar-right .alert-icon.danger,
.right-sidebar .alert-icon.danger,
.notification-sidebar .alert-icon.danger,
.alert-sidebar .alert-icon.danger {
    background: #FEE2E2 !important;
    color: #EF4444 !important;
}

/****************************************
* Toasters & Alerts - FORCE TOP-RIGHT CORNER
****************************************/
.toast-container {
    z-index: 9999;
}

/* CRITICAL: Force toasts to RIGHT side globally - MODERN STYLE */
.toast-container.position-fixed.top-0.end-0,
#toasters.toast-container {
    position: fixed !important;
    top: 80px !important;
    /* Below header */
    right: 20px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 9999 !important;
    max-width: 350px !important;
}

/* Ensure toasts stack from right - MODERN DESIGN */
.toast-container>.toast {
    margin-bottom: 0.75rem;
    margin-left: auto !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
    min-width: 320px !important;
    max-width: 350px !important;
}

/* Modern Toast Styling */
.toast {
    background: white !important;
    border-left: 4px solid #F59E0B !important;
    padding: 16px 20px !important;
}

.toast.bg-warning,
.toast-warning {
    border-left-color: #F59E0B !important;
}

.toast.bg-success,
.toast-success {
    border-left-color: #10B981 !important;
}

.toast.bg-danger,
.toast-error {
    border-left-color: #EF4444 !important;
}

.toast.bg-info,
.toast-info {
    border-left-color: #3B82F6 !important;
}

/* 🔥 HIDE NOTIFICATION DROPDOWN MENU - All alerts integrated into dashboard */
.notifications .dropdown-menu,
.header-item-notifications .dropdown-menu,
[class*="notification"] .dropdown-menu,
.dropdown-menu.notifications,
.noti-dropdown,
.notification-dropdown,
.notifications .noti-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    overflow: hidden !important;
}

/* REMOVED: Aggressive fixed positioning for all alerts. Alerts should render contextually. */

/****************************
* 5. Buttons CSS Start
****************************/
.btn:focus,
.btn:active,
.btn:active:focus {
    box-shadow: none !important;
    outline: none
}

.buttons .btn {
    margin: 0 8px 10px 0
}

.btn {
    position: relative;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    padding: 0.3rem 0.8rem;
    letter-spacing: 0.5px;
}

.btn>i {
    margin-left: 0 !important
}

.btn.btn-lg {
    padding: 0.55rem 1.5rem;
    font-size: 12px
}

.btn.btn-sm {
    padding: 0.1rem 0.4rem;
    font-size: 12px
}

.btn-primary {
    box-shadow: none;
    background-color: var(--colorPrimary);
    border-color: var(--colorPrimaryDark);
    color: var(--colorOnPrimary);
}

.btn-primary.disabled {
    box-shadow: none;
    background-color: var(--colorPrimaryLight);
    border-color: var(--colorOnPrimary);
    color: var(--colorOnPrimaryLight)
}

.btn-primary:focus,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover {
    background-color: var(--colorPrimaryDark) !important;
    border-color: var(--colorPrimaryDark);
    color: var(--colorOnPrimary);
}

.btn-outline-primary,
.btn-outline-primary.disabled {
    border-color: var(--colorPrimary);
    color: var(--colorPrimary)
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.disabled:hover,
.btn-outline-primary.disabled:focus,
.btn-outline-primary.disabled:active {
    background-color: var(--colorPrimary) !important;
    color: var(--colorOnPrimary);
    border-color: var(--colorPrimaryDark);
}

.btn-outline-primary.active {
    background-color: var(--colorPrimary);
    border: 1px solid var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.btn-round {
    border-radius: 30px;
    padding-left: 34px;
    padding-right: 34px
}

.btn-progress {
    color: transparent !important;
    pointer-events: none;
}

.btn-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
    margin: auto;
    border: 2px solid #ffffff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.btn-progress.black::before {
    border: 2px solid #1f1e1e;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-light {
    color: var(--colorTextPrimary);
    background-color: var(--colorBackground);
    border-color: var(--colorBorder);
}

.btn-light:hover,
.btn-light:focus {
    color: var(--colorOnSurface);
    background-color: var(--colorSurface);
    border-color: var(--colorBorder);
}

.btn-icon-light {
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid var(--colorBorder);
    color: var(--colorTextPrimary);
}

.btn-icon-light:hover {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.btn-icon-one {
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid var(--colorBorder);
    color: var(--colorTextPrimary);
}

.btn-icon-one:hover {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.btn-trash {
    outline: none;
    border: none;
    background: transparent;
}

.btn-trash i {
    font-size: 18px;
    color: #ff0000;
    cursor: pointer;
}


/****************************
* 6. Dropdowns CSS Start
****************************/
.dropdown-menu {
    background: var(--colorBackgroundGD);
    background-color: var(--colorBackground);
    border: 1px solid var(--colorBorder);
    width: 200px;
    z-index: 1050 !important;
}

.dropdown-menu .dropdown-item {
    color: var(--colorTextPrimary);
}

.dropdown-menu.show {
    display: block !important
}

.dropdown-menu a,
.dropdown-menu p {
    font-size: 13px;
    color: var(--colorTextPrimary);
}

.dropdown-menu .dropdown-title {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding: 10px 20px;
    line-height: 20px;
    color: var(--colorTextPrimary);
}

.dropdown-menu.dropdown-menu-sm a {
    font-size: 14px;
    letter-spacing: normal;
    padding: 10px 20px;
    color: var(--colorTextPrimary)
}

a.dropdown-item {
    padding: 10px 20px;
    font-weight: 500;
    line-height: 1.2;
}

a.dropdown-item:hover {
    background-color: var(--colorSurface);
    color: var(--colorTextPrimary) !important
}

a.dropdown-item:focus,
a.dropdown-item:active,
a.dropdown-item.active {
    background-color: var(--colorSurface);
    color: var(--colorTextPrimary) !important
}

.no-carret::after {
    display: none;
}

.app {
    width: 100%;
    height: auto !important;
    /* CRITICAL: Don't force 100% height - causes blank space */
    min-height: 0 !important;
    /* CRITICAL: Allow shrinking */
    overflow-x: hidden;
}

main {
    transition: margin-inline-start 320ms ease;
    margin: 0;
    padding: 0;
    padding-left: 5px !important;
    /* Compact left spacing for all pages */
}

main .main-content {
    margin: 0;
    padding: 0;
    padding-left: 5px !important;
    /* Compact left spacing for all pages */
    padding-bottom: 0;
}

/* Remove extra spacing from router-outlet */
.sidebar-layout main router-outlet {
    display: block;
}

.sidebar-layout main router-outlet+* {
    margin-top: 0;
    padding-bottom: 0;
}

/* Ensure dashboard and page content don't have extra bottom spacing */
.sidebar-layout main>* {
    margin-bottom: 0;
}

.sidebar-layout main>*:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Remove footer gaps - ensure last child has no bottom margin/padding */
.sidebar-layout main>*:last-child>*:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove bottom spacing only from the very last elements */
.sidebar-layout main>*:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Override: ensure main uses normal flow and doesn't create blank space */
.sidebar-layout main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    /* CRITICAL: 0 prevents expansion */
    max-height: none !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    /* CRITICAL: Create new stacking context */
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* CRITICAL: Ensure main content doesn't extend beyond footer */
    contain: layout style !important;
}

/* REMOVED: Footer is hidden so these rules are no longer needed */

/* REMOVED: Footer is hidden so these rules are no longer needed */

/* REMOVED: This "NUCLEAR OPTION" was the main culprit - it hid EVERYTHING after the footer including all actual page content! */


/* REMOVED: These rules were hiding dropdown menus and legitimate lists after router-outlet */

/* App Footer Styles */
.sidebar-layout .app-footer {
    margin-top: 0 !important;
    /* No auto margin - appear immediately after content */
    padding: 20px 0 !important;
    padding-bottom: 20px !important;
    /* Keep padding for footer content */
    background-color: #ffffff !important;
    /* CRITICAL: Ensure footer has background */
    border-top: 1px solid var(--colorBorder);
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    /* No bottom margin after footer */
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    /* CRITICAL: Ensure footer doesn't create blank space */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* CRITICAL: Footer positioning and z-index */
    position: relative !important;
    z-index: 10 !important;
    /* Above main content, below sidebar */
    /* CRITICAL: Ensure footer is the last element and nothing appears after it */
    order: 999 !important;
    /* CRITICAL: Hide any overflow content - navigation menu items should not appear */
    overflow: hidden !important;
}

/* CRITICAL: Hide ALL navigation menu items inside footer */
.sidebar-layout .app-footer ul,
.sidebar-layout .app-footer ul.menu,
.sidebar-layout .app-footer .menu,
.sidebar-layout .app-footer .submenu,
.sidebar-layout .app-footer ul.submenu,
.sidebar-layout .app-footer li,
.sidebar-layout .app-footer li.has-submenu,
.sidebar-layout .app-footer .menu-wrapper,
.sidebar-layout .app-footer .menu-header,
.sidebar-layout .app-footer *[class*="menu"],
.sidebar-layout .app-footer *[class*="submenu"],
.sidebar-layout .app-footer a[routerLink],
.sidebar-layout .app-footer a[href*="/dashboard"],
.sidebar-layout .app-footer a[href*="/hrm"],
.sidebar-layout .app-footer a[href*="/reports"],
.sidebar-layout .app-footer a[href*="/branches"],
.sidebar-layout .app-footer a[href*="/utilities"],
.sidebar-layout .app-footer a[href*="/settings"],
.sidebar-layout .app-footer a[href*="/advanced"],
.sidebar-layout .app-footer a[href*="/analytics"],
.sidebar-layout .app-footer a[href*="/supply-chain"],
.sidebar-layout .app-footer a[href*="/crm"],
.sidebar-layout .app-footer a[href*="/projects"],
.sidebar-layout .app-footer a[href*="/people"],
.sidebar-layout .app-footer a[href*="/myaccount"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* REMOVED: Footer is hidden */

/* ====================================================================
   CRITICAL: ULTIMATE NUCLEAR OPTION - Hide ALL content after footer
   ==================================================================== */

/* REMOVED: These were hiding ALL li and ul elements including report links! */
/* Only hide the actual navigation sidebar */
body.sidebar-layout main>aside.app-menu,
body.sidebar-layout main aside.app-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    left: -999999px !important;
    pointer-events: none !important;
}

/* CRITICAL: Exception - allow router-outlet, footer, and dashboard content */
body.sidebar-layout main>router-outlet,
body.sidebar-layout main>.app-footer,
body.sidebar-layout main>app-admin-dashboard,
body.sidebar-layout main>app-dashboard,
body.sidebar-layout main>*[class*="component"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
}

/* REMOVED: This was hiding ALL page content! */

/* REMOVED: This MEGA RULE was hiding ALL divs, spans, ul, li, and other content! This was the main culprit! */

/* REMOVED: This NUCLEAR MEGA RULE was hiding ALL submenu items, list items, and report links across the entire application! */

/* CRITICAL: Exception - ONLY allow has-submenu in sidebar, nowhere else */
.sidebar-layout .app-menu li.has-submenu,
.sidebar-layout aside.app-menu li.has-submenu,
.sidebar-layout .app-menu ul.submenu,
.sidebar-layout aside.app-menu ul.submenu {
    display: block !important;
    /* Changed from list-item to block for proper positioning */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    clip: auto !important;
    clip-path: none !important;
    z-index: auto !important;
}

/* REMOVED: This was preventing list items from showing */

/* CRITICAL: Ensure footer is truly the last visible element */
.sidebar-layout main .app-footer {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

/* CRITICAL: Set max-height on main to prevent overflow */
.sidebar-layout main {
    position: relative !important;
    overflow: visible !important;
}

/* CRITICAL: Add spacing between footer and content */
.sidebar-layout main .app-footer {
    margin-top: 24px !important;
    padding: 20px 0 !important;
    background-color: #ffffff !important;
}

/* CRITICAL: Hide any navigation elements that are children of footer but not the copyright text */
.sidebar-layout .app-footer *:not(.container-fluid):not(.row):not(.col-md-6):not(p) {
    /* Allow only container, row, col, and p elements - hide everything else */
}

/* CRITICAL: Ensure footer container hides overflow */
.sidebar-layout .app-footer .container-fluid {
    overflow: hidden !important;
}

/* CRITICAL: Hide any list items or navigation links within footer columns that aren't copyright */
.sidebar-layout .app-footer .col-md-6 ul,
.sidebar-layout .app-footer .col-md-6 li,
.sidebar-layout .app-footer .col-md-6 a[routerLink],
.sidebar-layout .app-footer .col-md-6 .menu,
.sidebar-layout .app-footer .col-md-6 .submenu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Hide navigation menu items in footer when sidebar is toggled (sidebar-mini state) */
body.sidebar-layout.sidebar-mini .app-footer ul,
body.sidebar-layout.sidebar-mini .app-footer li,
body.sidebar-layout.sidebar-mini .app-footer .menu,
body.sidebar-layout.sidebar-mini .app-footer .submenu,
body.sidebar-layout.sidebar-mini .app-footer .menu-wrapper,
body.sidebar-layout.sidebar-mini .app-footer *[class*="menu"],
/* REMOVED: Footer is hidden */

/* CRITICAL: Hide navigation menu items in footer when sidebar is NOT mini (expanded state) */
body.sidebar-layout:not(.sidebar-mini) .app-footer ul,
body.sidebar-layout:not(.sidebar-mini) .app-footer li,
body.sidebar-layout:not(.sidebar-mini) .app-footer .menu,
body.sidebar-layout:not(.sidebar-mini) .app-footer .submenu,
body.sidebar-layout:not(.sidebar-mini) .app-footer .menu-wrapper,
body.sidebar-layout:not(.sidebar-mini) .app-footer *[class*="menu"],
/* REMOVED: Footer is hidden */
body.sidebar-layout:not(.sidebar-mini) .app-footer {
    /* Footer hiding continues below */
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* CRITICAL: Ensure footer always hides overflow regardless of sidebar state */
body.sidebar-layout.sidebar-mini .app-footer,
body.sidebar-layout:not(.sidebar-mini) .app-footer {
    overflow: hidden !important;
}

/* CRITICAL: Prevent menu items from appearing in footer area when menu is toggled */
.sidebar-layout .app-footer *:not(.container-fluid):not(.row):not(.col-md-6):not(p):not(.mb-0) {
    /* Hide any element that's not part of the copyright structure */
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Remove any space after footer - footer is the absolute last element */
.sidebar-layout .app-footer::after,
.sidebar-layout main::after,
.sidebar-layout .app::after,
.sidebar-layout app-root::after,
body.sidebar-layout::after,
html::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: Ensure document ends exactly at footer - no blank space after */
body.sidebar-layout>.app>app-root>div {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* CRITICAL: Ensure main element ends exactly at footer */
.sidebar-layout main {
    position: relative !important;
}

/* CRITICAL: Footer must be the absolute last visible element */
.sidebar-layout .app-footer {
    position: relative !important;
    z-index: 1 !important;
    /* CRITICAL: Ensure footer hides any overflow content */
    overflow: hidden !important;
}

/* REMOVED: This rule was hiding legitimate page content */
/* The selector was too complex and was catching actual component content */
/* .sidebar-layout main > *:not(router-outlet):not(.app-footer):last-child ~ * */

/* CRITICAL: Ensure footer is truly the last element - hide anything after it */
.sidebar-layout main .app-footer+* {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* CRITICAL: Nuclear option - hide ALL navigation-related elements in footer regardless of state */
.sidebar-layout .app-footer ul.menu,
.sidebar-layout .app-footer ul.submenu,
.sidebar-layout .app-footer ul li,
.sidebar-layout .app-footer li.has-submenu,
.sidebar-layout .app-footer a[routerLink],
.sidebar-layout .app-footer a[href*="/dashboard"],
.sidebar-layout .app-footer a[href*="/hrm"],
.sidebar-layout .app-footer a[href*="/reports"],
.sidebar-layout .app-footer a[href*="/branches"],
.sidebar-layout .app-footer a[href*="/utilities"],
.sidebar-layout .app-footer a[href*="/settings"],
.sidebar-layout .app-footer a[href*="/advanced"],
.sidebar-layout .app-footer a[href*="/analytics"],
.sidebar-layout .app-footer a[href*="/supply-chain"],
.sidebar-layout .app-footer a[href*="/crm"],
.sidebar-layout .app-footer a[href*="/projects"],
.sidebar-layout .app-footer a[href*="/people"],
.sidebar-layout .app-footer a[href*="/myaccount"],
.sidebar-layout .app-footer aside,
.sidebar-layout .app-footer nav,
.sidebar-layout .app-footer .menu-wrapper,
.sidebar-layout .app-footer .menu-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
}

/* CRITICAL: Ensure footer container and all its children (except copyright) are properly contained */
.sidebar-layout .app-footer .container-fluid {
    position: relative !important;
    overflow: hidden !important;
    max-height: 100px !important;
    /* Limit footer height to prevent menu overflow */
}

/* CRITICAL: Hide any element in footer that contains menu-like content */
.sidebar-layout .app-footer *[class*="menu"],
.sidebar-layout .app-footer *[class*="submenu"],
.sidebar-layout .app-footer *[class*="nav"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Hide any absolutely positioned menu items that might overlay the footer */
.sidebar-layout .app-footer~ul[style*="position"],
.sidebar-layout .app-footer~li[style*="position"],
.sidebar-layout .app-footer~.menu[style*="position"],
.sidebar-layout .app-footer~.submenu[style*="position"],
.sidebar-layout main ul[style*="position"]:last-child,
.sidebar-layout main li[style*="position"]:last-child,
.sidebar-layout main .menu[style*="position"]:last-child,
.sidebar-layout main .submenu[style*="position"]:last-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    z-index: -1 !important;
}

/* CRITICAL: Ensure footer has higher z-index than any menu items */
.sidebar-layout .app-footer {
    z-index: 1000 !important;
}

/* CRITICAL: Lower z-index for any menu items that might be near footer */
.sidebar-layout main .menu,
.sidebar-layout main .submenu,
.sidebar-layout main ul.menu,
.sidebar-layout main li.has-submenu {
    z-index: 1 !important;
    position: relative !important;
}

/* CRITICAL: When burger icon is clicked and sidebar toggles, ensure footer stays clean */
body.sidebar-layout.sidebar-mini .app-footer,
body.sidebar-layout:not(.sidebar-mini) .app-footer {
    overflow: hidden !important;
    max-height: 80px !important;
    /* Strict height limit */
    position: relative !important;
    z-index: 1000 !important;
}

/* CRITICAL: Hide any menu items that might be rendered as last child in main before footer */
.sidebar-layout main>ul:last-child:not(.app-footer),
.sidebar-layout main>li:last-child:not(.app-footer),
.sidebar-layout main>.menu:last-child:not(.app-footer),
.sidebar-layout main>.submenu:last-child:not(.app-footer) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Remove any potential blank space after all elements */
body.sidebar-layout *:last-child::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: Ensure sidebar doesn't create blank space - limit to viewport height */
.sidebar-layout .app-menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* CRITICAL: Prevent sidebar from extending beyond viewport */
    clip: rect(0, auto, 100vh, 0) !important;
}

/* CRITICAL: Ensure sidebar menu items don't extend beyond viewport */
.sidebar-layout .app-menu .menu {
    max-height: calc(100vh - 120px) !important;
    /* Account for header and footer space */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* CRITICAL: Prevent menu from expanding */
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    flex: 0 1 auto !important;
    /* CRITICAL: Ensure menu is contained within sidebar */
    position: relative !important;
    z-index: 1 !important;
    /* CRITICAL: Prevent menu items from appearing outside sidebar */
    contain: layout style paint !important;
    clip-path: inset(0 0 0 0) !important;
}

/* CRITICAL: Ensure sidebar menu wrapper doesn't extend beyond viewport */
.sidebar-layout .app-menu .menu-wrapper {
    max-height: calc(100vh - 120px) !important;
    /* Account for header and footer space */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* CRITICAL: Prevent wrapper from expanding */
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    /* CRITICAL: Ensure menu wrapper is contained within sidebar */
    position: relative !important;
    z-index: 1 !important;
    /* CRITICAL: Prevent menu from overflowing into main content */
    contain: layout style paint !important;
}

/* CRITICAL: Ensure sidebar menu items are contained within sidebar - NEVER in main */
.sidebar-layout .app-menu .menu li {
    position: relative !important;
    overflow: visible !important;
    /* CRITICAL: Prevent list items from expanding to huge heights */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    align-self: flex-start !important;
    /* CRITICAL: Ensure menu items are contained within sidebar bounds */
    max-width: 252px !important;
    contain: layout style !important;
}

/* CRITICAL: ABSOLUTELY PREVENT menu items from appearing in main content area */
.sidebar-layout main .menu,
.sidebar-layout main .menu li,
.sidebar-layout main ul.menu,
.sidebar-layout main ul.menu li,
.sidebar-layout main .submenu,
.sidebar-layout main .submenu li,
.sidebar-layout main .menu-wrapper,
.sidebar-layout main .menu-header,
.sidebar-layout main aside.app-menu,
.sidebar-layout main .app-menu,
.sidebar-layout main [class*="menu"],
.sidebar-layout main li.has-submenu,
.sidebar-layout main li[class*="submenu"],
.sidebar-layout main div[class*="menu"],
.sidebar-layout main h5[class*="menu"],
.sidebar-layout main *[class*="menu-title"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* CRITICAL: Hide ALL text content from menu items in main */
.sidebar-layout main .menu *,
.sidebar-layout main ul.menu *,
.sidebar-layout main .submenu *,
.sidebar-layout main li.has-submenu *,
.sidebar-layout main [class*="menu"] * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* REMOVED: These rules were TOO AGGRESSIVE - they hide ALL content with "menu" in class names */
/* This was preventing CRM pages, dashboard pages, and other components from displaying */
/* Only the actual sidebar navigation menu should be hidden, not component content */

/* REMOVED: Lines 2779-2813 - causing blank pages across the application */

/* CRITICAL: Hide specific menu items that are appearing (Advanced Modules, Invoice Manager, etc.) */
.sidebar-layout main *:contains("Advanced Modules"),
.sidebar-layout main *:contains("Invoice Manager"),
.sidebar-layout main *:contains("LC Management"),
.sidebar-layout main *:contains("Fixed Assets"),
.sidebar-layout main *:contains("Transport & Fleet"),
.sidebar-layout main *:contains("Project Management"),
.sidebar-layout main *:contains("HRM & Users"),
.sidebar-layout main *:contains("Communication & Integrations") {
    display: none !important;
    visibility: hidden !important;
}

/* CRITICAL: Ensure sidebar menu footer doesn't extend beyond viewport */
.sidebar-layout .app-menu .menu .footer {
    position: relative !important;
    max-height: none !important;
    margin-top: auto !important;
}

/* CRITICAL: Prevent any sidebar content from being visible outside sidebar bounds */
body.sidebar-layout .app-menu * {
    box-sizing: border-box !important;
    /* REMOVED: max-width to allow submenus to appear in mini mode */
}

/* CRITICAL: Allow submenus in mini mode to position outside sidebar */
body.sidebar-layout.sidebar-mini .app-menu .submenu,
body.sidebar-layout.sidebar-mini .app-menu ul.submenu {
    max-width: none !important;
    width: auto !important;
}

/* CRITICAL: Ensure sidebar is properly positioned and contained - NEVER appears in main content */
.sidebar-layout .app-menu,
.sidebar-layout aside.app-menu {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1200 !important;
    /* CRITICAL: Keep sidebar VERY HIGH to prevent it from rendering behind/in main */
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* CRITICAL: Prevent sidebar content from appearing outside its bounds */
    clip-path: inset(0 0 0 0) !important;
    contain: strict !important;
    /* CRITICAL: Strict containment to prevent overflow */
    /* CRITICAL: Ensure sidebar is OUTSIDE main flow - it's a fixed positioned element */
    display: flex !important;
    flex-direction: column !important;
    /* CRITICAL: Ensure sidebar is NEVER inside main */
    isolation: isolate !important;
    /* CRITICAL: Prevent sidebar from extending beyond viewport */
    bottom: 0 !important;
    /* CRITICAL: Ensure sidebar content is clipped to viewport */
    clip: rect(0, 250px, 100vh, 0) !important;
    /* CRITICAL: Prevent sidebar from overlapping main content visually */
    pointer-events: auto !important;
}

/* CRITICAL: When sidebar-mini is active, maintain containment */
.sidebar-layout.sidebar-mini .app-menu,
body.sidebar-layout.sidebar-mini aside.app-menu {
    position: fixed !important;
    z-index: 1200 !important;
    contain: strict !important;
    clip-path: inset(0 0 0 0) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* CRITICAL: Ensure main content area is BELOW sidebar in z-index */
.sidebar-layout main {
    position: relative !important;
    z-index: 1 !important;
    /* Much lower than sidebar's 1200 */
}

/* CRITICAL: NUCLEAR OPTION - If .app-menu appears inside main, hide it completely */
.sidebar-layout main .app-menu,
.sidebar-layout main>.app-menu,
.sidebar-layout main aside.app-menu,
.sidebar-layout main>aside.app-menu,
.sidebar-layout main * .app-menu,
.sidebar-layout main router-outlet~.app-menu,
.sidebar-layout main router-outlet+.app-menu,
.sidebar-layout main app-admin-dashboard~.app-menu,
.sidebar-layout main app-admin-dashboard+.app-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
}

/* CRITICAL: Ensure sidebar is ALWAYS fixed to left side, NEVER in main flow */
.sidebar-layout .app-menu {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    /* CRITICAL: Prevent sidebar from ever being part of main's document flow */
    float: none !important;
    clear: both !important;
    /* CRITICAL: Ensure sidebar is always in its own stacking context */
    transform: translateZ(0) !important;
    will-change: transform !important;
    /* CRITICAL: Ensure sidebar content cannot overflow into main area */
    contain: strict !important;
    /* CRITICAL: Clip sidebar to viewport bounds */
    clip: rect(0, 250px, 100vh, 0) !important;
    clip-path: polygon(0 0, 250px 0, 250px 100vh, 0 100vh) !important;
}

/* CRITICAL: If sidebar somehow gets moved into main, force it back out AND hide it */
body.sidebar-layout main .app-menu,
body.sidebar-layout main>.app-menu,
body.sidebar-layout main aside.app-menu {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 120 !important;
    /* But also hide it completely if it's inside main */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
}

/* CRITICAL: Use ::before and ::after to completely hide menu content in main */
.sidebar-layout main .app-menu::before,
.sidebar-layout main .app-menu::after,
.sidebar-layout main aside.app-menu::before,
.sidebar-layout main aside.app-menu::after {
    display: none !important;
    content: "" !important;
}

/* CRITICAL: When sidebar is toggled (burger icon clicked), ensure no blank space is created */
body.sidebar-layout.sidebar-mini .app-menu,
body.sidebar-layout:not(.sidebar-mini) .app-menu {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 120 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    bottom: auto !important;
    /* CRITICAL: Prevent sidebar from appearing in main content area */
    clip-path: inset(0 0 0 0) !important;
    contain: layout style paint !important;
}

/* CRITICAL: Ensure sidebar menu items stay within sidebar bounds - NEVER in main content */
body.sidebar-layout.sidebar-mini .app-menu .menu li,
body.sidebar-layout:not(.sidebar-mini) .app-menu .menu li {
    position: relative !important;
    overflow: visible !important;
    /* CRITICAL: Prevent menu items from escaping sidebar */
    max-width: 100% !important;
    /* CRITICAL: Prevent list items from expanding beyond content */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    align-self: flex-start !important;
}

/* CRITICAL: Prevent sidebar submenu items (like "Communication & Integrations") from appearing in blank space */
body.sidebar-layout.sidebar-mini .app-menu .menu li .submenu {
    position: absolute !important;
    z-index: 1000 !important;
    left: 65px !important;
    top: 0 !important;
    background: var(--colorBackground) !important;
    border: 1px solid var(--colorBorder) !important;
    max-width: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 100px) !important;
    /* Prevent extending beyond viewport */
    /* CRITICAL: Ensure submenu stays within sidebar bounds */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* CRITICAL: Ensure main content area NEVER shows sidebar menu items */
.sidebar-layout main {
    position: relative !important;
    z-index: 1 !important;
    /* CRITICAL FIX: Removed 'contain' property as it was clipping fixed-position modals! */
    /* contain: layout style paint !important; */
    /* DISABLED - was hiding modals */
    isolation: isolate !important;
    /* CRITICAL: Prevent any content from appearing after footer */
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    z-index: 1 !important;
    /* Below sidebar */
    margin-left: 252px !important;
    /* CRITICAL: Prevent sidebar menu from appearing in main area */
    overflow: visible !important;
}

body.sidebar-layout.sidebar-mini main {
    margin-left: 65px !important;
    width: calc(100% - 65px) !important;
    max-width: calc(100% - 65px) !important;
    transition: margin-left 0.3s ease, width 0.3s ease !important;
}

/* Ensure main content has correct width when sidebar is expanded */
body.sidebar-layout:not(.sidebar-mini) main {
    margin-left: 252px !important;
    width: calc(100% - 252px) !important;
    max-width: calc(100% - 252px) !important;
    transition: margin-left 0.3s ease, width 0.3s ease !important;
}

/* CRITICAL: Sidebar menu should NEVER render in main content area */
.sidebar-layout main .app-menu,
.sidebar-layout main .menu,
.sidebar-layout main .menu li,
.sidebar-layout main ul.menu,
.sidebar-layout main .app-menu .menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Ensure any duplicate sidebar menu items in main are hidden */
.sidebar-layout main li[class*="menu"],
.sidebar-layout main div[class*="menu"],
.sidebar-layout main *[class*="app-menu"] {
    /* Only hide if it's inside main - but check structure first */
}

/* CRITICAL: Ensure main content area is properly isolated from sidebar */
.sidebar-layout main {
    position: relative !important;
    z-index: 1 !important;
    margin-left: 252px !important;
    /* CRITICAL: Clear any sidebar menu rendering */
    isolation: isolate !important;
}

/* CRITICAL: When sidebar is toggled, ensure no blank space is created */
body.sidebar-layout.sidebar-mini .app-menu,
body.sidebar-layout:not(.sidebar-mini) .app-menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* CRITICAL: Ensure sidebar menu items stay within sidebar bounds when toggled */
body.sidebar-layout.sidebar-mini .app-menu .menu li,
body.sidebar-layout:not(.sidebar-mini) .app-menu .menu li {
    position: relative !important;
    overflow: visible !important;
}

/* CRITICAL: Prevent sidebar submenu items from appearing in blank space */
body.sidebar-layout.sidebar-mini .app-menu .menu li .submenu {
    position: absolute !important;
    z-index: 1000 !important;
    left: 65px !important;
    top: 0 !important;
    background: var(--colorBackground) !important;
    border: 1px solid var(--colorBorder) !important;
    max-width: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 100px) !important;
    /* Prevent extending beyond viewport */
}

/* CRITICAL: Ensure sidebar has scrollbar but allows horizontal overflow */
.sidebar-layout .app-menu {
    overflow-y: auto !important;
    /* VERTICAL scrollbar */
    overflow-x: visible !important;
    /* HORIZONTAL visible for submenus */
}

/* CRITICAL: Ensure sidebar menu items don't extend beyond viewport */
.sidebar-layout .app-menu .menu {
    max-height: calc(100vh - 0px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* This rule moved below to be more comprehensive */

.sidebar-layout .app-footer p {
    margin: 0 !important;
    font-size: 14px;
    color: var(--colorTextLight);
    line-height: 1.5;
}

/* CRITICAL: Ensure footer's container-fluid and row don't create extra space */
.sidebar-layout .app-footer .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-layout .app-footer .container-fluid .row {
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-layout .app-footer .container-fluid .row [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-layout .app-footer .text-start p,
.sidebar-layout .app-footer .text-end p {
    color: var(--colorTextLight);
}

/* NOTE: Main element flex layout is now defined in the main rule at line 4399 */
/* This duplicate rule has been removed to prevent conflicts */

.sidebar-layout main>router-outlet {
    display: block !important;
    /* Render as a normal block */
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-layout main>router-outlet+* {
    flex: 0 0 auto !important;
    /* Don't grow or shrink - use natural size */
    min-height: auto !important;
    /* CRITICAL: Allow component to show its content - don't collapse */
    height: auto !important;
    max-height: none !important;
    display: block !important;
    /* Ensure component displays */
}

/* Remove gap between navbar and main content */
.sidebar-layout .app-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 250px !important;
    /* Start after sidebar */
    right: 0 !important;
    z-index: 999 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: 60px !important;
    width: calc(100% - 250px) !important;
    margin-left: 0 !important;
    transition: left 0.3s ease, width 0.3s ease !important;
    overflow: visible !important;
    max-height: none !important;
}

/* CRITICAL: Adjust header position when sidebar is in mini mode */
.sidebar-layout.sidebar-mini .app-navbar {
    left: 65px !important;
    /* Adjust for mini sidebar */
    width: calc(100% - 65px) !important;
}

/* Components rendered by router-outlet should maintain their own padding */
/* Don't strip component padding - let components control their own spacing */
.sidebar-layout main>router-outlet~* {
    /* Remove only bottom margin/padding to prevent blank space before footer */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    /* Ensure components don't expand beyond their content */
    flex: 0 0 auto !important;
    /* Don't grow or shrink - use natural size */
    height: auto !important;
    min-height: 0 !important;
    /* CRITICAL: 0 allows shrinking in flexbox */
    max-height: none !important;
}

/* Ensure dashboard component doesn't have extra bottom spacing */
.sidebar-layout main>*:not(router-outlet):not(.app-footer)>.row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* CRITICAL: Remove any padding from component host elements since main already has padding */
/* This prevents double padding which creates extra blank space */
.sidebar-layout main>*:not(router-outlet):not(.app-footer) {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    /* CRITICAL: Prevent component from expanding beyond its content */
    flex: 0 0 auto !important;
    /* Don't grow or shrink, use natural size */
    height: auto !important;
    min-height: auto !important;
    /* CRITICAL: Don't collapse - allow content to show */
    max-height: none !important;
    margin-bottom: 0 !important;
    /* CRITICAL: Remove any bottom margin that creates gap before footer */
    display: block !important;
    /* Ensure component displays */
}

/* CRITICAL: Ensure dashboard component doesn't create blank space */
.sidebar-layout main app-admin-dashboard {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    /* CRITICAL: Don't collapse - show content */
    max-height: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    flex: 0 0 auto !important;
    /* Use natural size, don't expand */
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Ensure rows and cards inside dashboard are visible */
.sidebar-layout main app-admin-dashboard .row {
    display: flex !important;
    visibility: visible !important;
}

.sidebar-layout main app-admin-dashboard .card {
    display: block !important;
    visibility: visible !important;
}

.sidebar-layout main app-admin-dashboard>* {
    display: block !important;
    visibility: visible !important;
}

/* CRITICAL: Hide ALL menu-related elements inside dashboard component */
.sidebar-layout main app-admin-dashboard .menu,
.sidebar-layout main app-admin-dashboard ul.menu,
.sidebar-layout main app-admin-dashboard .submenu,
.sidebar-layout main app-admin-dashboard [class*="menu"],
.sidebar-layout main app-admin-dashboard li.has-submenu,
.sidebar-layout main app-admin-dashboard .menu-wrapper,
.sidebar-layout main app-admin-dashboard .menu-header,
.sidebar-layout main app-admin-dashboard .main-menu-title {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* CRITICAL: Ensure the last row in dashboard component doesn't create blank space */
.sidebar-layout main app-admin-dashboard .row:last-child,
.sidebar-layout main app-admin-dashboard .row:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* CRITICAL: Ensure the last direct child of dashboard component doesn't create blank space */
.sidebar-layout main app-admin-dashboard>*:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* CRITICAL: Ensure the last row inside the last child doesn't create blank space */
.sidebar-layout main app-admin-dashboard>*:last-child .row:last-child,
.sidebar-layout main app-admin-dashboard>*:last-child .row:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Don't remove inner spacing - only remove footer space at the very bottom of the page */

/* Don't remove inner spacing from nested elements - only remove footer space at page bottom */

/* CRITICAL: Ensure body and html don't create extra height */
body.sidebar-layout {
    height: auto !important;
    min-height: 0 !important;
    /* CRITICAL: 0 allows shrinking, prevents blank space */
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Allow scroll only if content exceeds viewport */
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* CRITICAL: Ensure body element stops exactly at footer - no extra height */
body.sidebar-layout .app:last-child,
body.sidebar-layout app-root:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* CRITICAL: Ensure footer has no margin/padding that creates space after it */
.sidebar-layout .app-footer {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
    /* Keep internal padding for footer content */
}

/* Ensure body element itself has no bottom padding/margin */
body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

html {
    height: auto !important;
    min-height: 0 !important;
    /* CRITICAL: 0 allows shrinking, prevents blank space */
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Allow vertical scroll if content exceeds viewport */
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* CRITICAL: Ensure document element doesn't create extra height */
html,
body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Ensure app wrapper has no bottom padding/margin */
.app {
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Ensure main element's parent container has no bottom padding/margin */
.sidebar-layout app-root>div {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* CRITICAL: Ensure .app wrapper doesn't create extra height */
.app {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
}

/* CRITICAL: Ensure app-root component doesn't create extra height */
app-root {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* CRITICAL: Ensure div wrapper inside app-root doesn't create extra height */
.sidebar-layout app-root>div {
    display: flex !important;
    /* Match the structure - sidebar and main are flex children */
    flex-direction: row !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    /* CRITICAL: Prevent any expansion beyond content */
    align-items: flex-start !important;
    align-content: flex-start !important;
    flex-grow: 0 !important;
    /* CRITICAL: Don't expand beyond content */
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    /* CRITICAL: Ensure no padding/margin creates blank space */
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Keep inner dashboard padding - don't remove it */

/* Don't remove inner spacing from containers - only remove footer space at page bottom */

/* Remove footer spacing only from the absolute bottom - don't affect inner content */

/* Don't remove inner dashboard spacing - only remove footer space at page bottom */

/* Main element should have bottom padding for footer spacing */
/* This is now handled by the main rule at line 2206 */

/* Remove any gap between sidebar and main content */
.sidebar-layout .app-menu {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* CRITICAL FIX: Do NOT remove component padding - components need their internal spacing */
/* The previous rule was removing ALL padding from components, causing blank space issues */
/* Components should maintain their own padding for proper layout */
/* We only remove bottom margin to prevent blank space before footer */
.sidebar-layout main>*:not(router-outlet):not(.app-footer) {
    margin-bottom: 0 !important;
    /* Do NOT remove padding - let components control their own spacing */
}

/* Don't remove inner spacing - only remove footer space at the very bottom of the page */

/****************************
Toaster
************************/
.toast {
    border: 1px solid var(--colorBorder);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.02);
    background: var(--colorBackgroundGD);
    background-color: var(--colorBackground);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/***********************************
* 7. Top Navbar CSS Start
************************************/
.top-nav {
    background-color: var(--colorBackground);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    width: 100%;
}

.top-nav .list-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-nav .list-items .item {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    height: 60px;
    width: 70px;
    cursor: pointer;
    margin: 1px;
    color: var(--colorTextPrimary);
    overflow: hidden;
}

.top-nav .list-items .item:hover {
    background-color: var(--colorSurface);
}

.top-nav .list-items .active {
    border-bottom: 2px solid var(--colorPrimary);
    color: var(--colorPrimary);
}

.top-nav .list-items .disabled,
.top-nav .list-items .disabled:hover {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.top-nav .list-items .item i {
    font-size: 1.6rem;
    display: block;
    padding-top: 5px;
}

@media (max-width: 380px) {
    .top-nav .list-items .item {
        height: 60px;
        width: 50px;
    }

    .top-nav .list-items .item span {
        font-size: 12px;
    }

    .top-nav .list-items .item i {
        font-size: 1rem;
        margin-top: 0.6rem;
    }
}


.app-navbar {
    height: 55px;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 999;
    z-index: 100;
    border-bottom: 1px solid var(--colorBorder);
    background: var(--colorBackground);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    transition: left 320ms ease;
}

/* Override navbar position for sidebar layout */
.sidebar-layout .app-navbar {
    left: 250px !important;
    inset-inline-start: 250px !important;
    width: calc(100% - 250px) !important;
}

.app-navbar .main-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: visible !important;
    max-height: none !important;
}

.app-navbar .main-header::before {
    position: absolute;
    content: "";
    width: 50%;
    height: 1px;
    bottom: 0;
    inset-inline-start: 25%;
    background: var(--colorBorderBefore);
    box-shadow: var(--colorBorderBeforeShadow);
}

.app-navbar .main-header .header-left,
.app-navbar .main-header .header-right {
    display: flex;
    align-items: stretch;
    overflow: visible !important;
    max-height: none !important;
}

.app-navbar .main-header .header-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.25rem;
    overflow: visible !important;
    max-height: none !important;
    position: relative;
}

.app-navbar .btn-icon {
    padding: 0;
    border-radius: 4px;
    transition: all ease 0.3s;
    display: block;
    font-size: 22px;
    color: var(--colorTextPrimary);
    position: relative;
    line-height: 33px;
    outline: none;
    height: 37px;
    width: 37px;
    text-align: center;
}

.app-navbar .btn-icon i {
    width: 20px;
    height: 20px;
    transition: all ease 0.3s;
    font-size: 20px;
    filter: drop-shadow(0 2px 5px var(--colorPrimaryShadow));
}

.app-navbar .btn-icon:hover {
    background-color: var(--colorSurface);
}

.app-navbar .logo img {
    max-height: 3rem;
    margin: auto 0.75rem;
}

.app-navbar .logo .logo-full,
.app-navbar .logo .logo-mini {
    display: none;
}

.app-navbar .header-item .user-image {
    border-radius: 50%;
}

.app-navbar .header-item .user-name {
    margin: 0;
    padding: 0;
    line-height: 18px;
}

.app-navbar .header-item .user-name strong {
    color: var(--colorTextPrimary);
}

.app-navbar .header-item .user-name span {
    color: var(--colorTextLight);
}

.app-navbar .header-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--colorBorder);
    transition: all ease 0.3s;
}

.app-navbar .header-link:hover .header-avatar {
    border-color: var(--colorPrimary);
}

.app-navbar .btn-icon .dark-mode-icon {
    display: inline-block;
}

.app-navbar .btn-icon .light-mode-icon {
    display: none;
}

.dark .app-navbar .btn-icon .dark-mode-icon,
body.dark .app-navbar .btn-icon .dark-mode-icon {
    display: none;
}

.dark .app-navbar .btn-icon .light-mode-icon,
body.dark .app-navbar .btn-icon .light-mode-icon {
    display: inline-block;
}

/* Primary */
.app-navbar.primary {
    background: var(--colorPrimary);
}

.app-navbar.primary .btn-icon {
    color: var(--colorOnPrimary);
}

.app-navbar.primary .btn-icon:hover {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.app-navbar.primary .header-item .user-name strong {
    color: var(--colorOnPrimary);
}

.app-navbar.primary .header-item .user-name span {
    color: var(--colorOnPrimary);
}

.app-navbar.primary .header-avatar {
    border-color: var(--colorOnPrimary);
}

.app-navbar.primary .header-link:hover .header-avatar {
    border-color: var(--colorOnSurface);
}

/* Header Button Styles - Matching Screenshot Design */
.app-navbar .header-search {
    margin-right: 1rem;
}

.app-navbar .btn-branch {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #212529;
    transition: all 0.2s ease;
    height: 32px;
}

.app-navbar .btn-branch.dropdown-toggle::after,
.app-navbar .btn-add-new.dropdown-toggle::after,
.app-navbar .btn-profile.dropdown-toggle::after {
    display: none;
}

.app-navbar .dropdown-toggle {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.app-navbar .btn-branch:hover {
    background: #f8f9fa;
    border-color: #d0d0d0;
}

.app-navbar .btn-branch .branch-icon {
    width: 16px;
    height: 16px;
    background: #4caf50;
    border-radius: 3px;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}

.app-navbar .btn-branch .branch-name {
    margin-right: 4px;
}

.app-navbar .btn-add-new {
    background: #fd7e14;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    height: 32px;
}

.app-navbar .btn-add-new:hover {
    background: #e46902;
    color: #ffffff;
}

.app-navbar .btn-add-new i,
.app-navbar .btn-pos i {
    font-size: 14px;
    margin-right: 4px;
}

.app-navbar .btn-branch i {
    font-size: 12px;
    margin-left: 4px;
}

.app-navbar .btn-pos {
    background: #1e3a8a;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s ease;
    height: 32px;
}

.app-navbar .btn-pos:hover {
    background: #1e40af;
    color: #ffffff;
}

.app-navbar .header-separator {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
    margin: 0 8px;
}

.app-navbar .btn-icon-square {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #212529;
    transition: all 0.2s ease;
    position: relative;
}

.app-navbar .btn-icon-square:hover {
    background: #f8f9fa;
    border-color: #d0d0d0;
}

.app-navbar .btn-icon-square i {
    font-size: 16px;
}

.app-navbar .btn-icon-square .flag-icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

.app-navbar .btn-notification {
    position: relative;
}

.app-navbar .notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #3399cc;
    color: #ffffff;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    padding: 0 4px;
    border: 2px solid #ffffff;
}

.app-navbar .header-item-print .dropdown-menu {
    min-width: 180px;
    padding: 4px 0;
}

.app-navbar .header-item-print .dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.app-navbar .header-item-print .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #212529;
}

.app-navbar .header-item-print .dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.app-navbar .btn-profile {
    padding: 2px;
    border-radius: 8px;
    overflow: hidden;
}

.app-navbar .btn-profile .header-avatar {
    border: none;
    border-radius: 6px;
}

/* Primary navbar overrides */
.app-navbar.primary .btn-branch,
.app-navbar.primary .btn-icon-square {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--colorOnPrimary);
}

.app-navbar.primary .btn-branch:hover,
.app-navbar.primary .btn-icon-square:hover {
    background: rgba(255, 255, 255, 0.2);
}

.app-navbar.primary .header-separator {
    background: rgba(255, 255, 255, 0.2);
}

/* ========================================
   NAVBAR DROPDOWNS - SIMPLE & CLEAN
   ======================================== */

/* Parent containers must be relative for dropdown positioning */
.app-navbar .dropdown,
.header-item {
    position: relative;
}

/* Ensure dropdowns stay within viewport - prevent overflow */
.app-navbar .dropdown-menu {
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Profile dropdown - ensure it's properly aligned to the right */
.app-navbar .header-item-profile {
    position: relative !important;
}

.app-navbar .header-item-profile .dropdown {
    position: relative !important;
}

.app-navbar .header-item-profile .dropdown-menu {
    position: absolute !important;
    min-width: 200px;
    max-width: 250px;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    inset: unset !important;
}

.app-navbar .header-item-profile .dropdown-menu[data-bs-popper] {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: translate(0, 0) !important;
    inset: unset !important;
}

.app-navbar .header-item-profile .dropdown-menu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

.app-navbar .header-item-profile .dropdown-menu.show {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

.app-navbar .header-item-profile .dropdown-menu .dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    color: #212529;
    transition: all 0.2s ease;
}

.app-navbar .header-item-profile .dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #fd7e14;
}

.app-navbar .header-item-profile .dropdown-menu .dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Add New button dropdown positioning */
.app-navbar .header-item-add-new {
    position: relative !important;
}

.app-navbar .header-item-add-new .dropdown {
    position: relative !important;
}

.app-navbar .header-item-add-new .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    inset: unset !important;
}

.app-navbar .header-item-add-new .dropdown-menu[data-bs-popper] {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: translate(0, 0) !important;
    inset: unset !important;
}

.app-navbar .header-item-add-new .dropdown-menu.show {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

/* Add New dropdown - keep custom styling only */
.add-new-dropdown {
    padding: 16px;
    min-width: 320px;
    max-width: min(480px, calc(100vw - 40px));
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}


.add-new-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 288px !important;
    /* Responsive - adjust based on container */
    max-width: 100% !important;
    overflow: hidden !important;
}

.add-new-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #212529;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    min-height: 80px;
}

.add-new-item:hover {
    background: #ffffff;
    border-color: #e0e0e0;
    color: #212529;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.add-new-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.add-new-icon i {
    font-size: 18px;
    color: #6c757d;
    transition: all 0.2s ease;
}

.add-new-item:hover .add-new-icon i {
    color: #fd7e14;
}

.add-new-label {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    color: #6c757d;
    line-height: 1.3;
    margin-top: 4px;
}

.add-new-item:hover .add-new-label {
    color: #495057;
}

/* Responsive: 2 rows on smaller screens */
@media (max-width: 768px) {
    .add-new-dropdown {
        min-width: 320px;
    }

    .add-new-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile Responsive Header */
@media (max-width: 768px) {

    /* Hide search bar on mobile */
    .app-navbar .header-left .header-search {
        display: none !important;
    }

    /* Hide separator on mobile */
    .app-navbar .header-separator {
        display: none !important;
    }

    /* Hide Full Screen button on mobile */
    .app-navbar .header-item-fullscreen {
        display: none !important;
    }

    /* Explicitly Hide Add New button completely on mobile per user request */
    .app-navbar .header-item-add-new {
        display: none !important;
    }

    /* Show only: Profile, Language, Branch, POS on mobile */
    .app-navbar .header-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* Ensure these are visible on mobile */
    .app-navbar .header-item-branch,
    .app-navbar .header-item-pos,
    .app-navbar .header-item-language,
    .app-navbar .header-item-profile {
        display: flex !important;
    }

    /* === MOBILE DROPDOWN ALIGNMENT: position below icon ===
       Each header-item is position:relative (set in styles.scss),
       so absolute dropdowns align to their parent icon. */

    /* LTR: dropdown right-aligns to icon edge */
    html:not([dir="rtl"]) .app-navbar .header-item-profile .dropdown-menu,
    html:not([dir="rtl"]) .app-navbar .header-item-language .dropdown-menu,
    html:not([dir="rtl"]) .app-navbar .header-item-branch-compact .dropdown-menu {
        right: 0 !important;
        left: auto !important;
    }

    /* RTL: dropdown left-aligns to icon edge */
    html[dir="rtl"] .app-navbar .header-item-profile .dropdown-menu,
    html[dir="rtl"] .app-navbar .header-item-language .dropdown-menu,
    html[dir="rtl"] .app-navbar .header-item-branch-compact .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }

    /* Make buttons smaller on mobile but maintain touch target */
    .app-navbar .btn-branch,
    .app-navbar .btn-pos,
    .app-navbar .btn-add-new {
        padding: 6px 10px;
        font-size: 13px;
        min-height: 44px;
        /* Touch target minimum */
    }

    .app-navbar .btn-branch .branch-name {
        display: none;
    }

    .app-navbar .btn-branch {
        min-width: 44px;
        padding: 6px;
        justify-content: center;
    }

    .app-navbar .btn-pos span {
        display: none;
    }

    .app-navbar .btn-pos {
        min-width: 44px;
        padding: 6px;
        justify-content: center;
    }

    .app-navbar .btn-icon-square {
        width: 28px;
        height: 28px;
    }

    .app-navbar .btn-icon-square i {
        font-size: 14px;
    }

    .app-navbar .btn-profile .header-avatar {
        width: 28px;
        height: 28px;
    }
}

/* ========================================
   MOBILE SIDEBAR - HIDE BY DEFAULT, SHOW AS DRAWER (OVERLAY)
   ======================================== */
@media (max-width: 768px) {

    /* Hide sidebar completely by default on mobile */
    .sidebar-layout .app-menu,
    .sidebar-layout aside.app-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 1200 !important;
    }

    /* Show sidebar when drawer is opened (sidebar-show class) - OVERLAY STYLE */
    .sidebar-layout.sidebar-show .app-menu,
    .sidebar-layout.sidebar-show aside.app-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 1200 !important;
        width: 250px !important;
        height: 100vh !important;
        background: var(--colorBackgroundGD) !important;
        background-color: var(--colorBackground) !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
        /* Drawer overlay - doesn't push content */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CRITICAL: Main content should ALWAYS take full width on mobile (no left margin) */
    .sidebar-layout main,
    body.sidebar-layout main,
    body.sidebar-layout.sidebar-mini main,
    body.sidebar-layout:not(.sidebar-mini) main {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Navbar should take full width on mobile */
    .sidebar-layout .app-navbar {
        inset-inline-start: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/***********************************
* 8. Sidebar Layout CSS Start
************************************/

.sidebar-layout .app-navbar {
    inset-inline-start: 250px;
    inset-inline-end: 0;
}

/* Traditional sidebar menu styles */
.sidebar-layout .app-menu .menu {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-layout .app-menu .menu>li {
    position: relative;
    display: block;
    margin: 0;
    /* CRITICAL: Prevent list items from expanding beyond content size */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

.sidebar-layout .app-menu .menu>li>a {
    padding: 0.625rem 1rem;
    font-size: 0.813rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--colorTextPrimary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-layout .app-menu .menu>li>a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu>li.active>a,
.sidebar-layout .app-menu .menu>li>a.active {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--colorPrimary);
    font-weight: 500;
}

.sidebar-layout .app-menu .menu>li.active>a i,
.sidebar-layout .app-menu .menu>li>a.active i {
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu>li>a .side-menu__angle {
    margin-left: auto;
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.sidebar-layout .app-menu .menu>li.toggled>a .side-menu__angle {
    transform: rotate(90deg);
}

/* Submenu styles */
.sidebar-layout .app-menu .menu .submenu {
    display: none;
    /* REMOVED !important to allow mini mode hover CSS to work */
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
    /* CRITICAL: Prevent submenu from causing parent to expand */
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
}

/* First-level submenus (directly under main modules) should be visible by default */
.sidebar-layout .app-menu .menu>li.has-submenu>.submenu {
    display: block !important;
    max-height: 2000px;
    padding: 0.25rem 0;
    visibility: visible;
    opacity: 1;
    overflow: visible;
}

/* CRITICAL: In mini mode, hide submenu by default (but hover in site-menu-fix.css will override) */
body.sidebar-layout.sidebar-mini .app-menu .menu .submenu {
    display: none;
    /* NO !important - allow site-menu-fix.css hover rules to override */
}

/* CRITICAL: Ensure hovering makes submenu visible - backup rule */
body.sidebar-layout.sidebar-mini .app-menu .menu li.has-submenu:hover .submenu,
body.sidebar-layout.sidebar-mini .app-menu .menu li.has-submenu.hovered .submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-layout .app-menu .menu .submenu.show,
.sidebar-layout .app-menu .menu li.has-submenu.active>.submenu,
.sidebar-layout .app-menu .menu li.has-submenu.toggled>.submenu {
    display: block !important;
    max-height: 2000px;
    padding: 0.25rem 0;
    visibility: visible;
    opacity: 1;
    /* CRITICAL: Prevent expanded submenu from causing parent to expand */
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
}

.sidebar-layout .app-menu .menu .submenu>li {
    position: relative;
    /* CRITICAL: Prevent submenu list items from expanding */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

.sidebar-layout .app-menu .menu .submenu>li>a {
    padding: 0.15rem 1rem 0.15rem 0 !important;
    margin: 0;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #646B72 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Override general submenu rule for CRM, Warranty, Customers & Suppliers - must come after general rule with higher specificity */
.sidebar-layout .app-menu .menu .crm-marketing-submenu>li>a,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li>a,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li>a,
.sidebar-layout .app-menu .menu .crm-marketing-submenu>li>a,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li>a,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li>a {
    padding: 0.15rem 1rem 0.15rem 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    color: #646B72 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    border-left: none !important;
    text-align: left !important;
    width: 100% !important;
}

/* Apply same design to nested submenus - Removed hardcoded 2.5rem padding */
.sidebar-layout .app-menu .menu .submenu:not(.pos-sales-submenu):not(.purchase-submenu):not(.crm-marketing-submenu):not(.warranty-serial-submenu):not(.customers-suppliers-submenu) .submenu>li>a {
    padding: 0.15rem 1rem 0.15rem 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    color: #646B72 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    border-left: none !important;
    text-align: left !important;
    width: 100% !important;
}

.sidebar-layout .app-menu .menu .submenu:not(.pos-sales-submenu):not(.purchase-submenu):not(.crm-marketing-submenu):not(.warranty-serial-submenu):not(.customers-suppliers-submenu) .submenu>li>a.active {
    background-color: transparent !important;
    color: var(--colorPrimary) !important;
    font-weight: 500 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}

/* Nested submenu items (submenu inside submenu) - Features */
.sidebar-layout .app-menu .menu .submenu .submenu>li>a {
    padding: 0.15rem 1rem 0.15rem 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #646B72 !important;
}

/* Ensure nested submenu list items have no margin for proper alignment */
.sidebar-layout .app-menu .menu .submenu .submenu>li {
    margin: 0 !important;
}

/* Ensure parent has-submenu items in nested submenus have no margin */
.sidebar-layout .app-menu .menu .submenu>li.has-submenu {
    margin: 0 !important;
}

.sidebar-layout .app-menu .menu .submenu .submenu>li>a .submenu-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6c757d;
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
}

.sidebar-layout .app-menu .menu .submenu>li>a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--colorPrimary);
}

/* Override hover for CRM, Warranty, Customers & Suppliers */
.sidebar-layout .app-menu .menu .crm-marketing-submenu>li>a:hover,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li>a:hover,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li>a:hover {
    background-color: transparent !important;
    color: var(--colorPrimary) !important;
    border-left: none !important;
}

.sidebar-layout .app-menu .menu .submenu>li>a.active {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--colorPrimary);
    font-weight: 500;
}

/* Override general submenu active rule for CRM, Warranty, Customers & Suppliers */
.sidebar-layout .app-menu .menu .crm-marketing-submenu>li>a.active,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li>a.active,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li>a.active {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--colorPrimary) !important;
    font-weight: 500 !important;
    /* border-left: 3px solid var(--colorPrimary) !important;
    padding-left: calc(1.25rem - 3px) !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important; */
    text-align: left !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
}

/* Prevent general rule from applying to these modules */
.sidebar-layout .app-menu .menu .crm-marketing-submenu>li>a,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li>a,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li>a {
    background-color: transparent !important;
}

/* Override general submenu active rule for POS Sales - must come after general rule with higher specificity */
.sidebar-layout .app-menu .menu .pos-sales-submenu>li>a.active {
    background-color: transparent !important;
    color: var(--colorPrimary) !important;
    font-weight: 500 !important;
    /* border-left: 3px solid var(--colorPrimary) !important;
    padding-left: calc(1.25rem - 3px) !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important; */
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Prevent general rule from applying to POS Sales items */
.sidebar-layout .app-menu .menu .pos-sales-submenu>li>a {
    background-color: transparent !important;
}

/* POS Sales Header - Reduced Height */
.sidebar-layout .app-menu .menu>li:has(.pos-sales-submenu)>div {
    padding: 4px 10px !important;
    font-size: 11px !important;
    margin: 0 !important;
}

/* POS Sales Submenu - Reduced Height & Simple Highlight */
.sidebar-layout .app-menu .menu .pos-sales-submenu {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}

.sidebar-layout .app-menu .menu .pos-sales-submenu>li {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.sidebar-layout .app-menu .menu .pos-sales-submenu>li>a {
    padding: 0.15rem 1rem 0.15rem 1.25rem !important;
    margin: 0 !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    color: #646B72 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    border-left: none !important;
    text-align: left !important;
    width: 100% !important;
}

/* Align bullet icon properly in POS Sales */
.sidebar-layout .app-menu .menu .pos-sales-submenu>li>a .submenu-bullet {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Sub-navigation styling removed - now handled globally by styles.scss tree-view implementation */

.sidebar-layout .app-navbar .logo img {
    max-height: 3rem;
    margin: auto 0.75rem;
}

.sidebar-layout .app-navbar .logo .logo-full,
.sidebar-layout .app-navbar .logo .logo-mini {
    display: none;
}

.sidebar-layout .app-menu {
    background-color: var(--colorBackground);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    /* CRITICAL: Remove bottom: 0 to prevent sidebar extending beyond content */
    bottom: auto !important;
    height: 100vh !important;
    /* Use viewport height instead */
    max-height: 100vh !important;
    /* Ensure it doesn't exceed viewport */
    inset-block-start: 0 !important;
    inset-block-end: auto !important;
    inset-inline-start: 0 !important;
    color: var(--colorTextPrimary);
    z-index: 120 !important;
    /* CRITICAL: Prevent sidebar from appearing in main content area */
    clip-path: inset(0 0 0 0) !important;
    contain: layout style paint !important;
    isolation: isolate !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none;
    border-inline-end: 1px solid var(--colorBorder);
    transition: left 320ms ease, width 320ms ease;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
    display: flex !important;
    flex-direction: column;
    visibility: visible !important;
    opacity: 1 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    right: auto !important;
}

/* Menu container wrapper - ensures menu is scrollable */
.sidebar-layout .app-menu .menu-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Column 1: Main Headings (Left) */
.sidebar-layout .app-menu .menu-column-headings {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    border-right: 1px solid var(--colorBorder);
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: var(--colorBackground);
    height: 100%;
    max-height: 100vh !important;
    /* CRITICAL: Prevent extending beyond viewport */
}

.sidebar-layout .app-menu .menu-column-headings .menu {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100% !important;
    flex: 1 !important;
}

.sidebar-layout .app-menu .menu-column-headings .menu>li {
    position: relative;
    display: block;
    margin: 0 !important;
}

.sidebar-layout .app-menu .menu-column-headings .menu>li>a {
    padding: 0.625rem 1rem !important;
    font-size: 0.813rem;
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    color: var(--colorTextPrimary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    height: auto !important;
    position: relative !important;
}

.sidebar-layout .app-menu .menu-column-headings .menu>li>a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu-column-headings .menu>li.active>a,
.sidebar-layout .app-menu .menu-column-headings .menu>li>a.active {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--colorPrimary);
    font-weight: 500;
}

.sidebar-layout .app-menu .menu-column-headings .menu>li.active>a i,
.sidebar-layout .app-menu .menu-column-headings .menu>li>a.active i {
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu-column-headings .menu>li>a .side-menu__angle {
    margin-left: auto;
    font-size: 0.875rem;
}

/* Column 2: Submodules (Center) */
.sidebar-layout .app-menu .menu-column-submodules {
    width: 0;
    min-width: 0;
    max-width: 0;
    border-right: 1px solid var(--colorBorder);
    display: none;
    /* Hidden by default */
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colorBackground);
    transition: width 300ms ease, min-width 300ms ease, max-width 300ms ease;
    opacity: 0;
}

.sidebar-layout .app-menu .menu-column-submodules.show {
    display: flex;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    opacity: 1;
    height: 100%;
}

/* Column 3: Features (Right) */
.sidebar-layout .app-menu .menu-column-features {
    width: 0;
    min-width: 0;
    max-width: 0;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--colorBackground);
    transition: width 300ms ease, min-width 300ms ease, max-width 300ms ease;
    opacity: 0;
}

.sidebar-layout .app-menu .menu-column-features.show {
    display: flex;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    opacity: 1;
    height: 100%;
}

/* Column menu lists styling */
.sidebar-layout .app-menu .menu-column-submodules .menu,
.sidebar-layout .app-menu .menu-column-features .menu {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100% !important;
    flex: 1 !important;
    overflow-y: auto;
}

/* Column header styling */
.sidebar-layout .app-menu .menu-column-submodules .column-header,
.sidebar-layout .app-menu .menu-column-features .column-header {
    padding: 1rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    color: var(--colorTextPrimary);
    border-bottom: 1px solid var(--colorBorder);
    flex-shrink: 0;
    background-color: var(--colorBackground);
}

/* Menu items in columns */
.sidebar-layout .app-menu .menu-column-submodules .menu>li,
.sidebar-layout .app-menu .menu-column-features .menu>li {
    display: block;
    margin: 0 !important;
    position: relative;
}

.sidebar-layout .app-menu .menu-column-submodules .menu>li>a,
.sidebar-layout .app-menu .menu-column-features .menu>li>a {
    padding: 0.75rem 1.25rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center;
    color: #646B72 !important;
    text-decoration: none;
    transition: all 0.3s ease;
    height: auto !important;
    position: relative !important;
}

.sidebar-layout .app-menu .menu-column-submodules .menu>li>a:hover,
.sidebar-layout .app-menu .menu-column-features .menu>li>a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu-column-submodules .menu>li.active>a,
.sidebar-layout .app-menu .menu-column-submodules .menu>li>a.active,
.sidebar-layout .app-menu .menu-column-features .menu>li>a.active {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--colorPrimary);
    font-weight: 500;
}

.sidebar-layout .app-menu .menu-column-submodules .menu>li>a .side-menu__angle {
    margin-left: auto;
    font-size: 0.875rem;
}

.sidebar-layout .app-menu .header {
    height: 50px;
    background-color: transparent;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    border-block-end: 1px solid var(--colorBorder);
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    outline: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    padding: 8px 15px;
}

.sidebar-layout .app-menu .header .menu-toggle {
    padding: 0;
    border-radius: 4px;
    transition: all ease 0.3s;
    font-size: 18px;
    color: var(--colorTextPrimary);
    position: relative;
    line-height: 33px;
    outline: none;
    height: 37px;
    width: 37px;
    text-align: center;
    display: none;
}

.sidebar-layout .app-menu .header .menu-toggle:hover {
    background-color: var(--colorSurface);
}

.sidebar-layout .app-menu .header .logo img {
    margin: 0 auto;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    max-width: 100%;
    max-height: 50px;
}

.sidebar-layout .app-menu .header .logo .logo-mini {
    display: none;
}

/* Main Menu Header */
.sidebar-layout .app-menu .menu-header {
    padding: 10px 15px 8px 15px;
    border-bottom: 1px solid var(--colorBorder);
    margin-bottom: 0;
    flex-shrink: 0;
    position: relative;
    background-color: var(--colorBackground);
    z-index: 10;
}

.sidebar-layout .app-menu .main-menu-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    color: #6c757d;
    margin: 0;
    padding: 0;
}

.sidebar-layout .app-menu .menu {
    width: 100%;
    flex: 1;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-layout .app-menu .menu>li {
    display: block;
    margin: 3px 6px;
    position: relative;
}

.sidebar-layout .app-menu .menu>li>a {
    position: relative;
    display: flex;
    align-items: center;
    height: 22.8px;
    padding: 0 20px;
    width: 100%;
    letter-spacing: .3px;
    color: var(--colorTextPrimary);
    font-weight: 600;
    font-size: 0.813rem;
    text-decoration: none;
    border-radius: 6px;
}

.sidebar-layout .app-menu .menu>li>a i {
    width: 28px;
    font-size: 15px;
    margin-right: 10px;
    text-align: center;
}

.sidebar-layout .app-menu .menu>li>a span {
    margin-top: 3px;
    width: 100%;
}

.sidebar-layout .app-menu .menu>li>a:hover {
    background-color: var(--colorSurface);
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu>li.active>a {
    background-color: var(--colorSurface);
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu>li.has-submenu.active>a {
    background-color: var(--colorSurface);
    color: var(--colorPrimary);
}

/* All Menu Items Active Styling - Use Primary Theme Color */
.sidebar-layout .app-menu .menu>li.has-submenu.active>a,
.sidebar-layout .app-menu .menu>li.has-submenu>a.active {
    background-color: var(--colorPrimaryLight);
    color: var(--colorPrimary);
    border-radius: 6px;
}

.sidebar-layout .app-menu .menu>li.has-submenu.active>a i,
.sidebar-layout .app-menu .menu>li.has-submenu>a.active i {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 14px;
}

.sidebar-layout .app-menu .menu>li.has-submenu:before {
    content: "";
}

.sidebar-layout .app-menu .menu>li.has-submenu>a {
    position: relative;
}

.sidebar-layout .app-menu .menu>li.has-submenu>a .side-menu__angle {
    position: absolute;
    inset-inline-end: 17px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorTextPrimary);
    transition: transform 0.3s ease;
}

.sidebar-layout .app-menu .menu>li.has-submenu.active>a .side-menu__angle,
.sidebar-layout .app-menu .menu>li.has-submenu.toggled>a .side-menu__angle {
    color: var(--colorPrimary);
    transform: rotate(90deg);
}

.sidebar-layout .app-menu .menu>li.has-submenu>a:hover .side-menu__angle {
    color: var(--colorPrimary);
}

[dir="rtl"] .sidebar-layout .app-menu .menu>li.has-submenu.active>a .side-menu__angle,
[dir="rtl"] .sidebar-layout .app-menu .menu>li.has-submenu.toggled>a .side-menu__angle {
    transform: rotate(-90deg);
}

.sidebar-layout .app-menu .menu>li.has-submenu.active>a:before,
.sidebar-layout .app-menu .menu>li.has-submenu>a.active:before {
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu>li.has-submenu>a:hover :before {
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu>li.has-submenu>a.active :before {
    color: var(--colorPrimary);
}

/* Nested submenus (submenu inside submenu) - hidden by default */
.sidebar-layout .app-menu .menu li .submenu .submenu {
    margin: 0;
    padding: 0;
    margin-inline-start: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    border-inline-start: none;
    list-style: none;
    display: none !important;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* First-level submenus (directly under main modules) should be visible by default */
.sidebar-layout .app-menu .menu>li.has-submenu>.submenu {
    display: block !important;
    overflow: visible;
    max-height: 2000px;
    padding: 0.5rem 0;
    visibility: visible;
    opacity: 1;
    margin: 0;
    list-style: none;
}

.sidebar-layout .app-menu .menu li .submenu.show,
.sidebar-layout .app-menu .menu li.has-submenu.active>.submenu,
.sidebar-layout .app-menu .menu li.has-submenu.toggled>.submenu {
    display: block !important;
    overflow: visible;
    max-height: 2000px;
    padding: 0.5rem 0;
    visibility: visible;
    opacity: 1;
}

.sidebar-layout .app-menu .menu li .submenu>li {
    display: flex;
    flex-direction: column;
    padding-inline-start: 0;
    margin: 0;
}

/* Nested submenu (submenu inside submenu) - ensure proper display */
.sidebar-layout .app-menu .menu li .submenu .submenu {
    margin: 0;
    padding: 0;
    margin-inline-start: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    border-inline-start: none;
    list-style: none;
    display: none !important;
    /* Always hidden by default */
    overflow: visible;
    max-height: none;
}

.sidebar-layout .app-menu .menu li .submenu .submenu.show {
    display: block !important;
    /* Only show when explicitly shown */
    overflow: visible;
    max-height: none;
}

/* Arrow icon for nested submenu items */
.sidebar-layout .app-menu .menu li .submenu>li.has-submenu>a .side-menu__angle {
    display: inline-block;
    transition: transform 0.3s;
    margin-left: auto;
}

.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>a .side-menu__angle {
    transform: rotate(90deg);
}

.sidebar-layout .app-menu .menu li .submenu>li a {
    font-size: 0.75rem;
    padding: 0.40rem 0;
    margin: 0px;
    transition: all 0.5s;
    border-radius: 10px;
    color: var(--colorTextPrimary);
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 0 !important;
}

.sidebar-layout .app-menu .menu li .submenu>li a i {
    display: none;
}

.sidebar-layout .app-menu .menu li .submenu>li a:hover {
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu li .submenu>li a .dropdown-icon {
    font-size: 0.75rem;
    position: absolute;
    right: 0;
    top: 8px;
}

.sidebar-layout .app-menu .menu li .submenu>li.active a {
    color: var(--colorPrimary);
}

/* Override for POS Sales - only highlight if a has active class */
.sidebar-layout .app-menu .menu li .pos-sales-submenu>li.active>a:not(.active) {
    /* color: #646B72 !important;
    background-color: transparent !important;
    border-left: none !important; */
}

.sidebar-layout .app-menu .menu li .pos-sales-submenu>li.active>a.active {
    color: var(--colorPrimary) !important;
    background-color: transparent !important;
    /* border-left: 3px solid var(--colorPrimary) !important;
    padding-left: calc(1.25rem - 3px) !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important; */
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Override for Purchase - only highlight if a has active class */
.sidebar-layout .app-menu .menu li .purchase-submenu>li.active>a:not(.active) {
    /* color: #646B72 !important;
    background-color: transparent !important;
    border-left: none !important;*/
}

.sidebar-layout .app-menu .menu li .purchase-submenu>li.active>a.active {
    color: var(--colorPrimary) !important;
    background-color: transparent !important;
    /* border-left: 3px solid var(--colorPrimary) !important;
    padding-left: calc(1.25rem - 3px) !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important; */
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Submenu Bullet Points */
.sidebar-layout .app-menu .menu li .submenu>li a .submenu-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6c757d;
    margin-right: 12px;
    flex-shrink: 0;
}

.sidebar-layout .app-menu .menu li .submenu>li.active a .submenu-bullet {
    background-color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu li .submenu>li.active a {
    color: var(--colorPrimary);
}

/* Override bullet for POS Sales - only active items */
.sidebar-layout .app-menu .menu li .pos-sales-submenu>li.active>a:not(.active) .submenu-bullet {
    background-color: #6c757d !important;
}

.sidebar-layout .app-menu .menu li .pos-sales-submenu>li.active>a.active .submenu-bullet {
    background-color: var(--colorPrimary) !important;
}

/* Override bullet for Purchase - only active items */
.sidebar-layout .app-menu .menu li .purchase-submenu>li.active>a:not(.active) .submenu-bullet {
    background-color: #6c757d !important;
}

.sidebar-layout .app-menu .menu li .purchase-submenu>li.active>a.active .submenu-bullet {
    background-color: var(--colorPrimary) !important;
}

/* Prevent children from inheriting active state from parent submodule */
.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>.submenu>li:not(.active) a {
    color: var(--colorTextPrimary);
}

.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>.submenu>li:not(.active) a .submenu-bullet {
    background-color: #6c757d;
}

/* Only highlight children that are directly active via routerLinkActive */
.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>.submenu>li.active a {
    color: var(--colorPrimary);
}

.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>.submenu>li.active a .submenu-bullet {
    background-color: var(--colorPrimary);
}

/* Important: When a submodule (has-submenu) is active, its nested children should NOT be highlighted unless they are individually active */
.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>.submenu>li:not(.active) {
    opacity: 1;
}

.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>.submenu>li:not(.active)>a {
    /* color: var(--colorTextPrimary) !important; */
}

.sidebar-layout .app-menu .menu li .submenu>li.has-submenu.active>.submenu>li:not(.active)>a .submenu-bullet {
    /* background-color: #6c757d !important; */
}

.sidebar-layout .app-menu .menu li .submenu>li a span:not(.submenu-bullet) {
    color: #646B72 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Submenu Divider Font Size */
.sidebar-layout .app-menu .menu li .submenu>li.submenu-divider {
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-layout .app-menu .menu li .submenu>li.submenu-divider {
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Nested submenu (submenu inside submenu) - Drawer Layout - ensure proper display */
.drawer-layout .app-menu .menu li .submenu .submenu {
    margin: 0;
    padding: 0;
    margin-inline-start: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    border-inline-start: none;
    list-style: none;
    display: none !important;
    /* Always hidden by default */
    overflow: visible;
    max-height: none;
}

.drawer-layout .app-menu .menu li .submenu .submenu.show {
    display: block !important;
    /* Only show when explicitly shown */
    overflow: visible;
    max-height: none;
}

/* Arrow icon for nested submenu items - Drawer Layout */
.drawer-layout .app-menu .menu li .submenu>li.has-submenu>a .side-menu__angle {
    display: inline-block;
    transition: transform 0.3s;
    margin-left: auto;
}

.drawer-layout .app-menu .menu li .submenu>li.has-submenu.active>a .side-menu__angle {
    transform: rotate(90deg);
}

.sidebar-layout .app-menu .menu .footer {
    margin-top: 20px;
    border-top: 1px solid #dee2e630;
    padding: 20px 25px;
}

.sidebar-layout .app-menu .footer p {
    line-height: 10px;
    font-size: 12px;
    color: var(--colorTextLight);
}

.sidebar-layout main {
    margin-top: 60px !important;
    margin-inline-start: 250px !important;
    /* Sidebar width */
    margin-left: 250px !important;
    /* Ensure left margin for sidebar */
    width: calc(100% - 250px) !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 24px !important;
    /* Standard spacing between sidebar and dashboard */
    padding-bottom: 0 !important;
    /* No bottom padding - footer appears directly after content */
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    min-height: auto !important;
    height: auto !important;
    /* Let content define the height */
    max-height: none !important;
    left: 0 !important;
    /* Use normal block flow to avoid collapsing content */
    display: block !important;
}

/* Sidebar Closed state (Desktop) - COMPREHENSIVE FIX */
body.sidebar-layout.sidebar-closed .app-menu {
    transform: translateX(-250px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.sidebar-layout.sidebar-closed main,
body.sidebar-layout.sidebar-closed .page-wrapper {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.sidebar-layout.sidebar-closed .app-navbar {
    left: 0 !important;
    margin-left: 0 !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
}

body.sidebar-layout.sidebar-closed .app-footer {
    margin-left: 0 !important;
    width: 100% !important;
}

/* RTL Desktop Layout - Default State (Sidebar Showing) - descendant selector fix */
[dir="rtl"] body.sidebar-layout:not(.sidebar-mini) main,
[dir="rtl"] body.sidebar-layout:not(.sidebar-mini) .page-wrapper,
[dir="rtl"] body.sidebar-layout main,
[dir="rtl"] body.sidebar-layout .page-wrapper,
[dir="rtl"] .main-wrapper main,
[dir="rtl"] .main-wrapper .page-wrapper {
    margin-left: 0 !important;
    margin-right: 250px !important;
    margin-inline-start: 250px !important;
    width: calc(100% - 250px) !important;
    max-width: calc(100% - 250px) !important;
    left: 0 !important;
}

/* Fix sidebar header/title alignment in RTL */
[dir="rtl"] .sidebar .sidebar-menu>ul>li>a,
[dir="rtl"] .app-menu .menu>li>a {
    text-align: right !important;
}

/* RTL Support for Sidebar Closed - COMPREHENSIVE FIX */
[dir="rtl"] body.sidebar-layout.sidebar-closed .app-menu,
[dir="rtl"].sidebar-closed .app-menu {
    transform: translateX(250px) !important;
    right: -250px !important;
    left: auto !important;
}

[dir="rtl"] body.sidebar-layout.sidebar-closed main,
[dir="rtl"] body.sidebar-layout.sidebar-closed .page-wrapper,
[dir="rtl"].sidebar-closed main,
[dir="rtl"].sidebar-closed .page-wrapper {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

[dir="rtl"] body.sidebar-layout.sidebar-closed .app-navbar,
[dir="rtl"].sidebar-closed .app-navbar {
    right: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
}

[dir="rtl"] body.sidebar-layout.sidebar-closed .app-footer,
[dir="rtl"].sidebar-closed .app-footer {
    margin-right: 0 !important;
    width: 100% !important;
}

/* CRITICAL: Remove any pseudo-elements that might create space */
.sidebar-layout main::after,
.sidebar-layout .app-footer::after,
body::after,
html::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: Ensure footer is the absolute last element with no space after */
.sidebar-layout .app-footer:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
    /* Keep internal padding for footer content */
}

/* CRITICAL: Stop document height exactly at footer - no blank space after - already defined above, removed duplicate */

/* Ensure footer container doesn't create space */
.sidebar-layout main .app-footer {
    position: relative;
}

/* Removed: Extensive mini sidebar rules */

/* Removed: Remaining mini sidebar rules */

/* Removed: Final mini sidebar rules cleanup */

@media (max-width: 1024px) {
    .sidebar-layout .app-menu.primary {
        background-color: var(--colorPrimary);
    }
}

/***********************************
* 9. Drawer Layout CSS Start
************************************/

.drawer-layout .app-navbar {
    inset-inline-start: 0;
    inset-inline-end: 0;
}

.drawer-layout .app-navbar .logo img {
    max-height: 3rem;
    margin: auto 0.75rem;
}

.drawer-layout .app-navbar .logo .logo-mini {
    display: none;
}

.drawer-layout .app-navbar .logo .logo-full {
    display: inline-block;
}

@media (max-width: 1024px) {
    .drawer-layout .app-navbar .logo .logo-full {
        display: none;
    }
}

.drawer-layout.sidebar-show::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    z-index: 120;
    animation-name: fadeinbackdrop;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.drawer-layout.sidebar-show .app-menu {
    display: block;
}

.drawer-layout .app-menu {
    background: var(--colorBackgroundGD);
    background-color: var(--colorBackground);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: fixed;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    color: var(--colorTextPrimary);
    z-index: 120;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none;
    border-inline-end: 1px solid var(--colorBorder);
    transition: left 320ms ease, width 320ms ease;
    width: 250px;
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
    display: none;
}

.drawer-layout .app-menu .header {
    height: 60px;
    background-color: transparent;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    border-block-end: 1px solid var(--colorBorder);
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    transition: left 320ms ease, width 320ms ease;
    outline: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
}

.drawer-layout .app-menu .header .menu-toggle {
    padding: 0;
    border-radius: 4px;
    transition: all ease 0.3s;
    display: block;
    font-size: 22px;
    color: var(--colorTextPrimary);
    position: relative;
    line-height: 33px;
    outline: none;
    height: 37px;
    width: 37px;
    text-align: center;
}

.drawer-layout .app-menu .header .menu-toggle i {
    width: 20px;
    height: 20px;
    transition: all ease 0.3s;
    font-size: 20px;
    filter: drop-shadow(0 2px 5px var(--colorPrimaryShadow));
}

.drawer-layout .app-menu .header .menu-toggle:hover {
    background-color: var(--colorSurface);
}

.drawer-layout .app-menu .header .logo img {
    margin: 0 auto;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    max-width: 100%;
    max-height: 50px;
}

.drawer-layout .app-menu .header .logo .logo-mini {
    display: none;
}

.drawer-layout .app-menu .menu {
    width: 100%;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    overflow-y: auto;
}

.drawer-layout .app-menu .menu>li {
    display: block;
    margin: 3px 6px;
}

.drawer-layout .app-menu .menu>li>a {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    width: 100%;
    letter-spacing: .3px;
    color: var(--colorTextPrimary);
    font-weight: 600;
    font-size: 0.813rem;
    text-decoration: none;
    border-radius: 6px;
}

.drawer-layout .app-menu .menu>li>a i {
    width: 28px;
    font-size: 15px;
    margin-right: 10px;
    text-align: center;
}

.drawer-layout .app-menu .menu>li>a span {
    margin-top: 3px;
    width: 100%;
}

.drawer-layout .app-menu .menu>li>a:hover {
    background-color: var(--colorSurface);
    color: var(--colorPrimary);
}

.drawer-layout .app-menu .menu>li.active>a {
    background-color: var(--colorSurface);
    color: var(--colorPrimary);
}

.drawer-layout .app-menu .menu>li.has-submenu.toggled>a {
    background-color: var(--colorSurface);
    color: var(--colorPrimary);
}

.drawer-layout .app-menu .menu>li.has-submenu:before {
    content: "";
}

.drawer-layout .app-menu .menu>li.has-submenu>a {
    position: relative;
}

.drawer-layout .app-menu .menu>li.has-submenu>a .side-menu__angle {
    position: absolute;
    right: 17px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorTextPrimary);
    transition: transform 0.3s ease;
}

.drawer-layout .app-menu .menu>li.has-submenu.toggled>a .side-menu__angle {
    color: var(--colorTextPrimary);
    transform: rotate(90deg);
}

.drawer-layout .app-menu .menu>li.has-submenu>a:hover .side-menu__angle {
    color: var(--colorPrimary);
}

.drawer-layout .app-menu .menu>li.has-submenu>a.active .side-menu__angle {
    color: var(--colorPrimary);
}

.drawer-layout .app-menu .menu li .submenu {
    margin: 0;
    padding: 0;
    margin-left: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    border-left: none;
    list-style: none;
    display: none;
    overflow: visible;
    max-height: none;
}

.drawer-layout .app-menu .menu li .submenu>li {
    display: flex;
    flex-direction: column;
    padding-inline-start: 0.75rem;
}

.drawer-layout .app-menu .menu li .submenu>li a {
    font-size: 0.75rem;
    padding: 0.40rem 0;
    margin: 0px;
    transition: all 0.5s;
    border-radius: 10px;
    color: var(--colorTextPrimary);
    position: relative;
}

.drawer-layout .app-menu .menu li .submenu>li a i {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9rem;
    width: 1.5rem;
}

.drawer-layout .app-menu .menu li .submenu>li a:hover {
    color: var(--colorPrimary);
}

.drawer-layout .app-menu .menu li .submenu>li a .dropdown-icon {
    font-size: 0.75rem;
    position: absolute;
    right: 0;
    top: 8px;
}

.drawer-layout .app-menu .menu li .submenu>li.active a {
    color: var(--colorPrimary);
}

.drawer-layout .app-menu .menu .footer {
    margin-top: 20px;
    border-top: 1px solid #dee2e630;
    padding: 20px 25px;
}

.drawer-layout .app-menu .footer p {
    line-height: 10px;
    font-size: 12px;
    color: var(--colorTextLight);
}

.drawer-layout main {
    margin-top: 60px;
    margin-inline-start: 0;
}

.drawer-layout main {
    padding-inline-start: 10%;
    padding-inline-end: 10%;
}

@media (max-width: 1400px) {
    .drawer-layout main {
        padding-inline-start: 5%;
        padding-inline-end: 5%;
    }
}

@media (max-width: 1024px) {
    .drawer-layout main {
        margin-top: 0 !important;
        margin-inline-start: 0 !important;
    }

    .drawer-layout main {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }

    .drawer-layout .app-navbar {
        position: sticky;
        inset-inline-start: 0;
    }
}

/* Primary */
.drawer-layout .app-menu.primary {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.drawer-layout .app-menu.primary .header .menu-toggle {
    color: var(--colorOnPrimary);
}

.drawer-layout .app-menu.primary .header .menu-toggle:hover {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.drawer-layout .app-menu.primary .menu>li>a {
    color: var(--colorOnPrimary);
}

.drawer-layout .app-menu.primary .menu>li>a:hover {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.drawer-layout .app-menu.primary .menu>li.active>a {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.drawer-layout .app-menu.primary .menu>li.has-submenu.toggled>a {
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.drawer-layout .app-menu.primary .menu>li.has-submenu>a .side-menu__angle {
    color: var(--colorOnSurface);
}

.drawer-layout .app-menu.primary .menu>li.has-submenu.toggled>a .side-menu__angle {
    color: var(--colorOnPrimary);
    transform: rotate(90deg);
}

.drawer-layout .app-menu.primary .menu>li.has-submenu>a:hover .side-menu__angle {
    color: var(--colorOnSurface);
}

.drawer-layout .app-menu.primary .menu>li.has-submenu>a.active .side-menu__angle {
    color: var(--colorOnSurface);
}

.drawer-layout .app-menu.primary .menu li .submenu>li a {
    color: var(--colorOnPrimary);
}

.drawer-layout .app-menu.primary .menu li .submenu>li a:hover {
    color: var(--colorOnPrimary);
}

.drawer-layout .app-menu.primary .footer p {
    line-height: 10px;
    font-size: 12px;
    color: var(--colorOnPrimary);
}

/***********************************
10. Swal Library CSS Start
************************************/
.swal-button {
    border-radius: 3px;
    font-size: 16px
}

.swal-button:focus {
    box-shadow: none
}

.swal-button.swal-button--confirm {
    box-shadow: 0 2px 6px var(--colorPrimaryLight);
    background-color: var(--colorPrimary)
}

.swal-button.swal-button--confirm:focus {
    opacity: 0.8
}

.swal-footer {
    text-align: center
}

.swal-text {
    text-align: center;
    line-height: 24px;
    font-weight: 500
}

/*************************
11. Datatable CSS Start
**************************/
table.dataTable {
    border-collapse: collapse !important;
    width: 100%;
    min-height: 100px;
}

table.dataTable th,
table.dataTable td {
    vertical-align: middle;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid var(--colorBorder) !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--colorBorder) !important;
}

table.dataTable img {
    box-shadow: 0 5px 15px 0 rgba(105, 103, 103, 0.247);
    border: 2px solid var(--colorBackground);
    border-radius: 10px;
}

table.dataTable .badge-shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}

table.dataTable .tblHrdcheckbox {
    margin-left: 15px;
}

.dataTables_wrapper {
    padding: 0 !important;
    font-size: 13px !important;
    margin-bottom: 10px;
}

.dataTables_length {
    float: inline-start;
    vertical-align: middle;
    width: 50%;
    margin: 5px 0;
}

.dataTables_filter {
    float: inline-end;
    vertical-align: middle;
    margin: 5px 0;
}

.dt-buttons {
    text-align: end;
    width: 100%;
    margin: 10px 0;
}

@media only screen and (max-width: 767px) {

    .dataTables_filter,
    .dataTables_length,
    .dt-buttons {
        float: none;
        display: inline-block;
        width: 100%;
        text-align: center;
    }
}

.buttons-pdf {
    background-color: #ea1c1c;
    color: #ffffff;
}

.buttons-pdf:hover {
    background-color: #920d0d;
    color: #ffffff;
}

.buttons-pdf i {
    font-size: 18px;
}

.buttons-excel {
    background-color: #148110;
    color: #ffffff;
}

.buttons-excel:hover {
    background-color: #28680b;
    color: #ffffff;
}

.buttons-excel i {
    font-size: 18px;
}

.buttons-csv {
    background-color: #494646;
    color: #ffffff;
}

.buttons-csv:hover {
    background-color: #1b1a1a;
    color: #ffffff;
}

.buttons-csv i {
    font-size: 18px;
}

.buttons-print {
    background-color: #33b4b4;
    color: #ffffff;
}

.buttons-print:hover {
    background-color: #0b7a66;
    color: #ffffff;
}

.buttons-print i {
    font-size: 18px;
}

.buttons-colvis {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.buttons-colvis:hover {
    background-color: var(--colorPrimaryDark);
    color: var(--colorOnPrimary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    margin: 0 !important;
    float: left;
    background: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
    background: transparent;
    border: 1px solid var(--colorBorder);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.active a {
    background-color: var(--colorPrimary);
    border: 1px solid var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.dataTables_wrapper .dataTables_paginate .page-item a {
    color: var(--colorPrimary);
}

.dataTables_wrapper .dataTables_paginate .page-item a:focus {
    box-shadow: none;
}

div.dataTables_processing>div:last-child>div {
    display: none !important;
}

div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    margin: auto;
}

div.dataTables_processing .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid var(--colorBorder);
    border-radius: 50%;
    border-top: 3px solid var(--colorOnSurface);
    width: 40px;
    height: 40px;
    /* Safari */
    animation: spin 1s linear infinite;
}

.dt-button-collection {
    display: block !important;
    position: absolute;
    right: 0;
    left: auto;
    z-index: 9;
    margin-left: auto;
    margin-top: 10px;
    background: var(--colorBackground);
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    border: none;
    width: 200px;
    padding: 8px 4px;
}

.dt-button-collection button {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--colorTextLight);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-align: left;
}

.dt-button-collection button:hover {
    background-color: var(--colorSurface);
}

.dt-button-collection button:before {
    content: "\f111";
    font-family: "FontAwesome";
    margin-right: 5px;
}

.dt-button-collection button.active:before {
    content: "\f058";
    font-family: "FontAwesome";
    margin-right: 5px;
    color: var(--colorPrimary);
}

[dir="rtl"] div.dataTables_processing.dataTables_wrapper .dataTables_paginate .paginate_button .next a i {
    content: '\f053\00a0';
}

[dir="rtl"] div.dataTables_processing.dataTables_wrapper .dataTables_paginate .paginate_button .previous a i {
    content: '\f054\00a0';
}

/********************************
* 12. Theme Customizer
********************************/
.theme-customizer .title {
    padding: 6px 10px;
    background-color: var(--colorSurface);
    border-inline-start: 2px solid var(--colorPrimary);
    border-radius: 3px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}

.theme-customizer .description {
    margin: 2px 0;
}

.theme-customizer .layouts .item {
    border: 1px solid var(--colorBorder);
    width: 150px;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    margin-inline-end: 12px;
}

.theme-customizer .layouts .item input {
    margin-inline-start: 5px;
}

.theme-customizer .layouts .item img {
    max-width: 130px;
    cursor: pointer;
}

.theme-customizer .layouts .item label p {
    color: var(--colorTextLight);
    margin-bottom: 0;
}

.theme-customizer .color {
    display: inline-block;
    margin-inline-end: 7px;
    margin-bottom: 7px;
}

.theme-customizer .color input[type="radio"] {
    display: none;
}

.theme-customizer .color input[type="radio"]:checked+.indigator {
    border-radius: 10px;
    border: 3px solid #fff;
    outline: 2px dashed var(--colorPrimary);
}

.theme-customizer .color .indigator {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 10px 20px;
    border-radius: 7px;
    cursor: pointer;
    background-color: var(--colorPrimary) !important;
    display: inline-block;
    border: 1px solid var(--colorBorder);
}

.theme-customizer .color .indigator.light {
    background-color: var(--colorBackground) !important;
}

.theme-customizer .color .indigator.dark {
    background-color: #212529 !important;
}

.theme-customizer .color .indigator.primary {
    background-color: var(--colorPrimary) !important;
}

/*******************************
* 13. Invoice CSS Start
*******************************/
.invoice {
    background-color: var(--colorBackground);
    border-radius: 8px;
    border: none;
    position: relative;
    margin-bottom: 25px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
    padding: 40px
}

.invoice hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border-top-color: var(--colorBorder);
}

.invoice .details {
    margin-bottom: 13px
}

.invoice .details .title {
    letter-spacing: 0.3px;
    color: var(--color-heading);
    margin-bottom: 3px
}

.invoice .details .value {
    font-size: 17px;
    color: var(--color-heading);
    font-weight: 700
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .table-invoice table {
        min-width: 750px
    }
}

/***********************************
* 14. POS CSS Start
************************************/
.invoice-preview {
    padding: 12px;
}

.invoice-preview .invoice-frame {
    width: 100%;
    min-height: 300px;
    border: none;
    background-color: #ffffff;
}

.invoice-preview.thermal-preview {
    max-width: 95mm;
    margin: 0 auto;
}

.invoice-preview.thermal-preview .invoice-frame {
    min-height: 0;
}

.upload-drop-zone {
    border: 2px dashed rgba(17, 24, 39, 0.18);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    background-color: #fdfdfd;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.upload-drop-zone.active {
    border-color: rgba(63, 81, 181, 0.6);
    background-color: rgba(63, 81, 181, 0.08);
    box-shadow: 0 0 0 4px rgba(63, 81, 181, 0.12);
}

.pos .pos-left .p-title {
    font-size: 16px;
    font-weight: 500;
}

.pos .pos-left .cart {
    height: auto;
    max-height: 470px;
    min-height: calc(100vh - 400px);
}

.pos .pos-left .card {
    border-radius: 0;
}

.pos .pos-left .btn-link {
    color: var(--colorOnPrimary);
    text-decoration: none;
    padding: 3px 7px;
    font-size: 13px;
    margin-inline-end: 5px;
}

.pos .pos-left .btn-link i {
    font-size: 14px;
}

.pos .pos-left .btn-link .fa.fa-edit {
    font-size: 14px !important;
}

.pos .pos-left .btn-link:hover {
    opacity: 0.7;
}

.pos .pos-left .calculation .table tr td {
    cursor: pointer;
    text-align: center;
}

.pos .pos-left .calculation .table tr td.clickable:hover {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.pos .pos-left .calculation .table td,
.pos .pos-left .calculation .table th {
    font-size: 12px;
}

.pos .pos-right .products-block {
    height: auto;
    max-height: 500px;
    min-height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative;
}

@media (max-width: 991px) {
    .pos .pos-right {
        margin-top: 20px;
    }

    .pos .pos-left .calculation .table td,
    .pos .pos-left .calculation .table th {
        font-size: 10px;
    }
}

.pos .pos-right .products-block .product-single {
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .08);
    cursor: pointer;
    margin-bottom: 16px;
    margin-left: 8px;
    margin-right: 8px;
    border: 1px solid #e0e3ff52;
    width: calc(16.66% - 16px);
}

.pos .pos-right .products-block .product-single .inner {
    border-color: transparent !important;
    border-radius: 10px;
}

@media (max-width: 1399px) {
    .pos .pos-right .products-block .product-single {
        margin-left: 6px;
        margin-right: 6px;
        width: calc(20% - 12px) !important;
    }
}

@media (max-width: 1199px) {
    .pos .pos-right .products-block .product-single {
        width: calc(25% - 12px) !important;
    }
}

@media (max-width: 991px) {
    .pos .pos-right .products-block .product-single {
        width: calc(32.66% - 12px) !important;
    }
}

@media (max-width: 767px) {
    .pos .pos-right .products-block .product-single {
        width: calc(25% - 12px) !important;
    }
}

@media (max-width: 575px) {
    .pos .pos-right .products-block .product-single {
        width: calc(25% - 12px) !important;
    }
}

@media (max-width: 480px) {
    .pos .pos-right .products-block .product-single {
        width: calc(33.33% - 12px) !important;
    }
}

@media (max-width: 374px) {
    .pos .pos-right .products-block .product-single {
        width: calc(50% - 12px) !important;
    }
}

.pos .pos-right .products-block .product-single .image {
    height: 100px !important;
    max-height: 100px !important;
    object-fit: contain;
    width: 100% !important;
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
}

@media (max-width: 1199px) {
    .pos .pos-right .products-block .product-single .image {
        height: 70px !important;
        max-height: 70px !important;
    }
}

.pos .pos-right .products-block .product-single .product-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    font-size: 12px;
}

@media (max-width: 1199px) {
    .pos .pos-right .products-block .product-single .product-title {
        font-size: 12px !important;
        margin-bottom: 4px;
    }
}

.pos .pos-right .products-block .product-single .badge {
    border-radius: 4px;
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    padding: 0.25em 0.4em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    min-width: 40px !important;
}

.pos .pos-right .products-block .product-single .badge-left {
    position: absolute;
    right: 0;
    top: -3px;
}

.pos .pos-right .products-block .product-single .badge-right {
    left: 0;
    position: absolute;
    top: -3px;
}

.pos .pos-right .products-block .pagination {
    width: 100%;
}

.pos .pos-right .products-block .pagination .btn {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    text-align: center;
    background: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.pos .pos-right .products-block .pagination .next {
    position: absolute;
    inset-inline-end: 0;
    top: 48%;
}

.pos .pos-right .products-block .pagination .previous {
    position: absolute;
    inset-inline-start: 0;
    top: 48%;
}

.pos .pos-right .products-block .pagination .btn.disabled {
    border: 1px solid var(--colorBorder);
    background-color: var(--colorSurface);
    color: var(--colorOnSurface);
}

.pos .pos-right .note {
    width: 100%;
    color: var(--colorPrimary);
}

.pos .categories {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Enable touch scroll on iOS devices */
    margin-bottom: 10px;
    padding: 10px 0;
}

.pos .categories .items {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.pos .categories .items li {
    display: inline-block;
    margin-right: 5px;
    background: var(--colorBackground);
    border: 1px solid #e0e3ff52;
    padding: 5px 1px;
    min-width: 90px;
    width: 90px;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .08);
    cursor: pointer;
}

.pos .categories .items li:hover {
    background-color: var(--colorSurface);
}

.pos .categories .items li img {
    height: 40px !important;
    width: 40px !important;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

.pos .categories .items .title {
    color: var(--colorTextPrimary);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos .categories .items li:last-child {
    margin-right: 0;
}

.pos .categories .items li.active {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.pos .categories .items li.active .title {
    color: var(--colorOnPrimary);
}


.pos .cartItems .item {
    cursor: pointer;
}

.pos .cartItems .item td {
    padding: 10px;
}

.pos .cartItems .item.active {
    background-color: var(--colorPrimaryLight);
    color: var(--colorOnPrimaryLight);
}

.pos .cartItems .item.active td {
    color: var(--colorOnPrimaryLight);
}

.order-header-btns .btn {
    color: var(--colorOnPrimary);
    text-overflow: ellipsis;
    padding: 0 2px;
}

.order-header-btns .btn:hover {
    opacity: 0.9;
}

.kitchen .order-detail {
    padding: 0;
    height: 30vh;
    overflow-y: auto;
}

.orders .item {
    cursor: pointer;
    background-color: var(--colorBackground);
    border: 1px solid var(--colorBorder);
    border-radius: 10px;
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: 0 4px 25px 0 rgb(0 0 0 / 10%);
}

.orders .item:hover {
    background-color: var(--colorSurface);
    border: 1px solid var(--colorPrimary);
}

.orders h6,
.orders p {
    margin-bottom: 0;
}

/*
    Numpad
*/
.numpad .row {
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--colorSurface);
}

.numpad .row div {
    padding: 3px;
}

.numpad .row div .item {
    text-align: center;
    background-color: var(--colorBackground);
    box-shadow: 0 4px 25px 0 rgb(0 0 0 / 10%);
    padding: 10px 0;
    font-weight: 900;
    color: var(--colorTextPrimary);
    cursor: pointer;
    border-radius: 0.25rem;
}

.numpad .row div .item:hover {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

/***********************************
* 15. Product CSS Start
************************************/

.product {
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid var(--colorBorder);
    box-shadow: 0px 12px 23px 0px rgb(0 0 0 / 20%);
    position: relative;
    cursor: pointer;
    color: var(--colorTextPrimary);
}

.product .product-header {
    height: 100px;
    position: relative;
    overflow: hidden;
    padding: 1px;
}

.product .product-header .image {
    background-color: var(--colorSurface);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1
}

.product .product-details .title h2 {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product .product-details {
    background-color: transparent;
    padding: 3px 20px;
    line-height: 24px
}

.product:hover {
    background-color: var(--colorPrimaryLight);
    border: 1px solid var(--colorPrimaryLight);
    color: var(--colorOnPrimaryLight);
}

.product:hover h2 {
    color: var(--colorOnPrimaryLight);
}

.product.active {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
    border: 1px solid var(--colorPrimary);
}

.product.active:before {
    position: absolute;
    top: 5px;
    left: 5px;
    content: "\f058";
    font-family: "FontAwesome";
    color: var(--colorPrimary);
    z-index: 1;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .product .product-header {
        height: 70px !important
    }
}

@media (max-width: 1024px) {
    .product .product-header {
        height: 80px
    }
}


.horizontal-product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
}

.horizontal-product-list>li {
    display: block;
    width: 100%;
}

.horizontal-product-box {
    background: var(--colorSurface);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    gap: 10px;
}

.cart-product-box {
    background: var(--colorSurface);
    border-radius: 8px;
    display: flex;
    gap: 10px;
}

.cart-product-box .horizontal-product-img {
    width: 88px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px;
    padding: 12px 20px;
}

.horizontal-product-box .horizontal-product-img {
    width: 80px;
    height: 80px;
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--colorBackground);
    border-radius: 8px;
}

.cart-product-box .horizontal-product-details {
    width: calc(100% - 88px - 10px);
}

.horizontal-product-box .horizontal-product-details {
    width: calc(100% - 80px - 10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-product-box .horizontal-product-details .trash-button {
    outline: none;
    border: none;
    background: transparent;
}

.cart-product-box .horizontal-product-details .trash-button i {
    font-size: 18px;
    color: #ff0000;
    cursor: pointer;
}

.cart-product-box .horizontal-product-details .product-title {
    font-size: 14px;
}

.cart-product-box .horizontal-product-details .product-info {
    display: flex;
    padding: 0;
}

.cart-product-box .horizontal-product-details .product-price {
    font-size: 15px;
}

.cart-product-box .horizontal-product-details .product-price-input {
    border-bottom: 1px solid var(--colorPrimary);
    padding: 2px 0;
}

.cart-product-box .horizontal-product-details .product-price-input input {
    width: 70px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}

.cart-product-box .horizontal-product-details .product-info li {
    position: relative;
    font-weight: 400;
    line-height: 1;
    color: var(--colorTextLight);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: 5px;
}

.plus-minus {
    display: flex;
    align-items: center;
    padding: 3px;
    text-align: center;
    background-color: var(--colorSurface);
    border-radius: 100px;
}

.plus-minus .plus-minus-button {
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: var(--colorPrimary);
}

.plus-minus .plus-minus-button.sub {
    background-color: var(--colorBackground);
}

.plus-minus input {
    background-color: rgba(var(--white), 1);
    padding: 0;
    color: var(--colorPrimary);
    border: none;
    font-size: 14px;
    outline: none;
    width: 45px;
    text-align: center;
}

.plus-minus .plus-minus-button.add {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.trash-btn {
    outline: none;
    border: none;
    background: transparent;
}

.trash-btn i {
    font-size: 18px;
    color: #ff0000;
    cursor: pointer;
}

.product-detail .plus-minus {
    display: flex;
    align-items: center;
    padding: 3px;
    text-align: center;
    background-color: var(--colorSurface);
    border-radius: 100px;
}

.product-detail .plus-minus .plus-minus-button {
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: var(--colorPrimary);
}

.product-detail .plus-minus .plus-minus-button.sub {
    background-color: var(--colorSurface);
    border: 1px solid var(--colorBorder);
}

.product-detail .plus-minus input {
    background-color: rgba(var(--white), 1);
    padding: 0;
    color: var(--colorPrimary);
    border: none;
    font-size: 14px;
    outline: none;
    width: 60px;
    text-align: center;
}

.product-detail .plus-minus .plus-minus-button.add {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.product-detail .product-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 3px;
}

.product-detail .product-price {
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 400;
}

.product-detail .variant-name {
    font-size: 14px;
    margin-bottom: 2px;
    margin-top: 8px;
    font-weight: 500;
}

.product-detail .product-info li {
    position: relative;
    font-weight: 400;
    line-height: 1;
    color: var(--colorTextLight);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: 5px;
}

/*******************************
* 16. Invoice CSS Start
*******************************/
.invoice {
    background-color: var(--colorBackground);
    border-radius: 8px;
    border: none;
    position: relative;
    margin-bottom: 25px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
    padding: 40px
}

.invoice hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border-top-color: var(--colorBorder);
}

.invoice .details {
    margin-bottom: 13px
}

.invoice .details .title {
    letter-spacing: 0.3px;
    color: var(--color-heading);
    margin-bottom: 3px
}

.invoice .details .value {
    font-size: 17px;
    color: var(--color-heading);
    font-weight: 700
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .table-invoice table {
        min-width: 750px
    }
}

/**/
.jconfirm.jconfirm-modern .jconfirm-box {
    background-color: var(--colorBackground);
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
    color: var(--colorTextPrimary);
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
    color: var(--colorTextLight);
}


/***********************************************
* Authentication
***********************************************/
.auth {
    min-height: 100vh;
    background-color: #ffffff;
}

.auth .auth-brand {
    max-height: 65px;
    max-width: 140px;
}

.auth .auth-brand-large {
    max-height: 120px;
    max-width: 200px;
}

.auth .auth-body {
    height: 100vh;
    padding: 0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth .auth-cover {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Create blurred background effect using backdrop-filter */
.auth .auth-cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-end;
    padding: 40px;
    z-index: 1;
}

.auth .auth-cover-content {
    width: 100%;
    position: relative;
    z-index: 2;
}

.auth .auth-logo-container {
    margin-bottom: 20px;
}

.auth .auth-tagline {
    color: #333;
    font-weight: 600;
}

.auth .auth-tagline-line1 {
    font-size: 24px;
    color: #0066cc;
    margin-bottom: 5px;
    font-weight: 600;
}

.auth .auth-tagline-line2 {
    font-size: 28px;
    color: var(--colorPrimary);
    font-weight: 700;
}

/* Software version badge */
.software-version-badge {
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

/* Auth title and subtitle */
.auth-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 32px;
    font-weight: 400;
}

/* Auth input fields */
.auth-input {
    padding: 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.auth-input:focus {
    border-color: #0066cc;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
    outline: none;
}

.auth-input::placeholder {
    color: #adb5bd;
}

/* Password input wrapper */
.password-input-wrapper {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.password-toggle-btn:hover {
    color: #0066cc;
}

.password-toggle-btn:focus {
    outline: none;
}

/* Sign in button */
.auth-signin-btn {
    background-color: #0066cc;
    border-color: #0066cc;
    color: #ffffff;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.auth-signin-btn:hover {
    background-color: #0052a3;
    border-color: #0052a3;
    color: #ffffff;
}

.auth-signin-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.5);
}

/* Credentials section */
.credentials-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 6px;
    gap: 12px;
}

.credentials-text {
    flex: 1;
}

.credential-item {
    font-size: 14px;
    color: #495057;
    margin-bottom: 4px;
}

.credential-item:last-child {
    margin-bottom: 0;
}

.credentials-copy-btn {
    background-color: #343a40;
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    font-size: 16px;
}

.credentials-copy-btn:hover {
    background-color: #23272b;
    transform: scale(1.05);
}

.credentials-copy-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(26, 26, 46, 0.25);
}

/* Auth footer */
.auth-footer {
    text-align: center;
    margin-top: 24px;
}

.privacy-terms-link {
    color: #6c757d;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.privacy-terms-link:hover {
    color: #0066cc;
    text-decoration: none;
}

/* Developer Contact Section */
.developer-contact-section {
    padding: 16px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-top: 16px;
}

.developer-contact-title {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
    text-align: center;
}

.developer-contact-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.developer-contact-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #495057;
    flex-wrap: wrap;
}

.developer-contact-label {
    font-weight: 500;
    min-width: 70px;
    margin-right: 8px;
    color: #6c757d;
}

.developer-contact-value {
    color: #212529;
    flex: 1;
}

.developer-contact-link {
    display: inline-flex;
    align-items: center;
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
    flex: 1;
}

.developer-contact-link:hover {
    color: #0052a3;
    text-decoration: none;
}

.developer-contact-icon {
    font-size: 14px;
    margin-right: 6px;
    width: 16px;
    text-align: center;
}

.developer-contact-link .fa-whatsapp {
    color: #25D366;
}

.developer-contact-link:hover .fa-whatsapp {
    color: #128C7E;
}

.developer-contact-link .fa-envelope {
    color: #EA4335;
}

.developer-contact-link:hover .fa-envelope {
    color: #C5221F;
}

/* Mobile responsiveness for Developer Contact */
@media (max-width: 576px) {
    .developer-contact-section {
        padding: 12px;
    }

    .developer-contact-title {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .developer-contact-item {
        font-size: 12px;
        gap: 4px;
    }

    .developer-contact-label {
        min-width: 60px;
        font-size: 12px;
    }

    .developer-contact-icon {
        font-size: 13px;
        margin-right: 4px;
        width: 14px;
    }
}



/*
Material
*/

.per-title {
    font-size: 16px;
    background-color: var(--colorSurface);
    padding: 4px;
    margin-top: 10px;
    margin-inline-end: 10px;
}

.per-item {
    display: inline-block;
    width: 160px;
    margin-bottom: 7px;
}

.no-data img {
    max-width: 80px;
}

.no-data h4 {
    font-size: 16px;
    color: var(--colorTextLight);
    font-weight: 400;
}

.d-detail-block .d-item {
    display: flex;
    justify-content: space-between;
}

.d-detail-block .d-item .title {
    margin: 0;
}

.d-detail-block .d-item .desc {
    margin: 0;
}

.grid-buttons {
    display: flex;
}

.grid-buttons .g-btn {
    width: 80px;
    height: 58px;
    text-align: center;
    background-color: var(--colorSurface);
    padding: 8px 0;
    margin-inline-end: 5px;
    border-bottom: 2px solid var(--colorPrimary);
    border-radius: 3px;
    cursor: pointer;
}

.grid-buttons .g-btn:hover {
    background-color: var(--colorPrimary);
    transition: all 1s;
}

.grid-buttons .g-btn .g-icon i {
    font-size: 22px;
    color: var(--colorTextPrimary);
}

.grid-buttons .g-btn .g-name {
    font-size: 14px;
    color: var(--colorTextPrimary);
}


/*
Edit Profile
*/
.u-image-preview {
    width: 120px;
    height: 120px;
    border: 1px dashed var(--colorBorder);
    border-radius: 50%;
    position: relative;
    background-color: var(--colorBackground);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--colorOnPrimary);
    cursor: pointer;
}

.u-image-preview input {
    width: 120px;
    height: 120px;
    font-size: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}

.u-image-preview img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.u-image-preview button {
    position: absolute;
    right: 2px;
    bottom: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--colorBorder);
    border-radius: 50%;
    background-color: var(--colorPrimary);
    color: var(--colorOnPrimary);
}

.total-order {
    max-width: 430px;
    width: 100%;
    margin: 10px 0 30px auto;
}

.total-order ul {
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: baseline;
}

.total-order ul li:first-child {
    border-top: 1px solid var(--colorBorder);
}

.total-order ul li {
    border: 1px solid var(--colorBorder);
    border-top: 0;
    display: flex;
}

.total-order ul li h4 {
    width: 50%;
    color: var(--colorTextLight);
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    border-right: 1px solid var(--colorBorder);
    background: var(--colorSurface);
    margin-bottom: 0;
}

.total-order ul li h5 {
    color: var(--colorTextPrimary);
    font-size: 14px;
    padding: 10px;
    font-weight: 700;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

.total-order ul li.total h4 {
    color: var(--colorTextLight);
    font-weight: 700;
    width: 50%;
    font-size: 14px;
    padding: 10px;
    border-right: 1px solid var(--colorBorder);
    background: var(--colorSurface);
    margin-bottom: 0;
}

.total-order ul li.total h5 {
    color: var(--colorTextPrimary);
    font-weight: 700;
    font-size: 14px;
    padding: 10px;
    text-align: right;
    width: 50%;
    margin-bottom: 0;
}

.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
    background-color: var(--colorBackground);
    color: var(--colorTextLight);
}


/*
Dashboard
*/
.st1 .icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 6px;
}

.st1 .title {
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--colorTextLight);
}

.st1 .amount {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--colorTextPrimary);
}

.st2 {
    padding: 24px 3px;
}

.st2 .icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 25px 0 rgb(0 0 0 / 10%);
}

.st2 .icon i {
    color: var(--colorPrimary);
}

.st2 .title {
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--colorTextLight);
}

.st2 .amount {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--colorTextPrimary);
}

.separate-row>div {
    border-bottom: 1px solid var(--colorBorder);
}

.separate-row>div:nth-child(odd) {
    border-right: 1px solid var(--colorBorder);
}

.separate-row>div:nth-child(n+5) {
    border-bottom: 0;
}

.contact-action {
    position: relative;
    cursor: pointer;
}

.contact-action.active {
    border: 1px solid var(--colorPrimary);
}

.contact-action .avatar {
    position: relative;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 500;
}

.contact-action .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.contact-action .content h6 {
    font-size: 14px;
    margin-bottom: 2px;
}

.contact-action .content p {
    font-size: 12px;
    margin-bottom: 1px;
}

.recent-activity {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.recent-activity .list-item {
    list-style: none;
}

.home-menu .menu {
    list-style: none;
    padding: 0;
}

.home-menu .menu>li.has-submenu {
    margin-top: 12px;
}

.home-menu .menu>li.has-submenu:before {
    content: "\f078\00a0";
    font-family: "FontAwesome";
    position: absolute;
    font-size: 12px;
    inset-inline-end: 23px;
    color: var(--colorTextPrimary);
    margin-top: 5px;
    z-index: 1;
}

.home-menu .menu>li.has-submenu>a {
    display: block;
    color: var(--colorTextPrimary);
    font-weight: 500;
    font-size: 14px;
    padding: 5px 10px;
    background-color: var(--colorSurface);
    border-inline-start: 2px solid var(--colorPrimary);
    border-radius: 3px;
}

.home-menu .menu>li.has-submenu>a i {
    margin-inline-end: 5px;
}

.home-menu .menu>li.has-submenu .submenu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-menu .menu>li.has-submenu .submenu li {
    display: inline-block;
    margin: 10px 0;
    vertical-align: middle;
    text-align: center;
    height: 70px;
    width: 90px;
    cursor: pointer;
    margin-inline-end: 7px;
    overflow: hidden;
}

.home-menu .menu>li.has-submenu .submenu>li>a {
    display: block;
    height: 70px;
    width: 90px;
    color: var(--colorTextLight);
    padding-top: 5px;
    border: 1px solid var(--colorBorder);
    border-bottom: 5px solid var(--colorBorder);
    border-radius: 5px;
}

.home-menu .menu>li.has-submenu .submenu>li>a:hover {
    background-color: var(--colorSurface);
    border: 1px solid var(--colorPrimary);
    border-bottom: 5px solid var(--colorPrimary);
}

.home-menu .menu>li.has-submenu .submenu li a i {
    display: block;
    font-size: 1.3rem;
    margin-top: 5px;
    color: var(--colorTextLight);
}

.home-menu .menu>li.has-submenu .submenu li a span {
    display: inline-block;
    line-height: 13px;
    font-size: 13px;
    margin-top: 2px;
    padding: 0 2px;
}

.home-menu .menu>li:not(.has-submenu) {
    display: inline-block;
    margin: 10px 0;
    vertical-align: middle;
    text-align: center;
    height: 70px;
    width: 90px;
    cursor: pointer;
    margin-inline-end: 7px;
    overflow: hidden;
}

.home-menu .menu>li:not(.has-submenu)>a {
    display: block;
    height: 70px;
    width: 90px;
    color: var(--colorTextLight);
    padding-top: 5px;
    border: 1px solid var(--colorBorder);
    border-bottom: 5px solid var(--colorBorder);
    border-radius: 5px;
}

.home-menu .menu>li:not(.has-submenu)>a:hover {
    background-color: var(--colorSurface);
    border: 1px solid var(--colorPrimary);
    border-bottom: 5px solid var(--colorPrimary);
}

.home-menu .menu>li:not(.has-submenu) a i {
    display: block;
    font-size: 1.3rem;
    margin-top: 5px;
    color: var(--colorTextLight);
}

.home-menu .menu>li:not(.has-submenu) a span {
    display: inline-block;
    line-height: 13px;
    font-size: 13px;
    margin-top: 2px;
    padding: 0 2px;
}

/*
Chart
*/
.chart-p .radial {
    text-align: center;
    position: relative;
    width: 100%;
    height: 330px;
}

.chart-p .radial .outer-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    display: block;
    background: var(--colorSurface);
    border: 1px solid var(--colorBorder);
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

.chart-p .radial .inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    display: block;
    background: var(--colorBackground);
    border: 1px solid var(--colorBorder);
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.chart-p .bars {
    position: relative;
    width: 100%;
    height: 330px;
}

.chart-p .bars .bar {
    background: var(--colorSurface);
    display: inline-block;
    position: absolute;
    min-height: 5px;
    width: 3%;
    max-width: 25px;
    bottom: 10px;
    margin: 0 0.8%;
    border-top: 1px solid var(--colorBorder);
    border-left: 1px solid var(--colorBorder);
    border-right: 1px solid var(--colorBorder);
}

.chart-p .bars .bar.bar-0 {
    height: 260px;
    display: inline-block;
    margin-left: 1%;
}

.chart-p .bars .bar.bar-1 {
    height: 44px;
    display: inline-block;
    margin-left: 5%;
}

.chart-p .bars .bar.bar-2 {
    height: 340px;
    display: inline-block;
    margin-left: 9%;
}

.chart-p .bars .bar.bar-3 {
    height: 314px;
    display: inline-block;
    margin-left: 13%;
}

.chart-p .bars .bar.bar-4 {
    height: 161px;
    display: inline-block;
    margin-left: 17%;
}

.chart-p .bars .bar.bar-5 {
    height: 309px;
    display: inline-block;
    margin-left: 21%;
}

.chart-p .bars .bar.bar-6 {
    height: 231px;
    display: inline-block;
    margin-left: 25%;
}

.chart-p .bars .bar.bar-7 {
    height: 52px;
    display: inline-block;
    margin-left: 29%;
}

.chart-p .bars .bar.bar-8 {
    height: 35px;
    display: inline-block;
    margin-left: 33%;
}

.chart-p .bars .bar.bar-9 {
    height: 216px;
    display: inline-block;
    margin-left: 37%;
}

.chart-p .bars .bar.bar-10 {
    height: 243px;
    display: inline-block;
    margin-left: 41%;
}

.chart-p .bars .bar.bar-11 {
    height: 104px;
    display: inline-block;
    margin-left: 45%;
}

.chart-p .bars .bar.bar-12 {
    height: 311px;
    display: inline-block;
    margin-left: 49%;
}

.chart-p .bars .bar.bar-13 {
    height: 276px;
    display: inline-block;
    margin-left: 53%;
}

.chart-p .bars .bar.bar-14 {
    height: 132px;
    display: inline-block;
    margin-left: 57%;
}

.chart-p .bars .bar.bar-15 {
    height: 32px;
    display: inline-block;
    margin-left: 61%;
}

.chart-p .bars .bar.bar-16 {
    height: 159px;
    display: inline-block;
    margin-left: 65%;
}

.chart-p .bars .bar.bar-17 {
    height: 232px;
    display: inline-block;
    margin-left: 69%;
}

.chart-p .bars .bar.bar-18 {
    height: 158px;
    display: inline-block;
    margin-left: 73%;
}

.chart-p .bars .bar.bar-19 {
    height: 42px;
    display: inline-block;
    margin-left: 77%;
}

.chart-p .bars .bar.bar-20 {
    height: 265px;
    display: inline-block;
    margin-left: 81%;
}

.chart-p .bars .bar.bar-21 {
    height: 84px;
    display: inline-block;
    margin-left: 85%;
}

.chart-p .bars .bar.bar-22 {
    height: 82px;
    display: inline-block;
    margin-left: 89%;
}

.chart-p .lines {
    position: relative;
    width: 100%;
    height: 360px;
}

.chart-p .lines .line {
    background: var(--colorSurface);
    display: inline-block;
    position: absolute;
    min-height: 15px;
    width: 14.28%;
    bottom: 10px;
    margin: 0 0.8%;
    border-top: 1px solid var(--colorBorder);
    overflow: hidden;
}

.chart-p .lines .line.line-0 {
    margin-left: 1%;
}

.chart-p .lines .line.line-1 {
    margin-left: 15.28%;
}

.chart-p .lines .line.line-2 {
    margin-left: 29.56%;
}

.chart-p .lines .line.line-3 {
    margin-left: 43.84%;
}

.chart-p .lines .line.line-4 {
    margin-left: 58.12%;
}

.chart-p .lines .line.line-5 {
    margin-left: 72.4%;
}

.chart-p .lines .line.line-6 {
    margin-left: 86.68%;
}

.chart-p .lines .line .line-0 {
    height: 200px;
}

.chart-p .lines .line .line-1 {
    height: 400px;
}

.chart-p .lines .line .slope {
    display: block;
    background: var(--colorSurface);
    width: 300%;
    height: 100px;
    margin-top: -50%;
    margin-left: -50%;
}

.chart-p .lines .line .slope:nth-of-type(1) {
    /* IE 9 */
    /* Chrome, Safari, Opera */
    transform: rotate(-25deg);
}

/* ============================================
   FINAL OVERRIDE FOR CRM, WARRANTY, CUSTOMERS & SUPPLIERS
   Maximum specificity to ensure these rules apply
   ============================================ */
/* Header - Multiple selectors for maximum compatibility */
.sidebar-layout .app-menu .menu>li:has(.crm-marketing-submenu)>div,
.sidebar-layout .app-menu .menu>li:has(.warranty-serial-submenu)>div,
.sidebar-layout .app-menu .menu>li:has(.customers-suppliers-submenu)>div,
.sidebar-layout .app-menu .menu li:has(.crm-marketing-submenu)>div,
.sidebar-layout .app-menu .menu li:has(.warranty-serial-submenu)>div,
.sidebar-layout .app-menu .menu li:has(.customers-suppliers-submenu)>div {
    padding: 4px 10px !important;
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.sidebar-layout .app-menu .menu li .crm-marketing-submenu>li>a,
.sidebar-layout .app-menu .menu li .warranty-serial-submenu>li>a,
.sidebar-layout .app-menu .menu li .customers-suppliers-submenu>li>a {
    padding: 0.15rem 1rem 0.15rem 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    color: #646B72 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    background: transparent !important;
    border-left: none !important;
    text-align: left !important;
    width: 100% !important;
    line-height: 18px !important;
}

.sidebar-layout .app-menu .menu li .crm-marketing-submenu>li>a.active,
.sidebar-layout .app-menu .menu li .warranty-serial-submenu>li>a.active,
.sidebar-layout .app-menu .menu li .customers-suppliers-submenu>li>a.active {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--colorPrimary) !important;
    font-weight: 500 !important;
    /* border-left: 3px solid var(--colorPrimary) !important;
    padding-left: calc(1.25rem - 3px) !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important; */
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

/* Style the parent items (Promotions, Membership, Performance, Loyalty Program, Warranty, Serial/IMEI, Suppliers) */
.sidebar-layout .app-menu .menu .crm-marketing-submenu>li.has-submenu>a,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li.has-submenu>a,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li.has-submenu>a {
    padding: 0.15rem 1rem 0.15rem 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    color: #646B72 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    border-left: none !important;
    text-align: left !important;
    width: 100% !important;
    line-height: 18px !important;
}

.sidebar-layout .app-menu .menu .crm-marketing-submenu>li.has-submenu>a:hover,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li.has-submenu>a:hover,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li.has-submenu>a:hover {
    background-color: transparent !important;
    color: var(--colorPrimary) !important;
    border-left: none !important;
}

/* Style direct children (non-nested items like Loyalty Program, Customers) */
.sidebar-layout .app-menu .menu .crm-marketing-submenu>li:not(.has-submenu)>a,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li:not(.has-submenu)>a,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li:not(.has-submenu)>a {
    padding: 0.15rem 1rem 0.15rem 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    color: #646B72 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    border-left: none !important;
    text-align: left !important;
    width: 100% !important;
    line-height: 18px !important;
}

.sidebar-layout .app-menu .menu .crm-marketing-submenu>li:not(.has-submenu)>a.active,
.sidebar-layout .app-menu .menu .warranty-serial-submenu>li:not(.has-submenu)>a.active,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu>li:not(.has-submenu)>a.active {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--colorPrimary) !important;
    font-weight: 500 !important;
    /* border-left: 3px solid var(--colorPrimary) !important;
    padding-left: calc(1.25rem - 3px) !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important; */
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

/* ========================================
   GLOBAL COMPACT LEFT SPACING FOR ALL PAGES
   ======================================== */
/* Apply compact left padding to all page content containers */
.page-wrapper .content,
.container-fluid,
main>*,
.main-content,
[class*="container"]:not(.sidebar):not(.navbar),
.dashboard-builder-container,
.scheduler-container,
.page-content {
    padding-left: 5px !important;
}

/* Ensure all direct children of main also have compact spacing */
main>div,
main>section,
main>article {
    padding-left: 5px !important;
}

/* ============================================ */
/* NUCLEAR TEXT VISIBILITY OVERRIDES            */
/* Last rules in site.css = maximum cascade     */
/* ============================================ */

/* LANGUAGE NAME - Force text visible next to flags */
.language-dropdown .language-picker .language-name,
.language-dropdown .language-name,
.dropdown-menu.language-dropdown .language-picker .language-name,
.dropdown-menu.language-dropdown .language-name,
html body .language-dropdown .language-name,
html body .language-dropdown .language-picker .language-name,
span.language-name {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #212529 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: auto !important;
    min-width: 40px !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* BRANCH TEXT - Force branch names visible */
.branch-dropdown .dropdown-item .branch-text,
.branch-dropdown .dropdown-item span,
.dropdown-menu.branch-dropdown .dropdown-item .branch-text,
.dropdown-menu.branch-dropdown .dropdown-item span,
html body .branch-dropdown .dropdown-item .branch-text,
html body .branch-dropdown span.branch-text,
span.branch-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: auto !important;
    min-width: 50px !important;
    height: auto !important;
    min-height: 20px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.branch-dropdown .dropdown-item.active .branch-text,
.branch-dropdown .dropdown-item.active span {
    color: #ffffff !important;
}

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/site-menu-fix.css?ngGlobalStyle ***!
  \****************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ============================================
   FINAL FIX - Hide menu items in wrong places ONLY
   Do NOT interfere with sidebar menu functionality
   VERSION: 2025-12-14-CRITICAL-FIX-v3
   FORCE REFRESH: Press Ctrl+F5 or Clear Cache
   ============================================ */

/* CRITICAL: Ensure modals are always visible and on top */
.segment-modal,
div[class*="modal"],
.modal-container {
    pointer-events: auto !important;
    /* Don't force visibility here - let components control it */
}

/* CRITICAL: Hide li.has-submenu that appears as child of app-root (NOT in sidebar!) */
body.sidebar-layout app-root>li,
body.sidebar-layout app-root>li.has-submenu,
body.sidebar-layout app-root>ul,
body.sidebar-layout app-root>ul.menu,
html body.sidebar-layout div.app app-root>li,
html body.sidebar-layout div.app app-root>li.has-submenu,
html body.sidebar-layout div.app app-root>ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    left: -999999px !important;
    top: -999999px !important;
}

/* REMOVED: These rules were too aggressive and hiding dropdown menus! 
   Instead, we'll ONLY hide elements that are clearly navigation menus */

/* ONLY hide navigation sidebar menu items that leak into main */
body.sidebar-layout main>li.has-submenu,
body.sidebar-layout main>ul.submenu,
body.sidebar-layout main>ul.menu,
html body.sidebar-layout div.app main>li.has-submenu,
html body.sidebar-layout div.app main>ul.submenu,
html body.sidebar-layout div.app main>ul.menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    left: -999999px !important;
    top: -999999px !important;
}

/* REMOVED: Footer is permanently hidden, this rule was hiding all page content! */

/* CRITICAL: Exception - Allow legitimate components to show */
body.sidebar-layout main .dropdown-menu,
body.sidebar-layout main .dropdown-menu li,
body.sidebar-layout main .list-group li,
body.sidebar-layout main .pagination li,
body.sidebar-layout main .breadcrumb li,
body.sidebar-layout main .nav li,
body.sidebar-layout main .reports-list,
body.sidebar-layout main .reports-list li {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    max-height: none !important;
    pointer-events: auto !important;
}

/* ============================================
   CRITICAL: BOOTSTRAP DROPDOWNS - NUCLEAR FIX
   ============================================ */

/* Ensure dropdown toggle buttons are ALWAYS clickable */
[data-bs-toggle="dropdown"],
button.dropdown-toggle,
.btn-action,
.dropdown-toggle,
button[data-bs-toggle],
body.sidebar-layout [data-bs-toggle="dropdown"],
body.sidebar-layout button.dropdown-toggle,
body.sidebar-layout .btn-action,
body.sidebar-layout .dropdown-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
}

/* FORCE show dropdown menu when it has .show class OR when aria-expanded="true" */
.dropdown-menu.show,
[aria-expanded="true"]+.dropdown-menu,
[aria-expanded="true"]~.dropdown-menu,
button.show+.dropdown-menu,
.dropdown.show>.dropdown-menu,
.dropdown.show .dropdown-menu,
body.sidebar-layout .dropdown-menu.show,
body.sidebar-layout main .dropdown-menu.show,
html body.sidebar-layout .dropdown-menu.show,
body.sidebar-layout [aria-expanded="true"]+.dropdown-menu,
body.sidebar-layout [aria-expanded="true"]~.dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    z-index: 999999 !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    min-width: 10rem !important;
    overflow: visible !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    left: auto !important;
    right: 0 !important;
    /* Fallback */
    top: 100% !important;
    bottom: auto !important;
    clip: auto !important;
    clip-path: none !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    pointer-events: auto !important;
    margin: 0.125rem 0 0 !important;
    padding: 0.5rem 0 !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .175) !important;
    transform: none !important;
    inset: auto !important;
}

html[dir="rtl"] .dropdown-menu.show,
html[dir="rtl"] [aria-expanded="true"]+.dropdown-menu,
html[dir="rtl"] [aria-expanded="true"]~.dropdown-menu,
html[dir="rtl"] button.show+.dropdown-menu,
html[dir="rtl"] .dropdown.show>.dropdown-menu,
html[dir="rtl"] body.sidebar-layout .dropdown-menu.show {
    right: auto !important;
    left: 0 !important;
}

/* HEADER & BRANDING PERMANENCE (Logo above sidebar) */
.app-navbar,
.main-header,
.sidebar-layout .app-navbar {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 !important;
    /* CRITICAL: Remove padding to eliminate gap at the start */
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
}

@media (min-width: 992px) {

    /* TOP HEADER LEFT: Remove logo here as it moves to sidebar */
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        flex: 1 !important;
        justify-content: flex-start !important;
        width: auto !important;
        padding-left: 0 !important;
        /* Touch the sidebar perfectly */
        margin-left: 0 !important;
    }

    .header-left .header-item {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-left .menu-toggle,
    .header-left .btn-language-toggle,
    .header-left app-global-search {
        margin-right: 5px !important;
        /* Small consistent spacing */
    }
}

@media (max-width: 991px) {
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: none !important;
    }
}

.header-left .logo {
    display: none !important;
    /* Logo now exists ONLY in sidebar header */
}

@media (min-width: 992px) {

    /* SEARCH BAR: Stable alignment */
    .header-search {
        flex: 0 1 400px !important;
        margin: 0 20px !important;
    }
}

/* EXCEPTION: Language dropdown should be clean-aligned and responsive */
html body.sidebar-layout .header-item-language .dropdown-menu.language-dropdown.show,
.language-dropdown.show,
.header-item-language .language-dropdown.show {
    margin-top: 10px !important;
    transform: none !important;
    inset: auto !important;
    width: 480px !important;
    /* Standard desktop width */
    min-width: 480px !important;
    padding: 15px !important;
}

.language-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
}

@media (max-width: 991px) {

    /* Consistently anchor ALL header dropdowns (language, branch, profile) to the RIGHT edge of their icons exactly, ignoring Popper.js inline styles */
    html body.sidebar-layout .header-right .dropdown-menu.show,
    .header-item-language .language-dropdown.show,
    .header-item-branch-compact .branch-dropdown.show,
    .header-item-profile .dropdown-menu.show {
        position: absolute !important;
        width: 250px !important;
        min-width: 250px !important;
        inset: unset !important;
        left: auto !important;
        right: 0 !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        transform: none !important;
        top: 100% !important;
        margin-top: 10px !important;
    }

    html[dir="rtl"] body.sidebar-layout .header-right .dropdown-menu.show,
    html[dir="rtl"] .header-item-language .language-dropdown.show,
    html[dir="rtl"] .header-item-branch-compact .branch-dropdown.show,
    html[dir="rtl"] .header-item-profile .dropdown-menu.show {
        right: auto !important;
        left: 0 !important;
    }

    /* Single column on mobile */
    .language-grid {
        grid-template-columns: 1fr !important;
    }

}

.language-picker {
    display: flex !important;
    align-items: center !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid #E9EDF4 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.language-picker:hover {
    background: #f8f9fa !important;
    border-color: #ff9f43 !important;
}

/* EXCEPTION: Add New dropdown should be aligned to the right edge of its button */
/* EXCEPTION: Add New dropdown should be aligned to the right edge of its button */
.add-new-dropdown.show,
.header-item-add-new .add-new-dropdown.show {
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    margin-top: 6px !important;
    /* Tighter gap */
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    overflow: visible !important;
    /* Ensure arrow is visible */
}

/* Outer Arrow (Border Color) - Creates the border outline */
.add-new-dropdown.show::before,
.header-item-add-new .add-new-dropdown.show::before {
    content: '';
    position: absolute;
    top: -11px;
    right: 20px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid rgba(0, 0, 0, 0.15);
    /* Match dropdown border color */
    z-index: 1000001;
}

/* Inner Arrow (Background Color) - Masks the border to create seamless look */
.add-new-dropdown.show::after,
.header-item-add-new .add-new-dropdown.show::after {
    content: '';
    position: absolute;
    top: -10px;
    /* 1px offset to show 1px border */
    right: 21px;
    /* Center inside outer arrow */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
    z-index: 1000002;
}

/* CRITICAL FIX: Disable focus fallback for Add New button to allow proper toggling */
/* This prevents the menu from staying open when clicked a second time */
/* ============================================
   MODERN BRANCH SWITCHER DESIGN
   ============================================ */

/* Branch Dropdown Container Styling */
.branch-dropdown {
    min-width: 280px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    margin-top: 10px !important;
}

/* Dropdown Item Styling - Force Horizontal Layout */
body.sidebar-layout .header-right .header-item-branch .branch-dropdown .dropdown-item,
body.sidebar-layout .dropdown-menu.branch-dropdown .dropdown-item,
.branch-dropdown .dropdown-item,
.branch-dropdown.show .dropdown-item,
body.sidebar-layout .branch-dropdown.show .dropdown-item {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    color: #475569 !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
}

.branch-dropdown .dropdown-item:last-child {
    margin-bottom: 0 !important;
}

.branch-dropdown .dropdown-item:hover {
    background: #f8fafc !important;
    transform: translateX(4px) !important;
    color: var(--colorPrimary) !important;
}

.branch-dropdown .dropdown-item.active {
    background: #f1f5f9 !important;
    color: var(--colorPrimary) !important;
    font-weight: 600 !important;
}

/* Branch List Icon (Small Gradient Boxes) */
.branch-list-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 16px !important;
}

/* Assign colorful gradients based on nth-child for variety */
.branch-dropdown li:nth-child(5n+1) .branch-list-icon {
    background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
}

/* Blue/Cyan */
.branch-dropdown li:nth-child(5n+2) .branch-list-icon {
    background: linear-gradient(135deg, #8b5cf6, #d946ef) !important;
}

/* Purple/Pink */
.branch-dropdown li:nth-child(5n+3) .branch-list-icon {
    background: linear-gradient(135deg, #ef4444, #f59e0b) !important;
}

/* Red/Orange */
.branch-dropdown li:nth-child(5n+4) .branch-list-icon {
    background: linear-gradient(135deg, #10b981, #3b82f6) !important;
}

/* Emerald/Blue */
.branch-dropdown li:nth-child(5n+5) .branch-list-icon {
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
}

/* Orange/Red */

/* Icon inside matches item type */
.branch-list-icon i {
    font-weight: normal !important;
}

/* Branch Switcher Button (Header) */
.btn-branch {
    background: #f1f5f9 !important;
    border: none !important;
    color: #334155 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.btn-branch:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.btn-branch .branch-name {
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* CRITICAL FIX: Disable focus fallback for Add New button to allow proper toggling */
/* This prevents the menu from staying open when clicked a second time */
.header-item-add-new .btn-add-new:focus+.add-new-dropdown:not(.show),
.header-item-add-new .dropdown-toggle:focus+.dropdown-menu:not(.show),
.header-item-branch .btn-branch:focus+.dropdown-menu:not(.show),
.header-item-branch .dropdown-toggle:focus+.dropdown-menu:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Reduced Language Flag Sizes & One-Line Layout */
.header-lang-flag {
    width: 14px !important;
    height: 14px !important;
}

.language-dropdown .language-flag,
.modal.language .language-flag {
    width: 18px !important;
    height: 18px !important;
}

.language-dropdown .language-picker,
.modal.language .language-picker {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.language-dropdown {
    width: 600px !important;
    min-width: 600px !important;
}

/* CRITICAL: Ensure parent button/td has position:relative for absolute positioning to work */
.header-item,
.header-item-language,
.header-item-branch,
.header-right .dropdown,
td:has(> button.dropdown-toggle),
td:has(> .btn-action),
[role="cell"]:has(> button.dropdown-toggle),
td.text-center:has(> button),
.table td:has(> .dropdown-toggle) {
    position: relative !important;
}

/* FORCE dropdown items to be visible and clickable when parent dropdown is shown */
.dropdown-menu.show .dropdown-item,
.dropdown-menu.show>a,
.dropdown-menu.show a,
[aria-expanded="true"]+.dropdown-menu .dropdown-item,
[aria-expanded="true"]+.dropdown-menu>a,
[aria-expanded="true"]+.dropdown-menu a,
body.sidebar-layout .dropdown-menu.show .dropdown-item,
body.sidebar-layout .dropdown-menu.show>a,
body.sidebar-layout .dropdown-menu.show a,
body.sidebar-layout main .dropdown-menu.show .dropdown-item,
body.sidebar-layout main .dropdown-menu.show>a,
body.sidebar-layout main .dropdown-menu.show a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    padding: 0.25rem 1rem !important;
    clear: both !important;
    font-weight: 400 !important;
    color: #212529 !important;
    text-align: left !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
}

/* MUST BE AFTER THE BLOCK DECLARATION FOR DROPDOWNS */
/* Override the generic display:block with flex for branch dropdown items */
body.sidebar-layout .header-right .header-item-branch .branch-dropdown .dropdown-item,
body.sidebar-layout .dropdown-menu.branch-dropdown .dropdown-item,
body.sidebar-layout .dropdown-menu.branch-dropdown.show .dropdown-item,
body.sidebar-layout .dropdown-menu.branch-dropdown.show a.dropdown-item,
body.sidebar-layout .branch-dropdown.show .dropdown-item,
.dropdown-menu.show.branch-dropdown .dropdown-item,
.dropdown-menu.show.branch-dropdown a.dropdown-item,
.dropdown-menu.show.branch-dropdown>li>a,
.branch-dropdown.show .dropdown-item,
.branch-dropdown.show a,
.branch-dropdown .dropdown-item,
html body .branch-dropdown.show .dropdown-item,
html body .dropdown-menu.branch-dropdown.show .dropdown-item,
html body .dropdown-menu.branch-dropdown.show a {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
    clear: none !important;
    width: 100% !important;
}

/* ============================================
   ADD NEW DROPDOWN - DREAMS POS STYLE (6 COLUMNS)
   ============================================ */
.add-new-dropdown {
    width: 720px !important;
    /* Exact spacious width for 6 columns */
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid #E9EDF4 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
    margin-top: 10px !important;
    overflow: visible !important;
}

.menu-header {
    border: none !important;
    border-bottom: none !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
}

.main-menu-title {
    border: none !important;
    border-bottom: none !important;
}

.add-new-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
}

.add-new-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 5px !important;
    /* Spacious padding */
    background: #ffffff !important;
    border-radius: 10px !important;
    border: 1px solid #E9EDF4 !important;
    transition: all 0.2s ease !important;
    color: #4B5563 !important;
    text-decoration: none !important;
    height: 100% !important;
    cursor: pointer !important;
}

.add-new-item:hover {
    border-color: #ff9f43 !important;
    /* Orange from DreamsPOS */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-3px) !important;
}

.add-new-icon {
    background: #F8F9FA !important;
    /* Light gray box background */
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    color: #4B5563 !important;
    transition: all 0.2s ease !important;
}

.add-new-item:hover .add-new-icon {
    background: rgba(255, 159, 67, 0.1) !important;
    /* Orange tint on hover */
    color: #ff9f43 !important;
}

.add-new-icon i {
    font-size: 20px !important;
}

.add-new-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    text-align: center !important;
}

.add-new-item:hover .add-new-label {
    color: #111827 !important;
}

/* Header Button Refinement */
.btn-add-new {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    background-color: #ff9f43 !important;
    border-color: #ff9f43 !important;
    color: #ffffff !important;
}

.btn-add-new:hover {
    background-color: #e68a35 !important;
    border-color: #e68a35 !important;
}

/* Hover effect for dropdown items */
body.sidebar-layout .dropdown-menu.show .dropdown-item:hover,
body.sidebar-layout .dropdown-menu.show a.dropdown-item:hover,
.dropdown-menu.show .dropdown-item:hover,
.dropdown-menu.show>a:hover {
    background-color: #e9ecef !important;
    color: #1e293b !important;
}

/* ============================================
   FALLBACK: Show dropdown on button focus/active if Bootstrap JS not working
   ============================================ */
/* REMOVED: Aggressive focus/active fallbacks that caused double-click issues */

/* ============================================
   CRITICAL: ACTION BUTTON DROPDOWNS (without dropdown-menu class)
   These are the action buttons in data tables
   ============================================ */

/* REMOVED: All aggressive action button CSS - let Angular and Bootstrap handle it naturally */

/* ============================================
   DEPRECATED: MINI SIDEBAR (Old styles removed)
   All mini-sidebar logic moved to desktop-mini-sidebar-hover.scss
   ============================================ */


/* Submenu dots now handled globally by styles.scss */

/* ============================================
   SIDEBAR TOGGLE (sidebar-closed class)
   Applied by toggleMobileMenu() on desktop
   ============================================ */

/* LTR: slide sidebar off to the LEFT */
body.sidebar-closed app-sidebar-menu,
body.sidebar-closed aside.app-menu,
body.sidebar-closed .app-menu {
    transform: translateX(-260px) !important;
    transition: transform 0.3s ease !important;
    box-shadow: none !important;
}

/* RTL: slide sidebar off to the RIGHT */
[dir="rtl"] body.sidebar-closed app-sidebar-menu,
[dir="rtl"] body.sidebar-closed aside.app-menu,
[dir="rtl"] body.sidebar-closed .app-menu {
    transform: translateX(260px) !important;
}

/* LTR: shift hero header and main content to start at 0 */
body.sidebar-closed header.app-navbar,
body.sidebar-closed .app-navbar {
    left: 0 !important;
    transition: left 0.3s ease !important;
}

/* RTL: shift header to go to 0 on right */
body.sidebar-closed[dir="rtl"] header.app-navbar,
body.sidebar-closed html[dir="rtl"] header.app-navbar,
[dir="rtl"] body.sidebar-closed header.app-navbar,
[dir="rtl"] body.sidebar-closed .app-navbar {
    right: 0 !important;
}

/* Shift main page content to fill width */
body.sidebar-closed .page-wrapper,
body.sidebar-closed main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

[dir="rtl"] body.sidebar-closed .page-wrapper,
[dir="rtl"] body.sidebar-closed main {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Smooth open transition for the sidebar itself */
aside.app-menu,
app-sidebar-menu {
    transition: transform 0.3s ease !important;
}

/* ============================================
   HIDE DUPLICATE BURGER ICON IN SIDEBAR ONLY
   Keep the header burger icon visible
   ============================================ */
/* Hide burger icon ONLY in sidebar (next to logo) */
aside.app-menu .header .menu-toggle,
aside.app-menu .header button.menu-toggle,
.app-menu>.header .menu-toggle {
    display: none !important;
}

/* Ensure header burger icon is visible */
.app-navbar .header-left .header-item button.menu-toggle,
header.app-navbar .header-left button.menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ======================================================================
   SIDEBAR DEFINITIVE FIX (v4 - Final Architecture)
   ====================================================================== */

@media (min-width: 992px) {

    /* 1. Angular component host */
    app-sidebar-menu {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 250px !important;
        /* Standardized width */
        height: 100vh !important;
        z-index: 1050 !important;
    }

    [dir="rtl"] app-sidebar-menu {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) !important;
    }
}

@media (min-width: 992px) {

    /* 2. Sidebar aside - full height flex column, clips children */
    body.sidebar-layout aside.app-menu,
    body.sidebar-layout .app-menu,
    aside.app-menu {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 250px !important;
        /* Standardized width */
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        /* FIXED: Prevent outer scrollbar */
        border-right: 1px solid #e2e8f0 !important;
        z-index: 1050 !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06) !important;
    }

    /* Clear ALL possible overflow assignments from site.css for the outer menu container */
    body.sidebar-layout .app-menu.app-menu,
    .sidebar-layout .app-menu.app-menu {
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }

    /* 3. RTL sidebar */
    [dir="rtl"] body.sidebar-layout aside.app-menu,
    [dir="rtl"] body.sidebar-layout .app-menu,
    [dir="rtl"] aside.app-menu {
        left: auto !important;
        right: 0 !important;
        border-right: none !important;
        border-left: 1px solid #e2e8f0 !important;
    }
}

/* 4. Branding header - 60px, does not shrink */
body.sidebar-layout aside.app-menu .header,
aside.app-menu .header {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    /* CRITICAL: Override global .header fixed position and RTL offsets */
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Centered logo for better alignment */
    padding: 0 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fff !important;
    width: 100% !important;
    overflow: hidden !important;
}

[dir="rtl"] aside.app-menu .header {
    justify-content: center !important;
}

aside.app-menu .header.container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

aside.app-menu .header .d-flex {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 5. Logo styling */
aside.app-menu .header .logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

aside.app-menu .header .logo .logo-full {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 30px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
}

aside.app-menu .header .logo .logo-mini {
    display: none !important;
}

/* 6. Menu wrapper - THE scroll container
   KEY RULES:
   - flex: 1 1 0% → takes all remaining height after header+footer (bounded!)
   - display: block → NOT flex, so inner ul can grow to natural height
   - overflow-y: auto → shows scrollbar when ul taller than this bounded box
   - contain: none → override site.css which traps overflow
   - max-height: none → override site.css 825px cap
   - scrollbar-width: auto → override any hidden scrollbar style
*/
.sidebar-layout .app-menu .menu-wrapper,
aside.app-menu .menu-wrapper {
    flex: 1 1 0% !important;
    flex-shrink: 1 !important;
    display: block !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    contain: none !important;
    background: #fff !important;
    position: relative !important;
    z-index: 1 !important;
    /* Force visible scrollbar */
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

.sidebar-layout .app-menu .menu-wrapper::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
}

.sidebar-layout .app-menu .menu-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

.sidebar-layout .app-menu .menu-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}

/* 7. ul.menu - natural block height (DO NOT constrain) */
.sidebar-layout .app-menu .menu-wrapper .menu.menu,
aside.app-menu .menu-wrapper .menu.menu,
.sidebar-layout .app-menu .menu.menu {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    /* FIXED: No internal scrollbar here */
    overflow-x: visible !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 100px 0 !important;
    /* Extra bottom pad to prevent footer cutoff */
}

/* 8. Sidebar footer - flex child, always last, never absolute */
.sidebar-layout .app-menu .sidebar-footer,
aside.app-menu .sidebar-footer {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    min-height: 60px !important;
}

/* 9. Header navbar offset for desktop - ensures header doesn't overlap sidebar */
@media (min-width: 992px) {

    /* LTR Header Offset: Force navbar to start AFTER sidebar (260px) */
    body.sidebar-layout:not(.sidebar-closed) header.app-navbar,
    body.sidebar-layout:not(.sidebar-closed) .app-navbar {
        left: 250px !important;
        /* Matches Sidebar Width */
        right: 0 !important;
        width: calc(100% - 250px) !important;
        transition: left 0.3s ease, width 0.3s ease !important;
    }

    /* RTL Header Offset: Force navbar to end BEFORE sidebar (250px from right) */
    [dir="rtl"] body.sidebar-layout:not(.sidebar-closed) header.app-navbar,
    [dir="rtl"] body.sidebar-layout:not(.sidebar-closed) .app-navbar,
    [dir="rtl"] header.app-navbar,
    [dir="rtl"] .app-navbar {
        right: 250px !important;
        left: 0 !important;
        width: calc(100% - 250px) !important;
        transition: right 0.3s ease, width 0.3s ease !important;
    }

    /* When sidebar is closed - reset positions */
    body.sidebar-closed header.app-navbar,
    body.sidebar-closed .app-navbar {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    body.sidebar-closed[dir="rtl"] header.app-navbar,
    body.sidebar-closed[dir="rtl"] .app-navbar {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }
}

/* Submenu styling handled by styles.scss tree-view implementation */

/* ======================================================================
   GLOBAL VERTICAL ALIGNMENT HARMONIZATION (X=52px Standard)
   ====================================================================== */

/* Level-0: Main Module Headers (Icon at 20px, Text at 52px) */
/* Reduced to standard height to match sub-modules exactly */
body.sidebar-layout .app-menu .menu>li,
body.sidebar-layout aside.app-menu .menu>li {
    margin: 0 !important;
    /* Remove individual module gaps for universal rhythm */
    background: transparent !important;
    background-color: transparent !important;
    border-left: none !important;
}

body.sidebar-layout .app-menu .menu>li>a,
body.sidebar-layout aside.app-menu .menu>li>a {
    padding-left: 12px !important;
    padding-top: 2.4px !important;
    padding-bottom: 2.4px !important;
    height: 22.8px !important;
    min-height: 22.8px !important;
    max-height: 22.8px !important;
    line-height: 18px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border-left: none !important;
}

/* Forced transparency for Level 0 hovers and active backgrounds */
body.sidebar-layout .app-menu .menu>li:hover>a,
body.sidebar-layout .app-menu .menu>li.active>a,
body.sidebar-layout .app-menu .menu>li.has-submenu.active>a {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Level-0 Symbols: Normalized to ensure 22.8px parent height */
body.sidebar-layout .app-menu .menu>li>a i,
body.sidebar-layout .app-menu .menu>li>a img,
body.sidebar-layout .app-menu .menu>li>a .side-menu__icon {
    width: 20px !important;
    min-width: 20px !important;
    height: 16px !important;
    max-height: 16px !important;
    line-height: 16px !important;
    font-size: 14px !important;
    text-align: center !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Submenu Container (UL): Level-1 indent is 52px, all nested are 0 (Flat) */
.sidebar-layout .app-menu .menu>li>.submenu,
.sidebar-layout aside.app-menu .menu>li>.submenu,
.sidebar-layout .app-menu .menu .submenu,
.sidebar-layout .app-menu .menu .crm-marketing-submenu,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu,
.sidebar-layout .app-menu .menu .purchase-submenu,
.sidebar-layout .app-menu .menu .pos-sales-submenu,
.sidebar-layout .app-menu .menu .inventory-submenu {
    padding-left: 35px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Any nested submenu must have ZERO additional indent to stay flush at X=52px */
.sidebar-layout .app-menu .menu .submenu .submenu,
.sidebar-layout .app-menu .menu .submenu .submenu .submenu {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    border-left: none !important;
}

/* Submenu Links (A): Reset all internal padding to start exactly at the parent's boundary (52px) */
.sidebar-layout .app-menu .menu .submenu a,
.sidebar-layout .app-menu .menu .submenu li a,
/* Submenu Links (A): Universal reset. All items (folders or features) start at X=52px. */
.sidebar-layout .app-menu .menu .submenu a,
.sidebar-layout .app-menu .menu .submenu li a,
.sidebar-layout .app-menu .menu .submenu .submenu a,
.sidebar-layout .app-menu .menu .submenu .submenu li a,
.sidebar-layout .app-menu .menu .submenu .submenu .submenu a,
.sidebar-layout .app-menu .menu .submenu .submenu .submenu li a,
html body .sidebar .sidebar-menu>ul>li.submenu ul li a,
html body .sidebars .sidebar-menu>ul>li.submenu ul li a {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    text-align: left !important;
}

/* FOLDER ALIGNMENT LOGIC (No Dots) */
/* Rule 1: Folders mixed with featured dots (Purchase, POS, Customers) need ~18px indent to skip the dot column */
.sidebar-layout .app-menu .menu .purchase-submenu li.has-submenu>a,
.sidebar-layout .app-menu .menu .pos-sales-submenu li.has-submenu>a,
.sidebar-layout .app-menu .menu .customers-suppliers-submenu li.has-submenu>a,
.sidebar-layout .app-menu .menu>li:first-child .submenu li.has-submenu>a {
    /* Covers HQ Panel/Branch */
    padding-left: 1.15rem !important;
    /* ~18.5px: Aligns folder text perfectly with feature text */
}

/* Rule 2: Category folders under dot-free headers (CRM, Inventory, Accounting) stay flush at 0 */
.sidebar-layout .app-menu .menu .crm-marketing-submenu li.has-submenu>a,
.sidebar-layout .app-menu .menu .inventory-submenu li.has-submenu>a,
.sidebar-layout .app-menu .menu .accounting-submenu li.has-submenu>a,
.sidebar-layout .app-menu .menu .stock-management-submenu li.has-submenu>a {
    padding-left: 0 !important;
}

/* Feature Dots (Bullets): Universal centering at X=52px (ONLY for features) */
.sidebar-layout .app-menu .menu .submenu-bullet {
    margin-left: 0 !important;
    margin-right: 12px !important;
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    flex-shrink: 0 !important;
    background-color: #6c757d !important;
    display: inline-block !important;
}

/* Hide dots (bullets) for folders/categories - only features get dots */
.sidebar-layout .app-menu .menu .submenu li.has-submenu>a .submenu-bullet,
.sidebar-layout .app-menu .menu .submenu li.has-submenu>a::before {
    display: none !important;
}

/* Universal Dot Enforcement for leaf features (non-folders) */
.sidebar-layout .app-menu .menu .submenu li:not(.has-submenu)>a:not(:has(.submenu-bullet))::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #6c757d !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

/* Hide arrow for direct links, keep for folders */
.sidebar-layout .app-menu .menu .submenu li:not(.has-submenu)>a .side-menu__angle {
    display: none !important;
}

/* Connection Arms: Standardize for 52px gap */
.sidebar-layout .app-menu .menu .submenu li::before {
    left: -24px !important;
    width: 23px !important;
}

/* Vertical Tree Line: Align centered under module icons (X=28px) */
.sidebar-layout .app-menu .menu .submenu::before {
    left: 28px !important;
}

/* Global Reset for any lingering 20px/40px indents */
/* VERTICAL COMPACTNESS SYNC: Match Inventory module row height (~22.8px) */
/* Targets all sub-features across all modules for uniform professional spacing */
.sidebar-layout .app-menu .menu .submenu a,
.sidebar-layout .app-menu .menu .submenu li a,
.sidebar-layout .app-menu .menu .submenu li.has-submenu>a {
    padding-top: 2.4px !important;
    padding-bottom: 2.4px !important;
    line-height: 18px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Global Reset for any lingering 20px/40px indents */
.sidebar-layout .app-menu .menu .submenu .side-menu__label,
.sidebar-layout .app-menu .menu .submenu a .side-menu__label {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* NO BOX BLUE: Forced Text-Only Highlights for ALL Active Menu Items */
/* High specificity target for both Level 0 and Sub-menus */
body.sidebar-layout .app-menu .menu li.active>a,
body.sidebar-layout .app-menu .menu li>a.active,
body.sidebar-layout .app-menu .menu li.has-submenu.active>a,
body.sidebar-layout .app-menu .menu li.has-submenu>a.active,
body.sidebar-layout .app-menu .menu .submenu li.active>a,
body.sidebar-layout .app-menu .menu .submenu li>a.active,
body.sidebar-layout .app-menu .menu li.active>a .side-menu__label,
body.sidebar-layout .app-menu .menu li>a.active .side-menu__label,
body.sidebar-layout .app-menu .menu li.active>a span,
body.sidebar-layout .app-menu .menu li>a.active span {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4885ed !important;
    /* Force Blue Text Highlight */
    border: none !important;
}

/* Ensure active icons and indicators also highlight in blue without boxes */
body.sidebar-layout .app-menu .menu li.active>a i,
body.sidebar-layout .app-menu .menu li>a.active i,
body.sidebar-layout .app-menu .menu li.has-submenu.active>a i,
body.sidebar-layout .app-menu .menu li.has-submenu>a.active i,
body.sidebar-layout .app-menu .menu .submenu li.active>a::before,
body.sidebar-layout .app-menu .menu .submenu li>a.active::before {
    color: #4885ed !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Scrollbar styling is handled in section 6 above */

/* REMOVE REDUNDANT MENU HEADERS (Categories like ZONES, BINS, DRIVERS, etc.) */
/* Hide non-interactive category titles as requested to declutter the sidebar */
.sidebar-layout .app-menu .menu .submenu li.menu-header,
.sidebar-layout aside.app-menu .menu .submenu li.menu-header {
    display: none !important;
}

/* ======================================================================
   SIDEBAR FONT SIZE HIERARCHY (12px / 14px / 13px) + COLOR RULES
   ====================================================================== */

/* Level 0: Main Modules (HQ Panel, POS Sales, Purchase, etc.) → 12px */
body.sidebar-layout .app-menu .menu>li>div.menu-header .side-menu__label,
body.sidebar-layout .app-menu .menu>li>a>.side-menu__label {
    font-size: 12px !important;
}

/* Level 1: Sub Modules (HQ Dashboard, POS, Add Purchase, etc.) → 14px, #2C3E50 */
body.sidebar-layout .app-menu .menu>li>.submenu>li>a .side-menu__label,
body.sidebar-layout .app-menu .menu>li>.submenu>li>a>.side-menu__label,
body.sidebar-layout .app-menu .menu>li>.submenu>li.has-submenu>a .side-menu__label {
    font-size: 14px !important;
    color: #2C3E50 !important;
}

/* Level 2+: Sub-sub Modules (deeper nested items) → 13px, grey */
body.sidebar-layout .app-menu .menu>li>.submenu>li>.submenu>li>a .side-menu__label,
body.sidebar-layout .app-menu .menu>li>.submenu>li>.submenu>li>a>.side-menu__label,
body.sidebar-layout .app-menu .menu .submenu .submenu .side-menu__label,
body.sidebar-layout .app-menu .menu .submenu .submenu a .side-menu__label {
    font-size: 13px !important;
    color: #7c8798 !important;
}

/* Override: Active/clicked sub-module & sub-sub feature → system blue */
body.sidebar-layout .app-menu .menu .submenu li>a.active .side-menu__label,
body.sidebar-layout .app-menu .menu .submenu li.active>a .side-menu__label,
body.sidebar-layout .app-menu .menu .submenu .submenu li>a.active .side-menu__label,
body.sidebar-layout .app-menu .menu .submenu .submenu li.active>a .side-menu__label {
    color: #4885ed !important;
}

/* Hover: Sub-module & sub-sub → also go blue on hover */
body.sidebar-layout .app-menu .menu .submenu li>a:hover .side-menu__label,
body.sidebar-layout .app-menu .menu .submenu .submenu li>a:hover .side-menu__label {
    color: #4885ed !important;
}

/* Active dot (bullet) also goes blue */
body.sidebar-layout .app-menu .menu .submenu li>a.active .submenu-bullet,
body.sidebar-layout .app-menu .menu .submenu li.active>a .submenu-bullet,
body.sidebar-layout .app-menu .menu .submenu li>a.active::before,
body.sidebar-layout .app-menu .menu .submenu li.active>a::before {
    background-color: #4885ed !important;
}

/* ======================================================================
   DASHBOARD ITEM: Match module header alignment (like HQ Panel)
   ====================================================================== */

/* Dashboard li — add top margin like other module headers */
body.sidebar-layout .app-menu .menu>li.dashboard-item,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item {
    margin-top: 8px !important;
}

/* Dashboard <a> link — FORCE identical layout to div.menu-header */
body.sidebar-layout .app-menu .menu>li.dashboard-item>a,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>a,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>div.menu-header {
    height: auto !important;
    min-height: 35px !important;
    max-height: none !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 10px !important;
    text-align: left !important;
}

/* Dashboard icon — ensure proper size and visibility */
body.sidebar-layout .app-menu .menu>li.dashboard-item>a lucide-icon,
body.sidebar-layout .app-menu .menu>li.dashboard-item>a i,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>a lucide-icon,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>a i,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>a img,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>div.menu-header img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
}

/* Dashboard label — LEFT aligned, NO flex-grow */
body.sidebar-layout .app-menu .menu>li.dashboard-item>a .side-menu__label,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>a .side-menu__label,
body.sidebar-layout .app-menu .menu>li.main-dashboard-item>div.menu-header .side-menu__label {
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    flex: 0 1 auto !important;
    text-align: left !important;
    width: auto !important;
}

/* ======================================================================
   SIDEBAR OVERFLOW PROTECTION (for multilingual / long text)
   ====================================================================== */

/* All sidebar labels — prevent overflow with ellipsis */
body.sidebar-layout .app-menu .menu .side-menu__label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 170px !important;
}

/* Module header labels — slightly wider */
body.sidebar-layout .app-menu .menu>li>div.menu-header .side-menu__label {
    max-width: 155px !important;
}

/* Submenu labels — proper width */
body.sidebar-layout .app-menu .menu .submenu a .side-menu__label {
    max-width: 160px !important;
}

/* Prevent sidebar container from overflowing */
body.sidebar-layout .app-menu .menu>li>a,
body.sidebar-layout .app-menu .menu>li>div.menu-header {
    overflow: hidden !important;
}

body.sidebar-layout .app-menu .menu .submenu a {
    overflow: hidden !important;
}

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/menu-icons.css?ngGlobalStyle ***!
  \*************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ============================================
   MAIN MODULE ICONS STYLING
   Modern, Professional Icon Design
   Using Lucide SVG Icons
   ============================================ */

/* ============================================
   ICONS8 IMAGE ICONS STYLING
   ============================================ */

/* Icons8 PNG/SVG image icons */
.menu-header img,
.menu li a img,
.menu li div img {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

/* Ensure menu items have proper flex layout - CRITICAL */
.menu li a,
.menu li .menu-header,
.menu li div.menu-header {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0 !important;
  justify-content: flex-start !important;
}

/* Force LTR direction for menu items to keep icon and text together */
.menu li a,
.menu li .menu-header,
.menu li div.menu-header {
  direction: ltr !important;
  text-align: left !important;
}

/* Ensure span stays next to icon */
.menu li a>span,
.menu li .menu-header>span,
.menu li div.menu-header>span {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}

/* ULTRA-SPECIFIC: Override any RTL styling for menu links */
.app-menu .menu>li>a,
.sidebar-layout .app-menu .menu>li>a,
body .app-menu .menu>li>a,
aside.app-menu .menu>li>a {
  display: inline-flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  text-align: left !important;
}

/* Force Lucide icons to display inline */
.menu li a lucide-icon,
.menu li .menu-header lucide-icon {
  display: inline-flex !important;
  margin-right: 12px !important;
  margin-left: 0 !important;
}

/* Inventory bullets now handled globally by styles.scss */


/* ============================================
   LUCIDE ICON BASE STYLING
   ============================================ */

.lucide-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  stroke-width: 2 !important;
}

.menu-header lucide-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.menu-header lucide-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
}

/* ============================================
   LUCIDE ICON COLORS
   ============================================ */

/* Dashboard (Indigo) */
lucide-icon.dashboard-icon {
  color: #6366f1 !important;
}

/* Sales & Revenue (Green) */
lucide-icon.pos-sales-icon,
lucide-icon.quotation-icon {
  color: #10b981 !important;
}

/* Operations & Inventory (Blue) */
lucide-icon.purchase-icon,
lucide-icon.inventory-icon,
lucide-icon.warehouse-icon,
lucide-icon.stock-icon {
  color: #3b82f6 !important;
}

/* Customer-Facing (Cyan) */
lucide-icon.customers-icon,
lucide-icon.crm-icon,
lucide-icon.customer-exp-icon,
lucide-icon.adv-crm-icon {
  color: #06b6d4 !important;
}

/* Finance & Payments (Emerald) */
lucide-icon.payments-icon,
lucide-icon.financial-icon,
lucide-icon.adv-financial-icon {
  color: #059669 !important;
}

/* Security & Protection (Red) */
lucide-icon.security-icon,
lucide-icon.warranty-icon,
lucide-icon.adv-security-icon {
  color: #ef4444 !important;
}

/* Analytics & Reports (Purple) */
lucide-icon.reports-icon,
lucide-icon.analytics-icon,
lucide-icon.ai-ml-icon,
lucide-icon.adv-reporting-icon {
  color: #8b5cf6 !important;
}

/* Supply Chain & Logistics (Teal) */
lucide-icon.supply-chain-icon {
  color: #14b8a6 !important;
}

/* Pricing & Tags (Amber) */
lucide-icon.pricing-icon {
  color: #f59e0b !important;
}

/* Quick Wins (Yellow) */
lucide-icon.quick-wins-icon {
  color: #eab308 !important;
}

/* Advanced Inventory (Lime) */
lucide-icon.adv-inventory-icon {
  color: #84cc16 !important;
}

/* Marketing (Pink) */
lucide-icon.marketing-icon {
  color: #ec4899 !important;
}

/* Operations (Orange) */
lucide-icon.operations-icon {
  color: #f97316 !important;
}

/* System Utilities (Indigo) */
lucide-icon.utilities-icon {
  color: #6366f1 !important;
}

/* HRM & Users (Rose) */
lucide-icon.hrm-icon {
  color: #f43f5e !important;
}

/* Branch Management & HQ (Sky Blue) */
lucide-icon.branch-icon,
lucide-icon.hq-icon {
  color: #0ea5e9 !important;
}

/* Advanced Modules (Violet) */
lucide-icon.advanced-icon {
  color: #a855f7 !important;
}

/* Advanced Operations (Amber) */
lucide-icon.adv-operations-icon {
  color: #d97706 !important;
}

/* ============================================
   FONT AWESOME ICON COLORS
   (Same color scheme as Lucide icons)
   ============================================ */

/* Sales & Revenue (Green) */
i.fa-shopping-cart,
i.fa-file-alt {
  color: #10b981 !important;
}

/* Operations & Inventory (Blue) */
i.fa-shopping-bag,
i.fa-boxes,
i.fa-warehouse {
  color: #3b82f6 !important;
}

/* Customer-Facing (Cyan) */
i.fa-users,
i.fa-bullseye,
i.fa-star,
i.fa-crosshairs {
  color: #06b6d4 !important;
}

/* Finance & Payments (Emerald) */
i.fa-credit-card,
i.fa-money-bill-wave,
i.fa-chart-line {
  color: #059669 !important;
}

/* Security & Protection (Red) */
i.fa-lock,
i.fa-shield-alt,
i.fa-key {
  color: #ef4444 !important;
}

/* Analytics & Reports (Purple) */
i.fa-chart-bar,
i.fa-brain {
  color: #8b5cf6 !important;
}

/* Supply Chain & Logistics (Teal) */
i.fa-link {
  color: #14b8a6 !important;
}

/* Pricing & Tags (Amber) */
i.fa-tag {
  color: #f59e0b !important;
}

/* Quick Wins (Yellow) */
i.fa-bolt {
  color: #eab308 !important;
}

/* Advanced Inventory (Lime) */
i.fa-search {
  color: #84cc16 !important;
}

/* Marketing (Pink) */
i.fa-bullhorn {
  color: #ec4899 !important;
}

/* System Utilities (Indigo) */
i.fa-cog {
  color: #6366f1 !important;
}

/* HRM & Users (Rose) */
i.fa-user-cog {
  color: #f43f5e !important;
}

/* Branch Management & HQ (Sky Blue) */
i.fa-store,
i.fa-building {
  color: #0ea5e9 !important;
}

/* Advanced Modules (Violet) */
i.fa-puzzle-piece {
  color: #a855f7 !important;
}

/* Advanced Operations (Amber) */
i.fa-wrench {
  color: #d97706 !important;
}

/* Compliance (Slate) */
i.fa-balance-scale {
  color: #64748b !important;
}


/* Main Module Header Base Styling */
/* Main Module Header Base Styling (Parents & Top-level Links) */
.menu>li>.menu-header,
.menu>li>div.menu-header,
.menu>li>a {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  padding: 12px 16px !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* Submenu link padding now handled globally by styles.scss */

/* Main Module Icon Base Styling */
.menu>li.has-submenu>.menu-header>i,
.menu>li.has-submenu>div.menu-header>i {
  font-size: 18px !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
  min-width: 20px !important;
  display: inline-block !important;
  visibility: visible !important;
  /* Force visible */
  opacity: 1 !important;
  /* Force visible */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* EXTRA: Force all FA icons in menu headers to be visible */
.menu>li.has-submenu>.menu-header>i.fa,
.menu>li.has-submenu>div.menu-header>i.fa,
.menu>li.has-submenu>.menu-header>i[class*="fa-"],
.menu>li.has-submenu>div.menu-header>i[class*="fa-"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* ============================================
   CATEGORY-BASED COLORS (Option C - Recommended)
   ============================================ */

.adv-inventory-icon,
[class*="inventory"] {
  color: #84cc16 !important;
}

.adv-financial-icon,
[class*="financial"] {
  color: #10b981 !important;
}

.adv-security-icon,
[class*="security"] {
  color: #dc2626 !important;
}

/* Broad Mappings for common module labels */
[class*="brands-icon"] {
  color: #f59e0b !important;
}

[class*="campaigns-icon"] {
  color: #ec4899 !important;
}

[class*="categories-icon"] {
  color: #8b5cf6 !important;
}

[class*="crm-marketing-icon"] {
  color: #06b6d4 !important;
}

[class*="advanced-crm-icon"] {
  color: #0ea5e9 !important;
}

[class*="advanced-inventory-icon"] {
  color: #3b82f6 !important;
}

[class*="analytics-bi-icon"] {
  color: #8b5cf6 !important;
}

[class*="advanced-pricing-icon"] {
  color: #f59e0b !important;
}

[class*="security-compliance-icon"] {
  color: #ef4444 !important;
}

[class*="ai-ml-icon"] {
  color: #8b5cf6 !important;
}

/* Explicit slug mappings for modules in screenshot */
.advanced-inventory-features-icon,
.lucide-icon.advanced-inventory-features-icon {
  color: #3b82f6 !important;
}

.advanced-pricing-icon,
.lucide-icon.advanced-pricing-icon {
  color: #f59e0b !important;
}

.analytics-bi-icon,
.lucide-icon.analytics-bi-icon {
  color: #8b5cf6 !important;
}

.crm-marketing-icon,
.lucide-icon.crm-marketing-icon {
  color: #06b6d4 !important;
}

.advanced-crm-icon,
.lucide-icon.advanced-crm-icon {
  color: #0ea5e9 !important;
}

.brands-icon,
.lucide-icon.brands-icon {
  color: #f59e0b !important;
}

.campaigns-icon,
.lucide-icon.campaigns-icon {
  color: #ec4899 !important;
}

.categories-icon,
.lucide-icon.categories-icon {
  color: #8b5cf6 !important;
}

.crm-icon,
.lucide-icon.crm-icon {
  color: #06b6d4 !important;
}

/* ============================================
   HOVER STATES
   ============================================ */

/* Hover - Main Header - No Transform */
.menu>li.has-submenu:hover>.menu-header,
.menu>li.has-submenu:hover>div.menu-header {
  background: rgba(var(--colorPrimaryRGB, 255, 152, 0), 0.05) !important;
  border-left-color: var(--colorPrimary, #ff9800) !important;
  padding-left: 18px !important;
}

/* Hover - Icon Animation - Disabled */
.menu>li.has-submenu:hover>.menu-header>i,
.menu>li.has-submenu:hover>div.menu-header>i,
.menu>li.has-submenu:hover>.menu-header lucide-icon,
.menu>li.has-submenu:hover>div.menu-header lucide-icon {
  transform: none !important;
  filter: none !important;
}

/* ============================================
   ACTIVE / EXPANDED STATES
   ============================================ */

/* Active/Expanded - Main Header */
.menu>li.has-submenu.active>.menu-header,
.menu>li.has-submenu.show>.menu-header,
.menu>li.has-submenu.active>div.menu-header,
.menu>li.has-submenu.show>div.menu-header {
  background: rgba(var(--colorPrimaryRGB, 255, 152, 0), 0.1) !important;
  border-left: 4px solid var(--colorPrimary, #ff9800) !important;
  padding-left: 17px !important;
  font-weight: 800 !important;
  color: var(--colorPrimary, #ff9800) !important;
}

/* Active/Expanded - Icon Color Only (No Glow) */
.menu>li.has-submenu.active>.menu-header>i,
.menu>li.has-submenu.show>.menu-header>i,
.menu>li.has-submenu.active>div.menu-header>i,
.menu>li.has-submenu.show>div.menu-header>i,
.menu>li.has-submenu.active>.menu-header lucide-icon,
.menu>li.has-submenu.show>.menu-header lucide-icon,
.menu>li.has-submenu.active>div.menu-header lucide-icon,
.menu>li.has-submenu.show>div.menu-header lucide-icon {
  filter: none !important;
  transform: none !important;
  color: var(--colorPrimary, #ff9800) !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {

  /* Larger icons on mobile for better touch targets */
  .menu>li.has-submenu>.menu-header>i,
  .menu>li.has-submenu>div.menu-header>i {
    font-size: 20px !important;
    margin-right: 14px !important;
  }

  /* Slightly larger text on mobile */
  .menu>li.has-submenu>.menu-header,
  .menu>li.has-submenu>div.menu-header {
    font-size: 14px !important;
    padding: 14px 18px !important;
  }

  /* More prominent hover effect on mobile */
  .menu>li.has-submenu:hover>.menu-header,
  .menu>li.has-submenu:hover>div.menu-header {
    background: rgba(var(--colorPrimaryRGB, 255, 152, 0), 0.08) !important;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Use GPU acceleration for smoother animations */
.menu>li.has-submenu>.menu-header,
.menu>li.has-submenu>div.menu-header,
.menu>li.has-submenu>.menu-header>i,
.menu>li.has-submenu>div.menu-header>i {
  will-change: transform, background, border-color !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Reduce motion for users with motion sensitivity */
@media (prefers-reduced-motion: reduce) {

  .menu>li.has-submenu>.menu-header,
  .menu>li.has-submenu>div.menu-header,
  .menu>li.has-submenu>.menu-header>i,
  .menu>li.has-submenu>div.menu-header>i {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {

  .menu>li.has-submenu>.menu-header,
  .menu>li.has-submenu>div.menu-header {
    color: #e2e8f0 !important;
  }

  /* Slightly brighter icons in dark mode */
  .menu>li.has-submenu>.menu-header>i,
  .menu>li.has-submenu>div.menu-header>i {
    filter: brightness(1.1) !important;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus state for keyboard navigation */
.menu>li.has-submenu>.menu-header:focus,
.menu>li.has-submenu>div.menu-header:focus,
.menu>li.has-submenu:focus-within>.menu-header,
.menu>li.has-submenu:focus-within>div.menu-header {
  outline: 2px solid var(--colorPrimary, #ff9800) !important;
  outline-offset: 2px !important;
  background: rgba(var(--colorPrimaryRGB, 255, 152, 0), 0.08) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {

  .menu>li.has-submenu>.menu-header>i,
  .menu>li.has-submenu>div.menu-header>i {
    filter: contrast(1.2) !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

  .menu>li.has-submenu>.menu-header>i,
  .menu>li.has-submenu>div.menu-header>i {
    color: #000 !important;
    filter: none !important;
  }
}

/* ============================================
   AGGRESSIVE ICON VISIBILITY FIX
   Force ALL icons to show (override any hiding)
   ============================================ */

/* Target ALL icon variations */
.app-menu .menu>li.has-submenu>.menu-header>i,
.app-menu .menu>li.has-submenu>div.menu-header>i,
body .app-menu .menu>li.has-submenu>.menu-header>i,
body .app-menu .menu>li.has-submenu>div.menu-header>i,
.sidebar-layout .app-menu .menu>li.has-submenu>.menu-header>i,
.sidebar-layout .app-menu .menu>li.has-submenu>div.menu-header>i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
}

/* Force Font Awesome icons specifically - Support BOTH fa and fa-solid */
i.fa.pos-sales-icon,
i.fa-solid.pos-sales-icon,
i.fa.omni-channel-icon,
i.fa-solid.omni-channel-icon,
i.fa.purchase-icon,
i.fa-solid.purchase-icon,
i.fa.loss-prevention-icon,
i.fa-solid.loss-prevention-icon,
i.fa.quotation-icon,
i.fa-solid.quotation-icon,
i.fa.customers-icon,
i.fa-solid.customers-icon,
i.fa.inventory-icon,
i.fa-solid.inventory-icon,
i.fa.stock-icon,
i.fa-solid.stock-icon,
i.fa.warehouse-icon,
i.fa-solid.warehouse-icon,
i.fa.warranty-icon,
i.fa-solid.warranty-icon,
i.fa.payments-icon,
i.fa-solid.payments-icon,
i.fa.crm-icon,
i.fa-solid.crm-icon,
i.fa.reports-icon,
i.fa-solid.reports-icon,
i.fa.analytics-icon,
i.fa-solid.analytics-icon,
i.fa.supply-chain-icon,
i.fa-solid.supply-chain-icon,
i.fa.pricing-icon,
i.fa-solid.pricing-icon,
i.fa.customer-exp-icon,
i.fa-solid.customer-exp-icon,
i.fa.financial-icon,
i.fa-solid.financial-icon,
i.fa.operations-icon,
i.fa-solid.operations-icon,
i.fa.security-icon,
i.fa-solid.security-icon,
i.fa.marketing-icon,
i.fa-solid.marketing-icon,
i.fa.branch-icon,
i.fa-solid.branch-icon,
i.fa.hrm-icon,
i.fa-solid.hrm-icon,
i.fa.utilities-icon,
i.fa-solid.utilities-icon,
i.fa.advanced-icon,
i.fa-solid.advanced-icon,
i.fa.quick-wins-icon,
i.fa-solid.quick-wins-icon,
i.fa.adv-inventory-icon,
i.fa-solid.adv-inventory-icon,
i.fa.adv-crm-icon,
i.fa-solid.adv-crm-icon,
i.fa.adv-financial-icon,
i.fa-solid.adv-financial-icon,
i.fa.adv-operations-icon,
i.fa-solid.adv-operations-icon,
i.fa.adv-security-icon,
i.fa-solid.adv-security-icon,
i.fa.adv-reporting-icon,
i.fa-solid.adv-reporting-icon,
i.fa.ai-icon,
i.fa-solid.ai-icon,
i.fa.ai-ml-icon,
i.fa-solid.ai-ml-icon {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 18px !important;
}

/* CRITICAL: Force ALL .fa and .fa-solid icons in menu headers to show */
.menu-header>i[class*="fa-"],
.menu-header>i.fa,
.menu-header>i.fa-solid,
.menu-header>i.fa-regular,
.menu-header>i.fa-brands {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 18px !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/emergency-icon-fix.css?ngGlobalStyle ***!
  \*********************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ============================================
   EMERGENCY ICON FIX - MAXIMUM PRIORITY
   Force icons to show with !important everywhere
   ============================================ */

/* ULTRA HIGH SPECIFICITY - Force all menu header icons to show */
html body .sidebar-layout .app-menu .menu > li.has-submenu > div.menu-header > i,
html body .app-menu .menu > li.has-submenu > div.menu-header > i,
body .sidebar-layout .app-menu .menu > li.has-submenu > div.menu-header > i,
body .app-menu .menu > li.has-submenu > div.menu-header > i,
.sidebar-layout .app-menu .menu > li.has-submenu > div.menu-header > i,
.app-menu .menu > li.has-submenu > div.menu-header > i,
.menu > li.has-submenu > div.menu-header > i,
div.menu-header > i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  margin-right: 12px !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  vertical-align: middle !important;
}

/* Force text to lowercase */
html body .sidebar-layout .app-menu .menu > li.has-submenu > div.menu-header,
html body .app-menu .menu > li.has-submenu > div.menu-header,
body .sidebar-layout .app-menu .menu > li.has-submenu > div.menu-header,
body .app-menu .menu > li.has-submenu > div.menu-header,
.sidebar-layout .app-menu .menu > li.has-submenu > div.menu-header,
.app-menu .menu > li.has-submenu > div.menu-header,
.menu > li.has-submenu > div.menu-header,
div.menu-header {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 12px 16px !important;
  color: #1e293b !important;
}

/* Color classes - MAXIMUM PRIORITY */
.pos-sales-icon { color: #10b981 !important; }
.omni-channel-icon { color: #3b82f6 !important; }
.purchase-icon { color: #3b82f6 !important; }
.loss-prevention-icon { color: #ef4444 !important; }
.quotation-icon { color: #10b981 !important; }
.customers-icon { color: #06b6d4 !important; }
.inventory-icon { color: #3b82f6 !important; }
.stock-icon { color: #3b82f6 !important; }
.warehouse-icon { color: #3b82f6 !important; }
.warranty-icon { color: #ef4444 !important; }
.payments-icon { color: #059669 !important; }
.crm-icon { color: #06b6d4 !important; }
.reports-icon { color: #8b5cf6 !important; }
.analytics-icon { color: #8b5cf6 !important; }
.supply-chain-icon { color: #14b8a6 !important; }
.pricing-icon { color: #f59e0b !important; }
.customer-exp-icon { color: #06b6d4 !important; }
.financial-icon { color: #059669 !important; }
.operations-icon { color: #64748b !important; }
.security-icon { color: #ef4444 !important; }
.marketing-icon { color: #ec4899 !important; }
.branch-icon { color: #64748b !important; }
.hrm-icon { color: #64748b !important; }
.utilities-icon { color: #64748b !important; }
.advanced-icon { color: #64748b !important; }
.quick-wins-icon { color: #eab308 !important; }
.adv-inventory-icon { color: #84cc16 !important; }
.adv-crm-icon { color: #06b6d4 !important; }
.adv-financial-icon { color: #10b981 !important; }
.adv-operations-icon { color: #64748b !important; }
.adv-security-icon { color: #dc2626 !important; }
.adv-reporting-icon { color: #8b5cf6 !important; }
.ai-icon { color: #8b5cf6 !important; }





/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/ULTIMATE-ICON-FIX.css?ngGlobalStyle ***!
  \********************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ====================================================================
   🔥 ULTIMATE NUCLEAR ICON FIX 🔥
   THIS WILL FORCE ICONS TO SHOW NO MATTER WHAT
   ==================================================================== */

/* Force EVERY possible selector combination */
* .menu-header > i,
* div.menu-header > i,
* .menu > li > div.menu-header > i,
html * .menu-header > i,
body * .menu-header > i,
#app * .menu-header > i,
[class*="menu-header"] > i,
div[class*="menu-header"] > i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin-right: 12px !important;
  margin-left: 0 !important;
  padding: 0 !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  clip: none !important;
  clip-path: none !important;
  overflow: visible !important;
}

/* Force text to normal case */
* .menu-header,
* div.menu-header,
html * .menu-header,
body * .menu-header,
[class*="menu-header"] {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  color: #1e293b !important;
}

/* Force ALL icon color classes to work */
i.pos-sales-icon, .pos-sales-icon { color: #10b981 !important; }
i.omni-channel-icon, .omni-channel-icon { color: #3b82f6 !important; }
i.purchase-icon, .purchase-icon { color: #3b82f6 !important; }
i.loss-prevention-icon, .loss-prevention-icon { color: #ef4444 !important; }
i.quotation-icon, .quotation-icon { color: #10b981 !important; }
i.customers-icon, .customers-icon { color: #06b6d4 !important; }
i.inventory-icon, .inventory-icon { color: #3b82f6 !important; }
i.stock-icon, .stock-icon { color: #3b82f6 !important; }
i.warehouse-icon, .warehouse-icon { color: #3b82f6 !important; }
i.warranty-icon, .warranty-icon { color: #ef4444 !important; }
i.payments-icon, .payments-icon { color: #059669 !important; }
i.crm-icon, .crm-icon { color: #06b6d4 !important; }
i.reports-icon, .reports-icon { color: #8b5cf6 !important; }
i.analytics-icon, .analytics-icon { color: #8b5cf6 !important; }
i.supply-chain-icon, .supply-chain-icon { color: #14b8a6 !important; }
i.pricing-icon, .pricing-icon { color: #f59e0b !important; }
i.customer-exp-icon, .customer-exp-icon { color: #06b6d4 !important; }
i.financial-icon, .financial-icon { color: #059669 !important; }
i.operations-icon, .operations-icon { color: #64748b !important; }
i.security-icon, .security-icon { color: #ef4444 !important; }
i.marketing-icon, .marketing-icon { color: #ec4899 !important; }
i.branch-icon, .branch-icon { color: #64748b !important; }
i.hrm-icon, .hrm-icon { color: #64748b !important; }
i.utilities-icon, .utilities-icon { color: #64748b !important; }
i.advanced-icon, .advanced-icon { color: #64748b !important; }
i.quick-wins-icon, .quick-wins-icon { color: #eab308 !important; }

/* Force Font Awesome to load and render */
i[class^="fa-"],
i[class*=" fa-"],
i.fa,
i.fas,
i.fa-solid,
i.far,
i.fa-regular,
i.fab,
i.fa-brands {
  display: inline-block !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: 900 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure Font Awesome font loads */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: local('Font Awesome 6 Free'), 
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2') format('woff2');
}





/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/modal-fix.css?ngGlobalStyle ***!
  \************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ============================================
   MODAL FIX - Force modals to be visible
   Version: 2025-12-14-FINAL-FIX
   ============================================ */

/* CRITICAL: Override ANY CSS that might hide modals */
.segment-modal,
div[class*="modal"][class*="segment"] {
    /* CRITICAL: Force visibility */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* CRITICAL: Positioning */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    
    /* CRITICAL: Z-index */
    z-index: 999999999 !important;
    
    /* CRITICAL: Remove any clipping */
    clip: auto !important;
    clip-path: none !important;
    
    /* CRITICAL: Pointer events */
    pointer-events: auto !important;
    
    /* CRITICAL: Transform */
    transform: none !important;
    
    /* Background */
    background: rgba(0, 0, 0, 0.7) !important;
    
    /* Flexbox */
    align-items: center !important;
    justify-content: center !important;
    
    /* CRITICAL: Remove containment */
    contain: none !important;
}

/* Modal content */
.segment-modal .segment-modal-content,
.segment-modal > div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1000000000 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    width: 90% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
}

/* CRITICAL: Remove ANY containment that might clip modals */
body,
html,
app-root,
router-outlet,
main,
.sidebar-layout,
.sidebar-layout main,
app-segments,
.crm-page {
    /* Remove containment when modal is open */
    contain: none !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
}

/* Allow modals to escape clipping */
body:has(.segment-modal) {
    overflow: visible !important;
}

body:has(.segment-modal) main {
    overflow: visible !important;
}



/*!***********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/modern-notifications.css?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ========================================
   MODERN NOTIFICATION SYSTEM
   Beautiful, Animated, Responsive Toasts
   ======================================== */

/* Toast Container */
#toasters {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 420px;
  width: 100%;
}

/* Modern Toast Base */
.modern-toast {
  pointer-events: auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 
              0 4px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Toast Content Wrapper */
.modern-toast-content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 14px;
  position: relative;
}

/* Icon Wrapper with Animation */
.modern-toast-icon-wrapper {
  flex-shrink: 0;
  animation: iconBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modern-toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
}

/* Ripple Effect on Icon */
.modern-toast-icon::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  animation: ripple 1.5s ease-out infinite;
}

/* Text Container */
.modern-toast-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modern-toast-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.modern-toast-description {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* Close Button */
.modern-toast-close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  flex-shrink: 0;
}

.modern-toast-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1e293b;
  transform: scale(1.1);
}

.modern-toast-close i {
  font-size: 18px;
}

/* ===== SUCCESS VARIANT ===== */
.modern-toast-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-left: 4px solid #10b981;
}

.modern-toast-icon-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modern-toast-icon-success::before {
  background: #10b981;
}

.modern-toast-success .modern-toast-title {
  color: #065f46;
}

.modern-toast-success .modern-toast-description {
  color: #047857;
}

/* ===== ERROR VARIANT ===== */
.modern-toast-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-left: 4px solid #ef4444;
}

.modern-toast-icon-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.modern-toast-icon-error::before {
  background: #ef4444;
}

.modern-toast-error .modern-toast-title {
  color: #991b1b;
}

.modern-toast-error .modern-toast-description {
  color: #b91c1c;
}

/* ===== WARNING VARIANT ===== */
.modern-toast-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-left: 4px solid #f59e0b;
}

.modern-toast-icon-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.modern-toast-icon-warning::before {
  background: #f59e0b;
}

.modern-toast-warning .modern-toast-title {
  color: #78350f;
}

.modern-toast-warning .modern-toast-description {
  color: #92400e;
}

/* ===== INFO VARIANT ===== */
.modern-toast-info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-left: 4px solid #3b82f6;
}

.modern-toast-icon-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.modern-toast-icon-info::before {
  background: #3b82f6;
}

.modern-toast-info .modern-toast-title {
  color: #1e3a8a;
}

.modern-toast-info .modern-toast-description {
  color: #1e40af;
}

/* ===== ANIMATIONS ===== */

/* Enter Animation */
@keyframes slideInRight {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.modern-toast-enter {
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-toast-visible {
  animation: none;
}

/* Exit Animation */
@keyframes slideOutRight {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(120%) scale(0.8);
    opacity: 0;
  }
}

.modern-toast-exit {
  animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 1, 1);
}

/* Icon Bounce Animation */
@keyframes iconBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Ripple Effect Animation */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Pulse Animation for Icon */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.modern-toast:hover .modern-toast-icon {
  animation: pulse 1s ease-in-out infinite;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 640px) {
  #toasters {
    top: 60px;
    right: 12px;
    left: 12px;
    max-width: none;
  }

  .modern-toast {
    border-radius: 12px;
  }

  .modern-toast-content {
    padding: 14px;
    gap: 12px;
  }

  .modern-toast-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .modern-toast-title {
    font-size: 14px;
  }

  .modern-toast-description {
    font-size: 12px;
  }
}

/* ===== HOVER EFFECTS ===== */

.modern-toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 
              0 6px 12px rgba(0, 0, 0, 0.1);
}

/* ===== PROGRESS BAR (Optional Enhancement) ===== */

.modern-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.4;
  animation: progress 5s linear forwards;
}

@keyframes progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  .modern-toast {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .modern-toast-title {
    color: #f1f5f9;
  }

  .modern-toast-description {
    color: #cbd5e1;
  }

  .modern-toast-close {
    color: #cbd5e1;
  }

  .modern-toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
  }
}

/* ===== ACCESSIBILITY ===== */

.modern-toast:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .modern-toast,
  .modern-toast-icon-wrapper,
  .modern-toast-close {
    animation: none !important;
    transition: none !important;
  }
}



/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/assets/css/mini-sidebar-override.css?ngGlobalStyle ***!
  \************************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* =====================================================
   MINI SIDEBAR NUCLEAR OVERRIDE - HIGHEST PRIORITY
   This file has maximum specificity to override ALL
   global CSS rules hiding mini sidebar submenus
   ===================================================== */

/* NUCLEAR SPECIFICITY - Override site-menu-fix.css global hiding */
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > .submenu,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > ul.submenu,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > .submenu.show,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > ul.submenu.show,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > .submenu,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > ul.submenu,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > .submenu.show,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > ul.submenu.show {
    /* FORCE VISIBILITY WITH MAXIMUM PRIORITY */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    
    /* Override global hiding positions */
    left: 100% !important;
    top: 0 !important;
    height: auto !important;
    width: 250px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
    
    /* Visual styling */
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 15px 0 50px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 16px 16px 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 15px 0 !important;
    
    /* Reset any clipping or containment */
    clip-path: none !important;
    transform: none !important;
    contain: none !important;
    margin: 0 !important;
    
    /* Animation */
    animation: miniSidebarReveal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    
    /* Reset any clipping */
    clip-path: none !important;
    transform: none !important;
    contain: none !important;
}

/* Ensure submenu items are visible inside the floating panel */
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > .submenu li,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > ul.submenu li,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > .submenu.show li,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > ul.submenu.show li,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > .submenu li,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > ul.submenu li,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > .submenu.show li,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > ul.submenu.show li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
    margin: 2px 10px !important;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Ensure submenu links are visible and styled properly */
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > .submenu li a,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > ul.submenu li a,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > .submenu.show li a,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > ul.submenu.show li a,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > .submenu li a,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > ul.submenu li a,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > .submenu.show li a,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > ul.submenu.show li a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px 14px !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    width: 100% !important;
    border-radius: 8px !important;
    align-items: center !important;
    height: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Show spans and text inside submenu links */
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > .submenu li a span,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li:hover > ul.submenu li a span,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > .submenu.show li a span,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) aside.app-menu ul.menu > li.active > ul.submenu.show li a span,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > .submenu li a span,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li:hover > ul.submenu li a span,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > .submenu.show li a span,
html body.sidebar-layout.mini-sidebar:not(.expand-menu) .app-menu ul.menu > li.active > ul.submenu.show li a span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
}

/* Animation keyframes */
@keyframes miniSidebarReveal {
    from {
        opacity: 0;
        transform: translateX(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles/dashboard-design-system.scss?ngGlobalStyle (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ========================================
   🎨 DASHBOARD DESIGN SYSTEM
   Shared foundation for all 8 role-based dashboards
   ======================================== */
/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */
/* Font Imports */
/* Font Imports */
/* CSS Variables - Typography */
:root {
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-numbers: 'JetBrains Mono', monospace;
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  /* Font Sizes */
  --font-size-micro: 10px;
  --font-size-small: 12px;
  --font-size-base: 14px;
  --font-size-medium: 16px;
  --font-size-large: 20px;
  --font-size-xlarge: 24px;
  --font-size-kpi: 28px;
  --font-size-hero: 36px;
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* Typography Classes */
.dashboard-heading {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.dashboard-title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

.dashboard-text {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.dashboard-label {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.dashboard-micro {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dashboard-number {
  font-family: var(--font-numbers);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ========================================
   COLOR SYSTEM
   ======================================== */
/* Role-Specific Accent Colors */
:root {
  --accent-superadmin: #8b5cf6;
  --accent-hq: #0ea5e9;
  --accent-branch-admin: #3b82f6;
  --accent-manager: #10b981;
  --accent-accountant: #f59e0b;
  --accent-cashier: #06b6d4;
  --accent-staff: #6366f1;
  --accent-employee: #8b5cf6;
  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #047857;
  --color-danger: #ef4444;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #b91c1c;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  --color-info: #6366f1;
  --color-info-light: #e0e7ff;
  --color-info-dark: #4338ca;
  /* Surface Colors - Light */
  --surface-light-primary: #ffffff;
  --surface-light-secondary: #f8fafc;
  --surface-light-tertiary: #f1f5f9;
  /* Surface Colors - Dark */
  --surface-dark-primary: #0f172a;
  --surface-dark-secondary: #1e293b;
  --surface-dark-tertiary: #334155;
  /* Text Colors */
  --text-dark: #0f172a;
  --text-medium: #475569;
  --text-light: #94a3b8;
  --text-white: #ffffff;
  /* Border Colors */
  --border-light: #e5e7eb;
  --border-medium: #cbd5e1;
  --border-dark: #94a3b8;
}

/* ========================================
   LAYOUT SYSTEM
   ======================================== */
:root {
  /* Container */
  --max-width: 1440px;
  --gutter: 24px;
  /* Grid */
  --grid-columns: 12;
  /* Card */
  --card-radius: 16px;
  --card-padding: 24px;
  --card-padding-compact: 20px;
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Container */
.dashboard-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Grid System */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--gutter);
}

/* Card System */
.dashboard-card {
  background: var(--surface-light-primary);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border-light);
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.dashboard-card-compact {
  padding: var(--card-padding-compact);
}

/* Glass Card (for HQ Dashboard) */
.dashboard-card-glass {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ========================================
   ANIMATIONS & MICRO-INTERACTIONS
   ======================================== */
/* Fade Up Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-up-delay-1 {
  animation-delay: 0.1s;
}

.animate-fade-up-delay-2 {
  animation-delay: 0.2s;
}

.animate-fade-up-delay-3 {
  animation-delay: 0.3s;
}

.animate-fade-up-delay-4 {
  animation-delay: 0.4s;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.animate-pulse {
  animation: pulse 2s infinite;
}

/* Shimmer Animation (Loading) */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 0px, #f8f8f8 40px, #f0f0f0 80px);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 8px;
}

/* Slide In Animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animate-slide-in {
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale Animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   STATUS INDICATORS
   ======================================== */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.status-active {
  background: var(--color-success);
  animation: pulse 2s infinite;
}

.status-dot.status-inactive {
  background: var(--text-light);
}

.status-dot.status-warning {
  background: var(--color-warning);
}

.status-dot.status-danger {
  background: var(--color-danger);
}

/* ========================================
   PROGRESS BARS
   ======================================== */
.progress-bar-container {
  width: 100%;
  height: 8px;
  background: var(--surface-light-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--accent-branch-admin);
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
}

.progress-bar.loaded {
  width: var(--progress-value);
}

/* Progress Bar Variants */
.progress-bar.success {
  background: var(--color-success);
}

.progress-bar.warning {
  background: var(--color-warning);
}

.progress-bar.danger {
  background: var(--color-danger);
}

/* ========================================
   BADGES & LABELS
   ======================================== */
.dashboard-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.dashboard-badge.success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.dashboard-badge.warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.dashboard-badge.danger {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.dashboard-badge.info {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
/* Mobile: < 640px */
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --card-padding: 16px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-title {
    font-size: var(--font-size-large);
  }
  .dashboard-number {
    font-size: var(--font-size-kpi);
  }
}
/* Tablet: 640px - 1024px */
@media (min-width: 640px) and (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Desktop: > 1024px */
@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(var(--grid-columns), 1fr);
  }
}
/* ========================================
   UTILITY CLASSES
   ======================================== */
/* Spacing */
.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

/* Grid Utilities */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Text Colors */
.text-dark {
  color: var(--text-dark);
}

.text-medium {
  color: var(--text-medium);
}

.text-light {
  color: var(--text-light);
}

.text-white {
  color: var(--text-white);
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}

.text-warning {
  color: var(--color-warning);
}

/* Background Colors */
.bg-success {
  background-color: var(--color-success);
}

.bg-danger {
  background-color: var(--color-danger);
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-light {
  background-color: var(--surface-light-secondary);
}

/* Border Radius */
.rounded-sm {
  border-radius: 4px;
}

.rounded-md {
  border-radius: 8px;
}

.rounded-lg {
  border-radius: 12px;
}

.rounded-xl {
  border-radius: 16px;
}

.rounded-full {
  border-radius: 9999px;
}

/* Shadows */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}
/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@ng-select/ng-select/themes/default.theme.css ***!
  \****************************************************************************************************************************************************************************************************************************************************/
.ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:hsl(0,0%,70%) #ccc hsl(0,0%,85%)}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:rgba(0,0,0,0) rgba(0,0,0,0) #333}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid hsl(0,0%,90%)}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:rgb(234.6,244.68,255);border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:rgb(209.1,231.78,255)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid rgb(183.6,218.88,255)}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid rgb(183.6,218.88,255);border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid rgb(183.6,218.88,255)}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid rgb(183.6,218.88,255)}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus .ng-clear{color:#d0021b}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.06);left:0}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:hsl(0,0%,90%);margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel.ng-select-right{left:100%;top:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:hsl(0,0%,90%);margin-bottom:-1px}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:hsl(0,0%,90%);margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-left{left:-100%;top:0;border-top-left-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:hsl(0,0%,90%);margin-bottom:-1px}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:rgba(0,0,0,.54);cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:rgb(244.8,249.84,255)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:rgba(0,0,0,.54);background-color:rgb(234.6,244.68,255);font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:rgb(234.6,244.68,255)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:rgb(244.8,249.84,255);color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}

/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css ***!
  \********************************************************************************************************************************************************************************************************************************************************/
html{--mat-sys-on-surface: initial}.mat-app-background{background-color:var(--mat-app-background-color, var(--mat-sys-background, transparent));color:var(--mat-app-text-color, var(--mat-sys-on-background, inherit))}.mat-elevation-z0,.mat-mdc-elevation-specific.mat-elevation-z0{box-shadow:var(--mat-app-elevation-shadow-level-0, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow)}.mat-elevation-z1,.mat-mdc-elevation-specific.mat-elevation-z1{box-shadow:var(--mat-app-elevation-shadow-level-1, 0px 2px 1px -1px --mat-sys-shadow, 0px 1px 1px 0px --mat-sys-shadow, 0px 1px 3px 0px --mat-sys-shadow)}.mat-elevation-z2,.mat-mdc-elevation-specific.mat-elevation-z2{box-shadow:var(--mat-app-elevation-shadow-level-2, 0px 3px 1px -2px --mat-sys-shadow, 0px 2px 2px 0px --mat-sys-shadow, 0px 1px 5px 0px --mat-sys-shadow)}.mat-elevation-z3,.mat-mdc-elevation-specific.mat-elevation-z3{box-shadow:var(--mat-app-elevation-shadow-level-3, 0px 3px 3px -2px --mat-sys-shadow, 0px 3px 4px 0px --mat-sys-shadow, 0px 1px 8px 0px --mat-sys-shadow)}.mat-elevation-z4,.mat-mdc-elevation-specific.mat-elevation-z4{box-shadow:var(--mat-app-elevation-shadow-level-4, 0px 2px 4px -1px --mat-sys-shadow, 0px 4px 5px 0px --mat-sys-shadow, 0px 1px 10px 0px --mat-sys-shadow)}.mat-elevation-z5,.mat-mdc-elevation-specific.mat-elevation-z5{box-shadow:var(--mat-app-elevation-shadow-level-5, 0px 3px 5px -1px --mat-sys-shadow, 0px 5px 8px 0px --mat-sys-shadow, 0px 1px 14px 0px --mat-sys-shadow)}.mat-elevation-z6,.mat-mdc-elevation-specific.mat-elevation-z6{box-shadow:var(--mat-app-elevation-shadow-level-6, 0px 3px 5px -1px --mat-sys-shadow, 0px 6px 10px 0px --mat-sys-shadow, 0px 1px 18px 0px --mat-sys-shadow)}.mat-elevation-z7,.mat-mdc-elevation-specific.mat-elevation-z7{box-shadow:var(--mat-app-elevation-shadow-level-7, 0px 4px 5px -2px --mat-sys-shadow, 0px 7px 10px 1px --mat-sys-shadow, 0px 2px 16px 1px --mat-sys-shadow)}.mat-elevation-z8,.mat-mdc-elevation-specific.mat-elevation-z8{box-shadow:var(--mat-app-elevation-shadow-level-8, 0px 5px 5px -3px --mat-sys-shadow, 0px 8px 10px 1px --mat-sys-shadow, 0px 3px 14px 2px --mat-sys-shadow)}.mat-elevation-z9,.mat-mdc-elevation-specific.mat-elevation-z9{box-shadow:var(--mat-app-elevation-shadow-level-9, 0px 5px 6px -3px --mat-sys-shadow, 0px 9px 12px 1px --mat-sys-shadow, 0px 3px 16px 2px --mat-sys-shadow)}.mat-elevation-z10,.mat-mdc-elevation-specific.mat-elevation-z10{box-shadow:var(--mat-app-elevation-shadow-level-10, 0px 6px 6px -3px --mat-sys-shadow, 0px 10px 14px 1px --mat-sys-shadow, 0px 4px 18px 3px --mat-sys-shadow)}.mat-elevation-z11,.mat-mdc-elevation-specific.mat-elevation-z11{box-shadow:var(--mat-app-elevation-shadow-level-11, 0px 6px 7px -4px --mat-sys-shadow, 0px 11px 15px 1px --mat-sys-shadow, 0px 4px 20px 3px --mat-sys-shadow)}.mat-elevation-z12,.mat-mdc-elevation-specific.mat-elevation-z12{box-shadow:var(--mat-app-elevation-shadow-level-12, 0px 7px 8px -4px --mat-sys-shadow, 0px 12px 17px 2px --mat-sys-shadow, 0px 5px 22px 4px --mat-sys-shadow)}.mat-elevation-z13,.mat-mdc-elevation-specific.mat-elevation-z13{box-shadow:var(--mat-app-elevation-shadow-level-13, 0px 7px 8px -4px --mat-sys-shadow, 0px 13px 19px 2px --mat-sys-shadow, 0px 5px 24px 4px --mat-sys-shadow)}.mat-elevation-z14,.mat-mdc-elevation-specific.mat-elevation-z14{box-shadow:var(--mat-app-elevation-shadow-level-14, 0px 7px 9px -4px --mat-sys-shadow, 0px 14px 21px 2px --mat-sys-shadow, 0px 5px 26px 4px --mat-sys-shadow)}.mat-elevation-z15,.mat-mdc-elevation-specific.mat-elevation-z15{box-shadow:var(--mat-app-elevation-shadow-level-15, 0px 8px 9px -5px --mat-sys-shadow, 0px 15px 22px 2px --mat-sys-shadow, 0px 6px 28px 5px --mat-sys-shadow)}.mat-elevation-z16,.mat-mdc-elevation-specific.mat-elevation-z16{box-shadow:var(--mat-app-elevation-shadow-level-16, 0px 8px 10px -5px --mat-sys-shadow, 0px 16px 24px 2px --mat-sys-shadow, 0px 6px 30px 5px --mat-sys-shadow)}.mat-elevation-z17,.mat-mdc-elevation-specific.mat-elevation-z17{box-shadow:var(--mat-app-elevation-shadow-level-17, 0px 8px 11px -5px --mat-sys-shadow, 0px 17px 26px 2px --mat-sys-shadow, 0px 6px 32px 5px --mat-sys-shadow)}.mat-elevation-z18,.mat-mdc-elevation-specific.mat-elevation-z18{box-shadow:var(--mat-app-elevation-shadow-level-18, 0px 9px 11px -5px --mat-sys-shadow, 0px 18px 28px 2px --mat-sys-shadow, 0px 7px 34px 6px --mat-sys-shadow)}.mat-elevation-z19,.mat-mdc-elevation-specific.mat-elevation-z19{box-shadow:var(--mat-app-elevation-shadow-level-19, 0px 9px 12px -6px --mat-sys-shadow, 0px 19px 29px 2px --mat-sys-shadow, 0px 7px 36px 6px --mat-sys-shadow)}.mat-elevation-z20,.mat-mdc-elevation-specific.mat-elevation-z20{box-shadow:var(--mat-app-elevation-shadow-level-20, 0px 10px 13px -6px --mat-sys-shadow, 0px 20px 31px 3px --mat-sys-shadow, 0px 8px 38px 7px --mat-sys-shadow)}.mat-elevation-z21,.mat-mdc-elevation-specific.mat-elevation-z21{box-shadow:var(--mat-app-elevation-shadow-level-21, 0px 10px 13px -6px --mat-sys-shadow, 0px 21px 33px 3px --mat-sys-shadow, 0px 8px 40px 7px --mat-sys-shadow)}.mat-elevation-z22,.mat-mdc-elevation-specific.mat-elevation-z22{box-shadow:var(--mat-app-elevation-shadow-level-22, 0px 10px 14px -6px --mat-sys-shadow, 0px 22px 35px 3px --mat-sys-shadow, 0px 8px 42px 7px --mat-sys-shadow)}.mat-elevation-z23,.mat-mdc-elevation-specific.mat-elevation-z23{box-shadow:var(--mat-app-elevation-shadow-level-23, 0px 11px 14px -7px --mat-sys-shadow, 0px 23px 36px 3px --mat-sys-shadow, 0px 9px 44px 8px --mat-sys-shadow)}.mat-elevation-z24,.mat-mdc-elevation-specific.mat-elevation-z24{box-shadow:var(--mat-app-elevation-shadow-level-24, 0px 11px 15px -7px --mat-sys-shadow, 0px 24px 38px 3px --mat-sys-shadow, 0px 9px 46px 8px --mat-sys-shadow)}html{--mat-app-background-color: #fafafa;--mat-app-text-color: rgba(0, 0, 0, 0.87);--mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);--mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}html{--mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent)}html{--mat-option-selected-state-label-text-color: #3f51b5;--mat-option-label-text-color: rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent)}.mat-accent{--mat-option-selected-state-label-text-color: #ff4081;--mat-option-label-text-color: rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent)}.mat-warn{--mat-option-selected-state-label-text-color: #f44336;--mat-option-label-text-color: rgba(0, 0, 0, 0.87);--mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent)}html{--mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87)}html{--mat-pseudo-checkbox-full-selected-icon-color: #ff4081;--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-minimal-selected-checkmark-color: #ff4081;--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}.mat-primary{--mat-pseudo-checkbox-full-selected-icon-color: #3f51b5;--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-minimal-selected-checkmark-color: #3f51b5;--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}.mat-accent{--mat-pseudo-checkbox-full-selected-icon-color: #ff4081;--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-minimal-selected-checkmark-color: #ff4081;--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}.mat-warn{--mat-pseudo-checkbox-full-selected-icon-color: #f44336;--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-pseudo-checkbox-minimal-selected-checkmark-color: #f44336;--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}html{--mat-option-label-text-font: Roboto, sans-serif;--mat-option-label-text-line-height: 24px;--mat-option-label-text-size: 16px;--mat-option-label-text-tracking: 0.03125em;--mat-option-label-text-weight: 400}html{--mat-optgroup-label-text-font: Roboto, sans-serif;--mat-optgroup-label-text-line-height: 24px;--mat-optgroup-label-text-size: 16px;--mat-optgroup-label-text-tracking: 0.03125em;--mat-optgroup-label-text-weight: 400}html{--mat-card-elevated-container-shape: 4px;--mat-card-outlined-container-shape: 4px;--mat-card-filled-container-shape: 4px;--mat-card-outlined-outline-width: 1px}html{--mat-card-elevated-container-color: white;--mat-card-elevated-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-card-outlined-container-color: white;--mat-card-outlined-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);--mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);--mat-card-filled-container-color: white;--mat-card-filled-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}html{--mat-card-title-text-font: Roboto, sans-serif;--mat-card-title-text-line-height: 32px;--mat-card-title-text-size: 20px;--mat-card-title-text-tracking: 0.0125em;--mat-card-title-text-weight: 500;--mat-card-subtitle-text-font: Roboto, sans-serif;--mat-card-subtitle-text-line-height: 22px;--mat-card-subtitle-text-size: 14px;--mat-card-subtitle-text-tracking: 0.0071428571em;--mat-card-subtitle-text-weight: 500}html{--mat-progress-bar-active-indicator-height: 4px;--mat-progress-bar-track-height: 4px;--mat-progress-bar-track-shape: 0}.mat-mdc-progress-bar{--mat-progress-bar-active-indicator-color: #3f51b5;--mat-progress-bar-track-color: rgba(63, 81, 181, 0.25)}.mat-mdc-progress-bar.mat-accent{--mat-progress-bar-active-indicator-color: #ff4081;--mat-progress-bar-track-color: rgba(255, 64, 129, 0.25)}.mat-mdc-progress-bar.mat-warn{--mat-progress-bar-active-indicator-color: #f44336;--mat-progress-bar-track-color: rgba(244, 67, 54, 0.25)}html{--mat-tooltip-container-shape: 4px;--mat-tooltip-supporting-text-line-height: 16px}html{--mat-tooltip-container-color: #424242;--mat-tooltip-supporting-text-color: white}html{--mat-tooltip-supporting-text-font: Roboto, sans-serif;--mat-tooltip-supporting-text-size: 12px;--mat-tooltip-supporting-text-weight: 400;--mat-tooltip-supporting-text-tracking: 0.0333333333em}html{--mat-form-field-filled-active-indicator-height: 1px;--mat-form-field-filled-focus-active-indicator-height: 2px;--mat-form-field-filled-container-shape: 4px;--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 2px;--mat-form-field-outlined-container-shape: 4px}html{--mat-form-field-focus-select-arrow-color: color-mix(in srgb, #3f51b5 87%, transparent);--mat-form-field-filled-caret-color: #3f51b5;--mat-form-field-filled-focus-active-indicator-color: #3f51b5;--mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #3f51b5 87%, transparent);--mat-form-field-outlined-caret-color: #3f51b5;--mat-form-field-outlined-focus-outline-color: #3f51b5;--mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #3f51b5 87%, transparent);--mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);--mat-form-field-error-text-color: #f44336;--mat-form-field-select-option-text-color: inherit;--mat-form-field-select-disabled-option-text-color: GrayText;--mat-form-field-leading-icon-color: unset;--mat-form-field-disabled-leading-icon-color: unset;--mat-form-field-trailing-icon-color: unset;--mat-form-field-disabled-trailing-icon-color: unset;--mat-form-field-error-focus-trailing-icon-color: unset;--mat-form-field-error-hover-trailing-icon-color: unset;--mat-form-field-error-trailing-icon-color: unset;--mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);--mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-form-field-hover-state-layer-opacity: 0.04;--mat-form-field-focus-state-layer-opacity: 0.12;--mat-form-field-filled-container-color: #f6f6f6;--mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);--mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);--mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);--mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);--mat-form-field-filled-error-hover-label-text-color: #f44336;--mat-form-field-filled-error-focus-label-text-color: #f44336;--mat-form-field-filled-error-label-text-color: #f44336;--mat-form-field-filled-error-caret-color: #f44336;--mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);--mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);--mat-form-field-filled-error-active-indicator-color: #f44336;--mat-form-field-filled-error-focus-active-indicator-color: #f44336;--mat-form-field-filled-error-hover-active-indicator-color: #f44336;--mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);--mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);--mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);--mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);--mat-form-field-outlined-error-caret-color: #f44336;--mat-form-field-outlined-error-focus-label-text-color: #f44336;--mat-form-field-outlined-error-label-text-color: #f44336;--mat-form-field-outlined-error-hover-label-text-color: #f44336;--mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);--mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);--mat-form-field-outlined-error-focus-outline-color: #f44336;--mat-form-field-outlined-error-hover-outline-color: #f44336;--mat-form-field-outlined-error-outline-color: #f44336}.mat-mdc-form-field.mat-accent{--mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ff4081 87%, transparent);--mat-form-field-filled-caret-color: #ff4081;--mat-form-field-filled-focus-active-indicator-color: #ff4081;--mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ff4081 87%, transparent);--mat-form-field-outlined-caret-color: #ff4081;--mat-form-field-outlined-focus-outline-color: #ff4081;--mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ff4081 87%, transparent)}.mat-mdc-form-field.mat-warn{--mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f44336 87%, transparent);--mat-form-field-filled-caret-color: #f44336;--mat-form-field-filled-focus-active-indicator-color: #f44336;--mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent);--mat-form-field-outlined-caret-color: #f44336;--mat-form-field-outlined-focus-outline-color: #f44336;--mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent)}html{--mat-form-field-container-height: 56px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 16px;--mat-form-field-filled-with-label-container-padding-top: 24px;--mat-form-field-filled-with-label-container-padding-bottom: 8px}html{--mat-form-field-container-text-font: Roboto, sans-serif;--mat-form-field-container-text-line-height: 24px;--mat-form-field-container-text-size: 16px;--mat-form-field-container-text-tracking: 0.03125em;--mat-form-field-container-text-weight: 400;--mat-form-field-outlined-label-text-populated-size: 16px;--mat-form-field-subscript-text-font: Roboto, sans-serif;--mat-form-field-subscript-text-line-height: 20px;--mat-form-field-subscript-text-size: 12px;--mat-form-field-subscript-text-tracking: 0.0333333333em;--mat-form-field-subscript-text-weight: 400;--mat-form-field-filled-label-text-font: Roboto, sans-serif;--mat-form-field-filled-label-text-size: 16px;--mat-form-field-filled-label-text-tracking: 0.03125em;--mat-form-field-filled-label-text-weight: 400;--mat-form-field-outlined-label-text-font: Roboto, sans-serif;--mat-form-field-outlined-label-text-size: 16px;--mat-form-field-outlined-label-text-tracking: 0.03125em;--mat-form-field-outlined-label-text-weight: 400}html{--mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);--mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-select-focused-arrow-color: #3f51b5;--mat-select-invalid-arrow-color: #f44336}.mat-mdc-form-field.mat-accent{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);--mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-select-focused-arrow-color: #ff4081;--mat-select-invalid-arrow-color: #f44336}.mat-mdc-form-field.mat-warn{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);--mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);--mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);--mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-select-focused-arrow-color: #f44336;--mat-select-invalid-arrow-color: #f44336}html{--mat-select-arrow-transform: translateY(-8px)}html{--mat-select-trigger-text-font: Roboto, sans-serif;--mat-select-trigger-text-line-height: 24px;--mat-select-trigger-text-size: 16px;--mat-select-trigger-text-tracking: 0.03125em;--mat-select-trigger-text-weight: 400}html{--mat-autocomplete-container-shape: 4px;--mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-autocomplete-background-color: white}html{--mat-dialog-container-shape: 4px;--mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mat-dialog-container-max-width: 80vw;--mat-dialog-container-small-max-width: 80vw;--mat-dialog-container-min-width: 0;--mat-dialog-actions-alignment: start;--mat-dialog-actions-padding: 8px;--mat-dialog-content-padding: 20px 24px;--mat-dialog-with-actions-content-padding: 20px 24px;--mat-dialog-headline-padding: 0 24px 9px}html{--mat-dialog-container-color: white;--mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);--mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54)}html{--mat-dialog-subhead-font: Roboto, sans-serif;--mat-dialog-subhead-line-height: 32px;--mat-dialog-subhead-size: 20px;--mat-dialog-subhead-weight: 500;--mat-dialog-subhead-tracking: 0.0125em;--mat-dialog-supporting-text-font: Roboto, sans-serif;--mat-dialog-supporting-text-line-height: 24px;--mat-dialog-supporting-text-size: 16px;--mat-dialog-supporting-text-weight: 400;--mat-dialog-supporting-text-tracking: 0.03125em}.mat-mdc-standard-chip{--mat-chip-container-shape-radius: 16px;--mat-chip-disabled-container-opacity: 0.4;--mat-chip-disabled-outline-color: transparent;--mat-chip-flat-selected-outline-width: 0;--mat-chip-focus-outline-color: transparent;--mat-chip-hover-state-layer-opacity: 0.04;--mat-chip-outline-color: transparent;--mat-chip-outline-width: 0;--mat-chip-selected-hover-state-layer-opacity: 0.04;--mat-chip-selected-trailing-action-state-layer-color: transparent;--mat-chip-trailing-action-focus-opacity: 1;--mat-chip-trailing-action-focus-state-layer-opacity: 0;--mat-chip-trailing-action-hover-state-layer-opacity: 0;--mat-chip-trailing-action-opacity: 0.54;--mat-chip-trailing-action-state-layer-color: transparent;--mat-chip-with-avatar-avatar-shape-radius: 14px;--mat-chip-with-avatar-avatar-size: 28px;--mat-chip-with-avatar-disabled-avatar-opacity: 1;--mat-chip-with-icon-disabled-icon-opacity: 1;--mat-chip-with-icon-icon-size: 18px;--mat-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1}.mat-mdc-standard-chip{--mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);--mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-focus-state-layer-opacity: 0.12;--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-label-text-color: rgba(0, 0, 0, 0.87);--mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);--mat-chip-selected-focus-state-layer-color: 0.12;--mat-chip-selected-focus-state-layer-opacity: 0.12;--mat-chip-selected-hover-state-layer-color: 0.04;--mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);--mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);--mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);--mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);--mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);--mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);--mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87)}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mat-chip-disabled-label-text-color: white;--mat-chip-elevated-container-color: #3f51b5;--mat-chip-elevated-disabled-container-color: #3f51b5;--mat-chip-elevated-selected-container-color: #3f51b5;--mat-chip-flat-disabled-selected-container-color: #3f51b5;--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-focus-state-layer-opacity: 0.12;--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-label-text-color: white;--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-focus-state-layer-color: 0.12;--mat-chip-selected-focus-state-layer-opacity: 0.12;--mat-chip-selected-hover-state-layer-color: 0.04;--mat-chip-selected-label-text-color: white;--mat-chip-selected-trailing-icon-color: white;--mat-chip-with-icon-disabled-icon-color: white;--mat-chip-with-icon-icon-color: white;--mat-chip-with-icon-selected-icon-color: white;--mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mat-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mat-chip-disabled-label-text-color: white;--mat-chip-elevated-container-color: #ff4081;--mat-chip-elevated-disabled-container-color: #ff4081;--mat-chip-elevated-selected-container-color: #ff4081;--mat-chip-flat-disabled-selected-container-color: #ff4081;--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-focus-state-layer-opacity: 0.12;--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-label-text-color: white;--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-focus-state-layer-color: 0.12;--mat-chip-selected-focus-state-layer-opacity: 0.12;--mat-chip-selected-hover-state-layer-color: 0.04;--mat-chip-selected-label-text-color: white;--mat-chip-selected-trailing-icon-color: white;--mat-chip-with-icon-disabled-icon-color: white;--mat-chip-with-icon-icon-color: white;--mat-chip-with-icon-selected-icon-color: white;--mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mat-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mat-chip-disabled-label-text-color: white;--mat-chip-elevated-container-color: #f44336;--mat-chip-elevated-disabled-container-color: #f44336;--mat-chip-elevated-selected-container-color: #f44336;--mat-chip-flat-disabled-selected-container-color: #f44336;--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-focus-state-layer-opacity: 0.12;--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-chip-label-text-color: white;--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-focus-state-layer-color: 0.12;--mat-chip-selected-focus-state-layer-opacity: 0.12;--mat-chip-selected-hover-state-layer-color: 0.04;--mat-chip-selected-label-text-color: white;--mat-chip-selected-trailing-icon-color: white;--mat-chip-with-icon-disabled-icon-color: white;--mat-chip-with-icon-icon-color: white;--mat-chip-with-icon-selected-icon-color: white;--mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mat-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-chip.mat-mdc-standard-chip{--mat-chip-container-height: 32px}.mat-mdc-standard-chip{--mat-chip-label-text-font: Roboto, sans-serif;--mat-chip-label-text-line-height: 20px;--mat-chip-label-text-size: 14px;--mat-chip-label-text-tracking: 0.0178571429em;--mat-chip-label-text-weight: 400}html{--mat-slide-toggle-disabled-handle-opacity: 0.38;--mat-slide-toggle-disabled-selected-handle-opacity: 0.38;--mat-slide-toggle-disabled-selected-icon-opacity: 0.38;--mat-slide-toggle-disabled-track-opacity: 0.12;--mat-slide-toggle-disabled-unselected-handle-opacity: 0.38;--mat-slide-toggle-disabled-unselected-icon-opacity: 0.38;--mat-slide-toggle-disabled-unselected-track-outline-color: transparent;--mat-slide-toggle-disabled-unselected-track-outline-width: 1px;--mat-slide-toggle-handle-height: 20px;--mat-slide-toggle-handle-shape: 10px;--mat-slide-toggle-handle-width: 20px;--mat-slide-toggle-hidden-track-opacity: 1;--mat-slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);--mat-slide-toggle-pressed-handle-size: 20px;--mat-slide-toggle-selected-focus-state-layer-opacity: 0.12;--mat-slide-toggle-selected-handle-horizontal-margin: 0;--mat-slide-toggle-selected-handle-size: 20px;--mat-slide-toggle-selected-hover-state-layer-opacity: 0.04;--mat-slide-toggle-selected-icon-size: 18px;--mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;--mat-slide-toggle-selected-pressed-state-layer-opacity: 0.12;--mat-slide-toggle-selected-track-outline-color: transparent;--mat-slide-toggle-selected-track-outline-width: 1px;--mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;--mat-slide-toggle-track-height: 14px;--mat-slide-toggle-track-outline-color: transparent;--mat-slide-toggle-track-outline-width: 1px;--mat-slide-toggle-track-shape: 7px;--mat-slide-toggle-track-width: 36px;--mat-slide-toggle-unselected-focus-state-layer-opacity: 0.12;--mat-slide-toggle-unselected-handle-horizontal-margin: 0;--mat-slide-toggle-unselected-handle-size: 20px;--mat-slide-toggle-unselected-hover-state-layer-opacity: 0.12;--mat-slide-toggle-unselected-icon-size: 18px;--mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;--mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.1;--mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;--mat-slide-toggle-visible-track-opacity: 1;--mat-slide-toggle-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);--mat-slide-toggle-with-icon-handle-size: 20px;--mat-slide-toggle-touch-target-size: 48px}html{--mat-slide-toggle-selected-icon-color: white;--mat-slide-toggle-disabled-selected-icon-color: white;--mat-slide-toggle-selected-focus-state-layer-color: #3f51b5;--mat-slide-toggle-selected-handle-color: #3f51b5;--mat-slide-toggle-selected-hover-state-layer-color: #3f51b5;--mat-slide-toggle-selected-pressed-state-layer-color: #3f51b5;--mat-slide-toggle-selected-focus-handle-color: #3f51b5;--mat-slide-toggle-selected-hover-handle-color: #3f51b5;--mat-slide-toggle-selected-pressed-handle-color: #3f51b5;--mat-slide-toggle-selected-focus-track-color: #7986cb;--mat-slide-toggle-selected-hover-track-color: #7986cb;--mat-slide-toggle-selected-pressed-track-color: #7986cb;--mat-slide-toggle-selected-track-color: #7986cb;--mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-slide-toggle-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;--mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-slide-toggle-handle-surface-color: white;--mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-unselected-hover-handle-color: #424242;--mat-slide-toggle-unselected-focus-handle-color: #424242;--mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);--mat-slide-toggle-unselected-icon-color: #f6f6f6;--mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);--mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);--mat-slide-toggle-unselected-pressed-handle-color: #424242;--mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);--mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);--mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12)}.mat-mdc-slide-toggle.mat-accent{--mat-slide-toggle-selected-icon-color: white;--mat-slide-toggle-disabled-selected-icon-color: white;--mat-slide-toggle-selected-focus-state-layer-color: #ff4081;--mat-slide-toggle-selected-handle-color: #ff4081;--mat-slide-toggle-selected-hover-state-layer-color: #ff4081;--mat-slide-toggle-selected-pressed-state-layer-color: #ff4081;--mat-slide-toggle-selected-focus-handle-color: #ff4081;--mat-slide-toggle-selected-hover-handle-color: #ff4081;--mat-slide-toggle-selected-pressed-handle-color: #ff4081;--mat-slide-toggle-selected-focus-track-color: #f06292;--mat-slide-toggle-selected-hover-track-color: #f06292;--mat-slide-toggle-selected-pressed-track-color: #f06292;--mat-slide-toggle-selected-track-color: #f06292}.mat-mdc-slide-toggle.mat-warn{--mat-slide-toggle-selected-icon-color: white;--mat-slide-toggle-disabled-selected-icon-color: white;--mat-slide-toggle-selected-focus-state-layer-color: #f44336;--mat-slide-toggle-selected-handle-color: #f44336;--mat-slide-toggle-selected-hover-state-layer-color: #f44336;--mat-slide-toggle-selected-pressed-state-layer-color: #f44336;--mat-slide-toggle-selected-focus-handle-color: #f44336;--mat-slide-toggle-selected-hover-handle-color: #f44336;--mat-slide-toggle-selected-pressed-handle-color: #f44336;--mat-slide-toggle-selected-focus-track-color: #e57373;--mat-slide-toggle-selected-hover-track-color: #e57373;--mat-slide-toggle-selected-pressed-track-color: #e57373;--mat-slide-toggle-selected-track-color: #e57373}html{--mat-slide-toggle-state-layer-size: 40px;--mat-slide-toggle-touch-target-display: block}html{--mat-slide-toggle-label-text-font: Roboto, sans-serif;--mat-slide-toggle-label-text-line-height: 20px;--mat-slide-toggle-label-text-size: 14px;--mat-slide-toggle-label-text-tracking: 0.0178571429em;--mat-slide-toggle-label-text-weight: 400}html .mat-mdc-slide-toggle{--mat-slide-toggle-label-text-font: Roboto, sans-serif;--mat-slide-toggle-label-text-line-height: 20px;--mat-slide-toggle-label-text-size: 14px;--mat-slide-toggle-label-text-tracking: 0.0178571429em;--mat-slide-toggle-label-text-weight: 400}html{--mat-radio-disabled-selected-icon-opacity: 0.38;--mat-radio-disabled-unselected-icon-opacity: 0.38;--mat-radio-state-layer-size: 40px;--mat-radio-touch-target-size: 48px}.mat-mdc-radio-button.mat-primary{--mat-radio-checked-ripple-color: #3f51b5;--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);--mat-radio-selected-focus-icon-color: #3f51b5;--mat-radio-selected-hover-icon-color: #3f51b5;--mat-radio-selected-icon-color: #3f51b5;--mat-radio-selected-pressed-icon-color: #3f51b5;--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87)}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: #ff4081;--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);--mat-radio-selected-focus-icon-color: #ff4081;--mat-radio-selected-hover-icon-color: #ff4081;--mat-radio-selected-icon-color: #ff4081;--mat-radio-selected-pressed-icon-color: #ff4081;--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87)}.mat-mdc-radio-button.mat-warn{--mat-radio-checked-ripple-color: #f44336;--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);--mat-radio-selected-focus-icon-color: #f44336;--mat-radio-selected-hover-icon-color: #f44336;--mat-radio-selected-icon-color: #f44336;--mat-radio-selected-pressed-icon-color: #f44336;--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87)}html{--mat-radio-state-layer-size: 40px;--mat-radio-touch-target-display: block}html{--mat-radio-label-text-font: Roboto, sans-serif;--mat-radio-label-text-line-height: 20px;--mat-radio-label-text-size: 14px;--mat-radio-label-text-tracking: 0.0178571429em;--mat-radio-label-text-weight: 400}html{--mat-slider-active-track-height: 6px;--mat-slider-active-track-shape: 9999px;--mat-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-slider-handle-height: 20px;--mat-slider-handle-shape: 50%;--mat-slider-handle-width: 20px;--mat-slider-inactive-track-height: 4px;--mat-slider-inactive-track-shape: 9999px;--mat-slider-value-indicator-border-radius: 4px;--mat-slider-value-indicator-caret-display: block;--mat-slider-value-indicator-container-transform: translateX(-50%);--mat-slider-value-indicator-height: 32px;--mat-slider-value-indicator-padding: 0 12px;--mat-slider-value-indicator-text-transform: none;--mat-slider-value-indicator-width: auto;--mat-slider-with-overlap-handle-outline-width: 1px;--mat-slider-with-tick-marks-active-container-opacity: 0.6;--mat-slider-with-tick-marks-container-shape: 50%;--mat-slider-with-tick-marks-container-size: 2px;--mat-slider-with-tick-marks-inactive-container-opacity: 0.6;--mat-slider-value-indicator-transform-origin: bottom}html{--mat-slider-active-track-color: #3f51b5;--mat-slider-focus-handle-color: #3f51b5;--mat-slider-handle-color: #3f51b5;--mat-slider-hover-handle-color: #3f51b5;--mat-slider-focus-state-layer-color: color-mix(in srgb, #3f51b5 12%, transparent);--mat-slider-hover-state-layer-color: color-mix(in srgb, #3f51b5 4%, transparent);--mat-slider-inactive-track-color: #3f51b5;--mat-slider-ripple-color: #3f51b5;--mat-slider-with-tick-marks-active-container-color: white;--mat-slider-with-tick-marks-inactive-container-color: #3f51b5;--mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);--mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);--mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);--mat-slider-label-container-color: #424242;--mat-slider-label-label-text-color: white;--mat-slider-value-indicator-opacity: 1;--mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);--mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87)}.mat-accent{--mat-slider-active-track-color: #ff4081;--mat-slider-focus-handle-color: #ff4081;--mat-slider-handle-color: #ff4081;--mat-slider-hover-handle-color: #ff4081;--mat-slider-focus-state-layer-color: color-mix(in srgb, #ff4081 12%, transparent);--mat-slider-hover-state-layer-color: color-mix(in srgb, #ff4081 4%, transparent);--mat-slider-inactive-track-color: #ff4081;--mat-slider-ripple-color: #ff4081;--mat-slider-with-tick-marks-active-container-color: white;--mat-slider-with-tick-marks-inactive-container-color: #ff4081}.mat-warn{--mat-slider-active-track-color: #f44336;--mat-slider-focus-handle-color: #f44336;--mat-slider-handle-color: #f44336;--mat-slider-hover-handle-color: #f44336;--mat-slider-focus-state-layer-color: color-mix(in srgb, #f44336 12%, transparent);--mat-slider-hover-state-layer-color: color-mix(in srgb, #f44336 4%, transparent);--mat-slider-inactive-track-color: #f44336;--mat-slider-ripple-color: #f44336;--mat-slider-with-tick-marks-active-container-color: white;--mat-slider-with-tick-marks-inactive-container-color: #f44336}html{--mat-slider-label-label-text-font: Roboto, sans-serif;--mat-slider-label-label-text-size: 14px;--mat-slider-label-label-text-line-height: 22px;--mat-slider-label-label-text-tracking: 0.0071428571em;--mat-slider-label-label-text-weight: 500}html{--mat-menu-container-shape: 4px;--mat-menu-divider-bottom-spacing: 0;--mat-menu-divider-top-spacing: 0;--mat-menu-item-spacing: 16px;--mat-menu-item-icon-size: 24px;--mat-menu-item-leading-spacing: 16px;--mat-menu-item-trailing-spacing: 16px;--mat-menu-item-with-icon-leading-spacing: 16px;--mat-menu-item-with-icon-trailing-spacing: 16px;--mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);--mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);--mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-menu-container-color: white;--mat-menu-divider-color: rgba(0, 0, 0, 0.12)}html{--mat-menu-item-label-text-font: Roboto, sans-serif;--mat-menu-item-label-text-size: 16px;--mat-menu-item-label-text-tracking: 0.03125em;--mat-menu-item-label-text-line-height: 24px;--mat-menu-item-label-text-weight: 400}html{--mat-list-active-indicator-color: transparent;--mat-list-active-indicator-shape: 4px;--mat-list-list-item-container-shape: 0;--mat-list-list-item-leading-avatar-shape: 50%;--mat-list-list-item-container-color: transparent;--mat-list-list-item-selected-container-color: transparent;--mat-list-list-item-leading-avatar-color: transparent;--mat-list-list-item-leading-icon-size: 24px;--mat-list-list-item-leading-avatar-size: 40px;--mat-list-list-item-trailing-icon-size: 24px;--mat-list-list-item-disabled-state-layer-color: transparent;--mat-list-list-item-disabled-state-layer-opacity: 0;--mat-list-list-item-disabled-label-text-opacity: 0.38;--mat-list-list-item-disabled-leading-icon-opacity: 0.38;--mat-list-list-item-disabled-trailing-icon-opacity: 0.38}html{--mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);--mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);--mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);--mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);--mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);--mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);--mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-hover-state-layer-opacity: 0.04;--mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);--mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-list-list-item-focus-state-layer-opacity: 0.12}.mdc-list-item__start,.mdc-list-item__end{--mat-radio-checked-ripple-color: #3f51b5;--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);--mat-radio-selected-focus-icon-color: #3f51b5;--mat-radio-selected-hover-icon-color: #3f51b5;--mat-radio-selected-icon-color: #3f51b5;--mat-radio-selected-pressed-icon-color: #3f51b5;--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87)}.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end{--mat-radio-checked-ripple-color: #ff4081;--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);--mat-radio-selected-focus-icon-color: #ff4081;--mat-radio-selected-hover-icon-color: #ff4081;--mat-radio-selected-icon-color: #ff4081;--mat-radio-selected-pressed-icon-color: #ff4081;--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87)}.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end{--mat-radio-checked-ripple-color: #f44336;--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);--mat-radio-selected-focus-icon-color: #f44336;--mat-radio-selected-hover-icon-color: #f44336;--mat-radio-selected-icon-color: #f44336;--mat-radio-selected-pressed-icon-color: #f44336;--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87)}.mat-mdc-list-option{--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-selected-checkmark-color: white;--mat-checkbox-selected-focus-icon-color: #3f51b5;--mat-checkbox-selected-hover-icon-color: #3f51b5;--mat-checkbox-selected-icon-color: #3f51b5;--mat-checkbox-selected-pressed-icon-color: #3f51b5;--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-checkbox-selected-focus-state-layer-color: #3f51b5;--mat-checkbox-selected-hover-state-layer-color: #3f51b5;--mat-checkbox-selected-pressed-state-layer-color: #3f51b5;--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-list-option.mat-accent{--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-selected-checkmark-color: white;--mat-checkbox-selected-focus-icon-color: #ff4081;--mat-checkbox-selected-hover-icon-color: #ff4081;--mat-checkbox-selected-icon-color: #ff4081;--mat-checkbox-selected-pressed-icon-color: #ff4081;--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-checkbox-selected-focus-state-layer-color: #ff4081;--mat-checkbox-selected-hover-state-layer-color: #ff4081;--mat-checkbox-selected-pressed-state-layer-color: #ff4081;--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-list-option.mat-warn{--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-selected-checkmark-color: white;--mat-checkbox-selected-focus-icon-color: #f44336;--mat-checkbox-selected-hover-icon-color: #f44336;--mat-checkbox-selected-icon-color: #f44336;--mat-checkbox-selected-pressed-icon-color: #f44336;--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-checkbox-selected-focus-state-layer-color: #f44336;--mat-checkbox-selected-hover-state-layer-color: #f44336;--mat-checkbox-selected-pressed-state-layer-color: #f44336;--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start{color:#3f51b5}.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end{opacity:1}html{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px;--mat-list-list-item-one-line-container-height: 48px;--mat-list-list-item-two-line-container-height: 64px;--mat-list-list-item-three-line-container-height: 88px}.mdc-list-item__start,.mdc-list-item__end{--mat-radio-state-layer-size: 40px;--mat-radio-touch-target-display: block}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}html{--mat-list-list-item-label-text-font: Roboto, sans-serif;--mat-list-list-item-label-text-line-height: 24px;--mat-list-list-item-label-text-size: 16px;--mat-list-list-item-label-text-tracking: 0.03125em;--mat-list-list-item-label-text-weight: 400;--mat-list-list-item-supporting-text-font: Roboto, sans-serif;--mat-list-list-item-supporting-text-line-height: 20px;--mat-list-list-item-supporting-text-size: 14px;--mat-list-list-item-supporting-text-tracking: 0.0178571429em;--mat-list-list-item-supporting-text-weight: 400;--mat-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;--mat-list-list-item-trailing-supporting-text-line-height: 20px;--mat-list-list-item-trailing-supporting-text-size: 12px;--mat-list-list-item-trailing-supporting-text-tracking: 0.0333333333em;--mat-list-list-item-trailing-supporting-text-weight: 400}.mdc-list-group__subheader{font:400 16px / 28px Roboto, sans-serif;letter-spacing:.009375em}html{--mat-paginator-page-size-select-width: 84px;--mat-paginator-page-size-select-touch-target-height: 48px}html{--mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);--mat-paginator-container-background-color: white;--mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);--mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}html{--mat-paginator-container-size: 56px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block}html{--mat-paginator-container-text-font: Roboto, sans-serif;--mat-paginator-container-text-line-height: 20px;--mat-paginator-container-text-size: 12px;--mat-paginator-container-text-tracking: 0.0333333333em;--mat-paginator-container-text-weight: 400;--mat-paginator-select-trigger-text-size: 12px}html{--mat-tab-container-height: 48px;--mat-tab-divider-color: transparent;--mat-tab-divider-height: 0;--mat-tab-active-indicator-height: 2px;--mat-tab-active-indicator-shape: 0}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);--mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);--mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-active-label-text-color: #3f51b5;--mat-tab-active-ripple-color: #3f51b5;--mat-tab-inactive-ripple-color: #3f51b5;--mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-active-focus-label-text-color: #3f51b5;--mat-tab-active-hover-label-text-color: #3f51b5;--mat-tab-active-focus-indicator-color: #3f51b5;--mat-tab-active-hover-indicator-color: #3f51b5;--mat-tab-active-indicator-color: #3f51b5}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);--mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);--mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-active-label-text-color: #ff4081;--mat-tab-active-ripple-color: #ff4081;--mat-tab-inactive-ripple-color: #ff4081;--mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-active-focus-label-text-color: #ff4081;--mat-tab-active-hover-label-text-color: #ff4081;--mat-tab-active-focus-indicator-color: #ff4081;--mat-tab-active-hover-indicator-color: #ff4081;--mat-tab-active-indicator-color: #ff4081}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);--mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);--mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-active-label-text-color: #f44336;--mat-tab-active-ripple-color: #f44336;--mat-tab-inactive-ripple-color: #f44336;--mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);--mat-tab-active-focus-label-text-color: #f44336;--mat-tab-active-hover-label-text-color: #f44336;--mat-tab-active-focus-indicator-color: #f44336;--mat-tab-active-hover-indicator-color: #f44336;--mat-tab-active-indicator-color: #f44336}.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary{--mat-tab-background-color: #3f51b5;--mat-tab-foreground-color: white}.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent{--mat-tab-background-color: #ff4081;--mat-tab-foreground-color: white}.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn{--mat-tab-background-color: #f44336;--mat-tab-foreground-color: white}.mat-mdc-tab-header{--mat-tab-container-height: 48px}.mat-mdc-tab-header{--mat-tab-label-text-font: Roboto, sans-serif;--mat-tab-label-text-size: 14px;--mat-tab-label-text-tracking: 0.0892857143em;--mat-tab-label-text-line-height: 36px;--mat-tab-label-text-weight: 500}html{--mat-checkbox-disabled-selected-checkmark-color: white;--mat-checkbox-selected-focus-state-layer-opacity: 0.12;--mat-checkbox-selected-hover-state-layer-opacity: 0.04;--mat-checkbox-selected-pressed-state-layer-opacity: 0.12;--mat-checkbox-unselected-focus-state-layer-opacity: 0.12;--mat-checkbox-unselected-hover-state-layer-opacity: 0.04;--mat-checkbox-unselected-pressed-state-layer-opacity: 0.12;--mat-checkbox-touch-target-size: 48px}html{--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-selected-checkmark-color: white;--mat-checkbox-selected-focus-icon-color: #ff4081;--mat-checkbox-selected-hover-icon-color: #ff4081;--mat-checkbox-selected-icon-color: #ff4081;--mat-checkbox-selected-pressed-icon-color: #ff4081;--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-checkbox-selected-focus-state-layer-color: #ff4081;--mat-checkbox-selected-hover-state-layer-color: #ff4081;--mat-checkbox-selected-pressed-state-layer-color: #ff4081;--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-checkbox.mat-primary{--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-selected-checkmark-color: white;--mat-checkbox-selected-focus-icon-color: #3f51b5;--mat-checkbox-selected-hover-icon-color: #3f51b5;--mat-checkbox-selected-icon-color: #3f51b5;--mat-checkbox-selected-pressed-icon-color: #3f51b5;--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-checkbox-selected-focus-state-layer-color: #3f51b5;--mat-checkbox-selected-hover-state-layer-color: #3f51b5;--mat-checkbox-selected-pressed-state-layer-color: #3f51b5;--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-checkbox.mat-warn{--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-checkbox-selected-checkmark-color: white;--mat-checkbox-selected-focus-icon-color: #f44336;--mat-checkbox-selected-hover-icon-color: #f44336;--mat-checkbox-selected-icon-color: #f44336;--mat-checkbox-selected-pressed-icon-color: #f44336;--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);--mat-checkbox-selected-focus-state-layer-color: #f44336;--mat-checkbox-selected-hover-state-layer-color: #f44336;--mat-checkbox-selected-pressed-state-layer-color: #f44336;--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87)}html{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 40px}html{--mat-checkbox-label-text-font: Roboto, sans-serif;--mat-checkbox-label-text-line-height: 20px;--mat-checkbox-label-text-size: 14px;--mat-checkbox-label-text-tracking: 0.0178571429em;--mat-checkbox-label-text-weight: 400}html{--mat-button-filled-container-shape: 4px;--mat-button-filled-horizontal-padding: 16px;--mat-button-filled-icon-offset: -4px;--mat-button-filled-icon-spacing: 8px;--mat-button-filled-touch-target-size: 48px;--mat-button-outlined-container-shape: 4px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-outlined-icon-offset: -4px;--mat-button-outlined-icon-spacing: 8px;--mat-button-outlined-keep-touch-target: false;--mat-button-outlined-outline-width: 1px;--mat-button-outlined-touch-target-size: 48px;--mat-button-protected-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--mat-button-protected-container-shape: 4px;--mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-button-protected-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-button-protected-horizontal-padding: 16px;--mat-button-protected-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-button-protected-icon-offset: -4px;--mat-button-protected-icon-spacing: 8px;--mat-button-protected-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-button-protected-touch-target-size: 48px;--mat-button-text-container-shape: 4px;--mat-button-text-horizontal-padding: 8px;--mat-button-text-icon-offset: 0;--mat-button-text-icon-spacing: 8px;--mat-button-text-with-icon-horizontal-padding: 8px;--mat-button-text-touch-target-size: 48px;--mat-button-tonal-container-shape: 4px;--mat-button-tonal-horizontal-padding: 16px;--mat-button-tonal-icon-offset: -4px;--mat-button-tonal-icon-spacing: 8px;--mat-button-tonal-touch-target-size: 48px}html{--mat-button-filled-container-color: white;--mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-button-filled-focus-state-layer-opacity: 0.12;--mat-button-filled-hover-state-layer-opacity: 0.04;--mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);--mat-button-filled-pressed-state-layer-opacity: 0.12;--mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);--mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);--mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-button-outlined-focus-state-layer-opacity: 0.12;--mat-button-outlined-hover-state-layer-opacity: 0.04;--mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);--mat-button-outlined-pressed-state-layer-opacity: 0.12;--mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);--mat-button-protected-container-color: white;--mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-button-protected-focus-state-layer-opacity: 0.12;--mat-button-protected-hover-state-layer-opacity: 0.04;--mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);--mat-button-protected-pressed-state-layer-opacity: 0.12;--mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);--mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-button-text-focus-state-layer-opacity: 0.12;--mat-button-text-hover-state-layer-opacity: 0.04;--mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);--mat-button-text-pressed-state-layer-opacity: 0.12;--mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);--mat-button-tonal-container-color: white;--mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-button-tonal-focus-state-layer-opacity: 0.12;--mat-button-tonal-hover-state-layer-opacity: 0.04;--mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);--mat-button-tonal-pressed-state-layer-opacity: 0.12;--mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-button.mat-primary,.mat-mdc-unelevated-button.mat-primary,.mat-mdc-raised-button.mat-primary,.mat-mdc-outlined-button.mat-primary,.mat-tonal-button.mat-primary{--mat-button-filled-container-color: #3f51b5;--mat-button-filled-label-text-color: white;--mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-filled-state-layer-color: white;--mat-button-outlined-label-text-color: #3f51b5;--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);--mat-button-outlined-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent);--mat-button-outlined-state-layer-color: #3f51b5;--mat-button-protected-container-color: #3f51b5;--mat-button-protected-label-text-color: white;--mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-protected-state-layer-color: white;--mat-button-text-label-text-color: #3f51b5;--mat-button-text-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent);--mat-button-text-state-layer-color: #3f51b5;--mat-button-tonal-container-color: #3f51b5;--mat-button-tonal-label-text-color: white;--mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-tonal-state-layer-color: white}.mat-mdc-button.mat-accent,.mat-mdc-unelevated-button.mat-accent,.mat-mdc-raised-button.mat-accent,.mat-mdc-outlined-button.mat-accent,.mat-tonal-button.mat-accent{--mat-button-filled-container-color: #ff4081;--mat-button-filled-label-text-color: white;--mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-filled-state-layer-color: white;--mat-button-outlined-label-text-color: #ff4081;--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);--mat-button-outlined-ripple-color: color-mix(in srgb, #ff4081 12%, transparent);--mat-button-outlined-state-layer-color: #ff4081;--mat-button-protected-container-color: #ff4081;--mat-button-protected-label-text-color: white;--mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-protected-state-layer-color: white;--mat-button-text-label-text-color: #ff4081;--mat-button-text-ripple-color: color-mix(in srgb, #ff4081 12%, transparent);--mat-button-text-state-layer-color: #ff4081;--mat-button-tonal-container-color: #ff4081;--mat-button-tonal-label-text-color: white;--mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-tonal-state-layer-color: white}.mat-mdc-button.mat-warn,.mat-mdc-unelevated-button.mat-warn,.mat-mdc-raised-button.mat-warn,.mat-mdc-outlined-button.mat-warn,.mat-tonal-button.mat-warn{--mat-button-filled-container-color: #f44336;--mat-button-filled-label-text-color: white;--mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-filled-state-layer-color: white;--mat-button-outlined-label-text-color: #f44336;--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);--mat-button-outlined-ripple-color: color-mix(in srgb, #f44336 12%, transparent);--mat-button-outlined-state-layer-color: #f44336;--mat-button-protected-container-color: #f44336;--mat-button-protected-label-text-color: white;--mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-protected-state-layer-color: white;--mat-button-text-label-text-color: #f44336;--mat-button-text-ripple-color: color-mix(in srgb, #f44336 12%, transparent);--mat-button-text-state-layer-color: #f44336;--mat-button-tonal-container-color: #f44336;--mat-button-tonal-label-text-color: white;--mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-button-tonal-state-layer-color: white}html{--mat-button-filled-container-height: 36px;--mat-button-filled-touch-target-display: block;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-protected-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block}html{--mat-button-filled-label-text-font: Roboto, sans-serif;--mat-button-filled-label-text-size: 14px;--mat-button-filled-label-text-tracking: 0.0892857143em;--mat-button-filled-label-text-transform: none;--mat-button-filled-label-text-weight: 500;--mat-button-outlined-label-text-font: Roboto, sans-serif;--mat-button-outlined-label-text-size: 14px;--mat-button-outlined-label-text-tracking: 0.0892857143em;--mat-button-outlined-label-text-transform: none;--mat-button-outlined-label-text-weight: 500;--mat-button-protected-label-text-font: Roboto, sans-serif;--mat-button-protected-label-text-size: 14px;--mat-button-protected-label-text-tracking: 0.0892857143em;--mat-button-protected-label-text-transform: none;--mat-button-protected-label-text-weight: 500;--mat-button-text-label-text-font: Roboto, sans-serif;--mat-button-text-label-text-size: 14px;--mat-button-text-label-text-tracking: 0.0892857143em;--mat-button-text-label-text-transform: none;--mat-button-text-label-text-weight: 500;--mat-button-tonal-label-text-font: Roboto, sans-serif;--mat-button-tonal-label-text-size: 14px;--mat-button-tonal-label-text-tracking: 0.0892857143em;--mat-button-tonal-label-text-transform: none;--mat-button-tonal-label-text-weight: 500}html{--mat-icon-button-icon-size: 24px;--mat-icon-button-container-shape: 50%;--mat-icon-button-touch-target-size: 48px}html{--mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-icon-button-focus-state-layer-opacity: 0.12;--mat-icon-button-hover-state-layer-opacity: 0.04;--mat-icon-button-icon-color: inherit;--mat-icon-button-pressed-state-layer-opacity: 0.12;--mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-icon-button.mat-primary{--mat-icon-button-icon-color: #3f51b5;--mat-icon-button-state-layer-color: #3f51b5;--mat-icon-button-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent)}.mat-mdc-icon-button.mat-accent{--mat-icon-button-icon-color: #ff4081;--mat-icon-button-state-layer-color: #ff4081;--mat-icon-button-ripple-color: color-mix(in srgb, #ff4081 12%, transparent)}.mat-mdc-icon-button.mat-warn{--mat-icon-button-icon-color: #f44336;--mat-icon-button-state-layer-color: #f44336;--mat-icon-button-ripple-color: color-mix(in srgb, #f44336 12%, transparent)}html{--mat-icon-button-touch-target-display: block}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 48px;--mat-icon-button-state-layer-size: 48px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:12px}html{--mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mat-fab-container-shape: 50%;--mat-fab-touch-target-size: 48px;--mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mat-fab-extended-container-height: 48px;--mat-fab-extended-container-shape: 24px;--mat-fab-extended-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-fab-extended-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mat-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mat-fab-small-container-shape: 50%;--mat-fab-small-touch-target-size: 48px;--mat-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mat-fab-container-color: white;--mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-fab-focus-state-layer-opacity: 0.12;--mat-fab-foreground-color: rgba(0, 0, 0, 0.87);--mat-fab-hover-state-layer-opacity: 0.04;--mat-fab-pressed-state-layer-opacity: 0.12;--mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-fab-small-container-color: white;--mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);--mat-fab-small-focus-state-layer-opacity: 0.12;--mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);--mat-fab-small-hover-state-layer-opacity: 0.04;--mat-fab-small-pressed-state-layer-opacity: 0.12;--mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);--mat-fab-state-layer-color: rgba(0, 0, 0, 0.87)}.mat-mdc-fab.mat-primary,.mat-mdc-mini-fab.mat-primary{--mat-fab-container-color: #3f51b5;--mat-fab-foreground-color: white;--mat-fab-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent);--mat-fab-small-container-color: #3f51b5;--mat-fab-small-foreground-color: white;--mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-fab-small-state-layer-color: white;--mat-fab-state-layer-color: white}.mat-mdc-fab.mat-accent,.mat-mdc-mini-fab.mat-accent{--mat-fab-container-color: #ff4081;--mat-fab-foreground-color: white;--mat-fab-ripple-color: color-mix(in srgb, #ff4081 12%, transparent);--mat-fab-small-container-color: #ff4081;--mat-fab-small-foreground-color: white;--mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-fab-small-state-layer-color: white;--mat-fab-state-layer-color: white}.mat-mdc-fab.mat-warn,.mat-mdc-mini-fab.mat-warn{--mat-fab-container-color: #f44336;--mat-fab-foreground-color: white;--mat-fab-ripple-color: color-mix(in srgb, #f44336 12%, transparent);--mat-fab-small-container-color: #f44336;--mat-fab-small-foreground-color: white;--mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);--mat-fab-small-state-layer-color: white;--mat-fab-state-layer-color: white}html{--mat-fab-small-touch-target-display: block;--mat-fab-touch-target-display: block}html{--mat-fab-extended-label-text-font: Roboto, sans-serif;--mat-fab-extended-label-text-size: 14px;--mat-fab-extended-label-text-tracking: 0.0892857143em;--mat-fab-extended-label-text-weight: 500}html{--mat-snack-bar-container-shape: 4px}html{--mat-snack-bar-container-color: #424242;--mat-snack-bar-supporting-text-color: white;--mat-snack-bar-button-color: #7986cb}html{--mat-snack-bar-supporting-text-font: Roboto, sans-serif;--mat-snack-bar-supporting-text-line-height: 20px;--mat-snack-bar-supporting-text-size: 14px;--mat-snack-bar-supporting-text-weight: 400}html{--mat-table-row-item-outline-width: 1px}html{--mat-table-background-color: white;--mat-table-header-headline-color: rgba(0, 0, 0, 0.87);--mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);--mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12)}html{--mat-table-header-container-height: 56px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}html{--mat-table-header-headline-font: Roboto, sans-serif;--mat-table-header-headline-line-height: 22px;--mat-table-header-headline-size: 14px;--mat-table-header-headline-weight: 500;--mat-table-header-headline-tracking: 0.0071428571em;--mat-table-row-item-label-text-font: Roboto, sans-serif;--mat-table-row-item-label-text-line-height: 20px;--mat-table-row-item-label-text-size: 14px;--mat-table-row-item-label-text-weight: 400;--mat-table-row-item-label-text-tracking: 0.0178571429em;--mat-table-footer-supporting-text-font: Roboto, sans-serif;--mat-table-footer-supporting-text-line-height: 20px;--mat-table-footer-supporting-text-size: 14px;--mat-table-footer-supporting-text-weight: 400;--mat-table-footer-supporting-text-tracking: 0.0178571429em}html{--mat-progress-spinner-active-indicator-width: 4px;--mat-progress-spinner-size: 48px}html{--mat-progress-spinner-active-indicator-color: #3f51b5}.mat-accent{--mat-progress-spinner-active-indicator-color: #ff4081}.mat-warn{--mat-progress-spinner-active-indicator-color: #f44336}html{--mat-badge-container-shape: 50%;--mat-badge-container-size: unset;--mat-badge-small-size-container-size: unset;--mat-badge-large-size-container-size: unset;--mat-badge-legacy-container-size: 22px;--mat-badge-legacy-small-size-container-size: 16px;--mat-badge-legacy-large-size-container-size: 28px;--mat-badge-container-offset: -11px 0;--mat-badge-small-size-container-offset: -8px 0;--mat-badge-large-size-container-offset: -14px 0;--mat-badge-container-overlap-offset: -11px;--mat-badge-small-size-container-overlap-offset: -8px;--mat-badge-large-size-container-overlap-offset: -14px;--mat-badge-container-padding: 0;--mat-badge-small-size-container-padding: 0;--mat-badge-large-size-container-padding: 0}html{--mat-badge-background-color: #3f51b5;--mat-badge-text-color: white;--mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent)}.mat-badge-accent{--mat-badge-background-color: #ff4081;--mat-badge-text-color: white}.mat-badge-warn{--mat-badge-background-color: #f44336;--mat-badge-text-color: white}html{--mat-badge-text-font: Roboto, sans-serif;--mat-badge-line-height: 22px;--mat-badge-text-size: 12px;--mat-badge-text-weight: 600;--mat-badge-small-size-text-size: 9px;--mat-badge-small-size-line-height: 16px;--mat-badge-large-size-text-size: 24px;--mat-badge-large-size-line-height: 28px}html{--mat-bottom-sheet-container-shape: 4px}html{--mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);--mat-bottom-sheet-container-background-color: white}html{--mat-bottom-sheet-container-text-font: Roboto, sans-serif;--mat-bottom-sheet-container-text-line-height: 20px;--mat-bottom-sheet-container-text-size: 14px;--mat-bottom-sheet-container-text-tracking: 0.0178571429em;--mat-bottom-sheet-container-text-weight: 400}html{--mat-button-toggle-focus-state-layer-opacity: 0.12;--mat-button-toggle-hover-state-layer-opacity: 0.04;--mat-button-toggle-legacy-focus-state-layer-opacity: 1;--mat-button-toggle-legacy-height: 36px;--mat-button-toggle-legacy-shape: 2px;--mat-button-toggle-shape: 4px}html{--mat-button-toggle-background-color: white;--mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-toggle-disabled-state-background-color: white;--mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);--mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-toggle-legacy-disabled-state-background-color: white;--mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);--mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);--mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);--mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);--mat-button-toggle-text-color: rgba(0, 0, 0, 0.87)}html{--mat-button-toggle-height: 48px}html{--mat-button-toggle-label-text-font: Roboto, sans-serif;--mat-button-toggle-label-text-line-height: 24px;--mat-button-toggle-label-text-size: 16px;--mat-button-toggle-label-text-tracking: 0.03125em;--mat-button-toggle-label-text-weight: 400;--mat-button-toggle-legacy-label-text-font: Roboto, sans-serif;--mat-button-toggle-legacy-label-text-line-height: 24px;--mat-button-toggle-legacy-label-text-size: 16px;--mat-button-toggle-legacy-label-text-tracking: 0.03125em;--mat-button-toggle-legacy-label-text-weight: 400}html{--mat-datepicker-calendar-container-shape: 4px;--mat-datepicker-calendar-container-touch-shape: 4px;--mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)}html{--mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #3f51b5 20%, transparent);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #3f51b5;--mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #3f51b5 38%, transparent);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #3f51b5 12%, transparent);--mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #3f51b5 4%, transparent);--mat-datepicker-toggle-active-state-icon-color: #3f51b5;--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);--mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-container-background-color: white;--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87)}.mat-datepicker-content.mat-accent,.mat-datepicker-toggle-active.mat-accent{--mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #ff4081;--mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ff4081 38%, transparent);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ff4081 12%, transparent);--mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ff4081 4%, transparent);--mat-datepicker-toggle-active-state-icon-color: #ff4081;--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);--mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-container-background-color: white;--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87)}.mat-datepicker-content.mat-warn,.mat-datepicker-toggle-active.mat-warn{--mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f44336 20%, transparent);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #f44336;--mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f44336 38%, transparent);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f44336 12%, transparent);--mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f44336 4%, transparent);--mat-datepicker-toggle-active-state-icon-color: #f44336;--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);--mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);--mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-datepicker-calendar-container-background-color: white;--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87)}.mat-calendar-controls{--mat-icon-button-touch-target-display: none}.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}html{--mat-datepicker-calendar-text-font: Roboto, sans-serif;--mat-datepicker-calendar-text-size: 13px;--mat-datepicker-calendar-body-label-text-size: 14px;--mat-datepicker-calendar-body-label-text-weight: 500;--mat-datepicker-calendar-period-button-text-size: 14px;--mat-datepicker-calendar-period-button-text-weight: 500;--mat-datepicker-calendar-header-text-size: 11px;--mat-datepicker-calendar-header-text-weight: 400}html{--mat-divider-width: 1px}html{--mat-divider-color: rgba(0, 0, 0, 0.12)}html{--mat-expansion-container-shape: 4px;--mat-expansion-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--mat-expansion-legacy-header-indicator-display: inline-block;--mat-expansion-header-indicator-display: none}html{--mat-expansion-container-background-color: white;--mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);--mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);--mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);--mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);--mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);--mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54)}html{--mat-expansion-header-collapsed-state-height: 48px;--mat-expansion-header-expanded-state-height: 64px}html{--mat-expansion-header-text-font: Roboto, sans-serif;--mat-expansion-header-text-size: 14px;--mat-expansion-header-text-weight: 500;--mat-expansion-header-text-line-height: inherit;--mat-expansion-header-text-tracking: inherit;--mat-expansion-container-text-font: Roboto, sans-serif;--mat-expansion-container-text-line-height: 20px;--mat-expansion-container-text-size: 14px;--mat-expansion-container-text-tracking: 0.0178571429em;--mat-expansion-container-text-weight: 400}html{--mat-grid-list-tile-header-primary-text-size: 14px;--mat-grid-list-tile-header-secondary-text-size: 12px;--mat-grid-list-tile-footer-primary-text-size: 14px;--mat-grid-list-tile-footer-secondary-text-size: 12px}html{--mat-icon-color: inherit}.mat-icon.mat-primary{--mat-icon-color: #3f51b5}.mat-icon.mat-accent{--mat-icon-color: #ff4081}.mat-icon.mat-warn{--mat-icon-color: #f44336}html{--mat-sidenav-container-shape: 0;--mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);--mat-sidenav-container-width: auto}html{--mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);--mat-sidenav-container-background-color: white;--mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);--mat-sidenav-content-background-color: #fafafa;--mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);--mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6)}html{--mat-stepper-header-focus-state-layer-shape: 0;--mat-stepper-header-hover-state-layer-shape: 0}html{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #3f51b5;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #3f51b5;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #3f51b5;--mat-stepper-header-edit-state-icon-foreground-color: white;--mat-stepper-container-color: white;--mat-stepper-line-color: rgba(0, 0, 0, 0.12);--mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);--mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);--mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);--mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);--mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);--mat-stepper-header-error-state-label-text-color: #f44336;--mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);--mat-stepper-header-error-state-icon-foreground-color: #f44336;--mat-stepper-header-error-state-icon-background-color: transparent}.mat-step-header.mat-accent{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #ff4081;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #ff4081;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #ff4081;--mat-stepper-header-edit-state-icon-foreground-color: white}.mat-step-header.mat-warn{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #f44336;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #f44336;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #f44336;--mat-stepper-header-edit-state-icon-foreground-color: white}html{--mat-stepper-header-height: 72px}html{--mat-stepper-container-text-font: Roboto, sans-serif;--mat-stepper-header-label-text-font: Roboto, sans-serif;--mat-stepper-header-label-text-size: 14px;--mat-stepper-header-label-text-weight: 400;--mat-stepper-header-error-state-label-text-size: 16px;--mat-stepper-header-selected-state-label-text-size: 16px;--mat-stepper-header-selected-state-label-text-weight: 400}html{--mat-sort-arrow-color: rgba(0, 0, 0, 0.87)}html{--mat-toolbar-container-background-color: white;--mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87)}.mat-toolbar.mat-primary{--mat-toolbar-container-background-color: #3f51b5;--mat-toolbar-container-text-color: white}.mat-toolbar.mat-accent{--mat-toolbar-container-background-color: #ff4081;--mat-toolbar-container-text-color: white}.mat-toolbar.mat-warn{--mat-toolbar-container-background-color: #f44336;--mat-toolbar-container-text-color: white}html{--mat-toolbar-standard-height: 64px;--mat-toolbar-mobile-height: 56px}html{--mat-toolbar-title-text-font: Roboto, sans-serif;--mat-toolbar-title-text-line-height: 32px;--mat-toolbar-title-text-size: 20px;--mat-toolbar-title-text-tracking: 0.0125em;--mat-toolbar-title-text-weight: 500}html{--mat-tree-container-background-color: white;--mat-tree-node-text-color: rgba(0, 0, 0, 0.87)}html{--mat-tree-node-min-height: 48px}html{--mat-tree-node-text-font: Roboto, sans-serif;--mat-tree-node-text-size: 14px;--mat-tree-node-text-weight: 400}html{--mat-timepicker-container-shape: 4px;--mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-timepicker-container-background-color: white}.mat-h1,.mat-headline-5,.mat-typography .mat-h1,.mat-typography .mat-headline-5,.mat-typography h1{font:400 24px/32px Roboto, sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-headline-6,.mat-typography .mat-h2,.mat-typography .mat-headline-6,.mat-typography h2{font:500 20px/32px Roboto, sans-serif;letter-spacing:.0125em;margin:0 0 16px}.mat-h3,.mat-subtitle-1,.mat-typography .mat-h3,.mat-typography .mat-subtitle-1,.mat-typography h3{font:400 16px/28px Roboto, sans-serif;letter-spacing:.009375em;margin:0 0 16px}.mat-h4,.mat-body-1,.mat-typography .mat-h4,.mat-typography .mat-body-1,.mat-typography h4{font:400 16px/24px Roboto, sans-serif;letter-spacing:.03125em;margin:0 0 16px}.mat-h5,.mat-typography .mat-h5,.mat-typography h5{font:400 calc(14px*.83)/20px Roboto, sans-serif;margin:0 0 12px}.mat-h6,.mat-typography .mat-h6,.mat-typography h6{font:400 calc(14px*.67)/20px Roboto, sans-serif;margin:0 0 12px}.mat-body-strong,.mat-subtitle-2,.mat-typography .mat-body-strong,.mat-typography .mat-subtitle-2{font:500 14px/22px Roboto, sans-serif;letter-spacing:.0071428571em}.mat-body,.mat-body-2,.mat-typography .mat-body,.mat-typography .mat-body-2,.mat-typography{font:400 14px/20px Roboto, sans-serif;letter-spacing:.0178571429em}.mat-body p,.mat-body-2 p,.mat-typography .mat-body p,.mat-typography .mat-body-2 p,.mat-typography p{margin:0 0 12px}.mat-small,.mat-caption,.mat-typography .mat-small,.mat-typography .mat-caption{font:400 12px/20px Roboto, sans-serif;letter-spacing:.0333333333em}.mat-headline-1,.mat-typography .mat-headline-1{font:300 96px/96px Roboto, sans-serif;letter-spacing:-0.015625em;margin:0 0 56px}.mat-headline-2,.mat-typography .mat-headline-2{font:300 60px/60px Roboto, sans-serif;letter-spacing:-.0083333333em;margin:0 0 64px}.mat-headline-3,.mat-typography .mat-headline-3{font:400 48px/50px Roboto, sans-serif;letter-spacing:normal;margin:0 0 64px}.mat-headline-4,.mat-typography .mat-headline-4{font:400 34px/40px Roboto, sans-serif;letter-spacing:.0073529412em;margin:0 0 64px}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss?ngGlobalStyle (2) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

.modern-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
  overflow: hidden;
}
.modern-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.modern-card {
  margin-bottom: 15px;
}
.modern-card .card-header {
  background-color: #4885ED;
  color: white;
  padding: 12px 15px;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.modern-card .card-header i {
  font-size: 1.125rem;
}
.modern-card .card-body {
  padding: 15px;
}

.modern-page-header {
  background: #ffffff;
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 15px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.modern-page-header h4 {
  color: #2c3e50;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modern-page-header h4 i {
  color: #4885ED;
}
.modern-page-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}
.modern-page-header .breadcrumb a {
  color: #4885ED;
  text-decoration: none;
  font-weight: 500;
}
.modern-page-header .breadcrumb a:hover {
  color: #5A95F5;
  text-decoration: underline;
}
.modern-page-header .breadcrumb .breadcrumb-item {
  color: #6c757d;
}
.modern-page-header .breadcrumb .breadcrumb-item::before {
  color: #6c757d;
}
.modern-page-header .breadcrumb .breadcrumb-item.active {
  color: #6c757d;
  font-weight: 500;
}
.modern-page-header .header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.modern-btn {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.modern-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(72, 133, 237, 0.3);
}
.modern-btn:active {
  transform: translateY(0);
}
.modern-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.modern-btn.btn-primary {
  background-color: #4885ED;
  color: white;
}
.modern-btn.btn-primary:hover:not(:disabled) {
  background-color: #5A95F5;
}
.modern-btn.btn-success {
  background-color: #28a745;
  color: white;
}
.modern-btn.btn-success:hover:not(:disabled) {
  background-color: rgb(32.115942029, 134.084057971, 55.4);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}
.modern-btn.btn-warning {
  background-color: #ff9800;
  color: white;
}
.modern-btn.btn-warning:hover:not(:disabled) {
  background-color: rgb(214.2, 127.68, 0);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}
.modern-btn.btn-info {
  background-color: #17a2b8;
  color: white;
}
.modern-btn.btn-info:hover:not(:disabled) {
  background-color: rgb(18.4666666667, 130.0695652174, 147.7333333333);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}
.modern-btn.btn-danger {
  background-color: #dc3545;
  color: white;
}
.modern-btn.btn-danger:hover:not(:disabled) {
  background-color: rgb(197.9088607595, 34.2911392405, 49.9670886076);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
.modern-btn.btn-secondary {
  background-color: #6c757d;
  color: white;
}
.modern-btn.btn-secondary:hover:not(:disabled) {
  background-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
}
.modern-btn.btn-outline-primary {
  background-color: transparent;
  color: #4885ED;
  border: 2px solid #4885ED;
}
.modern-btn.btn-outline-primary:hover:not(:disabled) {
  background-color: #4885ED;
  color: white;
}
.modern-btn.btn-outline-secondary {
  background-color: transparent;
  color: #6c757d;
  border: 2px solid #ced4da;
}
.modern-btn.btn-outline-secondary:hover:not(:disabled) {
  background-color: #e9ecef;
  border-color: #6c757d;
  color: #343a40;
}

.modern-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.modern-badge.badge-success {
  background-color: #28a745;
  color: white;
}
.modern-badge.badge-warning {
  background-color: #ff9800;
  color: white;
}
.modern-badge.badge-danger {
  background-color: #dc3545;
  color: white;
}
.modern-badge.badge-info {
  background-color: #17a2b8;
  color: white;
}
.modern-badge.badge-primary {
  background-color: #4885ED;
  color: white;
}
.modern-badge.badge-secondary {
  background-color: #6c757d;
  color: white;
}

.badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.modern-table,
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.modern-table thead,
.table thead {
  background-color: #f8f9fa;
}
.modern-table thead th,
.table thead th {
  padding: 12px 15px;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  color: #000000;
  border: none;
  border-bottom: 2px solid #dee2e6;
  text-align: left;
  white-space: nowrap;
}
.modern-table tbody tr,
.table tbody tr {
  transition: all 0.15s ease;
  border-bottom: 1px solid #e9ecef;
}
.modern-table tbody tr:hover,
.table tbody tr:hover {
  background-color: rgba(72, 133, 237, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.modern-table tbody tr td,
.table tbody tr td {
  padding: 12px 15px;
  vertical-align: middle;
  border: none;
  color: #000000;
}

.table-responsive {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.stats-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stats-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.stats-card .stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  color: white !important;
}
.stats-card .stat-content {
  flex: 1;
}
.stats-card .stat-content h3 {
  margin: 0 0 5px 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #000000;
}
.stats-card .stat-content p {
  margin: 0;
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 500;
}
.stats-card {
  transition: all 0.2s ease !important;
}
.stats-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.stats-card .stat-icon {
  background-color: transparent !important;
  border: 2px solid white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  width: 48px !important;
  height: 48px !important;
}
.stats-card .stat-icon[data-color=primary] {
  color: #4885ED !important;
}
.stats-card .stat-icon[data-color=primary] i,
.stats-card .stat-icon[data-color=primary] span {
  color: #4885ED !important;
}
.stats-card .stat-icon[data-color=success] {
  color: #28a745 !important;
}
.stats-card .stat-icon[data-color=success] i,
.stats-card .stat-icon[data-color=success] span {
  color: #28a745 !important;
}
.stats-card .stat-icon[data-color=warning] {
  color: #ff9800 !important;
}
.stats-card .stat-icon[data-color=warning] i,
.stats-card .stat-icon[data-color=warning] span {
  color: #ff9800 !important;
}
.stats-card .stat-icon[data-color=danger] {
  color: #dc3545 !important;
}
.stats-card .stat-icon[data-color=danger] i,
.stats-card .stat-icon[data-color=danger] span {
  color: #dc3545 !important;
}
.stats-card .stat-icon[data-color=info] {
  color: #17a2b8 !important;
}
.stats-card .stat-icon[data-color=info] i,
.stats-card .stat-icon[data-color=info] span {
  color: #17a2b8 !important;
}
.stats-card .stat-icon[data-color=secondary] {
  color: #6c757d !important;
}
.stats-card .stat-icon[data-color=secondary] i,
.stats-card .stat-icon[data-color=secondary] span {
  color: #6c757d !important;
}
.stats-card .stat-icon.bg-primary {
  background-color: #4885ed !important;
  color: white !important;
}
.stats-card .stat-icon.bg-primary i,
.stats-card .stat-icon.bg-primary span {
  color: white !important;
}
.stats-card .stat-icon.bg-success {
  background-color: #28a745 !important;
  color: white !important;
}
.stats-card .stat-icon.bg-success i,
.stats-card .stat-icon.bg-success span {
  color: white !important;
}
.stats-card .stat-icon.bg-warning {
  background-color: #ff9800 !important;
  color: white !important;
}
.stats-card .stat-icon.bg-warning i,
.stats-card .stat-icon.bg-warning span {
  color: white !important;
}
.stats-card .stat-icon.bg-danger {
  background-color: #dc3545 !important;
  color: white !important;
}
.stats-card .stat-icon.bg-danger i,
.stats-card .stat-icon.bg-danger span {
  color: white !important;
}
.stats-card .stat-icon.bg-info {
  background-color: #17a2b8 !important;
  color: white !important;
}
.stats-card .stat-icon.bg-info i,
.stats-card .stat-icon.bg-info span {
  color: white !important;
}
.stats-card .stat-icon i,
.stats-card .stat-icon i.fa,
.stats-card .stat-icon .icon-text,
.stats-card .stat-icon span {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.stats-card[has-color=primary] {
  background: rgba(72, 133, 237, 0.08) !important;
}
.stats-card[has-color=success] {
  background: rgba(40, 167, 69, 0.08) !important;
}
.stats-card[has-color=warning] {
  background: rgba(255, 152, 0, 0.08) !important;
}
.stats-card[has-color=danger] {
  background: rgba(220, 53, 69, 0.08) !important;
}
.stats-card[has-color=info] {
  background: rgba(23, 162, 184, 0.08) !important;
}
.stats-card .stats-change {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.stats-card .stats-change.positive {
  color: #28a745;
}
.stats-card .stats-change.negative {
  color: #dc3545;
}

.modern-form-control.ng-select, .modern-form-control[ng-select], .modern-form-control:is(ng-select),
.form-control.ng-select,
.form-control[ng-select],
.form-control:is(ng-select),
.form-select.ng-select,
.form-select[ng-select],
.form-select:is(ng-select),
input[type=text].ng-select,
input[type=text][ng-select],
input[type=text]:is(ng-select),
input[type=email].ng-select,
input[type=email][ng-select],
input[type=email]:is(ng-select),
input[type=number].ng-select,
input[type=number][ng-select],
input[type=number]:is(ng-select),
input[type=date].ng-select,
input[type=date][ng-select],
input[type=date]:is(ng-select),
input[type=password].ng-select,
input[type=password][ng-select],
input[type=password]:is(ng-select),
textarea.ng-select,
textarea[ng-select],
textarea:is(ng-select),
select.ng-select,
select[ng-select],
select:is(ng-select) {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  height: auto !important;
}
.modern-form-control:not(.ng-select):not(ng-select),
.form-control:not(.ng-select):not(ng-select),
.form-select:not(.ng-select):not(ng-select),
input[type=text]:not(.ng-select):not(ng-select),
input[type=email]:not(.ng-select):not(ng-select),
input[type=number]:not(.ng-select):not(ng-select),
input[type=date]:not(.ng-select):not(ng-select),
input[type=password]:not(.ng-select):not(ng-select),
textarea:not(.ng-select):not(ng-select),
select:not(.ng-select):not(ng-select) {
  border-radius: 8px;
  border: 1px solid #ced4da;
  padding: 10px 15px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}
.modern-form-control:not(.ng-select):not(ng-select):focus,
.form-control:not(.ng-select):not(ng-select):focus,
.form-select:not(.ng-select):not(ng-select):focus,
input[type=text]:not(.ng-select):not(ng-select):focus,
input[type=email]:not(.ng-select):not(ng-select):focus,
input[type=number]:not(.ng-select):not(ng-select):focus,
input[type=date]:not(.ng-select):not(ng-select):focus,
input[type=password]:not(.ng-select):not(ng-select):focus,
textarea:not(.ng-select):not(ng-select):focus,
select:not(.ng-select):not(ng-select):focus {
  border-color: #4885ED;
  box-shadow: 0 0 0 3px #EBF2FE;
  outline: none;
}
.modern-form-control:not(.ng-select):not(ng-select):hover:not(:focus),
.form-control:not(.ng-select):not(ng-select):hover:not(:focus),
.form-select:not(.ng-select):not(ng-select):hover:not(:focus),
input[type=text]:not(.ng-select):not(ng-select):hover:not(:focus),
input[type=email]:not(.ng-select):not(ng-select):hover:not(:focus),
input[type=number]:not(.ng-select):not(ng-select):hover:not(:focus),
input[type=date]:not(.ng-select):not(ng-select):hover:not(:focus),
input[type=password]:not(.ng-select):not(ng-select):hover:not(:focus),
textarea:not(.ng-select):not(ng-select):hover:not(:focus),
select:not(.ng-select):not(ng-select):hover:not(:focus) {
  border-color: rgb(176.9418604651, 186.5, 196.0581395349);
}

.modern-form-label,
.form-label {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 0.875rem;
  display: block;
}

.filter-card,
.filter-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #e9ecef;
}
.filter-card .filter-title,
.filter-section .filter-title {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}
.filter-card .filter-title i,
.filter-section .filter-title i {
  color: #4885ED;
  font-size: 1.125rem;
}

.quick-access-banner {
  background: #f8f9fa;
  border-left: 4px solid #4885ED;
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 15px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  animation: slideIn 0.3s ease-out;
}
.quick-access-banner .banner-title {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
}
.quick-access-banner .banner-title i {
  color: #4885ED;
  font-size: 1.25rem;
}
.quick-access-banner .banner-description {
  color: #6c757d;
  font-size: 0.875rem;
  margin-bottom: 15px;
  font-weight: 500;
}

.action-menu-dropdown {
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  padding: 0.5rem;
  min-width: 180px;
}
.action-menu-dropdown .dropdown-item {
  border-radius: 4px;
  padding: 0.625rem 0.875rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.action-menu-dropdown .dropdown-item:hover {
  background: rgba(72, 133, 237, 0.05);
  color: #4885ED;
}
.action-menu-dropdown .dropdown-item i {
  width: 18px;
  text-align: center;
}

.modern-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(72, 133, 237, 0.2);
  border-radius: 50%;
  border-top-color: #4885ED;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: #6c757d;
}
.empty-state .empty-icon {
  font-size: 3rem;
  color: rgb(161.1158798283, 167.8755364807, 173.8841201717);
  margin-bottom: 1rem;
}
.empty-state .empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}
.empty-state .empty-description {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .modern-page-header {
    padding: 12px 15px;
  }
  .modern-page-header h4 {
    font-size: 1.25rem;
  }
  .modern-page-header .header-actions {
    margin-top: 10px;
  }
  .modern-page-header .header-actions .modern-btn {
    font-size: 0.75rem;
    padding: 8px 15px;
  }
  .modern-card {
    margin-bottom: 12px;
  }
  .stats-card {
    margin-bottom: 10px;
  }
  .modern-btn {
    width: 100%;
    margin-bottom: 8px;
    justify-content: center;
  }
  .quick-access-banner {
    padding: 12px 15px;
  }
  .quick-access-banner .banner-title {
    font-size: 1rem;
  }
  .table-responsive {
    border-radius: 8px;
  }
  .row.g-3 .col-md-3,
  .row.g-3 .col-md-2,
  .row.g-3 .col-md-4,
  .row.g-3 .col-md-6 {
    margin-bottom: 10px;
  }
}
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.modal-header {
  background-color: #4885ED !important;
  color: white !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 15px 20px;
  border-bottom: none;
}
.modal-header .modal-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white !important;
}
.modal-header .modal-title i,
.modal-header .modal-title .fas,
.modal-header .modal-title .fa,
.modal-header .modal-title span {
  color: white !important;
}
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
  color: white !important;
  margin-bottom: 0;
}
.modal-header .btn-close {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}
.empty-state .empty-icon {
  font-size: 4rem;
  color: #ced4da;
  margin-bottom: 15px;
}
.empty-state .empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
}
.empty-state .empty-description {
  font-size: 0.875rem;
  margin-bottom: 20px;
  color: #6c757d;
}

.modern-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid #EBF2FE;
  border-radius: 50%;
  border-top-color: #4885ED;
  animation: spin 1s ease-in-out infinite;
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

.btn-group-sm .btn {
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 6px;
}

.modern-tabs {
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 1.5rem;
}
.modern-tabs .nav-link {
  border: none;
  border-radius: 4px 4px 0 0;
  padding: 0.75rem 1.25rem;
  color: #6c757d;
  font-weight: 600;
  transition: all 0.2s ease;
  margin-right: 0.25rem;
  font-size: 0.875rem;
}
.modern-tabs .nav-link:hover {
  color: #4885ED;
  background: rgba(102, 126, 234, 0.05);
}
.modern-tabs .nav-link.active {
  color: #4885ED;
  background: white;
  border-bottom: 2px solid #4885ED;
}

.pos-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  background-color: var(--app-modal-overlay-bg, rgba(15, 23, 42, 0.6)) !important;
  backdrop-filter: blur(var(--app-modal-blur, 12px)) !important;
  -webkit-backdrop-filter: blur(var(--app-modal-blur, 12px)) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 100px 2rem 40px 2rem !important;
  overflow: hidden !important;
}
@media (max-width: 768px) {
  .pos-modal-overlay {
    padding: 80px 1rem 20px 1rem !important;
  }
}

.pos-modern-modal {
  background: var(--app-modal-bg, #ffffff) !important;
  width: 100% !important;
  max-width: 420px !important;
  max-height: 100% !important;
  border-radius: var(--app-modal-radius, 1.25rem) !important;
  box-shadow: var(--app-modal-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: posSlideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
[dir=rtl] .pos-modern-modal {
  max-width: 420px !important;
  margin: 0 auto !important;
}
[dir=rtl] .pos-modern-modal.modal-lg, [dir=rtl] .pos-modern-modal.pos-modal-large {
  max-width: 900px !important;
}
[dir=rtl] .pos-modern-modal.modal-md {
  max-width: 600px !important;
}
.pos-modern-modal.modal-lg, .pos-modern-modal.pos-modal-large {
  max-width: 900px !important;
}
.pos-modern-modal.modal-md {
  max-width: 600px !important;
}
.pos-modern-modal > form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}
.pos-modern-modal .text-uppercase {
  text-transform: capitalize !important;
  letter-spacing: normal !important;
}
.pos-modern-modal.pos-modal-large {
  max-width: 820px !important;
}
@media (max-width: 768px) {
  .pos-modern-modal {
    width: 92vw !important;
    max-width: 92vw !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: var(--app-modal-radius) !important;
    margin: auto !important;
  }
  .pos-modern-modal .pos-modern-header {
    padding: 1rem !important;
    min-height: 60px !important;
  }
  .pos-modern-modal .pos-modern-body {
    height: auto !important;
  }
}

.pos-modern-header {
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  gap: 1rem !important;
  min-height: 70px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 576px) {
  .pos-modern-header {
    padding: 1rem !important;
    gap: 0.75rem !important;
    min-height: 60px !important;
  }
}
.pos-modern-header .header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 576px) {
  .pos-modern-header .header-left {
    gap: 0.75rem;
  }
}
.pos-modern-header .header-left .modern-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5);
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .pos-modern-header .header-left .modern-icon-wrapper {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: 8px;
  }
}
.pos-modern-header .header-left .modern-icon-wrapper.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.5);
}
.pos-modern-header .header-left .modern-icon-wrapper.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.5);
}
.pos-modern-header .header-left .modern-icon-wrapper.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.5);
}
.pos-modern-header .header-left .modern-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pos-modern-header .header-left .modern-titles h3 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 576px) {
  .pos-modern-header .header-left .modern-titles h3 {
    font-size: 0.95rem !important;
  }
}
.pos-modern-header .header-left .modern-titles p,
.pos-modern-header .header-left .modern-titles .subtitle {
  display: flex !important;
  align-items: center !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  letter-spacing: 0.05em !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 576px) {
  .pos-modern-header .header-left .modern-titles p,
  .pos-modern-header .header-left .modern-titles .subtitle {
    font-size: 0.65rem !important;
  }
}
.pos-modern-header {
  /* Standard Header Right Actions */
}
.pos-modern-header .header-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
@media (max-width: 576px) {
  .pos-modern-header .header-right {
    gap: 0.5rem !important;
  }
}

/* Specific button styles for modern modals */
.modern-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  white-space: nowrap;
}
@media (max-width: 576px) {
  .modern-btn-icon {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
    gap: 0.35rem !important;
  }
  .modern-btn-icon span {
    display: none;
  }
}
.modern-btn-icon i {
  font-size: 1.1rem !important;
  color: #64748b !important;
}
@media (max-width: 576px) {
  .modern-btn-icon i {
    font-size: 1rem !important;
  }
}
.modern-btn-icon:hover:not(:disabled) {
  background: #f8fafc !important;
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  transform: translateY(-1px) !important;
}
.modern-btn-icon:hover:not(:disabled) i {
  color: #3b82f6 !important;
}
.modern-btn-icon.btn-print:hover:not(:disabled) {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}
.modern-btn-icon.btn-whatsapp:hover:not(:disabled) {
  border-color: #10b981 !important;
  color: #10b981 !important;
}
.modern-btn-icon.btn-email:hover:not(:disabled) {
  border-color: #8b5cf6 !important;
  color: #8b5cf6 !important;
}
.modern-btn-icon:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.modern-btn-close {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid #fee2e2 !important;
  background: #fef2f2 !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin-left: 0.25rem !important;
}
@media (max-width: 576px) {
  .modern-btn-close {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }
}
.modern-btn-close i {
  color: #ef4444 !important;
  font-size: 1.25rem;
}
@media (max-width: 576px) {
  .modern-btn-close i {
    font-size: 1.1rem;
  }
}
.modern-btn-close:hover {
  background: #fee2e2 !important;
  transform: rotate(90deg);
}

.pos-modern-body {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  background: #f8fafc;
  padding: 1.5rem;
  position: relative;
}
.pos-modern-body::-webkit-scrollbar {
  width: 8px;
}
.pos-modern-body::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
  margin: 8px 0;
}
.pos-modern-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.pos-modern-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.pos-modern-body::before {
  content: "";
  display: block;
  height: 12px;
  width: 100%;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .pos-modern-body {
    padding: 1rem;
  }
}
.pos-modern-body .row {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
.pos-modern-body .row > [class*=col-] {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.modern-icon-wrapper {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
@media (max-width: 480px) {
  .modern-icon-wrapper {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    border-radius: 8px;
  }
}

.pos-modern-footer {
  padding: 1.25rem 1.5rem;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
}
.pos-modern-footer button {
  margin: 0 !important;
}
[dir=rtl] .pos-modern-footer {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
}
[dir=rtl] .pos-modern-footer button {
  margin: 0 !important;
}
@media (max-width: 576px) {
  .pos-modern-footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    gap: 0.5rem !important;
  }
  .pos-modern-footer button {
    width: auto !important;
    margin: 0 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
    justify-content: center;
  }
}

@keyframes posFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes posSlideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Helper for key-value info rows in modals */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}
@media (max-width: 576px) {
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .info-row span:first-child {
    font-size: 0.75rem;
  }
  .info-row span:last-child {
    width: 100%;
    text-align: left !important;
  }
}

/* ============================================ */
/* MODERN PURCHASE DESIGN SYSTEM - Global Styles */
/* ============================================ */
/*
   NG-SELECT GLOBAL MODERNIZATION & REDUNDANCY FIX
   Eliminates "Double Border", "Double Arrows", and shifting issues globally.
   Using body-prefixed selectors for maximum specificity to override local module styles.
*/
body ng-select,
body [ng-select],
body .ng-select,
body .ng-select.form-control,
body .ng-select.form-select,
html body ng-select,
html body .ng-select {
  border: 0 none transparent !important;
  border-width: 0 !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  /* CRITICAL: Removes Bootstrap's background arrows */
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
}

/* Fix for the internal container that actually holds the value */
.ng-select .ng-select-container {
  border: 1px solid #ced4da !important;
  /* Standard Border */
  border-radius: 8px !important;
  /* Matches Modern Design System */
  min-height: 42px !important;
  /* Consistent Height */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

/* Hover State - Subtle darkening */
.ng-select .ng-select-container:hover {
  border-color: #b1b9c1 !important;
}

/* Focused State - Matches Project Primary Blue Glow */
.ng-select.ng-select-focused .ng-select-container {
  border-color: #4885ed !important;
  box-shadow: 0 0 0 3px rgba(72, 133, 237, 0.15) !important;
}

/* Ensure the text is vertically centered and correctly spaced */
.ng-select .ng-select-container .ng-value-container {
  padding-left: 12px !important;
  padding-right: 8px !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Ng-select Arrow fix - Ensure it's single and attractive */
.ng-select .ng-arrow-wrapper {
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
}

/* Standardize single-select height */
.ng-select.ng-select-single .ng-select-container {
  height: 42px !important;
}

/* Premium Dropdown Panel */
.ng-dropdown-panel {
  border: 1px solid #ced4da !important;
  border-radius: 8px !important;
  margin-top: 5px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  z-index: 10000 !important;
  background: white !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  padding: 10px 15px !important;
  font-size: 0.875rem !important;
  transition: all 0.15s ease !important;
  color: #333 !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
  background-color: rgba(72, 133, 237, 0.08) !important;
  color: #4885ed !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
  background-color: #4885ed !important;
  color: #fff !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .ng-select .ng-select-container {
    min-height: 40px !important;
  }
}
/* Global Loader Fix - High Specificity */
div#global-loader,
#global-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  z-index: -1 !important;
}

/* Fix for Preloader Shifting (Right-side issue) */
/* Ensure the wrapper does not create a new stacking context for fixed elements */
.app,
app-root {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* Angular Material Theme */
/* Modern Action Buttons - Global Shared Component */
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
.modern-actions-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: 100%;
}

.modern-action-btn {
  position: relative;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  padding: 0;
  box-shadow: none;
  flex-shrink: 0;
  overflow: hidden;
}
.modern-action-btn i {
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
  display: inline-block;
  width: 14px;
  max-width: 14px;
  text-align: center;
  line-height: 1;
}
.modern-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  /* Ensure hovered button is on top */
}
.modern-action-btn:active {
  transform: translateY(0);
}
.modern-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.modern-action-btn.modern-action-view {
  border-color: #3B82F6;
  color: #3B82F6;
}
.modern-action-btn.modern-action-view:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: #2563EB;
  color: #2563EB;
}
.modern-action-btn.modern-action-view:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.modern-action-btn.modern-action-print {
  border-color: #06B6D4;
  color: #06B6D4;
}
.modern-action-btn.modern-action-print:hover {
  background: rgba(6, 182, 212, 0.05);
  border-color: #0891B2;
  color: #0891B2;
}
.modern-action-btn.modern-action-print:focus {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.modern-action-btn.modern-action-download {
  border-color: #10B981;
  color: #10B981;
}
.modern-action-btn.modern-action-download:hover {
  background: rgba(16, 185, 129, 0.05);
  border-color: #059669;
  color: #059669;
}
.modern-action-btn.modern-action-download:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.modern-action-btn.modern-action-share {
  border-color: #8B5CF6;
  color: #8B5CF6;
}
.modern-action-btn.modern-action-share:hover {
  background: rgba(139, 92, 246, 0.05);
  border-color: #7C3AED;
  color: #7C3AED;
}
.modern-action-btn.modern-action-share:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.modern-action-btn.modern-action-edit {
  border-color: #F59E0B;
  color: #F59E0B;
}
.modern-action-btn.modern-action-edit:hover {
  background: rgba(245, 158, 11, 0.05);
  border-color: #D97706;
  color: #D97706;
}
.modern-action-btn.modern-action-edit:focus {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.modern-action-btn.modern-action-delete {
  border-color: #EF4444;
  color: #EF4444;
}
.modern-action-btn.modern-action-delete:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: #DC2626;
  color: #DC2626;
}
.modern-action-btn.modern-action-delete:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.modern-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.modern-action-btn:disabled:hover {
  transform: none;
  box-shadow: none;
  background: white;
}

.modern-action-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}
.modern-action-toggle:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.modern-action-toggle:active {
  transform: translateY(0);
}
.modern-action-toggle i {
  font-size: 14px;
}

.modern-action-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 1000;
  min-width: 160px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 6px;
  display: none;
}
.modern-action-menu.show {
  display: block;
  animation: dropdownFadeIn 0.2s ease-out;
}
.modern-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  border-radius: 6px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease;
  gap: 10px;
}
.modern-action-menu .dropdown-item i {
  width: 16px;
  text-align: center;
  font-size: 14px;
}
.modern-action-menu .dropdown-item:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.modern-action-menu .dropdown-item.text-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}
.modern-action-menu .dropdown-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 0;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
table td:has(.modern-actions-wrapper),
table th:has(.modern-actions-wrapper) {
  min-width: 200px !important;
  width: auto !important;
}

@media (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
  .modern-actions-wrapper {
    gap: 12px !important; /* Larger gap for easy tapping */
    flex-wrap: nowrap !important; /* Try to keep them ordered horizontally on larger tablets */
  }
  .modern-action-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  .modern-action-btn i {
    width: 18px !important;
    max-width: 18px !important;
    font-size: 18px !important;
  }
  /* Dropdown Action Toggle explicitly expanded */
  .modern-action-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
  .modern-action-toggle i {
    font-size: 18px !important;
  }
  table td:has(.modern-actions-wrapper),
  table th:has(.modern-actions-wrapper) {
    min-width: 260px !important;
  }
}
@media (max-width: 991px) {
  .modern-actions-wrapper {
    gap: 6px;
    flex-wrap: wrap;
  }
  .modern-action-btn {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 28px;
    font-size: 13px;
    padding: 0;
  }
  table td:has(.modern-actions-wrapper),
  table th:has(.modern-actions-wrapper) {
    min-width: 180px !important;
  }
}
@media (max-width: 768px) {
  .modern-actions-wrapper {
    gap: 4px;
    flex-wrap: wrap;
  }
  .modern-action-btn {
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    height: 26px;
    font-size: 12px;
    padding: 0;
    border-width: 1px;
  }
  table td:has(.modern-actions-wrapper),
  table th:has(.modern-actions-wrapper) {
    min-width: 160px !important;
  }
}
@media (max-width: 576px) {
  .modern-actions-wrapper {
    gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .modern-action-btn {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    font-size: 10px;
    padding: 0;
    border-width: 1px;
    border-radius: 4px;
  }
  table td:has(.modern-actions-wrapper),
  table th:has(.modern-actions-wrapper) {
    min-width: 140px !important;
  }
}
@media (max-width: 480px) {
  .modern-actions-wrapper {
    gap: 2px;
  }
  .modern-action-btn {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    font-size: 9px;
    padding: 0;
  }
  table td:has(.modern-actions-wrapper),
  table th:has(.modern-actions-wrapper) {
    min-width: 120px !important;
  }
}
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
/* ==========================================================================
   MODERN GLOBAL MODAL SYSTEM
   Standardizes naming and design for all popups in the application.
   ========================================================================== */
:root {
  --app-modal-bg: #ffffff;
  --app-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --app-modal-radius: 1.25rem;
  --app-modal-header-bg: #ffffff;
  --app-modal-border: #e2e8f0;
  --app-modal-overlay-bg: rgba(15, 23, 42, 0.6);
  --app-modal-blur: 12px;
}

/* 1. GLOBAL OVERLAYS (FOR CUSTOM CONSTRUCTS) */
.app-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: var(--app-modal-overlay-bg) !important;
  backdrop-filter: blur(var(--app-modal-blur)) !important;
  -webkit-backdrop-filter: blur(var(--app-modal-blur)) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  overflow: hidden !important;
}
@media (max-width: 768px) {
  .app-modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
  }
}

.app-modal-container {
  background: #ffffff !important;
  border-radius: var(--app-modal-radius) !important;
  box-shadow: var(--app-modal-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 10 !important;
  max-width: 500px !important;
  width: 92% !important;
  margin: auto !important;
}
.app-modal-container.modal-large {
  max-width: 820px !important;
}

.modal-content-wrapper {
  background: #ffffff !important;
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  overflow-y: visible !important;
}
@media (max-width: 576px) {
  .modal-content-wrapper {
    padding: 1.5rem !important;
  }
}

/* Adjust for global header pages */
@media (max-width: 768px) {
  header.app-navbar ~ main .app-modal-overlay,
  header.app-navbar + app-sidebar-menu + main .app-modal-overlay {
    padding-top: 70px !important;
  }
}

/* 2. GLOBAL BOOTSTRAP OVERRIDES (MODERNIZES 300+ MODALS INSTANTLY) */
.modal-backdrop.show {
  background-color: var(--app-modal-overlay-bg) !important;
  backdrop-filter: blur(var(--app-modal-blur)) !important;
  -webkit-backdrop-filter: blur(var(--app-modal-blur)) !important;
  opacity: 1 !important;
}

.modal-content {
  border: none !important;
  border-radius: var(--app-modal-radius) !important;
  box-shadow: var(--app-modal-shadow) !important;
  background: var(--app-modal-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
  overflow: hidden !important;
}

.modal-body {
  overflow-y: auto !important;
  padding: 1.5rem !important;
  flex: 1 1 auto !important;
}
@media (max-width: 576px) {
  .modal-body {
    padding: 1rem !important;
  }
}

.text-uppercase {
  text-transform: capitalize !important;
  letter-spacing: normal !important;
}

.modal-header {
  border-bottom: 1px solid var(--app-modal-border) !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--app-modal-header-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-height: 70px !important;
  flex-shrink: 0 !important;
}
.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
  margin: 0 !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  font-size: 1.15rem !important;
}
@media (max-width: 576px) {
  .modal-header {
    padding: 1rem !important;
    min-height: 60px !important;
  }
}

.modal-footer {
  border-top: 1px solid var(--app-modal-border) !important;
  padding: 1rem 1.5rem !important;
  background: var(--app-modal-header-bg) !important;
  gap: 0.75rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
}
.modal-footer > * {
  margin: 0 !important;
}
.modal-footer .btn + .btn {
  margin-left: 0 !important;
}
@media (max-width: 576px) {
  .modal-footer {
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
  }
  .modal-footer .btn {
    width: auto !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
}

/* Global fix: ensure pos-modern-footer buttons have spacing */
.pos-modern-footer > * {
  margin: 0 !important;
}

.pos-modern-footer .btn + .btn {
  margin-left: 0 !important;
}

@media (max-width: 768px) {
  .modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 1rem) !important;
    margin: auto !important;
    padding: 10px !important;
  }
}

/* Mobile sizing consistency */
@media (max-width: 768px) {
  .modal-dialog,
  .app-modal-container {
    width: 92vw !important;
    max-width: 92vw !important;
    margin: auto !important;
  }
  .modal-content {
    max-height: 85vh !important;
  }
}
/* Ensure modal dialog centered doesn't push to top */
.modal-dialog-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100% - 3.5rem) !important;
}
@media (max-width: 576px) {
  .modal-dialog-centered {
    min-height: calc(100% - 1rem) !important;
  }
}

/* 3. SHARED UTILITIES FOR HEADERS */
.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  min-width: 0 !important;
}

.modern-titles {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.modern-titles h3,
.modern-titles .main-title {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}
.modern-titles p,
.modern-titles .subtitle {
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-transform: capitalize !important;
}

.modern-icon-wrapper {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4) !important;
  flex-shrink: 0 !important;
}
@media (max-width: 576px) {
  .modern-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
}
.modern-icon-wrapper.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.4) !important;
}
.modern-icon-wrapper.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.4) !important;
}
.modern-icon-wrapper.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.4) !important;
}
.modern-icon-wrapper.purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
  box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.4) !important;
}

.modern-btn-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.modern-btn-close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: rotate(90deg) !important;
}

/* 5. ACTION BUTTONS & ACTIONS BAR */
.modal-actions {
  display: flex !important;
  gap: 1rem !important;
  margin-top: auto !important;
  padding-top: 1rem !important;
}
@media (max-width: 576px) {
  .modal-actions {
    flex-direction: column-reverse !important;
    gap: 0.75rem !important;
  }
}

.modal-btn {
  flex: 1 !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  gap: 0.5rem !important;
}
.modal-btn.btn-cancel {
  background: #f1f5f9 !important;
  color: #475569 !important;
}
.modal-btn.btn-cancel:hover {
  background: #e2e8f0 !important;
  transform: translateY(-1px) !important;
}
.modal-btn.btn-confirm {
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.modal-btn.btn-confirm:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15) !important;
  filter: brightness(1.1) !important;
}
.modal-btn.btn-confirm.danger {
  background: #ef4444 !important;
}
.modal-btn.btn-confirm.success {
  background: #10b981 !important;
}
.modal-btn.btn-confirm.warning {
  background: #f59e0b !important;
}
.modal-btn.btn-confirm.info {
  background: #3b82f6 !important;
}

/* ============================================ */
/* MODERN COLORFUL HEADER ICONS */
/* ============================================ */
/* ============================================ */
/* MODERN HEADER DESIGN & SIDEBAR ALIGNMENT     */
/* ============================================ */
/* Ensure the header respects the sidebar width and has proper styling */
header.app-navbar {
  position: fixed !important;
  top: 0 !important;
  height: 60px !important;
  /* Slightly more compact header */
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-bottom: 1px solid rgba(237, 242, 249, 0.7) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04) !important;
  z-index: 1200 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: auto !important;
}

/* LTR Desktop Positioning */
html:not([dir=rtl]) header.app-navbar {
  left: 250px !important;
  /* Matches sidebar width */
  right: 0 !important;
  width: calc(100% - 250px) !important;
}

/* Handle collapsed/closed sidebar states */
html:not([dir=rtl]) body.sidebar-mini header.app-navbar {
  left: 86px !important;
}

html:not([dir=rtl]) body.sidebar-closed header.app-navbar {
  left: 0 !important;
}

/* RTL Desktop Positioning */
html[dir=rtl] header.app-navbar {
  right: 250px !important;
  /* Matches sidebar width on the right */
  left: 0 !important;
  width: calc(100% - 250px) !important;
}

/* Handle collapsed/closed sidebar states in RTL */
html[dir=rtl] body.sidebar-mini header.app-navbar {
  right: 86px !important;
  width: calc(100% - 86px) !important;
}

html[dir=rtl] body.sidebar-closed header.app-navbar {
  right: 0 !important;
  width: 100% !important;
}

/* RTL Global Layout Overrides for Header */
html[dir=rtl] .app-navbar .main-header {
  display: flex !important;
  flex-direction: row !important;
  /* Right to Left */
  justify-content: flex-end !important;
  /* Push everything to the start (Right) */
  padding: 0 15px !important;
  position: relative !important;
}
html[dir=rtl] {
  /* Pin the tools and profile to the far left in RTL */
}
html[dir=rtl] .app-navbar .header-right {
  position: absolute !important;
  left: 15px !important;
  top: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}
html[dir=rtl] {
  /* Group Burger and Search on the right */
}
html[dir=rtl] .app-navbar .header-left {
  display: flex !important;
  flex-direction: row !important;
  /* Burger Right, Search Left of it */
  align-items: center !important;
  gap: 15px !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}
html[dir=rtl] {
  /* Ensure the search bar is compact and doesn't push items */
}
html[dir=rtl] .app-navbar .header-search {
  margin: 0 !important;
  flex: none !important;
  width: 280px !important;
}

/* Header Container Spacing */
.main-header.container-fluid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  padding: 0 25px !important;
}

.header-left,
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  /* Balanced spacing */
  pointer-events: auto !important;
}

/* Remove Redundant Logo in Header (since it's already in the sidebar) */
.app-navbar .header-left .logo {
  display: none !important;
}

/* Adjust search bar width in header for better balance */
.header-search {
  flex: 1 !important;
  max-width: 400px !important;
  /* Slightly reduced max-width */
  margin: 0 8px !important;
  /* Reduced from 25px */
}

/* Mobile Adjustments (Header takes full width) */
@media (max-width: 991px) {
  html:not([dir=rtl]) header.app-navbar {
    left: 0 !important;
  }
  .header-search {
    display: none !important;
    /* Hide on mobile to save space */
  }
}
/* Ensure mobile logo is strictly hidden on desktop */
@media (min-width: 992px) {
  .header-logo-container {
    display: none !important;
  }
}
/* ============================================ */
/* GLOBAL PRELOADER & MODULE LOADING            */
/* ============================================ */
.module-loading-indicator {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(255, 255, 255, 0.98) !important;
  z-index: 9999999999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.module-loading-indicator app-skeleton-loader {
  display: contents !important;
}
.module-loading-indicator app-skeleton-loader img {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 120px !important;
  height: 120px !important;
  z-index: 9999999999 !important;
}

.header-item .btn-icon-text,
.header-item .btn-icon-modern {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 6px !important;
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  background: rgba(255, 255, 255, 0.6) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  /* RTL Icon Alignment */
}
html[dir=rtl] .header-item .btn-icon-text,
html[dir=rtl] .header-item .btn-icon-modern {
  flex-direction: row-reverse !important;
}
.header-item .btn-icon-text i,
.header-item .btn-icon-modern i {
  font-size: 1.15rem !important;
  transition: transform 0.3s ease !important;
}
.header-item .btn-icon-text .header-icon,
.header-item .btn-icon-text img.header-icon,
.header-item .btn-icon-modern .header-icon,
.header-item .btn-icon-modern img.header-icon {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  transition: all 0.3s ease !important;
  filter: brightness(1) !important;
}
.header-item .btn-icon-text:hover,
.header-item .btn-icon-modern:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.header-item .btn-icon-text:hover i,
.header-item .btn-icon-modern:hover i {
  transform: scale(1.08) !important;
}
.header-item .btn-icon-text:hover .header-icon,
.header-item .btn-icon-text:hover img.header-icon,
.header-item .btn-icon-modern:hover .header-icon,
.header-item .btn-icon-modern:hover img.header-icon {
  transform: scale(1.08) !important;
  filter: brightness(1.1) !important;
}
.header-item .btn-icon-text:active,
.header-item .btn-icon-modern:active {
  transform: translateY(0) scale(0.98) !important;
}
.header-item .btn-icon-modern {
  padding: 2px !important;
  width: 30px !important;
  height: 30px !important;
  justify-content: center !important;
  border-radius: 6px !important;
}
.header-item .btn-icon-modern i {
  font-size: 1.2rem !important;
}
.header-item .btn-icon-modern .header-icon,
.header-item .btn-icon-modern img.header-icon {
  width: 20px !important;
  height: 20px !important;
}
.header-item .branch-list-icon {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(72, 133, 237, 0.08) !important;
  color: #4885ed !important;
  border-radius: 8px !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.header-item .branch-list-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.header-item-branch-compact .btn-icon-text {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
.header-item-branch-compact .btn-icon-text .branch-name-compact {
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-grow: 1 !important;
}
@media (max-width: 1400px) {
  .header-item-branch-compact .btn-icon-text .branch-name-compact {
    max-width: 120px !important;
  }
}
@media (max-width: 1200px) {
  .header-item-branch-compact .btn-icon-text .branch-name-compact {
    max-width: 80px !important;
  }
}
.header-item-branch-compact .btn-icon-text:hover {
  background: #f8f9fa !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}
.header-item-branch-compact .btn-icon-text:hover .branch-list-icon {
  transform: scale(1.1) rotate(5deg) !important;
  background: #4885ed !important;
  color: white !important;
}

.branch-dropdown {
  padding: 8px !important;
  min-width: 220px !important;
}
.branch-dropdown .dropdown-item {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.branch-dropdown .dropdown-item span {
  font-weight: 600 !important;
  color: #334155 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-grow: 1 !important;
}
.branch-dropdown .dropdown-item:hover {
  background: rgba(72, 133, 237, 0.05) !important;
}
.branch-dropdown .dropdown-item:hover .branch-list-icon {
  background: #4885ed !important;
  color: white !important;
}
.branch-dropdown .dropdown-item:hover span {
  color: #4885ed !important;
}
.branch-dropdown .dropdown-item.active {
  background: rgba(72, 133, 237, 0.1) !important;
}
.branch-dropdown .dropdown-item.active .branch-list-icon {
  background: #4885ed !important;
  color: white !important;
}
.branch-dropdown .dropdown-item.active span {
  color: #4885ed !important;
  font-weight: 600 !important;
}

.header-item-add-new .btn-add-new {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
.header-item-add-new .btn-add-new:hover {
  background: #f8f9fa !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.header-item-pos .btn-pos {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
.header-item-pos .btn-pos:hover {
  background: #f8f9fa !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.header-item-notifications .btn-icon-modern {
  background: linear-gradient(135deg, rgba(253, 126, 20, 0.08) 0%, rgba(253, 126, 20, 0.04) 100%) !important;
  color: #fd7e14 !important;
  border-color: rgba(253, 126, 20, 0.12) !important;
}
.header-item-notifications .btn-icon-modern:hover {
  background: linear-gradient(135deg, rgba(253, 126, 20, 0.12) 0%, rgba(253, 126, 20, 0.08) 100%) !important;
  box-shadow: 0 4px 12px rgba(253, 126, 20, 0.2) !important;
}
.header-item-notifications .btn-icon-modern:hover i {
  animation: bell-shake 0.5s ease-in-out !important;
}

.header-item-fullscreen .btn-icon-modern {
  background: linear-gradient(135deg, rgba(23, 162, 184, 0.08) 0%, rgba(23, 162, 184, 0.04) 100%) !important;
  color: #17a2b8 !important;
  border-color: rgba(23, 162, 184, 0.12) !important;
}
.header-item-fullscreen .btn-icon-modern:hover {
  background: linear-gradient(135deg, rgba(23, 162, 184, 0.12) 0%, rgba(23, 162, 184, 0.08) 100%) !important;
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.2) !important;
}

.header-item-profile .btn-profile {
  border: 2px solid rgba(72, 133, 237, 0.12) !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}
.header-item-profile .btn-profile:hover {
  border-color: #4885ed !important;
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(72, 133, 237, 0.25) !important;
}
.header-item-profile .btn-profile::after {
  display: none !important;
}
.header-item-profile .btn-profile .header-avatar {
  border-radius: 8px !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
}

.notification-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  color: white !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid white !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
  animation: pulse 2s infinite;
}

.profile-dropdown {
  min-width: 260px !important;
  padding: 0.5rem !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.profile-dropdown .dropdown-header {
  padding: 0 !important;
  margin-bottom: 0.5rem !important;
  background: linear-gradient(135deg, rgba(72, 133, 237, 0.05) 0%, rgba(72, 133, 237, 0.02) 100%) !important;
  border-radius: 8px !important;
}
.profile-dropdown .dropdown-item {
  padding: 0.6rem 1rem !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
.profile-dropdown .dropdown-item i {
  font-size: 1.1rem !important;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.profile-dropdown .dropdown-item:hover {
  background: rgba(72, 133, 237, 0.08) !important;
  color: #4885ed !important;
}
.profile-dropdown .dropdown-item:hover i {
  opacity: 1;
}
.profile-dropdown .dropdown-item.text-danger:hover {
  background: rgba(220, 53, 69, 0.08) !important;
  color: #dc3545 !important;
}
.profile-dropdown .dropdown-divider {
  margin: 0.5rem 0 !important;
  opacity: 0.1 !important;
}

@keyframes bell-shake {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(10deg);
  }
}
/* Modern Header Separator */
.header-separator {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 4px;
  /* Reduced from 10px */
}

/* Modern Add New Dropdown */
.add-new-dropdown {
  padding: 1rem !important;
  min-width: 320px !important;
}
.add-new-dropdown .add-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.add-new-dropdown .add-new-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.add-new-dropdown .add-new-item .add-new-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  background: #f8f9fa;
  color: #6c757d;
}
.add-new-dropdown .add-new-item .add-new-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
  text-align: center;
}
.add-new-dropdown .add-new-item:hover {
  background: #f0f7ff;
}
.add-new-dropdown .add-new-item:hover .add-new-icon {
  transform: translateY(-2px);
  background: #4885ed;
  color: white;
  box-shadow: 0 4px 10px rgba(72, 133, 237, 0.3);
}
.add-new-dropdown .add-new-item:hover .add-new-label {
  color: #4885ed;
}
.add-new-dropdown .add-new-item:nth-child(1) .add-new-icon {
  color: #4885ed;
  background: rgba(72, 133, 237, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(2) .add-new-icon {
  color: #6f42c1;
  background: rgba(111, 66, 193, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(3) .add-new-icon {
  color: #fd7e14;
  background: rgba(253, 126, 20, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(4) .add-new-icon {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(5) .add-new-icon {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(6) .add-new-icon {
  color: #e83e8c;
  background: rgba(232, 62, 140, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(7) .add-new-icon {
  color: #20c997;
  background: rgba(32, 201, 151, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(8) .add-new-icon {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(9) .add-new-icon {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(10) .add-new-icon {
  color: #6610f2;
  background: rgba(102, 16, 242, 0.1);
}
.add-new-dropdown .add-new-item:nth-child(11) .add-new-icon {
  color: #d63384;
  background: rgba(214, 51, 132, 0.1);
}

/* ============================================ */
/* NOTIFICATION BELL STYLES */
/* ============================================ */
.header-item-notifications .notification-badge {
  font-size: 0.65rem;
  padding: 0.25em 0.5em;
  transform: translate(-50%, -25%) !important;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}
/* ============================================ */
/* SELECTIVE ANIMATION DISABLE - SAFE MODE      */
/* ============================================ */
main,
main *,
.sidebar-layout main,
.sidebar-layout main *,
router-outlet ~ * {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

.app-menu,
.app-menu *,
.sidebar,
.sidebar *,
.sidebar-menu,
.sidebar-menu * {
  transition: none !important;
  animation: none !important;
}

/* ============================================ */
/* GLOBAL HEADER DROPDOWN FIX - LTR & RTL       */
/* ============================================ */
/* CRITICAL: Remove containment and overflow restrictions from header */
header,
.app-navbar,
.main-header,
.header-left,
.header-right,
.header-item,
.header-item-language,
.header-item-add-new,
.header-item-branch,
.header-item-profile {
  overflow: visible !important;
  contain: none !important;
  clip: auto !important;
  clip-path: none !important;
}

/* BREAKOUT: Force all header dropdowns to escape overflow restrictions */
/* Use absolute positioning so they align with their parent toggle buttons */
.header-item .dropdown-menu,
.header-item .language-dropdown,
.header-item .add-new-dropdown,
.header-item .branch-dropdown,
.dropdown-menu.language-dropdown,
.dropdown-menu.add-new-dropdown,
.dropdown-menu.branch-dropdown,
header .dropdown-menu,
.app-navbar .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  /* Position exactly below the toggle button */
  z-index: 999999 !important;
  /* Above everything */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 1px solid #e9ecef !important;
  background: #ffffff !important;
  transform: none !important;
  /* Override Popper inline styles */
  margin: 5px 0 0 0 !important;
  /* Visual gap, override Popper margin */
}

/* Show dropdowns when active */
.dropdown.show .dropdown-menu,
.language-dropdown.show,
.add-new-dropdown.show,
.branch-dropdown.show {
  display: block !important;
}

/* Ensure proper alignment for LTR */
html:not([dir=rtl]) .header-left .dropdown-menu,
html:not([dir=rtl]) .header-left .language-dropdown {
  left: 0 !important;
  right: auto !important;
}

html:not([dir=rtl]) .header-right .dropdown-menu,
html:not([dir=rtl]) .header-right .add-new-dropdown,
html:not([dir=rtl]) .header-right .branch-dropdown {
  right: 0 !important;
  left: auto !important;
}

/* Ensure proper alignment for RTL */
html[dir=rtl] .header-left .dropdown-menu,
html[dir=rtl] .header-left .language-dropdown {
  right: 0 !important;
  left: auto !important;
}

html[dir=rtl] .header-right .dropdown-menu,
html[dir=rtl] .header-right .add-new-dropdown,
html[dir=rtl] .header-right .branch-dropdown {
  left: 0 !important;
  right: auto !important;
}

/* Mobile Dropdown Fix - Position each dropdown below its icon */
@media (max-width: 991px) {
  /* Make each header-item a positioning context for its dropdown */
  .header-item,
  .header-item-language,
  .header-item-branch-compact,
  .header-item-profile,
  .header-item-add-new {
    position: relative !important;
  }
  /* Position all header dropdowns directly below their parent icon */
  .header-item .dropdown-menu,
  .header-item .language-dropdown,
  .header-item .add-new-dropdown,
  .header-item .branch-dropdown,
  .dropdown-menu.language-dropdown,
  .dropdown-menu.add-new-dropdown,
  .dropdown-menu.branch-dropdown,
  header .dropdown-menu,
  .app-navbar .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 5px !important;
    transform: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 999999 !important;
  }
  /* LTR: Align dropdown to the right edge of the icon (so it doesn't overflow left) */
  html:not([dir=rtl]) .header-item .dropdown-menu,
  html:not([dir=rtl]) .header-item .language-dropdown,
  html:not([dir=rtl]) .header-item .branch-dropdown,
  html:not([dir=rtl]) .header-item .dropdown-menu.pull-down {
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 90vw !important;
  }
  /* RTL: Align dropdown to the left edge of the icon (so it doesn't overflow right) */
  html[dir=rtl] .header-item .dropdown-menu,
  html[dir=rtl] .header-item .language-dropdown,
  html[dir=rtl] .header-item .branch-dropdown,
  html[dir=rtl] .header-item .dropdown-menu.pull-down {
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 90vw !important;
  }
  /* Force branch dropdown items to show icon + name in row on mobile */
  .branch-dropdown .dropdown-item,
  .branch-dropdown.show .dropdown-item,
  .dropdown-menu.branch-dropdown .dropdown-item,
  .dropdown-menu.branch-dropdown.show .dropdown-item,
  .dropdown-menu.branch-dropdown.show a.dropdown-item,
  .dropdown-menu.branch-dropdown.show a,
  body.sidebar-layout .dropdown-menu.branch-dropdown.show .dropdown-item,
  body.sidebar-layout .dropdown-menu.show.branch-dropdown .dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    white-space: nowrap !important;
  }
  .branch-dropdown .dropdown-item .branch-text,
  .branch-dropdown .dropdown-item span,
  .dropdown-menu.branch-dropdown .dropdown-item .branch-text,
  .dropdown-menu.branch-dropdown .dropdown-item span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Force single column for language grids on mobile */
  .language-grid {
    grid-template-columns: 1fr !important;
  }
  /* Action wrapping for button groups */
  .header-actions,
  .modern-actions-wrapper {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }
}
/* GLOBAL LAYOUT PADDING - Ensures content stays below fixed header */
.page-wrapper,
main {
  padding-top: 65px !important;
  box-sizing: border-box !important;
}

/* REDUCE DATA TABLES HEADER HEIGHT SAFELY */
.dataTables_scrollHead,
.dataTables_scrollHeadInner {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.dataTables_scrollHead table {
  margin-bottom: 0 !important;
}

.dataTables_scrollHead table thead th {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  /* Further reduced for maximum compactness */
  line-height: 1.2 !important;
  vertical-align: middle !important;
  background-color: #f8f9fa !important;
  color: #000000 !important;
  white-space: nowrap !important;
}

/* Adjust sorting icons for compact view */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin-top: -6px !important;
}

table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin-top: 6px !important;
}

/* ============================================ */
/* GLOBAL RTL OVERRIDES - For Arabic Support    */
/* ============================================ */
[dir=rtl],
html[dir=rtl],
body[dir=rtl] {
  /* IMMEDIATE OVERFLOW PROTECTION - CRITICAL */
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative !important;
  /* 1. RESET GLOBAL WRAPPERS - ELIMINATE LEFT GAPS */
}
[dir=rtl] html,
[dir=rtl] body,
[dir=rtl] .main-wrapper,
[dir=rtl] .sidebar-layout,
[dir=rtl] .layout-box-mode,
[dir=rtl] .layout-box-mode .main-wrapper,
html[dir=rtl] html,
html[dir=rtl] body,
html[dir=rtl] .main-wrapper,
html[dir=rtl] .sidebar-layout,
html[dir=rtl] .layout-box-mode,
html[dir=rtl] .layout-box-mode .main-wrapper,
body[dir=rtl] html,
body[dir=rtl] body,
body[dir=rtl] .main-wrapper,
body[dir=rtl] .sidebar-layout,
body[dir=rtl] .layout-box-mode,
body[dir=rtl] .layout-box-mode .main-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow-x: hidden !important;
}
[dir=rtl],
html[dir=rtl],
body[dir=rtl] {
  /* Force body to have no padding in RTL */
}
[dir=rtl] body,
html[dir=rtl] body,
body[dir=rtl] body {
  transform: none !important;
  perspective: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[dir=rtl],
html[dir=rtl],
body[dir=rtl] {
  /* 2. SIDEBAR: FIXED TO RIGHT */
}
[dir=rtl] .sidebar,
[dir=rtl] .app-menu,
[dir=rtl] aside.app-menu,
html[dir=rtl] .sidebar,
html[dir=rtl] .app-menu,
html[dir=rtl] aside.app-menu,
body[dir=rtl] .sidebar,
body[dir=rtl] .app-menu,
body[dir=rtl] aside.app-menu {
  left: auto !important;
  right: 0 !important;
  width: 250px !important;
  position: fixed !important;
  height: 100% !important;
  z-index: 1050 !important;
  border-left: 1px solid #e9ecef !important;
  border-right: none !important;
  display: block !important;
  transform: none !important;
  overflow: hidden !important;
}
[dir=rtl],
html[dir=rtl],
body[dir=rtl] {
  /* 3. HEADER: FIXED WITH LEFT/RIGHT BOUNDARIES */
}
[dir=rtl] .header,
[dir=rtl] header,
[dir=rtl] .app-navbar,
html[dir=rtl] .header,
html[dir=rtl] header,
html[dir=rtl] .app-navbar,
body[dir=rtl] .header,
body[dir=rtl] header,
body[dir=rtl] .app-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 250px !important;
  height: 60px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 1045 !important;
  /* Fix for dropdowns in RTL - ensuring they are below the header */
}
[dir=rtl] .header .header-item .dropdown-menu,
[dir=rtl] .header .header-item.dropdown .dropdown-menu,
[dir=rtl] .header .header-item .language-dropdown,
[dir=rtl] .header .header-item .add-new-dropdown,
[dir=rtl] .header .header-item .branch-dropdown,
[dir=rtl] header .header-item .dropdown-menu,
[dir=rtl] header .header-item.dropdown .dropdown-menu,
[dir=rtl] header .header-item .language-dropdown,
[dir=rtl] header .header-item .add-new-dropdown,
[dir=rtl] header .header-item .branch-dropdown,
[dir=rtl] .app-navbar .header-item .dropdown-menu,
[dir=rtl] .app-navbar .header-item.dropdown .dropdown-menu,
[dir=rtl] .app-navbar .header-item .language-dropdown,
[dir=rtl] .app-navbar .header-item .add-new-dropdown,
[dir=rtl] .app-navbar .header-item .branch-dropdown,
html[dir=rtl] .header .header-item .dropdown-menu,
html[dir=rtl] .header .header-item.dropdown .dropdown-menu,
html[dir=rtl] .header .header-item .language-dropdown,
html[dir=rtl] .header .header-item .add-new-dropdown,
html[dir=rtl] .header .header-item .branch-dropdown,
html[dir=rtl] header .header-item .dropdown-menu,
html[dir=rtl] header .header-item.dropdown .dropdown-menu,
html[dir=rtl] header .header-item .language-dropdown,
html[dir=rtl] header .header-item .add-new-dropdown,
html[dir=rtl] header .header-item .branch-dropdown,
html[dir=rtl] .app-navbar .header-item .dropdown-menu,
html[dir=rtl] .app-navbar .header-item.dropdown .dropdown-menu,
html[dir=rtl] .app-navbar .header-item .language-dropdown,
html[dir=rtl] .app-navbar .header-item .add-new-dropdown,
html[dir=rtl] .app-navbar .header-item .branch-dropdown,
body[dir=rtl] .header .header-item .dropdown-menu,
body[dir=rtl] .header .header-item.dropdown .dropdown-menu,
body[dir=rtl] .header .header-item .language-dropdown,
body[dir=rtl] .header .header-item .add-new-dropdown,
body[dir=rtl] .header .header-item .branch-dropdown,
body[dir=rtl] header .header-item .dropdown-menu,
body[dir=rtl] header .header-item.dropdown .dropdown-menu,
body[dir=rtl] header .header-item .language-dropdown,
body[dir=rtl] header .header-item .add-new-dropdown,
body[dir=rtl] header .header-item .branch-dropdown,
body[dir=rtl] .app-navbar .header-item .dropdown-menu,
body[dir=rtl] .app-navbar .header-item.dropdown .dropdown-menu,
body[dir=rtl] .app-navbar .header-item .language-dropdown,
body[dir=rtl] .app-navbar .header-item .add-new-dropdown,
body[dir=rtl] .app-navbar .header-item .branch-dropdown {
  position: absolute !important;
  top: 100% !important;
  margin-top: 5px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  z-index: 999999 !important;
  border: 1px solid #e9ecef !important;
  visibility: visible !important;
  visibility: visible !important;
}
[dir=rtl] .header .header-item .dropdown-menu.show,
[dir=rtl] .header .header-item.dropdown .dropdown-menu.show,
[dir=rtl] .header .header-item .language-dropdown.show,
[dir=rtl] .header .header-item .add-new-dropdown.show,
[dir=rtl] .header .header-item .branch-dropdown.show,
[dir=rtl] header .header-item .dropdown-menu.show,
[dir=rtl] header .header-item.dropdown .dropdown-menu.show,
[dir=rtl] header .header-item .language-dropdown.show,
[dir=rtl] header .header-item .add-new-dropdown.show,
[dir=rtl] header .header-item .branch-dropdown.show,
[dir=rtl] .app-navbar .header-item .dropdown-menu.show,
[dir=rtl] .app-navbar .header-item.dropdown .dropdown-menu.show,
[dir=rtl] .app-navbar .header-item .language-dropdown.show,
[dir=rtl] .app-navbar .header-item .add-new-dropdown.show,
[dir=rtl] .app-navbar .header-item .branch-dropdown.show,
html[dir=rtl] .header .header-item .dropdown-menu.show,
html[dir=rtl] .header .header-item.dropdown .dropdown-menu.show,
html[dir=rtl] .header .header-item .language-dropdown.show,
html[dir=rtl] .header .header-item .add-new-dropdown.show,
html[dir=rtl] .header .header-item .branch-dropdown.show,
html[dir=rtl] header .header-item .dropdown-menu.show,
html[dir=rtl] header .header-item.dropdown .dropdown-menu.show,
html[dir=rtl] header .header-item .language-dropdown.show,
html[dir=rtl] header .header-item .add-new-dropdown.show,
html[dir=rtl] header .header-item .branch-dropdown.show,
html[dir=rtl] .app-navbar .header-item .dropdown-menu.show,
html[dir=rtl] .app-navbar .header-item.dropdown .dropdown-menu.show,
html[dir=rtl] .app-navbar .header-item .language-dropdown.show,
html[dir=rtl] .app-navbar .header-item .add-new-dropdown.show,
html[dir=rtl] .app-navbar .header-item .branch-dropdown.show,
body[dir=rtl] .header .header-item .dropdown-menu.show,
body[dir=rtl] .header .header-item.dropdown .dropdown-menu.show,
body[dir=rtl] .header .header-item .language-dropdown.show,
body[dir=rtl] .header .header-item .add-new-dropdown.show,
body[dir=rtl] .header .header-item .branch-dropdown.show,
body[dir=rtl] header .header-item .dropdown-menu.show,
body[dir=rtl] header .header-item.dropdown .dropdown-menu.show,
body[dir=rtl] header .header-item .language-dropdown.show,
body[dir=rtl] header .header-item .add-new-dropdown.show,
body[dir=rtl] header .header-item .branch-dropdown.show,
body[dir=rtl] .app-navbar .header-item .dropdown-menu.show,
body[dir=rtl] .app-navbar .header-item.dropdown .dropdown-menu.show,
body[dir=rtl] .app-navbar .header-item .language-dropdown.show,
body[dir=rtl] .app-navbar .header-item .add-new-dropdown.show,
body[dir=rtl] .app-navbar .header-item .branch-dropdown.show {
  display: block !important;
}
[dir=rtl] .header,
[dir=rtl] header,
[dir=rtl] .app-navbar,
html[dir=rtl] .header,
html[dir=rtl] header,
html[dir=rtl] .app-navbar,
body[dir=rtl] .header,
body[dir=rtl] header,
body[dir=rtl] .app-navbar {
  /* SPECIFIC: Remove transform:none for Add New so it can center */
}
[dir=rtl] .header .header-item .add-new-dropdown,
[dir=rtl] header .header-item .add-new-dropdown,
[dir=rtl] .app-navbar .header-item .add-new-dropdown,
html[dir=rtl] .header .header-item .add-new-dropdown,
html[dir=rtl] header .header-item .add-new-dropdown,
html[dir=rtl] .app-navbar .header-item .add-new-dropdown,
body[dir=rtl] .header .header-item .add-new-dropdown,
body[dir=rtl] header .header-item .add-new-dropdown,
body[dir=rtl] .app-navbar .header-item .add-new-dropdown {
  transform: none;
  /* Reset if needed, but line 249 will override it */
}
[dir=rtl] .header,
[dir=rtl] header,
[dir=rtl] .app-navbar,
html[dir=rtl] .header,
html[dir=rtl] header,
html[dir=rtl] .app-navbar,
body[dir=rtl] .header,
body[dir=rtl] header,
body[dir=rtl] .app-navbar {
  /* Force all header tiers to allow overflow in RTL */
}
[dir=rtl] .header,
[dir=rtl] .header .main-header,
[dir=rtl] .header .header-item,
[dir=rtl] .header .header-left,
[dir=rtl] .header .header-right,
[dir=rtl] header,
[dir=rtl] header .main-header,
[dir=rtl] header .header-item,
[dir=rtl] header .header-left,
[dir=rtl] header .header-right,
[dir=rtl] .app-navbar,
[dir=rtl] .app-navbar .main-header,
[dir=rtl] .app-navbar .header-item,
[dir=rtl] .app-navbar .header-left,
[dir=rtl] .app-navbar .header-right,
html[dir=rtl] .header,
html[dir=rtl] .header .main-header,
html[dir=rtl] .header .header-item,
html[dir=rtl] .header .header-left,
html[dir=rtl] .header .header-right,
html[dir=rtl] header,
html[dir=rtl] header .main-header,
html[dir=rtl] header .header-item,
html[dir=rtl] header .header-left,
html[dir=rtl] header .header-right,
html[dir=rtl] .app-navbar,
html[dir=rtl] .app-navbar .main-header,
html[dir=rtl] .app-navbar .header-item,
html[dir=rtl] .app-navbar .header-left,
html[dir=rtl] .app-navbar .header-right,
body[dir=rtl] .header,
body[dir=rtl] .header .main-header,
body[dir=rtl] .header .header-item,
body[dir=rtl] .header .header-left,
body[dir=rtl] .header .header-right,
body[dir=rtl] header,
body[dir=rtl] header .main-header,
body[dir=rtl] header .header-item,
body[dir=rtl] header .header-left,
body[dir=rtl] header .header-right,
body[dir=rtl] .app-navbar,
body[dir=rtl] .app-navbar .main-header,
body[dir=rtl] .app-navbar .header-item,
body[dir=rtl] .app-navbar .header-left,
body[dir=rtl] .app-navbar .header-right {
  overflow: visible !important;
}
[dir=rtl] .header,
[dir=rtl] header,
[dir=rtl] .app-navbar,
html[dir=rtl] .header,
html[dir=rtl] header,
html[dir=rtl] .app-navbar,
body[dir=rtl] .header,
body[dir=rtl] header,
body[dir=rtl] .app-navbar {
  /* Anchor alignment for RTL header items */
}
[dir=rtl] .header .header-left .dropdown-menu,
[dir=rtl] .header .header-left .language-dropdown,
[dir=rtl] header .header-left .dropdown-menu,
[dir=rtl] header .header-left .language-dropdown,
[dir=rtl] .app-navbar .header-left .dropdown-menu,
[dir=rtl] .app-navbar .header-left .language-dropdown,
html[dir=rtl] .header .header-left .dropdown-menu,
html[dir=rtl] .header .header-left .language-dropdown,
html[dir=rtl] header .header-left .dropdown-menu,
html[dir=rtl] header .header-left .language-dropdown,
html[dir=rtl] .app-navbar .header-left .dropdown-menu,
html[dir=rtl] .app-navbar .header-left .language-dropdown,
body[dir=rtl] .header .header-left .dropdown-menu,
body[dir=rtl] .header .header-left .language-dropdown,
body[dir=rtl] header .header-left .dropdown-menu,
body[dir=rtl] header .header-left .language-dropdown,
body[dir=rtl] .app-navbar .header-left .dropdown-menu,
body[dir=rtl] .app-navbar .header-left .language-dropdown {
  right: auto !important;
  left: 0 !important;
}
[dir=rtl] .header .header-right .dropdown-menu,
[dir=rtl] .header .header-right .language-dropdown,
[dir=rtl] .header .header-right .branch-dropdown,
[dir=rtl] header .header-right .dropdown-menu,
[dir=rtl] header .header-right .language-dropdown,
[dir=rtl] header .header-right .branch-dropdown,
[dir=rtl] .app-navbar .header-right .dropdown-menu,
[dir=rtl] .app-navbar .header-right .language-dropdown,
[dir=rtl] .app-navbar .header-right .branch-dropdown,
html[dir=rtl] .header .header-right .dropdown-menu,
html[dir=rtl] .header .header-right .language-dropdown,
html[dir=rtl] .header .header-right .branch-dropdown,
html[dir=rtl] header .header-right .dropdown-menu,
html[dir=rtl] header .header-right .language-dropdown,
html[dir=rtl] header .header-right .branch-dropdown,
html[dir=rtl] .app-navbar .header-right .dropdown-menu,
html[dir=rtl] .app-navbar .header-right .language-dropdown,
html[dir=rtl] .app-navbar .header-right .branch-dropdown,
body[dir=rtl] .header .header-right .dropdown-menu,
body[dir=rtl] .header .header-right .language-dropdown,
body[dir=rtl] .header .header-right .branch-dropdown,
body[dir=rtl] header .header-right .dropdown-menu,
body[dir=rtl] header .header-right .language-dropdown,
body[dir=rtl] header .header-right .branch-dropdown,
body[dir=rtl] .app-navbar .header-right .dropdown-menu,
body[dir=rtl] .app-navbar .header-right .language-dropdown,
body[dir=rtl] .app-navbar .header-right .branch-dropdown {
  left: auto !important;
  right: 0 !important;
  /* Align to the button in RTL */
}
[dir=rtl] .header,
[dir=rtl] header,
[dir=rtl] .app-navbar,
html[dir=rtl] .header,
html[dir=rtl] header,
html[dir=rtl] .app-navbar,
body[dir=rtl] .header,
body[dir=rtl] header,
body[dir=rtl] .app-navbar {
  /* Keep Add New centered as requested previously */
}
[dir=rtl] .header .header-item-add-new .add-new-dropdown,
[dir=rtl] .header .add-new-dropdown,
[dir=rtl] header .header-item-add-new .add-new-dropdown,
[dir=rtl] header .add-new-dropdown,
[dir=rtl] .app-navbar .header-item-add-new .add-new-dropdown,
[dir=rtl] .app-navbar .add-new-dropdown,
html[dir=rtl] .header .header-item-add-new .add-new-dropdown,
html[dir=rtl] .header .add-new-dropdown,
html[dir=rtl] header .header-item-add-new .add-new-dropdown,
html[dir=rtl] header .add-new-dropdown,
html[dir=rtl] .app-navbar .header-item-add-new .add-new-dropdown,
html[dir=rtl] .app-navbar .add-new-dropdown,
body[dir=rtl] .header .header-item-add-new .add-new-dropdown,
body[dir=rtl] .header .add-new-dropdown,
body[dir=rtl] header .header-item-add-new .add-new-dropdown,
body[dir=rtl] header .add-new-dropdown,
body[dir=rtl] .app-navbar .header-item-add-new .add-new-dropdown,
body[dir=rtl] .app-navbar .add-new-dropdown {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.mini-sidebar [dir=rtl] .header,
.mini-sidebar [dir=rtl] header,
.mini-sidebar [dir=rtl] .app-navbar,
.mini-sidebar html[dir=rtl] .header,
.mini-sidebar html[dir=rtl] header,
.mini-sidebar html[dir=rtl] .app-navbar,
.mini-sidebar body[dir=rtl] .header,
.mini-sidebar body[dir=rtl] header,
.mini-sidebar body[dir=rtl] .app-navbar {
  right: 86px !important;
}
@media (max-width: 991px) {
  [dir=rtl] .header,
  [dir=rtl] header,
  [dir=rtl] .app-navbar,
  html[dir=rtl] .header,
  html[dir=rtl] header,
  html[dir=rtl] .app-navbar,
  body[dir=rtl] .header,
  body[dir=rtl] header,
  body[dir=rtl] .app-navbar {
    right: 0 !important;
  }
}
[dir=rtl],
html[dir=rtl],
body[dir=rtl] {
  /* 4. CONTENT: ULTRA-HIGH SPECIFICITY RTL FIX */
  /* Default State (Sidebar Showing) */
}
[dir=rtl] [dir=rtl] body.sidebar-layout:not(.sidebar-mini) .page-wrapper,
[dir=rtl] [dir=rtl] body.sidebar-layout:not(.sidebar-mini) main,
[dir=rtl] [dir=rtl] body.sidebar-layout .page-wrapper,
[dir=rtl] [dir=rtl] body.sidebar-layout main,
html[dir=rtl] [dir=rtl] body.sidebar-layout:not(.sidebar-mini) .page-wrapper,
html[dir=rtl] [dir=rtl] body.sidebar-layout:not(.sidebar-mini) main,
html[dir=rtl] [dir=rtl] body.sidebar-layout .page-wrapper,
html[dir=rtl] [dir=rtl] body.sidebar-layout main,
body[dir=rtl] [dir=rtl] body.sidebar-layout:not(.sidebar-mini) .page-wrapper,
body[dir=rtl] [dir=rtl] body.sidebar-layout:not(.sidebar-mini) main,
body[dir=rtl] [dir=rtl] body.sidebar-layout .page-wrapper,
body[dir=rtl] [dir=rtl] body.sidebar-layout main {
  padding-top: 65px !important;
  margin-left: 0 !important;
  margin-right: 250px !important;
  width: calc(100% - 250px) !important;
  min-height: 100vh !important;
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}
[dir=rtl],
html[dir=rtl],
body[dir=rtl] {
  /* Closed State (Sidebar Hidden) */
}
[dir=rtl] [dir=rtl] body.sidebar-closed .page-wrapper,
[dir=rtl] [dir=rtl] body.sidebar-closed main,
[dir=rtl] [dir=rtl].sidebar-closed .page-wrapper,
[dir=rtl] [dir=rtl].sidebar-closed main,
html[dir=rtl] [dir=rtl] body.sidebar-closed .page-wrapper,
html[dir=rtl] [dir=rtl] body.sidebar-closed main,
html[dir=rtl] [dir=rtl].sidebar-closed .page-wrapper,
html[dir=rtl] [dir=rtl].sidebar-closed main,
body[dir=rtl] [dir=rtl] body.sidebar-closed .page-wrapper,
body[dir=rtl] [dir=rtl] body.sidebar-closed main,
body[dir=rtl] [dir=rtl].sidebar-closed .page-wrapper,
body[dir=rtl] [dir=rtl].sidebar-closed main {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
[dir=rtl],
html[dir=rtl],
body[dir=rtl] {
  /* Mini State */
}
[dir=rtl] [dir=rtl] body.sidebar-mini .page-wrapper,
[dir=rtl] [dir=rtl] body.sidebar-mini main,
html[dir=rtl] [dir=rtl] body.sidebar-mini .page-wrapper,
html[dir=rtl] [dir=rtl] body.sidebar-mini main,
body[dir=rtl] [dir=rtl] body.sidebar-mini .page-wrapper,
body[dir=rtl] [dir=rtl] body.sidebar-mini main {
  margin-right: 86px !important;
  margin-left: 0 !important;
  width: calc(100% - 86px) !important;
}

/* Ensure internal containers stretch fully and have no left margin */
.page-wrapper .content,
.page-wrapper .container-fluid,
.page-wrapper > *,
main > *,
main .content,
main .main-content,
main .dashboard-container,
main .orders-list-container,
.dashboard-container,
.orders-list-container,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Specific fix for dashboard flex container */
.dashboard-container.d-flex {
  margin-left: 0 !important;
  padding-left: 20px !important;
}

/* Ultra-aggressive: Target the dashboard component root */
app-admin-dashboard,
app-admin-dashboard > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Fix Bootstrap row negative margins */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.row > * {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Force all elements inside main to start at left edge */
main * {
  box-sizing: border-box !important;
}

/* 5. HEADER ITEMS ALIGNMENT (RE-VERIFIED) */
.main-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 20px !important;
  width: 100% !important;
  height: 100% !important;
}

/* Logo/Burger pins to the Right side of the available header bar */
.header-left {
  display: flex !important;
  align-items: center !important;
  order: 1 !important;
}
.header-left #toggle_btn,
.header-left .menu-toggle {
  order: 1 !important;
  padding-right: 15px !important;
}
.header-left .logo {
  order: 2 !important;
}

/* Buttons/Profile pins to the Left side of the available header bar */
.header-right {
  display: flex !important;
  align-items: center !important;
  order: 2 !important;
}
.header-right .header-item {
  margin-left: 12px !important;
}

/* 6. SIDEBAR TEXT AND ICONS - EXACT LTR COLOR MATCH */
.sidebar .sidebar-menu > ul > li > a,
.sidebar .sidebar-menu > ul > li > a span,
.app-menu .menu > li > a,
.sidebar-menu .menu > li > a,
.sidebar-menu .menu > li > a span,
.app-menu .menu > li > a span,
.sidebar-menu ul li a i,
.sidebar-menu ul li a svg {
  text-align: right !important;
  color: #1E293B !important;
  /* EXACT LTR MAIN MODULE COLOR */
  font-weight: 500 !important;
}
.sidebar .sidebar-menu > ul > li > a span,
.sidebar .sidebar-menu > ul > li > a span span,
.app-menu .menu > li > a span,
.sidebar-menu .menu > li > a span,
.sidebar-menu .menu > li > a span span,
.app-menu .menu > li > a span span,
.sidebar-menu ul li a i span,
.sidebar-menu ul li a svg span {
  color: #1E293B !important;
  font-weight: 500 !important;
}
.sidebar .sidebar-menu > ul > li > a i,
.sidebar .sidebar-menu > ul > li > a svg,
.sidebar .sidebar-menu > ul > li > a img,
.sidebar .sidebar-menu > ul > li > a span i,
.sidebar .sidebar-menu > ul > li > a span svg,
.sidebar .sidebar-menu > ul > li > a span img,
.app-menu .menu > li > a i,
.app-menu .menu > li > a svg,
.app-menu .menu > li > a img,
.sidebar-menu .menu > li > a i,
.sidebar-menu .menu > li > a svg,
.sidebar-menu .menu > li > a img,
.sidebar-menu .menu > li > a span i,
.sidebar-menu .menu > li > a span svg,
.sidebar-menu .menu > li > a span img,
.app-menu .menu > li > a span i,
.app-menu .menu > li > a span svg,
.app-menu .menu > li > a span img,
.sidebar-menu ul li a i i,
.sidebar-menu ul li a i svg,
.sidebar-menu ul li a i img,
.sidebar-menu ul li a svg i,
.sidebar-menu ul li a svg svg,
.sidebar-menu ul li a svg img {
  margin-right: 0 !important;
  margin-left: 10px !important;
  color: #1E293B !important;
}
.sidebar .sidebar-menu > ul > li > a:hover span,
.sidebar .sidebar-menu > ul > li > a:hover i,
.sidebar .sidebar-menu > ul > li > a:hover svg,
.sidebar .sidebar-menu > ul > li > a span:hover span,
.sidebar .sidebar-menu > ul > li > a span:hover i,
.sidebar .sidebar-menu > ul > li > a span:hover svg,
.app-menu .menu > li > a:hover span,
.app-menu .menu > li > a:hover i,
.app-menu .menu > li > a:hover svg,
.sidebar-menu .menu > li > a:hover span,
.sidebar-menu .menu > li > a:hover i,
.sidebar-menu .menu > li > a:hover svg,
.sidebar-menu .menu > li > a span:hover span,
.sidebar-menu .menu > li > a span:hover i,
.sidebar-menu .menu > li > a span:hover svg,
.app-menu .menu > li > a span:hover span,
.app-menu .menu > li > a span:hover i,
.app-menu .menu > li > a span:hover svg,
.sidebar-menu ul li a i:hover span,
.sidebar-menu ul li a i:hover i,
.sidebar-menu ul li a i:hover svg,
.sidebar-menu ul li a svg:hover span,
.sidebar-menu ul li a svg:hover i,
.sidebar-menu ul li a svg:hover svg {
  color: var(--colorPrimary) !important;
}
.sidebar .sidebar-menu > ul > li > a.active,
.sidebar .sidebar-menu > ul > li > a span.active,
.app-menu .menu > li > a.active,
.sidebar-menu .menu > li > a.active,
.sidebar-menu .menu > li > a span.active,
.app-menu .menu > li > a span.active,
.sidebar-menu ul li a i.active,
.sidebar-menu ul li a svg.active {
  color: var(--colorPrimary) !important;
}
.sidebar .sidebar-menu > ul > li > a.active span,
.sidebar .sidebar-menu > ul > li > a.active i,
.sidebar .sidebar-menu > ul > li > a.active svg,
.sidebar .sidebar-menu > ul > li > a span.active span,
.sidebar .sidebar-menu > ul > li > a span.active i,
.sidebar .sidebar-menu > ul > li > a span.active svg,
.app-menu .menu > li > a.active span,
.app-menu .menu > li > a.active i,
.app-menu .menu > li > a.active svg,
.sidebar-menu .menu > li > a.active span,
.sidebar-menu .menu > li > a.active i,
.sidebar-menu .menu > li > a.active svg,
.sidebar-menu .menu > li > a span.active span,
.sidebar-menu .menu > li > a span.active i,
.sidebar-menu .menu > li > a span.active svg,
.app-menu .menu > li > a span.active span,
.app-menu .menu > li > a span.active i,
.app-menu .menu > li > a span.active svg,
.sidebar-menu ul li a i.active span,
.sidebar-menu ul li a i.active i,
.sidebar-menu ul li a i.active svg,
.sidebar-menu ul li a svg.active span,
.sidebar-menu ul li a svg.active i,
.sidebar-menu ul li a svg.active svg {
  color: var(--colorPrimary) !important;
}
.sidebar .sidebar-menu > ul > li > a .menu-arrow,
.sidebar .sidebar-menu > ul > li > a span .menu-arrow,
.app-menu .menu > li > a .menu-arrow,
.sidebar-menu .menu > li > a .menu-arrow,
.sidebar-menu .menu > li > a span .menu-arrow,
.app-menu .menu > li > a span .menu-arrow,
.sidebar-menu ul li a i .menu-arrow,
.sidebar-menu ul li a svg .menu-arrow {
  right: auto !important;
  left: 15px !important;
}
.sidebar .sidebar-menu > ul > li > a .menu-arrow::before,
.sidebar .sidebar-menu > ul > li > a span .menu-arrow::before,
.app-menu .menu > li > a .menu-arrow::before,
.sidebar-menu .menu > li > a .menu-arrow::before,
.sidebar-menu .menu > li > a span .menu-arrow::before,
.app-menu .menu > li > a span .menu-arrow::before,
.sidebar-menu ul li a i .menu-arrow::before,
.sidebar-menu ul li a svg .menu-arrow::before {
  border-color: #1E293B !important;
  transform: rotate(135deg) !important;
}

/* Submenu/Child Items */
.sidebar .sidebar-menu ul ul li a,
.sidebar .sidebar-menu ul ul li a span,
.app-menu .menu .submenu li a,
.sidebar-menu .menu .submenu li a,
.sidebar-menu .menu .submenu li a span,
.app-menu .menu .submenu li a span,
.sidebar-layout .app-menu .menu .submenu > li > a,
.sidebar-layout .app-menu .menu .submenu > li > a span {
  color: #2C3E50 !important;
  /* EXACT LTR SUB MODULE COLOR */
  font-weight: 500 !important;
}
.sidebar .sidebar-menu ul ul li a span,
.sidebar .sidebar-menu ul ul li a span span,
.app-menu .menu .submenu li a span,
.sidebar-menu .menu .submenu li a span,
.sidebar-menu .menu .submenu li a span span,
.app-menu .menu .submenu li a span span,
.sidebar-layout .app-menu .menu .submenu > li > a span,
.sidebar-layout .app-menu .menu .submenu > li > a span span {
  color: #2C3E50 !important;
}

.main-menu-title {
  text-align: right !important;
  color: #8FA2B4 !important;
  /* Lite blue-gray from LTR */
  font-weight: 600 !important;
  padding-right: 20px !important;
}

.menu-header {
  text-align: right !important;
  display: flex !important;
  justify-content: flex-start !important;
  padding: 10px 20px !important;
  color: #6C757D !important;
  /* Lite gray from LTR */
  font-weight: 500 !important;
}
.menu-header span {
  margin-right: 10px !important;
  margin-left: 0 !important;
}

/* 7. RTL MOBILE SIDEBAR - CRITICAL FIX */
@media (max-width: 991px) {
  /* Sidebar slides from RIGHT in RTL mode */
  .sidebar,
  .app-menu,
  aside.app-menu {
    left: auto !important;
    right: -280px !important;
    /* Start hidden off-screen on right */
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(0) !important;
    transition: right 0.3s ease-in-out !important;
    overflow-y: auto !important;
    visibility: hidden;
    pointer-events: auto !important;
  }
  /* When menu is opened - slide in from right */
  .slide-nav .sidebar,
  .slide-nav .app-menu,
  .menu-opened .sidebar,
  .menu-opened .app-menu,
  body.slide-nav .sidebar,
  body.sidebar-show .sidebar,
  body.sidebar-show .app-menu,
  .sidebar-layout.sidebar-show .sidebar,
  .sidebar-layout.sidebar-show .app-menu {
    right: 0 !important;
    /* Slide to visible position */
    left: auto !important;
    visibility: visible !important;
  }
  /* Overlay for RTL mobile */
  .sidebar-overlay {
    left: 0 !important;
    right: 0 !important;
  }
  /* Header in mobile RTL */
  .header,
  header,
  .app-navbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  /* Content area in mobile - GLOBAL OVERRIDE */
  [dir=rtl] .page-wrapper,
  [dir=rtl] main,
  .page-wrapper,
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  /* Toggle button in RTL mobile */
  #toggle_btn,
  .mobile_btn {
    right: auto !important;
    left: 15px !important;
  }
  /* Bar icon animation in RTL */
  .bar-icon {
    transform: scaleX(-1) !important;
  }
}
/* ============================================ */
/* ULTRA-AGGRESSIVE RTL WIDTH LOCKDOWN          */
/* Fixes: Global width overflow on all pages    */
/* ============================================ */
/* Force ALL children of main/page-wrapper to never exceed boundaries */
.page-wrapper,
.page-wrapper > *,
.page-wrapper * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main,
main > *,
main * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Lock down all container types */
.content,
.main-content,
.page-content,
.dashboard-container,
.orders-list-container,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Force all cards and panels */
.card,
.card-body,
.card-header,
.card-footer,
.panel,
.panel-body {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Lock down table containers */
.table-responsive,
.dataTables_wrapper,
.table-container,
.modern-table-container {
  max-width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

/* Lock down rows and columns */
.row {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

[class*=col-] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Lock down Angular component hosts */
[_nghost-ng-c],
[_ngcontent-ng-c] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Lock down form controls and inputs */
.form-group,
.form-control,
.input-group {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Desktop RTL Width Constraints (992px and above) - SCOPED TO RTL ONLY */
@media (min-width: 992px) {
  /* Ensure desktop containers don't overflow AND expand to fill space */
  html[dir=rtl] .page-wrapper,
  html[dir=rtl] main {
    width: calc(100vw - 260px) !important;
    /* Forces expansion to fill available space */
    max-width: calc(100vw - 260px) !important;
    /* Account for sidebar */
    overflow-x: hidden !important;
  }
  /* When sidebar is closed */
  html[dir=rtl] body.sidebar-closed .page-wrapper,
  html[dir=rtl] body.sidebar-closed main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* All internal content must fit within these bounds */
  html[dir=rtl] .page-wrapper *,
  html[dir=rtl] main * {
    max-width: 100% !important;
  }
}
/* ============================================ */
/* SIDEBAR LAYOUT GAP FIX - V2 (TUNED)          */
/* ============================================ */
/* Reduce space between sidebar and content by setting margin and reducing padding */
@media (min-width: 992px) {
  /* Default Open Sidebar: 250px Margin + 0px Padding (Minimal Gap) */
  html:not([dir=rtl]) body.sidebar-layout:not(.sidebar-mini):not(.sidebar-closed) main {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* ============================================ */
/* MODAL RIGHT FIX - V2 (TOP OFFSET)            */
/* ============================================ */
/* Override positioning to push drawer below header */
.modal.right .modal-content {
  top: 62px !important;
  height: calc(100vh - 62px) !important;
  border-top-left-radius: 8px !important;
}

@media (max-width: 768px) {
  .modal.right .modal-content {
    top: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
}
/* ============================================ */
/* MOBILE LAYOUT FIX - PERFECT CENTER           */
/* ============================================ */
@media (max-width: 991px) {
  body.sidebar-layout .page-wrapper,
  body.sidebar-layout main,
  .page-wrapper,
  main {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Ensure internal containers are centered and don't overflow */
  .container-fluid,
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  /* Fix Bootstrap row negative margins - compensate with proper padding */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Ensure columns have balanced padding */
  [class*=col-] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
  /* ALL page components and content centering - COMPREHENSIVE FIX */
  /* Dashboard components */
  app-admin-dashboard,
  app-manager-dashboard,
  app-cashier-dashboard,
  app-staff-dashboard,
  app-hq-dashboard,
  app-accountant-dashboard,
  app-employee-dashboard,
  [class*=-dashboard],
  .dashboard-container,
  [class*=-list],
  [class*=list-],
  [class*=-add],
  [class*=add-],
  [class*=-edit],
  [class*=edit-],
  [class*=-form],
  [class*=-report],
  [class*=report-],
  [class*=-settings],
  [class*=settings-],
  .content,
  .main-content,
  .page-content,
  .module-content,
  .purchase-content,
  .loss-prevention-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Balanced Padding for Mobile - Balanced for LTR & RTL */
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  /* Angular component hosts - force proper centering */
  [_nghost-ng-c] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  /* Card components on mobile */
  .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  /* Table containers */
  .table-responsive,
  .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
/* ============================================ */
/* TABLET LAYOUT FIX (768px and below)          */
/* ============================================ */
@media (max-width: 768px) {
  body.sidebar-layout .page-wrapper,
  body.sidebar-layout main,
  .page-wrapper,
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .container-fluid,
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  [class*=col-] {
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: 100% !important;
    /* Force columns to stack */
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 15px !important;
  }
  /* Force touch targets for better UX on forms/buttons */
  .form-control,
  .form-select,
  .btn,
  select:not([multiple]),
  .ng-select-container {
    min-height: 44px !important;
  }
  /* Action wrapping for button groups */
  .btn-group,
  .header-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}
/* ============================================ */
/* SMALL PHONE LAYOUT FIX (575px and below)     */
/* ============================================ */
@media (max-width: 575px) {
  body.sidebar-layout .page-wrapper,
  body.sidebar-layout main,
  .page-wrapper,
  main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .container-fluid,
  .container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  [class*=col-] {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* ============================================ */
/* MOBILE SIDEBAR DRAWER (LTR ONLY) - Burger Toggle  */
/* ============================================ */
@media (max-width: 991px) {
  /* LTR Sidebar - slides from LEFT (NOT applied in RTL mode) */
  html:not([dir=rtl]) .sidebar,
  html:not([dir=rtl]) .app-menu,
  html:not([dir=rtl]) aside.app-menu {
    position: fixed !important;
    left: -280px !important;
    right: auto !important;
    top: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1100 !important;
    pointer-events: auto !important;
    /* Changed from none to auto */
    overflow-y: auto !important;
    /* Fix scroller not working */
    transition: left 0.3s ease-in-out !important;
    background-color: #fff !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
    visibility: hidden;
    /* Hide from screen readers when closed */
  }
  app-sidebar-menu > * {
    pointer-events: auto !important;
  }
  /* When sidebar-layout has sidebar-show - slide in from left (LTR ONLY) */
  html:not([dir=rtl]) .sidebar-layout.sidebar-show .sidebar,
  html:not([dir=rtl]) .sidebar-layout.sidebar-show .app-menu,
  html:not([dir=rtl]) .sidebar-layout.sidebar-show aside.app-menu {
    left: 0 !important;
  }
  /* Fallback: When sidebar itself has sidebar-show class (LTR ONLY) */
  html:not([dir=rtl]) .sidebar.sidebar-show,
  html:not([dir=rtl]) .app-menu.sidebar-show,
  html:not([dir=rtl]) aside.app-menu.sidebar-show {
    left: 0 !important;
  }
  /* Mobile menu backdrop (applies to both LTR and RTL) */
  .mobile-menu-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1055 !important;
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out !important;
  }
  .mobile-menu-backdrop.active {
    display: block !important;
    opacity: 1;
  }
  /* Prevent body scroll when sidebar is open */
  body.sidebar-open {
    overflow: hidden !important;
  }
  /* Header in mobile */
  .header,
  header,
  .app-navbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1040 !important;
  }
}
/* GLOBAL TABLE RESPONSIVE SCROLLBAR */
/* ======================================================================== */
/* ULTRA-AGGRESSIVE GLOBAL TABLE SCROLLBARS - BLUE THEME (#4885ED)          */
/* ======================================================================== */
/* This section forces blue scrollbars on ALL responsive tables and DataTables */
/* 1. Standard Responsive Tables */
.table-responsive,
[class*=table-responsive],
.modern-table-container,
.table-container {
  overflow-x: auto !important;
  display: block !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}
.table-responsive::-webkit-scrollbar,
[class*=table-responsive]::-webkit-scrollbar,
.modern-table-container::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
  display: block !important;
}
.table-responsive::-webkit-scrollbar-track,
[class*=table-responsive]::-webkit-scrollbar-track,
.modern-table-container::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background: #f1f4f9 !important;
  border-radius: 10px !important;
}
.table-responsive::-webkit-scrollbar-thumb,
[class*=table-responsive]::-webkit-scrollbar-thumb,
.modern-table-container::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background: #4885ED !important;
  border-radius: 10px !important;
  border: 2px solid #f1f4f9 !important;
}
.table-responsive::-webkit-scrollbar-thumb:hover,
[class*=table-responsive]::-webkit-scrollbar-thumb:hover,
.modern-table-container::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
  background: #3b74db !important;
}

/* 2. DataTables Specific Containers */
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_scrollBody,
div.dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
div.dataTables_scrollBody::-webkit-scrollbar {
  height: 10px !important;
  display: block !important;
}
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track,
div.dataTables_scrollBody::-webkit-scrollbar-track {
  background: #f1f4f9 !important;
}
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb,
div.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: #4885ED !important;
  border-radius: 10px !important;
  border: 2px solid #f1f4f9 !important;
}
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: #3b74db !important;
}

/* 3. Global Fallback for any overflowing element that might be a table container */
[style*="overflow-x: auto"]::-webkit-scrollbar,
[style*="overflow-x: scroll"]::-webkit-scrollbar {
  height: 10px !important;
}
[style*="overflow-x: auto"]::-webkit-scrollbar-thumb,
[style*="overflow-x: scroll"]::-webkit-scrollbar-thumb {
  background: #4885ED !important;
}

/* 4. Fix for the Blue Header in Dashboard Tables */
.modern-table thead th {
  background-color: #4885ED !important;
  color: white !important;
  white-space: nowrap !important;
  /* Forces horizontal overflow */
}

/* ============================================ */
/* FLOATING WHATSAPP BUTTON - GLOBAL            */
/* ============================================ */
.whatsapp-floating-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: #fff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  text-decoration: none;
  transition: all 0.3s ease;
  animation: whatsapp-glow 2s infinite;
}
.whatsapp-floating-btn:hover {
  transform: scale(1.1);
  background-color: #20b358;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.whatsapp-floating-btn i {
  position: relative;
  z-index: 2;
}

.whatsapp-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #25D366;
  z-index: 1;
  opacity: 0.7;
  animation: whatsapp-pulse-anim 2s infinite;
}

@keyframes whatsapp-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
@keyframes whatsapp-pulse-anim {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
/* Responsive adjustment for Mobile */
@media (max-width: 768px) {
  .whatsapp-floating-btn {
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
}
/* Hide WhatsApp button on POS page */
app-pos ~ .whatsapp-floating-btn {
  display: none !important;
}

/* ============================================ */
/* TOASTER NOTIFICATION FIX                     */
/* ============================================ */
#toasters {
  position: fixed !important;
  top: 80px !important;
  right: 20px !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  pointer-events: none !important;
  /* Allow clicks through container */
  max-width: 420px !important;
  width: auto !important;
  align-items: flex-end !important;
  /* Align toasts to right */
}

/* Ensure toasts are block elements and stackable */
.modern-toast {
  pointer-events: auto !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  width: 350px !important;
  /* Fixed width for typical toasts */
  max-width: 100% !important;
  display: flex !important;
  /* Internal flex layout */
  flex-direction: row !important;
  /* Layout content horizontally */
  margin-bottom: 10px !important;
  clear: both !important;
  float: none !important;
}

/* Ensure toast content stacks correctly */
.modern-toast-content {
  display: flex !important;
  align-items: flex-start !important;
  padding: 16px !important;
  gap: 14px !important;
  width: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #toasters {
    top: 60px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
    align-items: stretch !important;
    /* Full width on mobile */
  }
}
/* Removed: MINI SIDEBAR OVERRIDES */
/* Developed by Heavycoders Technologies - WhatsApp: +918317493452 */
@media (max-width: 991px) {
  /* Ensure header stays ABOVE backdrop */
  .header,
  header.app-navbar,
  .app-navbar {
    z-index: 1100 !important;
  }
  /* LTR SIDEBAR (Default) */
  html:not([dir=rtl]) body.sidebar-layout .app-menu,
  html:not([dir=rtl]) body.sidebar-layout aside.app-menu,
  html:not([dir=rtl]) .app-menu,
  html:not([dir=rtl]) .sidebar {
    /* CRITICAL OVERRIDES for site.css poison */
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
    clip: auto !important;
    clip-path: none !important;
    contain: none !important;
    margin-left: 0 !important;
    transition: transform 0.3s ease-in-out !important;
    display: block !important;
    z-index: 1150 !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 252px !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html:not([dir=rtl]) body.sidebar-show .app-menu,
  html:not([dir=rtl]) body.sidebar-show aside.app-menu,
  html:not([dir=rtl]) body.sidebar-open .app-menu {
    transform: translateX(0) !important;
  }
  /* RTL SIDEBAR */
  html[dir=rtl] body.sidebar-layout .app-menu,
  html[dir=rtl] body.sidebar-layout aside.app-menu,
  html[dir=rtl] .app-menu,
  html[dir=rtl] .sidebar {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
    clip: auto !important;
    clip-path: none !important;
    contain: none !important;
    margin-right: 0 !important;
    transition: transform 0.3s ease-in-out !important;
    display: block !important;
    z-index: 1150 !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 252px !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html[dir=rtl] body.sidebar-show .app-menu,
  html[dir=rtl] body.sidebar-show aside.app-menu,
  html[dir=rtl] body.sidebar-open .app-menu {
    transform: translateX(0) !important;
  }
  /* Mobile Backdrop - START BELOW HEADER so toggle remains clickable */
  .mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1140 !important;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .mobile-menu-backdrop.active,
  body.sidebar-show .mobile-menu-backdrop {
    display: block !important;
    opacity: 1 !important;
  }
  /* Ensure content doesn't shift on mobile when menu opens */
  .page-wrapper,
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}
/* ============================================ */
/* NUCLEAR RTL SIDEBAR COLOR FIX - REFINED      */
/* ============================================ */
html[dir=rtl] {
  /* Targets all sidebar links that are NOT active to use a Lite color */
}
html[dir=rtl] .sidebar .sidebar-menu ul li a:not(.active),
html[dir=rtl] .app-menu .menu li a:not(.active),
html[dir=rtl] .sidebar-menu .menu li a:not(.active),
html[dir=rtl] .sidebar .sidebar-menu ul li a:not(.active) span,
html[dir=rtl] .app-menu .menu li a:not(.active) span,
html[dir=rtl] .sidebar-menu .menu li a:not(.active) span {
  color: #6C757D !important;
  /* Lite Color - matching LTR secondary text */
  font-weight: 500 !important;
}
html[dir=rtl] {
  /* Category titles and headers in RTL */
}
html[dir=rtl] .main-menu-title,
html[dir=rtl] .menu-header,
html[dir=rtl] .menu-header span {
  color: #8FA2B4 !important;
  /* Light blue-gray title color */
  font-weight: 600 !important;
}
html[dir=rtl] {
  /* Icons and arrows in unselected RTL items */
}
html[dir=rtl] .sidebar-menu ul li a:not(.active) i,
html[dir=rtl] .sidebar-menu ul li a:not(.active) svg,
html[dir=rtl] .sidebar-menu ul li a:not(.active) img,
html[dir=rtl] .menu-arrow:not(.active) {
  color: #919EAB !important;
  /* Lighter icon color */
}
html[dir=rtl] {
  /* Submenu items specifically */
}
html[dir=rtl] .sidebar-menu .submenu li a:not(.active),
html[dir=rtl] .sidebar-menu .submenu li a:not(.active) span {
  color: #7E8FA2 !important;
  /* Even lighter for nested items */
  font-weight: 400 !important;
}
html[dir=rtl] {
  /* FORCED ACTIVE STATE - Ensures the theme color wins over forced grays */
}
html[dir=rtl] .sidebar-menu li.active > a,
html[dir=rtl] .sidebar-menu li a.active,
html[dir=rtl] .sidebar-menu li.active > a span,
html[dir=rtl] .sidebar-menu li a.active span,
html[dir=rtl] .sidebar-menu li.active > a i,
html[dir=rtl] .sidebar-menu li a.active i,
html[dir=rtl] .sidebar-menu li.active > a svg,
html[dir=rtl] .sidebar-menu li a.active svg {
  color: var(--colorPrimary) !important;
}

/* Removed: Explicit RTL Fixes for Mini Sidebar */
/* ======================================================================== */
/* GLOBAL HEADER ALIGNMENT FIX (LTR & RTL PREVENT GAPS)                     */
/* ======================================================================== */
.app-navbar,
header.app-navbar {
  padding: 0 !important;
  margin: 0 !important;
}

/* Legacy specific bullet hiding wrappers removed to allow standard tree view dot mapping globally */
/* ============================================ */
/* RTL Support for Sidebar position and borders */
html[dir=rtl] body.sidebar-layout .app-menu,
html[dir=rtl] body.sidebar-layout aside.app-menu {
  left: auto !important;
  right: 0 !important;
  border-right: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Ensure perfectly rigid full height without sneaky padding pushing the footer up */
html body .sidebar-layout .app-menu,
html body .sidebar-layout aside.app-menu {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure menu list also has background and fills space */
html body .sidebar-layout .app-menu .menu {
  background-color: #ffffff !important;
}

/* Sidebar layout structure improvements */
html body .sidebar-layout .app-menu,
html body .sidebar-layout aside.app-menu {
  display: flex !important;
  flex-direction: column !important;
  background-color: #ffffff !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Let the menu wrapper take only the space it needs, or grow to fill if needed */
html body .sidebar-layout .app-menu .menu-wrapper {
  background-color: #ffffff !important;
  flex: 0 1 auto !important; /* Don't force empty space if not needed */
  overflow-y: auto !important;
  padding-bottom: 10px !important;
}

/* Standardized Dashboard alignment - ensure it matches HQ Panel and others */
.main-dashboard-item a {
  padding-left: 15px !important;
}

.main-dashboard-item a img {
  margin-left: 3px !important; /* Visual correction to reach X=15 */
}

.sidebar-footer {
  position: relative !important;
  margin-top: 30px !important; /* Fixed gap for natural placement following the menu */
  background-color: #f8fafc !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  z-index: 10 !important;
  min-height: 68px;
  padding: 15px !important;
}

/* Ensure the sidebar aside doesn't have a fixed height if we want the footer to move */
/* However, aside usually needs height: 100vh for the scrollbar to work inside menu-wrapper */
aside.app-menu {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
}

.sidebar-footer:hover {
  background-color: #f1f5f9 !important;
}

/* ============================================ */
/* THEME WIDE COMPONENT OVERRIDES (Navbars, Logos)*/
/* ============================================ */
/* Force Full Logo to always display in both sidebars AND top navbar headers */
html body .app-navbar .logo img.logo-full,
html body .sidebar-layout .app-menu .header .logo .logo-full {
  display: inline-block !important;
}

html body .app-navbar .logo img.logo-mini,
html body .sidebar-layout .app-menu .header .logo .logo-mini {
  display: none !important;
}

/* ============================================ */
/* SIDEBAR MENU ALIGNMENT FIX                   */
/* ============================================ */
/* Targeted fix for Dashboard text position */
.sidebar-layout .app-menu .menu li a,
.sidebar-layout .app-menu .menu li .menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.sidebar-layout .app-menu .menu li a .lucide-icon,
.sidebar-layout .app-menu .menu li a i:not(.side-menu__angle),
.sidebar-layout .app-menu .menu li a .submenu-bullet,
.sidebar-layout .app-menu .menu li .menu-header .lucide-icon,
.sidebar-layout .app-menu .menu li .menu-header i {
  margin-right: 12px !important;
  width: 18px !important;
  display: flex !important;
  justify-content: center !important;
}

.sidebar-layout .app-menu .menu li a .side-menu__angle {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Sidebar Spacing Optimization */
/* Standardized Sidebar Spacing (Matches X=15 for icons) */
.sidebar-layout .app-menu .menu li a {
  padding: 8px 15px !important; /* X=15 alignment */
  min-height: 40px !important;
}

.sidebar-layout .app-menu .menu li .menu-header {
  padding: 12px 15px 4px !important; /* X=15 alignment */
  font-size: 11px !important;
  font-weight: 700 !important;
  opacity: 0.8;
}

.sidebar-layout .app-menu .menu li a i,
.sidebar-layout .app-menu .menu li a .lucide-icon {
  font-size: 18px !important;
}

/* RTL Support for Alignment */
html[dir=rtl] .sidebar-layout .app-menu .menu li a,
html[dir=rtl] .sidebar-layout .app-menu .menu li .menu-header {
  justify-content: flex-start !important;
}
html[dir=rtl] .sidebar-layout .app-menu .menu li a .lucide-icon,
html[dir=rtl] .sidebar-layout .app-menu .menu li a i:not(.side-menu__angle),
html[dir=rtl] .sidebar-layout .app-menu .menu li a .submenu-bullet,
html[dir=rtl] .sidebar-layout .app-menu .menu li .menu-header .lucide-icon,
html[dir=rtl] .sidebar-layout .app-menu .menu li .menu-header i {
  margin-right: 0 !important;
  margin-left: 12px !important;
}
html[dir=rtl] .sidebar-layout .app-menu .menu li a .side-menu__angle {
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: rotate(180deg) !important;
}

/* ============================================ */
/* LAYOUT MARGIN REPAIR                         */
/* ============================================ */
/* Ensure main content is pushed when sidebar is present */
@media (min-width: 992px) {
  /* Standard Layout: Sidebar Open */
  /* Target via class restored in AppComponent */
  body.sidebar-layout main,
  html body.sidebar-layout main {
    margin-left: 250px !important;
    margin-right: 0 !important;
    /* Match sidebar width */
    width: auto !important;
    /* Allow normal block flow, not forced calculation */
    max-width: calc(100vw - 250px) !important;
    /* Prevent overflow */
    transition: margin-left 0.3s ease, margin-right 0.3s ease, width 0.3s ease;
  }
  /* RTL: Sidebar is on right side, so use margin-right */
  html[dir=rtl] body.sidebar-layout main,
  html[dir=rtl] html body.sidebar-layout main {
    margin-left: 0 !important;
    margin-right: 250px !important;
    width: auto !important;
    /* KEY: auto width prevents overflow */
    max-width: calc(100vw - 250px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Exceptions: Explicitly closed, POS, or Modal Open (if needed) */
  body.sidebar-closed main,
  body:not(.sidebar-layout) main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* Hide sidebar when explicitly closed */
  body.sidebar-closed .app-menu,
  body.sidebar-closed aside.app-menu {
    transform: translateX(-100%) !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* RTL: Sidebar is on right side */
  html[dir=rtl] body.sidebar-closed .app-menu,
  html[dir=rtl] body.sidebar-closed aside.app-menu {
    transform: translateX(100%) !important;
  }
  /* SIDEBAR VISIBILITY DURING MODAL */
  /* Ensure sidebar stays visible and positioned when modal is open, to prevent "collapse" look */
  body.sidebar-layout.modal-open .app-menu,
  body.sidebar-layout.modal-open aside.app-menu {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1040 !important;
    /* Keeps sidebar below modal (1055) but visible */
  }
}
/* Ensure mobile behaves correctly (overlay) */
@media (max-width: 991px) {
  body.sidebar-layout main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}
/* Kill Mini-Sidebar Artifacts */
body.mini-sidebar .app-menu,
body.mini-sidebar main {
  width: auto !important;
  transition: none !important;
}

.sidebar-mini-icon,
.mini-sidebar-toggle {
  display: none !important;
}

/* ============================================ */
/* MODAL WIDTH FIX                              */
/* ============================================ */
/* Prevent modal expansion to full screen width */
/* Force standard Bootstrap dimensions */
.modal-dialog {
  max-width: 500px !important;
  margin: 1.75rem auto !important;
  width: auto !important;
  /* Begin Center Fix */
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem) !important;
}

.modal-dialog.modal-lg {
  max-width: 800px !important;
}

.modal-dialog.modal-xl {
  max-width: 1140px !important;
}

.modal-dialog.modal-sm {
  max-width: 300px !important;
}

/* Ensure clean borders and content fit */
.modal-content {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Responsive Handling */
@media (max-width: 768px) {
  .modal-dialog {
    max-width: 96% !important;
    margin: 10px auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 20px) !important;
  }
  .modal-content {
    border-radius: 12px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 576px) {
  .modal-dialog {
    max-width: 98% !important;
    margin: 5px auto !important;
  }
}
/* ============================================ */
/* LANGUAGE DROPDOWN WIDTH FIX                  */
/* ============================================ */
/* Force wider dropdown for better visibility */
/* ============================================ */
/* LANGUAGE DROPDOWN WIDTH FIX - HIGH SPECIFICITY */
/* ============================================ */
/* Force wider dropdown using multi-class selector to win specificity wars */
/* ============================================ */
/* LANGUAGE DROPDOWN WIDTH FIX - RESPONSIVE     */
/* ============================================ */
html body.sidebar-layout .header-item-language .dropdown-menu.language-dropdown.show,
html body .language-dropdown.show,
.header-item-language .language-dropdown.show {
  width: 480px !important;
  min-width: 480px !important;
  max-width: 95vw !important;
  padding: 15px !important;
}

@media (max-width: 575px) {
  html body.sidebar-layout .header-item-language .dropdown-menu.language-dropdown.show,
  html body .language-dropdown.show {
    width: auto !important;
    min-width: 160px !important;
    max-width: 90vw !important;
  }
  /* LTR: language dropdown aligned to right of icon */
  html:not([dir=rtl]) .header-item-language .language-dropdown.show {
    right: 0 !important;
    left: auto !important;
  }
  /* RTL: language dropdown aligned to left of icon */
  html[dir=rtl] .header-item-language .language-dropdown.show {
    left: 0 !important;
    right: auto !important;
  }
}
/* Ensure language name text force visibility natively */
html body .language-dropdown .language-picker .language-name {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #000000 !important;
  width: auto !important;
  min-width: 50px !important;
}

/* Global Language single column - Reduced width */
html body .language-dropdown {
  min-width: 45vw !important;
  max-width: 45vw !important;
  width: 45vw !important;
}

html body .language-dropdown .language-grid {
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body .language-dropdown .language-picker {
  padding: 6px 10px !important;
  justify-content: flex-start !important;
  font-size: 13px !important;
}

html body .language-grid,
.language-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
}

@media (max-width: 991px) {
  html body .language-grid,
  .language-grid {
    grid-template-columns: 1fr !important;
  }
}
html body .language-picker {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #E9EDF4 !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
}

html body .language-picker:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Soft Badge Colors */
.bg-soft-primary {
  background-color: rgba(13, 110, 253, 0.1) !important;
  color: #0d6efd !important;
}

.bg-soft-secondary {
  background-color: rgba(108, 117, 125, 0.1) !important;
  color: #6c757d !important;
}

.bg-soft-success {
  background-color: rgba(25, 135, 84, 0.1) !important;
  color: #198754 !important;
}

.bg-soft-info {
  background-color: rgba(13, 202, 240, 0.1) !important;
  color: #0dcaf0 !important;
}

.bg-soft-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #ffc107 !important;
}

.bg-soft-danger {
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
}

.bg-soft-dark {
  background-color: rgba(33, 37, 41, 0.1) !important;
  color: #212529 !important;
}

/* ============================================ */
/* PROFILE WIDGET LAYOUT FIX (V1)               */
/* ============================================ */
/* Modern Flexbox overhaul for Profile Header to fix misalignment */
@media (min-width: 576px) {
  .profile-widget .profile-widget-header {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
    padding-bottom: 0 !important;
  }
  .profile-widget .profile-widget-picture {
    margin: 20px !important;
    float: none !important;
    flex-shrink: 0 !important;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    position: static !important;
  }
  .profile-widget .profile-widget-items {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    margin-left: 0 !important;
  }
  /* Hide the legacy border line */
  .profile-widget .profile-widget-items:after {
    display: none !important;
  }
  /* Reset item borders */
  .profile-widget .profile-widget-items .profile-widget-item {
    border-right: 1px solid #e9ecef !important;
    padding: 10px 0 !important;
  }
  .profile-widget .profile-widget-items .profile-widget-item:last-child {
    border-right: none !important;
  }
}
/* ============================================ */
/* MODAL RIGHT FIX                              */
/* ============================================ */
/* Fix auto-expanding issue for right-side modals by enforcing width */
/* Sizing & Z-Index */
.modal.right .modal-dialog,
.modal.right .modal-content {
  width: 600px !important;
  max-width: 90vw !important;
  z-index: 1061 !important;
}

/* Visuals ONLY for the drawer content */
.modal.right .modal-content {
  background-color: #ffffff !important;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure wrapper is transparent */
.modal.right .modal-dialog {
  background-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .modal.right .modal-dialog,
  .modal.right .modal-content {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ==========================================================================
   MASTER LAYOUT STANDARDIZATION SYSTEM (Desktop + Mobile + RTL + LTR)
   Version: 3.0 (Final Production Patch)
   ========================================================================== */
:root {
  /* GLOBAL DIMENSIONS & SPACING */
  --sidebar-width: 250px;
  --header-height: 60px;
  --page-padding: 15px;
  --card-padding: 20px;
  --mobile-padding: 12px;
  --input-height: 45px;
  /* Mobile friendly touch target */
  --btn-height: 40px;
  --radius-std: 8px;
  --radius-card: 12px;
}

/* 1. GLOBAL RESET & BASE
   ========================================================================== */
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden !important;
  background-color: #f5f6fa;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 2. DESKTOP LAYOUT ARCHITECTURE
   ========================================================================== */
/* HEADER */
header.app-navbar,
.header {
  position: fixed !important;
  top: 0 !important;
  height: var(--header-height) !important;
  z-index: 999 !important;
  background: #fff !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04) !important;
  width: auto !important;
  transition: all 0.3s ease-in-out !important;
}

/* SIDEBAR */
.sidebar,
.app-menu {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  z-index: 1000 !important;
  background: #fff !important;
  transition: transform 0.3s ease-in-out !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02) !important;
}

/* MAIN CONTENT WRAPPER */
.page-wrapper,
main,
.main-content {
  position: relative !important;
  min-height: 100vh !important;
  padding-top: calc(var(--header-height) + var(--page-padding)) !important;
  padding-left: var(--page-padding) !important;
  padding-right: var(--page-padding) !important;
  padding-bottom: var(--page-padding) !important;
  box-sizing: border-box !important;
  transition: margin 0.3s ease-in-out !important;
  display: block !important;
}

/* Fix for nested main-content double padding */
main .main-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}

/* 3. LTR & RTL LOGIC (Desktop)
   ========================================================================== */
/* LTR (Left-to-Right) */
html:not([dir=rtl]) .sidebar {
  left: 0 !important;
  right: auto !important;
}
html:not([dir=rtl]) {
  /* Sidebar Open */
}
html:not([dir=rtl]) body.sidebar-open header.app-navbar {
  left: var(--sidebar-width) !important;
  right: 0 !important;
}
html:not([dir=rtl]) body.sidebar-open .page-wrapper,
html:not([dir=rtl]) body.sidebar-open main {
  margin-left: var(--sidebar-width) !important;
  margin-right: 0 !important;
}
html:not([dir=rtl]) {
  /* Sidebar Closed */
}
html:not([dir=rtl]) body.sidebar-closed .sidebar {
  transform: translateX(-100%) !important;
}
html:not([dir=rtl]) body.sidebar-closed .page-wrapper,
html:not([dir=rtl]) body.sidebar-closed main {
  margin-left: 0 !important;
}
html:not([dir=rtl]) body.sidebar-closed header.app-navbar {
  left: 0 !important;
}

/* RTL (Right-to-Left) */
[dir=rtl] .sidebar {
  right: 0 !important;
  left: auto !important;
}
[dir=rtl] {
  /* Sidebar Open */
}
[dir=rtl] body.sidebar-open header.app-navbar {
  right: var(--sidebar-width) !important;
  left: 0 !important;
}
[dir=rtl] body.sidebar-open .page-wrapper,
[dir=rtl] body.sidebar-open main {
  margin-right: var(--sidebar-width) !important;
  margin-left: 0 !important;
}
[dir=rtl] {
  /* Sidebar Closed */
}
[dir=rtl] body.sidebar-closed .sidebar {
  transform: translateX(100%) !important;
}
[dir=rtl] body.sidebar-closed .page-wrapper,
[dir=rtl] body.sidebar-closed main {
  margin-right: 0 !important;
}
[dir=rtl] body.sidebar-closed header.app-navbar {
  right: 0 !important;
}
[dir=rtl] {
  /* RTL FLIPS */
}
[dir=rtl] body,
[dir=rtl] .page-header,
[dir=rtl] .card-header,
[dir=rtl] .form-label,
[dir=rtl] .form-control {
  text-align: right !important;
}
[dir=rtl] .text-start {
  text-align: right !important;
}
[dir=rtl] .text-end {
  text-align: left !important;
}
[dir=rtl] .float-start {
  float: right !important;
}
[dir=rtl] .float-end {
  float: left !important;
}
[dir=rtl] .ms-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}
[dir=rtl] .me-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}
[dir=rtl] {
  /* Input & Table Alignment */
}
[dir=rtl] input,
[dir=rtl] textarea,
[dir=rtl] select {
  text-align: right !important;
}
[dir=rtl] th,
[dir=rtl] td {
  text-align: right !important;
}
[dir=rtl] {
  /* Flex Direction Flip */
}
[dir=rtl] .d-flex,
[dir=rtl] .row,
[dir=rtl] .btn-group {
  flex-direction: row-reverse !important;
}
[dir=rtl] {
  /* Icon Flip */
}
[dir=rtl] .fa-chevron-right,
[dir=rtl] .fa-arrow-right {
  transform: scaleX(-1) !important;
}
[dir=rtl] .fa-chevron-left,
[dir=rtl] .fa-arrow-left {
  transform: scaleX(-1) !important;
}

/* 4. COMPONENT STANDARDIZATION (Consistent UI)
   ========================================================================== */
/* CARDS */
.card {
  border: none !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 20px !important;
  background: #fff !important;
}

.card-header {
  background: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 15px 20px !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}

.card-body {
  padding: var(--card-padding) !important;
}

/* TABLES */
.table-responsive {
  border-radius: 8px;
  overflow: hidden;
}

.table thead th {
  background-color: #f8f9fa !important;
  color: #333 !important;
  font-weight: 600 !important;
  padding: 12px 15px !important;
  border-bottom: 2px solid #e9ecef !important;
  white-space: nowrap !important;
}

.table tbody td {
  padding: 12px 15px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* FORMS */
.form-group {
  margin-bottom: 20px !important;
}

.form-label {
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  color: #555;
}

.form-control,
.form-select {
  height: var(--input-height) !important;
  border-radius: var(--radius-std) !important;
  border: 1px solid #e0e0e0 !important;
  padding: 10px 15px !important;
}

.form-control:focus {
  border-color: #4885ed !important;
  box-shadow: 0 0 0 3px rgba(72, 133, 237, 0.1) !important;
}

/* BUTTONS */
.btn {
  height: var(--btn-height) !important;
  border-radius: var(--radius-std) !important;
  padding: 0 20px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-sm {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

/* 5. MOBILE RESPONSIVE SYSTEM (Max Width 991px)
   ========================================================================== */
@media (max-width: 991px) {
  /* RESET LAYOUT */
  .page-wrapper,
  main,
  body.sidebar-open .page-wrapper,
  body.sidebar-open main,
  body.sidebar-closed .page-wrapper,
  body.sidebar-closed main {
    margin: 0 !important;
    width: 100% !important;
    padding: calc(var(--header-height) + 15px) var(--mobile-padding) 60px !important;
  }
  header.app-navbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  /* Action wrapping for button groups */
  .header-actions,
  .modern-actions-wrapper {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }
  /* Force table actions to wrap and not push width */
  table td:has(.modern-actions-wrapper),
  table th:has(.modern-actions-wrapper) {
    min-width: 100px !important;
    width: auto !important;
  }
  /* SIDEBAR OVERLAY */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
  }
  body.sidebar-open .sidebar-overlay {
    display: block !important;
  }
  /* SIDEBAR BEHAVIOR */
  .sidebar {
    width: 280px !important;
    transform: translateX(-100%);
  }
  [dir=rtl] .sidebar {
    transform: translateX(100%);
  }
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
  /* HEADER STACKING */
  .page-header {
    display: block !important;
    margin-bottom: 20px !important;
  }
  .page-title {
    margin-bottom: 10px !important;
    display: block !important;
  }
  .page-btn {
    width: 100% !important;
    margin-top: 10px !important;
  }
  .page-btn .btn {
    width: 100% !important;
  }
  /* TABLE MOBILE VIEW */
  .table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    background: #fff !important;
  }
  .table {
    min-width: 0 !important;
    width: 100% !important;
  }
  .table td,
  .table th {
    white-space: normal !important;
    min-width: 100px !important;
  }
  /* MODALS & POPUPS MOBILE */
  .modal-dialog {
    margin: 10px !important;
    max-width: none !important;
    min-height: calc(100% - 20px) !important;
    display: flex !important;
    align-items: center !important;
  }
  .modal-content {
    border-radius: 12px !important;
  }
  .modal-footer {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  .modal-footer > * {
    width: 100% !important;
    margin: 0 !important;
  }
  /* TOASTER & ALERTS MOBILE */
  #toast-container {
    top: auto !important;
    bottom: 20px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }
  .swal2-popup {
    width: 90% !important;
    padding: 20px !important;
  }
  .swal2-actions {
    flex-direction: column-reverse !important;
    width: 100% !important;
  }
  .swal2-confirm,
  .swal2-cancel {
    width: 100% !important;
    margin: 5px 0 !important;
  }
  /* FORM ACTIONS STACKING */
  .form-actions,
  .card-footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  .form-actions .btn {
    width: 100% !important;
  }
}
/* 6. DROPDOWN & UTILITY FIXES
   ========================================================================== */
.dropdown-menu {
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  z-index: 1055 !important;
}

.dropdown-item {
  padding: 8px 15px !important;
  border-radius: 4px !important;
}

.dropdown-item:hover {
  background-color: #f8f9fa !important;
  color: #4885ed !important;
}

/* RTL Dropdown */
[dir=rtl] .dropdown-menu {
  text-align: right !important;
}

/* Modal Open Fix */
body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* ============================================ */
/* FIX MOBILE RTL RESPONSIVE LAYOUT OVERFLOW    */
/* ============================================ */
/* Ensures complete mobile responsiveness on all RTL pages, forms, lists, and popups */
@media (max-width: 991.98px) {
  /* 1. Reset main layout margins in RTL to prevent pushing content off-screen */
  html[dir=rtl],
  html[dir=rtl] body {
    width: 100% !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  html[dir=rtl] body.sidebar-layout main,
  html[dir=rtl] body.sidebar-layout:not(.sidebar-mini) main,
  html[dir=rtl] .sidebar-layout main,
  html[dir=rtl] .page-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* 2. Fix Navbar alignment in RTL on mobile */
  html[dir=rtl] .sidebar-layout .app-navbar,
  html[dir=rtl] .main-header {
    right: 0 !important;
    left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  /* 3. Handle data lists & tables cleanly on mobile */
  html[dir=rtl] .card {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  html[dir=rtl] .card-body {
    padding: 15px !important;
  }
  html[dir=rtl] .table-responsive {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  /* 4. Correctly display the collapsible drawer sidebar from the Right in RTL */
  html[dir=rtl] .sidebar-layout .app-menu,
  html[dir=rtl] .sidebar-layout aside.app-menu {
    right: 0 !important;
    left: auto !important;
    /* Start completely offscreen to the right */
    transform: translateX(100%) !important;
    z-index: 1050 !important;
  }
  /* 5. FIX THE SIDEBAR OPENING GLITCH (STOP BACKGROUND BODY FROM SHIFTING) */
  html[dir=rtl] body.sidebar-show main,
  html[dir=rtl] body.sidebar-layout.sidebar-show main,
  html[dir=rtl] .sidebar-layout.sidebar-show .app-navbar,
  html[dir=rtl] .sidebar-layout.sidebar-show .main-header,
  html[dir=rtl] .sidebar-layout.sidebar-show .page-wrapper,
  html[dir=rtl] body.sidebar-show .app-navbar {
    transform: translateX(0) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    right: 0 !important;
    left: 0 !important;
  }
  html[dir=rtl] .sidebar-layout.sidebar-show .app-menu,
  html[dir=rtl] .sidebar-layout.sidebar-show aside.app-menu {
    /* Slide in perfectly to origin overlaying content */
    transform: translateX(0) !important;
  }
  /* 6. Fix form input and popup alignments */
  html[dir=rtl] .modal-dialog {
    margin: 10px auto !important;
    width: auto !important;
    max-width: 95vw !important;
  }
  /* Reset grid system bleeding properly */
  html[dir=rtl] .row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
/* ============================================ */
/* FIX MOBILE LTR RESPONSIVE LAYOUT OVERFLOW    */
/* ============================================ */
/* Ensures complete mobile responsiveness on all LTR pages, forms, lists, and popups */
@media (max-width: 991.98px) {
  /* 1. Reset main layout margins in LTR to prevent pushing content off-screen */
  html:not([dir=rtl]),
  html:not([dir=rtl]) body {
    width: 100% !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  html:not([dir=rtl]) body.sidebar-layout main,
  html:not([dir=rtl]) body.sidebar-layout:not(.sidebar-mini) main,
  html:not([dir=rtl]) .sidebar-layout main,
  html:not([dir=rtl]) .page-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* 2. Fix Navbar alignment in LTR on mobile */
  html:not([dir=rtl]) .sidebar-layout .app-navbar,
  html:not([dir=rtl]) .main-header {
    right: 0 !important;
    left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  /* 3. Handle data lists & tables cleanly on mobile */
  html:not([dir=rtl]) .card {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  html:not([dir=rtl]) .card-body {
    padding: 15px !important;
  }
  html:not([dir=rtl]) .table-responsive {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  /* 4. Correctly display the collapsible drawer sidebar from the Left in LTR */
  html:not([dir=rtl]) .sidebar-layout .app-menu,
  html:not([dir=rtl]) .sidebar-layout aside.app-menu {
    left: 0 !important;
    right: auto !important;
    /* Start completely offscreen to the left */
    transform: translateX(-100%) !important;
    z-index: 1050 !important;
  }
  /* 5. FIX THE SIDEBAR OPENING GLITCH (STOP BACKGROUND BODY FROM SHIFTING) */
  html:not([dir=rtl]) body.sidebar-show main,
  html:not([dir=rtl]) body.sidebar-layout.sidebar-show main,
  html:not([dir=rtl]) .sidebar-layout.sidebar-show .app-navbar,
  html:not([dir=rtl]) .sidebar-layout.sidebar-show .main-header,
  html:not([dir=rtl]) .sidebar-layout.sidebar-show .page-wrapper,
  html:not([dir=rtl]) body.sidebar-show .app-navbar {
    transform: translateX(0) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    right: 0 !important;
    left: 0 !important;
  }
  html:not([dir=rtl]) .sidebar-layout.sidebar-show .app-menu,
  html:not([dir=rtl]) .sidebar-layout.sidebar-show aside.app-menu {
    /* Slide in perfectly to origin overlaying content */
    transform: translateX(0) !important;
  }
  /* 6. Fix form input and popup alignments */
  html:not([dir=rtl]) .modal-dialog {
    margin: 10px auto !important;
    width: auto !important;
    max-width: 95vw !important;
  }
  /* Reset grid system bleeding properly */
  html:not([dir=rtl]) .row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
/* ============================================ */
/* CRITICAL MISSING ELEMENTS RESCUE OVERRIDES   */
/* ============================================ */
html body .app-navbar .header-item-profile,
html body .app-navbar .header-item-profile .btn-profile,
html body .app-navbar .header-item-profile .header-avatar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .app-navbar .header-avatar {
  width: 35px !important;
  height: 35px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  min-width: 35px !important;
}

html body .app-navbar .header-left .header-item .logo,
html body .app-navbar .header-left .logo {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .app-navbar .header-left .logo .logo-full {
  display: inline-block !important;
}

html body .app-navbar .header-left .logo .logo-mini {
  display: none !important;
}

/* ============================================ */
/* STRICT MOBILE POLISH (Gaps, Navbars & Icons) */
/* ============================================ */
@media (max-width: 991.98px) {
  /* Hide Logo in top Navbar on mobile (keep in sidebar) */
  html body .app-navbar .header-left .header-item .logo,
  html body .app-navbar .header-left .logo,
  html body .app-navbar .header-left .logo .logo-full {
    display: none !important;
  }
  /* Header buttons - Icon only, no text, no dropdown arrows */
  html body .app-navbar .header-right .header-item span:not(.notification-badge),
  html body .app-navbar .header-right .btn-icon-text span,
  html body .app-navbar .header-right .branch-name-compact,
  html body .app-navbar .header-item-language .header-lang-name {
    display: none !important;
  }
  /* Hide dropdown carets/arrows */
  html body .app-navbar .dropdown-toggle::after {
    display: none !important;
    content: none !important;
  }
  /* 1. Eliminate EVERY horizontal gap wrapping the layout in mobile */
  html body main,
  html body .main-content,
  html .page-wrapper,
  html body .container-fluid,
  html body [class*=container] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* 2. Modern elements cover full edge-to-edge width without curves */
  html .modern-page-header,
  html .modern-card {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    border-radius: 0 !important;
    /* No curve per request for data tables */
    border-left: 1px solid #e9ecef !important;
    border-right: 1px solid #e9ecef !important;
    border-top: 1px solid #e9ecef !important;
    border-bottom: 1px solid #e9ecef !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }
  html[dir=rtl] .modern-page-header,
  html[dir=rtl] .modern-card {
    border: 1px solid #e9ecef !important;
  }
  /* 4. EXACT 10px inner padding per screenshot */
  .modern-page-header .page-block,
  .modern-card .card-body {
    padding: 10px !important;
  }
}
/* ======================================================================
   ADVANCED SIDEBAR SUB-MODULE REDESIGN (TREE VIEW & COMPACTNESS)
   ====================================================================== */
/* Target all sub-modules and sub-sub-modules (no changes to main module) */
/* Reset list styling and establish tree connection */
/* Level-1 submenus (directly under main category) establish the 52px indentation */
.sidebar-layout .app-menu .menu > li > .submenu,
.sidebar-layout aside.app-menu .menu > li > .submenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 5px 0 5px 52px !important;
  /* Align with main module text start (52px) */
  position: relative !important;
  background: transparent !important;
}

/* Level-2+ nested submenus should have ZERO additional indentation to stay in the same vertical line */
.sidebar-layout .app-menu .menu .submenu .submenu,
.sidebar-layout aside.app-menu .menu .submenu .submenu {
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
  border-left: none !important;
}

/* Draw the vertical dashed line connecting child items */
.sidebar-layout .app-menu .menu .submenu::before,
.sidebar-layout aside.app-menu .menu .submenu::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 12px !important;
  left: 28px !important;
  /* Centered under main module icons (20px + 8px) */
  width: 1px !important;
  border-left: 1px dashed rgba(255, 255, 255, 0.25) !important;
  z-index: 1 !important;
}

/* Base Light Mode override for the vertical line */
html[data-theme=light] .sidebar-layout .app-menu .menu .submenu::before {
  border-left-color: rgba(0, 0, 0, 0.15) !important;
}

/* Reset li margin and padding for tight compactness */
.sidebar-layout .app-menu .menu .submenu li {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Provide eye-catchy connection arm pointing to each feature */
.sidebar-layout .app-menu .menu .submenu li::before {
  content: "" !important;
  position: absolute !important;
  top: 15px !important;
  /* Half of link height to vertically center the arm */
  left: -24px !important;
  /* Connects vertical line (28px) to item (52px) */
  width: 23px !important;
  height: 1px !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.25) !important;
  z-index: 1 !important;
}

html[data-theme=light] .sidebar-layout .app-menu .menu .submenu li::before {
  border-top-color: rgba(0, 0, 0, 0.15) !important;
}

/* Sub-module and Sub-sub-module link advanced modern spacing */
.sidebar-layout .app-menu .menu .submenu a {
  display: flex !important;
  align-items: center !important;
  padding: 4px 15px 4px 0 !important;
  /* Extreme compactness, natively offset by hierarchical UL padding */
  font-size: 0.8rem !important;
  /* Crisp small font */
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  line-height: 18px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  /* Modern slightly rounded corners for hover boundaries */
  transition: none !important;
  position: relative !important;
  z-index: 2 !important;
}

html[data-theme=light] .sidebar-layout .app-menu .menu .submenu a {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Advanced Submenu Bullet (Smaller & Lighter Dot) */
.sidebar-layout .app-menu .menu .submenu a .submenu-bullet {
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 4px !important;
  border-radius: 50% !important;
  background-color: #6c757d !important;
  /* Standard Grey */
  border: none !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  transition: none !important;
  /* Remove animation transition */
}

.sidebar-layout .app-menu .menu .submenu a .submenu-bullet::before {
  content: none !important;
  display: none !important;
}

html[data-theme=light] .sidebar-layout .app-menu .menu .submenu a .submenu-bullet {
  background-color: #6c757d !important;
}

/* Base Light Mode override for active */
html[data-theme=light] .sidebar-layout .app-menu .menu .submenu a.active .submenu-bullet {
  background-color: #fff !important;
  /* White dot on blue background */
}

/* Clean UI Hover State - No animation */
.sidebar-layout .app-menu .menu .submenu a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  transform: none !important;
}

html[data-theme=light] .sidebar-layout .app-menu .menu .submenu a:hover {
  color: rgba(0, 0, 0, 0.95) !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
}

.sidebar-layout .app-menu .menu .submenu a:hover .submenu-bullet {
  background-color: #6c757d !important;
  /* Keep same color on hover */
  border-color: transparent !important;
  transform: none !important;
}

/* Active Highlight Styling (Sub Modules) - System Blue Background */
.sidebar-layout .app-menu .menu .submenu a.active {
  color: #fff !important;
  background-color: var(--colorPrimary) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme=light] .sidebar-layout .app-menu .menu .submenu a.active {
  color: #fff !important;
  background-color: var(--colorPrimary) !important;
}

/* Active Highlight Dot Icon */
.sidebar-layout .app-menu .menu .submenu a.active .submenu-bullet {
  background-color: #fff !important;
  border-color: transparent !important;
  transform: none !important;
}

/* For Sub-sub-modules (Level 3), reset indenting and tree lines slightly to create depth */
.sidebar-layout .app-menu .menu .submenu .submenu {
  padding-left: 0 !important;
  /* Align exactly with parent text */
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.sidebar-layout .app-menu .menu .submenu .submenu::before {
  left: 6px !important;
}

.sidebar-layout .app-menu .menu .submenu .submenu li::before {
  left: -6px !important;
  width: 6px !important;
}

/* ===================================================================== */
/* EXPLICIT CRITICAL FIXES FOR NESTED MENU INDENTATION AND DOT ICONS     */
/* ===================================================================== */
/* 1. Force the 3rd level tree view to properly indent. This overrides an aggressive 
    rule in site.css which flattened out all submenus by setting padding to 0. */
html body .sidebar-layout .app-menu .menu .submenu .submenu,
html body .sidebar-layout .app-menu .menu .submenu ul.submenu {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 2. Force the dot icon on EVERY submenu item unconditionally (Except Folders which are hidden in HTML). */
html body .sidebar-layout .app-menu .menu .submenu a .submenu-bullet {
  background-color: #6c757d !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 4px !important;
  min-width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  margin-right: 12px !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* Special white dot for active items to pop against blue background */
html body .sidebar-layout .app-menu .menu .submenu a.active .submenu-bullet {
  background-color: #fff !important;
}

/* ============================================ */
/* MODERN TOASTERS CONTAINER - V2               */
/* ============================================ */
.modern-toasters-container {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  pointer-events: none !important;
  max-width: 400px;
  width: 100%;
}

.modern-toasters-container > * {
  pointer-events: auto !important;
}

/* Ensure header buttons are always reachable */
header .header-item,
header .header-item *,
.app-navbar .header-item,
.app-navbar .header-item * {
  pointer-events: auto !important;
}

/* HQ Dashboard Enhanced Styles - Global Override */
app-hq-dashboard .main-content {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  min-height: 100vh !important;
  color: #f1f5f9 !important;
}

app-hq-dashboard .kpi-card {
  background: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 2px solid rgba(14, 165, 233, 0.3) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(14, 165, 233, 0.1) inset !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

app-hq-dashboard .kpi-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 60px rgba(14, 165, 233, 0.4), 0 0 0 2px rgba(14, 165, 233, 0.5) inset !important;
  border-color: rgba(14, 165, 233, 0.8) !important;
}

app-hq-dashboard .modern-page-header {
  background: rgba(30, 41, 59, 0.6) !important;
  -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-left: 5px solid #0ea5e9 !important;
}

app-hq-dashboard .modern-page-header h4 {
  color: #f1f5f9 !important;
}

app-hq-dashboard .breadcrumb-item a {
  color: #0ea5e9 !important;
}

app-hq-dashboard .kpi-value {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #0ea5e9 !important;
}

app-hq-dashboard .kpi-label {
  color: rgba(241, 245, 249, 0.7) !important;
  text-transform: uppercase !important;
  font-size: 0.875rem !important;
}

/* HQ Dashboard Enhanced - Maximum Specificity */
body app-hq-dashboard .row .col-md-3 .kpi-card,
body app-hq-dashboard .kpi-card,
.main-content .kpi-card {
  background: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 3px solid rgba(14, 165, 233, 0.5) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(14, 165, 233, 0.1) inset !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body app-hq-dashboard .kpi-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 60px rgba(14, 165, 233, 0.6), 0 0 0 3px rgba(14, 165, 233, 0.8) inset !important;
  border-color: rgb(14, 165, 233) !important;
}

/* TABLES AND LISTS - CAPITALIZE FIRST LETTER */
body .table thead th,
html body .table thead th,
body .table tbody td,
html body .table tbody td,
body ul li,
html body ul li,
body .list-group-item,
html body .list-group-item {
  text-transform: capitalize !important;
}

/* MOBILE HEADER - ROUND ICONS */
@media (max-width: 991px) {
  /* Force all header containers to be flex and never hide children */
  .layout-width,
  .navbar-header,
  .main-header,
  .header-left,
  .header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .header-left {
    flex-grow: 1 !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  .header-right {
    flex-grow: 0 !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }
  /* Standardize all round mobile header buttons to EXACTLY 32px circles */
  html body .header-item .rounded-circle-mobile,
  html body .header-item .btn-icon-text.rounded-circle-mobile,
  html body .header-item .btn-language-toggle.rounded-circle-mobile,
  html body .header-item .btn-pos.rounded-circle-mobile,
  html body .header-item .btn-profile.rounded-circle-mobile,
  html body .header-item .btn-add-new.rounded-circle-mobile,
  html body .header-item-language .rounded-circle-mobile,
  html body .header-item-pos .rounded-circle-mobile,
  html body .header-item-profile .rounded-circle-mobile,
  html body .header-item-add-new .rounded-circle-mobile,
  html body .header-item-branch-compact .rounded-circle-mobile {
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
  }
  /* Force visibility of ALL requested icons */
  .header-item-add-new,
  .header-item-branch-compact,
  .header-item-language,
  .header-item-pos,
  .header-item-profile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Logo visibility - Redesigned to be compact */
  .header-logo-container {
    display: flex !important;
    margin: 0 4px !important;
  }
  .header-main-logo {
    height: 24px !important;
    width: auto !important;
    max-width: 80px !important;
    object-fit: contain !important;
  }
  /* Branch Icon Fix */
  .rounded-circle-mobile .branch-list-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .rounded-circle-mobile .branch-list-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Hide labels and carets safely ONLY for the button toggles, NOT the dropdown items */
  .rounded-circle-mobile > span,
  .rounded-circle-mobile > .header-lang-name,
  .rounded-circle-mobile > .branch-name-compact,
  .rounded-circle-mobile::after {
    display: none !important;
  }
  /* Internal icon sizing */
  .rounded-circle-mobile .header-lang-flag {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
  }
  .rounded-circle-mobile .header-icon,
  .rounded-circle-mobile img.header-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }
  /* Profile Layout Reversal using correct pull-down class: Icon FIRST, Text SECOND */
  ul.dropdown-menu.pull-down .dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    margin: 0 !important;
    /* Fix horizontal alignment pushing text off to the right */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  ul.dropdown-menu.pull-down .dropdown-item i {
    display: inline-block !important;
    /* Force visibility */
    order: -1 !important;
    /* Force icon to the left */
    margin: 0 !important;
    font-size: 1.25rem !important;
    color: #495057 !important;
    min-width: 24px !important;
    text-align: center !important;
  }
  /* Branch Text-Only Layout */
  html body .branch-dropdown .dropdown-item {
    padding: 12px 14px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    /* Force touch target height */
  }
  html body .branch-dropdown .branch-text,
  html body .branch-name-compact {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Force visibility */
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    /* Force distinct color from bg */
    background: transparent !important;
    width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    position: relative !important;
    z-index: 1060 !important;
  }
  html body .branch-dropdown .dropdown-item.active .branch-text {
    color: #ffffff !important;
    /* White text on active blue bg */
  }
  /* Fix for Dropdowns going off-screen on mobile - position below icon */
  html body .header-right .header-item {
    position: relative !important;
  }
  /* LTR: dropdown below icon, aligned right */
  html:not([dir=rtl]) .header-right .header-item .dropdown-menu.show {
    position: absolute !important;
    transform: none !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 5px !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 90vw !important;
    z-index: 999999 !important;
  }
  /* RTL: dropdown below icon, aligned left */
  html[dir=rtl] .header-right .header-item .dropdown-menu.show {
    position: absolute !important;
    transform: none !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 5px !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 90vw !important;
    z-index: 999999 !important;
  }
  /* Hide Mobile Logo if Sidebar is Open (Drawer Layout) */
  body.sidebar-show .header-logo-container.d-lg-none {
    display: none !important;
  }
}
/* ============================================ */
/* NUCLEAR OVERRIDES - LAST IN FILE = WINS     */
/* These override ALL other rules for mobile   */
/* ============================================ */
/* LANGUAGE: Force language name text visible */
html body .language-dropdown .language-picker .language-name,
html body .language-dropdown .language-name,
html body .dropdown-menu.language-dropdown .language-picker .language-name,
html body .dropdown-menu.language-dropdown .language-name,
.language-dropdown .language-picker span.language-name,
.language-name {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #212529 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  width: auto !important;
  min-width: 40px !important;
  height: auto !important;
}

/* BRANCH: Force branch text visible */
html body .branch-dropdown .dropdown-item .branch-text,
html body .dropdown-menu.branch-dropdown .dropdown-item .branch-text,
html body .dropdown-menu.branch-dropdown .dropdown-item span,
html body .branch-dropdown .dropdown-item span.branch-text,
html body .branch-dropdown span.branch-text,
.branch-dropdown .branch-text,
span.branch-text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  width: auto !important;
  min-width: 50px !important;
  height: auto !important;
  min-height: 20px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body .branch-dropdown .dropdown-item.active span.branch-text,
.branch-dropdown .dropdown-item.active .branch-text {
  color: #ffffff !important;
}

/* PROFILE: Force icon width to 24px (was computing to 146px!) */
html body ul.dropdown-menu.pull-down .dropdown-item i,
html body .pull-down .dropdown-item i,
.pull-down .dropdown-item i.ri-user-settings-line,
.pull-down .dropdown-item i.ri-settings-3-line,
.pull-down .dropdown-item i.ri-logout-box-line {
  display: inline-flex !important;
  width: 24px !important;
  max-width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 1.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  color: #495057 !important;
}

/* PROFILE: Force dropdown below profile icon */
@media (max-width: 991px) {
  /* Ensure profile header-item is a positioning context */
  html body .header-item-profile {
    position: relative !important;
  }
  html body .header-item-profile .dropdown-menu.pull-down.show,
  html body .pull-down.show,
  html body ul.dropdown-menu.pull-down.show {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    width: 200px !important;
    max-width: 200px !important;
    transform: none !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    margin-top: 5px !important;
  }
  /* LTR: profile dropdown aligned right */
  html:not([dir=rtl]) .header-item-profile .dropdown-menu.pull-down.show,
  html:not([dir=rtl]) ul.dropdown-menu.pull-down.show {
    right: 0 !important;
    left: auto !important;
  }
  /* RTL: profile dropdown aligned left */
  html[dir=rtl] .header-item-profile .dropdown-menu.pull-down.show,
  html[dir=rtl] ul.dropdown-menu.pull-down.show {
    left: 0 !important;
    right: auto !important;
  }
  html body ul.dropdown-menu.pull-down .dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}
/* ============================================ */
/* STRICT TABLET & TOUCH OPTIMIZATION MODULE    */
/* Designed for 768px - 1024px without affecting   
   desktop or mobile views.                     */
/* ============================================ */
@media (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
  html:not(:has(app-pos)) {
    /* Touch target for standard inputs and buttons */
  }
  html:not(:has(app-pos)) .form-control,
  html:not(:has(app-pos)) .form-select,
  html:not(:has(app-pos)) .btn:not(.btn-sm):not(.modern-action-btn):not(.btn-icon-modern),
  html:not(:has(app-pos)) select:not([multiple]),
  html:not(:has(app-pos)) .ng-select-container {
    min-height: 48px !important; /* Premium tablet touch size */
    font-size: 15px !important;
  }
  html:not(:has(app-pos)) {
    /* Target padding for specific layout tables */
  }
  html:not(:has(app-pos)) .table tbody td,
  html:not(:has(app-pos)) .table thead th {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  html:not(:has(app-pos)) {
    /* General header items padding expansion */
  }
  html:not(:has(app-pos)) .header-item .btn-icon-modern,
  html:not(:has(app-pos)) .header-item-profile .btn-profile {
    min-width: 44px !important;
    min-height: 44px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }
  html:not(:has(app-pos)) .header-item .btn-icon-modern i {
    font-size: 1.4rem !important;
    margin-top: 2px !important;
  }
  html:not(:has(app-pos)) {
    /* Expand language/item dropdowns */
  }
  html:not(:has(app-pos)) .dropdown-item,
  html:not(:has(app-pos)) .list-group-item {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 15px !important;
    min-height: 44px !important;
    display: flex;
    align-items: center;
  }
  html:not(:has(app-pos)) {
    /* Force Add New Grid to maintain its layout on tablets */
  }
  html:not(:has(app-pos)) .add-new-dropdown {
    min-width: 320px !important;
    max-width: 360px !important;
    display: none !important; /* Fix for auto-opening bug */
  }
  html:not(:has(app-pos)) .add-new-dropdown.show {
    display: block !important;
  }
  html:not(:has(app-pos)) .add-new-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  html:not(:has(app-pos)) .add-new-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    min-height: auto !important;
  }
  html:not(:has(app-pos)) .add-new-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.3rem !important;
  }
}
/* Touch Device Native Behaviors (For Coarse Pointers) */
@media (hover: none) and (pointer: coarse) {
  html:not(:has(app-pos)) {
    /* Prevent sticky hover transforms */
  }
  html:not(:has(app-pos)) .btn:hover,
  html:not(:has(app-pos)) .modern-action-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  html:not(:has(app-pos)) .table-responsive,
  html:not(:has(app-pos)) .dataTables_scrollBody,
  html:not(:has(app-pos)) .scroll-container {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: auto !important;
  }
}
/* ============================================ */
/* UNIVERSAL BRANDING WATERMARK                 */
/* ============================================ */
body::after {
  content: "heavycoders technologies";
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.05) !important; /* Very subtle transparency */
  z-index: 999999 !important;
  pointer-events: none !important; /* Allows clicking through the watermark */
  -webkit-user-select: none !important;
          user-select: none !important; /* Prevents text selection */
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-family: "Inter", sans-serif !important;
}

/* Background diagonal watermark for extra protection */
body::before {
  content: "heavycoders technologies";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg) !important;
  font-size: 8rem !important;
  font-weight: 900 !important;
  color: rgba(0, 0, 0, 0.015) !important; /* Almost invisible background watermark */
  z-index: -1 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  -webkit-user-select: none !important;
          user-select: none !important;
  text-transform: uppercase !important;
}