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.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;
}
table.dataTable td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable td.dt-control:before {
  height: 1em;
  width: 1em;
  margin-top: -9px;
  display: inline-block;
  color: white;
  border: 0.15em solid white;
  border-radius: 1em;
  box-shadow: 0 0 0.2em #444;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: "Courier New", Courier, monospace;
  line-height: 1em;
  content: "+";
  background-color: #31b131;
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  content: "-";
  background-color: #d33333;
}

/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
  background-repeat: no-repeat;
  background-position: center right;
}
table.dataTable thead .sorting {
  background-image: url(/images/vendor/datatables.net-dt/sort_both.png?8b117faa9d4dd934d6bbbd9f0cdb2459);
}
table.dataTable thead .sorting_asc {
  background-image: url(/images/vendor/datatables.net-dt/sort_asc.png?4bba59196d7ce26196967adefd7c5c3f) !important;
}
table.dataTable thead .sorting_desc {
  background-image: url(/images/vendor/datatables.net-dt/sort_desc.png?c4196d3286cc33244c83af3398675a6a) !important;
}
table.dataTable thead .sorting_asc_disabled {
  background-image: url(/images/vendor/datatables.net-dt/sort_asc_disabled.png?07c018ae0160704a329067ec7fbdc614);
}
table.dataTable thead .sorting_desc_disabled {
  background-image: url(/images/vendor/datatables.net-dt/sort_desc_disabled.png?27ac5d1bc294b1fae0564fe461a6304d);
}
table.dataTable tbody tr {
  background-color: #ffffff;
}
table.dataTable tbody tr.selected {
  background-color: #B0BED9;
}
table.dataTable tbody th,
table.dataTable tbody td {
  padding: 8px 10px;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #ddd;
}
table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
table.dataTable.display tbody tr:first-child td {
  border-top: none;
}
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
table.dataTable.cell-border tbody tr th:first-child,
table.dataTable.cell-border tbody tr td:first-child {
  border-left: 1px solid #ddd;
}
table.dataTable.cell-border tbody tr:first-child th,
table.dataTable.cell-border tbody tr:first-child td {
  border-top: none;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
  background-color: #f9f9f9;
}
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
  background-color: #acbad4;
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: #f6f6f6;
}
table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
  background-color: #aab7d1;
}
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
  background-color: #fafafa;
}
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
  background-color: #acbad5;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
  background-color: #f1f1f1;
}
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
  background-color: #f3f3f3;
}
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
  background-color: whitesmoke;
}
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
  background-color: #a6b4cd;
}
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
  background-color: #a8b5cf;
}
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
  background-color: #a9b7d1;
}
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
  background-color: #fafafa;
}
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
  background-color: #fcfcfc;
}
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
  background-color: #fefefe;
}
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
  background-color: #acbad5;
}
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
  background-color: #aebcd6;
}
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
  background-color: #afbdd8;
}
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background-color: #eaeaea;
}
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  background-color: #ececec;
}
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  background-color: #efefef;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
  background-color: #a2aec7;
}
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
  background-color: #a3b0c9;
}
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  background-color: #a5b2cb;
}
table.dataTable.no-footer {
  border-bottom: 1px solid #111;
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
}
table.dataTable.compact thead th,
table.dataTable.compact thead td {
  padding: 4px 17px;
}
table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td {
  padding: 4px;
}
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
  padding: 4px;
}

table.dataTable th,
table.dataTable td {
  box-sizing: content-box;
}

/*
 * Control feature layout
 */
.dataTables_wrapper {
  position: relative;
  clear: both;
}
.dataTables_wrapper .dataTables_length {
  float: left;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  padding: 4px;
}
.dataTables_wrapper .dataTables_filter {
  float: right;
  text-align: right;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  margin-left: 3px;
}
.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding-top: 0.755em;
}
.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #333 !important;
  border: 1px solid transparent;
  border-radius: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #333 !important;
  border: 1px solid #979797;
  background-color: white;
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* FF3.6+ */
  /* IE10+ */
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
  /* W3C */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #666 !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;
  border: 1px solid #111;
  background-color: #585858;
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* FF3.6+ */
  /* IE10+ */
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #585858 0%, #111 100%);
  /* W3C */
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: none;
  background-color: #2b2b2b;
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* FF3.6+ */
  /* IE10+ */
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
  /* W3C */
  box-shadow: inset 0 0 3px #111;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
  padding: 0 1em;
}
.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 40px;
  margin-left: -50%;
  margin-top: -25px;
  padding-top: 20px;
  text-align: center;
  font-size: 1.2em;
  background-color: white;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: #333;
}
.dataTables_wrapper .dataTables_scroll {
  clear: both;
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
  *margin-top: -1px;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
  vertical-align: middle;
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: 1px solid #111;
}
.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,
.dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
  border-bottom: none;
}
.dataTables_wrapper:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_paginate {
    margin-top: 0.5em;
  }
}
@media screen and (max-width: 640px) {
  .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5em;
  }
}

@charset "UTF-8";
.swal2-popup.swal2-toast {
  flex-direction: column;
  align-items: stretch;
  width: auto;
  padding: 1.25em;
  overflow-y: hidden;
  background: #fff;
  box-shadow: 0 0 0.625em #d9d9d9;
}
.swal2-popup.swal2-toast .swal2-header {
  flex-direction: row;
  padding: 0;
}
.swal2-popup.swal2-toast .swal2-title {
  flex-grow: 1;
  justify-content: flex-start;
  margin: 0 0.625em;
  font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-loading {
  justify-content: center;
}
.swal2-popup.swal2-toast .swal2-input {
  height: 2em;
  margin: 0.3125em auto;
  font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-validation-message {
  font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-footer {
  margin: 0.5em 0 0;
  padding: 0.5em 0 0;
  font-size: 0.8em;
}
.swal2-popup.swal2-toast .swal2-close {
  position: static;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8;
}
.swal2-popup.swal2-toast .swal2-content {
  justify-content: flex-start;
  margin: 0 0.625em;
  padding: 0;
  font-size: 1em;
  text-align: initial;
}
.swal2-popup.swal2-toast .swal2-html-container {
  padding: 0.625em 0 0;
}
.swal2-popup.swal2-toast .swal2-html-container:empty {
  padding: 0;
}
.swal2-popup.swal2-toast .swal2-icon {
  width: 2em;
  min-width: 2em;
  height: 2em;
  margin: 0 0.5em 0 0;
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 1.8em;
  font-weight: bold;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    font-size: 0.25em;
  }
}
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  top: 0.875em;
  width: 1.375em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-actions {
  flex: 1;
  flex-basis: auto !important;
  align-self: stretch;
  width: auto;
  height: 2.2em;
  height: auto;
  margin: 0 0.3125em;
  margin-top: 0.3125em;
  padding: 0;
}
.swal2-popup.swal2-toast .swal2-styled {
  margin: 0.125em 0.3125em;
  padding: 0.3125em 0.625em;
  font-size: 1em;
}
.swal2-popup.swal2-toast .swal2-styled:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(100, 150, 200, 0.5);
}
.swal2-popup.swal2-toast .swal2-success {
  border-color: #a5dc86;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 1.6em;
  height: 3em;
  transform: rotate(45deg);
  border-radius: 50%;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.8em;
  left: -0.5em;
  transform: rotate(-45deg);
  transform-origin: 2em 2em;
  border-radius: 4em 0 0 4em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.25em;
  left: 0.9375em;
  transform-origin: 0 1.5em;
  border-radius: 0 4em 4em 0;
}
.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}
.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
  top: 0;
  left: 0.4375em;
  width: 0.4375em;
  height: 2.6875em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
  height: 0.3125em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
  top: 1.125em;
  left: 0.1875em;
  width: 0.75em;
}
.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
  top: 0.9375em;
  right: 0.1875em;
  width: 1.375em;
}
.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
  animation: swal2-toast-animate-success-line-tip 0.75s;
}
.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
  animation: swal2-toast-animate-success-line-long 0.75s;
}
.swal2-popup.swal2-toast.swal2-show {
  animation: swal2-toast-show 0.5s;
}
.swal2-popup.swal2-toast.swal2-hide {
  animation: swal2-toast-hide 0.1s forwards;
}

.swal2-container {
  display: flex;
  position: fixed;
  z-index: 1060;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.625em;
  overflow-x: hidden;
  transition: background-color 0.1s;
  -webkit-overflow-scrolling: touch;
}
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
  background: rgba(0, 0, 0, 0.4);
}
.swal2-container.swal2-backdrop-hide {
  background: transparent !important;
}
.swal2-container.swal2-top {
  align-items: flex-start;
}
.swal2-container.swal2-top-start, .swal2-container.swal2-top-left {
  align-items: flex-start;
  justify-content: flex-start;
}
.swal2-container.swal2-top-end, .swal2-container.swal2-top-right {
  align-items: flex-start;
  justify-content: flex-end;
}
.swal2-container.swal2-center {
  align-items: center;
}
.swal2-container.swal2-center-start, .swal2-container.swal2-center-left {
  align-items: center;
  justify-content: flex-start;
}
.swal2-container.swal2-center-end, .swal2-container.swal2-center-right {
  align-items: center;
  justify-content: flex-end;
}
.swal2-container.swal2-bottom {
  align-items: flex-end;
}
.swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
}
.swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}
.swal2-container.swal2-bottom > :first-child, .swal2-container.swal2-bottom-start > :first-child, .swal2-container.swal2-bottom-left > :first-child, .swal2-container.swal2-bottom-end > :first-child, .swal2-container.swal2-bottom-right > :first-child {
  margin-top: auto;
}
.swal2-container.swal2-grow-fullscreen > .swal2-modal {
  display: flex !important;
  flex: 1;
  align-self: stretch;
  justify-content: center;
}
.swal2-container.swal2-grow-row > .swal2-modal {
  display: flex !important;
  flex: 1;
  align-content: center;
  justify-content: center;
}
.swal2-container.swal2-grow-column {
  flex: 1;
  flex-direction: column;
}
.swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom {
  align-items: center;
}
.swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left {
  align-items: flex-start;
}
.swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right {
  align-items: flex-end;
}
.swal2-container.swal2-grow-column > .swal2-modal {
  display: flex !important;
  flex: 1;
  align-content: center;
  justify-content: center;
}
.swal2-container.swal2-no-transition {
  transition: none !important;
}
.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
  margin: auto;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-container .swal2-modal {
    margin: 0 !important;
  }
}

.swal2-popup {
  display: none;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  border: none;
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
}
.swal2-popup:focus {
  outline: none;
}
.swal2-popup.swal2-loading {
  overflow-y: hidden;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.8em;
}

.swal2-title {
  position: relative;
  max-width: 100%;
  margin: 0 0 0.4em;
  padding: 0;
  color: #595959;
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word;
}

.swal2-actions {
  display: flex;
  z-index: 1;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.25em auto 0;
  padding: 0;
}
.swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
  opacity: 0.4;
}
.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}
.swal2-actions:not(.swal2-loading) .swal2-styled:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.swal2-loader {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  margin: 0 1.875em;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border-width: 0.25em;
  border-style: solid;
  border-radius: 100%;
  border-color: #2778c4 transparent #2778c4 transparent;
}

.swal2-styled {
  margin: 0.3125em;
  padding: 0.625em 1.1em;
  box-shadow: none;
  font-weight: 500;
}
.swal2-styled:not([disabled]) {
  cursor: pointer;
}
.swal2-styled.swal2-confirm {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #2778c4;
  color: #fff;
  font-size: 1em;
}
.swal2-styled.swal2-deny {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #d14529;
  color: #fff;
  font-size: 1em;
}
.swal2-styled.swal2-cancel {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #757575;
  color: #fff;
  font-size: 1em;
}
.swal2-styled:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(100, 150, 200, 0.5);
}
.swal2-styled::-moz-focus-inner {
  border: 0;
}

.swal2-footer {
  justify-content: center;
  margin: 1.25em 0 0;
  padding: 1em 0 0;
  border-top: 1px solid #eee;
  color: #545454;
  font-size: 1em;
}

.swal2-timer-progress-bar-container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.25em;
  overflow: hidden;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.swal2-timer-progress-bar {
  width: 100%;
  height: 0.25em;
  background: rgba(0, 0, 0, 0.2);
}

.swal2-image {
  max-width: 100%;
  margin: 1.25em auto;
}

.swal2-close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  overflow: hidden;
  transition: color 0.1s ease-out;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #cccccc;
  font-family: serif;
  font-size: 2.5em;
  line-height: 1.2;
  cursor: pointer;
}
.swal2-close:hover {
  transform: none;
  background: transparent;
  color: #f27474;
}
.swal2-close:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(100, 150, 200, 0.5);
}
.swal2-close::-moz-focus-inner {
  border: 0;
}

.swal2-content {
  z-index: 1;
  justify-content: center;
  margin: 0;
  padding: 0 1.6em;
  color: #545454;
  font-size: 1.125em;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  word-wrap: break-word;
}

.swal2-input,
.swal2-file,
.swal2-textarea,
.swal2-select,
.swal2-radio,
.swal2-checkbox {
  margin: 1em auto;
}

.swal2-input,
.swal2-file,
.swal2-textarea {
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
  border: 1px solid #d9d9d9;
  border-radius: 0.1875em;
  background: inherit;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 1.125em;
}
.swal2-input.swal2-inputerror,
.swal2-file.swal2-inputerror,
.swal2-textarea.swal2-inputerror {
  border-color: #f27474 !important;
  box-shadow: 0 0 2px #f27474 !important;
}
.swal2-input:focus,
.swal2-file:focus,
.swal2-textarea:focus {
  border: 1px solid #b4dbed;
  outline: none;
  box-shadow: 0 0 0 3px rgba(100, 150, 200, 0.5);
}
.swal2-input::-moz-placeholder, .swal2-file::-moz-placeholder, .swal2-textarea::-moz-placeholder {
  color: #cccccc;
}
.swal2-input::placeholder,
.swal2-file::placeholder,
.swal2-textarea::placeholder {
  color: #cccccc;
}

.swal2-range {
  margin: 1em auto;
  background: #fff;
}
.swal2-range input {
  width: 80%;
}
.swal2-range output {
  width: 20%;
  color: inherit;
  font-weight: 600;
  text-align: center;
}
.swal2-range input,
.swal2-range output {
  height: 2.625em;
  padding: 0;
  font-size: 1.125em;
  line-height: 2.625em;
}

.swal2-input {
  height: 2.625em;
  padding: 0 0.75em;
}
.swal2-input[type=number] {
  max-width: 10em;
}

.swal2-file {
  background: inherit;
  font-size: 1.125em;
}

.swal2-textarea {
  height: 6.75em;
  padding: 0.75em;
}

.swal2-select {
  min-width: 50%;
  max-width: 100%;
  padding: 0.375em 0.625em;
  background: inherit;
  color: inherit;
  font-size: 1.125em;
}

.swal2-radio,
.swal2-checkbox {
  align-items: center;
  justify-content: center;
  background: #fff;
  color: inherit;
}
.swal2-radio label,
.swal2-checkbox label {
  margin: 0 0.6em;
  font-size: 1.125em;
}
.swal2-radio input,
.swal2-checkbox input {
  flex-shrink: 0;
  margin: 0 0.4em;
}

.swal2-input-label {
  display: flex;
  justify-content: center;
  margin: 1em auto;
}

.swal2-validation-message {
  align-items: center;
  justify-content: center;
  margin: 0 -2.7em;
  padding: 0.625em;
  overflow: hidden;
  background: #f0f0f0;
  color: #666666;
  font-size: 1em;
  font-weight: 300;
}
.swal2-validation-message::before {
  content: "!";
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 0.625em;
  border-radius: 50%;
  background-color: #f27474;
  color: #fff;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  border: 0.25em solid transparent;
  border-radius: 50%;
  border-color: #000;
  font-family: inherit;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.swal2-icon .swal2-icon-content {
  display: flex;
  align-items: center;
  font-size: 3.75em;
}
.swal2-icon.swal2-error {
  border-color: #f27474;
  color: #f27474;
}
.swal2-icon.swal2-error .swal2-x-mark {
  position: relative;
  flex-grow: 1;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  display: block;
  position: absolute;
  top: 2.3125em;
  width: 2.9375em;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: #f27474;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 1.0625em;
  transform: rotate(45deg);
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 1em;
  transform: rotate(-45deg);
}
.swal2-icon.swal2-error.swal2-icon-show {
  animation: swal2-animate-error-icon 0.5s;
}
.swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
  animation: swal2-animate-error-x-mark 0.5s;
}
.swal2-icon.swal2-warning {
  border-color: #facea8;
  color: #f8bb86;
}
.swal2-icon.swal2-info {
  border-color: #9de0f6;
  color: #3fc3ee;
}
.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}
.swal2-icon.swal2-success {
  border-color: #a5dc86;
  color: #a5dc86;
}
.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  transform: rotate(45deg);
  border-radius: 50%;
}
.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.4375em;
  left: -2.0635em;
  transform: rotate(-45deg);
  transform-origin: 3.75em 3.75em;
  border-radius: 7.5em 0 0 7.5em;
}
.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.6875em;
  left: 1.875em;
  transform: rotate(-45deg);
  transform-origin: 0 3.75em;
  border-radius: 0 7.5em 7.5em 0;
}
.swal2-icon.swal2-success .swal2-success-ring {
  position: absolute;
  z-index: 2;
  top: -0.25em;
  left: -0.25em;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: 0.25em solid rgba(165, 220, 134, 0.3);
  border-radius: 50%;
}
.swal2-icon.swal2-success .swal2-success-fix {
  position: absolute;
  z-index: 1;
  top: 0.5em;
  left: 1.625em;
  width: 0.4375em;
  height: 5.625em;
  transform: rotate(-45deg);
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
  display: block;
  position: absolute;
  z-index: 2;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: #a5dc86;
}
.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.875em;
  left: 0.8125em;
  width: 1.5625em;
  transform: rotate(45deg);
}
.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 2.375em;
  right: 0.5em;
  width: 2.9375em;
  transform: rotate(-45deg);
}
.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
  animation: swal2-animate-success-line-tip 0.75s;
}
.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
  animation: swal2-animate-success-line-long 0.75s;
}
.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
  animation: swal2-rotate-success-circular-line 4.25s ease-in;
}

.swal2-progress-steps {
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  margin: 0 0 1.25em;
  padding: 0;
  background: inherit;
  font-weight: 600;
}
.swal2-progress-steps li {
  display: inline-block;
  position: relative;
}
.swal2-progress-steps .swal2-progress-step {
  z-index: 20;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border-radius: 2em;
  background: #2778c4;
  color: #fff;
  line-height: 2em;
  text-align: center;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: #2778c4;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
  background: #add8e6;
  color: #fff;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: #add8e6;
}
.swal2-progress-steps .swal2-progress-step-line {
  z-index: 10;
  flex-shrink: 0;
  width: 2.5em;
  height: 0.4em;
  margin: 0 -1px;
  background: #2778c4;
}

[class^=swal2] {
  -webkit-tap-highlight-color: transparent;
}

.swal2-show {
  animation: swal2-show 0.3s;
}

.swal2-hide {
  animation: swal2-hide 0.15s forwards;
}

.swal2-noanimation {
  transition: none;
}

.swal2-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.swal2-rtl .swal2-close {
  right: auto;
  left: 0;
}
.swal2-rtl .swal2-timer-progress-bar {
  right: 0;
  left: auto;
}

@supports (-ms-accelerator: true) {
  .swal2-range input {
    width: 100% !important;
  }
  .swal2-range output {
    display: none;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-range input {
    width: 100% !important;
  }
  .swal2-range output {
    display: none;
  }
}
@keyframes swal2-toast-show {
  0% {
    transform: translateY(-0.625em) rotateZ(2deg);
  }
  33% {
    transform: translateY(0) rotateZ(-2deg);
  }
  66% {
    transform: translateY(0.3125em) rotateZ(2deg);
  }
  100% {
    transform: translateY(0) rotateZ(0deg);
  }
}
@keyframes swal2-toast-hide {
  100% {
    transform: rotateZ(1deg);
    opacity: 0;
  }
}
@keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: 0.5625em;
    left: 0.0625em;
    width: 0;
  }
  54% {
    top: 0.125em;
    left: 0.125em;
    width: 0;
  }
  70% {
    top: 0.625em;
    left: -0.25em;
    width: 1.625em;
  }
  84% {
    top: 1.0625em;
    left: 0.75em;
    width: 0.5em;
  }
  100% {
    top: 1.125em;
    left: 0.1875em;
    width: 0.75em;
  }
}
@keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0;
  }
  65% {
    top: 1.25em;
    right: 0.9375em;
    width: 0;
  }
  84% {
    top: 0.9375em;
    right: 0;
    width: 1.125em;
  }
  100% {
    top: 0.9375em;
    right: 0.1875em;
    width: 1.375em;
  }
}
@keyframes swal2-show {
  0% {
    transform: scale(0.7);
  }
  45% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes swal2-hide {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: 0.0625em;
    width: 0;
  }
  54% {
    top: 1.0625em;
    left: 0.125em;
    width: 0;
  }
  70% {
    top: 2.1875em;
    left: -0.375em;
    width: 3.125em;
  }
  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em;
  }
  100% {
    top: 2.8125em;
    left: 0.8125em;
    width: 1.5625em;
  }
}
@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }
  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }
  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em;
  }
  100% {
    top: 2.375em;
    right: 0.5em;
    width: 2.9375em;
  }
}
@keyframes swal2-rotate-success-circular-line {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0;
  }
  50% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0;
  }
  80% {
    margin-top: -0.375em;
    transform: scale(1.15);
  }
  100% {
    margin-top: 0;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes swal2-animate-error-icon {
  0% {
    transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
@keyframes swal2-rotate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden;
}
body.swal2-height-auto {
  height: auto !important;
}
body.swal2-no-backdrop .swal2-container {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: calc(100% - 0.625em * 2);
  background-color: transparent !important;
}
body.swal2-no-backdrop .swal2-container > .swal2-modal {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
body.swal2-no-backdrop .swal2-container.swal2-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
body.swal2-no-backdrop .swal2-container.swal2-top-start, body.swal2-no-backdrop .swal2-container.swal2-top-left {
  top: 0;
  left: 0;
}
body.swal2-no-backdrop .swal2-container.swal2-top-end, body.swal2-no-backdrop .swal2-container.swal2-top-right {
  top: 0;
  right: 0;
}
body.swal2-no-backdrop .swal2-container.swal2-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.swal2-no-backdrop .swal2-container.swal2-center-start, body.swal2-no-backdrop .swal2-container.swal2-center-left {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
body.swal2-no-backdrop .swal2-container.swal2-center-end, body.swal2-no-backdrop .swal2-container.swal2-center-right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
body.swal2-no-backdrop .swal2-container.swal2-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
body.swal2-no-backdrop .swal2-container.swal2-bottom-start, body.swal2-no-backdrop .swal2-container.swal2-bottom-left {
  bottom: 0;
  left: 0;
}
body.swal2-no-backdrop .swal2-container.swal2-bottom-end, body.swal2-no-backdrop .swal2-container.swal2-bottom-right {
  right: 0;
  bottom: 0;
}
@media print {
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important;
  }
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden=true] {
    display: none;
  }
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
    position: static !important;
  }
}
body.swal2-toast-shown .swal2-container {
  background-color: transparent;
}
body.swal2-toast-shown .swal2-container.swal2-top {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
}
body.swal2-toast-shown .swal2-container.swal2-top-start, body.swal2-toast-shown .swal2-container.swal2-top-left {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
body.swal2-toast-shown .swal2-container.swal2-center-start, body.swal2-toast-shown .swal2-container.swal2-center-left {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  transform: translateY(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-center {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-bottom-start, body.swal2-toast-shown .swal2-container.swal2-bottom-left {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}
body.swal2-toast-shown .swal2-container.swal2-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "FontAwesome";
  src: url(/fonts/vendor/font-awesome/fontawesome-webfont.eot?8b43027f47b20503057dfbbaa9401fef);
  src: url(/fonts/vendor/font-awesome/fontawesome-webfont.eot?8b43027f47b20503057dfbbaa9401fef?#iefix&v=4.7.0) format("embedded-opentype"), url(/fonts/vendor/font-awesome/fontawesome-webfont.woff2?20fd1704ea223900efa9fd4e869efb08) format("woff2"), url(/fonts/vendor/font-awesome/fontawesome-webfont.woff?f691f37e57f04c152e2315ab7dbad881) format("woff"), url(/fonts/vendor/font-awesome/fontawesome-webfont.ttf?1e59d2330b4c6deb84b340635ed36249) format("truetype"), url(/fonts/vendor/font-awesome/fontawesome-webfont.svg?c1e38fd9e0e74ba58f7a2b77ef29fdd3#fontawesomeregular) format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.2857142857em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.8571428571em;
}

.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.fa-pull-left {
  float: left;
}

.fa-pull-right {
  float: right;
}

.fa.fa-pull-left {
  margin-right: 0.3em;
}
.fa.fa-pull-right {
  margin-left: 0.3em;
}

/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: 0.3em;
}
.fa.pull-right {
  margin-left: 0.3em;
}

.fa-spin {
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper-pp:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-newspaper-o:before {
  content: "\f1ea";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bell-slash-o:before {
  content: "\f1f7";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-eyedropper:before {
  content: "\f1fb";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-pie-chart:before {
  content: "\f200";
}

.fa-line-chart:before {
  content: "\f201";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-bus:before {
  content: "\f207";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-cc:before {
  content: "\f20a";
}

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}

.fa-meanpath:before {
  content: "\f20c";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-diamond:before {
  content: "\f219";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-venus:before {
  content: "\f221";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-genderless:before {
  content: "\f22d";
}

.fa-facebook-official:before {
  content: "\f230";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-server:before {
  content: "\f233";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-train:before {
  content: "\f238";
}

.fa-subway:before {
  content: "\f239";
}

.fa-medium:before {
  content: "\f23a";
}

.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}

.fa-optin-monster:before {
  content: "\f23c";
}

.fa-opencart:before {
  content: "\f23d";
}

.fa-expeditedssl:before {
  content: "\f23e";
}

.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}

.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}

.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}

.fa-mouse-pointer:before {
  content: "\f245";
}

.fa-i-cursor:before {
  content: "\f246";
}

.fa-object-group:before {
  content: "\f247";
}

.fa-object-ungroup:before {
  content: "\f248";
}

.fa-sticky-note:before {
  content: "\f249";
}

.fa-sticky-note-o:before {
  content: "\f24a";
}

.fa-cc-jcb:before {
  content: "\f24b";
}

.fa-cc-diners-club:before {
  content: "\f24c";
}

.fa-clone:before {
  content: "\f24d";
}

.fa-balance-scale:before {
  content: "\f24e";
}

.fa-hourglass-o:before {
  content: "\f250";
}

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}

.fa-hourglass:before {
  content: "\f254";
}

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}

.fa-hand-scissors-o:before {
  content: "\f257";
}

.fa-hand-lizard-o:before {
  content: "\f258";
}

.fa-hand-spock-o:before {
  content: "\f259";
}

.fa-hand-pointer-o:before {
  content: "\f25a";
}

.fa-hand-peace-o:before {
  content: "\f25b";
}

.fa-trademark:before {
  content: "\f25c";
}

.fa-registered:before {
  content: "\f25d";
}

.fa-creative-commons:before {
  content: "\f25e";
}

.fa-gg:before {
  content: "\f260";
}

.fa-gg-circle:before {
  content: "\f261";
}

.fa-tripadvisor:before {
  content: "\f262";
}

.fa-odnoklassniki:before {
  content: "\f263";
}

.fa-odnoklassniki-square:before {
  content: "\f264";
}

.fa-get-pocket:before {
  content: "\f265";
}

.fa-wikipedia-w:before {
  content: "\f266";
}

.fa-safari:before {
  content: "\f267";
}

.fa-chrome:before {
  content: "\f268";
}

.fa-firefox:before {
  content: "\f269";
}

.fa-opera:before {
  content: "\f26a";
}

.fa-internet-explorer:before {
  content: "\f26b";
}

.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}

.fa-contao:before {
  content: "\f26d";
}

.fa-500px:before {
  content: "\f26e";
}

.fa-amazon:before {
  content: "\f270";
}

.fa-calendar-plus-o:before {
  content: "\f271";
}

.fa-calendar-minus-o:before {
  content: "\f272";
}

.fa-calendar-times-o:before {
  content: "\f273";
}

.fa-calendar-check-o:before {
  content: "\f274";
}

.fa-industry:before {
  content: "\f275";
}

.fa-map-pin:before {
  content: "\f276";
}

.fa-map-signs:before {
  content: "\f277";
}

.fa-map-o:before {
  content: "\f278";
}

.fa-map:before {
  content: "\f279";
}

.fa-commenting:before {
  content: "\f27a";
}

.fa-commenting-o:before {
  content: "\f27b";
}

.fa-houzz:before {
  content: "\f27c";
}

.fa-vimeo:before {
  content: "\f27d";
}

.fa-black-tie:before {
  content: "\f27e";
}

.fa-fonticons:before {
  content: "\f280";
}

.fa-reddit-alien:before {
  content: "\f281";
}

.fa-edge:before {
  content: "\f282";
}

.fa-credit-card-alt:before {
  content: "\f283";
}

.fa-codiepie:before {
  content: "\f284";
}

.fa-modx:before {
  content: "\f285";
}

.fa-fort-awesome:before {
  content: "\f286";
}

.fa-usb:before {
  content: "\f287";
}

.fa-product-hunt:before {
  content: "\f288";
}

.fa-mixcloud:before {
  content: "\f289";
}

.fa-scribd:before {
  content: "\f28a";
}

.fa-pause-circle:before {
  content: "\f28b";
}

.fa-pause-circle-o:before {
  content: "\f28c";
}

.fa-stop-circle:before {
  content: "\f28d";
}

.fa-stop-circle-o:before {
  content: "\f28e";
}

.fa-shopping-bag:before {
  content: "\f290";
}

.fa-shopping-basket:before {
  content: "\f291";
}

.fa-hashtag:before {
  content: "\f292";
}

.fa-bluetooth:before {
  content: "\f293";
}

.fa-bluetooth-b:before {
  content: "\f294";
}

.fa-percent:before {
  content: "\f295";
}

.fa-gitlab:before {
  content: "\f296";
}

.fa-wpbeginner:before {
  content: "\f297";
}

.fa-wpforms:before {
  content: "\f298";
}

.fa-envira:before {
  content: "\f299";
}

.fa-universal-access:before {
  content: "\f29a";
}

.fa-wheelchair-alt:before {
  content: "\f29b";
}

.fa-question-circle-o:before {
  content: "\f29c";
}

.fa-blind:before {
  content: "\f29d";
}

.fa-audio-description:before {
  content: "\f29e";
}

.fa-volume-control-phone:before {
  content: "\f2a0";
}

.fa-braille:before {
  content: "\f2a1";
}

.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}

.fa-glide:before {
  content: "\f2a5";
}

.fa-glide-g:before {
  content: "\f2a6";
}

.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}

.fa-low-vision:before {
  content: "\f2a8";
}

.fa-viadeo:before {
  content: "\f2a9";
}

.fa-viadeo-square:before {
  content: "\f2aa";
}

.fa-snapchat:before {
  content: "\f2ab";
}

.fa-snapchat-ghost:before {
  content: "\f2ac";
}

.fa-snapchat-square:before {
  content: "\f2ad";
}

.fa-pied-piper:before {
  content: "\f2ae";
}

.fa-first-order:before {
  content: "\f2b0";
}

.fa-yoast:before {
  content: "\f2b1";
}

.fa-themeisle:before {
  content: "\f2b2";
}

.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}

.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}

.fa-handshake-o:before {
  content: "\f2b5";
}

.fa-envelope-open:before {
  content: "\f2b6";
}

.fa-envelope-open-o:before {
  content: "\f2b7";
}

.fa-linode:before {
  content: "\f2b8";
}

.fa-address-book:before {
  content: "\f2b9";
}

.fa-address-book-o:before {
  content: "\f2ba";
}

.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}

.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}

.fa-user-circle:before {
  content: "\f2bd";
}

.fa-user-circle-o:before {
  content: "\f2be";
}

.fa-user-o:before {
  content: "\f2c0";
}

.fa-id-badge:before {
  content: "\f2c1";
}

.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}

.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}

.fa-quora:before {
  content: "\f2c4";
}

.fa-free-code-camp:before {
  content: "\f2c5";
}

.fa-telegram:before {
  content: "\f2c6";
}

.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}

.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}

.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}

.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

.fa-shower:before {
  content: "\f2cc";
}

.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}

.fa-podcast:before {
  content: "\f2ce";
}

.fa-window-maximize:before {
  content: "\f2d0";
}

.fa-window-minimize:before {
  content: "\f2d1";
}

.fa-window-restore:before {
  content: "\f2d2";
}

.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}

.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}

.fa-bandcamp:before {
  content: "\f2d5";
}

.fa-grav:before {
  content: "\f2d6";
}

.fa-etsy:before {
  content: "\f2d7";
}

.fa-imdb:before {
  content: "\f2d8";
}

.fa-ravelry:before {
  content: "\f2d9";
}

.fa-eercast:before {
  content: "\f2da";
}

.fa-microchip:before {
  content: "\f2db";
}

.fa-snowflake-o:before {
  content: "\f2dc";
}

.fa-superpowers:before {
  content: "\f2dd";
}

.fa-wpexplorer:before {
  content: "\f2de";
}

.fa-meetup:before {
  content: "\f2e0";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.toast-title {
  font-weight: bold;
}

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.toast-message a,
.toast-message label {
  color: #ffffff;
}

.toast-message a:hover {
  color: #cccccc;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

#toast-container {
  position: fixed;
  z-index: 999999;
  /*overrides*/
}

#toast-container * {
  box-sizing: border-box;
}

#toast-container > div {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px #999999;
  color: #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}

#toast-container > div:hover {
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}

#toast-container > .toast-info {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}

#toast-container > .toast-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}

#toast-container > .toast-success {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}

#toast-container > .toast-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.toast {
  background-color: #030303;
}

.toast-success {
  background-color: #51a351;
}

.toast-error {
  background-color: #bd362f;
}

.toast-info {
  background-color: #2f96b4;
}

.toast-warning {
  background-color: #f89406;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }

  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }

  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}
.theme-switcher-wrap {
  with: 100%;
  text-align: right;
}
.theme-switcher-wrap .theme-switcher {
  display: inline-block;
  cursore: pointer;
}
.theme-switcher-wrap .theme-switcher .switch-path {
  background-color: var(--theme-neutral-300);
}
.theme-switcher-wrap .theme-switcher .switch-path .switch-handle {
  background-color: var(--theme-neutral-400);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.theme-switcher-wrap .theme-switcher.active .switch-path {
  background-color: var(--theme-neutral-600);
}
.theme-switcher-wrap .theme-switcher.active .switch-handle {
  background-color: var(--theme-success-500);
  transform: translateX(20px);
}

/* Sortable table headers (bootstrap-vue b-table): the built-in sort arrows are black SVGs, which
   disappear on dark table headers. Same shapes with white fill so the arrows stay visible. */
body.theme-dark .table.b-table > thead > tr > [aria-sort=none],
body.theme-dark .table.b-table > tfoot > tr > [aria-sort=none] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.4' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e");
}

body.theme-dark .table.b-table > thead > tr > [aria-sort=ascending],
body.theme-dark .table.b-table > tfoot > tr > [aria-sort=ascending] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' opacity='.4' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e");
}

body.theme-dark .table.b-table > thead > tr > [aria-sort=descending],
body.theme-dark .table.b-table > tfoot > tr > [aria-sort=descending] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='white' opacity='.4' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='white' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e");
}

/* ==========================================================================
   Theme tokens (Theme Settings > /theme-settings, per module)
   The values below are only fallbacks (Theme Settings defaults). At runtime
   resources/js/ThemePalette.js overwrites every --theme-* shade with the
   active module's palette, so never hard-code colors: use these variables.
   ========================================================================== */
:root {
  /* Primary — Theme Settings > Theme primary color (default #FF9900) */
  --theme-primary-50: #fff5e5;
  --theme-primary-100: #ffebcc;
  --theme-primary-200: #ffd699;
  --theme-primary-300: #ffc266;
  --theme-primary-400: #ffad33;
  --theme-primary-500: #ff9900;
  --theme-primary-600: #cc7a00;
  --theme-primary-700: #995c00;
  --theme-primary-800: #663d00;
  --theme-primary-900: #331f00;
  --theme-primary-950: #190f00;
  /* Neutral — Theme Settings > Theme neutral color */
  --theme-neutral-50: #ffffff;
  --theme-neutral-100: #f7f7f7;
  --theme-neutral-200: #ebebeb;
  --theme-neutral-300: #d7d7d7;
  --theme-neutral-400: #bbbbbb;
  --theme-neutral-500: #9e9e9e;
  --theme-neutral-600: #6f6f6f;
  --theme-neutral-700: #414141;
  --theme-neutral-800: #212121;
  --theme-neutral-900: #0d0d0d;
  --theme-neutral-950: #000000;
  /* Status colors — Theme Settings > Status colors (defaults) */
  --theme-success-50: #E9FBF2;
  --theme-success-100: #D4F7E4;
  --theme-success-200: #A8F0C9;
  --theme-success-300: #7DE8AF;
  --theme-success-400: #52E094;
  --theme-success-500: #20B364;
  --theme-success-600: #1FAD61;
  --theme-success-700: #178249;
  --theme-success-800: #0F5730;
  --theme-success-900: #082B18;
  --theme-success-950: #04160C;
  --theme-error-50: #FBEAEA;
  --theme-error-100: #F7D4D5;
  --theme-error-200: #EEAAAA;
  --theme-error-300: #E67F80;
  --theme-error-400: #DD5556;
  --theme-error-500: #D63031;
  --theme-error-600: #AA2223;
  --theme-error-700: #80191A;
  --theme-error-800: #551111;
  --theme-error-900: #2B0809;
  --theme-error-950: #150404;
  --theme-warn-50: #FEF5E6;
  --theme-warn-100: #FDECD3;
  --theme-warn-200: #FCD7A1;
  --theme-warn-300: #FAC475;
  --theme-warn-400: #F9B149;
  --theme-warn-500: #F79E1B;
  --theme-warn-600: #D48107;
  --theme-warn-700: #9E6006;
  --theme-warn-800: #673F04;
  --theme-warn-900: #362102;
  --theme-warn-950: #190F01;
  --theme-info-50: #E7F4FE;
  --theme-info-100: #CFE8FC;
  --theme-info-200: #9ED1FA;
  --theme-info-300: #6EBAF7;
  --theme-info-400: #3DA3F5;
  --theme-info-500: #2196F3;
  --theme-info-600: #0A70C2;
  --theme-info-700: #085491;
  --theme-info-800: #053861;
  --theme-info-900: #031C30;
  --theme-info-950: #010E18;
  /* Semantic UI tokens (built only from the theme palette) */
  --ui-font: "Nunito", sans-serif;
  /* Project font: Nunito only */
  --ui-bg: color-mix(in srgb, var(--theme-primary-500) 4%, var(--theme-neutral-100));
  --ui-surface: var(--theme-neutral-50);
  --ui-surface-muted: color-mix(in srgb, var(--theme-neutral-100) 70%, var(--theme-neutral-50));
  /* Borders mix the darkest neutral into the surface, so they stay visible with any palette
     (the light 100/200/300 shades are near-white in some themes and made borders disappear). */
  --ui-border: color-mix(in srgb, var(--theme-neutral-950) 13%, var(--theme-neutral-50));
  --ui-border-strong: color-mix(in srgb, var(--theme-neutral-950) 24%, var(--theme-neutral-50));
  --ui-heading: var(--theme-neutral-900);
  --ui-text: var(--theme-neutral-800);
  --ui-text-muted: var(--theme-neutral-600);
  --ui-text-subtle: var(--theme-neutral-500);
  --ui-primary-soft: color-mix(in srgb, var(--theme-primary-500) 10%, var(--theme-neutral-50));
  --ui-radius-sm: 6px;
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-control-h: 40px;
  /* inputs, selects and the buttons/swatches that sit beside them */
  --ui-shadow: 0 2px 10px color-mix(in srgb, var(--theme-neutral-950) 5%, transparent);
  --ui-shadow-lg: 0 12px 32px color-mix(in srgb, var(--theme-neutral-950) 12%, transparent);
  --ui-header-h: 64px;
  --ui-sidebar-w: 280px;
}

body.theme-dark {
  --ui-bg: var(--theme-neutral-950);
  --ui-surface: var(--theme-neutral-900);
  --ui-surface-muted: var(--theme-neutral-800);
  --ui-border: var(--theme-neutral-800);
  --ui-border-strong: var(--theme-neutral-700);
  --ui-heading: var(--theme-neutral-50);
  --ui-text: var(--theme-neutral-100);
  --ui-text-muted: var(--theme-neutral-400);
  --ui-text-subtle: var(--theme-neutral-500);
  --ui-primary-soft: color-mix(in srgb, var(--theme-primary-500) 18%, var(--theme-neutral-900));
  --ui-shadow: none;
}

.sidebar-wrapper .ps__rail-x {
  display: none !important;
}

/* Red dot on sidebar entries that have requests waiting for admin action */
.sidebar-wrapper .pending-dot {
  display: inline-block;
  flex: none;
  position: static;
  width: 7px;
  height: 7px;
  /* sits right after the label, vertically centred */
  margin: 0;
  margin-inline-start: -4px;
  border-radius: 50%;
  background-color: var(--theme-primary-500);
  /* surface-coloured ring keeps it visible on the solid active row */
  box-shadow: 0 0 0 2px var(--ui-surface);
  vertical-align: middle;
  animation: pending-dot-blink 1.2s ease-in-out infinite;
}

/* Expanded menu: its submenu entry shows the dot, so drop the one on the parent */
.sidebar-wrapper .sidebar-item.open > .sidebar-link .pending-dot {
  display: none;
}

@keyframes pending-dot-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
html,
body {
  overflow-x: hidden;
}

/* Figma Design Tokens */
:root {
  --Colors-Shades-Neutral-N---50: #FFFFFF;
  --Colors-Shades-Neutral-N---200: var(--theme-neutral-200);
}

.theme-toggle-btn:focus,
.theme-toggle-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Only the icon inside the toggle button spins briefly on click, in sync with the page-wide reveal. */
.theme-toggle-btn--spin i {
  display: inline-block;
  animation: theme-toggle-spin 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes theme-toggle-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.75);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
/* Circular reveal for the theme toggle (VerticalHeader.vue setTheme) runs via the View
   Transitions API on browsers that support it - disable the browser's default crossfade
   on both snapshots so only our custom clip-path animation on ::view-transition-new(root)
   is visible. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  z-index: 1;
}

::view-transition-old(root) {
  z-index: 0;
}

/* Fallback smooth fade for browsers without the View Transitions API (e.g. Firefox), or
   as a base so nothing snaps instantly even before the transition kicks in. */
@media (prefers-reduced-motion: no-preference) {
  body,
#app,
#main,
#main-content,
#sidebar,
.card,
.content,
.detail-card,
.table,
.table thead th,
.table tbody td,
.dropdown-menu,
.modal-content,
.b-table {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
}
/* Used as class="error" for validation messages across ~27 views (barcode, image, variant,
   JSON file upload, etc.) with no prior definition anywhere - they rendered in whatever text
   color happened to inherit, never actually red, in either theme. */
.error {
  color: var(--theme-error-500) !important;
}

body.theme-dark .error {
  /* Same reason every other dark-mode color override in this file exists: the base
     .error rule above loses to the global span/p/div !important color reset otherwise. */
  color: var(--theme-error-500) !important;
}

/* Bootstrap's .text-success/.text-danger don't carry !important, so the dark-mode global
   span/p/div color reset above (which does) wins regardless of the class beating the tag
   selector on specificity - "File exists"/error indicators built from these utilities go
   washed-out white in dark mode instead of green/red. */
body.theme-dark .text-success {
  color: var(--theme-success-400) !important;
}

body.theme-dark .text-danger {
  color: var(--theme-error-500) !important;
}

body,
#app,
#main {
  min-height: 100vh !important;
}

#main {
  background: var(--Colors-Shades-Neutral-N---50, #FFFFFF) !important;
  display: flex !important;
  flex-direction: column !important;
}

#main-content {
  background: var(--Colors-Shades-Neutral-N---50, #FFFFFF) !important;
}

.figma-card,
.card {
  background: var(--Colors-Shades-Neutral-N---50, #FFFFFF) !important;
  border: 1px solid var(--Colors-Shades-Neutral-N---200, var(--ui-border)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Figma Typography Tokens */
.figma-text-xl-semibold {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  color: var(--theme-neutral-950) !important;
  letter-spacing: -0.01em !important;
}

.figma-text-base-bold {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: var(--theme-neutral-950) !important;
}

.figma-modal-subtitle {
  font-size: 14px !important;
  color: var(--theme-neutral-400) !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  color: var(--theme-neutral-400) !important;
  /* Ensure proper neutral gray */
}

.figma-modal-title-group {
  /* Figma: Vertical, Width: 696px (as max), Height: 52px, Gap: p-1 (4px), Opacity: 1 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 !important;
  max-width: 696px !important;
  height: 52px !important;
  gap: 4px !important;
  opacity: 1 !important;
}

/* Standard Figma Modal Container */
.figma-modal .modal-dialog {
  max-width: 800px !important;
  width: 800px !important;
}

.figma-modal .modal-content {
  border: none !important;
  border-radius: var(--ui-radius-lg) !important;
  overflow: hidden;
  box-shadow: none !important;
}

.figma-modal-header {
  padding: 24px !important;
  /* Padding/p-6 */
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px !important;
  /* Padding/p-4 gap */
  border-bottom: 1px solid var(--ui-border) !important;
  background-color: var(--ui-surface) !important;
  min-height: 100px !important;
  /* Hug (100px) */
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
}

.figma-btn-close {
  /* Figma: Button — Outline, btn-md, Only Icon, 40×40px, Radius/rounded-lg */
  width: 40px !important;
  height: 40px !important;
  background-color: var(--theme-neutral-100) !important;
  /* Colors/Shades/Neutral/N-100 */
  border-radius: 8px !important;
  /* Radius/rounded-lg */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border) !important;
  /* Border Width/b-1, N-200 */
  padding: 8px !important;
  /* Padding/p-2 */
  transition: all 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.figma-btn-close:hover {
  background-color: var(--theme-neutral-200) !important;
  border-color: var(--theme-neutral-300) !important;
}

.figma-btn-close i {
  color: var(--theme-neutral-700) !important;
  /* Neutral-800 */
  font-size: 14px !important;
  line-height: 1;
}

.order-item-card {
  /* Figma: Modal_Order_Card — Vertical, Radius: 16px, Border: 1px var(--theme-neutral-200), BG: #FFFFFF */
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  border-radius: 16px !important;
  border: 1px solid var(--ui-border) !important;
  background-color: var(--ui-surface) !important;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: none !important;
  /* Subtle default elevation */
}

.order-item-card:hover {
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Card inner container: image + data section */
.order-item-card .order-item-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.order-item-card .order-item-image {
  width: 80px !important;
  height: 80px !important;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.order-item-card .order-item-data {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.order-item-card .order-item-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--theme-neutral-900) !important;
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}

.order-item-card .order-item-variant {
  font-size: 13px !important;
  color: var(--theme-neutral-400) !important;
  margin-bottom: 0 !important;
}

/* Card price info: quantity + price row */
.order-item-card .order-item-price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--ui-border);
  background-color: var(--theme-neutral-100);
}

.order-item-card .order-item-qty {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--theme-neutral-600) !important;
}

.order-item-card .order-item-subtotal {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--theme-neutral-900) !important;
  margin-bottom: 0 !important;
}

/* Premium Modal Overlay & Backdrop */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.modal.show {
  display: block !important;
  overflow-y: auto !important;
}

.modal-dialog {
  margin: 1.75rem auto !important;
  transition: transform 0.3s ease-out !important;
}

.modal-content {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.modal-header {
  padding: 1.5rem 2rem !important;
}

.modal-footer {
  /* Figma: Modal Footer — Horizontal, Fill(800px), Hug(80px), Radius: 0 0 2xl 2xl */
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 80px !important;
  border-radius: 0 0 24px 24px !important;
  /* Radius/rounded-none top, rounded-2xl bottom */
  border: none !important;
  border-top: 1px solid var(--ui-border) !important;
  /* Border Width/b-1, Top side, N-200 */
  padding: 16px 32px 16px 24px !important;
  /* p-4 / p-8 / p-4 / p-6 */
  gap: 24px !important;
  /* Padding/p-6 */
  background-color: var(--theme-neutral-100) !important;
  /* Colors/Shades/Neutral/N-100 */
}

.modal-body-content {
  /* Figma: Modal Body — Flow: Horizontal, Padding: p-6 (24px), Gap: p-4 (16px) */
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  gap: 16px !important;
  /* Padding/p-4 */
  padding: 24px !important;
  /* Padding/p-6 */
}
.modal-body-content::-webkit-scrollbar {
  width: 6px;
}
.modal-body-content::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body-content::-webkit-scrollbar-thumb {
  background: var(--theme-neutral-200);
  border-radius: 10px;
}
.modal-body-content::-webkit-scrollbar-thumb:hover {
  background: var(--theme-neutral-300);
}

/* Figma: Columns — Flow: Vertical, Width: Fill, Gap: p-6 (24px) */
.modal-order-columns {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  width: 100% !important;
  gap: 24px !important;
  /* Padding/p-6 */
}

/* 

   Premium eGrocer Figma Design System (Global Styles)

*/
/* --- Stat Cards --- */
.bg-light-figma {
  background: var(--theme-neutral-100) !important;
}

.figma-stat-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.figma-stat-icon-box-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: all 0.2s;
}

/* Figma Primary Soft Container Section */
.figma-bg-soft-green,
.figma-bg-soft-primary {
  background: var(--figma-primary-light, var(--theme-primary-50)) !important;
  border-radius: 20px;
}

.figma-stat-label {
  font-size: 14px;
  color: var(--theme-neutral-700);
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  letter-spacing: 0;
  margin-bottom: 2px;
  text-transform: capitalize;
}

.figma-summary-label {
  font-size: 16px;
  color: var(--theme-neutral-700);
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0;
}

.figma-order-status-label {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--Colors-Shades-Neutral-N---800, var(--theme-neutral-700));
}

.figma-order-status-count {
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  color: var(--Colors-Shades-Neutral-N---950, var(--theme-neutral-950)) !important;
}

/* Stat Bg Variants (New Figma style) */
.bg-light-success-stat {
  background-color: var(--theme-success-50) !important;
}

.bg-light-orange-stat {
  background-color: var(--theme-primary-50) !important;
}

.bg-light-blue-stat {
  background-color: var(--theme-info-50) !important;
}

.bg-light-red-stat {
  background-color: var(--theme-error-50) !important;
}

.figma-stat-value {
  font-family: var(--ui-font) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
  color: var(--theme-neutral-950) !important;
  margin-bottom: 0 !important;
}

/* KPI Cards V.2 (Horizontal Design for Orders Menu) */
.figma-kpi-card-v2 {
  min-height: 76px !important;
  height: auto !important;
  border-radius: var(--ui-radius-lg) !important;
  border: 1px solid var(--ui-border) !important;
  display: flex;
  align-items: center;
  padding: 16px !important;
  background: var(--ui-surface) !important;
  transition: all 0.2s ease;
}

.figma-kpi-icon-v2 {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: #FFFFFF !important;
}

/* Card Specific Tints & Icon Colors */
.card-kpi-new {
  background-color: var(--theme-success-50) !important;
  border-color: var(--theme-success-100) !important;
}

.card-kpi-new .figma-kpi-icon-v2 {
  background-color: var(--theme-success-500) !important;
}

.card-kpi-processing {
  background-color: var(--theme-primary-50) !important;
  border-color: var(--theme-primary-100) !important;
}

.card-kpi-processing .figma-kpi-icon-v2 {
  background-color: var(--theme-warn-500) !important;
}

.card-kpi-ready {
  background-color: var(--theme-info-50) !important;
  border-color: var(--theme-info-100) !important;
}

.card-kpi-ready .figma-kpi-icon-v2 {
  background-color: var(--theme-info-500) !important;
}

.card-kpi-out {
  background-color: var(--theme-error-50) !important;
  border-color: var(--theme-error-50) !important;
}

.card-kpi-out .figma-kpi-icon-v2 {
  background-color: var(--Colors-Status-Error, var(--theme-error-500)) !important;
}

.figma-kpi-icon-v2 i {
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.figma-kpi-content-v2 {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

.figma-kpi-label-v2 {
  font-size: 12px;
  color: var(--ui-text-muted);
  font-weight: 600;
}

.figma-kpi-value-v2 {
  font-size: 20px;
  color: var(--ui-heading);
  font-weight: 700;
  line-height: 1;
}

/* Stat Color Utilities to replace inline styles */
.bg-stat-blue {
  background-color: var(--theme-primary-500) !important;
}

.bg-stat-green {
  background-color: var(--theme-success-500) !important;
}

.bg-stat-orange {
  background-color: var(--theme-warn-500) !important;
}

.bg-stat-red {
  background-color: var(--Colors-Status-Error, var(--theme-error-500)) !important;
}

.bg-stat-pink {
  background-color: var(--theme-primary-500) !important;
}

.bg-stat-purple {
  background-color: var(--theme-primary-500) !important;
}

.bg-stat-blue-light {
  background-color: var(--theme-info-50) !important;
}

.bg-stat-green-light {
  background-color: var(--theme-success-50) !important;
}

.bg-stat-orange-light {
  background-color: var(--theme-primary-50) !important;
}

.bg-stat-red-light {
  background-color: var(--theme-error-50) !important;
}

.bg-stat-pink-light {
  background-color: var(--theme-primary-50) !important;
}

.bg-stat-purple-light {
  background-color: var(--theme-primary-50) !important;
}

.text-stat-blue {
  color: var(--theme-primary-500) !important;
}

.text-stat-green {
  color: var(--theme-success-500) !important;
}

.text-stat-orange {
  color: var(--theme-warn-500) !important;
}

.text-stat-red {
  color: var(--theme-error-500) !important;
}

.text-stat-pink {
  color: var(--theme-primary-500) !important;
}

.text-stat-purple {
  color: var(--theme-primary-500) !important;
}

.text-stat-green {
  color: var(--theme-success-500) !important;
}

/* --- Search & Action Bar --- */
.figma-search-container {
  display: flex;
  align-items: center;
  padding: 0 16px !important;
  background: var(--theme-neutral-100) !important;
  border-radius: 8px !important;
  gap: 12px;
  max-width: 400px;
  height: 40px !important;
  border: 1px solid var(--ui-border) !important;
}

.figma-search-container i {
  font-size: 16px !important;
  color: var(--theme-neutral-400) !important;
}

.figma-search-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  outline: none;
  color: var(--theme-neutral-700);
  font-weight: 500;
}

.btn-figma-filter,
.btn-figma-columns,
.btn-figma-action {
  background: var(--ui-surface) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--theme-neutral-700) !important;
  height: 40px !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-transform: capitalize !important;
}

.btn-figma-filter {
  min-width: 143px !important;
}

.btn-figma-columns {
  min-width: 130px !important;
}

.btn-figma-filter i,
.btn-figma-columns i,
.btn-figma-action i {
  font-size: 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  margin: 0 !important;
}

.btn-figma-filter span,
.btn-figma-columns span,
.btn-figma-action span {
  display: inline-flex;
  align-items: center;
  line-height: 1 !important;
}

.btn-figma-filter:hover,
.btn-figma-columns:hover,
.btn-figma-action:hover {
  background: var(--theme-neutral-100) !important;
  border-color: var(--theme-neutral-700) !important;
  border-top: 1px solid var(--theme-primary-500) !important;
  color: var(--theme-neutral-950) !important;
}

.btn-figma-filter:focus,
.btn-figma-columns:focus,
.btn-figma-action:focus,
.column-dropdown,
.column-dropdown .btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

.btn-figma-filter.active,
.column-dropdown.show .btn-figma-columns {
  background: var(--theme-primary-50) !important;
  border-top: 1px solid var(--theme-primary-500) !important;
  color: var(--theme-primary-500) !important;
  border-color: var(--theme-neutral-700) !important;
}

.btn-figma-filter.active i,
.column-dropdown.show .btn-figma-columns i {
  color: var(--theme-primary-500) !important;
}

/* --- Global Table UI (Figma Standard for ALL tables) --- */
.table thead th,
thead th,
.b-table thead th,
.figma-order-table thead th {
  background-color: var(--theme-neutral-100) !important;
  color: var(--theme-neutral-600) !important;
  font-family: var(--ui-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 16px 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--ui-border) !important;
  vertical-align: middle !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

tbody td,
.figma-tr td {
  padding: 16px 16px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-left: none !important;
  border-right: none !important;
  background: var(--ui-surface) !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  color: var(--theme-neutral-800) !important;
}

tbody tr:hover td,
.figma-tr:hover td {
  background: var(--theme-neutral-100) !important;
}

/* Ensure table-responsive doesn't break borders */
.table-responsive {
  border: 1px solid var(--ui-border);
  border-radius: 0 !important;
  background: var(--ui-surface);
  margin-bottom: 1rem;
}

.table-responsive .table,
.table-responsive .b-table,
.table-responsive .figma-order-table,
.table-responsive .figma-table {
  border: none !important;
  border-radius: 0 !important;
}

/* --- Common Cell Components --- */
.figma-customer-name,
.figma-seller-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ui-heading) !important;
  display: block;
}

.figma-customer-email,
.figma-seller-id {
  font-size: 12px !important;
  color: var(--theme-neutral-400) !important;
  font-weight: 400 !important;
}

.figma-link-blue {
  color: var(--theme-primary-600) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.figma-link-blue:hover {
  text-decoration: underline !important;
}

.figma-amount-bold {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--theme-neutral-950) !important;
}

.figma-payment-method-badge {
  font-size: 10px;
  background: var(--theme-neutral-100);
  padding: 2px 8px;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 4px;
  color: var(--theme-neutral-600);
  font-weight: 700;
  text-transform: none;
}

.figma-date-bold {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--theme-neutral-950) !important;
}

.figma-time-light {
  font-size: 11px;
  color: var(--theme-neutral-400);
  font-weight: 500;
}

/* --- Status Pills (Exact Figma Match) --- */
.figma-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 4px 8px !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-pending {
  background: var(--theme-primary-50) !important;
  /* Colors/Status/Shades/W - 50 */
  color: var(--theme-warn-500) !important;
  border: 1px solid var(--theme-warn-50) !important;
  /* Border Width/b-1 */
}

.status-received {
  /* Confirmed */
  background: var(--theme-success-50) !important;
  /* Colors/Status/Shades/S - 50 */
  color: var(--theme-success-500) !important;
  border: 1px solid var(--theme-success-100) !important;
  /* Border Width/b-1 */
}

.status-processed,
.status-processing {
  background: var(--theme-info-50) !important;
  /* Colors/Status/Shades/I - 50 */
  color: var(--theme-info-500) !important;
  border: 1px solid var(--theme-info-100) !important;
  /* Border Width/b-1 */
}

.status-delivered {
  background: var(--theme-info-50) !important;
  color: var(--theme-info-500) !important;
  border: 1px solid var(--theme-info-100) !important;
}

.status-shipped {
  background: var(--theme-primary-50) !important;
  color: var(--theme-primary-500) !important;
  border: 1px solid var(--theme-primary-100) !important;
}

.status-outfordelivery {
  background: var(--theme-info-50) !important;
  color: var(--theme-info-500) !important;
  border: 1px solid var(--theme-info-100) !important;
}

.status-cancelled {
  background: var(--theme-error-50) !important;
  /* Colors/Status/Shades/E - 50 */
  color: var(--theme-error-500) !important;
  border: 1px solid var(--theme-error-50) !important;
}

.status-returned {
  background: var(--theme-neutral-100) !important;
  color: var(--theme-neutral-400) !important;
  border: 1px solid var(--ui-border) !important;
}

.figma-action-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--ui-surface) !important;
  color: var(--theme-neutral-400) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border) !important;
  padding: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer;
}

.figma-action-btn:hover {
  background: var(--theme-neutral-100) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-800) !important;
}

.figma-delete-btn:hover {
  background: var(--theme-error-50) !important;
  border-color: var(--theme-error-500) !important;
  color: var(--theme-error-500) !important;
}

/* (Replaced by new Black Square pagination at end of file) */
/* --- Results Info --- */
.showing-results-text {
  font-size: 14px;
  color: var(--theme-neutral-400);
  font-weight: 500;
}

.showing-bold {
  color: var(--theme-neutral-800);
  font-weight: 700;
}

/* --- Page Heading Styles --- */
.page-heading {
  margin-bottom: 1.5rem !important;
}
.page-heading h2,
.page-heading h3,
.page-heading .h4 {
  font-weight: 800 !important;
  color: var(--theme-neutral-800) !important;
  letter-spacing: -0.5px;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb .breadcrumb-item a {
  color: var(--theme-neutral-400) !important;
  text-decoration: none;
}
.breadcrumb .breadcrumb-item a:hover {
  color: var(--figma-primary) !important;
}
.breadcrumb .breadcrumb-item.active {
  color: var(--theme-neutral-800) !important;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\f285";
  /* bootstrap-icons chevron-right */
  font-family: "bootstrap-icons";
  font-size: 10px;
  color: var(--theme-neutral-300);
  padding: 0 10px;
}

/* --- Total Footer Row --- */
.figma-total-label-cell {
  font-weight: 800;
  font-size: 14px;
  color: var(--theme-neutral-800);
  padding: 20px 16px !important;
  background: var(--theme-neutral-100) !important;
  border-top: 2px solid var(--ui-border) !important;
}

.figma-total-amount-cell {
  font-weight: 800;
  font-size: 16px;
  color: var(--theme-neutral-800);
  padding: 20px 16px !important;
  background: var(--theme-neutral-100) !important;
  border-top: 2px solid var(--ui-border) !important;
}

.figma-footer {
  padding: 24px !important;
  background: var(--ui-surface) !important;
  border-top: 1px solid var(--ui-border) !important;
  color: var(--theme-neutral-400) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: auto !important;
}
.figma-footer a {
  color: var(--theme-neutral-400) !important;
  text-decoration: none !important;
}
.figma-footer a:hover {
  color: var(--figma-primary) !important;
}
.figma-footer .version-badge {
  background: var(--theme-neutral-100);
  color: var(--theme-neutral-600);
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 12px;
}

/* --- Dashboard Specific Utilities --- */
.figma-card {
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.figma-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
}

.figma-card:hover {
  box-shadow: none !important;
  /* Remove shadow on hover as per request */
  border-color: var(--theme-neutral-300) !important;
}

.figma-select-pill {
  width: auto !important;
  min-width: 130px !important;
  max-width: 170px;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: var(--ui-radius, 8px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 14px !important;
  padding-right: 34px !important;
  border: 1px solid var(--ui-border, var(--theme-neutral-300)) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  color: var(--ui-text, var(--theme-neutral-800)) !important;
  background-color: var(--ui-surface) !important;
  cursor: pointer;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  text-align: start !important;
  text-transform: capitalize !important;
  background-position: right 12px center !important;
  background-size: 16px 12px !important;
  background-repeat: no-repeat !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.figma-avatar-42 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.figma-pagination-small .btn {
  width: 28px;
  height: 28px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-light-soft {
  background: var(--theme-neutral-100) !important;
  border: none !important;
  color: var(--theme-neutral-600) !important;
}

.btn-light-soft:hover {
  background: var(--theme-neutral-200) !important;
}

.btn-primary-light {
  background: var(--theme-success-50) !important;
  border: none !important;
  color: var(--theme-primary-500) !important;
}

.btn-primary-light:hover {
  background: var(--theme-success-100) !important;
}

.btn-light-primary {
  background: var(--theme-success-50) !important;
  border: none !important;
  color: var(--theme-primary-500) !important;
}

.bg-light-soft {
  background: var(--theme-neutral-100) !important;
}

.dot-xs {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.figma-hover-light {
  transition: background 0.15s;
  cursor: pointer;
}

.figma-hover-light:hover {
  background: var(--theme-neutral-100) !important;
}

.scale-90 {
  transform: scale(0.9);
}

.scale-75 {
  transform: scale(0.75);
}

.extra-small {
  font-size: 11px !important;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

/* Inconsistent dots fix */
.dot-sm {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border-radius: 50%;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  position: relative;
  top: 1.5px;
  opacity: 1;
}

.bg-success-orders {
  background: var(--Colors-Status-Shades-S---300, var(--theme-primary-500)) !important;
}

.transition-all {
  transition: all 0.3s ease;
}

/* Premium Trend Pills */
.figma-trend-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  /* Padding p-1 / p-2 */
  border-radius: 100px !important;
  /* Radius/rounded-full */
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 26px !important;
}

.trend-up {
  background: var(--theme-primary-50) !important;
  /* Colors/Shades/Theme/P - 50 */
  color: var(--theme-primary-500) !important;
}

.trend-down {
  background: var(--theme-error-50) !important;
  /* Colors/Status/Shades/E - 50 */
  color: var(--theme-error-500) !important;
}

.view-order-btn {
  transition: all 0.2s ease !important;
}

.view-order-btn:hover {
  background-color: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

/* Card Header Fixes */
.figma-card .card-header,
.figma-card-white .card-header {
  min-height: 72px !important;
  padding: 16px 24px !important;
  background-color: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.figma-card .card-header h4,
.figma-card-white .card-header h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--theme-neutral-700) !important;
  margin: 0 !important;
}

/* Stat Card White Fix */
.figma-card-white {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
}

/* --- User Header Dropdown --- */
.figma-user-role-text {
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}

.figma-user-dropdown-icon {
  font-size: 0.85rem;
}

/* --- Global Panel Background --- */
#main {
  background-color: var(--theme-neutral-100) !important;
  /* Figma light grey background */
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

.main-content {
  padding: 2rem !important;
  flex-grow: 1 !important;
}

/* --- Primary Teal Overrides --- */
:root {
  --figma-primary: var(--theme-primary-500);
  --figma-primary-light: var(--theme-primary-50);
  --figma-primary-dark: var(--theme-primary-600);
  --figma-neutral: var(--theme-neutral-400);
  --figma-neutral-light: var(--theme-neutral-300);
  --figma-neutral-dark: var(--theme-neutral-500);
}

.text-primary,
.text-primary i,
.text-primary span {
  color: var(--figma-primary) !important;
}

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

.btn-primary {
  background-color: var(--figma-primary) !important;
  border-color: var(--figma-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--figma-primary-dark) !important;
  border-color: var(--figma-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 6px color-mix(in srgb, var(--theme-primary-500) 20%, transparent);
}

.bg-light-primary {
  background-color: var(--figma-primary-light) !important;
}

/* --- ViewOrder & Layout Extensions --- */
.order-details-container {
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.order-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--theme-neutral-800);
  letter-spacing: -0.5px;
}

.info-item {
  background: var(--theme-neutral-100);
  padding: 16px;
  border-radius: 12px;
  transition: background 0.2s;
}

.info-item:hover {
  background: var(--theme-neutral-100);
}

.payable-row {
  border-top: 2px dashed var(--ui-border);
  padding-top: 20px;
}

.line-height-relaxed {
  line-height: 1.6;
}

.customer-avatar {
  flex-shrink: 0;
}

.custom-control {
  border-radius: 12px;
  padding: 10px 15px;
  border: 1.5px solid var(--ui-border);
  background-color: var(--theme-neutral-100);
  transition: all 0.2s;
}

.custom-control:focus {
  border-color: var(--figma-primary);
  background-color: var(--ui-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary-500) 10%, transparent);
}

/* --- Premium Form Inputs --- */
.form-select,
.form-control,
.form-control-sm,
.form-select-sm {
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  color: var(--theme-neutral-800) !important;
  background-color: var(--ui-surface) !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
  /* Date/Time Inputs */
}
.form-select::-moz-placeholder, .form-control::-moz-placeholder, .form-control-sm::-moz-placeholder, .form-select-sm::-moz-placeholder {
  color: var(--ui-text-subtle) !important;
}
.form-select::placeholder,
.form-control::placeholder,
.form-control-sm::placeholder,
.form-select-sm::placeholder {
  color: var(--ui-text-subtle) !important;
}
.form-select:is(select):has(option:first-child:checked[value=""]), .form-select:is(select):has(option:first-child:checked[value="0"]),
.form-control:is(select):has(option:first-child:checked[value=""]),
.form-control:is(select):has(option:first-child:checked[value="0"]),
.form-control-sm:is(select):has(option:first-child:checked[value=""]),
.form-control-sm:is(select):has(option:first-child:checked[value="0"]),
.form-select-sm:is(select):has(option:first-child:checked[value=""]),
.form-select-sm:is(select):has(option:first-child:checked[value="0"]) {
  color: var(--theme-neutral-300) !important;
}
.form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit, .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text, .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field, .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field, .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field {
  color: var(--theme-neutral-800) !important;
}
.form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid {
  color: var(--theme-neutral-300) !important;
}
.form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit, .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text, .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field, .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field, .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
.form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
.form-control-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
.form-select-sm:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field {
  color: var(--theme-neutral-300) !important;
}
.form-select:focus,
.form-control:focus,
.form-control-sm:focus,
.form-select-sm:focus {
  border-color: var(--figma-primary) !important;
  background-color: var(--ui-surface) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary-500) 10%, transparent) !important;
}

.form-control:not(.form-control-xl):not(.form-control-lg):not(.form-control-sm) {
  font-size: 14px !important;
  padding: 10px 16px !important;
}

.form-select:not(.form-control-xl):not(.form-control-lg):not(.form-control-sm):not(.form-select-sm):not(.figma-select-pill) {
  font-size: 14px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  line-height: normal !important;
  background-position: right 14px center !important;
}

/* --- Global Select2 Flat Styling (Parity with Premium Inputs) --- */
.select2-container {
  width: 100% !important;
}

/* Select2 appends its dropdown panel to <body> by default, but without an explicit z-index
   it was rendering behind the fixed sidebar (which has its own high z-index) - the panel and
   sidebar visually overlapped/interleaved instead of the dropdown sitting cleanly on top. */
.select2-container--open .select2-dropdown {
  z-index: 100000 !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  min-height: 42px !important;
  font-size: 14px !important;
  transition: all 0.2s ease;
  background-color: var(--ui-surface) !important;
}

.select2-container--default .select2-selection--multiple {
  padding: 2px 6px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--figma-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary-500) 10%, transparent) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 10px !important;
  color: var(--theme-neutral-800) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--theme-neutral-100) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 6px !important;
  color: var(--theme-neutral-800) !important;
  margin-top: 6px !important;
}

/* Select2 multi-select (Tags etc.): same inner spacing as a normal input - text starts 16px in and
   sits on the vertical centre of a 40px box, so "Select Tags" lines up with "Enter Meta Title". */
.select2-container--default .select2-selection--multiple {
  display: flex !important;
  align-items: center;
  min-height: 40px !important;
  padding: 0 16px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 4px 6px 4px 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
  float: none;
  margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 0;
  padding: 0;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-search__field::placeholder,
.select2-search__field::-webkit-input-placeholder,
.select2-search__field:-ms-input-placeholder,
.select2-search__field::-moz-placeholder {
  color: var(--ui-text-subtle) !important;
}

/* Fix for icons */
.form-group.has-icon-left .form-control {
  padding-left: 2.5rem !important;
}

.form-group.has-icon-left .form-control.form-control-xl {
  padding-left: 3rem !important;
}

.form-select {
  padding-right: 40px !important;
  background-position: right 15px center !important;
}

.input-group-text {
  background-color: var(--theme-neutral-100) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px 0 0 10px !important;
  color: var(--theme-neutral-400) !important;
}

/* --- Input Group Layout & Border Radius Alignment --- */
.input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn,
.input-group > .input-group-text {
  border-radius: 10px !important;
  margin: 0 !important;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .btn:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .btn:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px !important;
}
.input-group > .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
}

/* --- Global Premium Pagination (Figma Exact) --- */
.pagination,
.figma-pagination {
  margin-bottom: 0;
  gap: 8px !important;
  /* Space between arrow and num of button */
  display: flex !important;
}

.pagination .page-item .page-link,
.figma-pagination .page-item .page-link {
  border: 1px solid var(--ui-border) !important;
  /* Neutral/N-200 */
  background-color: var(--theme-neutral-100) !important;
  /* Neutral/N-100 */
  color: var(--theme-neutral-950) !important;
  font-weight: 500;
  border-radius: 8px !important;
  /* rounded-md */
  width: 40px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 16px;
  transition: all 0.2s ease;
  box-shadow: none !important;
  margin: 0 !important;
  /* Ensure gap handles spacing */
}

.pagination .page-item.active .page-link,
.figma-pagination .page-item.active .page-link {
  background-color: var(--theme-neutral-950) !important;
  /* Neutral/N-950 */
  border-color: var(--theme-neutral-950) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.pagination .page-item:hover:not(.active) .page-link,
.figma-pagination .page-item:hover:not(.active) .page-link {
  background-color: var(--theme-neutral-200) !important;
  border-color: var(--theme-neutral-300) !important;
}

.pagination .page-item.disabled .page-link,
.figma-pagination .page-item.disabled .page-link {
  background-color: var(--theme-neutral-100) !important;
  color: var(--theme-neutral-300) !important;
  border-color: var(--ui-border) !important;
  opacity: 0.6;
}

/* Specific styling for the Next/Prev chevron icons */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
.figma-pagination .page-item:first-child .page-link,
.figma-pagination .page-item:last-child .page-link {
  font-size: 18px;
  /* Caret size */
  background-color: var(--theme-neutral-100) !important;
  border: 1px solid var(--ui-border) !important;
}

/* Remove default rounded corners and margins for middle items */
.pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}

/* Platform Box Background */
.bg-platform-box {
  background-color: var(--theme-success-50) !important;
}

.figma-platform-label {
  font-family: var(--ui-font) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  color: var(--Colors-Shades-Neutral-N---950, var(--theme-neutral-950)) !important;
}

/* PREMIUM DARK MODE THEME */
body.theme-dark {
  background-color: var(--theme-neutral-900) !important;
  color: var(--theme-neutral-100) !important;
  /* Typography Overrides */
  /* Card & Container Overrides */
  /* Header Overrides */
  /* Breadcrumbs Dark Mode */
  /* General Links */
  /* Sidebar Overrides */
  /* Forms & Inputs */
  /* .custom-select-sm (BootstrapVue's <b-form-select size="sm">, e.g. the pagination "Per
     page" control) has no light-mode CSS of its own in this project - it renders as a bare
     unstyled native <select>, which browsers keep small/compact. The reskin above (custom
     arrow + fixed 32px right padding) is sized for a full-size control and made this one
     visibly taller/wider than its light-mode counterpart. Shrink it back down to match. */
  /* Vue Multiselect Global Dark Mode Styles */
  /* Select2 Global Dark Mode Styles */
  /* Google Places Autocomplete ("Search Location") dropdown.
     Google injects .pac-container/.pac-item directly into <body>, outside
     Vue and outside scoped component styles, so it needs a global rule
     here alongside the other 3rd-party dropdowns (select2 etc.) above. */
  /* Tables */
  /* Widgets & Specific Components */
  /* ApexCharts Stroke Overrides */
  /* Figma Design System Dark Mode Overrides */
  /* Stat Cards Dark Mode */
  /* Status pills: no dark-only colours here. The shared status rules ("Status pills / badges")
     use --theme-*-50 / -700, which dark mode already redefines as dark tints / light text, so
     each status keeps the same colour family in both themes (received = info, delivered = success,
     cancelled = error, ...). */
  /* Scrollbar for Dark Mode */
  /* KPI Cards Dark Mode */
  /* Light stat tints: the --theme-*-50 shades are already dark tints in dark mode (see "Dark mode: status tints"). */
  /* Pagination Dark Mode */
  /* Additional UI Fixes */
  /* Dropzone Dark Mode */
  /* Alert Dark Mode Adjustments */
  /* Column Dropdown */
  /* Total Cells in Table */
  /* Pagination Text */
  /* Premium Daterangepicker Dark Mode Styling */
}
body.theme-dark .custom-control {
  border-color: var(--theme-neutral-700) !important;
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .custom-control-label {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .custom-control:focus {
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark #main {
  background-color: var(--theme-neutral-900) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
body.theme-dark #app,
body.theme-dark #main-content {
  background-color: var(--theme-neutral-900) !important;
}
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark .h1,
body.theme-dark .h2,
body.theme-dark .h3,
body.theme-dark .h4,
body.theme-dark .h5,
body.theme-dark .h6,
body.theme-dark span,
body.theme-dark p,
body.theme-dark div,
body.theme-dark label,
body.theme-dark a,
body.theme-dark code,
body.theme-dark .text-dark {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark code {
  background-color: var(--theme-neutral-800) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  color: var(--theme-success-500) !important;
  /* Matches brand green-ish */
}
body.theme-dark .text-muted {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .card,
body.theme-dark .figma-card,
body.theme-dark .modal-content {
  background-color: var(--theme-neutral-800) !important;
  border: none !important;
  border-top: 1px solid var(--theme-neutral-700) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
}
body.theme-dark .card-header {
  background-color: var(--theme-neutral-800) !important;
  border-bottom: 1px solid var(--theme-neutral-700) !important;
}
body.theme-dark .figma-header,
body.theme-dark .figma-footer {
  background-color: var(--theme-neutral-800) !important;
  border-bottom-color: var(--theme-neutral-700) !important;
  border-top-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .figma-header a,
body.theme-dark .figma-footer a {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .figma-header .version-badge,
body.theme-dark .figma-footer .version-badge {
  background: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .bg-white {
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .bg-light {
  background-color: var(--theme-neutral-900) !important;
}
body.theme-dark .breadcrumb-item {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .breadcrumb-item a {
  color: var(--theme-primary-500) !important;
  /* Theme color for links */
  text-decoration: none;
}
body.theme-dark .breadcrumb-item a:hover {
  color: var(--theme-success-500) !important;
}
body.theme-dark .breadcrumb-item.active {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .breadcrumb-item::before {
  color: var(--theme-neutral-600) !important;
  /* Breadcrumb separator */
}
body.theme-dark a:not(.btn):not(.sidebar-link) {
  color: var(--theme-primary-500) !important;
}
body.theme-dark a:not(.btn):not(.sidebar-link):hover {
  color: var(--theme-success-500) !important;
}
body.theme-dark #sidebar,
body.theme-dark .sidebar-wrapper {
  background-color: var(--theme-neutral-900) !important;
  border-right: 1px solid var(--theme-neutral-800) !important;
}
body.theme-dark .sidebar-wrapper .menu .sidebar-link {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .sidebar-wrapper .menu .sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
body.theme-dark .sidebar-item.active > .sidebar-link {
  background-color: var(--theme-primary-500) !important;
  color: #FFFFFF !important;
}
body.theme-dark .submenu {
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .custom-select,
body.theme-dark .figma-select-pill,
body.theme-dark .choices__inner,
body.theme-dark input[type=text],
body.theme-dark input[type=email],
body.theme-dark input[type=password],
body.theme-dark input[type=number],
body.theme-dark input[type=tel],
body.theme-dark textarea {
  background-color: var(--theme-neutral-900) !important;
  border-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
  /* Date/Time Inputs */
  /* Fix for browser autofill in dark mode */
}
body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-text,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-month-field,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-day-field,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-datetime-edit-year-field {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local]):invalid {
  color: var(--theme-neutral-400) !important;
}
body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field, body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-text,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-month-field,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-day-field,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local]):invalid::-webkit-datetime-edit-year-field {
  color: var(--theme-neutral-400) !important;
}
body.theme-dark .form-control:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark .form-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark .custom-select:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark .figma-select-pill:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark .choices__inner:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark input[type=text]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark input[type=email]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark input[type=password]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark input[type=number]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark input[type=tel]:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator,
body.theme-dark textarea:is(input[type=date], input[type=time], input[type=datetime-local])::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(100%) !important;
}
body.theme-dark .form-control:is(select):has(option:first-child:checked[value=""]), body.theme-dark .form-control:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark .form-select:is(select):has(option:first-child:checked[value=""]),
body.theme-dark .form-select:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark .custom-select:is(select):has(option:first-child:checked[value=""]),
body.theme-dark .custom-select:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark .figma-select-pill:is(select):has(option:first-child:checked[value=""]),
body.theme-dark .figma-select-pill:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark .choices__inner:is(select):has(option:first-child:checked[value=""]),
body.theme-dark .choices__inner:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark input[type=text]:is(select):has(option:first-child:checked[value=""]),
body.theme-dark input[type=text]:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark input[type=email]:is(select):has(option:first-child:checked[value=""]),
body.theme-dark input[type=email]:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark input[type=password]:is(select):has(option:first-child:checked[value=""]),
body.theme-dark input[type=password]:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark input[type=number]:is(select):has(option:first-child:checked[value=""]),
body.theme-dark input[type=number]:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark input[type=tel]:is(select):has(option:first-child:checked[value=""]),
body.theme-dark input[type=tel]:is(select):has(option:first-child:checked[value="0"]),
body.theme-dark textarea:is(select):has(option:first-child:checked[value=""]),
body.theme-dark textarea:is(select):has(option:first-child:checked[value="0"]) {
  color: var(--theme-neutral-400) !important;
}
body.theme-dark .form-control:-webkit-autofill, body.theme-dark .form-control:-webkit-autofill:hover, body.theme-dark .form-control:-webkit-autofill:focus, body.theme-dark .form-control:-webkit-autofill:active,
body.theme-dark .form-select:-webkit-autofill,
body.theme-dark .form-select:-webkit-autofill:hover,
body.theme-dark .form-select:-webkit-autofill:focus,
body.theme-dark .form-select:-webkit-autofill:active,
body.theme-dark .custom-select:-webkit-autofill,
body.theme-dark .custom-select:-webkit-autofill:hover,
body.theme-dark .custom-select:-webkit-autofill:focus,
body.theme-dark .custom-select:-webkit-autofill:active,
body.theme-dark .figma-select-pill:-webkit-autofill,
body.theme-dark .figma-select-pill:-webkit-autofill:hover,
body.theme-dark .figma-select-pill:-webkit-autofill:focus,
body.theme-dark .figma-select-pill:-webkit-autofill:active,
body.theme-dark .choices__inner:-webkit-autofill,
body.theme-dark .choices__inner:-webkit-autofill:hover,
body.theme-dark .choices__inner:-webkit-autofill:focus,
body.theme-dark .choices__inner:-webkit-autofill:active,
body.theme-dark input[type=text]:-webkit-autofill,
body.theme-dark input[type=text]:-webkit-autofill:hover,
body.theme-dark input[type=text]:-webkit-autofill:focus,
body.theme-dark input[type=text]:-webkit-autofill:active,
body.theme-dark input[type=email]:-webkit-autofill,
body.theme-dark input[type=email]:-webkit-autofill:hover,
body.theme-dark input[type=email]:-webkit-autofill:focus,
body.theme-dark input[type=email]:-webkit-autofill:active,
body.theme-dark input[type=password]:-webkit-autofill,
body.theme-dark input[type=password]:-webkit-autofill:hover,
body.theme-dark input[type=password]:-webkit-autofill:focus,
body.theme-dark input[type=password]:-webkit-autofill:active,
body.theme-dark input[type=number]:-webkit-autofill,
body.theme-dark input[type=number]:-webkit-autofill:hover,
body.theme-dark input[type=number]:-webkit-autofill:focus,
body.theme-dark input[type=number]:-webkit-autofill:active,
body.theme-dark input[type=tel]:-webkit-autofill,
body.theme-dark input[type=tel]:-webkit-autofill:hover,
body.theme-dark input[type=tel]:-webkit-autofill:focus,
body.theme-dark input[type=tel]:-webkit-autofill:active,
body.theme-dark textarea:-webkit-autofill,
body.theme-dark textarea:-webkit-autofill:hover,
body.theme-dark textarea:-webkit-autofill:focus,
body.theme-dark textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--theme-neutral-900) inset !important;
  -webkit-text-fill-color: var(--theme-neutral-100) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus,
body.theme-dark .custom-select:focus,
body.theme-dark .figma-select-pill:focus,
body.theme-dark .choices__inner:focus,
body.theme-dark input[type=text]:focus,
body.theme-dark input[type=email]:focus,
body.theme-dark input[type=password]:focus,
body.theme-dark input[type=number]:focus,
body.theme-dark input[type=tel]:focus,
body.theme-dark textarea:focus {
  background-color: var(--theme-neutral-900) !important;
  border-color: var(--theme-primary-500) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--theme-primary-500) 25%, transparent) !important;
}
body.theme-dark .form-select,
body.theme-dark .custom-select,
body.theme-dark select,
body.theme-dark .figma-table-footer select {
  /* Overriding background-image here without re-asserting appearance:none lets some
     browsers redraw their native OS dropdown arrow alongside this custom one, showing
     two stacked chevrons in dark mode (the light-mode base rule's appearance:none doesn't
     reliably survive a later background-image override in every engine). The extra
     ".figma-table-footer select" selector gives this enough specificity to beat
     Bootstrap's own external .form-select-sm rule regardless of stylesheet load order -
     without it, the icon could lose the cascade entirely and disappear rather than
     duplicate. */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 32px !important;
}
body.theme-dark .custom-select-sm:not(.figma-select-pill),
body.theme-dark .form-select-sm:not(.figma-select-pill) {
  height: 31px !important;
  min-height: 31px !important;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  background-position: right 0.5rem center !important;
}
body.theme-dark .multiselect,
body.theme-dark .multiselect__tags {
  background-color: var(--theme-neutral-900) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .multiselect__single,
body.theme-dark .multiselect__input {
  background-color: transparent !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .multiselect__placeholder {
  color: var(--theme-neutral-400) !important;
}
body.theme-dark .multiselect__content-wrapper {
  background-color: var(--theme-neutral-900) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  border-top: none !important;
}
body.theme-dark .multiselect__option {
  background-color: var(--theme-neutral-900) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .multiselect__option--highlight {
  background-color: var(--theme-primary-500) !important;
  color: #FFFFFF !important;
}
body.theme-dark .multiselect__option--selected {
  background-color: var(--theme-neutral-800) !important;
  color: var(--theme-primary-500) !important;
}
body.theme-dark .select2-container--default .select2-selection--single,
body.theme-dark .select2-container--default .select2-selection--multiple {
  background-color: var(--theme-neutral-900) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .select2-dropdown {
  background-color: var(--theme-neutral-900) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--theme-neutral-800) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--theme-primary-500) !important;
  color: #FFFFFF !important;
}
body.theme-dark .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--theme-neutral-800) !important;
  color: var(--theme-primary-500) !important;
}
body.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.theme-dark .select2-search__field::placeholder,
body.theme-dark .select2-search__field::-webkit-input-placeholder,
body.theme-dark .select2-search__field:-ms-input-placeholder,
body.theme-dark .select2-search__field::-moz-placeholder {
  color: var(--theme-neutral-400) !important;
}
body.theme-dark .pac-container {
  background-color: var(--theme-neutral-900) !important;
  border: 1px solid var(--theme-neutral-700) !important;
}
body.theme-dark .pac-item {
  background-color: var(--theme-neutral-900) !important;
  border-top: 1px solid var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .pac-item:hover, body.theme-dark .pac-item.pac-item-selected {
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .pac-item-query {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .pac-matched {
  color: var(--theme-primary-500) !important;
}
body.theme-dark .pac-icon {
  filter: invert(1) brightness(1.6);
}
body.theme-dark .input-group-text {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-300) !important;
}
body.theme-dark label {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .table-responsive {
  border-color: var(--theme-neutral-600) !important;
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .table {
  color: var(--theme-neutral-100) !important;
  border-color: var(--theme-neutral-600) !important;
  /* Handle striped tables in dark mode */
  /* Empty states and table-busy */
}
body.theme-dark .table thead th {
  background-color: var(--theme-neutral-900) !important;
  color: var(--theme-neutral-300) !important;
  border-color: var(--theme-neutral-600) !important;
  border-bottom: 2px solid var(--theme-neutral-600) !important;
}
body.theme-dark .table tbody td {
  border-bottom: 1px solid var(--theme-neutral-600) !important;
}
body.theme-dark .table td,
body.theme-dark .table tr {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-600) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .table.table-striped tbody tr:nth-of-type(odd) td,
body.theme-dark .table.table-striped tbody tr:nth-of-type(odd) th {
  background-color: rgba(255, 255, 255, 0.02) !important;
}
body.theme-dark .table tbody tr:hover td,
body.theme-dark .table .figma-tr:hover td, body.theme-dark .table.figma-order-table tbody tr:hover td, body.theme-dark .table.figma-order-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
body.theme-dark .table .b-table-empty-row,
body.theme-dark .table .b-table-busy-slot {
  background-color: var(--theme-neutral-800) !important;
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .table .b-table-empty-row div,
body.theme-dark .table .b-table-empty-row strong,
body.theme-dark .table .b-table-busy-slot div,
body.theme-dark .table .b-table-busy-slot strong {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .figma-hover-light:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
body.theme-dark .figma-avatar-42,
body.theme-dark .figma-avatar-32 {
  background-color: var(--theme-neutral-700) !important;
}
body.theme-dark .bg-platform-box {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .figma-header :is(.lang-selector, .module-selector, .header-cache-btn, .header-icon-btn, .burger-btn) {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius) !important;
}
body.theme-dark .figma-header :is(.lang-selector, .module-selector, .header-cache-btn, .header-icon-btn, .burger-btn):hover {
  background-color: var(--ui-surface-muted) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--theme-primary-500) !important;
}
body.theme-dark .apexcharts-canvas line,
body.theme-dark .apexcharts-canvas path {
  stroke: var(--theme-neutral-700) !important;
}
body.theme-dark .apexcharts-xcrosshairs {
  fill: var(--theme-neutral-600) !important;
  fill-opacity: 0.2 !important;
}
body.theme-dark .apexcharts-datalabels-group text {
  fill: var(--theme-neutral-100) !important;
}
body.theme-dark .figma-text-xl-semibold,
body.theme-dark .figma-text-base-bold,
body.theme-dark .figma-customer-name,
body.theme-dark .figma-seller-name,
body.theme-dark .figma-title-bold,
body.theme-dark .figma-date-bold,
body.theme-dark .figma-amount-bold {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .figma-modal-header {
  background-color: var(--theme-neutral-800) !important;
  border-bottom-color: var(--theme-neutral-700) !important;
}
body.theme-dark .figma-modal-subtitle,
body.theme-dark .figma-customer-email,
body.theme-dark .figma-text-muted,
body.theme-dark .figma-time-light {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .figma-btn-close {
  background-color: var(--theme-neutral-700) !important;
  border-color: var(--theme-neutral-600) !important;
}
body.theme-dark .figma-btn-close i {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .figma-btn-close:hover {
  background-color: var(--theme-neutral-600) !important;
  border-color: var(--theme-neutral-400) !important;
}
body.theme-dark .order-item-card {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .order-item-card .order-item-name {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .order-item-card .order-item-variant {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .order-item-card .order-item-price-info {
  background-color: var(--theme-neutral-900) !important;
  border-top-color: var(--theme-neutral-700) !important;
}
body.theme-dark .order-item-card .order-item-qty {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .order-item-card .order-item-subtotal {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .modal-content {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .modal-footer {
  background-color: var(--theme-neutral-900) !important;
  border-top-color: var(--theme-neutral-700) !important;
}
body.theme-dark .modal-body-content::-webkit-scrollbar-thumb {
  background: var(--theme-neutral-700) !important;
}
body.theme-dark .modal-body-content::-webkit-scrollbar-thumb:hover {
  background: var(--theme-neutral-600) !important;
}
body.theme-dark .figma-order-table,
body.theme-dark .figma-table {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-600) !important;
}
body.theme-dark .figma-order-table thead th,
body.theme-dark .figma-table thead th {
  background-color: var(--theme-neutral-900) !important;
  color: var(--theme-neutral-300) !important;
  border-top: 1px solid var(--theme-neutral-600) !important;
  border-bottom: 1px solid var(--theme-neutral-600) !important;
  border-bottom-color: var(--theme-neutral-600) !important;
}
body.theme-dark .figma-order-table tbody tr,
body.theme-dark .figma-table tbody tr {
  border-bottom: 1px solid var(--theme-neutral-600) !important;
}
body.theme-dark .figma-order-table tbody td,
body.theme-dark .figma-order-table .figma-tr td,
body.theme-dark .figma-table tbody td,
body.theme-dark .figma-table .figma-tr td {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-600) !important;
  color: var(--theme-neutral-200) !important;
}
body.theme-dark .figma-order-table.b-table.stacked-md > tbody > tr > [data-label],
body.theme-dark .figma-table.b-table.stacked-md > tbody > tr > [data-label] {
  border-bottom-color: var(--theme-neutral-600) !important;
}
body.theme-dark .figma-order-table tbody tr:hover td,
body.theme-dark .figma-order-table .figma-tr:hover td,
body.theme-dark .figma-table tbody tr:hover td,
body.theme-dark .figma-table .figma-tr:hover td {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
body.theme-dark .figma-payment-method-badge {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-200) !important;
}
body.theme-dark .order-details-wrapper .card {
  border-color: var(--theme-neutral-700) !important;
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .order-details-wrapper .header-info-item {
  border-right-color: var(--theme-neutral-700) !important;
}
body.theme-dark .order-details-wrapper .table tbody td {
  border-bottom-color: var(--theme-neutral-600) !important;
}
body.theme-dark .order-details-wrapper .avatar-box {
  background-color: var(--theme-neutral-700) !important;
}
body.theme-dark .figma-action-btn {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-300) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
body.theme-dark .figma-action-btn:hover {
  background-color: var(--theme-neutral-600) !important;
  color: var(--theme-neutral-100) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
body.theme-dark .figma-stat-label {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .figma-stat-value,
body.theme-dark .figma-stat-value.h1,
body.theme-dark .figma-stat-value.h6 {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .figma-card-white {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .figma-bg-soft-green {
  background-color: var(--theme-neutral-900) !important;
  /* Dark navy instead of pale green */
  border-radius: 20px;
}
body.theme-dark .trend-up {
  background: color-mix(in srgb, var(--theme-success-500) 20%, transparent) !important;
  color: var(--theme-success-400) !important;
}
body.theme-dark .trend-down {
  background: color-mix(in srgb, var(--theme-error-500) 20%, transparent) !important;
  color: var(--theme-error-400) !important;
}
body.theme-dark ::-webkit-scrollbar-track {
  background: var(--theme-neutral-900) !important;
}
body.theme-dark ::-webkit-scrollbar-thumb {
  background: var(--theme-neutral-700) !important;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-neutral-600) !important;
}
body.theme-dark .figma-kpi-card-v2 {
  background: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .figma-kpi-card-v2 .figma-kpi-label-v2 {
  color: var(--theme-neutral-300) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body.theme-dark .figma-kpi-card-v2 .figma-kpi-value-v2 {
  color: var(--theme-neutral-100) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
body.theme-dark .card-kpi-new,
body.theme-dark .card-kpi-processing,
body.theme-dark .card-kpi-ready,
body.theme-dark .card-kpi-out {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .pagination .page-item .page-link,
body.theme-dark .figma-pagination .page-item .page-link {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .pagination .page-item .page-link:hover:not(.active),
body.theme-dark .figma-pagination .page-item .page-link:hover:not(.active) {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .pagination .page-item.active .page-link,
body.theme-dark .figma-pagination .page-item.active .page-link {
  background-color: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: #FFFFFF !important;
}
body.theme-dark .pagination .page-item.disabled .page-link,
body.theme-dark .figma-pagination .page-item.disabled .page-link {
  background-color: var(--theme-neutral-900) !important;
  border-color: var(--theme-neutral-800) !important;
  color: var(--theme-neutral-600) !important;
}
body.theme-dark .figma-filter-section,
body.theme-dark .figma-main-section-card,
body.theme-dark .figma-action-bar-row,
body.theme-dark .figma-table-footer,
body.theme-dark .figma-search-container,
body.theme-dark .btn-figma-filter,
body.theme-dark .btn-figma-columns,
body.theme-dark .bg-light-soft,
body.theme-dark .bg-light-figma,
body.theme-dark .bg-light-soft-green,
body.theme-dark .bg-light-success-stat,
body.theme-dark .bg-light-orange-stat,
body.theme-dark .bg-light-blue-stat,
body.theme-dark .bg-light-red-stat,
body.theme-dark .bg-light-primary,
body.theme-dark .bg-light-success,
body.theme-dark .bg-light-warning,
body.theme-dark .bg-light-danger,
body.theme-dark .bg-light-info {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .vue-dropzone {
  background-color: var(--theme-neutral-900) !important;
  border: 2px dashed var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}
body.theme-dark .vue-dropzone:hover {
  background-color: var(--theme-neutral-800) !important;
  border-color: var(--theme-primary-500) !important;
}
body.theme-dark .vue-dropzone .dz-message {
  margin: 2em 0 !important;
}
body.theme-dark .vue-dropzone .dropzone-custom-title {
  color: var(--theme-neutral-100) !important;
  font-weight: 600 !important;
}
body.theme-dark .vue-dropzone .subtitle {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .alert-info {
  background-color: color-mix(in srgb, var(--theme-info-500) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-info-500) 20%, transparent) !important;
  color: var(--theme-info-300) !important;
}
body.theme-dark .figma-search-container .figma-search-input,
body.theme-dark .figma-search-container .figma-search-input:focus {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--theme-neutral-100) !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}
body.theme-dark .btn-figma-filter,
body.theme-dark .btn-figma-columns {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .btn-figma-filter:hover,
body.theme-dark .btn-figma-columns:hover {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .btn-figma-filter.active, body.theme-dark .btn-figma-filter.show,
body.theme-dark .btn-figma-columns.active,
body.theme-dark .btn-figma-columns.show {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
}
body.theme-dark .btn-figma-filter i,
body.theme-dark .btn-figma-columns i {
  color: inherit !important;
}
body.theme-dark .figma-action-bar-row,
body.theme-dark .figma-table-footer {
  border-top-color: var(--theme-neutral-700) !important;
  border-bottom-color: var(--theme-neutral-700) !important;
}
body.theme-dark .modern-select,
body.theme-dark .modern-datepicker-container {
  background-color: var(--theme-neutral-900) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .modern-datepicker-container .reportrange-text {
  background-color: transparent !important;
  border: none !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .column-check-list-modern,
body.theme-dark .dropdown-header-custom {
  background-color: var(--theme-neutral-800) !important;
  color: var(--theme-neutral-100) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .column-label {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .custom-check-icon {
  background-color: var(--theme-neutral-900) !important;
  border-color: var(--theme-neutral-700) !important;
}
body.theme-dark .figma-total-label-cell,
body.theme-dark .figma-total-amount-cell,
body.theme-dark .figma-total-empty-cell {
  background-color: var(--theme-neutral-900) !important;
  border-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .showing-results-text {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .showing-bold {
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .daterangepicker {
  background-color: var(--theme-neutral-800) !important;
  border: 1px solid var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important;
  /* Override raw calendar dates color in dark mode */
  /* Clean dropdown styles for month/year selects in dark mode */
  /* Side Ranges List (if present) */
}
body.theme-dark .daterangepicker .calendar-table {
  background-color: transparent !important;
  border: none !important;
}
body.theme-dark .daterangepicker td.off,
body.theme-dark .daterangepicker td.off.in-range,
body.theme-dark .daterangepicker td.off.start-date,
body.theme-dark .daterangepicker td.off.end-date {
  background-color: transparent !important;
  color: var(--theme-neutral-600) !important;
}
body.theme-dark .daterangepicker td.available:hover,
body.theme-dark .daterangepicker th.available:hover {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .daterangepicker td.in-range {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .daterangepicker td.active,
body.theme-dark .daterangepicker td.active:hover {
  background-color: var(--theme-primary-500) !important;
  color: #FFFFFF !important;
}
body.theme-dark .daterangepicker tbody td {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .daterangepicker tbody td.day:hover {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}
body.theme-dark .daterangepicker select.monthselect,
body.theme-dark .daterangepicker select.yearselect {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--theme-neutral-900) !important;
  color: var(--theme-neutral-100) !important;
  border-color: var(--theme-neutral-700) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 10px 8px !important;
}
body.theme-dark .daterangepicker .drp-buttons {
  border-top: 1px solid var(--theme-neutral-700) !important;
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .daterangepicker .ranges li {
  color: var(--theme-neutral-300) !important;
  background-color: var(--theme-neutral-800) !important;
  border: 1px solid var(--theme-neutral-700) !important;
}
body.theme-dark .daterangepicker .ranges li:hover, body.theme-dark .daterangepicker .ranges li.active {
  background-color: var(--theme-neutral-700) !important;
  color: var(--theme-neutral-100) !important;
}

/* Perfected Orders Table Design */
.figma-order-table {
  background: var(--ui-surface) !important;
  border: none !important;
  border-radius: 0 0 16px 16px !important;
  overflow: hidden;
}

.figma-order-table thead th {
  background-color: var(--theme-neutral-100) !important;
  font-family: var(--ui-font) !important;
  color: var(--Colors-Shades-Neutral-N---700, var(--theme-neutral-600)) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-top: 1px solid var(--ui-border) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  padding: 14px 24px !important;
  vertical-align: middle !important;
  border-left: none !important;
  border-right: none !important;
}

.figma-order-table tbody tr {
  border-bottom: 1px solid var(--ui-border) !important;
  transition: background-color 0.2s ease;
}

.figma-order-table tbody tr:hover {
  background-color: var(--theme-neutral-100) !important;
}

.figma-order-table tbody td {
  padding: 8px 16px !important;
  vertical-align: middle !important;
  border: none !important;
}

@media (min-width: 768px) {
  .figma-order-table tbody td {
    height: 48px !important;
    white-space: nowrap;
  }
}
/* Responsive Stacked Table Fix */
@media (max-width: 767.98px) {
  .figma-order-table.b-table.stacked-md,
.figma-table.b-table.stacked-md {
    display: block !important;
    width: 100% !important;
  }

  .figma-order-table.b-table.stacked-md > tbody > tr,
.figma-table.b-table.stacked-md > tbody > tr {
    display: block !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
  }

  .figma-order-table.b-table.stacked-md > tbody > tr > [data-label],
.figma-table.b-table.stacked-md > tbody > tr > [data-label] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: right !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--ui-border) !important;
    height: auto !important;
    white-space: normal !important;
    min-height: 44px !important;
  }

  .figma-order-table.b-table.stacked-md > tbody > tr > [data-label]::before,
.figma-table.b-table.stacked-md > tbody > tr > [data-label]::before {
    content: attr(data-label) !important;
    font-weight: 700 !important;
    color: var(--theme-neutral-400) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    text-align: start !important;
    flex: 1 !important;
    margin-right: 15px !important;
  }

  .figma-order-table.b-table.stacked-md > tbody > tr > [data-label] > div,
.figma-table.b-table.stacked-md > tbody > tr > [data-label] > div {
    display: inline-block !important;
    text-align: right !important;
  }

  /* Remove specific column widths on mobile */
  .figma-order-table .col-id,
.figma-order-table .col-customer,
.figma-order-table .col-seller,
.figma-order-table .col-items,
.figma-order-table .col-payment,
.figma-order-table .col-date,
.figma-order-table .col-status,
.figma-order-table .col-actions,
.figma-table .col-id,
.figma-table .col-customer {
    width: 100% !important;
  }

  /* Align actions to right in mobile stacked view */
  .figma-order-table.b-table.stacked-md > tbody > tr > [data-label=Action],
.figma-table.b-table.stacked-md > tbody > tr > [data-label=Action],
.figma-order-table.b-table.stacked-md > tbody > tr > [data-label=Actions],
.figma-table.b-table.stacked-md > tbody > tr > [data-label=Actions] {
    justify-content: space-between !important;
  }
}
/* Column Widths from Figma */
.figma-order-table .col-id {
  width: 100px;
}

.figma-order-table .col-customer {
  width: 200px;
}

.figma-order-table .col-seller {
  width: 180px;
}

.figma-order-table .col-items {
  width: 120px;
  text-align: center;
}

.figma-order-table .col-payment {
  width: 150px;
}

.figma-order-table .col-date {
  width: 180px;
}

.figma-order-table .col-status {
  width: 140px;
  text-align: center;
}

.figma-order-table .col-actions {
  width: 100px;
}

/* View Order Details Styling */
.order-details-wrapper .card {
  border-radius: 16px !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}
.order-details-wrapper .figma-status-pill.status-wallet {
  background: var(--theme-info-50) !important;
  color: var(--theme-info-600) !important;
}
.order-details-wrapper .header-info-item {
  border-right: 1px solid var(--ui-border);
  padding-right: 24px;
}
@media (max-width: 768px) {
  .order-details-wrapper .header-info-item {
    border-right: none;
    padding-right: 0;
    margin-bottom: 10px;
  }
}
.order-details-wrapper .header-info-item:last-of-type {
  border-right: none;
  padding-right: 0;
}
.order-details-wrapper .bg-success-light {
  background-color: var(--theme-success-50) !important;
}
.order-details-wrapper .bg-danger-light {
  background-color: var(--theme-error-50) !important;
}
.order-details-wrapper .avatar-box {
  flex-shrink: 0;
  background-color: var(--theme-neutral-100) !important;
}
.order-details-wrapper .table tbody td {
  border-bottom: 1px solid var(--ui-border) !important;
  padding: 16px 12px !important;
}
.order-details-wrapper .billing-list .text-muted {
  font-size: 14px;
  font-weight: 500;
}
.order-details-wrapper .line-height-md {
  line-height: 1.6;
}

/* Global Shadow Removal for Containers */
.shadow-sm,
.shadow-xs,
.shadow {
  box-shadow: none !important;
}

/* --- Filter Section (Expandable) --- */
.figma-filter-section {
  background: var(--ui-surface) !important;
  padding: 24px !important;
  /* Padding/p-6 */
  border-bottom: 1px solid var(--ui-border) !important;
  /* Border Width/b - 1 */
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.figma-filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  /* Padding/p-1 gap between label and input */
  width: 100% !important;
}

.figma-filter-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: var(--ui-text) !important;
  margin-bottom: 0 !important;
}

.modern-select,
.modern-datepicker-container {
  height: 40px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background-color: var(--ui-surface) !important;
  padding: 0 12px !important;
  width: 100%;
  font-size: 13px !important;
  color: var(--ui-text) !important;
  transition: all 0.2s ease;
}

.modern-datepicker-container {
  display: flex !important;
  align-items: center !important;
}

.modern-select {
  display: block !important;
  height: 48px !important;
  padding: 12px 40px 12px 16px !important;
  line-height: normal !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}

.modern-select:focus,
.modern-datepicker-container:focus-within {
  border-color: var(--theme-primary-500) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-success-500) 10%, transparent) !important;
  outline: none !important;
}

.modern-datepicker-container {
  position: relative;
  padding: 0 !important;
  overflow: hidden !important;
  /* vue2-daterange-picker handles inner padding */
}

.modern-datepicker-container .vue-daterange-picker {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.modern-datepicker-container .reportrange-text {
  border: none !important;
  background: transparent !important;
  /* Right padding reserves room for the calendar icon (right:16px) plus the clear-date
     button (right:48px) sitting next to it - 40px only cleared the single icon and let long
     date-range text run under both once the clear button was added. */
  padding: 12px 68px 12px 16px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  font-size: 14px !important;
  color: var(--theme-neutral-700) !important;
}

.modern-datepicker-container .reportrange-text i {
  display: none !important;
  /* Hide default icon */
}

.figma-filter-icon-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-neutral-400);
  pointer-events: none;
  font-size: 18px;
  display: flex;
  align-items: center;
}

/* --- Column Dropdown (Show Columns) --- */
.column-dropdown .dropdown-menu {
  width: 250px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
}

.column-check-list-modern {
  display: flex;
  flex-direction: column;
}

.dropdown-header-custom {
  height: 52px !important;
  padding: 16px !important;
  /* p-4 */
  border-bottom: 1px solid var(--ui-border) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--theme-neutral-700) !important;
  display: flex;
  align-items: center;
  background: var(--ui-surface);
}

.column-items-container {
  padding: 24px !important;
  /* p-6 */
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  /* Standard spacing for lists */
}

.column-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  /* p-4 gap between check and text */
  height: 24px !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.column-item:hover .column-label {
  color: var(--theme-primary-500) !important;
}

.custom-check-icon {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid var(--Colors-Shades-Neutral-N---950, var(--theme-neutral-950)) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  background: var(--ui-surface) !important;
}

.custom-check-icon.active {
  background-color: var(--theme-primary-500) !important;
  border-color: var(--Colors-Shades-Neutral-N---950, var(--theme-neutral-950)) !important;
  background-image: url("/images/icons/check.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 10px !important;
}

.custom-check-icon i {
  display: none !important;
}

.column-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--theme-neutral-700) !important;
}

/* --- Main Section Cards --- */
.figma-main-section-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--ui-shadow) !important;
}

.figma-main-section-card .card-header {
  padding: 14px 20px !important;
}

.figma-action-bar-row {
  min-height: 0 !important;
  height: auto !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  margin-bottom: 0 !important;
}

.figma-action-bar-row .modern-select {
  width: auto !important;
  min-width: 150px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px !important;
  padding-right: 36px !important;
  font-size: 13px !important;
  line-height: 36px !important;
  border: 1px solid var(--ui-border-strong) !important;
}

.figma-table-footer {
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px !important;
  border-top: 1px solid var(--ui-border) !important;
  background-color: var(--ui-surface) !important;
}

.table-responsive {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/* --- Global Success Messages (Toast) Figma Alignments --- */
.v-toast__item {
  border-radius: 4px !important;
  min-height: 56px !important;
  width: 340px !important;
  max-width: 90vw !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  font-family: inherit !important;
}

.v-toast__item--success {
  background-color: var(--theme-success-500) !important;
  color: #FFFFFF !important;
}

.v-toast__text {
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-left: 12px !important;
  margin: 0 !important;
}

/* --- File Input Div (Add/Edit Seller Dropzone) --- */
.file-input-div {
  border: 1.5px dashed var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-lg) !important;
  background-color: var(--ui-surface-muted) !important;
  transition: all 0.2s ease;
  font-size: 14px !important;
}
.file-input-div label {
  font-size: 14px !important;
}

.file-input-div:hover {
  border-color: var(--theme-primary-500) !important;
  background-color: var(--theme-neutral-100) !important;
}

body.theme-dark {
  /* Fix TinyMCE Editor Toolbar Text Visibility */
  /* Common Action Icon Overrides (Delete and Edit icons in dark mode) */
  /* Common Hover states for inline SVGs inside standard buttons / wrappers */
  /* Support for specific hover colors of delete icon (red-ish hover transitions) */
}
body.theme-dark .bg-gray-100 {
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .detail-card,
body.theme-dark .auth-section,
body.theme-dark .auth-card {
  background-color: var(--theme-neutral-800) !important;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid var(--theme-neutral-700) !important;
}
body.theme-dark .content {
  background-color: var(--theme-neutral-800) !important;
  border: 1px solid var(--theme-neutral-700) !important;
}
body.theme-dark .file-input-div,
body.theme-dark .file-input-div.bg-gray-100 {
  border-color: var(--theme-neutral-700) !important;
  background-color: var(--theme-neutral-900) !important;
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .file-input-div:hover,
body.theme-dark .file-input-div.bg-gray-100:hover {
  border-color: var(--theme-primary-500) !important;
  background-color: var(--theme-neutral-800) !important;
}
body.theme-dark .file-input-div label,
body.theme-dark .file-input-div i {
  color: var(--theme-neutral-300) !important;
}
body.theme-dark .tox *,
body.theme-dark .tox-tinymce-aux * {
  color: var(--theme-neutral-700) !important;
}
body.theme-dark .tox svg,
body.theme-dark .tox-tinymce-aux svg {
  fill: var(--theme-neutral-700) !important;
}
body.theme-dark .base-icon svg path[fill="#F7F7F7"] {
  fill: var(--theme-neutral-700) !important;
}
body.theme-dark .base-icon svg path[fill="#EDEDED"] {
  fill: rgba(255, 255, 255, 0.25) !important;
}
body.theme-dark .base-icon svg path[fill="#555555"],
body.theme-dark .base-icon svg path[fill=black],
body.theme-dark .base-icon svg path[fill="#000000"],
body.theme-dark .base-icon svg circle[fill=black],
body.theme-dark .base-icon svg circle[fill="#000000"] {
  fill: var(--theme-neutral-300) !important;
}
body.theme-dark .base-icon:hover svg path[fill="#F7F7F7"],
body.theme-dark .figma-action-btn:hover .base-icon svg path[fill="#F7F7F7"],
body.theme-dark .btn:hover .base-icon svg path[fill="#F7F7F7"],
body.theme-dark :hover > .base-icon svg path[fill="#F7F7F7"] {
  fill: var(--theme-neutral-600) !important;
}
body.theme-dark .base-icon:hover svg path[fill="#EDEDED"],
body.theme-dark .figma-action-btn:hover .base-icon svg path[fill="#EDEDED"],
body.theme-dark .btn:hover .base-icon svg path[fill="#EDEDED"],
body.theme-dark :hover > .base-icon svg path[fill="#EDEDED"] {
  fill: rgba(255, 255, 255, 0.35) !important;
}
body.theme-dark .base-icon:hover svg path[fill="#555555"],
body.theme-dark .base-icon:hover svg path[fill=black],
body.theme-dark .base-icon:hover svg path[fill="#000000"],
body.theme-dark .base-icon:hover svg circle[fill=black],
body.theme-dark .base-icon:hover svg circle[fill="#000000"],
body.theme-dark .figma-action-btn:hover .base-icon svg path[fill="#555555"],
body.theme-dark .figma-action-btn:hover .base-icon svg path[fill=black],
body.theme-dark .figma-action-btn:hover .base-icon svg path[fill="#000000"],
body.theme-dark .figma-action-btn:hover .base-icon svg circle[fill=black],
body.theme-dark .figma-action-btn:hover .base-icon svg circle[fill="#000000"],
body.theme-dark .btn:hover .base-icon svg path[fill="#555555"],
body.theme-dark .btn:hover .base-icon svg path[fill=black],
body.theme-dark .btn:hover .base-icon svg path[fill="#000000"],
body.theme-dark .btn:hover .base-icon svg circle[fill=black],
body.theme-dark .btn:hover .base-icon svg circle[fill="#000000"],
body.theme-dark :hover > .base-icon svg path[fill="#555555"],
body.theme-dark :hover > .base-icon svg path[fill=black],
body.theme-dark :hover > .base-icon svg path[fill="#000000"],
body.theme-dark :hover > .base-icon svg circle[fill=black],
body.theme-dark :hover > .base-icon svg circle[fill="#000000"] {
  fill: var(--theme-neutral-100) !important;
}
body.theme-dark .base-icon:hover svg path[fill="#FBEAEA"],
body.theme-dark .figma-action-btn:hover .base-icon svg path[fill="#FBEAEA"],
body.theme-dark .btn:hover .base-icon svg path[fill="#FBEAEA"],
body.theme-dark :hover > .base-icon svg path[fill="#FBEAEA"] {
  fill: var(--theme-error-800) !important;
  /* Dark red background on hover */
}
body.theme-dark .base-icon:hover svg path[fill="#D63031"],
body.theme-dark .figma-action-btn:hover .base-icon svg path[fill="#D63031"],
body.theme-dark .btn:hover .base-icon svg path[fill="#D63031"],
body.theme-dark :hover > .base-icon svg path[fill="#D63031"] {
  fill: var(--theme-error-500) !important;
  /* Brighter red icon on hover */
}

/* Color Picker Styling */
.color-picker-input {
  width: 60px !important;
  padding: 2px !important;
  cursor: pointer;
  border-radius: 6px !important;
  height: 42px !important;
}

/* ==========================================================================
   Daterangepicker Clean Layout & Figma Parity Reset Overrides
   ========================================================================== */
.vue-daterange-picker {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
}

.daterangepicker {
  background-color: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  padding: 12px !important;
  font-family: var(--ui-font) !important;
  z-index: 99999 !important;
  /* Clean up nested list styles leaking from global presets */
  /* Reset table layout and spacing leakage */
  /* Reset calendar header cells */
  /* Reset calendar day cells */
  /* Standard Day Hover & Range States */
  /* Selected Active Days */
  /* Calendar in-range states */
  /* Out of current month days */
  /* Preset ranges menu list styling (left panel) */
  /* Action buttons block at bottom */
}
.daterangepicker ul,
.daterangepicker li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.daterangepicker table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}
.daterangepicker tr {
  border: none !important;
  background: transparent !important;
}
.daterangepicker thead th {
  background: transparent !important;
  color: var(--theme-neutral-600) !important;
  /* Cool Slate */
  padding: 8px 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  text-transform: none !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
.daterangepicker tbody td {
  padding: 6px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  font-size: 13px !important;
  color: var(--theme-neutral-800) !important;
  /* Slate Dark */
  text-align: center !important;
  vertical-align: middle !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 24px !important;
  transition: all 0.15s ease !important;
}
.daterangepicker tbody td.day:hover {
  background-color: var(--theme-neutral-100) !important;
  color: var(--theme-neutral-800) !important;
  cursor: pointer !important;
}
.daterangepicker tbody td.active,
.daterangepicker tbody td.active:hover {
  background-color: var(--theme-primary-500) !important;
  /* Premium Brand Orange */
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.daterangepicker tbody td.in-range {
  background-color: var(--theme-primary-50) !important;
  /* Soft Brand Orange Tint */
  color: var(--theme-primary-600) !important;
  border-radius: 0 !important;
}
.daterangepicker tbody td.off,
.daterangepicker tbody td.off:hover {
  background-color: transparent !important;
  color: var(--theme-neutral-300) !important;
  /* Slate Muted */
  opacity: 0.4 !important;
}
.daterangepicker .ranges li {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  color: var(--theme-neutral-600) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  margin-bottom: 6px !important;
  background: transparent !important;
}
.daterangepicker .ranges li:hover {
  background-color: var(--theme-neutral-100) !important;
  color: var(--theme-neutral-800) !important;
}
.daterangepicker .ranges li.active {
  background-color: var(--theme-primary-500) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--ui-border) !important;
  padding-top: 12px !important;
  margin-top: 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  /* Premium Month & Year select dropdowns inside header */
}
.daterangepicker .drp-buttons .btn {
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
}
.daterangepicker .drp-buttons .cancelBtn {
  background-color: var(--theme-neutral-100) !important;
  color: var(--theme-neutral-600) !important;
}
.daterangepicker .drp-buttons .cancelBtn:hover {
  background-color: var(--theme-neutral-200) !important;
}
.daterangepicker .drp-buttons .applyBtn {
  background-color: var(--theme-primary-500) !important;
  color: #ffffff !important;
}
.daterangepicker .drp-buttons .applyBtn:hover {
  background-color: var(--theme-success-500) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-success-500) 20%, transparent) !important;
}
.daterangepicker .drp-buttons select.monthselect,
.daterangepicker .drp-buttons select.yearselect {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--theme-neutral-100) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 6px !important;
  color: var(--theme-neutral-800) !important;
  padding: 4px 20px 4px 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  outline: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 10px 8px !important;
  min-width: 68px !important;
  text-align: start !important;
}

/* --- Premium Vue-Multiselect Overrides to standardise border-radius and style --- */
.multiselect {
  border-radius: 10px !important;
}

.multiselect__tags {
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  padding: 6px 40px 0 16px !important;
  min-height: 43px !important;
  background: var(--ui-surface) !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.multiselect__single {
  padding-left: 0 !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  color: var(--theme-neutral-800) !important;
  background: transparent !important;
}

.multiselect__placeholder {
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  color: var(--theme-neutral-300) !important;
}

.multiselect__select {
  height: 40px !important;
}

/* Focus / Active state overrides */
.multiselect--active .multiselect__tags {
  border-color: var(--figma-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary-500) 10%, transparent) !important;
}

/* Dark Mode Support for Multiselect */
.dark-mode .multiselect__tags,
[data-theme=dark] .multiselect__tags {
  border-color: var(--theme-neutral-700) !important;
  background: var(--theme-neutral-900) !important;
}
.dark-mode .multiselect__single,
[data-theme=dark] .multiselect__single {
  color: var(--theme-neutral-100) !important;
}
.dark-mode .multiselect__placeholder,
[data-theme=dark] .multiselect__placeholder {
  color: var(--theme-neutral-400) !important;
}
.dark-mode .multiselect--active .multiselect__tags,
[data-theme=dark] .multiselect--active .multiselect__tags {
  border-color: var(--theme-primary-500) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary-500) 20%, transparent) !important;
}

/* Bootstrap 5 float class compatibility for Bootstrap 4 */
.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }

  .float-sm-end {
    float: right !important;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }

  .float-md-end {
    float: right !important;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }

  .float-lg-end {
    float: right !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }

  .float-xl-end {
    float: right !important;
  }
}
/* RTL overrides */
html.rtl, body.rtl, .rtl {
  /* Override double-sided margins and paddings due to concurrent stylesheet loading */
  /* Swap paddings for custom select inputs so arrow is not overlapped by text */
}
html.rtl .float-start, body.rtl .float-start, .rtl .float-start {
  float: right !important;
}
html.rtl .float-end, body.rtl .float-end, .rtl .float-end {
  float: left !important;
}
@media (min-width: 576px) {
  html.rtl .float-sm-start, body.rtl .float-sm-start, .rtl .float-sm-start {
    float: right !important;
  }
  html.rtl .float-sm-end, body.rtl .float-sm-end, .rtl .float-sm-end {
    float: left !important;
  }
}
@media (min-width: 768px) {
  html.rtl .float-md-start, body.rtl .float-md-start, .rtl .float-md-start {
    float: right !important;
  }
  html.rtl .float-md-end, body.rtl .float-md-end, .rtl .float-md-end {
    float: left !important;
  }
}
@media (min-width: 992px) {
  html.rtl .float-lg-start, body.rtl .float-lg-start, .rtl .float-lg-start {
    float: right !important;
  }
  html.rtl .float-lg-end, body.rtl .float-lg-end, .rtl .float-lg-end {
    float: left !important;
  }
}
@media (min-width: 1200px) {
  html.rtl .float-xl-start, body.rtl .float-xl-start, .rtl .float-xl-start {
    float: right !important;
  }
  html.rtl .float-xl-end, body.rtl .float-xl-end, .rtl .float-xl-end {
    float: left !important;
  }
}
html.rtl .ms-0, body.rtl .ms-0, .rtl .ms-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
html.rtl .ms-1, body.rtl .ms-1, .rtl .ms-1 {
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}
html.rtl .ms-2, body.rtl .ms-2, .rtl .ms-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}
html.rtl .ms-3, body.rtl .ms-3, .rtl .ms-3 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}
html.rtl .ms-4, body.rtl .ms-4, .rtl .ms-4 {
  margin-right: 1.5rem !important;
  margin-left: 0 !important;
}
html.rtl .ms-5, body.rtl .ms-5, .rtl .ms-5 {
  margin-right: 3rem !important;
  margin-left: 0 !important;
}
html.rtl .ms-auto, body.rtl .ms-auto, .rtl .ms-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}
html.rtl .me-0, body.rtl .me-0, .rtl .me-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.rtl .me-1, body.rtl .me-1, .rtl .me-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}
html.rtl .me-2, body.rtl .me-2, .rtl .me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}
html.rtl .me-3, body.rtl .me-3, .rtl .me-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}
html.rtl .me-4, body.rtl .me-4, .rtl .me-4 {
  margin-left: 1.5rem !important;
  margin-right: 0 !important;
}
html.rtl .me-5, body.rtl .me-5, .rtl .me-5 {
  margin-left: 3rem !important;
  margin-right: 0 !important;
}
html.rtl .me-auto, body.rtl .me-auto, .rtl .me-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}
html.rtl .ps-0, body.rtl .ps-0, .rtl .ps-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
html.rtl .ps-1, body.rtl .ps-1, .rtl .ps-1 {
  padding-right: 0.25rem !important;
  padding-left: 0 !important;
}
html.rtl .ps-2, body.rtl .ps-2, .rtl .ps-2 {
  padding-right: 0.5rem !important;
  padding-left: 0 !important;
}
html.rtl .ps-3, body.rtl .ps-3, .rtl .ps-3 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}
html.rtl .ps-4, body.rtl .ps-4, .rtl .ps-4 {
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}
html.rtl .ps-5, body.rtl .ps-5, .rtl .ps-5 {
  padding-right: 3rem !important;
  padding-left: 0 !important;
}
html.rtl .pe-0, body.rtl .pe-0, .rtl .pe-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.rtl .pe-1, body.rtl .pe-1, .rtl .pe-1 {
  padding-left: 0.25rem !important;
  padding-right: 0 !important;
}
html.rtl .pe-2, body.rtl .pe-2, .rtl .pe-2 {
  padding-left: 0.5rem !important;
  padding-right: 0 !important;
}
html.rtl .pe-3, body.rtl .pe-3, .rtl .pe-3 {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}
html.rtl .pe-4, body.rtl .pe-4, .rtl .pe-4 {
  padding-left: 1.5rem !important;
  padding-right: 0 !important;
}
html.rtl .pe-5, body.rtl .pe-5, .rtl .pe-5 {
  padding-left: 3rem !important;
  padding-right: 0 !important;
}
html.rtl .modern-select, body.rtl .modern-select, .rtl .modern-select {
  padding-left: 40px !important;
  padding-right: 16px !important;
}

/* ==========================================================================
   Table footer + pagination on phones (all pages, CSS only - no markup or logic changes).
   Phones (<576px): two centred rows - "Per page [10]" (or the "Showing result" text) on top,
   the pagination below - inside a footer that grows with its content (the desktop footer is a
   fixed 88px one-row flex, which is what made the controls spill out of the card).
   Page buttons: equal rounded squares; active = black, inactive = white with a border,
   disabled prev / next = dimmed. >= 576px is untouched.
   ========================================================================== */
@media (max-width: 575.98px) {
  /* Doubled class + body: beats pages that re-declare .figma-table-footer in their own scoped
     style (e.g. Orders: height 88px, no vertical padding). */
  body .figma-table-footer.figma-table-footer {
    height: auto !important;
    min-height: 0;
    padding: 16px 12px 20px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    text-align: center;
  }

  /* Dashboard cards (Top Selling / Top Rated / Sellers / Orders) use their own footer markup. */
  .dash-pager {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    text-align: center;
  }

  .figma-table-footer label,
.dash-pager label {
    white-space: nowrap;
    margin-bottom: 0;
  }

  /* Summary text (e.g. "Total ratings : 0 , Average rating : 0.00") may be long: let it wrap. */
  .figma-table-footer .showing-results-text,
.dash-pager .showing-results-text {
    white-space: normal;
    overflow-wrap: anywhere;
    margin-bottom: 0;
  }

  /* Compact "Per page" select - never stretched. */
  .figma-table-footer select,
.figma-table-footer .custom-select,
.figma-table-footer .form-select,
.dash-pager select {
    width: auto !important;
    min-width: 64px;
  }

  .figma-pagination,
.pagination.figma-pagination {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-self: center;
    gap: 6px !important;
    max-width: 100%;
    margin: 0 auto !important;
  }

  .pagination .page-item .page-link,
.figma-pagination .page-item .page-link {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
.figma-pagination .page-item:first-child .page-link,
.figma-pagination .page-item:last-child .page-link {
    font-size: 18px !important;
    line-height: 1;
  }

  /* Inactive pages: white with a border (light theme only - dark theme keeps its own colours).
     The active page keeps the existing black fill. */
  body:not(.theme-dark) .figma-pagination .page-item:not(.active):not(.disabled) .page-link {
    background-color: var(--ui-surface) !important;
  }

  /* Disabled prev / next: muted and not clickable. */
  .figma-pagination .page-item.disabled .page-link {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }
}
/* Very narrow phones (<=374px): slightly smaller buttons so "< 1 2 3 4 5 >" still fits one row. */
@media (max-width: 374.98px) {
  .pagination .page-item .page-link,
.figma-pagination .page-item .page-link {
    width: 30px !important;
    height: 30px !important;
  }

  .figma-pagination,
.pagination.figma-pagination {
    gap: 4px !important;
  }
}
/* ==========================================================================
   Search / Filters / Columns action bar on phones (all pages using .figma-action-bar-row).
   The bar is a padded (24px) flex row whose buttons have fixed min-widths (Filters 143px,
   Columns 130px), so on a phone "Columns" ran off the card edge and the search box was cut.
   Phones (<576px): smaller padding; the search box takes a full row; the buttons sit below it
   in a two-column grid (an odd last button spans the row). >= 576px is untouched.
   ========================================================================== */
@media (max-width: 575.98px) {
  .figma-action-bar-row {
    min-height: 0 !important;
    padding: 16px 12px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .figma-action-bar-row > * {
    flex: 1 1 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  .figma-action-bar-row .figma-search-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Button group (Filters / Bulk delete / Refresh / Columns / Add ...): a two-column grid, so
     any number of buttons stays readable. An odd last button takes the full row. */
  .figma-action-bar-row > :has(.btn-figma-filter, .btn-figma-columns, .btn-figma-action, .b-dropdown) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }

  .figma-action-bar-row > :has(.btn-figma-filter, .btn-figma-columns, .btn-figma-action, .b-dropdown) > :last-child:nth-child(odd) {
    grid-column: 1/-1;
  }

  .figma-action-bar-row .btn-figma-filter,
.figma-action-bar-row .btn-figma-columns,
.figma-action-bar-row .btn-figma-action,
.figma-action-bar-row .b-dropdown {
    width: 100%;
    min-width: 0 !important;
  }

  /* Labels may wrap (e.g. "Add Transactions" in a half-width cell) instead of running out of the
     button; the fixed 40px height becomes a minimum so a two-line label still fits. */
  .figma-action-bar-row .btn-figma-filter,
.figma-action-bar-row .btn-figma-columns,
.figma-action-bar-row .btn-figma-action {
    padding: 8px 10px !important;
    font-size: 14px !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 40px;
    white-space: normal;
    text-align: center;
    line-height: 1.25 !important;
  }

  .figma-action-bar-row .btn-figma-filter span,
.figma-action-bar-row .btn-figma-columns span,
.figma-action-bar-row .btn-figma-action span {
    min-width: 0;
    line-height: 1.25 !important;
  }

  .figma-action-bar-row .b-dropdown > .btn {
    width: 100%;
  }

  /* A toolbar with an "Add ..." button (the one with a + icon): the group becomes a wrapping flex
     row. Buttons size to their label, share the row, and the Add label stays on one line; when it
     no longer fits beside Refresh it drops to its own full-width row instead of wrapping to 2-3
     lines. The re-order / grid-list switchers take a full row. */
  .figma-action-bar-row > :has(> .btn-figma-filter > .fa-plus) {
    display: flex !important;
    flex-wrap: wrap;
  }

  .figma-action-bar-row > :has(> .btn-figma-filter > .fa-plus) > .btn,
.figma-action-bar-row > :has(> .btn-figma-filter > .fa-plus) > .b-dropdown {
    flex: 1 1 auto;
    width: auto;
  }

  .figma-action-bar-row > :has(> .btn-figma-filter > .fa-plus) > .reorder-toggle,
.figma-action-bar-row > :has(> .btn-figma-filter > .fa-plus) > .view-toggle {
    flex: 1 1 100%;
  }

  .figma-action-bar-row > :has(> .btn-figma-filter > .fa-plus) > .btn-figma-filter > .fa-plus + span {
    white-space: nowrap;
  }

  .figma-filter-section {
    padding: 16px 12px !important;
  }
}
/* ==========================================================================
   Stacked tables on phones (b-table stacked="md" -> label | value rows below 768px).
   A stacked cell is label (40%) + value (60%). The Actions cell holds up to five 40px icon
   buttons in a non-wrapping row (~240px), wider than its half of the card, so the table grew
   past the card and scrolled sideways with the labels cut off on the left.
   Fix: action buttons wrap inside their cell, cells may shrink, long values break instead of
   widening the table. Desktop (>= 768px) is untouched.
   ========================================================================== */
@media (max-width: 767.98px) {
  .table.b-table.b-table-stacked-md > tbody > tr > td {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .table.b-table.b-table-stacked-md > tbody > tr > td .d-flex.gap-2,
.table.b-table.b-table-stacked-md > tbody > tr > td .d-flex.gap-3 {
    flex-wrap: wrap;
  }

  .table.b-table.b-table-stacked-md .figma-action-btn {
    flex: 0 0 auto;
  }
}
/* ==========================================================================
   Page title + breadcrumb on phones (about 50 pages share the "modern-page-title" heading).
   The title and breadcrumb sit side by side in one non-wrapping row, so a long title such as
   "Manage Home Slider Images" broke over three lines with the breadcrumb squeezed into a thin
   column. Phones (<576px): the title takes its own row at a slightly smaller size and the
   breadcrumb drops underneath. >= 576px is untouched.
   ========================================================================== */
@media (max-width: 575.98px) {
  .page-heading:has(> .modern-page-title),
.page-heading :has(> .modern-page-title) {
    flex-wrap: wrap !important;
    row-gap: 4px;
    -moz-column-gap: 12px;
         column-gap: 12px;
    justify-content: flex-start !important;
    text-align: start;
  }

  .page-heading:has(> .modern-page-title) > .modern-page-title,
.page-heading :has(> .modern-page-title) > .modern-page-title {
    flex: 1 1 100%;
    font-size: 1.35rem;
    line-height: 1.25;
  }
}
/* ==========================================================================
   Add / Edit forms on phones (card header with a right-hand button + language tabs).
   - Card header: title on the left, button on the right when they fit, the button drops to
     its own row below (not floated into an odd corner) when they don't.
   - Tabs (e.g. English / Arabic / Gujarati): one horizontal row that scrolls sideways instead
     of wrapping onto a second line. >= 576px is untouched.
   ========================================================================== */
@media (max-width: 575.98px) {
  .card-header:has(> .pull-right) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
  }

  .card-header:has(> .pull-right) > h4,
.card-header:has(> .pull-right) > h3,
.card-header:has(> .pull-right) > .card-title {
    margin: 0;
  }

  .card-header > .pull-right {
    float: none !important;
    margin-left: auto;
  }

  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
  }
}
/* ==========================================================================
   Redesign layer (SnapBuy-style admin UI)
   Shared look for admin / seller / delivery-boy panels. Uses only theme tokens
   (--theme-* from Theme Settings, --ui-* semantic tokens at the top of this file),
   so every module re-colors automatically. Mobile / tablet / desktop rules at the end.
   ========================================================================== */
/* ----- Base ----- */
body,
#app,
#main {
  font-family: var(--ui-font) !important;
}

body {
  background-color: var(--ui-bg) !important;
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
}

#main {
  background-color: var(--ui-bg) !important;
  min-height: 100vh;
}

a {
  color: var(--theme-primary-600);
}

a:hover {
  color: var(--theme-primary-700);
}

/* Text selection: a translucent primary tint (readable on any surface) with the theme's own text
   colour. The -100 / -900 shades flip in dark mode, which made selected text dark on dark. */
::-moz-selection {
  background: color-mix(in srgb, var(--theme-primary-500) 28%, transparent);
  color: var(--theme-neutral-950);
}
::selection {
  background: color-mix(in srgb, var(--theme-primary-500) 28%, transparent);
  color: var(--theme-neutral-950);
}

body.theme-dark ::-moz-selection {
  background: color-mix(in srgb, var(--theme-primary-500) 45%, transparent);
  color: var(--theme-neutral-50);
}

body.theme-dark ::selection {
  background: color-mix(in srgb, var(--theme-primary-500) 45%, transparent);
  color: var(--theme-neutral-50);
}

/* ----- Sidebar ----- */
#sidebar .sidebar-wrapper {
  width: var(--ui-sidebar-w);
  background: var(--ui-surface) !important;
  border-right: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}

#sidebar .sidebar-header {
  padding: 18px 20px 12px !important;
}

#sidebar .sidebar-header .container-logo {
  max-height: 40px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

#sidebar .sidebar-menu {
  padding: 0 12px 24px;
}

#sidebar .sidebar-menu .menu {
  padding: 0 !important;
  margin-top: 4px;
}

/* ----- Sidebar menu ----- */
#sidebar .sidebar-title,
#sidebar .sidebar-title.text-muted {
  padding: 16px 12px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--ui-text-subtle) !important;
}

#sidebar .sidebar-item {
  margin-top: 2px;
}

/* top-level rows: 40px, icon + label (+ pending dot) + chevron */
#sidebar .sidebar-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25;
  color: var(--ui-text) !important;
  background: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebar .sidebar-link i,
#sidebar .sidebar-link svg {
  flex: none;
  width: 20px;
  font-size: 16px;
  text-align: center;
  color: var(--ui-text-subtle) !important;
  transition: color 0.15s ease;
}

#sidebar .sidebar-link:hover {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text) !important;
}

#sidebar .sidebar-link:hover i,
#sidebar .sidebar-link:hover svg {
  color: var(--theme-primary-600) !important;
}

/* current page (no submenu): solid primary pill */
#sidebar .sidebar-item.active > .sidebar-link {
  background: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-primary-500) 30%, transparent) !important;
}

#sidebar .sidebar-item.active > .sidebar-link i,
#sidebar .sidebar-item.active > .sidebar-link svg,
#sidebar .sidebar-item.active > .sidebar-link span {
  color: var(--theme-neutral-50) !important;
}

/* parent of the current page: coloured text, no fill (the child carries the highlight) */
#sidebar .sidebar-item.has-sub.active > .sidebar-link {
  background: transparent !important;
  color: var(--theme-primary-700) !important;
  box-shadow: none !important;
}

#sidebar .sidebar-item.has-sub.active > .sidebar-link:hover {
  background: var(--ui-surface-muted) !important;
}

#sidebar .sidebar-item.has-sub.active > .sidebar-link i,
#sidebar .sidebar-item.has-sub.active > .sidebar-link svg,
#sidebar .sidebar-item.has-sub.active > .sidebar-link span {
  color: var(--theme-primary-700) !important;
  font-weight: 600 !important;
}

#sidebar .sidebar-item.has-sub .sidebar-link {
  padding-inline-end: 36px !important;
}

/* chevron */
#sidebar .sidebar-item.has-sub .sidebar-link::after {
  position: absolute !important;
  inset-inline-end: 12px !important;
  right: auto;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  line-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.15s ease !important;
}

#sidebar .sidebar-item.has-sub .sidebar-link:hover::after {
  opacity: 0.9;
}

#sidebar .sidebar-item.has-sub.open > .sidebar-link::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* submenu: hangs under the parent's icon with a thin guide line instead of bullets */
#sidebar .submenu {
  margin: 2px 0 6px !important;
  margin-inline-start: 21px !important;
  padding: 0 !important;
  padding-inline-start: 13px !important;
  border-inline-start: 1px solid var(--ui-border);
}

#sidebar .submenu .submenu-item a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px !important;
  border-radius: 8px;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--ui-text-muted) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebar .submenu .submenu-item a::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: -14px;
  left: auto;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--theme-primary-500);
  transform: translateY(-50%);
  transition: height 0.15s ease;
}

#sidebar .submenu .submenu-item a:hover {
  color: var(--ui-text) !important;
  background: var(--ui-surface-muted) !important;
}

#sidebar .submenu .submenu-item.active a {
  color: var(--theme-primary-700) !important;
  font-weight: 600 !important;
  background: var(--ui-primary-soft) !important;
}

/* current page in a submenu: marker on the guide line */
#sidebar .submenu .submenu-item.active a::before {
  height: 18px;
}

body.theme-dark #sidebar .sidebar-item.has-sub.active > .sidebar-link,
body.theme-dark #sidebar .sidebar-item.has-sub.active > .sidebar-link :is(i, svg, span),
body.theme-dark #sidebar .submenu .submenu-item.active a {
  color: var(--theme-primary-400) !important;
}

/* ----- Header ----- */
.figma-header {
  position: sticky;
  top: 0;
  z-index: 1010;
  min-height: var(--ui-header-h);
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}

.figma-header .navbar {
  min-height: var(--ui-header-h);
}

.figma-header .header-cache-btn,
.figma-header .module-selector,
.figma-header .lang-selector {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--ui-font) !important;
  height: 40px !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.figma-header .header-cache-btn:hover,
.figma-header .module-selector:hover,
.figma-header .lang-selector:hover {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-muted) !important;
  color: var(--theme-primary-500) !important;
}

.figma-header .module-selector .module-name,
.figma-header .lang-selector .lang-name {
  color: var(--ui-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.figma-header .header-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.figma-header .header-icon-btn:hover {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-muted) !important;
  color: var(--theme-primary-500) !important;
}
.figma-header .header-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary-500) 25%, transparent) !important;
}

.figma-header .header-divider {
  width: 1px;
  height: 24px;
  background: var(--ui-border);
  margin: 0 4px;
  flex-shrink: 0;
}

.figma-header .dropdown-menu {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  padding: 6px !important;
}

/* ----- Dropdowns (global) ----- */
.dropdown-menu {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
}

.dropdown-item {
  border-radius: var(--ui-radius-sm);
  font-size: 13px;
  color: var(--ui-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ui-primary-soft);
  color: var(--theme-primary-700);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--theme-primary-500);
  color: var(--theme-neutral-50);
}

/* ----- Page heading ----- */
.page-heading {
  margin-bottom: 20px;
}

.page-heading .page-title {
  margin-bottom: 16px;
}

.page-heading h3,
.page-heading .page-title h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px;
  color: var(--ui-heading) !important;
  margin-bottom: 2px;
}

.page-heading .text-subtitle,
.page-heading p.text-muted {
  font-size: 13px;
  color: var(--ui-text-muted) !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px;
}

.breadcrumb-item a {
  color: var(--ui-text-muted) !important;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--theme-primary-600) !important;
}

.breadcrumb-item.active {
  color: var(--theme-primary-600) !important;
  font-weight: 400;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ui-border-strong);
}

/* ----- Cards ----- */
.card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
}

.card > .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ui-border) !important;
  padding: 16px 20px;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important;
}

.card > .card-header .card-title,
.card > .card-header h4,
.card > .card-header h5 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ui-heading);
  margin-bottom: 0;
}

.card > .card-body {
  padding: 20px;
}

.card > .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--ui-border) !important;
  padding: 14px 20px;
}

/* ----- KPI / stat tiles (tinted tiles with a solid icon square, as in SnapBuy) ----- */
.figma-kpi-card-v2,
.dash-stat-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.figma-kpi-card-v2:hover,
.dash-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-lg) !important;
}

.figma-kpi-icon-v2,
.figma-stat-icon-box,
.dash-stat-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.figma-stat-icon-box-sm {
  border-radius: 8px !important;
}

.figma-kpi-label-v2,
.figma-stat-label,
.dash-stat-label {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ui-text-muted) !important;
}

.figma-kpi-value-v2,
.figma-stat-value,
.dash-stat-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ui-heading) !important;
  letter-spacing: -0.01em;
}

.dash-stat-sub {
  font-size: 12px;
  color: var(--ui-text-subtle);
}

/* Stat color utilities -> theme status palettes (solid icon square + soft tint) */
.bg-stat-blue {
  background-color: var(--theme-info-500) !important;
  color: var(--theme-neutral-50) !important;
}

.bg-stat-green {
  background-color: var(--theme-success-500) !important;
  color: var(--theme-neutral-50) !important;
}

.bg-stat-orange {
  background-color: var(--theme-warn-500) !important;
  color: var(--theme-neutral-50) !important;
}

.bg-stat-red {
  background-color: var(--theme-error-500) !important;
  color: var(--theme-neutral-50) !important;
}

.bg-stat-pink,
.bg-stat-purple {
  background-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

.bg-stat-blue-light, .bg-light-blue-stat {
  background-color: var(--theme-info-50) !important;
}

.bg-stat-green-light, .bg-light-success-stat, .figma-bg-soft-green {
  background-color: var(--theme-success-50) !important;
}

.bg-stat-orange-light, .bg-light-orange-stat {
  background-color: var(--theme-warn-50) !important;
}

.bg-stat-red-light, .bg-light-red-stat {
  background-color: var(--theme-error-50) !important;
}

.bg-stat-pink-light, .bg-stat-purple-light, .bg-light-figma, .figma-bg-soft-primary {
  background-color: var(--theme-primary-50) !important;
}

.text-stat-blue {
  color: var(--theme-info-600) !important;
}

.text-stat-green {
  color: var(--theme-success-600) !important;
}

.text-stat-orange {
  color: var(--theme-warn-600) !important;
}

.text-stat-red {
  color: var(--theme-error-600) !important;
}

.text-stat-pink,
.text-stat-purple {
  color: var(--theme-primary-600) !important;
}

.bg-stat-blue i, .bg-stat-green i, .bg-stat-orange i, .bg-stat-red i, .bg-stat-pink i, .bg-stat-purple i,
.bg-stat-blue svg, .bg-stat-green svg, .bg-stat-orange svg, .bg-stat-red svg, .bg-stat-pink svg, .bg-stat-purple svg {
  color: var(--theme-neutral-50) !important;
}

/* ----- Tables ----- */
.table {
  color: var(--ui-text);
  font-size: 13px;
  margin-bottom: 0;
}

.table > thead > tr > th,
.table thead th,
.b-table thead th {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 16px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr > td,
.table tbody td {
  padding: 12px 16px !important;
  border-top: 1px solid var(--ui-border) !important;
  vertical-align: middle;
}

.table tbody tr:first-child td {
  border-top: 0 !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background-color: color-mix(in srgb, var(--theme-primary-500) 4%, var(--ui-surface)) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ui-surface-muted);
}

.table-responsive {
  border-radius: var(--ui-radius-lg);
  -webkit-overflow-scrolling: touch;
}

/* ----- Badges & status pills (soft tint + thin border) ----- */
.badge,
.figma-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px !important;
  border-radius: var(--ui-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.badge.bg-primary, .badge.badge-primary, .figma-status-pill.bg-primary {
  background: var(--theme-primary-50) !important;
  color: var(--theme-primary-700) !important;
  border-color: color-mix(in srgb, var(--theme-primary-500) 30%, transparent) !important;
}

.badge.bg-success, .badge.badge-success, .figma-status-pill.bg-success,
.status-delivered, .status-processed {
  background: var(--theme-success-50) !important;
  color: var(--theme-success-700) !important;
  border-color: color-mix(in srgb, var(--theme-success-500) 30%, transparent) !important;
}

.badge.bg-danger, .badge.badge-danger, .figma-status-pill.bg-danger,
.status-cancelled, .status-returned {
  background: var(--theme-error-50) !important;
  color: var(--theme-error-700) !important;
  border-color: color-mix(in srgb, var(--theme-error-500) 30%, transparent) !important;
}

.badge.bg-warning, .badge.badge-warning, .figma-status-pill.bg-warning,
.status-pending, .status-processing {
  background: var(--theme-warn-50) !important;
  color: var(--theme-warn-700) !important;
  border-color: color-mix(in srgb, var(--theme-warn-500) 30%, transparent) !important;
}

.badge.bg-info, .badge.badge-info, .figma-status-pill.bg-info,
.status-received, .status-shipped {
  background: var(--theme-info-50) !important;
  color: var(--theme-info-700) !important;
  border-color: color-mix(in srgb, var(--theme-info-500) 30%, transparent) !important;
}

.status-outfordelivery {
  background: var(--theme-primary-50) !important;
  color: var(--theme-primary-700) !important;
  border-color: color-mix(in srgb, var(--theme-primary-500) 30%, transparent) !important;
}

/* Dark mode: the global dark text reset (body.theme-dark span …) would turn pill text white;
   keep each status family's own text/icon colour (the -700 shades are light in dark mode). */
body.theme-dark :is(.badge.bg-success, .figma-status-pill.bg-success, .status-delivered, .status-processed),
body.theme-dark :is(.badge.bg-success, .figma-status-pill.bg-success, .status-delivered, .status-processed) i {
  color: var(--theme-success-700) !important;
}

body.theme-dark :is(.badge.bg-danger, .figma-status-pill.bg-danger, .status-cancelled, .status-returned),
body.theme-dark :is(.badge.bg-danger, .figma-status-pill.bg-danger, .status-cancelled, .status-returned) i {
  color: var(--theme-error-700) !important;
}

body.theme-dark :is(.badge.bg-warning, .figma-status-pill.bg-warning, .status-pending, .status-processing),
body.theme-dark :is(.badge.bg-warning, .figma-status-pill.bg-warning, .status-pending, .status-processing) i {
  color: var(--theme-warn-700) !important;
}

body.theme-dark :is(.badge.bg-info, .figma-status-pill.bg-info, .status-received, .status-shipped),
body.theme-dark :is(.badge.bg-info, .figma-status-pill.bg-info, .status-received, .status-shipped) i {
  color: var(--theme-info-700) !important;
}

body.theme-dark :is(.badge.bg-primary, .figma-status-pill.bg-primary, .status-outfordelivery),
body.theme-dark :is(.badge.bg-primary, .figma-status-pill.bg-primary, .status-outfordelivery) i {
  color: var(--theme-primary-700) !important;
}

.badge.bg-secondary, .badge.badge-secondary, .badge.bg-light, .badge.badge-light,
.badge.bg-dark, .badge.badge-dark, .figma-payment-method-badge {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text-muted) !important;
  border-color: var(--ui-border) !important;
}

/* Solid count bubbles (e.g. pending counters) keep a solid fill */
.badge.rounded-pill.text-white {
  color: var(--theme-neutral-50) !important;
}

.badge.rounded-pill.bg-success.text-white {
  background: var(--theme-success-500) !important;
}

.badge.rounded-pill.bg-danger.text-white {
  background: var(--theme-error-500) !important;
}

/* ----- Buttons ----- */
.btn {
  border-radius: var(--ui-radius) !important;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 16px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-sm {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: var(--ui-radius-sm) !important;
}

.btn-lg {
  font-size: 15px;
  padding: 11px 20px;
}

.btn.rounded-pill {
  border-radius: 999px !important;
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary-500) 22%, transparent) !important;
}

.btn-primary {
  background-color: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--theme-primary-600) !important;
  border-color: var(--theme-primary-600) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-primary-600) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background: var(--ui-primary-soft) !important;
  color: var(--theme-primary-700) !important;
}

.btn-success {
  background-color: var(--theme-success-500) !important;
  border-color: var(--theme-success-500) !important;
  color: var(--theme-neutral-50) !important;
}

.btn-success:hover {
  background-color: var(--theme-success-600) !important;
  border-color: var(--theme-success-600) !important;
}

.btn-danger {
  background-color: var(--theme-error-500) !important;
  border-color: var(--theme-error-500) !important;
  color: var(--theme-neutral-50) !important;
}

.btn-danger:hover {
  background-color: var(--theme-error-600) !important;
  border-color: var(--theme-error-600) !important;
}

.btn-warning {
  background-color: var(--theme-warn-500) !important;
  border-color: var(--theme-warn-500) !important;
  color: var(--theme-neutral-50) !important;
}

.btn-info {
  background-color: var(--theme-info-500) !important;
  border-color: var(--theme-info-500) !important;
  color: var(--theme-neutral-50) !important;
}

.btn-outline-success {
  border-color: var(--theme-success-500) !important;
  color: var(--theme-success-600) !important;
}

.btn-outline-success:hover {
  background: var(--theme-success-50) !important;
}

.btn-outline-danger {
  border-color: var(--theme-error-500) !important;
  color: var(--theme-error-600) !important;
}

.btn-outline-danger:hover {
  background: var(--theme-error-50) !important;
}

.btn-light,
.btn-secondary,
.btn-outline-secondary {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

.btn-light:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--ui-surface-muted) !important;
  border-color: var(--theme-neutral-400) !important;
}

/* Icon-only action buttons in tables */
.figma-action-btn,
.btn-figma-action,
.figma-delete-btn {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-muted) !important;
}

.figma-action-btn:hover,
.btn-figma-action:hover {
  border-color: var(--theme-primary-300) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--theme-primary-600) !important;
}

.figma-delete-btn:hover {
  border-color: var(--theme-error-300) !important;
  background: var(--theme-error-50) !important;
  color: var(--theme-error-600) !important;
}

.btn-figma-filter,
.btn-figma-columns {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--theme-primary-300) !important;
  color: var(--theme-primary-600) !important;
  background: var(--ui-surface) !important;
}

.btn-figma-filter:hover,
.btn-figma-columns:hover {
  background: var(--ui-primary-soft) !important;
}

/* ----- Forms ----- */
label,
.form-label,
.col-form-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ui-text);
  margin-bottom: 6px;
}

.form-control,
.form-select,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.multiselect__tags {
  min-height: 40px;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background-color: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control-sm,
.form-select-sm {
  min-height: 34px;
  font-size: 13px !important;
}

textarea.form-control {
  min-height: 96px;
}

.form-control::-moz-placeholder {
  color: var(--ui-text-subtle) !important;
}

.form-control::placeholder {
  color: var(--ui-text-subtle) !important;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection,
.multiselect--active .multiselect__tags {
  border-color: var(--theme-primary-500) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary-500) 18%, transparent) !important;
  outline: none !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--ui-surface-muted) !important;
  color: var(--ui-text-muted) !important;
}

.input-group-text {
  background: var(--ui-surface-muted);
  border-color: var(--ui-border-strong);
  color: var(--ui-text-muted);
  font-size: 13px;
}

.form-check-input:checked,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
}

.form-check-input:focus,
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary-500) 20%, transparent) !important;
}

.invalid-feedback,
.text-danger {
  color: var(--theme-error-600) !important;
}

.is-invalid,
.form-control.is-invalid {
  border-color: var(--theme-error-500) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.multiselect__option--highlight {
  background: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

.multiselect__tag {
  background: var(--theme-primary-50) !important;
  color: var(--theme-primary-700) !important;
  border-radius: var(--ui-radius-sm) !important;
}

/* ----- Tabs / pills ----- */
.nav-tabs {
  border-bottom: 1px solid var(--ui-border);
  gap: 4px;
}

.nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--ui-text-muted);
  font-size: 14px;
  font-weight: 400;
  padding: 10px 14px;
}

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

.nav-tabs .nav-link.active {
  color: var(--theme-primary-600) !important;
  background: transparent !important;
  border-bottom-color: var(--theme-primary-500) !important;
}

.nav-pills .nav-link {
  border-radius: var(--ui-radius);
  color: var(--ui-text-muted);
  font-weight: 400;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

/* ----- Modals ----- */
.modal-content {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  background: var(--ui-surface);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ui-border) !important;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ui-heading);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--ui-border) !important;
  gap: 8px;
}

.modal-backdrop.show {
  opacity: 1;
  background: color-mix(in srgb, var(--theme-neutral-950) 45%, transparent);
}

/* ----- Pagination ----- */
.pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  font-size: 13px;
  font-weight: 400;
}

.pagination .page-link:hover {
  border-color: var(--theme-primary-300) !important;
  color: var(--theme-primary-600) !important;
}

.pagination .page-item.active .page-link {
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

.pagination .page-item.disabled .page-link {
  color: var(--ui-text-subtle) !important;
  background: var(--ui-surface-muted) !important;
}

/* ----- Alerts & toasts ----- */
.alert {
  border-radius: var(--ui-radius) !important;
  font-size: 13px;
  border-width: 1px;
}

.alert-success {
  background: var(--theme-success-50) !important;
  color: var(--theme-success-800) !important;
  border-color: var(--theme-success-200) !important;
}

.alert-danger {
  background: var(--theme-error-50) !important;
  color: var(--theme-error-800) !important;
  border-color: var(--theme-error-200) !important;
}

.alert-warning {
  background: var(--theme-warn-50) !important;
  color: var(--theme-warn-800) !important;
  border-color: var(--theme-warn-200) !important;
}

.alert-info {
  background: var(--theme-info-50) !important;
  color: var(--theme-info-800) !important;
  border-color: var(--theme-info-200) !important;
}

.swal2-popup {
  border-radius: var(--ui-radius-lg) !important;
  font-family: var(--ui-font) !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--theme-primary-500) !important;
  border-radius: var(--ui-radius) !important;
}

.swal2-styled.swal2-cancel {
  border-radius: var(--ui-radius) !important;
}

/* ----- Text & background utilities follow the theme ----- */
.text-primary {
  color: var(--theme-primary-600) !important;
}

.text-success {
  color: var(--theme-success-600) !important;
}

.text-warning {
  color: var(--theme-warn-600) !important;
}

.text-info {
  color: var(--theme-info-600) !important;
}

.text-muted {
  color: var(--ui-text-muted) !important;
}

.bg-primary {
  background-color: var(--theme-primary-500) !important;
}

.bg-success {
  background-color: var(--theme-success-500) !important;
}

.bg-danger {
  background-color: var(--theme-error-500) !important;
}

.bg-warning {
  background-color: var(--theme-warn-500) !important;
}

.bg-info {
  background-color: var(--theme-info-500) !important;
}

.border-primary {
  border-color: var(--theme-primary-500) !important;
}

.border-success {
  border-color: var(--theme-success-500) !important;
}

.border-danger {
  border-color: var(--theme-error-500) !important;
}

.border-warning {
  border-color: var(--theme-warn-500) !important;
}

.border-info {
  border-color: var(--theme-info-500) !important;
}

/* Bootstrap 5 "bg-opacity-10" tints used by status cards */
.bg-primary.bg-opacity-10 {
  background-color: var(--theme-primary-50) !important;
}

.bg-success.bg-opacity-10 {
  background-color: var(--theme-success-50) !important;
}

.bg-danger.bg-opacity-10 {
  background-color: var(--theme-error-50) !important;
}

.bg-warning.bg-opacity-10 {
  background-color: var(--theme-warn-50) !important;
}

.bg-info.bg-opacity-10 {
  background-color: var(--theme-info-50) !important;
}

.bg-secondary.bg-opacity-10,
.bg-dark.bg-opacity-10 {
  background-color: var(--ui-surface-muted) !important;
}

.status-card {
  border-radius: var(--ui-radius-lg) !important;
}

/* ----- Scrollbars ----- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border-radius: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   Responsive — tablet & mobile
   ========================================================================== */
/* Tablet & below: sidebar becomes an off-canvas drawer (template toggles #sidebar.active) */
@media (max-width: 1199.98px) {
  #sidebar .sidebar-wrapper {
    box-shadow: var(--ui-shadow-lg) !important;
  }

  .figma-header .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .card > .card-body {
    padding: 16px;
  }
}
@media (max-width: 991.98px) {
  .page-heading .page-title .row > [class*=col-] {
    margin-bottom: 8px;
  }

  .breadcrumb-header {
    float: none !important;
  }

  .figma-header .header-cache-btn {
    width: auto !important;
    padding: 0 12px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --ui-header-h: 56px;
  }

  .page-heading {
    margin-bottom: 14px;
  }

  .page-heading h3,
.page-heading .page-title h3 {
    font-size: 18px !important;
    line-height: 24px;
  }

  .card {
    border-radius: 10px !important;
  }

  .card > .card-header,
.card > .card-footer {
    padding: 12px 14px;
  }

  .card > .card-body {
    padding: 14px;
  }

  .table > thead > tr > th,
.table thead th,
.table > tbody > tr > td,
.table tbody td {
    padding: 10px 12px !important;
  }

  .figma-kpi-value-v2,
.figma-stat-value,
.dash-stat-value {
    font-size: 18px !important;
  }

  .modal-dialog {
    margin: 12px;
  }

  .modal-header,
.modal-body,
.modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .figma-header .header-cache-btn span {
    font-size: 12px;
  }
}
@media (max-width: 575.98px) {
  .figma-header .header-module .module-name {
    display: none !important;
  }

  .figma-header .header-cache-btn {
    height: 34px !important;
    padding: 0 10px !important;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }

  .btn {
    font-size: 13px;
  }
}
/* Header fits on tablets: keep buttons on one line, show only the avatar for the user menu */
.figma-header .header-cache-btn {
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .figma-header div.flex-column:has(> .figma-user-role-text) {
    display: none !important;
  }

  .figma-header .header-right {
    gap: 10px !important;
  }
}
/* Phones: KPI / stat tiles two per row (SnapBuy-style compact grid) */
@media (max-width: 575.98px) {
  .row > [class*=col]:has(> .figma-kpi-card-v2),
.row > [class*=col]:has(> .dash-stat-card),
.row > [class*=col]:has(> .card > .card-body > .figma-kpi-content-v2) {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 6px;
    padding-right: 6px;
  }

  .figma-kpi-card-v2,
.dash-stat-card {
    padding: 12px !important;
  }

  .figma-kpi-card-v2 .figma-kpi-icon-v2,
.dash-stat-card .dash-stat-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
  }

  .figma-kpi-label-v2,
.dash-stat-label {
    font-size: 11px !important;
    line-height: 1.3;
  }

  /* Tinted KPI tiles (Orders header): icon above, text below at full tile width so labels
     like "Out for Delivery" no longer break one word per line or overflow */
  #main .figma-kpi-card-v2.figma-kpi-card-v2[class*=card-kpi-] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px !important;
    height: 100% !important;
    min-height: 112px !important;
  }

  #main .figma-kpi-card-v2[class*=card-kpi-] .figma-kpi-content-v2 {
    margin-left: 0;
    min-width: 0;
    width: 100%;
  }
}
/* Form labels: the base template paints .control-label in a fixed navy; use theme text instead */
.control-label,
.form-group > label,
.form-label {
  color: var(--ui-text) !important;
  font-size: 13px;
  font-weight: 400;
}

/* ==========================================================================
   Widgets (SnapBuy reference): layout shell, list toolbar, tables, KPI tiles
   ========================================================================== */
/* ----- Layout shell: sidebar width matches the content offset, no sideways scroll ----- */
#sidebar .sidebar-wrapper {
  overflow-x: hidden !important;
}

#sidebar .sidebar-wrapper .sidebar-menu,
#sidebar .sidebar-wrapper .menu {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1200px) {
  #main {
    margin-left: var(--ui-sidebar-w) !important;
    transition: margin 0.25s ease;
  }

  .rtl #main {
    margin-left: 0 !important;
    margin-right: var(--ui-sidebar-w) !important;
  }

  /* Collapsed sidebar (burger button removes #sidebar.active): content takes the full width */
  #sidebar:not(.active) ~ #main,
.rtl #sidebar:not(.active) ~ #main {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
#main > .page-content,
#main > .main-content {
  padding-top: 20px;
}

/* ----- List toolbar (search + actions), used by every list page ----- */
.figma-action-bar-row {
  gap: 10px !important;
  text-align: start !important;
}

.figma-action-bar-row > *,
.figma-action-bar-row .flex-grow-1 {
  text-align: start !important;
}

/* Ensure any search wrapper inside toolbar strictly aligns to start (left) */
.figma-action-bar-row > .flex-grow-1,
.figma-action-bar-row > :has(.figma-search-container) {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: start !important;
}

#main .figma-search-container {
  height: 38px !important;
  max-width: 320px;
  padding: 0 12px !important;
  gap: 8px;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#main .figma-search-container:focus-within {
  border-color: var(--theme-primary-500) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary-500) 18%, transparent) !important;
}

#main .figma-search-container i {
  font-size: 13px !important;
  color: var(--ui-text-subtle) !important;
}

#main .figma-search-input,
#main .figma-search-input:focus {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ui-text) !important;
}

#main .btn-figma-filter,
#main .btn-figma-columns,
#main .btn-figma-action:not(.figma-action-btn) {
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

#main .btn-figma-filter i,
#main .btn-figma-columns i,
#main .btn-figma-action:not(.figma-action-btn) i {
  font-size: 13px !important;
  color: var(--ui-text-muted) !important;
}

#main .btn-figma-filter:hover,
#main .btn-figma-columns:hover,
#main .btn-figma-filter.active,
#main .column-dropdown.show .btn-figma-columns {
  border-color: var(--theme-primary-300) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--theme-primary-700) !important;
}

#main .btn-figma-filter:hover i,
#main .btn-figma-columns:hover i,
#main .btn-figma-filter.active i {
  color: var(--theme-primary-600) !important;
}

/* Action bar button with checkbox (e.g. "Select All" in grid view) */
#main label.btn.btn-figma-filter:has(> input[type=checkbox]),
#main .products-select-all,
#main .media-select-all {
  cursor: pointer !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#main label.btn.btn-figma-filter > input[type=checkbox],
#main .products-select-all .form-check-input,
#main .media-select-all .form-check-input {
  position: static !important;
  opacity: 1 !important;
  clip: auto !important;
  pointer-events: auto !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* "+ Add …" actions are the page's primary action: solid button */
#main .btn-figma-filter:has(> .fa-plus),
#main .btn-figma-filter:has(> .bi-plus),
#main .btn-figma-filter:has(> .bi-plus-lg) {
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

#main .btn-figma-filter:has(> .fa-plus) i,
#main .btn-figma-filter:has(> .bi-plus) i,
#main .btn-figma-filter:has(> .bi-plus-lg) i {
  color: var(--theme-neutral-50) !important;
}

#main .btn-figma-filter:has(> .fa-plus):hover,
#main .btn-figma-filter:has(> .bi-plus):hover,
#main .btn-figma-filter:has(> .bi-plus-lg):hover {
  background: var(--theme-primary-600) !important;
  border-color: var(--theme-primary-600) !important;
  color: var(--theme-neutral-50) !important;
}

/* Card that wraps a list: toolbar row sits on the card, table runs edge to edge */
#main .card:has(.figma-action-bar-row) > .card-header,
#main .card:has(> .card-body > .figma-action-bar-row) .figma-action-bar-row {
  padding-top: 4px;
}

/* ----- Tables: compact, uppercase headers (beats older per-table rules) ----- */
#main .table > thead > tr > th,
#main .table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--ui-text-muted) !important;
  background: var(--ui-surface-muted) !important;
  padding: 12px 16px !important;
}

#main .table > tbody > tr > td,
#main .table tbody td {
  font-size: 13px !important;
  color: var(--ui-text) !important;
  padding: 12px 16px !important;
}

#main .table tbody td :is(span, div, p, a, h6):not(.badge):not(.figma-status-pill):not([class*=status-]):not(i) {
  font-size: inherit;
}

#main .table tbody td :is(small, .small, .text-muted, .figma-time-light, .figma-seller-id, .figma-customer-email) {
  font-size: 12px !important;
  color: var(--ui-text-subtle) !important;
}

:where(#main) .table tbody td a:not(.btn) {
  color: var(--theme-primary-600);
  font-weight: 600;
}

#main .table tbody td img {
  border-radius: var(--ui-radius-sm);
  -o-object-fit: cover;
     object-fit: cover;
}

/* Pagination / per-page footer row under tables */
#main .card .figma-pagination,
#main .card .pagination {
  margin-bottom: 0;
}

/* ----- Orders KPI tiles: fully tinted tile + solid icon square (SnapBuy "Orders" header) ----- */
#main .figma-kpi-card-v2[class*=card-kpi-] {
  border: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  gap: 12px;
}

#main .figma-kpi-card-v2.card-kpi-new {
  background: var(--theme-success-50) !important;
}

#main .figma-kpi-card-v2.card-kpi-processing {
  background: var(--theme-warn-50) !important;
}

#main .figma-kpi-card-v2.card-kpi-ready {
  background: var(--theme-info-50) !important;
}

#main .figma-kpi-card-v2.card-kpi-out {
  background: var(--theme-error-50) !important;
}

#main .figma-kpi-card-v2.card-kpi-new .figma-kpi-icon-v2 {
  background: var(--theme-success-500) !important;
}

#main .figma-kpi-card-v2.card-kpi-processing .figma-kpi-icon-v2 {
  background: var(--theme-warn-500) !important;
}

#main .figma-kpi-card-v2.card-kpi-ready .figma-kpi-icon-v2 {
  background: var(--theme-info-500) !important;
}

#main .figma-kpi-card-v2.card-kpi-out .figma-kpi-icon-v2 {
  background: var(--theme-error-500) !important;
}

#main .figma-kpi-card-v2[class*=card-kpi-] .figma-kpi-icon-v2,
#main .figma-kpi-card-v2[class*=card-kpi-] .figma-kpi-icon-v2 * {
  color: var(--theme-neutral-50) !important;
}

#main .figma-kpi-card-v2[class*=card-kpi-] .figma-kpi-icon-v2 svg path[fill]:not([fill=none]) {
  fill: currentColor;
}

/* ----- Dashboard summary cards: icon tile + trend pill on top, uppercase label, big value ----- */
#main .figma-card-white {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  padding: 16px !important;
}

#main .figma-card-white .figma-stat-label {
  margin-top: 10px;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-muted) !important;
}

#main .figma-card-white .figma-stat-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ui-heading) !important;
}

/* Section cards on the dashboard: SnapBuy card header (title + subtle divider) */
#main .figma-card > .card-header {
  border-bottom: 1px solid var(--ui-border) !important;
  padding: 14px 20px !important;
}

#main .figma-card > .card-header h4,
#main .figma-card > .card-header .h6 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ui-heading) !important;
}

/* Small "Yearly / Monthly" selects inside card headers */
#main .figma-card > .card-header select,
#main .figma-card > .card-header .form-select,
#main .figma-card > .card-header .custom-select {
  min-height: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 14px !important;
  padding-right: 34px !important;
  background-position: right 12px center !important;
}

/* ----- Phones: toolbar stacks into full-width search + scrollable action row ----- */
@media (max-width: 575.98px) {
  #main .figma-action-bar-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  /* Column direction: children must size to content (a flex-basis of 100% / 260px set for the
     row layout would otherwise become a tall height and pad the search box vertically) */
  #main .figma-action-bar-row > * {
    flex: 0 0 auto !important;
    min-width: 0;
  }

  #main .figma-search-container {
    max-width: none;
    width: 100%;
  }

  /* The button group wraps (grid / flex rules above), so it must not scroll: an auto overflow
     also clips vertically, which cut the Columns dropdown menu to a sliver. */
  #main .figma-action-bar-row > .d-flex {
    overflow: visible;
    padding-bottom: 2px;
  }

  #main .btn-figma-filter,
#main .btn-figma-columns {
    flex: 0 0 auto;
  }
}
/* ----- Auth pages (admin / seller / delivery boy login, forgot & reset password) ----- */
#app .auth .auth-card {
  max-width: 440px;
  width: 100%;
  padding: 40px 40px 28px !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--theme-neutral-950) 14%, transparent) !important;
}

#app .auth .auth-logo {
  margin-bottom: 20px !important;
}

#app .auth .auth-logo a {
  justify-content: center !important;
}

#app .auth .auth-card > h4,
#app .auth .auth-card > h3 {
  text-align: center;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ui-heading) !important;
  margin-bottom: 4px !important;
}

#app .auth .auth-subtitle {
  text-align: center;
  font-size: 14px !important;
  color: var(--ui-text-muted) !important;
  margin-bottom: 28px !important;
}

#app .auth .auth-card .form-control:not(textarea),
#app .auth .auth-card .form-control-xl {
  height: 48px !important;
  min-height: 48px;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: var(--ui-surface) !important;
}

#app .auth .has-icon-left .form-control {
  padding-left: 44px !important;
}

#app .auth .form-control-icon {
  color: var(--ui-text-subtle) !important;
}

#app .auth .form-control-icon i {
  font-size: 17px !important;
}

#app .auth .auth-card a:not(.btn) {
  color: var(--theme-primary-600) !important;
  font-size: 13px;
  font-weight: 600;
}

/* Main submit */
#app .auth .auth-btn,
#app .auth form > .btn-primary[type=submit],
#app .auth form > button.btn-primary {
  height: 48px;
  margin-top: 8px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-primary-500) 30%, transparent) !important;
}

/* "or" divider + secondary panel links */
#app .auth .auth-card hr {
  margin: 22px 0 16px !important;
  border: 0;
  border-top: 1px solid var(--ui-border) !important;
  opacity: 1;
}

#app .auth .auth-card hr ~ .btn,
#app .auth .auth-card hr ~ a.btn {
  height: 46px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: var(--theme-primary-50) !important;
  border: 1px solid var(--theme-primary-200) !important;
  color: var(--theme-primary-700) !important;
  box-shadow: none !important;
}

#app .auth .auth-card hr ~ .btn:hover {
  background: var(--theme-primary-100) !important;
}

#app .auth .auth-copyright {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
}

#app .auth .auth-copyright,
#app .auth .auth-copyright a {
  color: var(--ui-text-subtle) !important;
  font-weight: 400 !important;
}

@media (max-width: 575.98px) {
  #app .auth .auth-card {
    padding: 28px 20px 20px !important;
    border-radius: 16px !important;
  }

  #app .auth .auth-card > h4,
#app .auth .auth-card > h3 {
    font-size: 22px !important;
  }
}
/* Table cell text: inner spans carry their own large sizes; keep rows compact like the reference */
#main .table tbody td :is(span, div, p, a, h6, strong, b, label):not(.badge):not(.figma-status-pill):not([class*=status-]):not(.btn):not(i) {
  font-size: 13px !important;
}

#main .table tbody td :is(small, .small, .text-muted, .figma-time-light, .figma-seller-id, .figma-customer-email) {
  font-size: 12px !important;
}

/* Page titles: bold like the reference */
.page-heading h3,
.page-heading .page-title h3,
.page-heading h2 {
  font-weight: 700 !important;
}

/* Auth: centre the input icons, keep the copyright muted */
#app .auth .has-icon-left .form-control-icon {
  top: 50% !important;
  transform: translateY(-50%);
  padding: 0 0 0 14px !important;
  display: flex;
  align-items: center;
}

#app .auth .auth-card .auth-copyright,
#app .auth .auth-card .auth-copyright a {
  color: var(--ui-text-subtle) !important;
  font-weight: 400 !important;
  font-size: 12px;
}

#app .auth .has-icon-left .form-control-icon i {
  display: block;
  line-height: 1 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Shared fixes from the page-by-page review
   ========================================================================== */
/* Sidebar header: store/app name next to the logo (seller panel) stays compact */
#sidebar .sidebar-header .logo a {
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ui-heading) !important;
  text-decoration: none;
  overflow: hidden;
}

#sidebar .sidebar-header .logo a img {
  flex-shrink: 0;
}

/* Modal footers: buttons right-aligned with a gap, wrapping on phones */
.modal-footer > div,
.modal-footer > .w-100 {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* Solid "+ Add" also when the icon is nested one level (e.g. inside a span) */
#main .btn-figma-filter:has(.fa-plus):not(:has(.fa-filter)) {
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

#main .btn-figma-filter:has(.fa-plus):not(:has(.fa-filter)) i {
  color: var(--theme-neutral-50) !important;
}

/* Black "View orders" style buttons follow the theme instead of a fixed dark fill */
#main .btn-dark {
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

#main .btn-dark:hover {
  background: var(--theme-primary-600) !important;
  border-color: var(--theme-primary-600) !important;
}

/* Wide tables never push the page sideways: they scroll inside their card */
#main .card .table-responsive,
#main .figma-main-section-card .table-responsive {
  overflow-x: auto;
}

#main .card > .table,
#main .figma-main-section-card > .table {
  display: block;
  overflow-x: auto;
}

/* Status pills: tinted border colors must win over the base pill's transparent border */
.figma-status-pill[class*=status-],
.figma-status-pill[class*=bg-] {
  border-style: solid;
  border-width: 1px;
}

/* Status classes returned by getStatusBadgeClass() (self pickup orders) */
.figma-badge-received,
.figma-badge-shipped {
  background: var(--theme-info-50) !important;
  color: var(--theme-info-700) !important;
  border: 1px solid color-mix(in srgb, var(--theme-info-500) 30%, transparent) !important;
}

.figma-badge-processed,
.figma-badge-delivered {
  background: var(--theme-success-50) !important;
  color: var(--theme-success-700) !important;
  border: 1px solid color-mix(in srgb, var(--theme-success-500) 30%, transparent) !important;
}

.figma-badge-cancelled {
  background: var(--theme-error-50) !important;
  color: var(--theme-error-700) !important;
  border: 1px solid color-mix(in srgb, var(--theme-error-500) 30%, transparent) !important;
}

.figma-badge-paymentpending {
  background: var(--theme-warn-50) !important;
  color: var(--theme-warn-700) !important;
  border: 1px solid color-mix(in srgb, var(--theme-warn-500) 30%, transparent) !important;
}

.figma-badge-default {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text-muted) !important;
  border: 1px solid var(--ui-border) !important;
}

/* Empty table state (light and dark) */
#main .b-table-empty-row td {
  padding: 36px 16px !important;
  text-align: center;
  color: var(--ui-text-muted) !important;
  background: var(--ui-surface) !important;
  font-size: 13px !important;
}

/* Upload dropzones */
.file-input-div {
  padding: 24px;
  text-align: center;
}

.file-input-div:hover {
  background-color: var(--ui-primary-soft) !important;
}

/* Modal footer sits on the surface (no grey band) */
.modal-footer,
.figma-modal .modal-footer {
  background: var(--ui-surface) !important;
}

/* Bootstrap border utilities follow the theme border */
#main :is(.border, .border-top, .border-bottom, .border-start, .border-end):not(:is(.border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-dark, .border-secondary)) {
  border-color: var(--ui-border) !important;
}

/* Underline tabs everywhere (b-tabs / nav-tabs / pills used as tabs) */
#main .figma-modern-tabs .nav-link {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--ui-text-muted) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
}

#main .figma-modern-tabs .nav-link.active {
  color: var(--theme-primary-600) !important;
  border-bottom-color: var(--theme-primary-500) !important;
}

/* Icon SVGs that draw their own 40px rounded box (edit icon, Type=Default/Hover, ...):
   inside action buttons the button is the box, so hide the drawn background + border paths */
:is(.figma-action-btn, .figma-delete-btn, .btn-figma-action, .table) .base-icon svg > path[d^="M0 8C0 3.58172"],
:is(.figma-action-btn, .figma-delete-btn, .btn-figma-action, .table) .base-icon svg > path[mask] {
  display: none;
}

:is(.figma-action-btn, .figma-delete-btn) .base-icon,
:is(.figma-action-btn, .figma-delete-btn) .base-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "+ Add" is the primary action whichever toolbar button class it uses */
#main .btn-figma-columns:has(.fa-plus),
#main .btn-figma-columns:has(.bi-plus-lg) {
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

#main .btn-figma-columns:has(.fa-plus) i,
#main .btn-figma-columns:has(.bi-plus-lg) i {
  color: var(--theme-neutral-50) !important;
}

/* Map pickers: keep tall maps usable on phones */
@media (max-width: 767.98px) {
  #main .leaflet-container,
#main .vue-map-container,
#main .osm-map-picker {
    max-height: 60vh;
  }
}
/* ===== Order detail (ViewOrder, ViewSelfPickupOrder) ===== */
.order-header-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.od-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.od-order-id {
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: var(--ui-heading);
}

.od-wallet-pill {
  background-color: var(--ui-surface-muted);
  color: var(--ui-text-muted);
}

.od-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--ui-radius);
}

.od-meta-label {
  color: var(--ui-text-muted);
}

.od-meta-value {
  color: var(--ui-heading);
  font-weight: 600;
}

.od-seller-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--theme-primary-600);
  text-decoration: none;
}

.od-seller-link:hover {
  text-decoration: underline;
}

.od-seller-link i {
  font-size: 11px;
  color: inherit;
}

.od-card {
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}

.od-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.od-card-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--ui-heading);
}

.od-card-body {
  padding: 20px;
}

.od-table-wrap {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

.od-items-table {
  min-width: 560px;
}

.od-items-table thead th {
  background: var(--ui-surface-muted);
  border: none;
  border-bottom: 1px solid var(--ui-border);
  padding: 10px 12px;
  font-family: var(--ui-font);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ui-text-muted);
  white-space: nowrap;
  vertical-align: middle;
}

.od-items-table tbody td {
  border: none;
  border-bottom: 1px solid var(--ui-border);
  padding: 12px;
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 20px;
  color: var(--ui-text);
  vertical-align: middle;
}

.od-items-table tbody tr:last-child td {
  border-bottom: none;
}

.od-items-table th:first-child,
.od-items-table td:first-child {
  padding-left: 20px;
}

.od-items-table th:last-child,
.od-items-table td:last-child {
  padding-right: 20px;
}

.od-cell-strong {
  font-weight: 600;
  color: var(--ui-heading) !important;
}

.od-product {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
}

.od-product-img {
  width: 44px;
  height: 44px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  flex-shrink: 0;
}

.od-product-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--ui-heading);
}

.od-product-sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--ui-text-muted);
}

.od-product-cancel {
  margin-top: 4px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--theme-error-600);
}

.od-prescription-thumb {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.od-item-cancelled {
  font-weight: 600;
  font-size: 12px;
  color: var(--theme-error-600);
}

.od-cancel-icon {
  color: var(--theme-error-500);
}

.od-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 20px;
  color: var(--ui-text);
}

.od-sum-val {
  font-weight: 600;
  color: var(--ui-heading);
}

.od-sum-row--sub {
  font-weight: 600;
  font-size: 14px;
  color: var(--ui-heading);
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--ui-border);
}

.od-sum-row--error,
.od-sum-row--error .od-sum-val {
  color: var(--theme-error-600);
}

.od-sum-row--success,
.od-sum-row--success .od-sum-val {
  color: var(--theme-success-600);
  font-weight: 600;
}

.payable-total-box {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--ui-heading);
}

body.theme-dark .payable-total-box {
  background: var(--theme-neutral-800) !important;
  border-color: var(--theme-neutral-700) !important;
}

.od-action-card {
  height: calc(100% - 24px);
}

.od-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.od-inline-form .form-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border-strong);
  padding: 6px 32px 6px 12px;
  font-size: 13px;
}

.od-form-btn {
  flex-shrink: 0;
  height: 38px;
  min-width: 84px;
  padding: 0 16px;
  border-radius: var(--ui-radius);
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

.od-person {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
}

.od-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius);
  font-weight: 700;
  font-size: 15px;
  color: var(--theme-primary-600);
  background: var(--ui-primary-soft) !important;
}

.od-person-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ui-heading);
}

.od-person-sub {
  font-size: 12px;
  line-height: 18px;
  color: var(--ui-text-muted);
}

.od-person-strong {
  font-weight: 600;
  color: var(--ui-text);
}

.od-divider {
  border-top: 1px solid var(--ui-border);
  margin: 16px 0;
}

.od-info-row {
  margin-bottom: 12px;
}

.od-info-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 18px;
  color: var(--ui-text-muted);
}

.od-info-value {
  margin-left: 24px;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: var(--ui-heading);
  word-break: break-word;
}

.od-address-type {
  font-weight: 600;
  font-size: 13px;
  color: var(--ui-heading);
}

.od-address-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--ui-text-muted);
}

.od-delivery-time-label {
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: var(--theme-error-600);
}

.od-delivery-time-value {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
}

/* Neutral status pill + info status class */
.figma-status-pill.bg-secondary,
.figma-status-pill.bg-dark,
.figma-status-pill.bg-light {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text-muted) !important;
  border-color: var(--ui-border) !important;
}

.status-info {
  background: var(--theme-info-50) !important;
  color: var(--theme-info-700) !important;
  border: 1px solid color-mix(in srgb, var(--theme-info-500) 30%, transparent) !important;
}

/* Stacked (mobile) tables: values align to the start, not centred */
@media (max-width: 767.98px) {
  #main .b-table-stacked-md td,
#main .b-table-stacked-sm td,
#main .b-table-stacked td {
    text-align: start !important;
  }
}
/* Button-style radio groups: hide the native radio circle inside each button */
.btn-group-toggle .btn input[type=radio],
.btn-group-toggle .btn input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* text input + colour swatch + button on one line: same height, same radius */
.color-field {
  gap: 8px;
  align-items: stretch;
}

.color-field > :is(.form-control, .btn) {
  height: var(--ui-control-h) !important;
  min-height: var(--ui-control-h);
  border-radius: var(--ui-radius) !important;
}

.color-field .color-swatch {
  flex: 0 0 52px;
  max-width: 52px;
  padding: 5px;
}

.color-field .btn {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}

.color-swatch-input {
  flex: 0 0 72px;
  max-width: 100px;
  height: 40px;
  padding: 4px;
}

.auth .detail-card {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 36px 24px;
  overflow: visible;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--theme-neutral-950) 14%, transparent);
}

.auth .detail-card > .auth-logo {
  padding-bottom: 0;
  margin-bottom: 16px;
}

.auth .detail-card > h4 {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--ui-heading);
  margin-bottom: 4px;
}

.auth .detail-card > .auth-subtitle {
  margin-bottom: 24px !important;
}

#app .auth .detail-card .form-control {
  height: 42px !important;
  min-height: 42px;
  border-radius: var(--ui-radius) !important;
}

#app .auth .detail-card textarea.form-control {
  height: auto !important;
  min-height: 96px;
}

#app .auth .detail-card input[type=file].form-control {
  padding-top: 8px;
}

.auth .detail-card .input-group > .btn {
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}

.error-state-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.error-state-wrap--page {
  min-height: 100vh;
  background: var(--ui-bg);
}

.error-state-card {
  width: 100%;
  max-width: 520px;
  margin: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

.error-state-card .card-body {
  padding: 40px 32px;
}

.error-state-code {
  font-family: var(--ui-font);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--theme-primary-500);
  margin-bottom: 12px;
}

.error-state-title {
  font-family: var(--ui-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--ui-heading);
  margin-bottom: 8px;
}

.error-state-text {
  font-size: 14px;
  color: var(--ui-text-muted);
  margin-bottom: 24px;
}

.error-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.error-state-actions .btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--ui-radius);
}

.error-state-actions .btn-outline-secondary {
  color: var(--ui-text);
  border-color: var(--ui-border-strong);
  background: var(--ui-surface);
}

.error-state-actions .btn-outline-secondary:hover {
  background: var(--ui-surface-muted);
}

.form-subsection-title {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--ui-heading);
}

.register-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.register-actions .btn {
  min-width: 220px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
}

.register-section {
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
}

.register-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ui-heading);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ui-border);
}

.register-section label,
.register-section .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
  margin-bottom: 6px;
}

.report-kpis .figma-kpi-card-v2 {
  height: auto !important;
  min-height: 76px;
  gap: 12px;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow);
}

.report-kpis .figma-kpi-icon-v2 {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  color: var(--theme-neutral-50) !important;
}

.report-kpis .figma-kpi-icon-v2 i {
  font-size: 18px !important;
  color: var(--theme-neutral-50) !important;
}

.report-kpis .figma-kpi-content-v2 {
  min-width: 0;
  margin-left: 0;
}

.report-kpis .figma-kpi-label-v2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-kpis .figma-kpi-value-v2 {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  overflow: hidden;
  height: 38px;
}

.view-toggle-btn {
  width: 38px;
  border: 0;
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  font-size: 14px;
}

.view-toggle-btn + .view-toggle-btn {
  border-left: 1px solid var(--ui-border-strong);
}

.view-toggle-btn.active {
  background: var(--ui-primary-soft);
  color: var(--theme-primary-600);
}

/* Phones: in the toolbar's two-column button grid the re-order switch and the grid/list/tree
   switcher each take a full row (the switcher's buttons share the width), so neither is squeezed
   or has its label cut. */
@media (max-width: 575.98px) {
  .figma-action-bar-row .reorder-toggle,
.figma-action-bar-row .view-toggle {
    grid-column: 1/-1;
    width: 100%;
  }

  .figma-action-bar-row .reorder-toggle {
    justify-content: space-between;
  }

  .figma-action-bar-row .view-toggle-btn {
    flex: 1 1 0;
    width: auto;
  }
}
/* ==========================================================================
   Shared Drag-and-drop & Reordering Controls
   ========================================================================== */
/* components/ReorderToggle.vue: a toolbar button with a small on/off switch */
.reorder-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  /* same as the other list-toolbar buttons */
  padding: 0 12px;
  padding-inline: 12px 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.reorder-toggle:hover {
  border-color: var(--theme-primary-300);
}

.reorder-toggle:focus-visible {
  outline: 2px solid var(--theme-primary-300);
  outline-offset: 2px;
}

.reorder-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.reorder-toggle__icon {
  font-size: 15px;
  line-height: 1;
  color: var(--ui-text-muted);
}

.reorder-toggle__switch {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: var(--theme-neutral-300);
  transition: background-color 0.2s ease;
}

.reorder-toggle__knob {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-neutral-950) 25%, transparent);
  transition: inset-inline-start 0.2s ease;
}

.reorder-toggle.is-on {
  border-color: var(--theme-primary-500);
  background: var(--ui-primary-soft);
  color: var(--theme-primary-700);
}

.reorder-toggle.is-on .reorder-toggle__icon {
  color: var(--theme-primary-600);
}

.reorder-toggle.is-on .reorder-toggle__switch {
  background: var(--theme-primary-500);
}

.reorder-toggle.is-on .reorder-toggle__knob {
  inset-inline-start: 14px;
}

/* match the neighbouring toolbar buttons exactly (dark mode resets button font size elsewhere) */
body .reorder-toggle,
body .reorder-toggle .reorder-toggle__label {
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.theme-dark .reorder-toggle:not(.is-on) {
  border-color: var(--ui-border-strong);
}

body.theme-dark .reorder-toggle__switch {
  background: var(--theme-neutral-600);
}

body.theme-dark .reorder-toggle.is-on .reorder-toggle__switch {
  background: var(--theme-primary-500);
}

.item-card-draggable {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.item-card-drag-bar {
  padding: 8px 12px;
  background: var(--ui-surface-muted, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--ui-border);
  border-top-left-radius: var(--ui-radius, 8px);
  border-top-right-radius: var(--ui-radius, 8px);
}

.item-card-drag-handle {
  cursor: grab;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ui-radius-sm, 4px);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  font-size: 12px;
  color: var(--ui-text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.15s ease;
}

.item-card-drag-handle:hover,
.item-card-drag-handle:active {
  background: var(--theme-primary-500);
  border-color: var(--theme-primary-500);
  color: var(--theme-primary-contrast, #ffffff);
  cursor: grabbing;
}

.category-drag-handle,
.drag-handle {
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.15s ease;
}

.category-drag-handle:hover,
.category-drag-handle:active,
.drag-handle:hover,
.drag-handle:active {
  cursor: grabbing;
  color: var(--theme-primary-500) !important;
}

.cursor-move {
  cursor: move;
}

.ghost-category,
.ghost {
  opacity: 0.45;
  background: var(--theme-primary-50, rgba(0, 123, 255, 0.1)) !important;
  border: 2px dashed var(--theme-primary-500) !important;
}

.category-order-badge {
  font-size: 11px;
  font-weight: 600;
}

/* List-card header titles: same size as other card titles */
#main .figma-main-section-card > .card-header .card-title,
#main .figma-main-section-card > .card-header h4,
#main .figma-main-section-card > .card-header h5 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ui-heading) !important;
  margin: 0 !important;
}

/* Vendor dark theme indents every card inside tab panes; keep cards full width */
body.theme-dark .tab-content .card {
  margin-left: 0 !important;
  width: auto !important;
}

/* Active tab label always uses the primary colour (also the default-language span inside it) */
#main .nav-tabs .nav-link.active,
#main .nav-tabs .nav-link.active span {
  color: var(--theme-primary-600) !important;
}

#main .nav-tabs .nav-link:not(.active) span.text-primary {
  color: inherit !important;
}

/* Toggle buttons built as <label class="btn"><input type="radio|checkbox"> …: hide the native control */
label.btn > input[type=radio],
label.btn > input[type=checkbox] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  opacity: 0;
}

/* Base template floats card titles left, which pulled descriptions onto the title line */
.card > .card-header .card-title,
.card > .card-header > h4,
.card > .card-header > h5 {
  float: none;
}

/* Row action icons: plain SVG icons at 18px; icons that draw their own 40px box fill the button */
:is(.figma-action-btn, .figma-delete-btn) .base-icon {
  width: 18px !important;
  height: 18px !important;
}

:is(.figma-action-btn, .figma-delete-btn) .base-icon:has(svg > path[d^="M0 8C0 3.58172"]) {
  width: 32px !important;
  height: 32px !important;
}

/* Row action colours: muted glyph, primary on hover (delete: error on hover) */
#main .figma-action-btn:not(.figma-delete-btn),
#main .figma-action-btn:not(.figma-delete-btn) i {
  color: var(--ui-text-muted) !important;
}

#main .figma-action-btn:not(.figma-delete-btn):hover,
#main .figma-action-btn:not(.figma-delete-btn):hover i {
  color: var(--theme-primary-600) !important;
}

#main .figma-delete-btn,
#main .figma-delete-btn i {
  color: var(--ui-text-muted) !important;
}

#main .figma-delete-btn:hover,
#main .figma-delete-btn:hover i {
  color: var(--theme-error-600) !important;
}

/* Links that used a fixed blue follow the theme */
#main .figma-link-blue {
  color: var(--theme-primary-600) !important;
}

/* Mobile stacked tables: each record is a light card, label/value rows separated by a hairline */
@media (max-width: 767.98px) {
  #main :is(.b-table-stacked-md, .b-table-stacked-sm, .b-table-stacked) > tbody > tr {
    display: block;
    margin: 0 0 12px;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    background: var(--ui-surface);
  }

  #main :is(.b-table-stacked-md, .b-table-stacked-sm, .b-table-stacked) > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
  }

  #main :is(.b-table-stacked-md, .b-table-stacked-sm, .b-table-stacked) > tbody > tr > td:last-child {
    border-bottom: 0 !important;
  }

  #main .od-items-table td,
#main .od-items-table th {
    border-left: 0 !important;
    border-right: 0 !important;
  }
}
/* Active breadcrumb uses the heading colour on every panel (seller/delivery pages add .text-primary) */
.page-heading .breadcrumb-item.active,
.page-heading .breadcrumb-item.active.text-primary {
  color: var(--ui-heading) !important;
}

/* Pagination buttons: uniform squares */
#main .figma-pagination .page-link,
#main .pagination .page-link {
  min-width: 34px;
  height: 34px;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

/* Long table text (ids, messages): clamp to two lines */
#main .table td.text-wrap-clamp,
#main .table td .text-wrap-clamp {
  max-width: 220px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Register / details pages: common.css gives .content a margin, max-height and scroll box */
.auth .detail-card .content {
  margin: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Report KPI rows start on the left (common.css centres short .row.g-3 rows) */
.report-kpis {
  justify-content: flex-start !important;
}

@media (max-width: 575.98px) {
  /* Report KPI tiles: icon above, label and amount at full tile width and allowed to wrap, so
     "Total Amount" / "₹ 12,345.00" are shown in full instead of being cut with an ellipsis */
  .report-kpis .figma-kpi-card-v2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px !important;
  }

  .report-kpis .figma-kpi-content-v2 {
    width: 100%;
  }

  .report-kpis .figma-kpi-label-v2,
.report-kpis .figma-kpi-value-v2 {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .report-kpis .figma-kpi-value-v2 {
    font-size: 15px !important;
    line-height: 1.25;
  }
}
/* Clear (x) button inside the date-range filter */
.figma-filter-clear {
  right: 48px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

/* Date-range field (phones and the narrow col-md-4 on tablets is only ~230px wide). Slimmer icons +
   padding so the full "dd/mm/yyyy - dd/mm/yyyy" fits and never runs under the clear (x) / calendar icons. */
@media (max-width: 1199.98px) {
  .modern-datepicker-container .reportrange-text {
    padding: 0 64px 0 12px !important;
    height: 100% !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* reportrange-text is display:flex, so its text span must be allowed to shrink + ellipsize */
  .modern-datepicker-container .reportrange-text > span {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modern-datepicker-container .figma-filter-icon-right {
    right: 12px;
  }

  .modern-datepicker-container .figma-filter-icon-right svg {
    width: 20px;
    height: 20px;
  }

  .modern-datepicker-container .figma-filter-clear {
    right: 38px;
    width: 20px;
    height: 20px;
    font-size: 16px;
  }
}
/* Card header description line + right-aligned form actions (settings pages) */
.card-header .card-desc,
.card-header .card-title + p.text-muted {
  font-size: 13px;
  color: var(--ui-text-muted) !important;
  margin: 4px 0 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--ui-border);
  padding-top: 16px;
  margin-top: 8px;
}

/* Labels nested deeper than .form-group > label (base template paints them navy) */
#main .card-body label:not(.form-check-label):not(.btn):not(.custom-control-label) {
  color: var(--ui-text);
}

/* Selected state for outline toggle buttons */
.btn-group-toggle > .btn-outline-primary.active,
.btn-group-toggle > .btn-outline-primary:not(:disabled):not(.disabled).active {
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

/* Inline code chips: neutral instead of Bootstrap pink */
#main code {
  color: var(--ui-heading);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  padding: 1px 6px;
  font-size: 12px;
}

#main .border-secondary {
  border-color: var(--ui-border) !important;
}

/* Modal close (×) in a neutral colour */
.modal-header .close,
.modal-header .btn-close {
  color: var(--ui-text-muted) !important;
  opacity: 1;
  text-shadow: none;
}

/* Table footers directly under a table don't need extra top margin */
#main .figma-table-footer.mt-4 {
  margin-top: 0 !important;
}

/* ===== Auth widgets (logo, password toggle, forgot link) ===== */
.auth-forgot {
  margin: 12px 0 20px;
}

.auth-logo-img {
  max-height: 70px;
  max-width: 200px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.auth .auth-logo-img {
  max-height: 70px;
  max-width: 200px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.auth-pw-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.auth-pw-toggle img {
  width: 20px;
  height: 20px;
  filter: invert(0.85);
  opacity: 0.85;
}

.form-group:has(> .auth-pw-toggle) .form-control {
  padding-right: 44px;
}

.pw-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  background: var(--ui-surface);
  border-color: var(--ui-border-strong);
}

.pw-toggle-btn:hover {
  background: var(--ui-surface-muted);
}

.pw-toggle-btn img {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

/* Show / hide password eye (hide_password.svg / show_password.svg are black): flip to white on dark
   surfaces. One rule for every form that uses them - Delivery Boy edit (db-pw-icon), Seller edit
   (password-toggle-icon), System User edit (pw-eye-icon) and the register / install forms. */
body.theme-dark :is(.pw-toggle-btn img, .db-pw-icon, .password-toggle-icon, .pw-eye-icon) {
  filter: invert(1);
  opacity: 0.85;
}

/* Vendor CSS removes top padding of a card body under a header */
#main .card > .card-header ~ .card-body:not(.p-0) {
  padding-top: 20px;
}

/* No inner box around tables inside list cards */
#main .figma-main-section-card .table-responsive,
#main .card .table-responsive {
  border: 0 !important;
}

/* Plain empty table rows get an inbox icon above the text */
#main .b-table-empty-row td > div:only-child:not(:has(i, svg))::before {
  content: "\f2d6";
  font-family: "bootstrap-icons";
  display: block;
  float: none;
  width: 100%;
  font-size: 28px;
  line-height: 1;
  text-align: center;
  color: var(--ui-text-subtle);
  margin: 0 auto 8px;
}

/* Grid / list toggle keeps its natural width in stacked mobile toolbars */
#main .figma-action-bar-row .view-toggle {
  flex: 0 0 auto !important;
}

/* ON / OFF style button groups look joined */
.btn-group-toggle.btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px;
}

.btn-group-toggle.btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Phones: long KPI values (currency amounts) shrink and wrap instead of overflowing the tile */
@media (max-width: 575.98px) {
  .figma-kpi-content-v2,
.dash-stat-card > div {
    min-width: 0;
  }

  .figma-kpi-value-v2,
.figma-stat-value,
.dash-stat-value {
    font-size: 16px !important;
    overflow-wrap: anywhere;
  }
}
/* ==========================================================================
   Card grid view for list pages (used with ViewModeMixin + .view-toggle)
   ========================================================================== */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 20px;
}

.item-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.item-grid-state {
  padding: 40px 16px 48px;
  text-align: center;
  color: var(--ui-text-muted);
  font-size: 13px;
}

.item-grid-state i {
  display: block;
  font-size: 28px;
  width: 100%;
  margin: 0 auto 8px;
  text-align: center;
  color: var(--ui-text-subtle);
}

.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.item-card:hover {
  border-color: color-mix(in srgb, var(--theme-primary-500) 35%, var(--ui-border));
  box-shadow: var(--ui-shadow-lg);
  transform: translateY(-1px);
}

.item-card.is-selected {
  border-color: var(--theme-primary-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary-500) 25%, transparent);
}

.item-card-media {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-surface-muted);
  overflow: hidden;
}

.item-card-media--banner {
  aspect-ratio: 16/7;
}

.item-card-media--avatar {
  aspect-ratio: auto;
  padding: 20px 0 8px;
  background: transparent;
}

.item-card-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 12px;
}

.item-card-media--cover img {
  -o-object-fit: cover;
     object-fit: cover;
  padding: 0;
}

.item-card-media--avatar img,
.item-card-avatar {
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

.item-card-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--theme-primary-600);
  background: var(--ui-primary-soft);
}

.item-card-noimg {
  color: var(--ui-text-subtle);
  font-size: 28px;
}

.item-card-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  z-index: 1;
}

.item-card-select {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-strong);
}

.item-card-select input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--theme-primary-500);
}

.item-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.item-card-media--avatar + .item-card-body {
  text-align: center;
  align-items: center;
}

.item-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ui-heading);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.item-card-meta {
  font-size: 12px;
  color: var(--ui-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.item-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ui-heading);
}

.item-card-price del {
  font-size: 12px;
  font-weight: 400;
  color: var(--ui-text-subtle);
}

.item-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.item-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-text-muted);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  line-height: 1.4;
}

.item-card-chip i {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  font-size: 12px;
  line-height: 1;
}

.item-card-chip i::before {
  display: block;
  vertical-align: baseline;
  line-height: 1;
}

.item-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ui-border);
  margin-top: auto;
}

.item-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 575.98px) {
  .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .item-grid--wide,
.item-grid--single-xs {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-card-body {
    padding: 10px;
  }

  .item-card-footer {
    padding: 8px 10px;
    flex-wrap: wrap;
  }

  .item-card-title {
    font-size: 13px;
  }
}
/* Phones: when the toolbar gives the grid/list toggle a wide slot, its two buttons share it evenly */
@media (max-width: 575.98px) {
  #main .view-toggle {
    display: flex;
  }

  #main .view-toggle .view-toggle-btn {
    flex: 1 1 0;
    width: auto;
  }
}
/* ==========================================================================
   Tablet & small laptop (768–1199px)
   ========================================================================== */
@media (max-width: 1199.98px) {
  /* Toolbar buttons wrap instead of running off the card edge */
  #main .figma-action-bar-row {
    flex-wrap: wrap !important;
  }

  #main .figma-action-bar-row > .d-flex:not(:has(.figma-search-container)),
#main .figma-action-bar-row > div:last-child:not(:has(.figma-search-container)) {
    flex-wrap: wrap !important;
    justify-content: flex-end;
    row-gap: 8px;
  }

  #main .figma-action-bar-row > :has(.figma-search-container) {
    justify-content: flex-start !important;
    text-align: start !important;
  }

  #main .figma-action-bar-row > .flex-grow-1 {
    flex: 1 1 260px;
    min-width: 220px;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Denser tables so most lists fit the card without horizontal scrolling */
  #main .table > thead > tr > th,
#main .table thead th {
    padding: 10px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
  }

  #main .table > tbody > tr > td,
#main .table tbody td {
    padding: 10px 10px !important;
  }

  #main .table tbody td :is(span, div, p, a, h6, strong, b, label):not(.badge):not(.figma-status-pill):not([class*=status-]):not(.btn):not(i) {
    font-size: 12.5px !important;
  }

  #main .figma-action-btn,
#main .figma-delete-btn {
    width: 30px !important;
    height: 30px !important;
  }
}
/* ==========================================================================
   TinyMCE editor — theme-aware chrome (the editing iframe is coloured by resources/js/EditorTheme.js)
   Light mode keeps TinyMCE's own skin with theme borders/accents; dark mode recolours the whole UI.
   ========================================================================== */
.tox.tox-tinymce {
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background: var(--ui-primary-soft) !important;
}

.tox .tox-edit-area::before {
  border-color: var(--theme-primary-500) !important;
}

body.theme-dark .tox.tox-tinymce,
body.theme-dark .tox .tox-editor-container,
body.theme-dark .tox .tox-editor-header,
body.theme-dark .tox .tox-menubar,
body.theme-dark .tox .tox-toolbar,
body.theme-dark .tox .tox-toolbar__primary,
body.theme-dark .tox .tox-toolbar__overflow,
body.theme-dark .tox .tox-toolbar-overlord,
body.theme-dark .tox .tox-statusbar,
body.theme-dark .tox .tox-edit-area,
body.theme-dark .tox .tox-edit-area__iframe,
body.theme-dark .tox .tox-sidebar-wrap {
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border-strong) !important;
}

body.theme-dark .tox .tox-editor-header {
  border-bottom: 1px solid var(--ui-border-strong) !important;
  box-shadow: none !important;
}

body.theme-dark .tox .tox-toolbar__group:not(:last-of-type) {
  border-color: var(--ui-border) !important;
}

/* Toolbar / menubar buttons */
body.theme-dark .tox .tox-tbtn,
body.theme-dark .tox .tox-mbtn,
body.theme-dark .tox .tox-split-button,
body.theme-dark .tox .tox-tbtn__select-label {
  background: transparent !important;
  color: var(--ui-text) !important;
}

body.theme-dark .tox .tox-tbtn svg,
body.theme-dark .tox .tox-mbtn svg,
body.theme-dark .tox .tox-split-button svg,
body.theme-dark .tox .tox-collection__item-icon svg,
body.theme-dark .tox .tox-collection__item-checkmark svg,
body.theme-dark .tox .tox-collection__item-caret svg,
body.theme-dark .tox .tox-button--icon svg,
body.theme-dark .tox .tox-button--naked svg,
body.theme-dark .tox .tox-statusbar__resize-handle svg {
  fill: var(--ui-text) !important;
}

body.theme-dark .tox .tox-tbtn:hover,
body.theme-dark .tox .tox-tbtn:focus,
body.theme-dark .tox .tox-mbtn:hover,
body.theme-dark .tox .tox-mbtn--active,
body.theme-dark .tox .tox-split-button:hover,
body.theme-dark .tox .tox-tbtn--enabled {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-heading) !important;
}

body.theme-dark .tox .tox-tbtn--disabled,
body.theme-dark .tox .tox-tbtn--disabled svg,
body.theme-dark .tox .tox-tbtn:disabled svg {
  opacity: 0.45;
}

/* Status bar */
body.theme-dark .tox .tox-statusbar {
  border-top: 1px solid var(--ui-border-strong) !important;
}

body.theme-dark .tox .tox-statusbar,
body.theme-dark .tox .tox-statusbar a,
body.theme-dark .tox .tox-statusbar__path-item,
body.theme-dark .tox .tox-statusbar__wordcount,
body.theme-dark .tox .tox-statusbar__branding svg {
  color: var(--ui-text-muted) !important;
  fill: var(--ui-text-muted) !important;
}

/* Dropdown menus, colour pickers, pop-ups (rendered at body level in .tox-tinymce-aux) */
body.theme-dark .tox .tox-menu,
body.theme-dark .tox .tox-collection--list,
body.theme-dark .tox .tox-collection--toolbar,
body.theme-dark .tox .tox-collection--grid,
body.theme-dark .tox .tox-pop__dialog,
body.theme-dark .tox .tox-toolbar__overflow {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow-lg) !important;
}

body.theme-dark .tox .tox-collection__group {
  border-color: var(--ui-border) !important;
}

body.theme-dark .tox .tox-collection__item,
body.theme-dark .tox .tox-collection__item-label,
body.theme-dark .tox .tox-collection__item-accessory,
body.theme-dark .tox .tox-collection__group-heading {
  color: var(--ui-text) !important;
  background: transparent !important;
}

body.theme-dark .tox .tox-collection__item--active,
body.theme-dark .tox .tox-collection__item--enabled,
body.theme-dark .tox .tox-collection__item:hover {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-heading) !important;
}

/* Dialogs (insert link, image, table, code …) */
body.theme-dark .tox .tox-dialog-wrap__backdrop {
  background: color-mix(in srgb, var(--theme-neutral-950) 60%, transparent) !important;
}

body.theme-dark .tox .tox-dialog,
body.theme-dark .tox .tox-dialog__header,
body.theme-dark .tox .tox-dialog__body,
body.theme-dark .tox .tox-dialog__footer,
body.theme-dark .tox .tox-dialog__body-nav,
body.theme-dark .tox .tox-dialog__body-content {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border-strong) !important;
}

body.theme-dark .tox .tox-dialog__title,
body.theme-dark .tox .tox-label,
body.theme-dark .tox .tox-form__group label,
body.theme-dark .tox .tox-dialog__body-nav-item {
  color: var(--ui-heading) !important;
}

body.theme-dark .tox .tox-dialog__body-nav-item--active {
  color: var(--theme-primary-500) !important;
  border-bottom-color: var(--theme-primary-500) !important;
}

body.theme-dark .tox .tox-textfield,
body.theme-dark .tox .tox-textarea,
body.theme-dark .tox .tox-listbox--select,
body.theme-dark .tox .tox-selectfield select,
body.theme-dark .tox .tox-toolbar-textfield,
body.theme-dark .tox .tox-custom-editor,
body.theme-dark .tox .tox-dropzone {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border-strong) !important;
}

body.theme-dark .tox .tox-textfield:focus,
body.theme-dark .tox .tox-textarea:focus,
body.theme-dark .tox .tox-listbox--select:focus {
  border-color: var(--theme-primary-500) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary-500) 25%, transparent) !important;
}

body.theme-dark .tox .tox-listbox__select-chevron svg,
body.theme-dark .tox .tox-selectfield svg {
  fill: var(--ui-text-muted) !important;
}

body.theme-dark .tox .tox-button:not(.tox-button--secondary):not(.tox-button--naked) {
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

body.theme-dark .tox .tox-button--secondary,
body.theme-dark .tox .tox-button--naked {
  background: transparent !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

/* Notifications / promotion badge inside the editor */
body.theme-dark .tox .tox-notification {
  background: var(--ui-surface-muted) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

body.theme-dark .tox .tox-promotion-link {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text) !important;
}

body.theme-dark .tox .tox-promotion,
body.theme-dark .tox .tox-menubar + .tox-promotion {
  background: var(--ui-surface) !important;
  background-image: none !important;
  border-color: var(--ui-border-strong) !important;
}

body.theme-dark .tox .tox-mbtn__select-label,
body.theme-dark .tox .tox-mbtn {
  color: var(--ui-text) !important;
  opacity: 1 !important;
}

/* ===== Settings hub & settings pages (used in Setting/SettingsHub.vue, Setting/StoreSettings.vue) =====
   Header with "← Settings" back link, slim scrollable section pills, one section card with
   uppercase sub-headings, "setting rows" for switches and a sticky action bar. Works in dark mode
   (body.theme-dark) and RTL (logical properties + mirrored arrow). */
.settings-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.settings-page-head__main {
  min-width: 0;
}

.settings-page-head h3 {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.settings-page-head .breadcrumb-header {
  margin-inline-start: auto;
}

.settings-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-decoration: none;
}

.settings-back-link:hover,
.settings-back-link:focus-visible {
  color: var(--theme-primary-600);
  text-decoration: none;
}

.settings-back-link__icon {
  font-size: 12px;
  transition: transform 0.15s ease;
}

.settings-back-link:hover .settings-back-link__icon {
  transform: translateX(-2px);
}

[dir=rtl] .settings-back-link__icon,
.rtl .settings-back-link__icon {
  transform: scaleX(-1);
}

[dir=rtl] .settings-back-link:hover .settings-back-link__icon,
.rtl .settings-back-link:hover .settings-back-link__icon {
  transform: scaleX(-1) translateX(-2px);
}

/* Section switcher pills */
.settings-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin-bottom: 12px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.settings-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.settings-pill:hover {
  border-color: var(--ui-border-strong);
  color: var(--ui-heading);
}

.settings-pill:focus-visible {
  outline: 2px solid var(--theme-primary-500);
  outline-offset: 1px;
}

.settings-pill__icon {
  font-size: 13px;
  color: var(--ui-text-muted);
}

.settings-pill.active {
  background: var(--ui-primary-soft);
  border-color: var(--theme-primary-500);
  color: var(--theme-primary-600);
}

.settings-pill.active .settings-pill__icon {
  color: var(--theme-primary-500);
}

/* Section card */
.settings-section-card {
  --ss-pad: 24px;
  margin-bottom: 0;
}

.settings-section-card > .card-header {
  padding: 18px var(--ss-pad);
}

#main .card.settings-section-card > .card-header ~ .card-body:not(.p-0),
.settings-section-card > .card-body {
  padding: 4px var(--ss-pad) 0;
}

.settings-card-desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ui-text-muted);
}

.settings-section-card .nav-tabs {
  margin-top: 12px;
}

.settings-translate-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

/* Sub-sections with small uppercase headings */
.settings-group {
  padding: 20px 0 4px;
}

.settings-group + .settings-group {
  border-top: 1px solid var(--ui-border);
}

.settings-group-title {
  margin: 0 0 14px;
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.settings-group-help {
  margin: -6px 0 12px;
}

.settings-group > .row > .form-group {
  margin-bottom: 16px;
}

.settings-group-fields {
  margin-top: 16px;
}

.settings-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ui-text-muted);
}

/* Switch "setting rows": label + muted description at the start, switch at the end */
.setting-rows {
  margin-bottom: 16px;
  padding: 0 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
}

.setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 0;
}

.setting-row + .setting-row {
  border-top: 1px solid var(--ui-border);
}

.setting-row__text {
  flex: 1 1 0;
  min-width: 0;
}

#main .settings-section-card .setting-rows .setting-row__text label.setting-row__label,
.setting-row__label {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ui-heading);
  cursor: pointer;
}

.setting-row__desc {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-text-muted);
}

.setting-row .setting-row__control.form-check.form-switch {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.setting-row .setting-row__control .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 2.5em;
  height: 1.35em;
  margin: 0;
  cursor: pointer;
}

.setting-row .setting-row__control .form-check-label {
  min-width: 56px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text-muted);
  text-align: end;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Content revealed under a row when its switch is on (remarks, counts) */
.setting-row__extra {
  flex: 1 1 100%;
  margin-top: 4px;
}

.setting-row__extra > label {
  font-size: 13px;
}

/* Upload boxes */
.settings-upload .file-input-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  margin-bottom: 0;
  padding: 16px;
  line-height: 1.4;
  cursor: pointer;
}

.settings-upload .file-input-div i {
  color: var(--ui-text-subtle);
}

/* Sticky action bar at the bottom of the section card */
.settings-section-card .settings-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px calc(var(--ss-pad) * -1) 0;
  padding: 12px var(--ss-pad);
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-border);
  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
  box-shadow: 0 -8px 16px -12px color-mix(in srgb, var(--theme-neutral-950) 30%, transparent);
}

.settings-section-card .settings-actions:empty {
  display: none;
}

@media (max-width: 767.98px) {
  .settings-section-card {
    --ss-pad: 16px;
  }

  .settings-page-head .breadcrumb-header {
    margin-inline-start: 0;
    width: 100%;
  }

  .setting-rows {
    padding: 0 12px;
  }

  .settings-section-card .settings-actions .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 575.98px) {
  .settings-section-card {
    --ss-pad: 14px;
  }
}
/* Dark mode: the global dark reset forces light text on every span/p/label/h6 and paints cards
   neutral-800, so restore the muted hierarchy and match the card surface. */
body.theme-dark .settings-back-link,
body.theme-dark .settings-back-link span,
body.theme-dark .settings-back-link i,
body.theme-dark .settings-card-desc,
body.theme-dark .settings-group-title,
body.theme-dark .settings-help,
body.theme-dark .settings-help b,
body.theme-dark .setting-row__desc,
body.theme-dark .setting-row__control .form-check-label {
  color: var(--ui-text-muted) !important;
}

body.theme-dark .settings-back-link:hover,
body.theme-dark .settings-back-link:hover span,
body.theme-dark .settings-back-link:hover i {
  color: var(--theme-primary-400) !important;
}

body.theme-dark .setting-row__label {
  color: var(--ui-heading) !important;
}

body.theme-dark .settings-pill {
  background: var(--theme-neutral-800);
  border-color: var(--theme-neutral-700);
}

body.theme-dark .settings-pill span {
  color: var(--ui-text) !important;
}

body.theme-dark .settings-pill.active {
  background: var(--ui-primary-soft);
  border-color: var(--theme-primary-500);
}

body.theme-dark .settings-pill.active span,
body.theme-dark .settings-pill.active .settings-pill__icon {
  color: var(--theme-primary-300) !important;
}

body.theme-dark .setting-rows,
body.theme-dark .setting-row + .setting-row,
body.theme-dark .settings-group + .settings-group {
  border-color: var(--theme-neutral-700);
}

body.theme-dark .settings-section-card .settings-actions {
  background: var(--theme-neutral-800);
  border-top-color: var(--theme-neutral-700);
  box-shadow: 0 -8px 16px -12px color-mix(in srgb, var(--theme-neutral-950) 70%, transparent);
}

/* html/body use overflow-x:hidden globally, which turns <body> into a scroll container and stops
   position:sticky from following the viewport. On settings pages use clip instead (same clipping,
   no scroll container) so the section action bar stays visible while scrolling. */
html:has(.settings-section-card),
html:has(.settings-section-card) body {
  overflow-x: clip;
}

/* ...without that, the top bar's own position:sticky would start working on these pages only
   (and slide under the fixed announcement banner). Keep it scrolling like on every other page. */
/* ==========================================================================
   Dark mode: status tints & text shades
   The 50–200 tints (badges, pills, tinted KPI tiles, alerts, trend pills) are pastel in the
   palette and looked like light-mode boxes on dark pages; 600–800 text shades were too dark to read.
   In dark mode the tints become a muted mix into the dark surface and the text shades get lighter.
   (Theme palette vars live on <html>; redefining them on body only affects the page content.)
   ========================================================================== */
body.theme-dark {
  --theme-primary-50: color-mix(in srgb, var(--theme-primary-500) 16%, var(--theme-neutral-900));
  --theme-primary-100: color-mix(in srgb, var(--theme-primary-500) 24%, var(--theme-neutral-900));
  --theme-primary-200: color-mix(in srgb, var(--theme-primary-500) 36%, var(--theme-neutral-900));
  --theme-primary-600: var(--theme-primary-400);
  --theme-primary-700: var(--theme-primary-300);
  --theme-primary-800: var(--theme-primary-300);
  --theme-success-50: color-mix(in srgb, var(--theme-success-500) 16%, var(--theme-neutral-900));
  --theme-success-100: color-mix(in srgb, var(--theme-success-500) 24%, var(--theme-neutral-900));
  --theme-success-200: color-mix(in srgb, var(--theme-success-500) 36%, var(--theme-neutral-900));
  --theme-success-600: var(--theme-success-400);
  --theme-success-700: var(--theme-success-300);
  --theme-success-800: var(--theme-success-300);
  --theme-error-50: color-mix(in srgb, var(--theme-error-500) 16%, var(--theme-neutral-900));
  --theme-error-100: color-mix(in srgb, var(--theme-error-500) 24%, var(--theme-neutral-900));
  --theme-error-200: color-mix(in srgb, var(--theme-error-500) 36%, var(--theme-neutral-900));
  --theme-error-600: var(--theme-error-400);
  --theme-error-700: var(--theme-error-300);
  --theme-error-800: var(--theme-error-300);
  --theme-warn-50: color-mix(in srgb, var(--theme-warn-500) 16%, var(--theme-neutral-900));
  --theme-warn-100: color-mix(in srgb, var(--theme-warn-500) 24%, var(--theme-neutral-900));
  --theme-warn-200: color-mix(in srgb, var(--theme-warn-500) 36%, var(--theme-neutral-900));
  --theme-warn-600: var(--theme-warn-400);
  --theme-warn-700: var(--theme-warn-300);
  --theme-warn-800: var(--theme-warn-300);
  --theme-info-50: color-mix(in srgb, var(--theme-info-500) 16%, var(--theme-neutral-900));
  --theme-info-100: color-mix(in srgb, var(--theme-info-500) 24%, var(--theme-neutral-900));
  --theme-info-200: color-mix(in srgb, var(--theme-info-500) 36%, var(--theme-neutral-900));
  --theme-info-600: var(--theme-info-400);
  --theme-info-700: var(--theme-info-300);
  --theme-info-800: var(--theme-info-300);
}

/* Dark mode: light-only Bootstrap utilities and leftovers */
body.theme-dark #app :is(.bg-white, .bg-light, .bg-body, .bg-gray-100):not(.badge):not(.btn) {
  background-color: var(--ui-surface) !important;
}

body.theme-dark #app .text-dark:not(.badge):not(.btn) {
  color: var(--ui-heading) !important;
}

body.theme-dark #main .table,
body.theme-dark #main .table > :not(caption) > * > *,
body.theme-dark #main .table td {
  background-color: transparent;
  color: var(--ui-text);
}

body.theme-dark #main .table thead th {
  background-color: var(--ui-surface-muted) !important;
}

/* Dark mode: --ui-border (neutral-800) is almost the table's own surface, so row / header / outer
   lines vanished. Tables use the stronger border token instead. */
body.theme-dark #main .table > tbody > tr > td,
body.theme-dark #main .table tbody td {
  border-top-color: var(--ui-border-strong) !important;
}

body.theme-dark #main .table > thead > tr > th,
body.theme-dark #main .table thead th,
body.theme-dark #main .b-table thead th {
  border-bottom-color: var(--ui-border-strong) !important;
}

body.theme-dark #main .table-responsive {
  border-color: var(--ui-border-strong);
}

body.theme-dark .figma-header :is(.lang-selector, .module-selector, .header-cache-btn, .header-icon-btn, .burger-btn) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

body.theme-dark .form-check-input:not(:checked),
body.theme-dark .custom-control-label::before {
  background-color: var(--ui-surface-muted) !important;
  border-color: var(--ui-border-strong) !important;
}

body.theme-dark .form-switch .form-check-input:not(:checked) {
  --bs-form-switch-bg: none;
}

body.theme-dark .btn-light,
body.theme-dark .btn-outline-secondary,
body.theme-dark .view-order-btn {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

body.theme-dark .page-link {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

/* The printable invoice keeps a paper look in dark mode so totals stay readable */
body.theme-dark .invoice-sheet,
body.theme-dark #main .invoice-card .invoice-body {
  color: var(--ui-text);
}

/* Dark mode leftovers found by the page scan */
body.theme-dark .radio-img {
  background: var(--ui-surface-muted) !important;
  border-color: var(--ui-border-strong) !important;
}

/* The invoice stays a light "paper" sheet in dark mode: its HTML comes from the server with dark text */
body.theme-dark #printMe {
  /* paper keeps the light-mode border tokens too */
  --ui-border: color-mix(in srgb, var(--theme-neutral-950) 13%, var(--theme-neutral-50));
  --ui-border-strong: color-mix(in srgb, var(--theme-neutral-950) 24%, var(--theme-neutral-50));
  background: var(--theme-neutral-50) !important;
  color: var(--theme-neutral-900) !important;
  border-radius: var(--ui-radius);
}

body.theme-dark #printMe * {
  color: inherit;
}

body.theme-dark #printMe :is(td, th, span, p, div, strong, b, h1, h2, h3, h4, h5, h6) {
  color: var(--theme-neutral-900) !important;
}

/* ==========================================================================
   RTL mirroring for direction-specific rules in this file
   (the app marks RTL with the "rtl" class on <html> and <body>)
   ========================================================================== */
.rtl #sidebar .sidebar-wrapper {
  border-right: 0 !important;
  border-left: 1px solid var(--ui-border) !important;
}

.rtl .card-header > .pull-right {
  margin-left: 0;
  margin-right: auto;
}

.rtl .od-info-value {
  margin-left: 0;
  margin-right: 24px;
}

.rtl .view-toggle-btn + .view-toggle-btn {
  border-left: 0;
  border-right: 1px solid var(--ui-border-strong);
}

.rtl .figma-filter-clear {
  right: auto;
  left: 48px;
}

.rtl .auth-pw-toggle {
  right: auto;
  left: 14px;
}

.rtl .form-group:has(> .auth-pw-toggle) .form-control {
  padding-right: 0.75rem;
  padding-left: 44px;
}

.rtl #app .auth .has-icon-left .form-control {
  padding-left: 0.75rem !important;
  padding-right: 44px !important;
}

.rtl #app .auth .has-icon-left .form-control-icon {
  left: auto !important;
  right: 0 !important;
  padding: 0 14px 0 0 !important;
}

.rtl .btn-group-toggle.btn-group > .btn:not(:first-child) {
  margin-left: 0;
  margin-right: -1px;
  border-radius: var(--ui-radius) 0 0 var(--ui-radius) !important;
}

.rtl .btn-group-toggle.btn-group > .btn:not(:last-child) {
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0 !important;
}

.rtl .btn-group-toggle.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

.rtl .item-card-badges {
  right: auto;
  left: 10px;
  justify-content: flex-start;
}

.rtl .item-card-select {
  left: auto;
  right: 10px;
}

/* Directional arrows and chevrons point the other way in RTL */
.rtl :is(.fa-arrow-right, .bi-arrow-right, .fa-chevron-right, .bi-chevron-right, .fa-angle-right, .bi-arrow-right-short) {
  transform: scaleX(-1);
}

/* ==========================================================================
   RTL mirroring, part 2 (RTL QA pass with bootstrap.rtl.css active).
   Everything is scoped to .rtl, so LTR pages are untouched.
   ========================================================================== */
/* Breadcrumb separator: chevron-right -> chevron-left (bootstrap-icons F284) */
.rtl .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\f284";
}

/* Sidebar: an open group's caret turns toward the label (rotate(90deg) in LTR, mirrored here) */
.rtl .sidebar-wrapper .menu .sidebar-item.has-sub.open > .sidebar-link::after {
  transform: rotate(-90deg);
}

/* Switches: common.css pins the knob with left/right !important, which undid bootstrap.rtl.
   In RTL "off" sits on the right and "on" on the left. */
.rtl .form-switch .form-check-input {
  background-position: right center !important;
}

.rtl .form-switch .form-check-input:checked {
  background-position: left center !important;
}

/* Input groups (password eye, URL prefix, ...): round the outer corners, not the inner ones */
.rtl .input-group > :is(.form-control, .form-select, .btn, .input-group-text) {
  border-radius: 10px !important;
}

.rtl .input-group > :is(.form-control, .form-select, .btn, .input-group-text):not(:last-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.rtl .input-group > :is(.form-control, .form-select, .btn, .input-group-text):not(:first-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: -1px !important;
}

/* Legacy utility classes from style.css (ml-* / mr-*) are physical - swap them */
.rtl .ml-1 {
  margin-left: 0;
  margin-right: 0.25rem;
}

.rtl .ml-2 {
  margin-left: 0;
  margin-right: 0.5rem;
}

.rtl .ml-4 {
  margin-left: 0;
  margin-right: 1rem;
}

.rtl .mr-2 {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* vue-multiselect: caret, padding and tags on the left/right like its own [dir=rtl] rules */
.rtl .multiselect,
.rtl .multiselect__content {
  text-align: right;
}

.rtl .multiselect__select {
  right: auto;
  left: 1px;
}

.rtl .multiselect__tags {
  padding: 6px 16px 0 40px !important;
}

.rtl .multiselect__single,
.rtl .multiselect__placeholder,
.rtl .multiselect__input {
  padding-right: 0 !important;
}

.rtl .multiselect__tag {
  margin-right: 0;
  margin-left: 10px;
  padding: 4px 10px 4px 26px;
}

.rtl .multiselect__tag-icon {
  right: auto;
  left: 0;
  margin-left: 0;
  margin-right: 7px;
}

.rtl .multiselect__option::after {
  right: auto;
  left: 0;
  padding-right: 0;
  padding-left: 12px;
}

.rtl .multiselect__clear {
  right: auto;
  left: 12px;
}

.rtl .multiselect__spinner {
  right: auto;
  left: 1px;
}

/* select2 stamps dir="ltr" on its containers; run them RTL and mirror like its own [dir=rtl] rules */
.rtl .select2-container {
  direction: rtl;
}

.rtl .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 20px !important;
  padding-right: 10px !important;
}

.rtl .select2-container--default .select2-selection--single .select2-selection__clear {
  float: left;
}

.rtl .select2-container--default .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto;
}

.rtl .select2-container--default .select2-selection--multiple .select2-selection__choice,
.rtl .select2-container--default .select2-selection--multiple .select2-search--inline {
  float: right;
}

.rtl .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: 0;
}

.rtl .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: 0;
}

/* Grid empty / loading state: the 1rem-wide icon block sat on the start edge instead of centred */
.rtl .item-grid-state i {
  margin-left: auto;
  margin-right: auto;
}

/* bootstrap.rtl.css sets code/kbd/pre/samp to direction:rtl + bidi-override, which prints
   "[Customer Name]" backwards ("[emaN remotsuC]") - keep code samples left-to-right */
.rtl :is(code, kbd, pre, samp) {
  direction: ltr;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
}

/* Left-to-right values inside RTL text: dates/times, e-mails, URLs, phone numbers and hex
   colours were reordered by the bidi algorithm ("Sep 2026 ,26", "gmail.com@23", "F69609#").
   Run them LTR but keep them aligned to the RTL start edge. */
.rtl :is(.figma-date-bold, .figma-time-light, .order-meta-date, .od-track-time) {
  direction: ltr;
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
  text-align: match-parent;
}

.rtl input:is([type=email], [type=url], [type=tel]),
.rtl input.form-control:has(+ input[type=color]),
.rtl input[type=color] + input.form-control {
  direction: ltr;
  text-align: right;
}

/* ApexCharts lays its SVG out for LTR; under direction:rtl the y-axis labels slid out of the card */
.rtl .apexcharts-canvas {
  direction: ltr;
}

/* ==========================================================================
   Announcement ticker & sticky header (admin + seller containers)
   One fixed 36px line that scrolls like a news ticker; the header sticks just below it.
   --banner-h is kept in sync with the real banner height by observeBannerHeight() in the containers.
   ========================================================================== */
html:has(.global-announcement-banner) {
  --banner-h: 36px;
}

.global-announcement-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1051;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  background: var(--ui-primary-soft);
  border-bottom: 1px solid var(--ui-border);
  color: var(--theme-primary-800);
  font-size: 13px;
  font-weight: 600;
}

.global-announcement-banner > i {
  flex: none;
  font-size: 14px;
  color: var(--theme-primary-700);
}

body.theme-dark .global-announcement-banner,
body.theme-dark .global-announcement-banner span {
  color: var(--theme-primary-700) !important;
}

.announcement-ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* soft fade at both edges; mask only uses alpha, so any opaque token works */
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ui-text) 24px, var(--ui-text) calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, transparent, var(--ui-text) 24px, var(--ui-text) calc(100% - 24px), transparent);
}

.announcement-track {
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
  animation: ui-ticker 45s linear infinite;
}

/* each copy carries its own trailing gap, so moving by exactly 50% loops seamlessly */
.announcement-track > span {
  padding-inline-end: 80px;
}

.global-announcement-banner:hover .announcement-track {
  animation-play-state: paused;
}

@keyframes ui-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* RTL: text reads right-to-left, so it enters from the left */
.rtl .announcement-track {
  animation-name: ui-ticker-rtl;
}

@keyframes ui-ticker-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-track {
    animation: none;
  }
}
/* Fixed sidebar and page content start below the banner. */
html:has(.global-announcement-banner) .sidebar-wrapper {
  top: var(--banner-h) !important;
  height: calc(100vh - var(--banner-h)) !important;
}

html:has(.global-announcement-banner) #main {
  margin-top: var(--banner-h) !important;
}

/* overflow-x:hidden on <body> made it a scroll container, so position:sticky never followed the page.
   clip hides sideways overflow the same way without creating a scroll container. */
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.figma-header,
html:has(.settings-section-card) .figma-header {
  position: sticky;
  top: var(--banner-h, 0px);
  z-index: 1040;
}

/* The base template paints dark-mode navbars navy; the header uses the theme surface instead. */
body.theme-dark .figma-header .navbar {
  background-color: transparent !important;
}

/* ==========================================================================
   Uniform UI Polish: buttons, icons, grid cards, dialogs, switches, heights
   ========================================================================== */
/* Icon-only action buttons (edit / delete / copy / view): centred glyph & subtle dark-mode */
.figma-action-btn,
.btn-figma-action,
.figma-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

.figma-action-btn i,
.figma-action-btn em,
.figma-action-btn .base-icon,
.btn-figma-action i,
.figma-delete-btn i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}

body.theme-dark .figma-action-btn:not(.figma-delete-btn),
body.theme-dark .btn-figma-action:not(.figma-delete-btn) {
  background: var(--ui-surface-muted) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body.theme-dark .figma-action-btn:not(.figma-delete-btn):hover,
body.theme-dark .btn-figma-action:not(.figma-delete-btn):hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-primary-400) !important;
}

body.theme-dark .figma-delete-btn {
  background: var(--ui-surface-muted) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body.theme-dark .figma-delete-btn:hover {
  background: color-mix(in srgb, var(--theme-error-500) 15%, transparent) !important;
  border-color: var(--theme-error-500) !important;
  color: var(--theme-error-400) !important;
}

/* Grid cards (categories, products, media): single surface colour & themed checkbox */
.item-card {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.item-card-media {
  background: var(--ui-surface) !important;
}

.item-card-select {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  background: var(--ui-surface) !important;
  border: 1.5px solid var(--ui-border-strong) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.item-card-select input {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--theme-primary-500) !important;
}

.item-card.is-selected {
  border-color: var(--theme-primary-500) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary-500) 25%, transparent) !important;
}

.item-card.is-selected .item-card-select {
  background: var(--ui-primary-soft) !important;
  border-color: var(--theme-primary-500) !important;
}

/* Modals & Dialogs: unified border-radius, no square inner footer */
.modal-content {
  border-radius: var(--ui-radius-lg) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  background: var(--ui-surface) !important;
  overflow: hidden !important;
}

.modal-header {
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
}

.modal-body {
  background: var(--ui-surface) !important;
}

.modal-footer {
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
  border-top: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
}

body.theme-dark .modal-content,
body.theme-dark .modal-header,
body.theme-dark .modal-body,
body.theme-dark .modal-footer {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

/* Form switches: prevent label overlap in LTR and RTL */
.form-switch {
  padding-left: 2.8em !important;
}

.form-switch .form-check-input {
  margin-left: -2.8em !important;
  margin-top: 0.15em !important;
}

.form-switch .form-check-label {
  margin-left: 0.5em !important;
  cursor: pointer;
}

.rtl .form-switch,
body.rtl .form-switch {
  padding-left: 0 !important;
  padding-right: 2.8em !important;
}

.rtl .form-switch .form-check-input,
body.rtl .form-switch .form-check-input {
  margin-left: 0 !important;
  margin-right: -2.8em !important;
}

.rtl .form-switch .form-check-label,
body.rtl .form-switch .form-check-label {
  margin-left: 0 !important;
  margin-right: 0.5em !important;
}

.setting-row .setting-row__control.form-check.form-switch {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
}

.setting-row .setting-row__control .form-check-input {
  position: static !important;
  margin: 0 !important;
  float: none !important;
}

.setting-row .setting-row__control .form-check-label {
  margin: 0 !important;
  min-width: 56px !important;
  text-align: end !important;
}

.rtl .setting-row .setting-row__control.form-check.form-switch,
body.rtl .setting-row .setting-row__control.form-check.form-switch {
  padding: 0 !important;
}

.rtl .setting-row .setting-row__control .form-check-input,
body.rtl .setting-row .setting-row__control .form-check-input {
  margin: 0 !important;
}

/* Toolbar controls: uniform 38px height */
.figma-action-bar-row .btn,
.figma-action-bar-row .btn-figma-filter,
.figma-action-bar-row .btn-figma-columns,
.figma-action-bar-row .view-toggle,
.figma-action-bar-row .view-toggle-btn {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.figma-search-container {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: auto;
  text-align: start !important;
}

/* ==========================================================================
   Universal Form Select Text & Chevron Vertical Alignment (System-wide)
   ========================================================================== */
select:not(.multiselect__input):not(.select2-hidden-accessible),
.form-select,
.custom-select,
.figma-select-pill {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Light mode default arrow for selects */
select:not(.multiselect__input):not(.select2-hidden-accessible):not([multiple]),
.form-select:not([multiple]),
.custom-select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
}

/* Dark mode arrow for selects */
body.theme-dark select:not(.multiselect__input):not(.select2-hidden-accessible):not([multiple]),
body.theme-dark .form-select:not([multiple]),
body.theme-dark .custom-select:not([multiple]),
body.theme-dark .figma-select-pill {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
}

/* ==========================================================================
   Data table (components/DataTable.vue): shared loading and empty rows
   ========================================================================== */
.data-table__scroll {
  overflow-x: auto;
}

/* a page's own .table-responsive around <data-table> no longer needs to scroll (the inner box does) */
.table-responsive:has(> .data-table) {
  overflow-x: visible;
}

.data-table__state {
  text-align: center;
  padding: 24px 12px;
  color: var(--ui-text-muted);
  font-size: 13px;
}

.data-table__state .fa {
  color: var(--theme-neutral-400);
}

/* ==========================================================================
   Header controls: one uniform set (overrides the older header rules above)
   Every control is 40px tall with the same border, radius, surface and icon colour;
   icon-only buttons are 40x40 squares. Colours follow the theme in light and dark mode.
   (.figma-header is doubled on purpose: it must outrank the global dark-mode link colour rule.)
   ========================================================================== */
body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-right {
  gap: 8px !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector, .lang-selector, .user-dropdown-toggle) {
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-muted) !important;
  color: var(--theme-neutral-600) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector, .lang-selector, .user-dropdown-toggle):hover,
body:is(.theme-light, .theme-dark) .figma-header.figma-header .show > :is(.module-selector, .lang-selector, .header-icon-btn, .user-dropdown-toggle) {
  border-color: var(--theme-primary-300) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--theme-primary-700) !important;
}

/* icon-only squares: burger, theme, website, bell */
body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-icon-btn {
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
}

/* one icon size and colour everywhere (no green/white/orange one-offs) */
body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn) :is(i, svg) {
  font-size: 20px !important;
  width: auto;
  margin: 0 !important;
  color: currentColor !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .burger-btn svg {
  width: 20px;
  height: 20px;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-cache-btn {
  padding: 0 14px !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-cache-btn i {
  font-size: 16px !important;
}

/* module + language selectors */
body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.module-selector, .lang-selector) {
  padding: 0 10px 0 8px !important;
  justify-content: space-between !important;
  width: auto !important;
  min-width: 0 !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.module-icon, .lang-flag) {
  width: 22px !important;
  height: 22px !important;
  margin: 0 8px 0 0 !important;
  margin-inline: 0 8px !important;
  -o-object-fit: cover;
     object-fit: cover;
  flex: none;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .module-icon {
  -o-object-fit: contain;
     object-fit: contain;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.module-name, .lang-name) {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.module-chevron, .lang-chevron, .user-chevron) {
  font-size: 11px !important;
  margin: 0 !important;
  color: var(--ui-text-muted) !important;
}

/* bell badge sits on the button's top corner */
body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-badge-count {
  position: absolute;
  top: -8px;
  inset-inline-end: -10px;
  left: auto;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  border: 2px solid var(--ui-surface);
  background: var(--theme-error-500);
  color: var(--theme-neutral-50) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.rtl .figma-header .header-badge-count {
  right: auto;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-divider {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--ui-border);
}

/* user chip: same 44px frame as the other controls; round avatar with a soft theme ring,
   name on top, role underneath in small muted text, chevron centred */
body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-dropdown-toggle {
  gap: 10px !important;
  padding: 0 12px 0 5px !important;
  padding-inline: 5px 12px !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-avatar {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 50% !important;
  -o-object-fit: cover;
     object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 3px color-mix(in srgb, var(--theme-primary-500) 35%, transparent);
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-meta {
  gap: 3px;
  min-width: 0;
  line-height: 1.1;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-username {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-role {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ui-text-muted) !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-chevron {
  margin-inline-start: 2px !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.module-name, .user-username, .header-cache-btn span) {
  color: var(--ui-text) !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-lang-icon {
  width: 20px !important;
  height: 20px !important;
}

/* dark mode: the muted surface equals the header colour, so tint the controls lightly instead */
body.theme-dark .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector, .lang-selector, .user-dropdown-toggle) {
  background: color-mix(in srgb, var(--theme-neutral-50) 6%, transparent) !important;
  border-color: var(--ui-border-strong) !important;
}

body.theme-dark .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector, .lang-selector, .user-dropdown-toggle) {
  color: var(--theme-neutral-300) !important;
}

body.theme-dark .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector, .lang-selector, .user-dropdown-toggle):hover {
  color: var(--theme-primary-400) !important;
}

/* Header icon glyphs: icon fonts sit on a text baseline (Bootstrap Icons shift ::before by -0.125em),
   which drops the glyph ~2px below the button centre. Give every icon a 20x20 box and no baseline shift. */
body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-icon-btn > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 1 !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-icon-btn > i::before {
  display: block;
  line-height: 1 !important;
  vertical-align: 0 !important;
}

/* "Per page" select in list footers (BootstrapVue size="sm"): one look in light and dark.
   custom-select-sm has no light-mode styles of its own, so it rendered bare (no side padding, the
   chevron over the number). Same height as the pagination buttons beside it (Rule 5b).
   .figma-table-footer is doubled to outrank the older dark-only .custom-select-sm rule. */
body:is(.theme-light, .theme-dark) :is(.figma-table-footer.figma-table-footer, .dash-pager.dash-pager) select {
  height: var(--ui-control-h) !important;
  min-width: 72px;
  width: auto !important;
  padding: 0 32px 0 12px !important;
  padding-inline: 12px 32px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background-color: var(--ui-surface) !important;
  background-position: right 10px center !important;
  color: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1 !important;
  cursor: pointer;
}

.rtl :is(.figma-table-footer, .dash-pager) select {
  background-position: left 10px center !important;
}

/* ==========================================================================
   Module icon (components/ModuleIcon.vue): uploaded module icon drawn in the theme colour
   (the image is a mask; its shape is filled with the primary shade)
   ========================================================================== */
.module-icon-mask {
  display: inline-block;
  flex: none;
  width: var(--mi-size, 22px);
  height: var(--mi-size, 22px);
  background-color: var(--theme-primary-600);
  -webkit-mask: var(--mi-url) center/contain no-repeat;
  mask: var(--mi-url) center/contain no-repeat;
}

body.theme-dark .module-icon-mask {
  background-color: var(--theme-primary-400);
}

/* ==========================================================================
   Segmented toggle: radio options as one joined control (e.g. Approved | Not-Approved)
   <div class="btn-group btn-group-toggle segmented-toggle"> + <label class="btn"> per option,
   selected option btn-success / btn-danger / btn-primary, others btn-outline-secondary.
   Same height for every option, rounded outer corners only (joined by .btn-group-toggle).
   ========================================================================== */
.segmented-toggle {
  display: inline-flex;
  align-items: stretch;
}

.segmented-toggle > .btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ui-control-h) !important;
  min-height: var(--ui-control-h);
  margin: 0 !important;
  padding: 0 16px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
}

/* the radio stays usable (label click) but is not drawn; the fill shows the choice */
.segmented-toggle > .btn input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.segmented-toggle > .btn.btn-outline-secondary {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text-muted) !important;
}

.segmented-toggle > .btn.btn-outline-secondary:hover {
  background: var(--ui-surface-muted) !important;
  color: var(--ui-text) !important;
}

/* the selected option is filled with the theme primary colour (whatever option it is),
   and its border sits on top of its neighbour's */
.segmented-toggle > .btn:not(.btn-outline-secondary) {
  z-index: 1;
  background: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
  color: var(--theme-neutral-50) !important;
}

.segmented-toggle > .btn:not(.btn-outline-secondary):hover {
  background: var(--theme-primary-600) !important;
  border-color: var(--theme-primary-600) !important;
}

/* ==========================================================================
   Icon tile: a small icon on a tint of its own colour (status lists, settings rows, …)
   <span class="icon-tile tone-success"><i class="fa fa-check"></i></span>
   tones: primary, info, success, warn, error
   ========================================================================== */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--ui-radius);
  font-size: 13px;
  color: var(--icon-tone);
  background: color-mix(in srgb, var(--icon-tone) 14%, transparent);
}

.icon-tile.tone-primary {
  --icon-tone: var(--theme-primary-600);
}

.icon-tile.tone-info {
  --icon-tone: var(--theme-info-600);
}

.icon-tile.tone-success {
  --icon-tone: var(--theme-success-600);
}

.icon-tile.tone-warn {
  --icon-tone: var(--theme-warn-600);
}

.icon-tile.tone-error {
  --icon-tone: var(--theme-error-600);
}

/* dark mode: brighter shades, and the global dark text reset must not repaint the icon */
body.theme-dark .icon-tile.tone-primary {
  --icon-tone: var(--theme-primary-400);
}

body.theme-dark .icon-tile.tone-info {
  --icon-tone: var(--theme-info-400);
}

body.theme-dark .icon-tile.tone-success {
  --icon-tone: var(--theme-success-400);
}

body.theme-dark .icon-tile.tone-warn {
  --icon-tone: var(--theme-warn-400);
}

body.theme-dark .icon-tile.tone-error {
  --icon-tone: var(--theme-error-400);
}

body.theme-dark .icon-tile,
body.theme-dark .icon-tile i {
  color: var(--icon-tone) !important;
}

/* ==========================================================================
   Mobile / tablet (< 1200px): the slide-in sidebar and its backdrop go over the sticky header
   (header 1040 < backdrop 1043 < sidebar 1045 < announcement banner 1051 / dialogs)
   ========================================================================== */
@media (max-width: 1199.98px) {
  .sidebar-backdrop {
    z-index: 1043 !important;
  }

  #sidebar .sidebar-wrapper {
    z-index: 1045 !important;
  }
}
/* Phones: header controls fit one line without overlapping — Clear Cache and the module selector
   become icon-only, controls shrink a little and the gaps tighten. */
@media (max-width: 575.98px) {
  body:is(.theme-light, .theme-dark) .figma-header.figma-header .container-fluid {
    padding-inline: 12px !important;
    gap: 6px;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-right, .container-fluid > .d-flex) {
    gap: 6px !important;
    min-width: 0;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector, .user-dropdown-toggle) {
    height: 38px !important;
    min-height: 38px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-icon-btn {
    width: 38px !important;
    min-width: 38px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-cache-btn {
    width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-cache-btn span,
body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.module-name, .module-chevron, .user-chevron) {
    display: none !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .module-selector {
    width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .module-selector .module-icon {
    margin: 0 !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-dropdown-toggle {
    padding: 0 3px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-divider {
    display: none !important;
  }
}
/* ==========================================================================
   Command palette (components/CommandPalette.vue) — Ctrl+K / ⌘K quick search
   ========================================================================== */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: color-mix(in srgb, var(--theme-neutral-950) 45%, transparent);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.cmdk__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 70vh;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-lg);
  font-family: var(--ui-font);
}

.cmdk__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-border);
}

.cmdk__search-icon {
  font-size: 18px;
  color: var(--ui-text-muted);
}

.cmdk__input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ui-text);
  font-size: 16px;
}

.cmdk__input::-moz-placeholder {
  color: var(--ui-text-subtle);
}

.cmdk__input::placeholder {
  color: var(--ui-text-subtle);
}

/* The palette's search row is its own frame: the global dark-mode "input[type=text]:focus" rule
   (border + glow + fill) must not draw a second box around the input */
body .cmdk .cmdk__input,
body .cmdk .cmdk__input:focus,
body.theme-dark .cmdk .cmdk__input:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: 0 !important;
}

.cmdk__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.cmdk__group {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}

.cmdk__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ui-text);
  text-align: start;
  cursor: pointer;
}

.cmdk__item.is-active {
  background: var(--ui-primary-soft);
}

.cmdk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--ui-radius);
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-size: 15px;
}

.cmdk__item.is-active .cmdk__icon {
  background: var(--theme-primary-500);
  color: var(--theme-neutral-50);
}

.cmdk__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cmdk__title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk__enter {
  font-size: 14px;
  color: var(--ui-text-subtle);
  opacity: 0;
}

.cmdk__item.is-active .cmdk__enter {
  opacity: 1;
}

.cmdk__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  color: var(--ui-text-muted);
}

.cmdk__empty i {
  font-size: 24px;
}

.cmdk__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--ui-border);
  font-size: 12px;
  color: var(--ui-text-muted);
}

.cmdk kbd,
.header-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-end: 2px;
  padding: 0 5px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}

/* dark mode: the global dark text reset would whiten these */
body.theme-dark .cmdk :is(.cmdk__title, .cmdk__input) {
  color: var(--ui-text) !important;
}

body.theme-dark .cmdk :is(.cmdk__group, .cmdk__foot, .cmdk__foot span, .cmdk__empty span) {
  color: var(--ui-text-muted) !important;
}

body.theme-dark .cmdk__item.is-active .cmdk__icon i {
  color: var(--theme-neutral-50) !important;
}

/* header trigger: same frame as Clear Cache, with the shortcut hint */
body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-search-btn {
  gap: 8px !important;
  min-width: 170px;
  justify-content: flex-start !important;
  color: var(--ui-text-muted) !important;
}

body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-search-btn .header-search-kbd {
  margin-inline-start: auto;
}

@media (max-width: 991.98px) {
  body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-search-btn {
    min-width: 0;
  }

  .header-search-kbd {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  .cmdk {
    padding: 8px;
    align-items: stretch;
  }

  .cmdk__panel {
    max-height: none;
  }

  .cmdk__foot {
    display: none;
  }
}
/* Phones: header controls never shrink below their size (the module button was squeezed to 6px
   and its icon spilled over its neighbour); the search button is icon-only and centred. */
@media (max-width: 575.98px) {
  body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .header-module, .module-selector, .header-notification, .header-user, .user-dropdown-toggle) {
    flex: none !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .header-search-btn {
    justify-content: center !important;
    min-width: 0 !important;
  }
}
/* Narrow phones (< 400px, e.g. 320–375px): slightly smaller controls and gaps so all seven fit */
@media (max-width: 399.98px) {
  body:is(.theme-light, .theme-dark) .figma-header.figma-header .container-fluid {
    padding-inline: 8px !important;
    gap: 4px;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-right, .container-fluid > .d-flex) {
    gap: 4px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector, .user-dropdown-toggle) {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn, .module-selector) {
    width: 34px !important;
    min-width: 34px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header :is(.header-icon-btn, .header-cache-btn) :is(i, svg) {
    font-size: 16px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .module-icon {
    width: 18px !important;
    height: 18px !important;
  }

  body:is(.theme-light, .theme-dark) .figma-header.figma-header .user-avatar {
    width: 26px !important;
    height: 26px !important;
  }
}
/* Sidebar logo: show the logo at its real size (the old 10px padding inside a 40px box shrank it to
   ~20px tall) and close the gap between the logo and the first section title. */
#sidebar .sidebar-header {
  padding: 16px 20px 6px !important;
}

#sidebar .sidebar-header .container-logo {
  height: auto !important;
  max-height: 46px !important;
  max-width: 200px;
  padding: 0 !important;
}

#sidebar .sidebar-menu {
  margin-top: 0 !important;
}

#sidebar .sidebar-menu .menu {
  margin-top: 0 !important;
}

#sidebar .sidebar-menu .menu > .sidebar-title:first-child,
#sidebar .sidebar-menu .menu > li:first-child.sidebar-title {
  margin-top: 6px !important;
  padding-top: 8px !important;
}

/* A menu that starts straight with a link (no section title above it - e.g. the delivery boy panel)
   would sit right under the logo; give it the room a title would have given. */
#sidebar .sidebar-menu .menu > li.sidebar-item:first-child {
  margin-top: 16px !important;
}

/* Sidebar alignment: the base template adds 1rem before every label; the flex gap already spaces
   icon and label, so without it parent labels and submenu labels line up. Submenus have no box of
   their own in dark mode either (the guide line marks them). */
#sidebar .sidebar-link > span:not(.pending-dot) {
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar .sidebar-item .submenu,
body.theme-dark #sidebar .sidebar-item .submenu {
  background: transparent !important;
}

/* active-submenu marker sits on the guide line (left in LTR, right in RTL) */
#sidebar .submenu .submenu-item a::before {
  left: -14px !important;
  right: auto !important;
}

.rtl #sidebar .submenu .submenu-item a::before {
  left: auto !important;
  right: -14px !important;
}

/* Mobile / tablet: the slide-in sidebar stays fixed while the page scrolls and fills the screen below
   the announcement banner (an older rule made it position:absolute, so it scrolled away with the page). */
@media (max-width: 1199.98px) {
  html body #sidebar .sidebar-wrapper {
    position: fixed !important;
    top: var(--banner-h, 0px) !important;
    bottom: 0 !important;
    height: calc(100dvh - var(--banner-h, 0px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}
/* ==========================================================================
   File inputs (<input type="file" class="form-control">): the "Choose File" button is a themed
   segment flush inside the field, following the field's radius, in light and dark mode.
   ========================================================================== */
/* repeated class outranks the global ".form-control:not(…):not(…):not(…)" padding rule */
input[type=file].form-control.form-control.form-control {
  height: var(--ui-control-h) !important;
  min-height: var(--ui-control-h) !important;
  padding: 0 !important;
  padding-inline-end: 8px !important;
  overflow: hidden;
  font-size: 13px !important;
  /* "No file chosen" must fit beside the button in narrow fields */
  line-height: calc(var(--ui-control-h) - 2px) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text-muted) !important;
  cursor: pointer;
}

/* each pseudo-element in its own rule: a list mixing ::file-selector-button and
   ::-webkit-file-upload-button is dropped by the build / some browsers as a whole */
input[type=file].form-control::file-selector-button {
  height: 100%;
  margin: 0;
  margin-inline-end: 8px;
  padding: 0 12px;
  border: 0;
  border-inline-end: 1px solid var(--ui-border-strong);
  border-radius: 0;
  background: var(--ui-surface-muted);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

input[type=file].form-control:hover::file-selector-button {
  background: var(--ui-primary-soft);
  color: var(--theme-primary-700);
}

body.theme-dark input[type=file].form-control::file-selector-button {
  background: color-mix(in srgb, var(--theme-neutral-50) 8%, transparent);
  color: var(--ui-text);
}

body.theme-dark input[type=file].form-control:hover::file-selector-button {
  background: color-mix(in srgb, var(--theme-primary-500) 22%, transparent);
  color: var(--theme-primary-300);
}

input[type=file].form-control::-webkit-file-upload-button {
  height: 100%;
  margin: 0;
  margin-inline-end: 8px;
  padding: 0 12px;
  border: 0;
  border-inline-end: 1px solid var(--ui-border-strong);
  border-radius: 0;
  background: var(--ui-surface-muted);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background-color 0.15s ease, color 0.15s ease;
  transition: background-color 0.15s ease, color 0.15s ease;
}

input[type=file].form-control:hover::-webkit-file-upload-button {
  background: var(--ui-primary-soft);
  color: var(--theme-primary-700);
}

body.theme-dark input[type=file].form-control::-webkit-file-upload-button {
  background: color-mix(in srgb, var(--theme-neutral-50) 8%, transparent);
  color: var(--ui-text);
}

body.theme-dark input[type=file].form-control:hover::-webkit-file-upload-button {
  background: color-mix(in srgb, var(--theme-primary-500) 22%, transparent);
  color: var(--theme-primary-300);
}

/* "Add current location" button next to a location search box (EditSeller, SellerDetails).
   The inline SVG is 48px, which made the button wider than the free space on a phone and pushed it
   under the input. Fixed square button with a 22px icon, kept on the same line as the input. */
.input-group:has(> .search_location_btn) {
  flex-wrap: nowrap;
}

.input-group > .search_location_btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-control-h, 40px);
  min-width: var(--ui-control-h, 40px);
  height: var(--ui-control-h, 40px);
  padding: 0;
}

.input-group > .search_location_btn svg {
  width: 22px;
  height: 22px;
}

/* Google Maps error panel ("Oops! Something went wrong." when the key / API is not set up).
   Google paints it with a fixed light-grey background and white text (unreadable), so it is
   restyled from the theme tokens and follows light / dark mode. */
.gm-err-container {
  background: var(--ui-surface-muted) !important;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}

.gm-err-container .gm-err-title {
  color: var(--ui-heading) !important;
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
}

.gm-err-container .gm-err-message {
  color: var(--ui-text-muted) !important;
  font-family: var(--ui-font) !important;
}

.gm-err-container .gm-err-icon img {
  filter: grayscale(1);
  opacity: 0.7;
}

/* ==========================================================================
   List toolbar: every control (buttons, "Select All" label, grid/list toggle, dropdowns,
   re-order switch) shares one 38px height and one centred baseline, on every list page.
   ========================================================================== */
#main .figma-action-bar-row > .d-flex:not(:has(.figma-search-container)),
#main .figma-action-bar-row > div:last-child:not(:has(.figma-search-container)) {
  align-items: center !important;
}

#main .figma-action-bar-row .btn,
#main .figma-action-bar-row label.btn,
#main .figma-action-bar-row .btn-figma-filter,
#main .figma-action-bar-row .btn-figma-columns,
#main .figma-action-bar-row .btn-figma-action,
#main .figma-action-bar-row .b-dropdown > .btn,
#main .figma-action-bar-row .view-toggle,
#main .figma-action-bar-row .reorder-toggle {
  box-sizing: border-box !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  align-self: center !important;
  line-height: 1 !important;
  white-space: nowrap;
}

#main .figma-action-bar-row .btn,
#main .figma-action-bar-row label.btn,
#main .figma-action-bar-row .btn-figma-filter,
#main .figma-action-bar-row .btn-figma-columns,
#main .figma-action-bar-row .btn-figma-action {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#main .figma-action-bar-row .b-dropdown,
#main .figma-action-bar-row .column-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

#main .figma-action-bar-row .view-toggle {
  align-items: stretch !important;
}

#main .figma-action-bar-row .view-toggle-btn {
  height: 100% !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Multiselect dropdowns hang below their card: keep the card that holds the open one above the
   cards that follow it, so the whole option list shows instead of just the first row. */
.card:has(.multiselect--active),
.figma-main-section-card:has(.multiselect--active),
.card:focus-within {
  position: relative;
  z-index: 30;
}

.multiselect--active {
  z-index: 50;
}

/* Multi-select tags (e.g. several cities): the tags box grows with its content and the tags wrap
   inside it instead of running out of the field over the neighbouring controls. */
.multiselect__tags {
  flex-wrap: wrap !important;
  height: auto !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.multiselect__tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.multiselect__tags-wrap .multiselect__tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 !important;
  padding: 4px 26px 4px 10px !important;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.multiselect__tags-wrap .multiselect__tag-icon {
  top: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.multiselect__tags .multiselect__input {
  flex: 1 1 80px;
  width: auto !important;
  min-width: 80px;
  margin: 0 !important;
}

/* Multi-select with tags: the search input flows after the last tag (never over it), and the
   "Select and Search" placeholder is hidden once something is selected. */
.multiselect__tags .multiselect__input {
  position: static !important;
  background: transparent !important;
  align-self: center;
}

.multiselect__tags:has(.multiselect__tag) .multiselect__placeholder {
  display: none !important;
}

.multiselect__tags:has(.multiselect__tag) .multiselect__input::-moz-placeholder {
  color: transparent !important;
}

.multiselect__tags:has(.multiselect__tag) .multiselect__input::placeholder {
  color: transparent !important;
}

/* Approve / Reject buttons in grid-card footers (seller, delivery boy, fleet requests): always one
   row, equal width and height, icon and label centred on the same line. */
.item-card-footer.request-card-footer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.item-card-footer.request-card-footer .request-card-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap;
  box-sizing: border-box;
}

.item-card-footer.request-card-footer .request-card-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 14px;
}

/* HTML info tooltips (seller / store / other info chips): solid dark panel with a clean label/value
   table. The global table styles gave the label column its own black cells and the value column a
   transparent one, so the text underneath showed through. */
.tooltip .tooltip-inner {
  max-width: 360px;
  padding: 10px 14px;
  text-align: start;
  background-color: var(--theme-neutral-900, #111827) !important;
  color: var(--theme-neutral-50, #ffffff) !important;
  opacity: 1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.tooltip .tooltip-inner .table {
  background: transparent !important;
  color: inherit !important;
  margin: 6px 0 0 !important;
  width: 100%;
}

.tooltip .tooltip-inner .table th,
.tooltip .tooltip-inner .table td {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  border: 0 !important;
  padding: 3px 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: start !important;
  text-transform: none !important;
  vertical-align: top;
}

.tooltip .tooltip-inner .table th {
  width: 1%;
  white-space: nowrap;
  padding-right: 6px !important;
  font-weight: 600 !important;
  color: var(--theme-neutral-300, #d1d5db) !important;
}

.tooltip .tooltip-inner .table td {
  word-break: break-word;
}

.tooltip .tooltip-inner .table tr {
  background: transparent !important;
  border: 0 !important;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
  border-top-color: var(--theme-neutral-900, #111827) !important;
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  border-bottom-color: var(--theme-neutral-900, #111827) !important;
}

/* ==========================================================================
   Dark mode: toggle switches. The earlier rule blanked the knob image on OFF switches
   (--bs-form-switch-bg: none), so an OFF switch was an empty dark pill. Give every switch a visible
   knob: light grey on the muted track when off, white on the primary track when on.
   ========================================================================== */
body.theme-dark .form-switch .form-check-input,
body.theme-dark .form-switch .form-check-input:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a3a3a3'/%3e%3c/svg%3e");
  background-image: var(--bs-form-switch-bg) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  background-color: var(--theme-neutral-700, #404040) !important;
  border: 1px solid var(--theme-neutral-500, #737373) !important;
  box-shadow: none !important;
  transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

body.theme-dark .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  background-image: var(--bs-form-switch-bg) !important;
  background-position: right center !important;
  background-color: var(--theme-primary-500) !important;
  border-color: var(--theme-primary-500) !important;
}

body.theme-dark .form-switch .form-check-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-primary-500) 55%, transparent);
  outline-offset: 2px;
}

body.theme-dark .form-switch .form-check-input:disabled {
  opacity: 0.5;
}

/* Grid-card footer status area (e.g. Manage Sellers): the status pill and the availability toggle sit
   on one row, vertically centred on the same line. */
.item-card-footer > .d-flex:first-child {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.item-card-footer > .d-flex:first-child .figma-status-pill {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin: 0;
}

.item-card-footer .figma-hover-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

.item-card-footer .figma-hover-light .btn {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  border: 0;
}

.item-card-footer .figma-hover-light .btn i {
  display: inline-flex;
  line-height: 1;
  vertical-align: middle;
}

/* Dark mode: --ui-border equals the card surface (neutral-800), so borders that use it vanish.
   Delivery boy dashboard: Balance / Cash In Hand tiles, order-status rows and table footer use the
   stronger border colour so their outlines stay visible. */
body.theme-dark .db-wallet-tile {
  border: 1px solid var(--ui-border-strong) !important;
  background: var(--theme-neutral-900, var(--ui-surface-muted)) !important;
}

body.theme-dark .db-status-row {
  border-bottom-color: var(--ui-border-strong) !important;
}

body.theme-dark .db-status-row:last-child {
  border-bottom-color: transparent !important;
}

body.theme-dark .db-table-footer {
  border-top-color: var(--ui-border-strong) !important;
}

/* Leaflet map zoom (+ / -) and attribution in dark mode: the app's dark link/text colours made the
   symbols white on a white control, so they were invisible. Give the controls a dark surface with
   light symbols. */
body.theme-dark .leaflet-bar,
body.theme-dark .leaflet-touch .leaflet-bar {
  border: 1px solid var(--theme-neutral-600, #5c5c5c) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

body.theme-dark .leaflet-bar a,
body.theme-dark .leaflet-bar a:hover {
  background-color: var(--theme-neutral-900, #1c1c1c) !important;
  color: var(--theme-neutral-50, #ffffff) !important;
  border-bottom: 1px solid var(--theme-neutral-700, #414141) !important;
}

body.theme-dark .leaflet-bar a:hover {
  background-color: var(--theme-neutral-700, #414141) !important;
}

body.theme-dark .leaflet-bar a.leaflet-disabled {
  background-color: var(--theme-neutral-800, #2b2b2b) !important;
  color: var(--theme-neutral-500, #9e9e9e) !important;
  cursor: default;
}

body.theme-dark .leaflet-control-attribution {
  background: rgba(20, 20, 20, 0.75) !important;
  color: var(--theme-neutral-300, #d1d1d1) !important;
}

body.theme-dark .leaflet-control-attribution a {
  color: var(--theme-primary-400, var(--theme-primary-500)) !important;
}

/* Delivery boy dashboard KPI tiles on phones: two per row, but a lone last tile (Balance) takes the
   full row so its value is not cut off; on very narrow phones every tile gets its own row. */
@media (max-width: 575.98px) {
  .row > .db-kpi-col--wide:has(> .figma-kpi-card-v2) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 399.98px) {
  .row > .db-kpi-col:has(> .figma-kpi-card-v2) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .db-kpi-col .figma-stat-label,
.db-kpi-col .figma-stat-value {
    white-space: normal;
  }
}
/* KPI tiles that must not be squeezed on phones (long labels / amounts): one tile per full-width row,
   overriding the global "two per row" phone rule. */
@media (max-width: 575.98px) {
  .row > .kpi-col-full-phone:has(> .figma-kpi-card-v2) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .kpi-col-full-phone .figma-stat-label,
.kpi-col-full-phone .figma-stat-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
/* "Per page" selects sized to their content (class w-auto): the box shrank below the width of the
   number plus the chevron, so the value ran under the arrow ("1 0" / "2" overlapping). Keep a
   minimum width and room on the right for the arrow. */
select.form-select.w-auto,
select.custom-select.w-auto,
select.form-control.w-auto {
  min-width: 76px;
  padding-right: 32px !important;
  text-overflow: clip;
}

@media (max-width: 575.98px) {
  select.form-select.w-auto,
select.custom-select.w-auto,
select.form-control.w-auto {
    min-width: 80px;
  }
}