:root,
html:root {
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --body-font-size: 14px;

  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F5F6F8;
  --color-background-tertiary:  #ECEEF1;
  --color-background-info:      #E6F1FB;
  --color-background-success:   #EAF3DE;
  --color-background-warning:   #FAEEDA;
  --color-background-danger:    #FCEBEB;
  --color-background-error:     var(--color-background-danger);

  --color-text-primary:    #1F2328;
  --color-text-secondary:  #6B7280;
  --color-text-tertiary:   #9AA3AE;
  --color-text-info:       #185FA5;
  --color-text-success:    #3B6D11;
  --color-text-warning:    #854F0B;
  --color-text-danger:     #A32D2D;
  --color-text-error:      var(--color-text-danger);
  --color-text-inverse:    #FFFFFF;

  --color-border-primary:   #D8DCE2;
  --color-border-secondary: #E1E4E9;
  --color-border-tertiary:  #ECEEF1;

  --accent-blue:    #378ADD;
  --accent-teal:    #1D9E75;
  --accent-green:   #639922;
  --accent-amber:   #EF9F27;
  --accent-red:     #E24B4A;

  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-xl: 14px;
  --control-height:    34px;
  --control-height-xs: 26px;
  --control-height-sm: 30px;
  --control-height-lg: 40px;

  --control-min-height:           34px;
  --control-line-height:          28px;
  --control-padding-y:            4px;
  --control-padding-x:            8px;
  --button-padding-x:             10px;
  --control-icon-size:            14px;
  --control-border-radius:        4px;
  --select2-arrow-height:         30px;
  --select2-rendered-line-height: 32px;
  --switch-height:                23px;
  --switch-width:                 48px;
  --switch-knob-size:             18px;
  --switch-knob-offset:           3px;
  --switch-knob-translate:        24px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
  --primary-color:   #1F2328;
  --secondary-color: #FFFFFF;
  --body-color:      #F5F6F8;
  --sidebar-text:    #1F2328;
}

html.dark-mode,
html.dark_mode,
body.dark-mode {
  --color-background-primary:   #15171B;
  --color-background-secondary: #1C1F24;
  --color-background-tertiary:  #23272E;
  --color-background-info:      #1B2C42;
  --color-background-success:   #1F2D17;
  --color-background-warning:   #3B2A12;
  --color-background-danger:    #3B1B1B;

  --color-text-primary:   #E6E8EC;
  --color-text-secondary: #9AA3AE;
  --color-text-tertiary:  #6B7280;
  --color-text-info:      #7DB7EA;
  --color-text-success:   #9EC471;
  --color-text-warning:   #E8B665;
  --color-text-danger:    #ED7C7B;

  --color-border-primary:   #2A2E36;
  --color-border-secondary: #23272E;
  --color-border-tertiary:  #1C1F24;
  --primary-color:   var(--color-text-primary) !important;
  --secondary-color: #15171B;
  --body-color:      #15171B;
}


html,
body {
  font-family: var(--font-sans) !important;
  font-size: var(--body-font-size);
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.box-title,
.content-header h1 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.015em;
}
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
small, .small { color: var(--color-text-secondary); }

a { color: var(--color-text-info); transition: color .15s ease; }
a:hover { color: color-mix(in srgb, var(--color-text-info) 80%, black 20%); text-decoration: none; }

::selection { background: var(--color-background-info); color: var(--color-text-info); }

*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: var(--color-border-primary); border-radius: 8px; border: 2px solid var(--color-background-secondary); }
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

.container.grid,
.container { background: var(--color-background-secondary) !important; }

.content-wrapper,
.main-container,
.card-wrapper,
.setting-card-wrapper {
  background: transparent !important;
  padding: 0 !important;
}
.card-wrapper,
.setting-card-wrapper {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 18px 20px !important;
  box-shadow: var(--shadow-xs);
}

.main-header,
.main-header .navbar,
.main-header .navbar-static-top,
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: none !important;
  min-height: 52px !important;
  height: auto !important;
}
.main-header .logo,
.skin-blue-light .main-header .logo {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.main-header .navbar .nav > li > a {
  color: var(--color-text-secondary) !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}

.main-sidebar,
.skin-blue .main-sidebar,
.skin-blue-light .main-sidebar {
  background: var(--color-background-primary) !important;
  border-right: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: none !important;
}
.main-sidebar .top,
.main-sidebar .logo {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.main-sidebar .sidebar,
.sidebar-menu {
  background: var(--color-background-primary) !important;
}
.sidebar-menu > li > a,
.main-sidebar .links li a,
.main-sidebar .sidebar a {
  color: var(--color-text-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: background .15s ease, color .15s ease !important;
}
.sidebar-menu > li > a i,
.main-sidebar .links li a i,
.main-sidebar .sidebar a i {
  color: var(--color-text-tertiary) !important;
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus,
.main-sidebar .links li a:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.sidebar-menu > li:hover > a i,
.main-sidebar .links li a:hover i {
  color: var(--color-text-primary) !important;
}
.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a:hover,
.sidebar-menu > li.menu-open > a,
.main-sidebar .links li.active > a,
.main-sidebar .links li.menu-open > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  border-left: 2px solid var(--color-text-primary) !important;
}
.sidebar-menu > li.active > a i,
.main-sidebar .links li.active > a i {
  color: var(--color-text-primary) !important;
}
.sidebar-menu .treeview-menu {
  background: transparent !important;
  padding-left: 14px !important;
}
.sidebar-menu .treeview-menu > li > a {
  font-size: 12.5px !important;
  color: var(--color-text-secondary) !important;
}

.content,
section.content { background: transparent !important; padding: 0 !important; }

.horizontal-scroll {
  border-bottom: 0.5px solid var(--color-border-tertiary);
  margin-bottom: 14px !important;
}
.horizontal-scroll a,
.horizontal-scroll .nav-tabs > li > a {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  padding: 7px 12px !important;
  border-radius: var(--border-radius-md) !important;
  border: none !important;
  background: transparent !important;
  transition: background .15s ease, color .15s ease;
}
.horizontal-scroll a.active,
.horizontal-scroll a.active-top,
.horizontal-scroll .nav-tabs > li.active > a,
.horizontal-scroll .nav-tabs > li.active > a:hover,
.horizontal-scroll .nav-tabs > li.active > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  border-bottom: 2px solid var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
}
.horizontal-scroll a:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }

.overview-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.overview-filter .title h1 { font-size: 18px !important; font-weight: 600 !important; margin: 0 0 2px 0 !important; }
.overview-filter .title p  { font-size: 12.5px !important; color: var(--color-text-secondary) !important; margin: 0 !important; }
.overview-filter .filter,
.overview-filter .filter-options,
.overview-filter .new-user { display: inline-flex; gap: 8px; align-items: center; }

.btn,
button.btn,
input[type=submit].btn,
.add-user-modal-btn,
.max-add-btn,
.table-action-btn {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: var(--control-padding-y) var(--button-padding-x) !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  line-height: 1.4 !important;
  text-transform: none !important;
  justify-content: center;
}
.btn:hover, button.btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}
.btn:focus, .btn:active, .btn:active:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 20%, transparent) !important;
}

.btn-primary,
.btn-info,
.add-user-modal-btn,
.max-add-btn {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.btn-primary:hover, .btn-info:hover {
  background: color-mix(in srgb, var(--color-background-info) 70%, var(--color-text-info) 15%) !important;
  color: var(--color-text-info) !important;
}

.btn-success { background: var(--color-background-success) !important; color: var(--color-text-success) !important; border-color: transparent !important; }
.btn-warning { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; border-color: transparent !important; }
.btn-danger,
.table-action-delete-btn,
.btn-destructive { background: var(--color-background-danger) !important; color: var(--color-text-danger) !important; border-color: transparent !important; }
.btn-default { background: var(--color-background-primary) !important; color: var(--color-text-primary) !important; }

.btn-link { background: transparent !important; border: none !important; color: var(--color-text-info) !important; padding: 4px 6px !important; }

.btn-xs, .btn-sm { padding: 4px 9px !important; font-size: 11.5px !important; }
.btn-lg { padding: 9px 18px !important; font-size: 13.5px !important; }

.btn-group .btn { box-shadow: none !important; }
.btn-group > .btn:not(:last-child),
.btn-group > .btn:not(:first-child) { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-top-left-radius: var(--border-radius-md) !important; border-bottom-left-radius: var(--border-radius-md) !important; }
.btn-group > .btn:last-child  { border-top-right-radius: var(--border-radius-md) !important; border-bottom-right-radius: var(--border-radius-md) !important; }

.box,
.info-box,
.card,
.panel {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}
.box.box-solid,
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
  border-top: 0.5px solid var(--color-border-tertiary) !important;
}
.box-header,
.panel-heading {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 12px 16px !important;
  color: var(--color-text-primary) !important;
}
.box-header .box-title,
.panel-heading .panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.box-body,
.panel-body { padding: 14px 16px !important; }
.box-footer,
.panel-footer {
  background: var(--color-background-primary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 16px !important;
}

.table-responsive,
.dataTables_wrapper {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-background-primary);
}
.table-responsive {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper {
  overflow: hidden;
}
table,
.table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  background: var(--color-background-primary) !important;
  margin: 0 !important;
}
.table > thead > tr > th,
.table > thead > tr,
thead tr,
thead th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-top: none !important;
  padding: 9px 12px !important;
  text-align: left !important;
}
.table > tbody > tr > td,
.table > tfoot > tr > td,
table td {
  padding: 9px 12px !important;
  color: var(--color-text-primary) !important;
  border-top: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  vertical-align: middle !important;
}
.table > tbody > tr > th,
.table > tfoot > tr > th,
table tbody th,
table tfoot th {
  padding: 9px 12px !important;
  color: var(--color-text-primary) !important;
  border-top: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  vertical-align: middle !important;
}
.table > tbody > tr:last-child > td { border-bottom: none !important; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: none !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--color-background-primary) !important; }
.table-striped > tbody > tr:nth-of-type(even) { background: color-mix(in srgb, var(--color-background-secondary) 50%, var(--color-background-primary) 50%) !important; }
.table-hover > tbody > tr:hover { background: var(--color-background-secondary) !important; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--border-radius-md) !important;
  margin: 0 2px !important;
  font-size: 12px !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_info { font-size: 12px; color: var(--color-text-secondary); padding: 10px 12px; }

.form-control,
.form-select,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=search],
input[type=tel],
input[type=url],
textarea,
select {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: var(--body-font-size) !important;
  padding: var(--control-padding-y) var(--control-padding-x) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-text-info) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--color-text-tertiary) !important; }
label, .control-label {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 4px !important;
}
.input-group-addon,
.input-group-text {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 12.5px !important;
  border-radius: var(--border-radius-md) !important;
}

input[type=checkbox],
input[type=radio] { accent-color: var(--color-text-primary); }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  min-height: var(--control-min-height) !important;
  padding: var(--control-padding-y) var(--control-padding-x) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text-primary) !important;
  line-height: var(--select2-rendered-line-height) !important;
  padding-left: var(--control-padding-x) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--select2-arrow-height) !important; }
.select2-dropdown {
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--color-background-primary) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 8px !important;
}

.badge,
.label {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  display: inline-block;
  line-height: 1.5;
}
.label-primary, .badge-primary,
.label-info,    .badge-info     { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.label-success, .badge-success  { background: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.label-warning, .badge-warning  { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.label-danger,  .badge-danger,
.label-important { background: var(--color-background-danger) !important;  color: var(--color-text-danger) !important; }
.label-default, .badge-default,
.badge-gray { background: var(--color-background-secondary) !important; color: var(--color-text-secondary) !important; }

.status-pill,
.pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border-secondary);
}

.stat-grid,
.pstat-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.stat-card,
.pstat-card {
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px 14px !important;
  border-left: 3px solid var(--color-border-primary) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card p,
.pstat-card .lbl {
  font-size: 11px !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 2px !important;
}
.stat-card .val,
.pstat-card .val {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}
.stat-card.warning, .pstat-card.amber, .pstat-card.warning { border-left-color: var(--accent-amber) !important; }
.stat-card.blue,    .pstat-card.cyan,  .pstat-card.blue    { border-left-color: var(--accent-blue)  !important; }
.stat-card.teal,    .pstat-card.teal                         { border-left-color: var(--accent-teal)  !important; }
.stat-card.green,   .pstat-card.green                        { border-left-color: var(--accent-green) !important; }
.stat-card.red,     .pstat-card.red, .pstat-card.danger      { border-left-color: var(--accent-red)   !important; }

.nav-tabs {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  margin-bottom: 18px;
}
.nav-tabs > li > a {
  font-size: 12.5px !important;
  padding: 8px 14px !important;
  border: none !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border-radius: 0 !important;
  margin-right: 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s ease;
}
.nav-tabs > li > a:hover { color: var(--color-text-primary) !important; background: transparent !important; border-color: transparent !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid var(--color-text-primary) !important;
  background: transparent !important;
}

.modal-content {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  padding: 14px 18px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  background: var(--color-background-primary) !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.modal-body { padding: 16px 18px !important; background: var(--color-background-primary) !important; }
.modal-footer {
  padding: 12px 18px !important;
  background: var(--color-background-primary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
}
.close { color: var(--color-text-secondary) !important; opacity: 0.8 !important; text-shadow: none !important; font-weight: 400; }
.close:hover { color: var(--color-text-primary) !important; opacity: 1 !important; }

.alert,
.alert.alert-info,
.alert.alert-success,
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-error {
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-left: 3px solid var(--color-text-info) !important;
}
.alert.alert-info,
.alert-info.alert {
  background: var(--color-background-info) !important;
  background-color: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-left: 0 !important;
}
.alert.alert-success,
.alert-success.alert {
  background: var(--color-background-success) !important;
  background-color: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-left-color: var(--accent-green) !important;
}
.alert.alert-warning,
.alert-warning.alert {
  background: var(--color-background-warning) !important;
  background-color: var(--color-background-warning) !important;
  color: var(--color-text-warning) !important;
  border-left: 0 !important;
}
.alert.alert-danger,
.alert.alert-error,
.alert-danger.alert,
.alert-error.alert {
  background: var(--color-background-danger) !important;
  background-color: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border-left-color: var(--accent-red) !important;
}
.alert.alert-info,
.alert.alert-success,
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-error {
}
.alert.alert-info > *,
.alert.alert-info strong,
.alert.alert-info a,
.alert.alert-success > *,
.alert.alert-success strong,
.alert.alert-success a,
.alert.alert-warning > *,
.alert.alert-warning strong,
.alert.alert-warning a,
.alert.alert-danger > *,
.alert.alert-error > *,
.alert.alert-danger strong,
.alert.alert-error strong,
.alert.alert-danger a,
.alert.alert-error a {
  color: inherit !important;
}
html body .alert.alert-info,
.modal .alert.alert-info,
.modal-body .alert.alert-info,
.modal-content .alert.alert-info,
.card-wrapper .alert.alert-info,
.box-body .alert.alert-info {
  background: var(--color-background-info) !important;
  background-color: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-left: 0 !important;
}
html body .alert.alert-info *,
.modal .alert.alert-info *,
.modal-body .alert.alert-info *,
.modal-content .alert.alert-info *,
.card-wrapper .alert.alert-info *,
.box-body .alert.alert-info * {
  color: var(--color-text-info) !important;
}

html body .alert.alert-success,
.modal .alert.alert-success,
.modal-body .alert.alert-success,
.modal-content .alert.alert-success,
.card-wrapper .alert.alert-success,
.box-body .alert.alert-success {
  background: var(--color-background-success) !important;
  background-color: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-left: 3px solid var(--accent-green) !important;
}
html body .alert.alert-success *,
.modal .alert.alert-success *,
.modal-body .alert.alert-success *,
.modal-content .alert.alert-success *,
.card-wrapper .alert.alert-success *,
.box-body .alert.alert-success * {
  color: var(--color-text-success) !important;
}

html body .alert.alert-warning,
.modal .alert.alert-warning,
.modal-body .alert.alert-warning,
.modal-content .alert.alert-warning,
.card-wrapper .alert.alert-warning,
.box-body .alert.alert-warning {
  background: var(--color-background-warning) !important;
  background-color: var(--color-background-warning) !important;
  color: var(--color-text-warning) !important;
  border-left: 0 !important;
}
html body .alert.alert-warning *,
.modal .alert.alert-warning *,
.modal-body .alert.alert-warning *,
.modal-content .alert.alert-warning *,
.card-wrapper .alert.alert-warning *,
.box-body .alert.alert-warning * {
  color: var(--color-text-warning) !important;
}

html body .alert.alert-danger,
html body .alert.alert-error,
.modal .alert.alert-danger,
.modal .alert.alert-error,
.modal-body .alert.alert-danger,
.modal-body .alert.alert-error,
.modal-content .alert.alert-danger,
.modal-content .alert.alert-error,
.card-wrapper .alert.alert-danger,
.card-wrapper .alert.alert-error,
.box-body .alert.alert-danger,
.box-body .alert.alert-error {
  background: var(--color-background-danger) !important;
  background-color: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border-left: 3px solid var(--accent-red) !important;
}
html body .alert.alert-danger *,
html body .alert.alert-error *,
.modal .alert.alert-danger *,
.modal .alert.alert-error *,
.modal-body .alert.alert-danger *,
.modal-body .alert.alert-error *,
.modal-content .alert.alert-danger *,
.modal-content .alert.alert-error *,
.card-wrapper .alert.alert-danger *,
.card-wrapper .alert.alert-error *,
.box-body .alert.alert-danger *,
.box-body .alert.alert-error * {
  color: var(--color-text-danger) !important;
}

.dropdown-menu {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 4px !important;
  min-width: 180px;
}
.dropdown-menu > li > a {
  padding: 7px 10px !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.dropdown-menu .divider { background: var(--color-border-tertiary) !important; margin: 4px 0 !important; }

.pagination > li > a,
.pagination > li > span {
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  background: var(--color-background-primary) !important;
  margin: 0 2px !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: transparent !important;
}

.avatar,
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-background-info);
  color: var(--color-text-info);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-background-primary);
}
.avatar.green, .avatar-success { background: var(--color-background-success); color: var(--color-text-success); }
.avatar.amber, .avatar-warning { background: var(--color-background-warning); color: var(--color-text-warning); }
.avatar.red,   .avatar-danger  { background: var(--color-background-danger);  color: var(--color-text-danger); }

.kanban-column,
.kanban-board > div {
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px !important;
  min-width: 220px;
}

.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: 12.5px;
  margin-bottom: 8px !important;
}
.breadcrumb > li + li:before { color: var(--color-text-tertiary) !important; padding: 0 6px; }
.breadcrumb > li > a { color: var(--color-text-secondary) !important; }
.breadcrumb > .active { color: var(--color-text-primary) !important; }

.tooltip-inner {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: 11.5px !important;
  padding: 5px 9px !important;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--color-text-primary) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--color-text-primary) !important; }
.popover {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}
.popover-title {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.progress {
  height: 6px !important;
  background: var(--color-background-tertiary) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.progress-bar {
  background: var(--color-text-primary) !important;
  box-shadow: none !important;
}
.progress-bar-success { background: var(--accent-green) !important; }
.progress-bar-info    { background: var(--accent-blue) !important; }
.progress-bar-warning { background: var(--accent-amber) !important; }
.progress-bar-danger  { background: var(--accent-red) !important; }

.bg-light-gray, .bg-max { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.text-muted { color: var(--color-text-secondary) !important; }
hr { border-color: var(--color-border-tertiary) !important; }
.table-action-btn {
  background: var(--color-text-primary) !important;
  border-color: transparent !important;
  color: var(--color-background-primary) !important;
}
.table-action-btn:hover { background: color-mix(in srgb, var(--color-text-primary) 85%, white 15%) !important; }

.box.box-primary { border-top: 0.5px solid var(--color-border-tertiary) !important; }

body[class*="pos"] .form-control { padding: var(--control-padding-y) var(--control-padding-x) !important; }

.skin-blue-light .main-header .navbar .dropdown-menu li a { color: var(--color-text-primary) !important; }

.empty-row td,
tr.no-data td {
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  padding: 24px 12px !important;
  font-style: normal;
}

.bpc-root {
  --bpc-bg:        var(--color-background-secondary) !important;
  --bpc-modal:     var(--color-background-primary) !important;
  --bpc-surface:   var(--color-background-secondary) !important;
  --bpc-surface2:  var(--color-background-tertiary) !important;
  --bpc-border:    var(--color-border-tertiary) !important;
  --bpc-border2:   var(--color-border-tertiary) !important;
  --bpc-text:      var(--color-text-primary) !important;
  --bpc-text-sub:  var(--color-text-secondary) !important;
  --bpc-text-faint:var(--color-text-tertiary) !important;
  --bpc-num-bg:    var(--color-background-secondary) !important;
  --bpc-num-h:     var(--color-background-tertiary) !important;
  --bpc-num-a:     color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-tertiary)) !important;
  --bpc-op-bg:     var(--color-background-info) !important;
  --bpc-op-text:   var(--color-text-info) !important;
  --bpc-op-h:      color-mix(in srgb, var(--color-text-info) 18%, var(--color-background-info)) !important;
  --bpc-fn-bg:     var(--color-background-info) !important;
  --bpc-fn-text:   var(--color-text-info) !important;
  --bpc-fn-h:      color-mix(in srgb, var(--color-text-info) 18%, var(--color-background-info)) !important;
  --bpc-ac-bg:     var(--color-background-danger) !important;
  --bpc-ac-text:   var(--color-text-danger) !important;
  --bpc-ac-h:      color-mix(in srgb, var(--color-text-danger) 18%, var(--color-background-danger)) !important;
  --bpc-eq-bg:     var(--color-text-primary) !important;
  --bpc-eq-text:   var(--color-text-inverse) !important;
  --bpc-eq-h:      color-mix(in srgb, var(--color-text-primary) 85%, white 15%) !important;
  --bpc-eq-glow:   transparent !important;
  --bpc-overlay:   rgba(11, 14, 19, .45) !important;
  --bpc-radius:    var(--border-radius-lg) !important;
  --bpc-btn-radius:var(--border-radius-md) !important;
  --bpc-shadow:    var(--shadow-lg) !important;
}

.rr-modal,
.cr-modal,
.register_details_modal {
  --crr-bg:            var(--color-background-secondary) !important;
  --crr-surface:       var(--color-background-primary) !important;
  --crr-surface-soft:  var(--color-background-success) !important;
  --crr-input-bg:      var(--color-background-primary) !important;

  --crr-border:        var(--color-border-secondary) !important;
  --crr-border-soft:   var(--color-border-tertiary) !important;
  --crr-border-muted:  var(--color-border-tertiary) !important;

  --crr-text:          var(--color-text-primary) !important;
  --crr-title:         var(--color-text-primary) !important;
  --crr-label:         var(--color-text-secondary) !important;
  --crr-muted:         var(--color-text-tertiary) !important;
  --crr-muted-2:       var(--color-text-secondary) !important;
  --crr-note:          var(--color-text-secondary) !important;

  --crr-in:            var(--color-text-success) !important;
  --crr-in-bg:         var(--color-background-success) !important;
  --crr-in-border:     color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;

  --crr-out:           var(--color-text-danger) !important;
  --crr-out-bg:        var(--color-background-danger) !important;
  --crr-out-border:    color-mix(in srgb, var(--color-text-danger) 30%, transparent) !important;

  --crr-total-bg:      var(--color-background-success) !important;
  --crr-total-text:    var(--color-text-success) !important;

  --crr-subtotal-bg:   color-mix(in srgb, var(--color-background-success) 60%, var(--color-background-primary)) !important;
  --crr-subtotal-text: var(--color-text-success) !important;

  --crr-grand-bg:      var(--color-text-primary) !important;
  --crr-grand-text:    var(--color-text-inverse) !important;

  --crr-accent:        var(--color-text-info) !important;
  --crr-accent-soft:   color-mix(in srgb, var(--color-text-info) 30%, var(--color-background-info)) !important;
  --crr-warning:       var(--color-text-warning) !important;

  --crr-radius:        var(--border-radius-md) !important;
  --crr-radius-md:     var(--border-radius-md) !important;
  --crr-radius-pill:   20px !important;

  --crr-shadow-modal:  var(--shadow-lg) !important;
}

.cv-page,
.cl-wrap {
  --contact-bg:           var(--color-background-secondary) !important;
  --contact-bg-soft:      var(--color-background-secondary) !important;
  --contact-surface:      var(--color-background-primary) !important;
  --contact-border:       var(--color-border-secondary) !important;
  --contact-border-soft:  var(--color-border-tertiary) !important;

  --contact-text-1:       var(--color-text-primary) !important;
  --contact-text-2:       var(--color-text-secondary) !important;
  --contact-text-3:       var(--color-text-tertiary) !important;

  --contact-accent:       var(--color-text-info) !important;
  --contact-accent-soft:  var(--color-background-info) !important;
  --contact-accent-2:     var(--accent-amber) !important;

  --contact-danger:       var(--color-text-danger) !important;
  --contact-danger-soft:  var(--color-background-danger) !important;
  --contact-warning:      var(--color-text-warning) !important;
  --contact-warning-soft: var(--color-background-warning) !important;
  --contact-success:      var(--color-text-success) !important;
  --contact-success-soft: var(--color-background-success) !important;

  --contact-radius:       var(--border-radius-lg) !important;
  --contact-radius-sm:    var(--border-radius-md) !important;
  --contact-radius-pill:  20px !important;

  --contact-shadow:       var(--shadow-xs) !important;
  --contact-shadow-md:    var(--shadow-sm) !important;

  --contact-font-sans:    var(--font-sans) !important;
}

body.customer-display,
body[class*="customer-display"],
.customer-display-wrapper,
html:has(.customer-display-wrapper) {
  --accent:      var(--color-text-info) !important;
  --bg-main:     var(--color-background-primary) !important;
  --bg-header:   var(--color-background-secondary) !important;
  --border:      var(--color-border-secondary) !important;
  --text-muted:  var(--color-text-secondary) !important;
  --shadow:      var(--shadow-sm) !important;
}
.customer-display-wrapper #total_payable_big.value {
  color: var(--color-text-info) !important;
}
.customer-display-wrapper #customer-display-table tbody tr:nth-child(odd) {
  background: var(--color-background-primary) !important;
}
.customer-display-wrapper #customer-display-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-background-secondary) 50%, var(--color-background-primary) 50%) !important;
}

#db2-root {
  --d2-bg-app:         var(--color-background-secondary) !important;
  --d2-bg-surface:     var(--color-background-primary) !important;
  --d2-bg-elevated:    var(--color-background-secondary) !important;
  --d2-bg-input:       var(--color-background-secondary) !important;
  --d2-bg-th:          var(--color-background-secondary) !important;
  --d2-bg-td:          var(--color-background-primary) !important;
  --d2-bg-tr-hover:    var(--color-background-secondary) !important;
  --d2-text-primary:   var(--color-text-primary) !important;
  --d2-text-secondary: var(--color-text-secondary) !important;
  --d2-text-muted:     var(--color-text-tertiary) !important;
  --d2-border-subtle:  var(--color-border-tertiary) !important;
  --d2-border-default: var(--color-border-secondary) !important;
  --d2-border-accent:  var(--color-text-primary) !important;
  --d2-shadow-sm:      var(--shadow-xs) !important;
  --d2-shadow-md:      var(--shadow-sm) !important;
  --d2-accent:         var(--color-text-info) !important;
  --d2-accent-muted:   var(--color-background-info) !important;
  --d2-success:        var(--color-text-success) !important;
  --d2-danger:         var(--color-text-danger) !important;
  --d2-warning:        var(--color-text-warning) !important;
  --d2-info:           var(--color-text-info) !important;
  --d2-violet:         var(--accent-blue) !important;
}
#db2-root .d2-filter-btn,
#db2-root .d2-date-badge,
#db2-root .d2-loc-wrap select { border-radius: var(--border-radius-md) !important; }
#db2-root .d2-kpi {
  border-radius: var(--border-radius-lg) !important;
  border-top-width: 3px !important;
  border-top-color: var(--d2-kpi-bar, var(--color-border-primary)) !important;
}

:root,
.language-workspace {
  --lm-ink:          var(--color-text-primary) !important;
  --lm-ink-soft:     var(--color-text-secondary) !important;
  --lm-ink-faint:    var(--color-text-tertiary) !important;

  --lm-panel:        var(--color-background-primary) !important;
  --lm-surface-2:    var(--color-background-secondary) !important;
  --lm-surface-3:    var(--color-background-tertiary) !important;

  --lm-line:         var(--color-border-secondary) !important;
  --lm-line-soft:    var(--color-border-tertiary) !important;
  --lm-line-strong:  var(--color-border-primary) !important;

  --lm-amber:        var(--color-text-warning) !important;
  --lm-amber-bg:     var(--color-background-warning) !important;
  --lm-amber-border: color-mix(in srgb, var(--color-text-warning) 25%, transparent) !important;
  --lm-coral:        var(--color-text-danger) !important;
  --lm-coral-bg:     var(--color-background-danger) !important;
  --lm-coral-border: color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
  --lm-blue:         var(--color-text-info) !important;
  --lm-blue-bg:      var(--color-background-info) !important;

  --lm-radius-sm:    var(--border-radius-sm) !important;
  --lm-radius-md:    var(--border-radius-md) !important;
  --lm-radius-lg:    var(--border-radius-lg) !important;
  --lm-radius-pill:  20px !important;
}

.posfa-wrap,
.pos-totals-bar {
  --pos-ui-bg:             var(--color-background-secondary) !important;
  --pos-ui-surface:        var(--color-background-primary) !important;
  --pos-ui-surface-2:      var(--color-background-secondary) !important;
  --pos-ui-surface-3:      var(--color-background-tertiary) !important;
  --pos-ui-border:         var(--color-border-secondary) !important;
  --pos-ui-border-2:       var(--color-border-primary) !important;

  --pos-ui-text:           var(--color-text-primary) !important;
  --pos-ui-text-2:         var(--color-text-secondary) !important;
  --pos-ui-text-3:         var(--color-text-tertiary) !important;

  --pos-ui-accent:         var(--color-text-info) !important;
  --pos-ui-accent-glow:    color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  --pos-ui-accent-muted:   var(--color-background-info) !important;

  --pos-ui-success:        var(--color-text-success) !important;
  --pos-ui-success-glow:   color-mix(in srgb, var(--color-text-success) 18%, transparent) !important;
  --pos-ui-success-muted:  var(--color-background-success) !important;

  --pos-ui-warning:        var(--color-text-warning) !important;
  --pos-ui-warning-muted:  var(--color-background-warning) !important;
  --pos-ui-warning-border: color-mix(in srgb, var(--color-text-warning) 28%, transparent) !important;

  --pos-ui-danger:         var(--color-text-danger) !important;
  --pos-ui-danger-muted:   var(--color-background-danger) !important;
  --pos-ui-danger-border:  color-mix(in srgb, var(--color-text-danger) 28%, transparent) !important;

  --pos-ui-purple:         var(--accent-blue) !important;
  --pos-ui-purple-muted:   color-mix(in srgb, var(--accent-blue) 12%, transparent) !important;
  --pos-ui-purple-border:  color-mix(in srgb, var(--accent-blue) 28%, transparent) !important;

  --pos-ui-sky:            var(--color-text-info) !important;
  --pos-ui-sky-muted:      var(--color-background-info) !important;
  --pos-ui-sky-border:     color-mix(in srgb, var(--color-text-info) 25%, transparent) !important;

  --pos-ui-radius:         var(--border-radius-md) !important;
  --pos-ui-radius-sm:      var(--border-radius-sm) !important;
  --pos-ui-radius-lg:      var(--border-radius-lg) !important;

  --pos-ui-shadow-btn:     var(--shadow-xs) !important;
  --pos-ui-shadow-glow:    none !important;
}

:root {
  --ph-bg:        var(--color-background-primary) !important;
  --ph-surface:   var(--color-background-secondary) !important;
  --ph-surface2:  var(--color-background-tertiary) !important;
  --ph-border:    var(--color-border-tertiary) !important;
  --ph-border2:   var(--color-border-secondary) !important;
  --ph-text:      var(--color-text-primary) !important;
  --ph-muted:     var(--color-text-secondary) !important;
  --ph-accent:    var(--color-text-info) !important;
  --ph-accent-bg: var(--color-background-info) !important;
  --ph-red:       var(--color-text-danger) !important;
  --ph-shadow:    var(--shadow-xs) !important;
}
.pos-heading {
  font-family: var(--font-sans) !important;
}

.pl-report,
.tax-report-shell,
.audit-console {
  --report-bg:            var(--color-background-secondary) !important;
  --report-bg-soft:       var(--color-background-secondary) !important;
  --report-bg-softer:     var(--color-background-tertiary) !important;
  --report-card:          var(--color-background-primary) !important;
  --report-card-gradient: var(--color-background-primary) !important;

  --report-border:        var(--color-border-secondary) !important;
  --report-border-soft:   var(--color-border-tertiary) !important;
  --report-border-strong: var(--color-border-primary) !important;

  --report-text:          var(--color-text-primary) !important;
  --report-text-2:        var(--color-text-secondary) !important;
  --report-text-3:        var(--color-text-secondary) !important;
  --report-muted:         var(--color-text-secondary) !important;
  --report-muted-2:       var(--color-text-tertiary) !important;

  --report-accent:        var(--color-text-info) !important;
  --report-accent-2:      color-mix(in srgb, var(--color-text-info) 80%, black 20%) !important;
  --report-accent-soft:   color-mix(in srgb, var(--color-text-info) 12%, transparent) !important;
  --report-accent-bg:     var(--color-background-info) !important;

  --report-blue:          var(--color-text-info) !important;
  --report-blue-bg:       var(--color-background-info) !important;
  --report-blue-border:   color-mix(in srgb, var(--color-text-info) 25%, transparent) !important;

  --report-green:         var(--color-text-success) !important;
  --report-green-2:       var(--color-text-success) !important;
  --report-green-bg:      var(--color-background-success) !important;
  --report-green-soft:    var(--color-background-success) !important;

  --report-red:           var(--color-text-danger) !important;
  --report-red-2:         var(--color-text-danger) !important;
  --report-red-bg:        var(--color-background-danger) !important;

  --report-violet:        var(--accent-blue) !important;
  --report-violet-2:      var(--accent-blue) !important;
  --report-violet-bg:     var(--color-background-info) !important;
  --report-violet-soft:   var(--color-background-info) !important;

  --report-warning:       var(--color-text-warning) !important;
  --report-success:       var(--color-text-success) !important;
  --report-danger:        var(--color-text-danger) !important;

  --report-radius-sm:     var(--border-radius-md) !important;
  --report-radius:        var(--border-radius-lg) !important;
  --report-radius-lg:     var(--border-radius-lg) !important;
  --report-radius-xl:     var(--border-radius-xl) !important;
  --report-radius-2xl:    var(--border-radius-xl) !important;
  --report-radius-pill:   20px !important;

  --report-shadow-sm:     var(--shadow-xs) !important;
  --report-shadow:        var(--shadow-sm) !important;
  --report-shadow-lg:     var(--shadow-sm) !important;
  --report-shadow-xl:     var(--shadow-md) !important;
}
.audit-console { background: var(--color-background-secondary) !important; }

.orders-layout-row .box {
  border-radius: var(--border-radius-lg) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--color-background-primary) !important;
}
.orders-layout-row .box-header {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.orders-layout-row .box-header .box-title {
  color: var(--color-text-primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
.orders-layout-row .box-body {
  background: var(--color-background-primary) !important;
}
.orders-layout-row .form-control.select2 {
  border-radius: var(--border-radius-md) !important;
  border-color: var(--color-border-secondary) !important;
}
.orders-layout-row .order-card {
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--color-background-primary) !important;
}
.orders-layout-row .overlay {
  background-color: color-mix(in srgb, var(--color-text-primary) 12%, transparent) !important;
}

html:not(.dark-mode) .ro-sidebar,
html:not(.dark-mode) .rov2,
html:not(.dark-mode) .rov3,
html:not(.dark-mode) .rov4,
html:not(.dark-mode) .rov5 {
  --ro-ui-shell:            var(--color-background-secondary) !important;
  --ro-ui-bg:               var(--color-background-primary) !important;
  --ro-ui-bg-2:             var(--color-background-secondary) !important;
  --ro-ui-bg-3:             var(--color-background-tertiary) !important;
  --ro-ui-bg-4:             var(--color-background-tertiary) !important;
  --ro-ui-surface:          var(--color-background-primary) !important;
  --ro-ui-pill-bg:          var(--color-background-secondary) !important;
  --ro-ui-glass:            color-mix(in srgb, var(--color-background-primary) 92%, transparent) !important;
  --ro-ui-grid:             var(--color-border-tertiary) !important;

  --ro-ui-border:           var(--color-border-secondary) !important;
  --ro-ui-border-2:         var(--color-border-primary) !important;
  --ro-ui-border-3:         var(--color-border-primary) !important;

  --ro-ui-text:             var(--color-text-primary) !important;
  --ro-ui-text-2:           var(--color-text-secondary) !important;
  --ro-ui-text-3:           var(--color-text-tertiary) !important;
  --ro-ui-text-4:           var(--color-text-tertiary) !important;

  --ro-ui-hover:            var(--color-background-secondary) !important;
  --ro-ui-active:           var(--color-background-tertiary) !important;
  --ro-ui-selected:         var(--color-background-secondary) !important;

  --ro-ui-accent:           var(--color-text-info) !important;
  --ro-ui-accent-bg:        var(--color-background-info) !important;
  --ro-ui-accent-text:      var(--color-text-info) !important;

  --ro-ui-shadow:           var(--shadow-sm) !important;
  --ro-ui-shadow-lg:        var(--shadow-md) !important;
  --ro-ui-shadow-xl:        var(--shadow-lg) !important;

  --ro-ui-input-bg:         var(--color-background-primary) !important;
  --ro-ui-card-bg:          var(--color-background-primary) !important;
  --ro-ui-card-border:      var(--color-border-tertiary) !important;
  --ro-ui-card-hover:       var(--color-background-secondary) !important;

  --ro-ui-overlay:          rgba(11, 14, 19, 0.18) !important;
  --ro-ui-overlay-strong:   rgba(11, 14, 19, 0.30) !important;
  --ro-ui-overlay-heavy:    rgba(11, 14, 19, 0.35) !important;

  --ro-ui-tab-active-bg:    var(--color-text-primary) !important;
  --ro-ui-tab-active-text:  var(--color-text-inverse) !important;

  --ro-ui-received:         var(--accent-blue) !important;
  --ro-ui-received-bg:      var(--color-background-info) !important;
  --ro-ui-received-text:    var(--color-text-info) !important;
  --ro-ui-received-border:  color-mix(in srgb, var(--accent-blue) 30%, transparent) !important;

  --ro-ui-partial:          var(--color-text-warning) !important;
  --ro-ui-partial-bg:       var(--color-background-warning) !important;
  --ro-ui-partial-text:     var(--color-text-warning) !important;
  --ro-ui-partial-border:   color-mix(in srgb, var(--color-text-warning) 30%, transparent) !important;

  --ro-ui-cooked:           var(--accent-amber) !important;
  --ro-ui-cooked-bg:        var(--color-background-warning) !important;
  --ro-ui-cooked-text:      var(--color-text-warning) !important;
  --ro-ui-cooked-border:    color-mix(in srgb, var(--accent-amber) 30%, transparent) !important;

  --ro-ui-served:           var(--color-text-success) !important;
  --ro-ui-served-bg:        var(--color-background-success) !important;
  --ro-ui-served-text:      var(--color-text-success) !important;
  --ro-ui-served-border:    color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;

  --ro-ui-radius:           var(--border-radius-md) !important;
  --ro-ui-radius-sm:        var(--border-radius-sm) !important;
  --ro-ui-radius-md:        var(--border-radius-md) !important;
  --ro-ui-radius-pill:      20px !important;
}

body.pos-tablet-mode.pos-action-tower-active .posfa-wrap {
  border-color: var(--color-border-secondary) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-background-primary) !important;
}
body.pos-tablet-mode.pos-action-tower-active .posfa-total-item,
body.pos-tablet-mode.pos-action-tower-active .posfa-pill,
body.pos-tablet-mode.pos-action-tower-active .posfa-subscribe-section {
  border-color: var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}

:root {
  --sb-bg:             var(--color-background-primary) !important;
  --sb-bg-glass:       var(--color-background-secondary) !important;
  --sb-border:         var(--color-border-tertiary) !important;
  --sb-accent:         var(--color-text-primary) !important;
  --sb-accent-glow:    color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  --sb-accent-soft:    var(--color-background-info) !important;
  --sb-text-primary:   var(--color-text-primary) !important;
  --sb-text-secondary: var(--color-text-secondary) !important;
  --sb-text-muted:     var(--color-text-tertiary) !important;
  --sb-hover:          var(--color-background-secondary) !important;
  --sb-active-bg:      var(--color-background-secondary) !important;
  --sb-divider:        var(--color-border-tertiary) !important;
  --sb-radius:         var(--border-radius-md) !important;
  --sb-radius-sm:      var(--border-radius-sm) !important;
  --sb-section-label:  var(--color-text-tertiary) !important;
}
#bp-sidebar {
  background: var(--color-background-primary) !important;
  border-right: 0.5px solid var(--color-border-tertiary) !important;
}
#bp-sidebar .bp-sb-header {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}

.daterangepicker,
.bootstrap-datetimepicker-widget,
.datepicker-dropdown {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  color: var(--color-text-primary) !important;
}

.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget.dropdown-menu,
.datepicker-dropdown,
.ui-datepicker,
.daterangepicker {
  z-index: 2147483647 !important;
}

.daterangepicker .calendar-table,
.daterangepicker td,
.daterangepicker th { color: var(--color-text-primary) !important; border-color: transparent !important; background: transparent !important; }
.daterangepicker td.available:hover,
.daterangepicker th.available:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.daterangepicker td.in-range { background: var(--color-background-info) !important; color: var(--color-text-info) !important; }
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date { color: var(--color-text-tertiary) !important; background: transparent !important; }
.daterangepicker .ranges li {
  border-radius: var(--border-radius-sm) !important;
  font-size: 12.5px !important;
  color: var(--color-text-secondary) !important;
}
.daterangepicker .ranges li:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.daterangepicker .ranges li.active {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
}
.daterangepicker .drp-buttons { border-top: 0.5px solid var(--color-border-tertiary) !important; }
.daterangepicker .drp-buttons .btn { font-size: 12px !important; }
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect,
.daterangepicker .input-mini {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-text-primary) !important;
}
.daterangepicker:before { border-bottom-color: var(--color-border-primary) !important; }
.daterangepicker:after  { border-bottom-color: var(--color-background-primary) !important; }

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  text-shadow: none !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}

#toast-container > div {
  background: var(--color-background-primary) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  opacity: 1 !important;
  font-family: var(--font-sans) !important;
}
#toast-container > .toast,
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-danger,
#toast-container > .toast-warning,
#toast-container > .toast-info {
  background-image: none !important;
  background-repeat: no-repeat !important;
}
#toast-container > .toast-success { border-left: 3px solid var(--accent-green) !important; }
#toast-container > .toast-error,
#toast-container > .toast-danger  { border-left: 3px solid var(--accent-red)   !important; }
#toast-container > .toast-warning { border-left: 3px solid var(--accent-amber) !important; }
#toast-container > .toast-info    { border-left: 3px solid var(--accent-blue)  !important; }
#toast-container > div .toast-title   { color: var(--color-text-primary) !important; font-weight: 600 !important; }
#toast-container > div .toast-message { color: var(--color-text-secondary) !important; font-size: 13px !important; }
#toast-container > div { padding-left: 52px !important; position: relative !important; }
#toast-container > div::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
#toast-container > .toast-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23639922' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
#toast-container > .toast-error::before,
#toast-container > .toast-danger::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E24B4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
}
#toast-container > .toast-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF9F27' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
#toast-container > .toast-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23378ADD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
#toast-container > div .toast-close-button {
  color: var(--color-text-secondary) !important;
  opacity: 0.7 !important;
  font-size: 18px !important;
  top: 0 !important;
  right: 0 !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
#toast-container > div .toast-close-button:hover,
#toast-container > div .toast-close-button:focus {
  color: var(--color-text-primary) !important;
  opacity: 1 !important;
}

.swal2-popup,
.swal-modal,
.swal2-modal {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
}
.swal2-title, .swal-title  { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.swal2-html-container,
.swal2-content,
.swal-text { color: var(--color-text-secondary) !important; font-size: 13.5px !important; }
.swal2-styled.swal2-confirm,
.swal-button--confirm {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.swal2-styled.swal2-cancel,
.swal-button--cancel {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] { background: var(--color-text-success) !important; }
.swal2-icon.swal2-error   { border-color: var(--color-text-danger) !important; color: var(--color-text-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--color-text-warning) !important; color: var(--color-text-warning) !important; }
.swal2-icon.swal2-info    { border-color: var(--color-text-info) !important; color: var(--color-text-info) !important; }

.switch .slider,
.switchBtn .slider {
  background: var(--color-background-tertiary) !important;
  border-radius: 999px !important;
  transition: background .18s ease !important;
}
.switch input:checked + .slider,
.switchBtn input:checked + .slider { background: var(--color-text-primary) !important; }
.switch .slider:before,
.switchBtn .slider:before {
  background: var(--color-background-primary) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .15) !important;
  border-radius: 999px !important;
}

.icheckbox_square-blue,
.iradio_square-blue { filter: grayscale(0.5) hue-rotate(180deg); }

.btn-file,
.fileinput-button {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px dashed var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
}
.btn-file:hover { background: var(--color-background-tertiary) !important; }

.dropzone,
.dz-default {
  background: var(--color-background-primary) !important;
  border: 1.5px dashed var(--color-border-primary) !important;
  border-radius: var(--border-radius-lg) !important;
  color: var(--color-text-secondary) !important;
  min-height: 140px !important;
  padding: 24px !important;
}
.dropzone:hover { border-color: var(--color-text-info) !important; background: var(--color-background-info) !important; }
.dropzone .dz-message { font-size: 13px !important; color: var(--color-text-secondary) !important; }
.dropzone .dz-preview .dz-image { border-radius: var(--border-radius-md) !important; }

.info-box {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  min-height: 80px !important;
  display: block !important;
  min-width: 0;
  padding: 10px !important;
}
.info-box-icon {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  float: left !important;
  flex: none;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  display: block !important;
  text-align: center !important;
  font-size: 20px !important;
  padding: 0 !important;
  margin: 0 10px 0 0 !important;
}
.info-box-content {
  color: var(--color-text-primary) !important;
  min-width: 0;
  min-height: 48px;
  margin-left: 58px !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-box-text,
.info-box-number {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}
.info-box-text    { color: var(--color-text-secondary) !important; font-size: 12px !important; text-transform: none !important; }
.info-box-number  { color: var(--color-text-primary) !important; font-size: 18px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }

@media (min-width: 992px) and (max-width: 1599.98px) {
  .col-md-2 > .info-box > .info-box-icon { display: none !important; }
  .col-md-2 > .info-box > .info-box-content { margin-left: 0 !important; }
  .col-md-2 > .info-box .info-box-text { font-size: 11px !important; }
  .col-md-2 > .info-box .info-box-number { font-size: 16px !important; }
}
.info-box-icon.bg-aqua,    .info-box.bg-aqua    .info-box-icon { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.info-box-icon.bg-green,   .info-box.bg-green   .info-box-icon { background: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.info-box-icon.bg-yellow,  .info-box.bg-yellow  .info-box-icon { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.info-box-icon.bg-red,     .info-box.bg-red     .info-box-icon { background: var(--color-background-danger) !important;  color: var(--color-text-danger) !important; }
.info-box-icon.bg-blue,    .info-box.bg-blue    .info-box-icon { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }

.small-box {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-left: 3px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  position: relative;
  margin-bottom: 16px !important;
  padding: 14px 16px !important;
}
.small-box.bg-aqua,    .small-box.bg-blue   { border-left-color: var(--accent-blue)  !important; }
.small-box.bg-green                          { border-left-color: var(--accent-green) !important; }
.small-box.bg-yellow                         { border-left-color: var(--accent-amber) !important; }
.small-box.bg-red                            { border-left-color: var(--accent-red)   !important; }
.small-box.bg-teal                           { border-left-color: var(--accent-teal)  !important; }
.small-box > .inner > h3 { color: var(--color-text-primary) !important; font-size: 22px !important; font-weight: 600 !important; }
.small-box > .inner > p  { color: var(--color-text-secondary) !important; font-size: 12.5px !important; }
.small-box > .icon { color: var(--color-text-tertiary) !important; opacity: .35 !important; font-size: 60px !important; top: 6px !important; right: 8px !important; }
.small-box > .small-box-footer {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  margin: 12px -16px -14px !important;
}
.small-box:hover { transform: translateY(-1px); transition: transform .15s ease; }

.box-tools .btn-box-tool {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border: none !important;
  font-size: 14px !important;
  padding: 4px 6px !important;
}
.box-tools .btn-box-tool:hover { color: var(--color-text-primary) !important; }

.timeline {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  position: relative;
}
.timeline:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border-tertiary) !important;
  left: 28px;
  margin: 0 !important;
  border-radius: 2px;
}
.timeline > li > .timeline-item {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-left: 56px !important;
  padding: 12px 14px !important;
  color: var(--color-text-primary) !important;
}
.timeline > li > .fa,
.timeline > li > .fas,
.timeline > li > .glyphicon,
.timeline > li > .ion {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  width: 30px !important; height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  border-radius: 50% !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  left: 14px !important;
  top: 2px !important;
}
.timeline > li > .timeline-item > .timeline-header { font-size: 13px !important; font-weight: 500 !important; border-bottom: 0.5px solid var(--color-border-tertiary) !important; padding-bottom: 6px !important; margin-bottom: 8px !important; }
.timeline > li > .timeline-item > .timeline-body  { font-size: 12.5px !important; color: var(--color-text-secondary) !important; }
.timeline > li > .timeline-item > .time { color: var(--color-text-tertiary) !important; font-size: 11px !important; }

.login-page,
.register-page {
  background: var(--color-background-secondary) !important;
  font-family: var(--font-sans) !important;
}
.login-box,
.register-box { width: 380px !important; }
.login-box-body,
.register-box-body {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 24px !important;
}
.login-logo,
.register-logo {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 18px !important;
  letter-spacing: -0.015em !important;
}
.login-box-msg,
.register-box-msg { color: var(--color-text-secondary) !important; font-size: 13px !important; }

.fc {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
}
.fc .fc-toolbar-title { font-size: 16px !important; font-weight: 600 !important; }
.fc .fc-button {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
}
.fc .fc-button:hover { background: var(--color-background-secondary) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: transparent !important;
}
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid { border-color: var(--color-border-tertiary) !important; }
.fc .fc-col-header-cell-cushion { color: var(--color-text-secondary) !important; font-weight: 500 !important; padding: 8px !important; }
.fc-day-today { background: var(--color-background-info) !important; }
.fc-event,
.fc-h-event,
.fc-v-event {
  background: var(--color-text-primary) !important;
  border: none !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: 11.5px !important;
  padding: 1px 4px !important;
}

.bootstrap-tagsinput {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: calc(var(--control-padding-y) - 1px) calc(var(--control-padding-x) - 2px) !important;
  box-shadow: none !important;
  min-height: var(--control-min-height) !important;
}
.bootstrap-tagsinput .tag {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: 999px !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  padding: 2px 8px 2px 10px !important;
  margin: 2px 4px 2px 0 !important;
}

.nav-tabs-custom {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 16px !important;
}
.nav-tabs-custom > .nav-tabs {
  background: var(--color-background-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  margin: 0 !important;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
  border-top: 2px solid var(--color-text-primary) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.nav-tabs-custom > .tab-content { padding: 14px 16px !important; }

.nav-pills > li > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: 12.5px !important;
  padding: 6px 12px !important;
  margin-right: 4px !important;
}
.nav-pills > li.active > a,
.nav-pills > li > a:hover { background: var(--color-text-primary) !important; color: var(--color-background-primary) !important; }

.list-group-item {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}
.list-group-item:first-child { border-top-left-radius: var(--border-radius-md) !important; border-top-right-radius: var(--border-radius-md) !important; }
.list-group-item:last-child  { border-bottom-left-radius: var(--border-radius-md) !important; border-bottom-right-radius: var(--border-radius-md) !important; }
.list-group-item.active,
.list-group-item.active:hover { background: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; border-color: var(--color-border-tertiary) !important; }

.callout {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-left: 3px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}
.callout h4 { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.callout-info,    .callout.callout-info    { border-left-color: var(--accent-blue)  !important; }
.callout-success, .callout.callout-success { border-left-color: var(--accent-green) !important; }
.callout-warning, .callout.callout-warning { border-left-color: var(--accent-amber) !important; }
.callout-danger,  .callout.callout-danger  { border-left-color: var(--accent-red)   !important; }

.well {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
.row:has(> [class*="col-"] > .well + *),
.row:has(> [class*="col-"] > .well) {
  display: flex;
  flex-wrap: wrap;
}
.row:has(> [class*="col-"] > .well) > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.row:has(> [class*="col-"] > .well) > [class*="col-"] > .well {
  flex: 1 1 auto;
  height: 100%;
  margin-bottom: 0 !important;
}
.modal-body > .row > .col-md-6 > .well,
.modal-content .row > .col-md-6 > .well,
.payment_row > .row > .col-md-6 > .well {
  height: 100%;
}
.row:has(> [class*="col-"] > .well) {
  margin-bottom: 16px;
}
.row > [class*="col-"] > .well,
.row > [class*="col-"] > .well-sm,
.row > [class*="col-"] > .well-lg {
  margin-bottom: 16px;
}
.jumbotron {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-xl) !important;
  padding: 28px !important;
}

.bg-aqua,    .bg-blue    { background-color: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.bg-green,   .bg-success { background-color: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.bg-yellow,  .bg-warning { background-color: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.bg-red,     .bg-danger  { background-color: var(--color-background-danger) !important;  color: var(--color-text-danger) !important; }
.bg-purple, .bg-violet, .bg-maroon, .bg-navy { background-color: var(--color-background-info) !important; color: var(--color-text-info) !important; }
.bg-gray, .bg-light-gray { background-color: var(--color-background-secondary) !important; color: var(--color-text-primary) !important; }
.bg-black                { background-color: var(--color-text-primary) !important; color: var(--color-background-primary) !important; }

.text-aqua,    .text-blue    { color: var(--color-text-info) !important; }
.text-green,   .text-success { color: var(--color-text-success) !important; }
.text-yellow,  .text-warning { color: var(--color-text-warning) !important; }
.text-red,     .text-danger  { color: var(--color-text-danger) !important; }
.text-purple, .text-violet   { color: var(--accent-blue) !important; }

.content-header {
  padding: 12px 0 6px !important;
  background: transparent !important;
  border-bottom: none !important;
}
.content-header > h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.content-header > h1 > small {
  font-size: 12.5px !important;
  color: var(--color-text-secondary) !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}
.content-header > .breadcrumb {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 0 0 !important;
}

.main-footer {
  background: var(--color-background-primary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 12.5px !important;
  padding: 10px 16px !important;
}
.control-sidebar,
.control-sidebar-bg {
  background: var(--color-background-primary) !important;
  border-left: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}

.user-menu .user-header,
.user-menu .user-image {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.notifications-menu > .dropdown-menu,
.messages-menu      > .dropdown-menu,
.tasks-menu         > .dropdown-menu {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
  min-width: 320px !important;
}
.notifications-menu .header,
.messages-menu .header,
.tasks-menu .header {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 14px !important;
}
.notifications-menu .menu > li > a,
.messages-menu      .menu > li > a,
.tasks-menu         .menu > li > a {
  font-size: 12.5px !important;
  color: var(--color-text-primary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 14px !important;
}
.notifications-menu .menu > li > a:hover,
.messages-menu      .menu > li > a:hover,
.tasks-menu         .menu > li > a:hover { background: var(--color-background-secondary) !important; }
.notifications-menu .footer > a,
.messages-menu      .footer > a,
.tasks-menu         .footer > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-info) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  text-align: center !important;
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 1px 5px !important;
}
pre {
  display: block;
  padding: 12px 14px !important;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
kbd {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-bottom-width: 2px !important;
  box-shadow: 0 1px 0 var(--color-border-primary);
}

.jstree-default .jstree-clicked,
.jstree-default .jstree-hovered {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  box-shadow: none !important;
  border: none !important;
}
.jstree-default .jstree-anchor { color: var(--color-text-primary) !important; font-size: 13px !important; }

.spinner-border, .spinner-grow { color: var(--color-text-info) !important; }
.fa-spin { color: inherit; }

.scrolltop .scroll,
.scroll {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: 50% !important;
  color: var(--color-text-primary) !important;
  width: 40px; height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md) !important;
}
.scroll:hover { background: var(--color-background-secondary) !important; }

.product_box,
.product_box .text_div {
  background: var(--color-background-primary) !important;
  border-radius: var(--border-radius-md) !important;
}
.product_box {
  border: 0.5px solid var(--color-border-tertiary) !important;
  padding: 8px !important;
  transition: border-color .15s ease, transform .15s ease;
}
.product_box:hover {
  border-color: var(--color-text-info) !important;
  transform: translateY(-1px);
}
.product_box .image-container img { border-radius: var(--border-radius-sm) !important; }
.product_box .text { color: var(--color-text-primary) !important; }

.product_box .text_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.product_box .product-sku,
.product_box .product-price {
  display: block;
  font-size: clamp(9px, 1.8cqw, 11px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.product_box .product-qty-badge {
  font-size: clamp(9px, 1.8cqw, 11px);
  white-space: nowrap;
}

.wizard > .steps > ul > li.current > a,
.wizard > .steps > ul > li.current > a:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-radius: var(--border-radius-md) !important;
}
.wizard > .steps > ul > li.done > a {
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-radius: var(--border-radius-md) !important;
}
.wizard > .steps > ul > li.disabled > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--border-radius-md) !important;
}
.wizard > .content {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  color: var(--color-text-primary) !important;
}

.modal-xl   { max-width: 1140px; }
.modal-lg   { max-width: 900px; }
.modal-md   { max-width: 600px; }

@media print {
  body,
  .content,
  .content-wrapper,
  #receipt_section,
  .print_section {
    background: #fff !important;
  }
  table.general-table,
  table.general-table tr,
  table.general-table th,
  table.general-table td {
    background: #fff !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    opacity: 1 !important;
  }

  table.general-table .label,
  table.general-table .label.bg-info,
  table.general-table .label[class*="bg-"] {
    background: #fff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    border: 1px solid #000 !important;
    text-shadow: none !important;
  }
}

#receipt_section,
.print_section,
#invoice_content .receipt,
#receipt_section .receipt,
.print_section .receipt {
  background: #fff !important;
  color: #111 !important;
}

#invoice_content .receipt table,
#invoice_content .receipt .table,
#receipt_section .receipt table,
#receipt_section .receipt .table,
.print_section .receipt table,
.print_section .receipt .table {
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
}

#invoice_content .receipt thead tr,
#invoice_content .receipt thead th,
#invoice_content .receipt .table > thead > tr,
#invoice_content .receipt .table > thead > tr > th,
#receipt_section .receipt thead tr,
#receipt_section .receipt thead th,
#receipt_section .receipt .table > thead > tr,
#receipt_section .receipt .table > thead > tr > th,
.print_section .receipt thead tr,
.print_section .receipt thead th,
.print_section .receipt .table > thead > tr,
.print_section .receipt .table > thead > tr > th {
  background: #fff !important;
  color: #111 !important;
}

#invoice_content .receipt td,
#invoice_content .receipt th,
#invoice_content .receipt .table > tbody > tr > td,
#invoice_content .receipt .table > tbody > tr > th,
#invoice_content .receipt .table > tfoot > tr > td,
#invoice_content .receipt .table > tfoot > tr > th,
#receipt_section .receipt td,
#receipt_section .receipt th,
#receipt_section .receipt .table > tbody > tr > td,
#receipt_section .receipt .table > tbody > tr > th,
#receipt_section .receipt .table > tfoot > tr > td,
#receipt_section .receipt .table > tfoot > tr > th,
.print_section .receipt td,
.print_section .receipt th,
.print_section .receipt .table > tbody > tr > td,
.print_section .receipt .table > tbody > tr > th,
.print_section .receipt .table > tfoot > tr > td,
.print_section .receipt .table > tfoot > tr > th {
  background: transparent !important;
  color: #111 !important;
}

#invoice_content .receipt .bg-gray,
#invoice_content .receipt .bg-light-gray,
#receipt_section .receipt .bg-gray,
#receipt_section .receipt .bg-light-gray,
.print_section .receipt .bg-gray,
.print_section .receipt .bg-light-gray {
  background: #fff !important;
  color: #111 !important;
}

table .btn-link,
.table .btn-link { color: var(--color-text-info) !important; padding: 0 !important; font-weight: 500; }
table .btn-link:hover { text-decoration: underline; }

.btn:disabled,
.btn.disabled,
.form-control:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-tertiary) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

.panel {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  margin-bottom: 16px !important;
}
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info    > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger  > .panel-heading {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  border-top-left-radius: var(--border-radius-lg) !important;
  border-top-right-radius: var(--border-radius-lg) !important;
  color: var(--color-text-primary) !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
}
.panel-primary > .panel-heading { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.panel-success > .panel-heading { background: var(--color-background-success) !important; color: var(--color-text-success) !important; }
.panel-info    > .panel-heading { background: var(--color-background-info) !important;    color: var(--color-text-info) !important; }
.panel-warning > .panel-heading { background: var(--color-background-warning) !important; color: var(--color-text-warning) !important; }
.panel-danger  > .panel-heading { background: var(--color-background-danger) !important;  color: var(--color-text-danger) !important; }
.panel-body   { padding: 16px !important; color: var(--color-text-primary) !important; }
.panel-footer {
  background: var(--color-background-secondary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  border-bottom-left-radius: var(--border-radius-lg) !important;
  border-bottom-right-radius: var(--border-radius-lg) !important;
  padding: 10px 16px !important;
  color: var(--color-text-secondary) !important;
}
.panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: inherit !important;
}

.label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}
.label-default { background: var(--color-background-secondary) !important; color: var(--color-text-secondary) !important; }
.label-primary,
.label-info    { background: var(--color-background-info) !important;     color: var(--color-text-info) !important; }
.label.bg-info { background: var(--color-background-info) !important;     color: var(--color-text-info) !important; }
.label-success { background: var(--color-background-success) !important;  color: var(--color-text-success) !important; }
.label-warning { background: var(--color-background-warning) !important;  color: var(--color-text-warning) !important; }

.direct-chat-messages { background: var(--color-background-primary) !important; padding: 12px !important; }
.direct-chat-msg .direct-chat-text {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  color: var(--color-text-primary) !important;
}
.direct-chat-msg.right .direct-chat-text {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.direct-chat-name { font-weight: 600 !important; color: var(--color-text-primary) !important; }
.direct-chat-timestamp { color: var(--color-text-tertiary) !important; }
.direct-chat-contacts {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.direct-chat-contacts .contacts-list-name { color: var(--color-text-primary) !important; }
.direct-chat-contacts .contacts-list-msg  { color: var(--color-text-secondary) !important; }

.products-list .product-img,
.users-list-image { border-radius: var(--border-radius-md) !important; }
.products-list > .item,
.users-list > li {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding: 10px 12px !important;
}
.products-list .product-info .product-title { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.products-list .product-info .product-description,
.users-list-date { color: var(--color-text-secondary) !important; }

.mailbox-attachments li {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
}
.mailbox-attachment-info {
  background: var(--color-background-secondary) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
}

.attachment-block {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 8px !important;
}

.has-error .form-control,
.has-error .input-group-addon {
  border-color: var(--color-text-danger) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
}
.has-error .form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-danger) 18%, transparent) !important; }
.has-error .help-block,
.has-error .control-label,
.has-error .form-control-feedback { color: var(--color-text-danger) !important; }

.has-warning .form-control,
.has-warning .input-group-addon { border-color: var(--color-text-warning) !important; }
.has-warning .help-block,
.has-warning .control-label { color: var(--color-text-warning) !important; }

.has-success .form-control,
.has-success .input-group-addon { border-color: var(--color-text-success) !important; }
.has-success .help-block,
.has-success .control-label { color: var(--color-text-success) !important; }

.help-block,
.form-text {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  margin-top: 4px !important;
}
.invalid-feedback { color: var(--color-text-danger) !important; font-size: 12px !important; }
.valid-feedback   { color: var(--color-text-success) !important; font-size: 12px !important; }

.required:after,
label.required:after,
.form-group.required > label:after {
  content: " *";
  color: var(--color-text-danger);
  font-weight: 700;
}

.popover {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
  color: var(--color-text-primary) !important;
}
.popover-title,
.popover-header {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  border-top-left-radius: var(--border-radius-lg) !important;
  border-top-right-radius: var(--border-radius-lg) !important;
}
.popover-content,
.popover-body { color: var(--color-text-secondary) !important; }
.popover.left  > .arrow:after,
.popover.right > .arrow:after,
.popover.top   > .arrow:after,
.popover.bottom > .arrow:after { border-color: transparent var(--color-background-primary) !important; }

.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .btn {
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}
.bootstrap-touchspin .btn:hover {
  background: color-mix(in srgb, var(--color-background-secondary) 75%, var(--color-text-primary) 8%) !important;
}

.colorpicker,
.colorpicker.colorpicker-bs-popover-content {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
}

.note-editor.note-frame,
.note-editor.note-airframe {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
}
.note-editor .note-toolbar,
.note-editor .note-statusbar {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
}
.note-editor .note-btn,
.note-editor .note-btn-group .btn {
  background: transparent !important;
  border: 0.5px solid transparent !important;
  color: var(--color-text-primary) !important;
}
.note-editor .note-btn:hover {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
}
.note-editor .note-editable {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}

.tox-tinymce {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-statusbar {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
}
.tox .tox-edit-area__iframe { background: var(--color-background-primary) !important; }
.cke_chrome,
.cke_inner {
  border-color: var(--color-border-tertiary) !important;
  background: var(--color-background-primary) !important;
}
.cke_top,
.cke_bottom {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
}

.chosen-container .chosen-single,
.chosen-container-multi .chosen-choices {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
  height: var(--control-min-height) !important;
  line-height: var(--select2-rendered-line-height) !important;
  color: var(--color-text-primary) !important;
}
.chosen-container .chosen-drop {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
}
.chosen-container .chosen-results li.highlighted {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}

.icheckbox_minimal,
.iradio_minimal,
.icheckbox_minimal-blue,
.iradio_minimal-blue,
.icheckbox_flat-blue,
.iradio_flat-blue,
.icheckbox_square-blue,
.iradio_square-blue {
  filter: none !important;
}

.card {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.card-header {
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  font-weight: 600 !important;
  border-top-left-radius: var(--border-radius-lg) !important;
  border-top-right-radius: var(--border-radius-lg) !important;
}
.card-body  { color: var(--color-text-primary) !important; }
.card-footer {
  background: var(--color-background-secondary) !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
}
.custom-control-label::before {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
}
.custom-switch .custom-control-label::before { border-radius: 999px !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
  border-radius: 999px;
  border: 2px solid var(--color-background-secondary);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}
* { scrollbar-color: var(--color-border-secondary) var(--color-background-secondary); scrollbar-width: thin; }

.error-page {
  margin: 40px auto !important;
  max-width: 720px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}
.error-page > .headline {
  color: var(--accent-blue) !important;
  font-weight: 700 !important;
  font-size: 80px !important;
}
.error-page > .error-content > h3 {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}
.error-page > .error-content p { color: var(--color-text-secondary) !important; }

.preloader,
.loading-overlay,
.overlay {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: inherit !important;
}
html.dark-mode .preloader,
html.dark-mode .loading-overlay,
html.dark-mode .overlay {
  background: rgba(15, 23, 42, 0.65) !important;
}
.overlay > .fa,
.overlay > i { color: var(--accent-blue) !important; }

.notification-badge,
.label-pill,
.badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--accent-red) !important;
  color: #fff !important;
}

.form-horizontal .control-label {
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  padding-top: 7px !important;
}
.form-inline .form-control { min-height: 32px !important; }

.slider .slider-track {
  background: var(--color-background-secondary) !important;
}
.slider .slider-selection {
  background: var(--accent-blue) !important;
}
.slider .slider-handle {
  background: var(--color-background-primary) !important;
  border: 2px solid var(--accent-blue) !important;
}

.sortable-ghost,
.ui-sortable-placeholder {
  background: var(--color-background-info) !important;
  border: 1px dashed var(--accent-blue) !important;
  opacity: 0.7 !important;
}
.sortable-chosen { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important; }

.nav-justified > li > a,
.nav-tabs.nav-justified > li > a {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-secondary) !important;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--accent-blue) !important;
  background: var(--color-background-primary) !important;
}



.file-input .file-caption,
.file-input .file-caption-name,
.file-input .file-input-new .input-group {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}
.file-input .btn-file,
.file-input .fileinput-remove,
.file-input .fileinput-upload {
  border-radius: var(--border-radius-md) !important;
}

.select2-container--open { z-index: 99999 !important; }

.skeleton,
.skeleton-line,
.placeholder-glow .placeholder {
  background: linear-gradient(
    90deg,
    var(--color-background-secondary) 0%,
    color-mix(in srgb, var(--color-background-secondary) 60%, var(--color-background-primary) 40%) 50%,
    var(--color-background-secondary) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: theme-skeleton-shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--border-radius-sm) !important;
  color: transparent !important;
}
@keyframes theme-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state,
.no-data,
.dataTables_empty {
  text-align: center !important;
  color: var(--color-text-tertiary) !important;
  padding: 32px 16px !important;
  font-size: 13px !important;
}

.embed-responsive {
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
}

.box-comments {
  background: var(--color-background-secondary) !important;
  padding: 12px !important;
}
.box-comments .box-comment {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}
.box-comments .username { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.box-comments .text-muted { color: var(--color-text-tertiary) !important; }

.progress-description,
.description-block .description-text { color: var(--color-text-secondary) !important; }
.description-block > .description-header {
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
}

.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-black .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-yellow .main-header .navbar,
.skin-red .main-header .navbar,
.skin-green .main-header .navbar {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.skin-blue .main-header .logo,
.skin-black .main-header .logo,
.skin-purple .main-header .logo,
.skin-yellow .main-header .logo,
.skin-red .main-header .logo,
.skin-green .main-header .logo {
  background: var(--color-background-primary) !important;
  color: var(--accent-blue) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.skin-blue .sidebar-menu > li.active > a,
.skin-black .sidebar-menu > li.active > a,
.skin-purple .sidebar-menu > li.active > a,
.skin-yellow .sidebar-menu > li.active > a,
.skin-red .sidebar-menu > li.active > a,
.skin-green .sidebar-menu > li.active > a {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-left: 3px solid var(--accent-blue) !important;
}

.cropper-view-box,
.cropper-face {
  outline-color: var(--accent-blue) !important;
}
.image-preview,
.image-thumb {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-secondary) !important;
}

.toolbar,
.actions-bar,
.btn-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

html.dark-mode .panel,
html.dark-mode .card,
html.dark-mode .popover,
html.dark-mode .note-editor.note-frame,
html.dark-mode .colorpicker,
html.dark-mode .file-input .file-caption,
html.dark-mode .file-input .file-caption-name,
html.dark-mode .chosen-container .chosen-single,
html.dark-mode .chosen-container .chosen-drop,
html.dark-mode .chosen-container-multi .chosen-choices,
html.dark-mode .image-preview,
html.dark-mode .image-thumb {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}
html.dark-mode .panel-heading,
html.dark-mode .card-header,
html.dark-mode .card-footer,
html.dark-mode .panel-footer,
html.dark-mode .popover-title,
html.dark-mode .popover-header,
html.dark-mode .note-editor .note-toolbar,
html.dark-mode .note-editor .note-statusbar,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .tox .tox-statusbar,
html.dark-mode .cke_top,
html.dark-mode .cke_bottom,
html.dark-mode .box-comments,
html.dark-mode .attachment-block {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
}

.filter {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.filter .new-user {
  min-width: 0 !important;
  display: inline-flex !important;
}
.filter .new-user > a,
.filter .new-user > button,
.overview-filter .new-user > a,
.overview-filter .new-user > button,
.overview-filter > .filter > a,
.overview-filter > .filter > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: 0.5px solid transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.filter .new-user > .btn.btn-block,
.overview-filter .new-user > .btn.btn-block {
  display: inline-flex !important;
  width: auto !important;
}
.filter .new-user > .btn.btn-sm,
.filter .new-user > .btn.btn-lg,
.overview-filter .new-user > .btn.btn-sm,
.overview-filter .new-user > .btn.btn-lg,
.overview-filter > .filter > .btn-sm,
.overview-filter > .filter > .btn-lg {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  font-size: var(--body-font-size) !important;
}

.filter .new-user > .btn-primary,
.filter .new-user > a.btn-primary,
.filter .new-user > button.btn-primary,
.overview-filter .new-user > .btn-primary,
.overview-filter .new-user > a.btn-primary,
.overview-filter .new-user > button.btn-primary,
.overview-filter > .filter > .btn-primary,
.overview-filter .new-user > .add-user-modal-btn,
.overview-filter > .filter > .add-user-modal-btn {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.filter .new-user > .btn-primary:hover,
.overview-filter .new-user > .btn-primary:hover,
.overview-filter > .filter > .btn-primary:hover,
.overview-filter .new-user > .add-user-modal-btn:hover,
.overview-filter > .filter > .add-user-modal-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}
.filter .new-user > .btn-primary > i,
.overview-filter .new-user > .btn-primary > i,
.overview-filter > .filter > .btn-primary > i,
.overview-filter .new-user > .add-user-modal-btn > i,
.overview-filter > .filter > .add-user-modal-btn > i {
  color: inherit !important;
  font-size: 0.95em !important;
}

.filter .new-user > .btn-success,
.overview-filter .new-user > .btn-success,
.overview-filter > .filter > .btn-success {
  background: var(--accent-green, #16a34a) !important;
  color: #fff !important;
  border-color: var(--accent-green, #16a34a) !important;
}
.filter .new-user > .btn-success:hover,
.overview-filter .new-user > .btn-success:hover,
.overview-filter > .filter > .btn-success:hover {
  background: color-mix(in srgb, var(--accent-green, #16a34a) 88%, #000 12%) !important;
  border-color: color-mix(in srgb, var(--accent-green, #16a34a) 88%, #000 12%) !important;
}

.filter .new-user > .btn-default,
.filter .new-user > a.btn-default,
.filter .new-user > button.btn-default,
.overview-filter .new-user > .btn-default,
.overview-filter > .filter > .btn-default,
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn) {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.filter .new-user > .btn-default:hover,
.overview-filter .new-user > .btn-default:hover,
.overview-filter > .filter > .btn-default:hover,
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn):hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}

.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn)[style*="color"] {
  color: var(--color-text-primary) !important;
}
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn) > img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.75 !important;
}
.overview-filter > .filter > a:not(.btn):not(.filter-modal-btn):hover > img {
  opacity: 1 !important;
}
html.dark-mode .overview-filter > .filter > a:not(.btn):not(.filter-modal-btn) > img {
  filter: invert(1) brightness(1.2);
  opacity: 0.85 !important;
}

.filter-modal-btn,
.filter > .filter-modal-btn,
.overview-filter .filter > .filter-modal-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--control-height) !important;
  height: var(--control-height) !important;
  min-width: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-secondary) !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.filter-modal-btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
}
.filter-modal-btn img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.75;
  filter: none;
}
html.dark-mode .filter-modal-btn img {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
}

.storys-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
  background: transparent !important;
  width: 100% !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}
.storys-container .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px 10px !important;
  margin: 0 8px 0 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  height: auto !important;
  line-height: 1.4 !important;
  background: transparent !important;
}
.storys-container .navbar-brand i,
.storys-container .navbar-brand .fa {
  color: var(--accent-blue) !important;
  font-size: 16px !important;
}
.storys-container .sub-menu-item {
  padding: 4px 14px 4px !important;
  margin: 0 !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  border-bottom: 2px solid transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: color .15s ease, border-color .15s ease;
}
.storys-container .sub-menu-item:hover {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--color-border-primary) !important;
}
.storys-container .sub-menu-item.active {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--accent-blue) !important;
  font-weight: 600 !important;
  background: transparent !important;
}
.storys-container::-webkit-scrollbar { height: 4px !important; }
.storys-container::-webkit-scrollbar-thumb { background: var(--color-border-secondary) !important; border-radius: 999px !important; }
.storys-container::-webkit-scrollbar-track { background: transparent !important; }

.overview-filter {
  align-items: center !important;
}
.overview-filter > div[style*="display: flex"],
.overview-filter > .actions,
.overview-filter > .right {
  align-items: center !important;
  justify-content: flex-end !important;
}
.overview-filter .new-user {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.overview-filter .filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.dt-button-collection {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  padding: 6px !important;
  min-width: 200px !important;
}
.dt-button-collection > .dt-button,
.dt-button-collection > li.dt-button,
.dt-button-collection > li {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 1px 0 !important;
  border-radius: var(--border-radius-sm) !important;
  list-style: none !important;
}
.dt-button-collection > .dt-button > a,
.dt-button-collection > li.dt-button > a,
.dt-button-collection > li > a {
  display: block !important;
  padding: 6px 12px !important;
  color: var(--color-text-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: var(--border-radius-sm) !important;
  background: transparent !important;
  cursor: pointer;
}
.dt-button-collection > .dt-button:hover,
.dt-button-collection > .dt-button:hover > a,
.dt-button-collection > li.dt-button:hover > a {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.dt-button-collection > .dt-button.active,
.dt-button-collection > li.dt-button.active {
  background: var(--color-background-info) !important;
}
.dt-button-collection > .dt-button.active > a,
.dt-button-collection > li.dt-button.active > a {
  color: var(--color-text-info) !important;
  font-weight: 600 !important;
}
.dt-button-collection > .dt-button.active > a::before,
.dt-button-collection > li.dt-button.active > a::before {
  content: "\2713";
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  color: var(--color-text-info);
  font-weight: 700;
}
html.dark-mode .dt-button-collection > .dt-button > a,
html.dark-mode .dt-button-collection > li.dt-button > a {
  color: var(--color-text-primary) !important;
}

.dt-buttons .dt-button,
.dt-buttons button.dt-button {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
  box-shadow: none !important;
}
.dt-buttons .dt-button:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
}
.pagination > li.paginate_button,
.pagination > li.paginate_button.previous,
.pagination > li.paginate_button.next,
.pagination > li.paginate_button.first,
.pagination > li.paginate_button.last,
.pagination > li.paginate_button.disabled,
.pagination > li.paginate_button.active {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: var(--border-radius-md) !important;
}
.pagination > li.paginate_button > a,
.pagination > li.paginate_button > span {
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 5px 11px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  display: inline-block !important;
  text-decoration: none !important;
  margin: 0 !important;
  min-width: 32px !important;
  text-align: center !important;
}
.pagination > li.paginate_button > a:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}
.pagination > li.paginate_button.active > a,
.pagination > li.paginate_button.active > span,
.pagination > li.paginate_button.active > a:hover {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.pagination > li.paginate_button.disabled > a,
.pagination > li.paginate_button.disabled > span,
.pagination > li.paginate_button.disabled > a:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-tertiary) !important;
  border-color: var(--color-border-tertiary) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.pagination > li:not(.paginate_button) {
  background: transparent !important;
  border: 0 !important;
}
.pagination > li:not(.paginate_button) > a,
.pagination > li:not(.paginate_button) > span {
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  margin: 0 2px !important;
}
.pagination { gap: 0 !important; }
.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
}
.input-group > .input-group-addon,
.input-group > .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--button-padding-x) !important;
  min-width: var(--control-min-height) !important;
  height: auto !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: var(--body-font-size) !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.input-group > .input-group-addon:first-child,
.input-group > .input-group-text:first-child {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}
.input-group > .input-group-addon:last-child,
.input-group > .input-group-text:last-child {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}
.input-group > .form-control,
.input-group > input,
.input-group > select,
.input-group > textarea {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.input-group > .form-control:first-child,
.input-group > input:first-child,
.input-group > select:first-child,
.input-group > textarea:first-child {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
}
.input-group > .form-control:last-child,
.input-group > input:last-child,
.input-group > select:last-child,
.input-group > textarea:last-child {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
}

.input-group > .select2-container { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container .select2-selection--multiple {
  border-radius: 0 !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
}
.input-group > .input-group-addon:first-child + select.form-control,
.input-group > .input-group-addon:first-child + select,
.input-group > .input-group-addon:first-child + .select2-container .select2-selection {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}
.input-group > .select2-container:last-child .select2-selection,
.input-group > .select2-container:last-of-type .select2-selection {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
}
.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: var(--select2-rendered-line-height) !important;
  padding-left: var(--button-padding-x) !important;
  color: var(--color-text-primary) !important;
}
.input-group > .select2-container .select2-selection--single .select2-selection__arrow {
  height: var(--control-min-height) !important;
}

.input-group:focus-within > .input-group-addon,
.input-group:focus-within > .input-group-text,
.input-group:focus-within > .form-control,
.input-group:focus-within > input,
.input-group:focus-within > select,
.input-group:focus-within > .select2-container .select2-selection {
  border-color: var(--color-text-info) !important;
}
.input-group:focus-within > .form-control,
.input-group:focus-within > input,
.input-group:focus-within > select {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  position: relative;
  z-index: 2;
}

main .main-container,
main > .main-container,
.main-container {
  margin: 2.063rem 3.563rem !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  main .main-container,
  main > .main-container,
  .main-container {
    margin: 1rem !important;
  }
}
.daterangepicker {
  max-width: 700px !important;
  width: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding: 8px !important;
}
.daterangepicker .ranges {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  border-right: 0.5px solid var(--color-border-tertiary) !important;
}
.daterangepicker .drp-calendar {
  flex: 1 1 240px !important;
  max-width: 100% !important;
  padding: 6px !important;
  margin: 0 !important;
}
.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
  border: none !important;
  margin: 0 !important;
}
.daterangepicker .drp-calendar.left {
  border-right: 0.5px solid var(--color-border-tertiary) !important;
}
.daterangepicker .calendar-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 1px !important;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.daterangepicker .drp-buttons {
  flex: 1 0 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding-top: 8px !important;
}

@media (max-width: 720px) {
  .daterangepicker { padding: 6px !important; }
  .daterangepicker .ranges {
    border-right: 0 !important;
    border-bottom: 0.5px solid var(--color-border-tertiary) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .daterangepicker .ranges ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .daterangepicker .ranges li {
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
  }
  .daterangepicker .drp-calendar.left {
    border-right: 0 !important;
    border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  }
  .daterangepicker .drp-calendar { flex: 1 1 100% !important; }
}

.dt-button-collection.dropdown-menu,
.dt-button-collection {
  min-width: 180px !important;
  max-width: 240px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
@media (min-width: 1200px) {
  .dt-button-collection.dropdown-menu,
  .dt-button-collection {
    max-width: 220px !important;
    width: auto !important;
  }
}
.dt-button-collection > .dt-button > a,
.dt-button-collection > li.dt-button > a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.nav-tabs {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  margin-bottom: 18px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
  gap: 0 !important;
  position: relative;
}
.nav-tabs::-webkit-scrollbar { height: 3px !important; }
.nav-tabs::-webkit-scrollbar-thumb { background: var(--color-border-secondary) !important; border-radius: 999px !important; }
.nav-tabs::-webkit-scrollbar-track { background: transparent !important; }

.nav-tabs > li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  float: none !important;
  border: 0 !important;
  background: transparent !important;
}
.nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 9px 13px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border-bottom: 2px solid transparent !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease;
}
.nav-tabs > li > a > i,
.nav-tabs > li > a > .fa,
.nav-tabs > li > a > .fas,
.nav-tabs > li > a > .far {
  font-size: 12.5px !important;
  width: auto !important;
  margin-right: 0 !important;
  color: inherit !important;
  opacity: 0.85;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  color: var(--color-text-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: var(--color-border-primary) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--color-text-primary) !important;
}
.nav-tabs > li.active > a > i,
.nav-tabs > li.active > a > .fa,
.nav-tabs > li.active > a > .fas {
  color: var(--accent-blue) !important;
  opacity: 1;
}

.nav-tabs {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12px,
    #000 calc(100% - 24px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}

.overview-filter > .nav-tabs {
  margin-top: 12px !important;
  width: 100% !important;
  flex-basis: 100% !important;
  order: 99;
}

@media (max-width: 540px) {
  .nav-tabs > li > a {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
}
.input-group > .input-group-btn,
.input-group > span.input-group-btn,
.input-group .input-group-btn {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  position: relative;
  white-space: nowrap !important;
}
.input-group > .input-group-btn > .btn,
.input-group .input-group-btn > .btn,
.input-group > .input-group-btn > button,
.input-group .input-group-btn > button,
.input-group > .input-group-btn > a.btn,
.input-group .input-group-btn > a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
  transition: background-color .15s ease, border-color .15s ease;
}
.input-group > .input-group-btn > .btn:hover,
.input-group .input-group-btn > .btn:hover {
  background: color-mix(in srgb, var(--color-background-secondary) 70%, var(--color-text-primary) 10%) !important;
  border-color: var(--color-border-primary) !important;
  z-index: 3;
}
.input-group > .input-group-btn > .btn:focus,
.input-group .input-group-btn > .btn:focus {
  outline: none !important;
  border-color: var(--color-text-info) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 18%, transparent) !important;
  z-index: 4;
}

.input-group > .input-group-btn:first-child > .btn,
.input-group .input-group-btn:first-child > .btn {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

.input-group > .input-group-btn:last-child > .btn,
.input-group .input-group-btn:last-child > .btn {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left-width: 0 !important;
}

.input-group > .select2-container:has(+ .input-group-btn) .select2-selection,
.input-group > .select2-container + .input-group-btn ~ * {
}
.input-group > .select2-container:nth-last-child(2) .select2-selection--single,
.input-group > .select2-container:nth-last-child(2) .select2-selection--multiple {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-width: 0 !important;
}

.input-group > .form-control:nth-last-child(2),
.input-group > input:nth-last-child(2),
.input-group > select:nth-last-child(2),
.input-group > textarea:nth-last-child(2) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-btn:first-child + .form-control,
.input-group > .input-group-btn:first-child + input,
.input-group > .input-group-btn:first-child + select,
.input-group > .input-group-btn:first-child + textarea,
.input-group > .input-group-btn:first-child + .select2-container .select2-selection {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.input-group .input-group-btn > .btn.btn-default.bg-white,
.input-group .input-group-btn > .btn.btn-flat.bg-white,
.input-group .input-group-btn > .btn.btn-default {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.input-group .input-group-btn > .btn .text-primary,
.input-group .input-group-btn > .btn i.text-primary {
  color: var(--accent-blue) !important;
}

.input-group > .input-group-btn:hover { z-index: 3; }
.input-group .input-group-btn > .btn > svg,
.input-group .input-group-btn > .btn > .icon,
.input-group .input-group-btn > .btn > i.fa,
.input-group .input-group-btn > .btn > i.fas,
.input-group .input-group-btn > .btn > i.far,
.input-group .input-group-btn > .btn > i.icon-tabler {
  width: 18px !important;
  height: 18px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.input-group .input-group-btn > .btn[style*="border"],
.input-group .input-group-btn > .btn.add_new_customer,
.input-group .input-group-btn > .btn.pay_sale_due {
  border-top: 0.5px solid var(--color-border-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-secondary) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-sizing: border-box !important;
}
.input-group .input-group-btn:last-child > .btn[style*="border"],
.input-group .input-group-btn:last-child > .btn.add_new_customer,
.input-group .input-group-btn:last-child > .btn.pay_sale_due {
  border-right: 0.5px solid var(--color-border-secondary) !important;
}

html.dark-mode .input-group > .input-group-btn > .btn,
html.dark-mode .input-group .input-group-btn > .btn,
html.dark-mode .input-group .input-group-btn > .btn.btn-default.bg-white {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
}
.pos-tab-menu {
  padding: 0 !important;
}
.pos-tab-menu .list-group {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
}
.pos-tab-menu .list-group .list-group-item,
.pos-tab-menu .list-group > a.list-group-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
  cursor: pointer;
}
.pos-tab-menu .list-group .list-group-item:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.pos-tab-menu .list-group .list-group-item.active,
.pos-tab-menu .list-group .list-group-item.active:hover,
.pos-tab-menu .list-group .list-group-item.active:focus {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  font-weight: 600 !important;
  border: 0 !important;
}
.pos-tab-menu .list-group .list-group-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-blue);
}
.secondary-color-icon,
i.secondary-color-icon,
.list-group-item > .secondary-color-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 13px !important;
  color: var(--color-text-tertiary) !important;
  background: transparent !important;
  border-radius: var(--border-radius-sm) !important;
  flex: 0 0 22px !important;
  text-align: center !important;
  line-height: 1 !important;
  transition: color .15s ease, background-color .15s ease;
}
.list-group-item:hover > .secondary-color-icon,
.pos-tab-menu .list-group .list-group-item:hover > .secondary-color-icon {
  color: var(--color-text-primary) !important;
}
.list-group-item.active > .secondary-color-icon,
.pos-tab-menu .list-group .list-group-item.active > .secondary-color-icon,
.list-group-item.active > i.secondary-color-icon {
  color: var(--accent-blue) !important;
  background: color-mix(in srgb, var(--accent-blue) 14%, transparent) !important;
}
.list-group-item > .secondary-color-icon.secondary-color,
.list-group-item > i.secondary-color {
  color: var(--color-text-tertiary) !important;
}
.list-group-item.active > .secondary-color-icon.secondary-color,
.list-group-item.active > i.secondary-color {
  color: var(--accent-blue) !important;
}

@media (min-width: 992px) {
  .pos-tab-menu {
    position: sticky;
    top: 64px;
    align-self: flex-start;
  }
}

@media (max-width: 991px) {
  .pos-tab-menu,
  .col-sm-2.pos-tab-menu,
  .col-md-2.pos-tab-menu,
  .col-lg-2.pos-tab-menu {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 14px !important;
  }
  .pos-tab-menu .list-group {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: var(--border-radius-md) !important;
    width: 100% !important;
  }
  .pos-tab-menu .list-group .list-group-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .pos-tab-menu .list-group .list-group-item.active::before {
    display: none !important;
  }
  .pos-tab-menu .list-group .list-group-item.active {
    box-shadow: inset 0 -2px 0 0 var(--accent-blue) !important;
    border-radius: var(--border-radius-md) !important;
  }
}

html.dark-mode .pos-tab-menu .list-group {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-tertiary) !important;
}
html.dark-mode .pos-tab-menu .list-group .list-group-item {
  color: var(--color-text-secondary) !important;
}
html.dark-mode .pos-tab-menu .list-group .list-group-item:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
html.dark-mode .pos-tab-menu .list-group .list-group-item.active {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}
.btn.btn-big,
.btn-big,
button.btn-big,
.save-btn,
.btn.save-btn,
button.save-btn,
.text-center > .btn,
.text-center > button.btn,
.text-center .btn-primary.btn-big,
.row > .col-sm-12.text-center > .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  min-width: 200px !important;
  min-height: 40px !important;
  padding: 9px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: var(--border-radius-md) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.btn.btn-big > i,
.save-btn > i,
.text-center > .btn > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.btn.btn-big.btn-primary,
.save-btn.btn-primary,
button.save-btn.btn-primary {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-text-primary) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
.btn.btn-big.btn-primary:hover,
.save-btn.btn-primary:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
}

@media (max-width: 540px) {
  .text-center > .btn.btn-big,
  .text-center > .save-btn,
  .row > .col-sm-12.text-center > .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}
.pos-mobile-button {
  position: fixed !important;
  right: 16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1040 !important;
  display: none;
}
@media (max-width: 768px) {
  .pos-mobile-button {
    display: block !important;
  }
}
.pos-mobile-button a,
.pos-mobile-button > a.pos {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  min-width: 56px !important;
  padding: 0 18px !important;
  background: var(--accent-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--accent-blue) 35%, transparent),
    0 2px 6px rgba(15, 23, 42, 0.18) !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pos-mobile-button a:hover,
.pos-mobile-button > a.pos:hover {
  background: color-mix(in srgb, var(--accent-blue) 92%, #000 8%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--accent-blue) 40%, transparent),
    0 3px 8px rgba(15, 23, 42, 0.22) !important;
}
.pos-mobile-button a:active,
.pos-mobile-button > a.pos:active {
  transform: translateY(0);
}
.pos-mobile-button a svg,
.pos-mobile-button a > svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
}
.pos-mobile-button a span {
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 380px) {
  .pos-mobile-button a,
  .pos-mobile-button > a.pos {
    min-width: 48px !important;
    width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .pos-mobile-button a span { display: none !important; }
}
.language-btn,
button.language-btn,
.filter > .language-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 var(--button-padding-x) !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.language-btn:hover,
button.language-btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}

.language-btn.language-btn--primary,
button.language-btn.language-btn--primary,
.filter > .language-btn.language-btn--primary {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.language-btn.language-btn--primary:hover,
button.language-btn.language-btn--primary:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}

.language-btn.language-btn--secondary,
.language-btn.language-btn--ghost {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.language-btn.language-btn--danger {
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border-color: transparent !important;
}

.overview-filter > .filter > .language-btn,
.overview-filter > .filter > button.language-btn {
  margin: 0 !important;
}
.panel-collapse.collapse:not(.in) {
  display: none;
}
.panel-collapse.collapse.in {
  display: block;
}
.panel-collapse.collapsing {
  position: relative;
  overflow: hidden;
  transition: height 0.3s ease;
}

.panel-collapse > .language-filter-card,
#collapseTranslationsFilter > .language-filter-card,
#collapseUntranslatedFilter > .language-filter-card,
#collapseProblemsFilter > .language-filter-card,
#collapseBusinessOverridesFilter > .language-filter-card,
#collapseFilter > .language-filter-card {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}
.filter-modal-btn[aria-expanded="true"] {
  background: var(--color-background-info) !important;
  border-color: var(--color-text-info) !important;
}
.filter-modal-btn[aria-expanded="true"] img {
  opacity: 1 !important;
  filter: invert(34%) sepia(89%) saturate(1500%) hue-rotate(196deg) brightness(95%) contrast(95%);
}
html.dark-mode .filter-modal-btn[aria-expanded="true"] img {
  filter: brightness(1.5);
}

.daterangepicker:not([style*="display: block"]):not([style*="display:block"]) {
  display: none !important;
}
.daterangepicker[style*="display: block"],
.daterangepicker[style*="display:block"] {
  display: flex !important;
  flex-wrap: wrap !important;
}

.daterangepicker .drp-calendar[style*="display: none"],
.daterangepicker .drp-calendar[style*="display:none"] {
  display: none !important;
}
.daterangepicker.show-calendar .drp-calendar.left,
.daterangepicker.show-calendar .drp-calendar.right,
.daterangepicker .drp-calendar.left:not([style*="display: none"]):not([style*="display:none"]),
.daterangepicker .drp-calendar.right:not([style*="display: none"]):not([style*="display:none"]) {
  display: block !important;
  flex: 1 1 240px !important;
  min-width: 240px !important;
  padding: 6px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.daterangepicker.show-calendar .calendar-table,
.daterangepicker .drp-calendar:not([style*="display: none"]) .calendar-table {
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
}
.daterangepicker.show-calendar .calendar-table table,
.daterangepicker .drp-calendar:not([style*="display: none"]) .calendar-table table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
}

.daterangepicker.single .drp-calendar.right {
  display: none !important;
}
.daterangepicker .ranges li[data-range-key="Custom Range"] {
  cursor: pointer !important;
  pointer-events: auto !important;
}
.daterangepicker.show-calendar.show-ranges {
  max-width: 700px !important;
  overflow-x: auto !important;
}
@media (max-width: 720px) {
  .daterangepicker.show-calendar.show-ranges {
    max-width: calc(100vw - 16px) !important;
  }
  .daterangepicker.show-calendar .drp-calendar.left,
  .daterangepicker.show-calendar .drp-calendar.right {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

.daterangepicker .calendar-time[style*="display: none"],
.daterangepicker .calendar-time[style*="display:none"] {
  display: none !important;
}
.btn.btn-xs.btn-primary,
.btn.btn-sm.btn-primary,
button.btn.btn-xs.btn-primary,
button.btn.btn-sm.btn-primary,
a.btn.btn-xs.btn-primary,
a.btn.btn-sm.btn-primary {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
  height: auto !important;
  width: auto !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  border-radius: var(--border-radius-md) !important;
}
.btn.btn-xs.btn-primary:hover,
.btn.btn-sm.btn-primary:hover,
button.btn.btn-xs.btn-primary:hover,
button.btn.btn-sm.btn-primary:hover,
a.btn.btn-xs.btn-primary:hover,
a.btn.btn-sm.btn-primary:hover {
  background: color-mix(in srgb, var(--color-background-info) 70%, var(--color-text-info) 15%) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-primary > i,
.btn.btn-sm.btn-primary > i,
.btn.btn-xs.btn-primary .glyphicon,
.btn.btn-sm.btn-primary .glyphicon {
  color: inherit !important;
}

.btn.btn-xs.btn-info,
.btn.btn-sm.btn-info {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-success,
.btn.btn-sm.btn-success {
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-warning,
.btn.btn-sm.btn-warning {
  background: var(--color-background-warning) !important;
  color: var(--color-text-warning) !important;
  border-color: transparent !important;
}
.btn.btn-xs.btn-danger,
.btn.btn-sm.btn-danger {
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border-color: transparent !important;
}

.amount.text-center > form,
.amount.text-center form {
  display: inline-block !important;
  width: auto !important;
  margin: 0 auto !important;
}
.amount.text-center {
  text-align: center !important;
}
.amount.text-center > form > .btn-primary,
.amount.text-center form button.btn-primary,
.amount.text-center form .btn.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 140px !important;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  margin: 0 auto !important;
}
.amount.text-center > form > .btn-primary:hover,
.amount.text-center form button.btn-primary:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  color: var(--color-background-primary) !important;
}

.text-center > .btn,
.text-center > form > .btn,
.text-center > form > button.btn,
.text-center form > .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
}

html.dark-mode .btn.btn-xs.btn-primary,
html.dark-mode .btn.btn-sm.btn-primary {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
}
html.dark-mode .amount.text-center form .btn.btn-primary {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
}
div.pos-tab-menu div.list-group > a.active::after,
div.pos-tab-menu div.list-group > a.active:after,
.pos-tab-menu .list-group > a.active::after,
.pos-tab-menu .list-group > a.active:after,
.pos-tab-menu .list-group .list-group-item.active::after,
.pos-tab-menu .list-group .list-group-item.active:after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
}

.list-group > .list-group-item.active::after,
.list-group > a.list-group-item.active::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.pagination {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 8px 0 !important;
  padding: 0 !important;
}
.pagination > li.paginate_button {
  margin: 0 !important;
}
.pagination > li.paginate_button > a,
.pagination > li.paginate_button > span,
.pagination > li:not(.paginate_button) > a,
.pagination > li:not(.paginate_button) > span {
  margin: 0 !important;
  border-radius: 0 !important;
  border-right-width: 0 !important;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-top-left-radius: var(--border-radius-md) !important;
  border-bottom-left-radius: var(--border-radius-md) !important;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: var(--border-radius-md) !important;
  border-bottom-right-radius: var(--border-radius-md) !important;
  border-right-width: 0.5px !important;
}
.pagination > li.paginate_button + li.paginate_button > a,
.pagination > li.paginate_button + li.paginate_button > span {
  margin-left: -0.5px !important;
}
.btn.btn-xs,
.btn.btn-sm,
button.btn.btn-xs,
button.btn.btn-sm,
a.btn.btn-xs,
a.btn.btn-sm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.btn.btn-xs > i,
.btn.btn-sm > i,
.btn.btn-xs > .glyphicon,
.btn.btn-sm > .glyphicon,
.btn.btn-xs > .fa,
.btn.btn-sm > .fa,
.btn.btn-xs > .fas,
.btn.btn-sm > .fas {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  top: 0 !important;
  vertical-align: middle !important;
}

.btn.btn-xs > .glyphicon,
.btn.btn-sm > .glyphicon {
  position: relative !important;
  top: 0 !important;
}
td > .btn.btn-xs + .btn.btn-xs,
td .btn.btn-xs {
  vertical-align: middle !important;
  height: 26px !important;
  min-height: 26px !important;
}
.crm-data-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.crm-data-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.crm-data-item:hover {
  border-color: var(--color-border-secondary) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06) !important;
}
.crm-data-item h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  line-height: 1.2 !important;
}
.crm-data-item .data-numbers,
.crm-data-item > .data-numbers {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  line-height: 1.2 !important;
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: -0.01em !important;
}
.crm-data-item .data-numbers .text-warning {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-warning) !important;
  letter-spacing: 0 !important;
}
.crm-data-item #syncAllBtn,
.crm-data-item .btn.btn-primary {
  margin-top: 4px !important;
  width: 100% !important;
  justify-content: center !important;
}

.crm-data-item:nth-child(1)::before,
.crm-data-item:nth-child(2)::before,
.crm-data-item:nth-child(3)::before,
.crm-data-item:nth-child(4)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
}
.crm-data-item:nth-child(1)::before { background: var(--color-text-tertiary) !important; }
.crm-data-item:nth-child(2)::before { background: var(--accent-teal) !important; }
.crm-data-item:nth-child(3)::before { background: var(--accent-red) !important; }
.crm-data-item:nth-child(4)::before { background: var(--accent-blue) !important; }
.tax-tab-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 0 14px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
}
.tax-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: var(--border-radius-sm) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  line-height: 1.4 !important;
}
.tax-tab-btn:hover {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
}
.tax-tab-btn.is-active,
.tax-tab-btn[aria-selected="true"] {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 0.5px var(--color-border-tertiary) !important;
}

.tax-report-shell {
  --tax-tab-active-bg: var(--color-background-primary) !important;
  --tax-tab-active-color: var(--color-text-primary) !important;
  --tax-tab-bar-bg: var(--color-background-secondary) !important;
}
.card-wrapper > .nav-tabs.project-detail-tabs,
.nav-tabs.project-detail-tabs {
  margin: 0 -2px 16px !important;
  padding: 0 !important;
  width: auto !important;
  flex-basis: auto !important;
  order: 0 !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 10 !important;
  background: var(--color-background-secondary) !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%) !important;
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%) !important;
}

html.dark-mode .nav-tabs.project-detail-tabs {
  background: var(--color-background-secondary) !important;
}

.btn.btn-block,
button.btn.btn-block,
a.btn.btn-block,
.btn-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.btn.btn-block.btn-primary,
button.btn.btn-block.btn-primary,
a.btn.btn-block.btn-primary {
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border: 0.5px solid transparent !important;
}
.btn.btn-block.btn-primary:hover {
  background: color-mix(in srgb, var(--color-background-info) 70%, var(--color-text-info) 15%) !important;
  color: var(--color-text-info) !important;
}
.btn.btn-block > i,
.btn-block > i { font-size: 12.5px !important; }

.last_sync_cat,
.last_sync_cat > small {
  display: block !important;
  text-align: center !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
  line-height: 1.4 !important;
}

#add-modifier-table thead > tr > th:last-child,
#add-modifier-table tbody > tr > td:last-child {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#add-modifier-table tbody > tr > td:last-child .btn.add-modifier-row,
#add-modifier-table tbody > tr > td:last-child .btn.remove-modifier-row {
  float: none !important;         
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  width: var(--control-height-xs) !important;
  height: var(--control-height-xs) !important;
  min-height: var(--control-height-xs) !important;
  padding: 0 !important;
}
#add-modifier-table tbody > tr > td > .form-group {
  margin-bottom: 0 !important;
}

.select2-container--default .select2-selection--multiple {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-height: var(--control-min-height) !important;
  max-height: none !important;
  height: auto !important;
  padding: calc(var(--control-padding-y) - 1px) calc(var(--control-padding-x) - 2px) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-primary) !important;
  cursor: text !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  row-gap: 4px !important;
  overflow: visible !important;
}
.select2-container .select2-selection--multiple {
  max-height: none !important;
  height: auto !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple:focus-within {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  min-height: calc(var(--control-min-height) - var(--control-padding-y) * 2) !important;
}
.select2-container--default .select2-search--inline {
  display: flex !important;
  flex: 1 1 80px !important;
  min-width: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
  width: 100% !important;
  min-width: 80px !important;
  height: calc(var(--control-min-height) - var(--control-padding-y) * 2 - 2px) !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: var(--body-font-size) !important;
  color: var(--color-text-primary) !important;
  outline: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--color-text-tertiary) !important;
  opacity: 1 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  height: calc(var(--control-min-height) - var(--control-padding-y) * 2 - 2px) !important;
  min-height: 22px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 999px !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  line-height: 1 !important;
  cursor: default !important;
  white-space: nowrap !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, border-color .15s ease;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
  background: var(--color-background-tertiary) !important;
  border-color: var(--color-border-secondary) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  order: 2 !important;
  margin: 0 -2px 0 2px !important;
  padding: 0 !important;
  color: var(--color-text-tertiary) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background .15s ease, color .15s ease;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--color-text-danger) !important;
  background: color-mix(in srgb, var(--color-text-danger) 15%, transparent) !important;
}

.add-product-price-table {
  table-layout: fixed !important;
  width: 100% !important;
}
.add-product-price-table th,
.add-product-price-table td {
  vertical-align: top !important;
  padding: 8px !important;
  word-break: break-word !important;
}
.add-product-price-table td > .col-sm-6,
.add-product-price-table td > [class*="col-"] {
  width: 100% !important;
  float: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}
.add-product-price-table td .form-control,
.add-product-price-table td input.form-control {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12.5px !important;
}
.add-product-price-table td label {
  font-size: 11.5px !important;
  margin-bottom: 2px !important;
  color: var(--color-text-secondary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.add-product-price-table td .help-block {
  font-size: 10.5px !important;
  margin: 4px 0 0 !important;
  color: var(--color-text-tertiary) !important;
}

@media (max-width: 768px) {
  .add-product-price-table,
  .add-product-price-table tbody,
  .add-product-price-table tr,
  .add-product-price-table th,
  .add-product-price-table td {
    display: block !important;
    width: 100% !important;
  }
  .add-product-price-table thead,
  .add-product-price-table > tbody > tr > th {
    display: none !important;
  }
  .add-product-price-table > tbody > tr {
    margin-bottom: 12px !important;
    border: 0.5px solid var(--color-border-tertiary) !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
  }
  .add-product-price-table > tbody > tr > td {
    border: 0 !important;
    border-bottom: 0.5px solid var(--color-border-tertiary) !important;
    padding: 10px 12px !important;
  }
  .add-product-price-table > tbody > tr > td:last-child {
    border-bottom: 0 !important;
  }
  .add-product-price-table > tbody > tr > td:nth-child(1)::before { content: "Purchase Price"; }
  .add-product-price-table > tbody > tr > td:nth-child(2)::before { content: "Profit Margin %"; }
  .add-product-price-table > tbody > tr > td:nth-child(3)::before { content: "Default Selling Price"; }
  .add-product-price-table > tbody > tr > td:nth-child(4)::before { content: "Product Image"; }
  .add-product-price-table > tbody > tr > td::before {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--color-text-tertiary) !important;
  }
}

.tier-pricing-card {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: 14px !important;
  margin: 12px 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
.tier-pricing-card__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.tier-pricing-card__head > div {
  flex: 1 1 200px !important;
  min-width: 0 !important;
}
.tier-pricing-card__head h5 {
  margin: 0 0 2px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}
.tier-pricing-card__head p {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.tier-pricing-card__head .add-tier-row,
.tier-pricing-card__head .btn.btn-success {
  flex-shrink: 0 !important;
  min-width: 110px !important;
}

.tier-pricing-card .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 0 !important;
  margin: 0 !important;
}
.tier-pricing-table {
  min-width: 640px !important;
  margin: 0 !important;
}
.tier-pricing-table th,
.tier-pricing-table td {
  vertical-align: middle !important;
  padding: 8px !important;
  font-size: 12.5px !important;
}
.tier-pricing-table .form-control {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 12.5px !important;
}
.remove-tier-row,
.btn.btn-xs.btn-danger.remove-tier-row,
.btn.btn-xs.remove-tier-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border: 0 !important;
}
.remove-tier-row:hover,
.btn.btn-xs.btn-danger.remove-tier-row:hover {
  background: color-mix(in srgb, var(--color-background-danger) 60%, var(--color-text-danger) 25%) !important;
  color: var(--color-text-danger) !important;
}

.add-tier-row,
.btn.btn-xs.btn-success.add-tier-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border: 0 !important;
}

@media (max-width: 540px) {
  .tier-pricing-card { padding: 10px !important; }
  .tier-pricing-card__head { gap: 8px !important; padding-bottom: 8px !important; margin-bottom: 8px !important; }
  .tier-pricing-card__head .add-tier-row { width: 100% !important; }
}
.pos-wrapper .pos-content .pos-table .pos-product-table > thead > tr,
.pos-wrapper .pos-content .pos-table .pos-product-table > thead > tr > th,
#pos_table.pos-product-table > thead > tr,
#pos_table.pos-product-table > thead > tr > th {
  text-align: center !important;
  vertical-align: middle !important;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > thead > tr > th.pos-th-product,
#pos_table.pos-product-table > thead > tr > th.pos-th-product {
  text-align: left !important;
  padding-left: 12px !important;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td,
#pos_table.pos-product-table > tbody > tr > td {
  text-align: center !important;
  vertical-align: middle !important;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-product-name-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-product-name-cell {
  text-align: left !important;
  padding-left: 12px !important;
  position: relative;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-subtotal-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-subtotal-cell {
  text-align: center !important;
  white-space: nowrap;
}
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-tax-cell,
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-price-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-tax-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-price-cell {
  text-align: center !important;
}
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-tax-cell .select2-container,
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-tax-cell select,
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-price-cell input,
#pos_table.pos-product-table > tbody > tr > td.pos-tax-cell .select2-container,
#pos_table.pos-product-table > tbody > tr > td.pos-tax-cell select,
#pos_table.pos-product-table > tbody > tr > td.pos-price-cell input {
  margin-left: auto;
  margin-right: auto;
}

.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-qty-cell,
#pos_table.pos-product-table > tbody > tr > td.pos-qty-cell {
  text-align: center !important;
}
.pos-wrapper .pos-content .pos-table .pos-product-table > tbody > tr > td.pos-qty-cell .input-group,
#pos_table.pos-product-table > tbody > tr > td.pos-qty-cell .input-group {
  margin-left: auto;
  margin-right: auto;
}
.pos-product-table .pos-product-name-cell {
  position: relative;
}
.pos-product-table .pos-product-name-cell .pos-product-name-wrap {
  display: block;
  padding-left: 48px;
  min-height: 38px;
  position: relative;
}
.pos-product-table .pos-product-row-image {
  position: absolute;
  left: 6px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--color-background-secondary, #f4f4f5);
  border: 1px solid var(--color-border-primary, #e5e7eb);
}

@media (max-width: 1199.98px) {
  .pos-product-table .pos-product-name-cell .pos-product-name-wrap {
    padding-left: 0;
  }
  .pos-product-table .pos-product-row-image {
    display: none;
  }
}

.pos-product-table .pos-product-meta {
  margin-top: 4px;
}
.pos-product-table .pos-product-meta-stock.text-danger {
  color: var(--color-text-danger) !important;
}
#product_form_part .form-input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  border: 1.5px solid var(--color-border-secondary) !important;
  border-radius: 50% !important;
  background: var(--color-background-default) !important;
  vertical-align: middle !important;
  position: relative !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background-color .15s ease;
}
#product_form_part .form-input[type="radio"]:hover {
  border-color: var(--color-border-primary) !important;
}
#product_form_part .form-input[type="radio"]:checked {
  border-color: var(--color-text-primary) !important;
  background: var(--color-text-primary) !important;
  box-shadow: inset 0 0 0 3px var(--color-background-default) !important;
}
#product_form_part .form-label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-secondary) !important;
  width: 100% !important;
  transition: all .15s ease;
}
#product_form_part .form-input[type="radio"]:checked + .form-label,
#product_form_part .form-group:has(.form-input:checked) .form-label {
  border-color: var(--color-text-primary) !important;
  background: var(--color-background-default) !important;
  color: var(--color-text-default) !important;
}
#product_form_part .form-group:has(.form-input[type="radio"]) {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

#product_form_part h4 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-default) !important;
  margin: 18px 0 12px !important;
}
#product_form_part #add_variation,
.btn.bg-purple#add_variation {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-info) !important;
  color: var(--color-text-info) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color .15s ease;
}
#product_form_part #add_variation:hover,
.btn.bg-purple#add_variation:hover {
  background: color-mix(in srgb, var(--color-background-info) 60%, var(--color-text-info) 25%) !important;
  color: var(--color-text-info) !important;
}

#product_variation_form_part.add-product-price-table {
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  background: var(--color-background-default) !important;
  margin-bottom: 0 !important;
}
#product_variation_form_part.add-product-price-table > thead > tr > th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  border-top: 0 !important;
}
#product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td {
  padding: 12px !important;
  vertical-align: top !important;
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
}
#product_variation_form_part .variation_template {
  background: var(--color-background-default) !important;
}
.variation_value_table.blue-header {
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.variation_value_table.blue-header > thead > tr > th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  border-top: 0 !important;
  vertical-align: middle !important;
}
.variation_value_table.blue-header > thead > tr > th .pull-left,
.variation_value_table.blue-header > thead > tr > th .pull-right {
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-text-tertiary) !important;
}
.variation_value_table.blue-header > thead > tr > th small,
.variation_value_table.blue-header > thead > tr > th i {
  font-style: normal !important;
}
.variation_value_table.blue-header > tbody > tr > td {
  padding: 8px 10px !important;
  vertical-align: top !important;
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
}

.btn.btn-default.bg-white.btn-flat.apply-all,
.btn.apply-all.btn-sm.p-5-5 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-left: 0 !important;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.btn.apply-all:hover {
  background: color-mix(in srgb, var(--color-background-secondary) 50%, var(--color-text-primary) 18%) !important;
  color: var(--color-text-default) !important;
}
.btn.apply-all .fa-check-double,
.btn.apply-all .fas.fa-check-double {
  font-size: 11px !important;
}
.variation_value_table .input-group .form-control.input-sm {
  border-right: 0 !important;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md) !important;
}
.add_variation_value_row,
.btn.btn-success.btn-xs.add_variation_value_row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-success) !important;
  color: var(--color-text-success) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.add_variation_value_row:hover,
.btn.btn-success.btn-xs.add_variation_value_row:hover {
  background: color-mix(in srgb, var(--color-background-success) 60%, var(--color-text-success) 25%) !important;
  color: var(--color-text-success) !important;
}
.remove_variation_value_row,
.btn.btn-danger.btn-xs.remove_variation_value_row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.remove_variation_value_row:hover,
.btn.btn-danger.btn-xs.remove_variation_value_row:hover {
  background: color-mix(in srgb, var(--color-background-danger) 60%, var(--color-text-danger) 25%) !important;
  color: var(--color-text-danger) !important;
}

.variation_value_table .width-50.f-left {
  width: 50% !important;
  float: left !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}
.variation_value_table .width-50.f-left + .width-50.f-left {
  padding-right: 0 !important;
  padding-left: 4px !important;
}
.variation_value_table .width-50.f-left .form-control.input-sm {
  border-radius: var(--border-radius-md) !important;
}
.variation_value_table .width-50.f-left .input-group .form-control.input-sm {
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md) !important;
}

.variation_value_table input.variation_images[type="file"] {
  font-size: 12px !important;
  padding: 4px !important;
  background: var(--color-background-secondary) !important;
  border: 1px dashed var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  width: 100% !important;
  min-width: 140px !important;
}
#product_variation_form_part .variation_value_table {
  min-width: 920px !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:first-child {
  min-width: 180px !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:last-child {
  overflow-x: auto !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:last-child::-webkit-scrollbar {
  height: 8px !important;
}
#product_variation_form_part > tbody > tr.variation_row > td:last-child::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary) !important;
  border-radius: 4px !important;
}

.variation_value_table .tier-pricing-card {
  margin-top: 8px !important;
  padding: 10px !important;
  background: var(--color-background-secondary) !important;
}
.variation_value_table .tier-pricing-card__head h5 {
  font-size: 12px !important;
}
.variation_value_table .tier-pricing-card__head p {
  font-size: 11px !important;
}
.variation_value_table .tier-pricing-table {
  min-width: 580px !important;
}

@media (max-width: 540px) {
  #product_form_part > .row > .col-md-6 {
    width: 100% !important;
    float: none !important;
  }
  #product_form_part h4 {
    flex-wrap: wrap !important;
  }
}

#product_variation_form_part .variation_value_table {
  min-width: 1080px !important;
  table-layout: fixed !important;
}
.variation_value_table > thead > tr > th:nth-child(1) { width: 110px !important; }
.variation_value_table > thead > tr > th:nth-child(2) { width: 110px !important; }
.variation_value_table > thead > tr > th:nth-child(3) { width: 220px !important; }
.variation_value_table > thead > tr > th:nth-child(4) { width: 130px !important; }
.variation_value_table > thead > tr > th:nth-child(5) { width: auto !important; min-width: 240px !important; }
.variation_value_table > thead > tr > th:nth-child(6) { width: 140px !important; }
.variation_value_table > thead > tr > th:nth-child(7) { width: 50px !important; }
.variation_value_table > tbody > tr > td:nth-child(3)::after {
  content: "";
  display: block;
  clear: both;
}
.variation_value_table > tbody > tr > td:nth-child(3) > .width-50.f-left {
  width: calc(50% - 4px) !important;
  float: left !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.variation_value_table > tbody > tr > td:nth-child(3) > .width-50.f-left:first-child {
  margin-right: 8px !important;
}
.variation_value_table > tbody > tr > td:nth-child(3) .input-group {
  width: 100% !important;
  display: table !important;
}
.variation_value_table > tbody > tr > td:nth-child(3) .input-group .form-control {
  width: 100% !important;
}

.variation_value_table > tbody > tr > td:nth-child(4) .input-group {
  display: table !important;
  width: 100% !important;
}
.variation_value_table > tbody > tr > td:nth-child(4) .input-group .form-control {
  width: 100% !important;
}
.variation_value_table > tbody > tr > td:nth-child(5) > .form-control {
  width: 100% !important;
  margin-bottom: 8px !important;
}
.variation_value_table > tbody > tr > td:nth-child(5) > .form-control.hide {
  margin-bottom: 0 !important;
}

.variation_value_table .tier-pricing-card {
  margin: 0 !important;
  padding: 8px !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: none !important;
}
.variation_value_table .tier-pricing-card__head {
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px dashed var(--color-border-secondary) !important;
}
.variation_value_table .tier-pricing-card__head h5 {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.variation_value_table .tier-pricing-card__head p {
  display: none !important;
}
.variation_value_table .tier-pricing-card .add-tier-row {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.variation_value_table .tier-pricing-card .tier-pricing-table {
  min-width: 520px !important;
  margin: 0 !important;
}
.variation_value_table .tier-pricing-card .tier-pricing-table thead th {
  font-size: 10px !important;
  padding: 4px 6px !important;
}
.variation_value_table .tier-pricing-card .tier-pricing-table tbody td {
  padding: 4px 6px !important;
}

.variation_template_values_div .select2-container {
  width: 100% !important;
}
.variation_template_values_div label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--color-text-tertiary) !important;
  margin-bottom: 6px !important;
}

.variation_value_table.blue-header > tbody > tr {
  border-bottom: 1px solid var(--color-border-secondary) !important;
}
.variation_value_table.blue-header > tbody > tr:last-child {
  border-bottom: 0 !important;
}
.variation_value_table.blue-header > tbody > tr > td {
  border-color: transparent !important;
  border-right: 1px solid var(--color-border-secondary) !important;
  border-left: 0 !important;
}
.variation_value_table.blue-header > tbody > tr > td:first-child {
  border-left: 0 !important;
}
.variation_value_table.blue-header > tbody > tr > td:last-child {
  border-right: 0 !important;
}

.show_hide_icon {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--color-text-tertiary) !important;
  padding: 4px 8px !important;
  border-radius: var(--border-radius-md) !important;
  transition: color .15s ease, background-color .15s ease;
}
.show_hide_icon:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-background-secondary) !important;
}
.ltr .show_hide_icon { right: 6px !important; }
.rtl .show_hide_icon { left: 6px !important; }

.social-login-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 1.5rem 0 !important;
}
.social-login-divider::before,
.social-login-divider::after {
  content: "" !important;
  flex: 1 !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  margin: 0 12px !important;
}
.social-login-divider span {
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

.social-login-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  justify-content: center !important;
}
.social-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #ffffff !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
  border: 0 !important;
}
.social-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25);
  filter: brightness(1.05);
  color: #fff !important;
  text-decoration: none !important;
}
.social-login-btn i {
  margin-right: 8px !important;
  font-size: 1.05rem !important;
}
.social-login-btn.facebook   { background-color: #3b5998 !important; }
.social-login-btn.x-twitter  { background-color: #1da1f2 !important; }
.social-login-btn.linkedin   { background-color: #0077b5 !important; }
.social-login-btn.google     { background-color: #db4437 !important; }
.social-login-btn.github     { background-color: #24292e !important; }
.social-login-btn.gitlab     { background-color: #fc6d26 !important; }
.social-login-btn.bitbucket  { background-color: #205081 !important; }
.social-login-btn.slack      { background-color: #611f69 !important; }
.social-login-btn.twitch     { background-color: #6441a5 !important; }

.verify-container {
  background: var(--color-background-default) !important;
  border-radius: var(--border-radius-lg, 12px) !important;
  box-shadow: var(--shadow-md, 0 8px 32px -8px rgba(0,0,0,0.18)) !important;
  border: 1px solid var(--color-border-secondary) !important;
  max-width: 480px !important;
  width: 100% !important;
  padding: 2.25rem !important;
  text-align: center !important;
  color: var(--color-text-default) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.verify-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 14px 40px -10px rgba(0,0,0,0.22)) !important;
}
.verify-title {
  font-size: 1.6rem !important;
  margin-bottom: 0.6rem !important;
  font-weight: 700 !important;
  color: var(--color-text-default) !important;
}
.verify-subtitle {
  font-size: 0.95rem !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 1.5rem !important;
}
.email-display {
  border: 1px solid var(--color-border-secondary) !important;
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 0.85rem 1rem !important;
  margin: 1.25rem 0 !important;
  font-size: 1rem !important;
  color: var(--color-text-default) !important;
  font-weight: 500 !important;
  word-break: break-all !important;
}

.verify-container .form-group {
  margin-bottom: 1.25rem !important;
}
.verify-container .input-group {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}
.otp-input {
  width: 44px !important;
  height: 52px !important;
  text-align: center !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  background: var(--color-background-default) !important;
  color: var(--color-text-default) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.otp-input:focus {
  border-color: var(--color-text-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-primary) 18%, transparent) !important;
  outline: none !important;
}
.otp-input.filled {
  background: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-default)) !important;
  border-color: var(--color-text-primary) !important;
}

.verify-container .btn-link {
  background: none !important;
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
  font-size: 0.85rem !important;
  padding: 0 !important;
  border: 0 !important;
}
.verify-container .timer {
  font-weight: 600 !important;
  color: var(--color-text-warning, #d97706) !important;
  font-size: 1rem !important;
}
.verify-container .alert {
  padding: 0.85rem 1rem !important;
  margin: 0.75rem 0 !important;
  border-radius: var(--border-radius-md) !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  opacity: 0;
  transition: opacity .25s ease;
}
.verify-container .alert.show {
  opacity: 1;
}
.verify-container .alert-success {
  background: var(--color-background-success) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;
  color: var(--color-text-success) !important;
}
.verify-container .alert-danger {
  background: var(--color-background-danger) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-danger) 30%, transparent) !important;
  color: var(--color-text-danger) !important;
}
.verify-container .alert-warning {
  background: var(--color-background-warning, color-mix(in srgb, #d97706 15%, var(--color-background-default))) !important;
  border: 1px solid color-mix(in srgb, #d97706 30%, transparent) !important;
  color: var(--color-text-warning, #d97706) !important;
}
.verify-container .alert-info {
  background: var(--color-background-info) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-info) 30%, transparent) !important;
  color: var(--color-text-info) !important;
}

.logout-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-background-danger) !important;
  color: var(--color-text-danger) !important;
  text-decoration: none !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: var(--border-radius-md) !important;
  margin-top: 1.25rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border: 1px solid color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
  transition: background-color .15s ease, color .15s ease;
}
.logout-button:hover {
  background: color-mix(in srgb, var(--color-background-danger) 60%, var(--color-text-danger) 25%) !important;
  color: var(--color-text-danger) !important;
  text-decoration: none !important;
}
.resend-disabled {
  color: var(--color-text-tertiary) !important;
  cursor: not-allowed !important;
}
.change-email-form {
  margin: 1.25rem 0 !important;
  padding: 1rem !important;
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  border: 1px dashed var(--color-border-secondary) !important;
}

.has-error .form-control {
  border-color: var(--color-text-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-danger) 12%, transparent) !important;
}
.help-block {
  font-size: 0.85rem !important;
  color: var(--color-text-danger) !important;
  text-align: left !important;
  margin-top: 0.45rem !important;
}
.verify-form {
  margin-bottom: 10px !important;
}

body.auth-page {
  background: var(--color-background-secondary) ;
  color: var(--color-text-default) !important;
  font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif) !important;
  min-height: 100vh !important;
}
.login-layout-fallback {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px 48px !important;
  gap: 18px !important;
  background: linear-gradient(180deg,
    var(--color-background-secondary) 0%,
    var(--color-background-default) 100%);
  position: relative !important;
}
body.auth-page .login-layout-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%,
      color-mix(in srgb, var(--color-text-primary) 10%, transparent) 0%,
      transparent 38%),
    radial-gradient(circle at 88% 86%,
      color-mix(in srgb, var(--color-text-info) 8%, transparent) 0%,
      transparent 42%);
  pointer-events: none;
  z-index: 0;
}
body.auth-page .login-layout-fallback > * { position: relative; z-index: 1; }

.auth-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 4px !important;
}
.auth-logo img {
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}
.auth-logo .logo-text {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: var(--color-text-default) !important;
}

.auth-container {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.auth-container.rtl { direction: rtl !important; }
.auth-container.ltr { direction: ltr !important; }
.auth-container .form-content + .form-content {
  margin-top: 0 !important;
}
.auth-container .form-content.demo-shops,
.auth-container .form-content.demo-modules {
  background: color-mix(in srgb, var(--color-background-default) 70%, var(--color-background-secondary)) !important;
}

.auth-text-heading,
.details h2,
.auth-container .form-content h3,
.auth-container .form-content h4 {
  margin: 0 0 18px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-text-default) !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}
.details h2 { font-size: 22px !important; }
.demo-shops h4,
.demo-modules h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}
.demo-shops h4 small,
.demo-modules h4 small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 4px !important;
  font-style: italic !important;
}

.input-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.input-wrapper label,
.phone-number-wrapper label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  letter-spacing: 0.2px !important;
  margin: 0 !important;
}
.input-wrapper input[type="text"],
.input-wrapper input[type="email"],
.input-wrapper input[type="number"],
.input-wrapper input[type="password"],
.input-wrapper input[type="tel"],
.phone-number-wrapper input,
.phone-number-wrapper select {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--color-text-default) !important;
  background: var(--color-background-secondary) !important;
  border: 0 !important;
  border-radius: var(--border-radius-md, 8px) !important;
  outline: none !important;
  transition: background-color .15s ease, box-shadow .15s ease;
  box-shadow: none !important;
}
.login-layout .form-content form .input-wrapper input,
.login-layout .form-content form .input-wrapper select,
.login-layout .form-content form .phone-number-wrapper input,
.login-layout .form-content form .phone-number-wrapper select {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--color-background-secondary) !important;
}
.input-wrapper input::placeholder,
.phone-number-wrapper input::placeholder {
  color: var(--color-text-tertiary) !important;
  opacity: 1 !important;
}
.input-wrapper input:focus,
.phone-number-wrapper input:focus,
.phone-number-wrapper select:focus {
  background: var(--color-background-default) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-primary) 16%, transparent) !important;
}
.input-wrapper .password-switch { padding-right: 44px !important; }

.input-wrapper .show_hide_icon {
  position: absolute !important;
  right: 8px !important;
  top: 30px !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--color-text-tertiary) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color .15s ease, background-color .15s ease;
}
.input-wrapper .show_hide_icon:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-default) !important;
}
.input-wrapper .show_hide_icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}
.input-wrapper .show_hide_icon svg path[stroke="#000000"] { stroke: currentColor !important; }
html.dark-mode .input-wrapper .show_hide_icon svg path[stroke="#000000"] { stroke: currentColor !important; }
.rtl .input-wrapper .show_hide_icon { right: auto !important; left: 8px !important; }

.input-error {
  position: relative !important;
  top: -10px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: var(--color-text-danger) !important;
  background: var(--color-background-danger) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
  border-radius: var(--border-radius-md) !important;
}
.input-error strong { font-weight: 500 !important; }

.phone-number-wrapper {
  display: grid !important;
  grid-template-columns: minmax(120px, 38%) 1fr !important;
  gap: 10px !important;
  align-items: end !important;
}
.phone-number-wrapper .country-code {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.phone-number-wrapper > div:not(.country-code) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.form-group label.help-tooltip-label {
  display: flex !important;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin: 0 !important;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  color: var(--color-text-primary) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
.help-tooltip-label__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.help-tooltip-label > .js-help-block-tooltip {
  flex: 0 0 auto;
  margin-left: 0;
}

.toggle-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 0 14px !important;
}
.toggle-wrapper p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}
.toggle-wrapper .switch {
  position: relative !important;
  display: inline-block !important;
  height: var(--switch-height) !important;
  width: var(--switch-width) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.toggle-wrapper .switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}
.toggle-wrapper .sliderCheckbox {
  position: absolute !important;
  cursor: pointer !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-border-secondary) !important;
  border-radius: 999px !important;
  transition: background-color .2s ease;
}
.toggle-wrapper .sliderCheckbox::before {
  content: "";
  position: absolute;
  height: var(--switch-knob-size);
  width: var(--switch-knob-size);
  left: var(--switch-knob-offset);
  bottom: var(--switch-knob-offset);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.toggle-wrapper .switch input:checked + .sliderCheckbox {
  background: var(--color-text-primary) !important;
}
.toggle-wrapper .switch input:checked + .sliderCheckbox::before {
  transform: translateX(var(--switch-knob-translate));
}

.forget-password {
  display: inline-block !important;
  font-size: 13px !important;
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  margin: -6px 0 14px !important;
  font-weight: 500 !important;
}
.forget-password:hover {
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
}

.button-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 6px !important;
}
.button-wrapper button[type="submit"],
.auth-container form button[type="submit"]:not(.show_hide_icon):not(.new_email_verification) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
  background: var(--color-text-primary) !important;
  border: 0 !important;
  border-radius: var(--border-radius-md, 8px) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--color-text-primary) 35%, transparent) !important;
}
.button-wrapper button[type="submit"]:hover,
.auth-container form button[type="submit"]:not(.show_hide_icon):not(.new_email_verification):hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, #000) !important;
  box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--color-text-primary) 45%, transparent) !important;
}
.button-wrapper button[type="submit"]:active {
  transform: translateY(1px);
}

.form-footer {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--color-border-secondary) !important;
  text-align: center !important;
}
.form-footer p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
}
.form-footer a {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.form-footer a:hover { text-decoration: underline !important; }

.demo-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  border-radius: var(--border-radius-md, 8px) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
  border: 0 !important;
  line-height: 1.2 !important;
}
.demo-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.18);
  color: #fff !important;
  text-decoration: none !important;
}
.demo-button i { font-size: 14px !important; min-width: 16px; }

.demo-button.bg-olive       { background-color: #3d9970 !important; }
.demo-button.bg-maroon      { background-color: #c5594d !important; }
.demo-button.bg-orange      { background-color: #ff851b !important; }
.demo-button.bg-purple      { background-color: #7c3aed !important; }
.demo-button.bg-navy        { background-color: #1f3a8a !important; }
.demo-button.bg-red         { background-color: #dc2626 !important; }
.demo-button.bg-red-active  { background-color: #b91c1c !important; }
.demo-button.bg-woocommerce { background-color: #7f54b3 !important; }
.demo-button.bg-blue        { background-color: #2563eb !important; }

.psw-strent-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 6px 12px !important;
  margin: 6px 0 18px !important;
  padding: 12px 14px !important;
  background: var(--color-background-secondary) !important;
  border-radius: var(--border-radius-md) !important;
}
.psw-strent-wrap .item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.psw-strent-wrap .item i {
  color: var(--color-text-tertiary) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  transition: color .15s ease;
}
.psw-strent-wrap .item.valid i {
  color: var(--color-text-success) !important;
}
.psw-strent-wrap .strenght-test {
  font-size: 11.5px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.3 !important;
}
.psw-strent-wrap .item.valid .strenght-test {
  color: var(--color-text-default) !important;
}

body.auth-page .verify-container {
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
body.auth-page .verify-container .input-group .form-control {
  height: 42px !important;
  border-radius: var(--border-radius-md) !important;
}
body.auth-page .verify-container .new_email_verification {
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
}

.menu-button {
  background: transparent !important;
  border: 1px solid var(--color-border-secondary) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--border-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-default) !important;
  cursor: pointer !important;
  transition: background-color .15s ease;
}
.menu-button:hover { background: var(--color-background-secondary) !important; }
.menu-button.active {
  background: var(--color-text-primary) !important;
  color: #fff !important;
  border-color: var(--color-text-primary) !important;
}
body.auth-page .dropdown-menu.active {
  display: block !important;
}

@media (max-width: 540px) {
  .auth-container .form-content {
    padding: 22px 18px 18px !important;
  }
  .phone-number-wrapper {
    grid-template-columns: 1fr !important;
  }
  .login-layout-fallback {
    padding: 16px 12px 32px !important;
  }
}

html.dark-mode body.auth-page {
  background: var(--color-background-default) !important;
}
html.dark-mode .auth-container .form-content {
  background: var(--color-background-default) !important;
  box-shadow: 0 8px 28px -10px rgba(0,0,0,.5),
              0 2px 6px -2px rgba(0,0,0,.3) !important;
}

:root {
  --sh-radius:        var(--border-radius-lg, 14px);
  --sh-radius-sm:     var(--border-radius-md, 8px);
  --sh-radius-pill:   999px;
  --sh-border:        1px solid var(--color-border-secondary);
  --sh-shadow:        0 1px 4px rgba(15,23,42,.05);
  --sh-surface:       var(--color-background-default);
  --sh-bg:            var(--color-background-secondary);
  --sh-muted:         var(--color-text-tertiary);
  --sh-label:         var(--color-text-secondary);
  --sh-heading:       var(--color-text-default);

  --sh-red:           #dc2626;
  --sh-red-bg:        #fef2f2;
  --sh-red-text:      #991b1b;
  --sh-amber:         #d97706;
  --sh-amber-bg:      #fffbeb;
  --sh-amber-text:    #92400e;
  --sh-blue:          #2563eb;
  --sh-blue-bg:       #eff6ff;
  --sh-blue-text:     #1e40af;
  --sh-violet:        #7c3aed;
  --sh-violet-bg:     #f5f3ff;
  --sh-violet-text:   #4c1d95;
  --sh-green:         #059669;
  --sh-green-bg:      #ecfdf5;
  --sh-green-text:    #065f46;
}
html.dark-mode {
  --sh-red-bg:    color-mix(in srgb, #dc2626 18%, var(--color-background-secondary));
  --sh-red-text:  #fca5a5;
  --sh-amber-bg:  color-mix(in srgb, #d97706 18%, var(--color-background-secondary));
  --sh-amber-text:#fcd34d;
  --sh-blue-bg:   color-mix(in srgb, #2563eb 18%, var(--color-background-secondary));
  --sh-blue-text: #93c5fd;
  --sh-violet-bg: color-mix(in srgb, #7c3aed 18%, var(--color-background-secondary));
  --sh-violet-text:#c4b5fd;
  --sh-green-bg:  color-mix(in srgb, #059669 18%, var(--color-background-secondary));
  --sh-green-text:#86efac;
  --sh-shadow:    0 1px 4px rgba(0,0,0,.4);
}

.sh-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; padding-bottom: 20px;
  border-bottom: var(--sh-border);
}
.sh-page-head h1 {
  margin: 0 0 4px; font-size: 22px; font-weight: 600;
  color: var(--sh-heading); letter-spacing: -0.3px;
}
.sh-page-head p {
  margin: 0; font-size: 13.5px; color: var(--sh-muted);
  max-width: 520px; line-height: 1.55;
}

.sh-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
.sh-stat {
  background: var(--sh-surface); border: var(--sh-border);
  border-top: 3px solid transparent; border-radius: var(--sh-radius);
  padding: 20px 20px 18px; box-shadow: var(--sh-shadow);
  transition: box-shadow .15s;
}
.sh-stat:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.sh-stat.red    { border-top-color: var(--sh-red); }
.sh-stat.amber  { border-top-color: var(--sh-amber); }
.sh-stat.blue   { border-top-color: var(--sh-blue); }
.sh-stat.violet { border-top-color: var(--sh-violet); }

.sh-stat-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 10px; display: block;
}
.sh-stat.red    .sh-stat-eyebrow { color: var(--sh-red); }
.sh-stat.amber  .sh-stat-eyebrow { color: var(--sh-amber); }
.sh-stat.blue   .sh-stat-eyebrow { color: var(--sh-blue); }
.sh-stat.violet .sh-stat-eyebrow { color: var(--sh-violet); }

.sh-stat-value {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--sh-heading); margin-bottom: 8px; letter-spacing: -1px;
}
.sh-stat-desc {
  font-size: 12.5px; color: var(--sh-muted); line-height: 1.45; margin: 0;
}
@media (max-width: 992px) {
  .sh-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sh-stats { grid-template-columns: 1fr; }
}

.sh-toolbar {
  background: var(--sh-surface); border: var(--sh-border);
  border-radius: var(--sh-radius); padding: 18px 22px;
  margin-bottom: 20px; box-shadow: var(--sh-shadow);
  display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap;
}
.sh-toolbar-group { flex: 1; min-width: 220px; }
.sh-toolbar label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--sh-label); margin-bottom: 6px; letter-spacing: .02em;
}
.sh-toolbar .form-control {
  font-size: 13.5px; border-color: var(--color-border-secondary);
  border-radius: var(--sh-radius-sm); height: 36px;
  color: var(--sh-heading); background: var(--sh-surface);
}
.sh-toolbar .form-control:focus {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.sh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--sh-radius-pill);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap; line-height: 1.6;
}
.sh-chip.danger  { background: var(--sh-red-bg);    color: var(--sh-red-text); }
.sh-chip.warning { background: var(--sh-amber-bg);  color: var(--sh-amber-text); }
.sh-chip.info    { background: var(--sh-blue-bg);   color: var(--sh-blue-text); }
.sh-chip.success { background: var(--sh-green-bg);  color: var(--sh-green-text); }
.sh-chip.violet  { background: var(--sh-violet-bg); color: var(--sh-violet-text); }
.sh-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.sh-panel {
  background: var(--sh-surface); border: var(--sh-border);
  border-radius: var(--sh-radius); margin-bottom: 20px;
  overflow: hidden; box-shadow: var(--sh-shadow);
}
.sh-panel-head {
  padding: 18px 22px; border-bottom: var(--sh-border);
  background: var(--sh-bg);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.sh-panel-head-copy { flex: 1; min-width: 0; }
.sh-panel-head h4 {
  margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--sh-heading);
}
.sh-panel-head p {
  margin: 0; font-size: 13px; color: var(--sh-muted); line-height: 1.5;
}
.sh-panel-head-action { padding-top: 2px; }
.sh-panel-body { padding: 0; }

.sh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-table thead tr {
  border-bottom: var(--sh-border); background: var(--sh-bg);
}
.sh-table th {
  padding: 10px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sh-muted); white-space: nowrap; text-align: left;
}
.sh-table td {
  padding: 11px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-secondary) 60%, transparent);
  vertical-align: middle; color: var(--sh-label);
}
.sh-table tbody tr:last-child td { border-bottom: none; }
.sh-table tbody tr:hover {
  background: color-mix(in srgb, var(--sh-bg) 60%, var(--sh-surface));
}
.sh-table tbody tr.row-mixed {
  background: color-mix(in srgb, var(--sh-blue-bg) 50%, var(--sh-surface));
}
.sh-table tbody tr.row-mixed:hover {
  background: color-mix(in srgb, var(--sh-blue-bg) 70%, var(--sh-surface));
}
.sh-table tbody tr.row-repair {
  background: color-mix(in srgb, var(--sh-amber-bg) 35%, var(--sh-surface));
}
.sh-table tbody tr.row-repair:hover {
  background: color-mix(in srgb, var(--sh-amber-bg) 55%, var(--sh-surface));
}

.sh-product-name {
  font-weight: 600; color: var(--sh-heading);
  margin-bottom: 2px; font-size: 13px;
}
.sh-product-sub { font-size: 12px; color: var(--sh-muted); }
.sh-num { font-weight: 600; font-size: 13px; white-space: nowrap; }
.sh-num.neg { color: var(--sh-red); }
.sh-num.pos { color: var(--sh-green); }
.sh-num.neu { color: var(--sh-muted); }

.sh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--sh-radius-sm);
  font-size: 13px; font-weight: 500; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all .12s; white-space: nowrap; line-height: 1;
}
.sh-btn i { font-size: 14px; }
.sh-btn-primary {
  background: var(--sh-blue); color: #fff; border-color: var(--sh-blue);
}
.sh-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.sh-btn-danger {
  background: var(--sh-red); color: #fff; border-color: var(--sh-red);
}
.sh-btn-danger:hover { background: #b91c1c; color: #fff; }
.sh-btn-ghost {
  background: var(--sh-surface); color: var(--sh-label);
  border-color: var(--color-border-secondary);
}
.sh-btn-ghost:hover {
  background: var(--sh-bg);
  border-color: color-mix(in srgb, var(--sh-label) 40%, transparent);
}
.sh-btn-ghost-violet {
  background: var(--sh-surface); color: var(--sh-violet);
  border-color: color-mix(in srgb, var(--sh-violet) 40%, transparent);
}
.sh-btn-ghost-violet:hover { background: var(--sh-violet-bg); }
.sh-btn-sm { padding: 5px 10px; font-size: 12px; }
.sh-btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }

.sh-filter-bar {
  background: var(--sh-surface);
  border: none;
  border-radius: var(--sh-radius); padding: 18px 22px;
  margin-bottom: 20px; box-shadow: var(--sh-shadow);
}
.sh-filter-row {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.sh-filter-row .form-group { margin-bottom: 0; flex: 1; min-width: 200px; }
.sh-filter-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--sh-label); margin-bottom: 6px; letter-spacing: .02em;
}

.sh-summary-strip {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--sh-muted); margin-bottom: 20px;
  padding: 12px 18px; background: var(--sh-bg);
  border: var(--sh-border); border-radius: var(--sh-radius-sm);
}
.sh-summary-strip strong { color: var(--sh-heading); font-weight: 600; }
.sh-summary-sep { color: var(--color-border-secondary); }

.sh-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px; font-size: 13.5px;
  color: var(--sh-green-text); background: var(--sh-green-bg);
  border: 1px solid color-mix(in srgb, var(--sh-green) 35%, transparent);
  border-radius: var(--sh-radius); margin-bottom: 20px;
}
.sh-empty i { font-size: 16px; }
.sh-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; font-size: 13px;
  color: var(--sh-amber-text); background: var(--sh-amber-bg);
  border: 1px solid color-mix(in srgb, var(--sh-amber) 35%, transparent);
  border-radius: var(--sh-radius-sm); margin-bottom: 18px; line-height: 1.5;
}
.sh-notice i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.sh-divider {
  border: none; border-top: var(--sh-border); margin: 32px 0 28px;
}
.sh-manual-section h4 {
  font-size: 15px; font-weight: 600; color: var(--sh-heading);
  margin: 0 0 4px;
}
.sh-manual-section > p {
  font-size: 13px; color: var(--sh-muted); margin: 0 0 18px;
}
.sh-search-wrap { position: relative; }
.sh-search-wrap i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--sh-muted); font-size: 15px; pointer-events: none;
}
.sh-search-wrap input { padding-left: 34px !important; }

#processingModal .modal-header { border-bottom: var(--sh-border); }
#processingModal .modal-title { font-size: 15px; font-weight: 600; }
#processingModal .modal-body {
  font-size: 13.5px; color: var(--sh-muted); padding: 20px 24px;
}

body.auth-page .login-layout-fallback {
  padding-top: 88px !important;
}

body.auth-page .login-layout-fallback > .header-auth {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  height: 56px !important;
  min-height: unset !important;
  padding: 0 16px !important;
  background: #F5F6F8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  color: inherit !important;
  box-sizing: border-box !important;
}
body.auth-page .login-layout-fallback > .header-auth::before { content: none !important; }

body.auth-page .header-auth .header-left,
body.auth-page .header-auth .header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}
body.auth-page .header-auth .header-left {
  grid-column: 1 !important;
  justify-content: flex-start !important;
}
body.auth-page .header-auth .header-right {
  grid-column: 3 !important;
  justify-content: flex-end !important;
}
body.auth-page .header-auth .header-right .pull-right.text-white,
body.auth-page .header-auth .header-left .pull-right.text-white {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
  color: inherit !important;
}

body.auth-page .btn.btn-header-auth {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  color: #111827 !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap !important;
  line-height: 1 !important;
}
body.auth-page .btn.btn-header-auth:hover,
body.auth-page .btn.btn-header-auth:focus {
  color: #111827 !important;
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.25) !important;
  text-decoration: none !important;
  outline: none !important;
}
body.auth-page .header-auth .header-right .btn.btn-header-auth:last-child {
  color: #fff !important;
  background: var(--color-text-primary) !important;
  border-color: var(--color-text-primary) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 30%, transparent) !important;
}
body.auth-page .header-auth .header-right .btn.btn-header-auth:last-child:hover,
body.auth-page .header-auth .header-right .btn.btn-header-auth:last-child:focus {
  background: color-mix(in srgb, var(--color-text-primary) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, #000) !important;
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--color-text-primary) 45%, transparent) !important;
}

body.auth-page .header-auth details.dropdown {
  position: relative !important;
  margin: 0 !important;
}
body.auth-page .select-summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background-color .15s ease, border-color .15s ease;
  user-select: none !important;
}
body.auth-page .select-summary::-webkit-details-marker { display: none !important; }
body.auth-page .select-summary::marker { content: "" !important; }
body.auth-page .select-summary:hover {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.25) !important;
  color: var(--secondary-color) !important;
}
body.auth-page .select-summary img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 !important;
}
body.auth-page .select-summary .small-icon,
body.auth-page .select-summary i.fas {
  font-size: 10px !important;
  color: var(--color-text-tertiary) !important;
  transition: transform .2s ease;
}
body.auth-page details.dropdown[open] .select-summary .small-icon,
body.auth-page details.dropdown[open] .select-summary i.fas {
  transform: rotate(90deg) !important;
}

body.auth-page .language-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 180px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px -10px rgba(15, 23, 42, .18),
              0 4px 12px -3px rgba(15, 23, 42, .08) !important;
  z-index: 50 !important;
}
body.auth-page .language-dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.auth-page .language-dropdown-menu li > a,
body.auth-page .language-dropdown-menu .change_lang.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  color: #374151 !important;
  background: transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
body.auth-page .language-dropdown-menu li > a:hover,
body.auth-page .language-dropdown-menu .change_lang.dropdown-item:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
  text-decoration: none !important;
}
body.auth-page .language-dropdown-menu img {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

body.auth-page .header-auth-mobile {
  display: none !important;
  align-items: center !important;
  position: relative !important;
  float: none !important;
  color: inherit !important;
}
body.auth-page .menu-button {
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-default) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, border-color .15s ease;
  padding: 0 !important;
}
body.auth-page .menu-button:hover {
  background: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-secondary)) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 18%, var(--color-border-secondary)) !important;
}
body.auth-page .menu-button.active {
  background: var(--color-text-primary) !important;
  color: #fff !important;
  border-color: var(--color-text-primary) !important;
}
body.auth-page .menu-button .hamburger-icon {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 18px !important;
  height: 14px !important;
}
body.auth-page .menu-button .hamburger-icon span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  transition: transform .2s ease, opacity .2s ease;
}
body.auth-page .menu-button.active .hamburger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.auth-page .menu-button.active .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
body.auth-page .menu-button.active .hamburger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

body.auth-page .header-auth-mobile .dropdown-menu {
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 200px !important;
  margin: 0 !important;
  padding: 6px !important;
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px -10px rgba(15, 23, 42, .18),
              0 4px 12px -3px rgba(15, 23, 42, .08) !important;
  list-style: none !important;
  float: none !important;
  z-index: 50 !important;
}
body.auth-page .header-auth-mobile .dropdown-menu.active {
  display: block !important;
}
body.auth-page .header-auth-mobile .dropdown-menu > a {
  display: block !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--color-text-default) !important;
  background: transparent !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
body.auth-page .header-auth-mobile .dropdown-menu > a:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-default) !important;
  text-decoration: none !important;
}

body.auth-page .auth-logo {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

@media (max-width: 768px) {
  body.auth-page .login-layout-fallback {
    padding-top: 80px !important;
  }
  body.auth-page .login-layout-fallback > .header-auth {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  height: 56px !important;
  min-height: unset !important;
  padding: 0 16px !important;
  background: #F5F6F8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  color: inherit !important;
  box-sizing: border-box !important;
}
  body.auth-page .login-layout-fallback > .header-auth .header-right { display: none !important; }
  body.auth-page .login-layout-fallback > .header-auth .header-auth-mobile { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 100% !important; grid-column: 3 !important; justify-content: flex-end !important; float: none !important; }
  body.auth-page span.lang-name { display: none !important; }
}

html.dark-mode body.auth-page .login-layout-fallback > .header-auth {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  height: 56px !important;
  min-height: unset !important;
  padding: 0 40px !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  color: inherit !important;
  box-sizing: border-box !important;
}
html.dark-mode body.auth-page .select-summary,
html.dark-mode body.auth-page .menu-button {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  color: var(--color-text-default) !important;
}
html.dark-mode body.auth-page .language-dropdown-menu,
html.dark-mode body.auth-page .header-auth-mobile .dropdown-menu {
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.45),
              0 4px 12px -3px rgba(0,0,0,.3) !important;
}

.variation_value_table > tbody > tr.variation_value_tier_row > td.variation-tier-host {
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  padding: 6px 8px 14px !important;
  vertical-align: top !important;
}
.variation_value_table > tbody > tr.variation_value_tier_row:last-child > td.variation-tier-host {
  border-bottom: 0 !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md, 8px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head {
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head h5 {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-text-default) !important;
  margin: 0 0 2px 0 !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head p {
  display: block !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .add-tier-row {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-table {
  min-width: 720px !important;
  margin: 0 !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-table thead th {
  font-size: 11px !important;
  padding: 6px 8px !important;
}
.variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-table tbody td {
  padding: 6px 8px !important;
}

tr.variation_value_tier_row.hide {
  display: none !important;
}

#product_variation_form_part > tbody > tr.variation_template_values_row > td.variation-values-host {
  background: color-mix(in srgb, var(--color-text-primary) 4%, var(--color-background-default)) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  padding: 14px 16px 16px !important;
}
#product_variation_form_part > tbody > tr.variation_template_values_row.hide {
  display: none !important;
}
#product_variation_form_part .variation-values-host > .variation_template_values_div {
  margin: 0 !important;
}
#product_variation_form_part .variation-values-host > .variation_template_values_div > label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 0 6px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
#product_variation_form_part .variation-values-host .select2-container {
  width: 100% !important;
}

#product_variation_form_part > tbody > tr.variation_row > td {
  border-bottom: 0 !important;
}
#product_variation_form_part > tbody > tr.variation_template_values_row + tr.variation_row > td,
#product_variation_form_part > tbody > tr.variation_row:not(:has(+ tr.variation_template_values_row)) > td {
  border-bottom: 1px solid var(--color-border-secondary) !important;
}

@media (max-width: 768px) {
  .variation_value_table .variation-tier-host {
    padding: 6px 4px 12px !important;
  }
  .variation_value_table .variation-tier-host > .tier-pricing-card {
    padding: 10px !important;
  }
  .variation_value_table .variation-tier-host > .tier-pricing-card .tier-pricing-card__head {
    flex-wrap: wrap !important;
  }
  #product_variation_form_part > tbody > tr.variation_template_values_row > td.variation-values-host {
    padding: 10px !important;
  }
}

.d2-blocks {
  flex-direction: column !important;
}
.d2-block {
  background: var(--color-background-default) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-lg, 14px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  overflow: hidden !important;
}

.d2-block .d2-blk-hdr {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  color: var(--color-text-default) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.d2-block .d2-blk-hdr:hover {
  background: color-mix(in srgb, var(--color-text-primary) 3%, var(--color-background-default)) !important;
}
.d2-block.is-open > .d2-blk-hdr,
.d2-block:not(.is-collapsed) > .d2-blk-hdr {
  border-bottom-color: var(--color-border-secondary) !important;
}
.d2-blk-hdr-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.d2-blk-ico {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--d2-blk-bg, var(--color-background-secondary)) !important;
  flex-shrink: 0 !important;
}
.d2-blk-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-text-default) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.1px !important;
}
.d2-blk-hint {
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}
.d2-block .d2-chevron {
  flex-shrink: 0 !important;
  color: var(--color-text-tertiary) !important;
  transition: transform .2s ease;
}
.d2-block.is-collapsed .d2-chevron {
  transform: rotate(-90deg) !important;
}

.d2-block .d2-blk-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px !important;
  background: var(--color-background-default) !important;
  overflow: visible !important;
}
.d2-block.is-collapsed .d2-blk-body {
  display: none !important;
}
.d2-block .d2-blk-body::after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

.d2-block .d2-blk-body > .d2-blk-filter,
.d2-block .d2-blk-body > .d2-blk-filter.col-md-4,
.d2-block .d2-blk-body > .d2-blk-filter.col-md-3,
.d2-block .d2-blk-body > .d2-blk-filter.col-md-6 {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  padding: 0 !important;
}
.d2-block .d2-blk-filter .form-control,
.d2-block .d2-blk-filter .select2-container {
  width: 100% !important;
  max-width: 320px !important;
}

.d2-block .d2-blk-body > .dataTables_wrapper {
  width: 100% !important;
  margin: 0 !important;
  clear: both !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper.form-inline > * {
  display: block !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dt-buttons {
  margin-bottom: 10px !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dt-buttons .btn {
  margin: 0 !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dataTables_scroll {
  margin: 0 !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dataTables_info {
  padding: 8px 0 0 0 !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
}
.d2-block .d2-blk-body > .dataTables_wrapper .dataTables_paginate {
  padding-top: 8px !important;
  float: right !important;
}

.d2-block .d2-blk-body > table.max-table {
  width: 100% !important;
  margin: 0 !important;
}

.d2-section {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--color-text-tertiary) !important;
  margin: 22px 0 10px 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
}

@media (max-width: 768px) {
  .d2-block .d2-blk-hdr { padding: 12px 14px !important; }
  .d2-block .d2-blk-body { padding: 14px !important; gap: 12px !important; }
  .d2-block .d2-blk-body > .d2-blk-filter,
  .d2-block .d2-blk-body > .d2-blk-filter.col-md-4 { max-width: 100% !important; }
  .d2-block .d2-blk-body > .d2-blk-filter .form-control,
  .d2-block .d2-blk-body > .d2-blk-filter .select2-container { max-width: 100% !important; }
  .d2-blk-hint { display: none !important; }
}

html.dark-mode .d2-block {
  background: var(--color-background-default) !important;
  border-color: var(--color-border-secondary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
html.dark-mode .d2-block .d2-blk-hdr:hover {
  background: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-background-default)) !important;
}

body:not(.auth-page) .input-group,
.modal .input-group,
.box .input-group,
.content .input-group {
  justify-content: flex-start !important;
  gap: 0 !important;
}
.verify-container .input-group,
body.auth-page .verify-container .input-group {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.verify-container .input-group > .otp-input {
  border-radius: 12px !important;
}

.input-group .input-group-btn > .btn.hide,
.input-group .input-group-btn > button.hide,
.input-group > .input-group-btn > .btn.hide,
.input-group > .input-group-btn > button.hide,
.file-input .input-group-btn > .btn.hide,
.file-input .input-group-btn > button.hide,
.btn.hide,
button.btn.hide,
a.btn.hide {
  display: none !important;
}
.file-input .kv-upload-progress.hide {
  display: none !important;
}
.file-input.file-input-new .fileinput-remove,
.file-input.file-input-new .fileinput-remove-button,
.file-input.file-input-new .fileinput-upload,
.file-input.file-input-new .fileinput-upload-button,
.file-input.file-input-new .close,
.file-input.file-input-new .file-preview,
.file-input.file-input-new .glyphicon-file,
.file-input.file-input-ajax-new .fileinput-remove-button,
.file-input.file-input-ajax-new .fileinput-upload-button,
.file-input.file-input-ajax-new .no-browse .input-group-btn,
.file-input.file-input-new .no-browse .input-group-btn,
.file-input.file-input-new .input-group-btn > button.fileinput-remove,
.file-input.file-input-new .input-group-btn > button.fileinput-remove-button,
.file-input.file-input-new .input-group-btn > button.fileinput-upload-button {
  display: none !important;
}

.pos-row-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.pos-row-form > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.pos-row-form .pos-input,
.pos-row-form .pos-select,
.pos-row-form .pos-textarea,
.pos-row-form .form-control,
.pos-row-form .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.pos-row-form .pos-input-icon-wrap {
  width: 100% !important;
  min-width: 0 !important;
}
.pos-row-form > .payment_details_div {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pos-row-form > .payment_details_div::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}
.pos-row-form > .payment_details_div > [class*="col-"] {
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.pos-row-form > .payment_details_div > [class*="col-"] .form-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.pos-row-form > .payment_details_div.hide {
  display: none !important;
}
.payment_row > .pos-row-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 991px) {
  .pos-row-form {
    grid-template-columns: 1fr !important;
  }
  .pos-row-form > .payment_details_div > [class*="col-"] {
    width: 100% !important;
    float: none !important;
  }
}
.pos-input.pos-input--has-icon,
input.pos-input--has-icon,
.pos-input-icon-wrap > .pos-input {
  padding-left: 32px !important;
}
.pos-input-icon-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
.pos-input-icon-wrap > .pos-input-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--color-text-tertiary, #aaa) !important;
  font-size: 13px !important;
  pointer-events: none !important;
  line-height: 1 !important;
  z-index: 2 !important;
}
.pos-input-icon-wrap > .pos-input {
  position: relative !important;
  z-index: 1 !important;
  background-clip: padding-box !important;
}
:root {
  --tb-bg:          var(--color-background-primary, #ffffff) !important;
  --tb-bg-drop:     var(--color-background-primary, #ffffff) !important;
  --tb-border:      var(--color-border-secondary, #E1E4E9) !important;
  --tb-accent:      var(--color-text-primary, #1F2328) !important;
  --tb-accent-s:    color-mix(in srgb, var(--color-text-primary, #1F2328) 8%, transparent) !important;
  --tb-text-1:      var(--color-text-primary, #1F2328) !important;
  --tb-text-2:      var(--color-text-secondary, #6B7280) !important;
  --tb-text-3:      var(--color-text-tertiary, #9AA3AE) !important;
  --tb-hover:       var(--color-background-secondary, #F5F6F8) !important;
  --tb-danger:      var(--color-text-danger, #A32D2D) !important;
  --tb-success:     #16a34a !important;
  --tb-shadow:      0 1px 0 0 var(--color-border-secondary, #E1E4E9), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  --tb-drop-shadow: 0 8px 28px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  --tb-r:           8px !important;
}

html.dark-mode {
  --tb-bg:          var(--color-background-primary, #15171B) !important;
  --tb-bg-drop:     var(--color-background-primary, #15171B) !important;
  --tb-border:      var(--color-border-secondary, #23272E) !important;
  --tb-accent:      var(--color-text-primary, #E6E8EC) !important;
  --tb-accent-s:    color-mix(in srgb, var(--color-text-primary, #E6E8EC) 10%, transparent) !important;
  --tb-text-1:      var(--color-text-primary, #E6E8EC) !important;
  --tb-text-2:      var(--color-text-secondary, #9AA3AE) !important;
  --tb-text-3:      var(--color-text-tertiary, #6B7280) !important;
  --tb-hover:       var(--color-background-secondary, #1C1F24) !important;
  --tb-danger:      var(--color-text-danger, #ED7C7B) !important;
  --tb-success:     #34d399 !important;
  --tb-shadow:      0 1px 0 0 var(--color-border-secondary, #23272E), 0 2px 16px rgba(0, 0, 0, 0.40) !important;
  --tb-drop-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30) !important;
}
.tb-drop {
  border-radius: 10px !important;
  padding: 6px !important;
  transform-origin: top right !important;
}
.tb-drop-head {
  padding: 8px 10px 6px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  margin-bottom: 4px !important;
}
.tb-drop-title {
  color: var(--color-text-tertiary) !important;
  letter-spacing: .6px !important;
}
.tb-ddi {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  gap: 10px !important;
}
.tb-ddi.active {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.tb-ddi.active svg { color: var(--color-text-primary) !important; }
.tb-sep {
  background: var(--color-border-secondary) !important;
  margin: 6px 4px !important;
}
.tb-user-card {
  background: var(--color-background-secondary) !important;
  border-radius: 8px !important;
}
.tb-av {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
}
.tb-badge {
  background: var(--color-text-danger) !important;
  border-color: var(--color-background-primary) !important;
}
.tb-notif-unread-pill {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.tb-ddi .tb-lang-flag {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.tb-ddi svg[style*="--tb-accent"] {
  color: var(--color-text-primary) !important;
}

#bpos-topbar {
  box-shadow: none !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
}
.tb-icon-btn,
.tb-lang-btn,
.tb-user-btn,
.tb-sidebar-toggle {
  border-radius: 8px !important;
}
.tb-icon-btn.active,
.tb-lang-btn.active,
.tb-user-btn.active {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.tb-user-btn svg[style*="--tb-text-3"] {
  color: var(--color-text-tertiary) !important;
}

.project_html {
  margin-top: 4px !important;
}
.project_html .eq-height-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}
.project_html .eq-height-row > .eq-height-col,
.project_html .eq-height-row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  padding: 0 !important;
  display: flex !important;
}

.project_html .box {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  overflow: hidden !important;
  margin: 0 !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.project_html .box:hover {
  border-color: var(--color-border-primary, var(--color-border-secondary)) !important;
  box-shadow: 0 6px 20px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  transform: translateY(-1px);
}
.project_html .box.box-solid.box-primary,
.project_html .box.box-solid {
  background: var(--color-background-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.project_html .box.box-solid > .box-header {
  color: inherit !important;
  background: transparent !important;
}

.project_html .box > .box-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 14px 14px 10px !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  background: transparent !important;
}
.project_html .box > .box-header.with-border {
  border-bottom: 1px solid var(--color-border-secondary) !important;
}
.project_html .box > .box-header > .box-title {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.project_html .box > .box-header > .box-title > a {
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
}
.project_html .box > .box-header > .box-title > a:hover {
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.project_html .box-tools.pull-right {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.project_html .box-tools .dropdown-toggle.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.project_html .box-tools .dropdown-toggle.btn:hover,
.project_html .box-tools .dropdown.open > .dropdown-toggle.btn,
.project_html .box-tools .dropdown-toggle.btn[aria-expanded="true"] {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}
.project_html .box-tools .dropdown-toggle.btn > .fa,
.project_html .box-tools .dropdown-toggle.btn > i {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}
.project_html .box-tools .dropdown-menu {
  margin-top: 6px !important;
  padding: 6px !important;
  min-width: 200px !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
}
.project_html .box-tools .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}
.project_html .box-tools .dropdown-menu > li > a:hover,
.project_html .box-tools .dropdown-menu > li > a:focus {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.project_html .box-tools .dropdown-menu > li > a > i,
.project_html .box-tools .dropdown-menu > li > a > .fa {
  width: 14px !important;
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.project_html .box-tools .dropdown-menu > li > a:hover > i,
.project_html .box-tools .dropdown-menu > li > a:hover > .fa {
  color: var(--color-text-primary) !important;
}
.project_html .box-tools .dropdown-menu > li.divider {
  height: 1px !important;
  margin: 4px 2px !important;
  background: var(--color-border-secondary) !important;
}

.project_html .box > .box-body {
  padding: 12px 14px !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--color-text-secondary) !important;
}
.project_html .box > .box-body > .row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
}
.project_html .box > .box-body > .row > [class*="col-"] {
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.project_html .box > .box-body > .row > .col-md-8 { flex: 1 1 auto !important; }
.project_html .box > .box-body > .row > .col-md-4 {
  flex: 0 0 auto !important;
  max-width: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.project_html .box > .box-body i,
.project_html .box > .box-body .fa,
.project_html .box > .box-body .fas {
  width: 14px !important;
  font-size: 11.5px !important;
  color: var(--color-text-tertiary) !important;
  margin-right: 6px !important;
  vertical-align: -1px !important;
}
.project_html .box > .box-body br {
  display: block !important;
  content: "" !important;
  margin-top: 2px !important;
}

.project_html .box > .box-footer {
  padding: 10px 14px !important;
  background: var(--color-background-secondary) !important;
  border-top: 1px solid var(--color-border-secondary) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}
.project_html .box > .box-footer:empty {
  display: none !important;
}
.project_html .box > .box-footer > .user_avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-background-secondary) !important;
  background: var(--color-background-primary) !important;
  object-fit: cover !important;
  margin-left: -8px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06) !important;
  transition: transform .15s ease, z-index 0s;
}
.project_html .box > .box-footer > .user_avatar:first-child {
  margin-left: 0 !important;
}
.project_html .box > .box-footer > .user_avatar:hover {
  transform: translateY(-2px) scale(1.05);
  z-index: 2;
  position: relative;
}

@media (max-width: 480px) {
  .project_html .eq-height-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .project_html .box > .box-body > .row {
    flex-direction: column !important;
  }
  .project_html .box > .box-body > .row > .col-md-4 {
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
}

html.dark-mode .project_html .box {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project_html .box:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project_html .box > .box-footer > .user_avatar {
  border-color: var(--color-background-secondary) !important;
}

.project-kanban-board {
  background: transparent !important;
  padding: 0 !important;
}
.project-kanban-board .page,
.project-kanban-board .main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.project-kanban-board .meta-tasks-wrapper {
  background: transparent !important;
  padding: 4px 2px 12px !important;
}
.project-kanban-board .meta-tasks {
  background: transparent !important;
  padding: 0 !important;
  overflow-x: auto !important;
}
.project-kanban-board .kanban-container {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 4px 6px 8px !important;
  width: auto !important;
}

.project-kanban-board .kanban-board {
  width: 300px !important;
  margin: 0 !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.project-kanban-board .kanban-board-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px 10px 14px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
}
.project-kanban-board .kanban-board-header.new,
.project-kanban-board .kanban-board-header.info,
.project-kanban-board .kanban-board-header.good,
.project-kanban-board .kanban-board-header.warning,
.project-kanban-board .kanban-board-header.danger,
.project-kanban-board .kanban-board-header.success {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}
.project-kanban-board .kanban-board-header::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 8px !important; bottom: 8px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--color-text-tertiary) !important;
  opacity: .55;
}
.project-kanban-board .kanban-board-header.new::before     { background: #9aa3ae !important; }
.project-kanban-board .kanban-board-header.info::before,
.project-kanban-board .kanban-board-header.good::before    { background: #3b82f6 !important; }
.project-kanban-board .kanban-board-header.warning::before { background: #f59e0b !important; }
.project-kanban-board .kanban-board-header.danger::before  { background: var(--color-text-danger) !important; }
.project-kanban-board .kanban-board-header.success::before { background: #16a34a !important; }

.project-kanban-board .kanban-title-board {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.project-kanban-board .kanban-title-board .board-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  color: var(--color-text-primary) !important;
  text-transform: uppercase !important;
}
.project-kanban-board .kanban-title-board .board-title i,
.project-kanban-board .kanban-title-board .board-title .fa,
.project-kanban-board .kanban-title-board .board-title .fas {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
}
.project-kanban-board .kanban-board-header[data-count]::after {
  content: attr(data-count) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 999px !important;
}

.project-kanban-board .kanban-drag {
  flex: 1 1 auto !important;
  padding: 10px !important;
  background: transparent !important;
  min-height: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 280px) !important;
}
.project-kanban-board .kanban-drag:empty::after {
  content: "" !important;
  display: block !important;
  border: 1.5px dashed var(--color-border-secondary) !important;
  border-radius: 10px !important;
  height: 64px !important;
  opacity: .6;
}

.project-kanban-board .kanban-board > footer {
  padding: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
}

.project-kanban-board .kanban-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 12px 10px !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  cursor: grab !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.project-kanban-board .kanban-item:hover {
  border-color: var(--color-border-primary, var(--color-border-secondary)) !important;
  box-shadow: 0 6px 18px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  transform: translateY(-1px);
}
.project-kanban-board .kanban-item:active {
  cursor: grabbing !important;
}

.project-kanban-board .kanban-item .card-title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--color-text-primary) !important;
}
.project-kanban-board .kanban-item .card-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 0;
  transform: translateX(2px);
  transition: opacity .15s ease, transform .15s ease;
  flex-shrink: 0 !important;
}
.project-kanban-board .kanban-item:hover .card-actions,
.project-kanban-board .kanban-item:focus-within .card-actions {
  opacity: 1;
  transform: translateX(0);
}
.project-kanban-board .kanban-item .card-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  color: var(--color-text-tertiary) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease;
}
.project-kanban-board .kanban-item .card-action:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
}
.project-kanban-board .kanban-item .card-action i,
.project-kanban-board .kanban-item .card-action .fa,
.project-kanban-board .kanban-item .card-action .fas {
  font-size: 11px !important;
  color: inherit !important;
  margin: 0 !important;
}
.project-kanban-board .kanban-item .card-action.delete_a_project:hover {
  color: var(--color-text-danger) !important;
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
}

.project-kanban-board .kanban-item .card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}
.project-kanban-board .kanban-item .card-tags br {
  display: none !important;
}
.project-kanban-board .kanban-item .card-tags > .label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: 999px !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
.project-kanban-board .kanban-item .card-tags > .label > i,
.project-kanban-board .kanban-item .card-tags > .label > .fa,
.project-kanban-board .kanban-item .card-tags > .label > .fas {
  font-size: 10px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.project-kanban-board .kanban-item .card-tags > .label-danger {
  color: var(--color-text-danger) !important;
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-danger > i,
.project-kanban-board .kanban-item .card-tags > .label-danger > .fa,
.project-kanban-board .kanban-item .card-tags > .label-danger > .fas {
  color: var(--color-text-danger) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-success {
  color: #15803d !important;
  background: color-mix(in srgb, #16a34a 12%, transparent) !important;
  border-color: color-mix(in srgb, #16a34a 28%, transparent) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-warning {
  color: #92400e !important;
  background: color-mix(in srgb, #f59e0b 16%, transparent) !important;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent) !important;
}
.project-kanban-board .kanban-item .card-tags > .label-info {
  color: #1d4ed8 !important;
  background: color-mix(in srgb, #3b82f6 12%, transparent) !important;
  border-color: color-mix(in srgb, #3b82f6 28%, transparent) !important;
}

.project-kanban-board .kanban-item .card-tags img.user_avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-background-primary) !important;
  background: var(--color-background-secondary) !important;
  object-fit: cover !important;
  margin-left: -6px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.06) !important;
  transition: transform .15s ease;
}
.project-kanban-board .kanban-item .card-tags img.user_avatar:first-of-type {
  margin-left: 2px !important;
}
.project-kanban-board .kanban-item .card-tags img.user_avatar:hover {
  transform: translateY(-2px) scale(1.06);
  z-index: 2;
  position: relative;
}

.project-kanban-board .kanban-item.is-moving,
.project-kanban-board .gu-mirror.kanban-item {
  opacity: .92 !important;
  box-shadow: 0 12px 28px rgba(15, 17, 21, 0.18) !important;
  border-color: var(--color-text-primary) !important;
  cursor: grabbing !important;
}
.project-kanban-board .kanban-item.gu-transit {
  opacity: .35 !important;
  background: var(--color-background-secondary) !important;
  border-style: dashed !important;
}

.project-kanban-board .ps__rail-x,
.project-kanban-board .ps__rail-y {
  background: transparent !important;
  opacity: 0;
  transition: opacity .2s ease;
}
.project-kanban-board .meta-tasks:hover > .ps__rail-x,
.project-kanban-board .meta-tasks:hover > .ps__rail-y,
.project-kanban-board .kanban-drag:hover > .ps__rail-x,
.project-kanban-board .kanban-drag:hover > .ps__rail-y {
  opacity: 1;
}
.project-kanban-board .ps__thumb-x,
.project-kanban-board .ps__thumb-y {
  background: var(--color-border-secondary) !important;
  border-radius: 999px !important;
}
.project-kanban-board .ps__rail-x:hover .ps__thumb-x,
.project-kanban-board .ps__rail-y:hover .ps__thumb-y {
  background: var(--color-text-tertiary) !important;
}

@media (max-width: 768px) {
  .project-kanban-board .kanban-container {
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
  }
  .project-kanban-board .kanban-board {
    width: 86vw !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
  }
  .project-kanban-board .kanban-drag {
    max-height: 60vh !important;
  }
}

html.dark-mode .project-kanban-board .kanban-item {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project-kanban-board .kanban-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30) !important;
}
html.dark-mode .project-kanban-board .kanban-item .card-tags img.user_avatar {
  border-color: var(--color-background-primary) !important;
}
html.dark-mode .project-kanban-board .gu-mirror.kanban-item,
html.dark-mode .project-kanban-board .kanban-item.is-moving {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.65) !important;
}

.btn,
button.btn,
input[type=submit].btn,
input[type=button].btn,
input[type=reset].btn,
a.btn,
.add-user-modal-btn,
.max-add-btn,
.table-action-btn {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.btn-xs {
  height: var(--control-height-xs) !important;
  min-height: var(--control-height-xs) !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.btn-sm {
  height: var(--control-height-sm) !important;
  min-height: var(--control-height-sm) !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
}
.btn-lg {
  height: var(--control-height-lg) !important;
  min-height: var(--control-height-lg) !important;
  padding: 0 18px !important;
  font-size: 13.5px !important;
}

.btn-block {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.btn.btn-icon,
.btn.btn-icon-only,
.btn[data-icon-only="true"] {
  width: var(--control-height) !important;
  padding: 0 !important;
  justify-content: center !important;
}
.btn-xs.btn-icon { width: var(--control-height-xs) !important; }
.btn-sm.btn-icon { width: var(--control-height-sm) !important; }
.btn-lg.btn-icon { width: var(--control-height-lg) !important; }

.file-input .btn,
.file-caption-main .btn,
.file-input-new .btn,
.file-input-exist .btn {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
}

.input-group .input-group-btn > .btn,
.input-group-btn > .btn,
.input-group .btn {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
}
.dt-buttons .btn,
.dt-buttons .buttons-html5,
.dt-buttons .buttons-collection {
  height: var(--control-height-sm) !important;
  min-height: var(--control-height-sm) !important;
  padding: 0 var(--button-padding-x) !important;
}

.btn-group {
  display: inline-flex !important;
  align-items: stretch !important;
}
.btn-group > .btn {
  margin: 0 !important;
}
.form-control,
input.form-control,
select.form-control,
textarea.form-control:not([rows]):not([data-allow-grow]) {
  min-height: var(--control-height) !important;
}
input.form-control,
select.form-control {
  height: var(--control-height) !important;
}
.input-group .form-control {
  height: var(--control-height) !important;
}
.select2-container--default .select2-selection--single {
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--control-height) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--control-height) - 2px) !important;
}

.form-group:has(> select.form-control:not(.select2-hidden-accessible)),
.form-group:has(> .input-group > select.form-control:not(.select2-hidden-accessible)) {
  position: relative;
  align-self: flex-start;
}
.form-group:has(> select.form-control:not(.select2-hidden-accessible))::after,
.form-group:has(> .input-group > select.form-control:not(.select2-hidden-accessible))::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  right: var(--button-padding-x);
  top: calc((var(--control-height) - var(--body-font-size, 13px) + 1px) / 2);
  z-index: 11;
  color: var(--color-text-tertiary, #9ca3af);
  pointer-events: none;
  font-size: calc(var(--body-font-size, 13px) - 1px);
  line-height: 1;
}
.form-group:has(> label):has(> select.form-control:not(.select2-hidden-accessible))::after,
.form-group:has(> label):has(> .input-group > select.form-control:not(.select2-hidden-accessible))::after {
  top: calc(
    (var(--body-font-size, 13px) * 1.42857) + 5px
    + (var(--control-height) - var(--body-font-size, 13px) + 1px) / 2
  );
  display: none;
}
select.form-control:not(.select2-hidden-accessible) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: calc(var(--button-padding-x) * 2 + var(--body-font-size, 13px)) !important;
  background-image: none !important;
}
.form-group:has(> .input-group > select.form-control + .input-group-addon)::after,
.form-group:has(> .input-group > select.form-control + .input-group-btn)::after,
.form-group:has(> .input-group > .input-group-addon + select.form-control:last-child)::after {
  display: initial;
}
.form-group:has(> .input-group > select.form-control:not(:last-child))::after {
  display: none !important;
}

.text-center > .btn-group,
.form-actions > .btn-group,
.actions-row > .btn-group,
.modal-footer > .btn-group,
.box-footer > .btn-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.text-center > .btn-group > .btn,
.form-actions > .btn-group > .btn,
.actions-row > .btn-group > .btn,
.modal-footer > .btn-group > .btn,
.box-footer > .btn-group > .btn {
  border-radius: var(--border-radius-md) !important;
  margin: 0 !important;
}
.text-center > .btn-group > .btn:first-child,
.text-center > .btn-group > .btn:last-child,
.text-center > .btn-group > .btn:not(:first-child),
.text-center > .btn-group > .btn:not(:last-child),
.form-actions > .btn-group > .btn:first-child,
.form-actions > .btn-group > .btn:last-child,
.form-actions > .btn-group > .btn:not(:first-child),
.form-actions > .btn-group > .btn:not(:last-child),
.actions-row > .btn-group > .btn:first-child,
.actions-row > .btn-group > .btn:last-child,
.actions-row > .btn-group > .btn:not(:first-child),
.actions-row > .btn-group > .btn:not(:last-child),
.modal-footer > .btn-group > .btn:first-child,
.modal-footer > .btn-group > .btn:last-child,
.modal-footer > .btn-group > .btn:not(:first-child),
.modal-footer > .btn-group > .btn:not(:last-child) {
  border-radius: var(--border-radius-md) !important;
}

.btn-default-submit,
button.btn-default-submit,
input[type=submit].btn-default-submit,
.btn.btn-default-submit {
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary, var(--color-border-secondary)) !important;
  font-weight: 500 !important;
}
.btn-default-submit:hover,
button.btn-default-submit:hover,
.btn.btn-default-submit:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary, var(--color-border-secondary)) !important;
  color: var(--color-text-primary) !important;
}
.btn-default-submit:focus,
.btn-default-submit:active,
.btn.btn-default-submit:focus {
  background: var(--color-background-secondary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 20%, transparent) !important;
}

.text-center > .btn-group > .btn-primary.submit_product_form,
.form-actions > .btn-group > .btn-primary.submit_product_form,
.actions-row > .btn-group > .btn-primary.submit_product_form {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-info) 25%, transparent) !important;
}
@media (max-width: 480px) {
  .text-center > .btn-group,
  .form-actions > .btn-group,
  .actions-row > .btn-group,
  .modal-footer > .btn-group {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .text-center > .btn-group > .btn,
  .form-actions > .btn-group > .btn,
  .actions-row > .btn-group > .btn,
  .modal-footer > .btn-group > .btn {
    width: 100% !important;
  }
}

#product_variation_form_part.add-product-price-table {
  table-layout: fixed !important;
  width: 100% !important;
}

#product_variation_form_part.add-product-price-table > thead > tr > th:first-child,
#product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:first-child {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 160px !important;
}
#product_variation_form_part.add-product-price-table > thead > tr > th:last-child,
#product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:last-child {
  width: auto !important;
  max-width: none !important;
}

#product_variation_form_part.add-product-price-table > thead > tr > th.col-sm-2,
#product_variation_form_part.add-product-price-table > thead > tr > th.col-sm-10 {
  float: none !important;
  position: static !important;
  padding: 10px 12px !important;
}
#product_variation_form_part .variation_row > td:first-child {
  vertical-align: top !important;
  padding: 14px 12px !important;
}
#product_variation_form_part .variation_row > td:first-child .variation_template {
  position: sticky !important;
  top: 8px !important;
  width: 100% !important;
}

#product_variation_form_part.add-product-price-table > thead > tr > th:first-child {
  font-size: 11.5px !important;
  letter-spacing: .4px !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-secondary) !important;
}
@media (max-width: 767px) {
  #product_variation_form_part.add-product-price-table,
  #product_variation_form_part.add-product-price-table > tbody,
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row,
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #product_variation_form_part.add-product-price-table > thead {
    display: none !important;
  }
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:first-child {
    border-bottom: 0 !important;
    padding-bottom: 8px !important;
  }
  #product_variation_form_part.add-product-price-table > tbody > tr.variation_row > td:first-child::before {
    content: "Variation";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--color-text-tertiary);
    margin-bottom: 6px;
  }
  #product_variation_form_part .variation_row > td:first-child .variation_template {
    position: static !important;
  }
}

.variation_value_table.blue-header {
  margin-bottom: 0 !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
}

.sells-create-page .direct-sell-product-table-wrap {
  --pos-row-max-height: 520px;  
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: var(--pos-row-max-height) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-lg) !important;
  background: var(--color-background-primary) !important;
}
.sells-create-page #pos_table {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  min-width: 1254px !important;
  table-layout: fixed !important;
}
.sells-create-page #pos_table * {
  box-sizing: border-box !important;
}
.sells-create-page #pos_table.table-bordered,
.sells-create-page #pos_table.table-striped {
  background: transparent !important;
}
.sells-create-page #pos_table > thead > tr > th,
.sells-create-page #pos_table > tbody > tr > td {
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-tertiary) !important;
  vertical-align: middle !important;
  padding: 10px 8px !important;
  background: transparent !important;
  overflow: hidden !important;  
}
.sells-create-page #pos_table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

.sells-create-page #pos_table > thead > tr > th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: var(--color-text-tertiary) !important;
  background: var(--color-background-secondary) !important;
  white-space: normal !important;  
  line-height: 1.3 !important;
}
.sells-create-page #pos_table > thead > tr > th:first-child {
  border-top-left-radius: var(--border-radius-lg) !important;
}
.sells-create-page #pos_table > thead > tr > th:last-child {
  border-top-right-radius: var(--border-radius-lg) !important;
}

.sells-create-page #pos_table > tbody > tr.product_row:hover {
  background: color-mix(in srgb, var(--color-text-primary) 3%, transparent) !important;
}
.sells-create-page #pos_table > tbody > tr.product_row:nth-child(even) {
  background: color-mix(in srgb, var(--color-text-primary) 1.5%, transparent) !important;
}
.sells-create-page #pos_table .pos-product-name-wrap {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.sells-create-page #pos_table .pos-product-row-image {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: var(--border-radius-md) !important;
  border: 1px solid var(--color-border-tertiary) !important;
  flex-shrink: 0 !important;
}
.sells-create-page #pos_table .pos-product-name-text {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  font-size: 13.5px !important;
  display: block !important;
  overflow-wrap: anywhere !important;
}
.sells-create-page #pos_table .pos-product-meta {
  color: var(--color-text-tertiary) !important;
  font-size: 11.5px !important;
  margin-top: 2px !important;
}
.sells-create-page #pos_table .pos-product-meta-stock {
  color: var(--color-text-secondary) !important;
}
.sells-create-page #pos_table select.lot_number {
  display: block !important;
  width: 100% !important;
  height: 30px !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  border-radius: var(--border-radius-sm) !important;
  border: 1px solid var(--color-border-secondary) !important;
}
.sells-create-page #pos_table textarea[name*="sell_line_note"] {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  resize: vertical !important;
  min-height: 36px !important;
  border-radius: var(--border-radius-sm) !important;
  border: 1px solid var(--color-border-secondary) !important;
}
.sells-create-page #pos_table .pos-product-name-cell .help-block {
  font-size: 11px !important;
  margin: 4px 0 0 !important;
  color: var(--color-text-tertiary) !important;
}
.sells-create-page #pos_table .pos-product-name-cell br {
  display: none !important;
}

.sells-create-page #pos_table .input-number {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  background: var(--color-background-primary) !important;
  max-width: 100% !important;
}
.sells-create-page #pos_table .input-number > .input-group-btn,
.sells-create-page #pos_table .input-number > .pos-unit-dropdown {
  display: inline-flex !important;
}
.sells-create-page #pos_table .input-number .quantity-down,
.sells-create-page #pos_table .input-number .quantity-up,
.sells-create-page #pos_table .input-number .pos-unit-toggle {
  height: 32px !important;
  width: 32px !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sells-create-page #pos_table .input-number .quantity-down:hover {
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
}
.sells-create-page #pos_table .input-number .quantity-up:hover {
  background: color-mix(in srgb, #16a34a 12%, transparent) !important;
}
.sells-create-page #pos_table .input-number .pos-unit-toggle:hover {
  background: var(--color-background-secondary) !important;
}
.sells-create-page #pos_table .input-number .pos_quantity {
  height: 32px !important;
  width: 56px !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--color-border-tertiary) !important;
  border-right: 1px solid var(--color-border-tertiary) !important;
  text-align: center !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.sells-create-page #pos_table .pos_unit_price,
.sells-create-page #pos_table .pos_unit_price_inc_tax,
.sells-create-page #pos_table .row_discount_amount,
.sells-create-page #pos_table .row_discount_type,
.sells-create-page #pos_table .tax_id,
.sells-create-page #pos_table .pos-tax-select,
.sells-create-page #pos_table select[name*="warranty_id"] {
  display: block !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
  border-radius: var(--border-radius-sm) !important;
  border: 1px solid var(--color-border-secondary) !important;
  font-size: 12.5px !important;
  padding: 0 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--color-background-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sells-create-page #pos_table .row_discount_amount {
  margin-bottom: 4px !important;
}
.sells-create-page #pos_table td > br {
  display: none !important;
}

.sells-create-page #pos_table .pos-subtotal-cell {
  white-space: nowrap !important;
  font-weight: 600 !important;
}
.sells-create-page #pos_table .pos_line_total_text {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  color: var(--color-text-primary) !important;
  font-size: 13.5px !important;
}

.sells-create-page #pos_table .pos-remove-cell {
  text-align: center !important;
}
.sells-create-page #pos_table .pos-remove-btn {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: var(--border-radius-md) !important;
  background: transparent !important;
  color: var(--color-text-tertiary) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  padding: 0 !important;
}
.sells-create-page #pos_table .pos-remove-btn:hover {
  background: color-mix(in srgb, var(--color-text-danger) 10%, transparent) !important;
  color: var(--color-text-danger) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 25%, transparent) !important;
}

html.dark-mode .sells-create-page .direct-sell-product-table-wrap {
  background: var(--color-background-secondary) !important;
}
html.dark-mode .sells-create-page #pos_table > thead > tr > th {
  background: color-mix(in srgb, var(--color-background-primary) 60%, var(--color-background-secondary)) !important;
}

.sells-create-page .pos-unit-dropdown .pos-unit-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  z-index: 1000 !important;
  min-width: 140px !important;
  margin: 4px 0 0 !important;
  padding: 6px !important;
  background: var(--color-background-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text-primary) 12%, transparent) !important;
  list-style: none !important;
}
.sells-create-page .pos-unit-dropdown.open > .pos-unit-menu {
  display: block !important;
}
.sells-create-page .pos-unit-dropdown {
  position: relative !important;
}
.sells-create-page .pos-unit-menu > li {
  list-style: none !important;
}
.sells-create-page .pos-unit-menu > li > a {
  display: block !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.sells-create-page .pos-unit-menu > li > a:hover {
  background: var(--color-background-secondary) !important;
}
.sells-create-page .pos-unit-menu > li > a.selected {
  background: color-mix(in srgb, var(--color-text-info) 15%, transparent) !important;
  color: var(--color-text-info) !important;
  font-weight: 600 !important;
}



.sells-create-page #pos_table .input-number {
  overflow: visible !important;
}
.sells-create-page #pos_table .pos-unit-dropdown {
  position: relative !important;
  overflow: visible !important;
}
.sells-create-page #pos_table .pos-unit-menu {
  z-index: 1050 !important;
}
.sells-create-page #pos_table .pos-unit-dropdown.open > .pos-unit-menu {
  display: block !important;
}


.sells-create-page #pos_table .pos-product-name-trigger {
  display: inline-block !important;
  cursor: pointer !important;
}
body.modal-open .sells-create-page #pos_table > tbody > tr.product_row,
body.modal-open .sells-create-page #pos_table > tbody > tr.product_row > td {
  position: static !important;
  z-index: auto !important;
}

.sells-create-page .form-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.sells-create-page .form-box > .clearfix {
  display: none !important;
}
.accordionContent > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.accordionContent > .row > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}
.accordionContent > .row > [class*="col-"] > .form-group,
.accordionContent > .row > [class*="col-"] > .form-box {
  width: 100% !important;
  flex: 1 0 auto !important;
}
.accordionContent > .row > [class*="col-"].hide {
  display: none !important;
}
.accordionContent > .row > .col-xs-12.col-sm-6.col-md-4.col-lg-4 {
  width: 50% !important;
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
@media (max-width: 767px) {
  .accordionContent > .row > [class*="col-sm-"],
  .accordionContent > .row > .col-xs-12.col-sm-6.col-md-4.col-lg-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
.bill-to-option {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 0;
}
.bill-to-option > button {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--color-border-secondary, #e5e7eb);
  border-radius: var(--border-radius-md, 8px);
  background: var(--color-background-primary, #fff);
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-secondary, #6b7280);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bill-to-option > button:hover {
  border-color: var(--color-border-primary, #d1d5db);
  background: var(--color-background-secondary, #f9fafb);
}
.bill-to-option > button > div {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-primary, #111827);
  white-space: normal;
  word-break: break-word;
}
.bill-to-option > button > div:empty {
  display: none;
}
@media (max-width: 575px) {
  .bill-to-option {
    grid-template-columns: 1fr;
  }
}

.input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100%;
}
.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn {
  display: flex !important;
  align-items: center !important;
  height: var(--control-height, 34px) !important;
  min-height: var(--control-height, 34px) !important;
  box-sizing: border-box !important;
}
.input-group > .input-group-addon {
  justify-content: center !important;
  padding: 0 var(--button-padding-x) !important;
}
.input-group > .input-group-btn {
  width: auto !important;
}
.input-group > .input-group-btn > .btn {
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.input-group > .select2-container--default .select2-selection--single {
  height: var(--control-height, 34px) !important;
  min-height: var(--control-height, 34px) !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 767px) {
  .pos-create-page #pos_table,
  .pos-create-page #pos_table > tbody {
    display: block !important;
    width: 100% !important;
  }
  .pos-create-page #pos_table > thead {
    display: none !important;
  }
  .pos-create-page .pos-product-table-wrap {
    overflow-x: visible !important;
  }

  .pos-create-page #pos_table > tbody > tr.product_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 4px !important;
    column-gap: 10px !important;
    padding: 2px 12px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-radius: var(--border-radius-md, 8px) !important;
    background: var(--color-background-primary, #fff) !important;
  }
  .pos-create-page #pos_table > tbody > tr.product_row > td {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pos-create-page #pos_table > tbody > tr.product_row > td.product-img,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-tax-cell,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-price-cell,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos_unit_price):not(.pos-price-cell),
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .row_discount_amount) {
    display: none !important;
  }

  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger),
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    order: 1 !important;
    margin-right: auto !important;  
    z-index: 2;
    position: relative;
  }

  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) textarea[name*="sell_line_note"],
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) .help-block,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) .modifier-display-section,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-trigger) .modifiers_html,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) textarea[name*="sell_line_note"],
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) .help-block,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) .modifier-display-section,
  .pos-create-page #pos_table > tbody > tr.product_row > td:has(> .pos-product-name-text) .modifiers_html {
    display: none !important;
  }

  .pos-create-page #pos_table .pos-product-name-trigger,
  .pos-create-page #pos_table .pos-product-name-text {
    color: var(--color-text-info) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: color-mix(in srgb, var(--color-text-info) 35%, transparent) !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
  }

  .pos-create-page #pos_table > tbody > tr.product_row > td.unit-quantity-flex,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-qty-cell {
    flex: 0 0 auto !important;
    order: 2 !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    height: 36px !important;
    border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-radius: var(--border-radius-md, 8px) !important;
    overflow: visible !important;
    background: var(--color-background-primary, #fff) !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number > .input-group-btn {
    display: inline-flex !important;
    width: auto !important;
    height: 100% !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number .quantity-down,
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number .quantity-up,
  .pos-create-page .pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-down,
  .pos-create-page .pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-up {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .input-group.input-number .pos_quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-right: 1px solid var(--color-border-secondary, #e5e7eb) !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .pos-unit-dropdown {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 100% !important;
    margin-left: 4px !important;
    border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  }
  .pos-create-page #pos_table td.pos-qty-cell .pos-unit-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-subtotal-cell {
    flex: 1 1 auto !important;
    text-align: right !important;
    order: 5 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .pos-create-page #pos_table > tbody > tr.product_row > td.unit-quantity-flex,
  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-qty-cell {
    order: 4 !important;
    flex: 0 0 auto !important;
  }
  .pos-create-page #pos_table > tbody > tr.product_row::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .pos-create-page #pos_table > tbody > tr.product_row > td.pos-remove-cell,
  .pos-create-page #pos_table > tbody > tr.product_row > td.text-center.v-center.pos-remove-cell {
    position: static !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    margin-left: auto !important;
    text-align: right !important;
    align-self: center !important;
  }
}

body.modal-open .pos-create-page #pos_table > tbody > tr.product_row,
body.modal-open .pos-create-page #pos_table > tbody > tr.product_row > td {
  position: static !important;
  z-index: auto !important;
}

.panel-collapse .panel-body > .btn-group[data-toggle="buttons"],
.btn-group[data-toggle="buttons"]:has(> .modifier-btn) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}
.btn-group[data-toggle="buttons"] > .modifier-btn,
.modifier-btn,
.modifier-btn.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--color-border-secondary, #e5e7eb) !important;
  background: var(--color-background-primary, #fff) !important;
  color: var(--color-text-primary, #111827) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  margin: 0 !important;
  float: none !important;
  box-shadow: none !important;
  position: relative !important;
}
.modifier-btn.btn.btn-outline-primary,
.modifier-btn:not(.active) {
  background: var(--color-background-primary, #fff) !important;
  color: var(--color-text-secondary, #6b7280) !important;
  border-color: var(--color-border-secondary, #e5e7eb) !important;
}
.modifier-btn.btn:hover {
  border-color: var(--color-text-success, #16a34a) !important;
  background: color-mix(in srgb, var(--color-text-success, #16a34a) 8%, #fff) !important;
}
.modifier-btn.btn.active,
.modifier-btn.active,
.modifier-btn.btn.btn-success.active,
.modifier-btn.btn-success.active,
.btn-group[data-toggle="buttons"] > .modifier-btn.active,
.btn-group[data-toggle="buttons"] > .modifier-btn.btn-success {
  background: var(--color-text-success, #16a34a) !important;
  border-color: var(--color-text-success, #16a34a) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-success, #16a34a) 18%, transparent) !important;
}
.modifier-btn.active .modifier-icon,
.modifier-btn.btn-success .modifier-icon {
  color: #fff !important;
}
.modifier-btn .modifier-icon {
  font-size: 14px !important;
  color: var(--color-text-tertiary, #9ca3af);
}
.modifier-btn input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.combo-items-section {
  width: 100% !important;
  display: block !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--color-border-secondary, #e5e7eb) !important;
}
.combo-header {
  margin-bottom: 6px !important;
}
.combo_modifiers {
  margin-top: 4px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.combo-toggle-btn.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  height: auto !important;
  min-height: 26px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  background: var(--color-background-secondary, #f9fafb) !important;
  color: var(--color-text-secondary, #6b7280) !important;
}
.combo-toggle-btn .combo-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--color-text-info, #2563eb) !important;
  color: #fff !important;
}

.combo_modifiers .combo-item {
  flex: 1 1 220px !important;
  min-width: 200px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-left: 3px solid var(--color-text-info, #2563eb) !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  background: var(--color-background-primary, #fff) !important;
  display: flex !important;
  flex-direction: column !important;
}
.combo_modifiers .combo-item .combo-product-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  color: var(--color-text-info, #2563eb) !important;
  font-size: 13px !important;
}
.combo_modifiers .combo-item br {
  display: none !important;
}
.combo_modifiers .selected_modifiers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
.combo_modifiers .product_modifier {
  display: inline-flex !important;
  flex-direction: column !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-left: 3px solid var(--color-text-success, #16a34a) !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  background: var(--color-background-secondary, #f9fafb) !important;
}
.combo_modifiers .product_modifier .modifier_name {
  font-weight: 600 !important;
  color: var(--color-text-success, #16a34a) !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.combo_modifiers .product_modifier small {
  font-size: 11px !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin-top: 2px !important;
}

@media (min-width: 768px) {
  .combo_modifiers .selected_modifiers {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .combo_modifiers .product_modifier {
    width: auto !important;
  }
}

@media (max-width: 767px) {
  .combo_modifiers {
    flex-direction: column !important;
  }
  .combo_modifiers .combo-item {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .combo_modifiers .selected_modifiers {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .combo_modifiers .product_modifier {
    width: auto !important;
    flex: 0 1 auto !important;
  }
  .panel-collapse .panel-body > .btn-group[data-toggle="buttons"] {
    gap: 6px !important;
  }
  .modifier-btn.btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
    min-height: 30px !important;
  }
}
#pos_table tbody tr.combo_items_row {
  background: transparent !important;
}
#pos_table tbody tr.combo_items_row > td.combo_items_cell {
  padding: 0 10px 10px 10px !important;
  border-top: 0 !important;
  background: transparent !important;
}
#pos_table tbody tr.combo_items_row .combo-items-section {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: block !important;
  box-shadow: none !important;
}
#pos_table tbody tr.combo_items_row .combo-header {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px 0 !important;
  padding: 3px 8px !important;
  border: 1px solid var(--color-border-tertiary, #e5e7eb) !important;
  background: transparent !important;
  border-radius: var(--border-radius-sm, 4px) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-text-secondary, #6b7280) !important;
  cursor: pointer !important;
}
#pos_table tbody tr.combo_items_row .combo-header .combo-toggle-icon {
  font-size: 12px !important;
  color: var(--color-text-secondary, #6b7280) !important;
}
#pos_table tbody tr.combo_items_row .combo-header .combo-count {
  display: inline !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

#pos_table tbody tr.combo_items_row .combo_modifiers {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
#pos_table tbody tr.combo_items_row .combo_modifiers > .collapse,
#pos_table tbody tr.combo_items_row .combo_modifiers > .collapsing,
#pos_table tbody tr.combo_items_row .combo_modifiers > .panel-collapse {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 6px !important;
}
#pos_table tbody tr.combo_items_row .combo_modifiers > .collapse:not(.in) {
  display: none !important;
}
#pos_table tbody tr.combo_items_row .combo-item {
  flex: 1 1 220px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-left: 3px solid var(--color-border-info, #93c5fd) !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
  line-height: 1.5 !important;
}
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item {
  display: inline !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--color-text-info, #2563eb) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name strong,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item strong {
  color: inherit !important;
  font-weight: 500 !important;
}
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name + .selected_modifiers::before,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item + .selected_modifiers::before,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-name + br + .selected_modifiers::before,
#pos_table tbody tr.combo_items_row .combo-item .combo-product-item + br + .selected_modifiers::before {
  content: " > " !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin: 0 4px !important;
  font-weight: 500 !important;
}
#pos_table tbody tr.combo_items_row .combo-item > br {
  display: none !important;
}
#pos_table tbody tr.combo_items_row .selected_modifiers {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#pos_table tbody tr.combo_items_row .modifier-set-group {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
#pos_table tbody tr.combo_items_row .modifier-set-name {
  display: inline !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin: 0 4px 0 0 !important;
}
#pos_table tbody tr.combo_items_row .product_modifier {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}
#pos_table tbody tr.combo_items_row .product_modifier + .product_modifier::before {
  content: " | " !important;
  display: inline !important;
  color: var(--color-border-tertiary, #d1d5db) !important;
  margin: 0 4px !important;
  font-weight: 400 !important;
}
#pos_table tbody tr.combo_items_row .product_modifier .modifier_name {
  display: inline !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--color-text-success, #16a34a) !important;
  margin-right: 4px !important;
}
#pos_table tbody tr.combo_items_row .product_modifier .modifier_name i {
  margin-right: 3px !important;
}
#pos_table tbody tr.combo_items_row .product_modifier small,
#pos_table tbody tr.combo_items_row .product_modifier .text-muted {
  display: inline !important;
  font-size: 11px !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin-left: 2px !important;
}
#pos_table tbody tr.combo_items_row .product_modifier[style] {
  display: inline !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#pos_table tbody tr.combo_items_row .product_modifier .modifier_name[style] {
  display: inline !important;
  font-weight: 500 !important;
  color: var(--color-text-success, #16a34a) !important;
}

@media (max-width: 767px) {
  #pos_table tbody tr.combo_items_row > td.combo_items_cell {
    padding: 0 8px 8px 8px !important;
  }
  #pos_table tbody tr.combo_items_row .combo-item {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}
#pos_table tbody tr.modifiers_row > td.modifiers_cell {
  padding: 0 12px 8px 12px !important;
  border-top: 0 !important;
  background: transparent !important;
}
#pos_table tbody tr.modifiers_row .modifiers_html {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
}
@media (max-width: 767px) {
  #pos_table tbody tr.modifiers_row > td.modifiers_cell {
    padding: 0 8px 8px 8px !important;
  }
}
#pos_table .modifiers_html .standard_modifiers {
  display: block !important;
}
#pos_table .modifiers_html .standard_modifiers > .collapse:not(.in) {
  display: none !important;
}
#pos_table .modifiers_html .standard_modifiers > .collapse > div,
#pos_table .modifiers_html .standard_modifiers > .collapsing > div {
  border-left: 3px solid var(--color-border-info, #93c5fd) !important;
  padding: 4px 10px !important;
  margin: 4px 0 0 0 !important;
  background: transparent !important;
}
#pos_table .modifiers_html .modifier-container {
  display: block !important;
  flex-direction: row !important;
  gap: 0 !important;
  line-height: 1.5 !important;
}
#pos_table .modifiers_html .selected-modifiers-display {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier + .product_modifier::before {
  content: " | " !important;
  display: inline !important;
  color: var(--color-border-tertiary, #d1d5db) !important;
  margin: 0 4px !important;
  font-weight: 400 !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .modifier_name {
  display: inline !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--color-text-success, #16a34a) !important;
  margin-right: 4px !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .modifier_name i {
  margin-right: 3px !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier small,
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .text-muted {
  display: inline !important;
  font-size: 11px !important;
  color: var(--color-text-tertiary, #9ca3af) !important;
  margin-left: 2px !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier[style] {
  display: inline !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#pos_table .modifiers_html .selected-modifiers-display .product_modifier .modifier_name[style] {
  display: inline !important;
  font-weight: 500 !important;
  color: var(--color-text-success, #16a34a) !important;
}
#pos_table .modifiers_html .modifier-edit-btn,
#pos_table .modifiers_html .select-modifiers-btn {
  display: inline-block !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}
#pos_table .modifiers_html .modifier-container::after {
  content: "" !important;
  display: block !important;
}
#pos_table td.pos-qty-cell .input-group.input-number,
#pos_table td.unit-quantity-flex .input-group.input-number {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  height: var(--control-height, 34px) !important;
  border: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-radius: var(--border-radius-md, 8px) !important;
  overflow: visible !important;
  background: var(--color-background-primary, #fff) !important;
  vertical-align: middle !important;
}
#pos_table td.pos-qty-cell .input-group.input-number > .input-group-btn,
#pos_table td.unit-quantity-flex .input-group.input-number > .input-group-btn {
  display: inline-flex !important;
  width: auto !important;
  height: 100% !important;
}
#pos_table td.pos-qty-cell .input-group.input-number .quantity-down,
#pos_table td.pos-qty-cell .input-group.input-number .quantity-up,
#pos_table td.unit-quantity-flex .input-group.input-number .quantity-down,
#pos_table td.unit-quantity-flex .input-group.input-number .quantity-up,
.pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-down,
.pos-wrapper .pos-content .pos-table .pos-product-table td.pos-qty-cell .input-group.input-number .quantity-up {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
#pos_table td.pos-qty-cell .input-group.input-number .pos_quantity,
#pos_table td.unit-quantity-flex .input-group.input-number .pos_quantity,
#pos_table td.pos-qty-cell .input-group.input-number .input_quantity,
#pos_table td.unit-quantity-flex .input-group.input-number .input_quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-right: 1px solid var(--color-border-secondary, #e5e7eb) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
#pos_table td.pos-qty-cell .pos-unit-dropdown,
#pos_table td.unit-quantity-flex .pos-unit-dropdown {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 100% !important;
  margin-left: 0 !important;
  border-left: 1px solid var(--color-border-secondary, #e5e7eb) !important;
}
#pos_table td.pos-qty-cell .pos-unit-toggle,
#pos_table td.unit-quantity-flex .pos-unit-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.dataTables_wrapper > .row.margin-bottom-20.text-center,
.dataTables_wrapper > .row:has(> div > .dataTables_length),
.dataTables_wrapper > .row:has(> div > .dt-buttons) {
  margin-top: 20px !important;
}

.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 40% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 22% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax      { width: 10% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 11% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }
.pos-wrapper .pos-content .pos-table .pos-product-table,
#pos_table.pos-product-table {
  table-layout: fixed !important;
  width: 100% !important;
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 37% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 22% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 11% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}
@media (min-width: 1080px) and (max-width: 1199.98px) {
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 33% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 23% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 11% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}
@media (min-width: 992px) and (max-width: 1079.98px) {
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 29% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 24% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 11% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product { width: 42% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 24% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-tax,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price,
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 12% !important; }
  .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}

.pos-product-table .pos-product-name-cell .pos-product-name-body {
  min-width: 0;
}
.pos-filter .pos-filter-toggle,
.hms-room-charge-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: var(--control-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.pos-filter .pos-filter-toggle > label,
.hms-room-charge-toggle > label {
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hms-room-charge-single-booking-line {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: var(--control-height) !important;
  overflow: hidden !important;
}
.hms-room-charge-single-booking-label {
  flex: 0 0 auto !important;
  color: var(--color-text-tertiary, #667085) !important;
  font-weight: 600 !important;
}
.hms-room-charge-single-booking-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.pos-filter .hms-room-charge-wrapper {
  display: contents;
}

.pos-filter > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.pos-filter > .row > [class*="col-"] {
  float: none !important;
  align-self: flex-start !important;
}

@media (max-width: 991.98px) {
  .pos-filter > .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]),
  .pos-filter > .row > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .pos-filter .search-product,
  .pos-filter .search-product .form-group,
  .pos-filter .search-product .input-group,
  .pos-filter > .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]) .form-group,
  .pos-filter > .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]) .input-group {
    width: 100% !important;
  }
  .pos-filter .input-group > .select2-container {
    width: auto !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 458.98px) {
  .pos-filter > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .pos-filter .form-group,
  .pos-filter .input-group {
    width: 100% !important;
  }
}

body.pos-tax-column-hidden #pos_table .pos-col-tax,
body.pos-tax-column-hidden #pos_table .pos-th-tax,
body.pos-tax-column-hidden #pos_table .pos-tax-cell,
body.pos-tax-column-hidden #pos_table .instant-pos-tax-column {
  display: none !important;
}
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 42% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 25% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 14% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 14% !important; }
body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }

@media (max-width: 1300px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product { width: 41% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 26% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price,
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 14% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 42% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 26% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 14% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 13% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }
}
@media (min-width: 1080px) and (max-width: 1199.98px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 38% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 27% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }
}
@media (min-width: 992px) and (max-width: 1079.98px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 34% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty      { width: 28% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price    { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 18% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 5% !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 36% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 28% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 15% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}

@media (max-width: 767px) {
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-product  { width: 34% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-qty     { width: 28% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-price   { width: 16% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-subtotal { width: 16% !important; }
  body.pos-tax-column-hidden .pos-wrapper .pos-content .pos-table .pos-product-table .pos-col-remove   { width: 6% !important; }
}

.pos-header-action-buttons {
  position: fixed;
  top: 0px;
  right: 0;
  z-index: 1040;
  display: flex;
  align-items: flex-start;
}

.pos-header-action-buttons .pos-header-actions-toggle.btn,
.pos-header-action-buttons .pos-header-actions-toggle {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 10px !important;
  min-height: 140px;
  height: auto !important;
  padding: 14px 6px !important;
  margin: 0 !important;
  border-radius: 10px 0 0 10px !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-right: none !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: var(--shadow-sm) !important;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.pos-header-action-buttons .pos-header-actions-toggle:hover,
.pos-header-action-buttons .pos-header-actions-toggle:focus {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  outline: none;
  transform: translateX(-1px);
}
.pos-header-action-buttons.is-open .pos-header-actions-toggle {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}

.pos-header-actions-toggle .pos-header-actions-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-info);
}
.pos-header-actions-toggle .pos-header-actions-toggle-icon i { font-size: 14px; line-height: 1; }
.pos-header-actions-toggle .pos-header-actions-toggle-label {
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.pos-header-actions-toggle .pos-header-actions-toggle-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: transform .14s ease;
  transform: rotate(90deg);
}
.pos-header-actions-toggle .pos-header-actions-toggle-caret i { font-size: 12px; line-height: 1; }
.pos-header-action-buttons.is-open .pos-header-actions-toggle .pos-header-actions-toggle-caret {
  transform: rotate(-90deg);
}

.pos-header-action-buttons .pos-header-actions-menu {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 6px;
  min-width: 240px;
  max-width: 280px;
  padding: 6px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-primary);
  border-radius: var(--border-radius-lg, 10px);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transform: translateX(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  pointer-events: none;
}
.pos-header-action-buttons.is-open .pos-header-actions-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.pos-header-actions-section {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.pos-header-actions-section + .pos-header-actions-section {
  border-top: 0.5px solid var(--color-border-tertiary);
  margin-top: 2px;
  padding-top: 6px;
}
.pos-header-actions-section-label {
  display: block;
  padding: 4px 10px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  user-select: none;
}

.pos-header-actions-menu .pos-header-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  margin: 0;
  border: none;
  border-radius: var(--border-radius-md, 7px);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
  box-shadow: none !important;
  white-space: nowrap;
}
.pos-header-actions-menu .pos-header-action-btn:hover,
.pos-header-actions-menu .pos-header-action-btn:focus {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  outline: none;
}
.pos-header-actions-menu .pos-header-action-btn[disabled],
.pos-header-actions-menu .pos-header-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pos-header-actions-menu .pos-header-action-btn .pos-header-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.pos-header-actions-menu .pos-header-action-btn .pos-header-action-icon i { font-size: 12px; line-height: 1; }
.pos-header-actions-menu .pos-header-action-btn:hover .pos-header-action-icon,
.pos-header-actions-menu .pos-header-action-btn:focus .pos-header-action-icon {
  color: var(--color-text-info);
}
.pos-header-actions-menu .pos-header-action-btn .pos-header-action-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-header-actions-menu .pos-header-action-btn.pos-action-hidden {
  display: none;
}

.ph-btn.ph-btn--quick-actions { color: var(--color-text-info); }
.ph-btn.ph-btn--quick-actions:hover { color: var(--color-text-info); }
.ph-btn.ph-btn--quick-actions.ph-btn--active {
  color: var(--color-text-info);
  background: var(--color-background-info);
}

#pos_quick_actions_mobile_trigger { display: none !important; }
.pos-header-action-buttons { display: flex; }

@media (max-width: 767px) {
 #pos_quick_actions_toggle { display: none !important; }
  #pos_quick_actions_mobile_trigger { display: inline-flex !important; }
  body.pos-header-collapsed .pos-header-action-buttons {
    display: flex;
  }
  body:not(.pos-header-collapsed) #pos_quick_actions.is-open .pos-header-actions-menu {
    position: fixed;
    top: 56px;
    right: 8px;
    left: auto;
    margin-right: 0;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    z-index: 1090;
    transform: translateY(0);
  }
}
.setting-card-wrapper .footer .footer-btn button {
  background: var(--color-background-primary) !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  width: auto !important;
  min-width: 140px !important;
  border: 1px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--body-font-size, 14px) !important;
  font-weight: 600 !important;
  line-height: var(--control-line-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.setting-card-wrapper .footer .footer-btn button:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
}
.setting-card-wrapper .footer .footer-btn button.primary-btn {
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border-color: var(--color-text-primary) !important;
}
.setting-card-wrapper .footer .footer-btn button.primary-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}
html.dark-mode a.pos{
  background-color: var(--bg-hover) !important;
}
html.dark-mode a.pos:hover{
  background-color: var(--bg-hover) !important;
}

#recent_transactions_modal .table.table-slim td:last-child {
  white-space: nowrap !important;
  text-align: right !important;
  padding-right: var(--control-padding-x) !important;
}

#recent_transactions_modal .table.table-slim td:last-child > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--control-height-sm, 30px) !important;
  height: var(--control-height-sm, 30px) !important;
  padding: 0 !important;
  margin: 0 4px !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  background: var(--color-background-primary) !important;
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#recent_transactions_modal .table.table-slim td:last-child > a:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-secondary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#recent_transactions_modal .table.table-slim td:last-child > a:focus-visible {
  outline: none !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent) !important;
}

#recent_transactions_modal .table.table-slim td:last-child > a > i {
  font-size: inherit !important;
  line-height: 1 !important;
  color: inherit !important;
}

#recent_transactions_modal .table.table-slim td:last-child > a.delete-sale[style] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#recent_transactions_modal .table.table-slim td:last-child > a.delete-sale > i { color: var(--color-text-danger) !important; }
#recent_transactions_modal .table.table-slim td:last-child > a.delete-sale:hover { border-color: color-mix(in srgb, var(--color-text-danger) 35%, var(--color-border-tertiary)) !important; background: color-mix(in srgb, var(--color-text-danger) 8%, var(--color-background-primary)) !important; }
#recent_transactions_modal .table.table-slim td:last-child > a.print-invoice-link:hover > i { color: var(--accent-blue) !important; }

#recent_transactions_modal .table.table-slim td {
  padding: 8px var(--control-padding-x) !important;
  vertical-align: middle !important;
  font-size: var(--body-font-size) !important;
}
#recent_transactions_modal .table.table-slim td:first-child {
  width: 32px !important;
  color: var(--color-text-tertiary) !important;
  text-align: right !important;
}
#recent_transactions_modal .table.table-slim td.display_currency {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
#recent_transactions_modal .table.table-slim tr {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
#recent_transactions_modal .table.table-slim tr:last-child {
  border-bottom: 0 !important;
}
#recent_transactions_modal .table.table-slim tr:hover {
  background: var(--color-background-secondary) !important;
}

td.no-print[style*="display: flex"],
td.no-print[style*="display:flex"] {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  font-size: 0 !important;
  white-space: nowrap !important;
}
td.no-print[style*="display: flex"] > .btn,
td.no-print[style*="display:flex"] > .btn {
  font-size: var(--body-font-size) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs,
td.no-print[style*="display:flex"] > .btn.btn-xs,
td.no-print[style*="display: flex"] > a.btn.btn-xs,
td.no-print[style*="display:flex"] > a.btn.btn-xs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--control-height-xs, 26px) !important;
  min-width: var(--control-height-xs, 26px) !important;
  height: var(--control-height-xs, 26px) !important;
  min-height: var(--control-height-xs, 26px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--border-radius-md) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
td.no-print[style*="display: flex"] > .btn.btn-xs > i,
td.no-print[style*="display:flex"] > .btn.btn-xs > i,
td.no-print[style*="display: flex"] > a.btn.btn-xs > i,
td.no-print[style*="display:flex"] > a.btn.btn-xs > i {
  font-size: inherit !important;
  line-height: 1 !important;
  margin: 0 !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs:hover,
td.no-print[style*="display:flex"] > .btn.btn-xs:hover,
td.no-print[style*="display: flex"] > a.btn.btn-xs:hover,
td.no-print[style*="display:flex"] > a.btn.btn-xs:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs:focus-visible,
td.no-print[style*="display:flex"] > .btn.btn-xs:focus-visible {
  outline: none !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs.edit_payment,
td.no-print[style*="display:flex"] > .btn.btn-xs.edit_payment {
  background: var(--color-background-primary) !important;
  color: var(--color-text-secondary) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs.edit_payment:hover {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-secondary) !important;
}

td.no-print[style*="display: flex"] > .btn.btn-xs.delete_payment,
td.no-print[style*="display:flex"] > .btn.btn-xs.delete_payment {
  background: var(--color-background-primary) !important;
  color: var(--color-text-danger) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs.delete_payment:hover {
  background: color-mix(in srgb, var(--color-text-danger) 8%, var(--color-background-primary)) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 35%, var(--color-border-tertiary)) !important;
  color: var(--color-text-danger) !important;
}

td.no-print[style*="display: flex"] > .btn.btn-xs.view_payment,
td.no-print[style*="display:flex"] > .btn.btn-xs.view_payment {
  background: var(--color-background-primary) !important;
  color: var(--color-text-secondary) !important;
}
td.no-print[style*="display: flex"] > .btn.btn-xs.view_payment:hover {
  background: var(--color-background-secondary) !important;
  color: var(--accent-blue) !important;
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--color-border-tertiary)) !important;
}

td.no-print[style*="display: flex"] > a.btn.btn-xs.btn-success {
  background: var(--color-background-primary) !important;
  color: var(--color-text-success) !important;
}
td.no-print[style*="display: flex"] > a.btn.btn-xs.btn-success:hover {
  background: color-mix(in srgb, var(--color-text-success) 8%, var(--color-background-primary)) !important;
  border-color: color-mix(in srgb, var(--color-text-success) 35%, var(--color-border-tertiary)) !important;
  color: var(--color-text-success) !important;
}

.main-container > .invoice-card-wrapper,
.invoice-card-wrapper {
  margin-top: 16px !important;
}


.invoice-card-wrapper .invoice-container-preview {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg, 12px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  padding: 24px !important;
  color: var(--color-text-primary) !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-id {
  color: var(--color-text-primary) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding-bottom: 16px !important;
  margin: 0 0 16px 0 !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}

.invoice-card-wrapper .invoice-container-preview .invoice-date-status {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
.invoice-card-wrapper .invoice-date .item span {
  color: var(--color-text-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.invoice-card-wrapper .invoice-date .item p {
  color: var(--color-text-primary) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 600 !important;
  margin: 2px 0 0 0 !important;
}
.invoice-card-wrapper .invoice-status h5 {
  color: var(--color-text-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 6px 0 !important;
  text-align: right !important;
}
.invoice-card-wrapper .invoice-status .paid,
.invoice-card-wrapper .invoice-status .not-paid {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--control-height-xs, 26px) !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  border: 0.5px solid transparent !important;
}
.invoice-card-wrapper .invoice-status .paid {
  background: color-mix(in srgb, var(--color-text-success) 12%, var(--color-background-primary)) !important;
  color: var(--color-text-success) !important;
  border-color: color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;
}
.invoice-card-wrapper .invoice-status .not-paid {
  background: color-mix(in srgb, var(--color-text-danger) 10%, var(--color-background-primary)) !important;
  color: var(--color-text-danger) !important;
  border-color: color-mix(in srgb, var(--color-text-danger) 30%, transparent) !important;
}

.invoice-card-wrapper .invoice-container-preview .invoice-bill-info {
  background: var(--color-background-secondary) !important;
  background-image: none !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 16px !important;
  margin: 16px 0 20px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}
.invoice-card-wrapper .invoice-bill-info .company-address,
.invoice-card-wrapper .invoice-bill-info .bill-address {
  width: auto !important;
}
.invoice-card-wrapper .invoice-bill-info .company-address h3,
.invoice-card-wrapper .invoice-bill-info .bill-address h3 {
  color: var(--color-text-primary) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}
.invoice-card-wrapper .invoice-bill-info .company-address span,
.invoice-card-wrapper .invoice-bill-info .bill-address span {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.invoice-card-wrapper .invoice-container-preview .pricing-table-wrapper {
  margin-top: 24px !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  padding-bottom: 8px !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table {
  width: 280px !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr {
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr td:first-child {
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
}
.invoice-card-wrapper .invoice-container-preview .pricing-table tbody tr td:last-child {
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-message {
  width: 100% !important;
  max-width: none !important;
  margin-top: 16px !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-message b {
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
}
.invoice-card-wrapper .invoice-container-preview .invoice-message p {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  line-height: 1.5 !important;
  margin: 4px 0 0 0 !important;
}

.invoice-card-wrapper .invoice-options-box,
.invoice-card-wrapper .invoice-link-box {
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-lg, 12px) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  padding: 16px !important;
  margin: 0 0 14px 0 !important;
}

.invoice-card-wrapper .invoice-options-box .head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}
.invoice-card-wrapper .invoice-options-box .head [class^="invoice-status-"] {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--control-height-xs, 26px) !important;
  padding: 0 12px !important;
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: 999px !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
}
.invoice-card-wrapper .invoice-options-box .head .invoice-status-final {
  background: color-mix(in srgb, var(--color-text-success) 12%, var(--color-background-primary)) !important;
  color: var(--color-text-success) !important;
  border-color: color-mix(in srgb, var(--color-text-success) 30%, transparent) !important;
}
.invoice-card-wrapper .invoice-options-box .head .invoice-status-draft {
  background: color-mix(in srgb, var(--color-text-warning) 12%, var(--color-background-primary)) !important;
  color: var(--color-text-warning) !important;
  border-color: color-mix(in srgb, var(--color-text-warning) 30%, transparent) !important;
}
.invoice-card-wrapper .invoice-options-box .head .invoice-status-pending {
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--color-background-primary)) !important;
  color: var(--accent-blue) !important;
  border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent) !important;
}

.invoice-card-wrapper .invoice-options-box .head .options {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--control-height) !important;
  min-height: var(--control-height) !important;
  padding: 0 var(--button-padding-x) !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn:first-child {
  width: var(--control-height) !important;
  min-width: var(--control-height) !important;
  padding: 0 !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.75 !important;
}
.invoice-card-wrapper .invoice-options-box .head .options .invoice-btn:hover img {
  opacity: 1 !important;
}
html.dark-mode .invoice-card-wrapper .invoice-options-box .head .options .invoice-btn img {
  filter: invert(1) brightness(1.2);
}

.invoice-card-wrapper .invoice-dropdown-wrapper {
  position: relative;
}
.invoice-card-wrapper .invoice-dropdown {
  position: absolute !important;
  width: 220px !important;
  right: 0 !important;
  left: auto !important;
  top: 100% !important;
  margin-top: 6px !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  padding: 6px !important;
  z-index: 1050 !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.invoice-card-wrapper .invoice-dropdown.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.invoice-card-wrapper .invoice-dropdown a,
.invoice-card-wrapper .invoice-dropdown button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: var(--control-height-sm, 30px) !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease;
}
.invoice-card-wrapper .invoice-dropdown a:hover,
.invoice-card-wrapper .invoice-dropdown button:hover {
  background: var(--color-background-secondary) !important;
}
.invoice-card-wrapper .invoice-dropdown hr {
  border: 0 !important;
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  margin: 4px 0 !important;
}
.invoice-card-wrapper .invoice-dropdown #delete_invoice {
  color: var(--color-text-danger) !important;
}
.invoice-card-wrapper .invoice-dropdown #delete_invoice:hover {
  background: color-mix(in srgb, var(--color-text-danger) 8%, var(--color-background-primary)) !important;
}

.invoice-card-wrapper .invoice-options-box .content h3 {
  color: var(--color-text-tertiary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}
.invoice-card-wrapper .invoice-options-box .content h1 {
  color: var(--color-text-primary) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding: 6px 0 0 0 !important;
  margin: 0 0 12px 0 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}
.invoice-card-wrapper .invoice-options-box .content .payment {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  margin-top: 4px !important;
}
.invoice-card-wrapper .invoice-options-box .content .payment p {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}
.invoice-card-wrapper .invoice-options-box .content .payment .primary-btn,
.invoice-card-wrapper .invoice-options-box .content .payment a.primary-btn,
.invoice-card-wrapper .invoice-options-box .content .payment button.primary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--control-height-sm, 30px) !important;
  padding: 0 14px !important;
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.invoice-card-wrapper .invoice-options-box .content .payment .primary-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
  border-color: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}

.invoice-card-wrapper .invoice-options-box .bottom {
  border-top: 0.5px solid var(--color-border-tertiary) !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.invoice-card-wrapper .invoice-options-box .bottom p,
.invoice-card-wrapper .invoice-options-box .bottom span {
  color: var(--color-text-secondary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

.invoice-card-wrapper .invoice-link-box h2.title {
  color: var(--color-text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.3 !important;
}

.invoice-card-wrapper .invoice-link-box table.bg-max-tr {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
}
.invoice-card-wrapper .invoice-link-box table.bg-max-tr tr.bg-max,
.invoice-card-wrapper .invoice-link-box table.bg-max-tr tr.bg-max th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
}
.invoice-card-wrapper .invoice-link-box table.bg-max-tr th,
.invoice-card-wrapper .invoice-link-box table.bg-max-tr td {
  padding: 8px 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  vertical-align: middle !important;
}
.invoice-card-wrapper .invoice-link-box table.bg-max-tr tr:last-child td {
  border-bottom: 0 !important;
}

.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper {
  margin-top: 12px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 4px 4px 12px !important;
  gap: 8px !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  text-overflow: ellipsis !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper .copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: calc(var(--control-height) - 8px) !important;
  padding: 0 12px !important;
  background: var(--color-text-primary) !important;
  color: var(--color-background-primary) !important;
  border: 0 !important;
  border-radius: calc(var(--border-radius-md) - 2px) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: background-color .15s ease;
  white-space: nowrap !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper .copy-btn:hover {
  background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-background-primary) 12%) !important;
}
.invoice-card-wrapper .invoice-link-box .invoice-link-wrapper .copy-btn img {
  width: 12px !important;
  height: 12px !important;
  filter: invert(1) brightness(2);
}

.invoice-card-wrapper .send-invoice-btn,
.invoice-card-wrapper button.send-invoice-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: var(--control-height-lg, 40px) !important;
  padding: 0 16px !important;
  margin: 14px 0 0 0 !important;
  background: var(--accent-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--border-radius-md) !important;
  font-size: var(--body-font-size) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.invoice-card-wrapper .send-invoice-btn:hover {
  background: color-mix(in srgb, var(--accent-blue) 88%, #000 12%) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-blue) 25%, transparent) !important;
}

.invoice-card-wrapper .invoice-options-btn-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--control-height) !important;
  padding: 0 12px !important;
  margin: 0 !important;
  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-md) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
  width: auto !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a:hover {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border-primary) !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.75 !important;
}
.invoice-card-wrapper .invoice-options-btn-wrapper a:hover img {
  opacity: 1 !important;
}
html.dark-mode .invoice-card-wrapper .invoice-options-btn-wrapper a img {
  filter: invert(1) brightness(1.2);
}

.invoice-card-wrapper .invoice-options-box .bottom .switch {
  position: relative !important;
  display: inline-block !important;
  width: var(--switch-width) !important;
  height: var(--switch-height) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch .sliderCheckbox {
  position: absolute !important;
  inset: 0 !important;
  background: var(--color-border-secondary) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background-color .2s ease;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch .sliderCheckbox::before {
  content: "";
  position: absolute;
  height: var(--switch-knob-size);
  width: var(--switch-knob-size);
  left: var(--switch-knob-offset);
  bottom: var(--switch-knob-offset);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform .2s ease;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch input:checked + .sliderCheckbox {
  background: var(--accent-blue) !important;
}
.invoice-card-wrapper .invoice-options-box .bottom .switch input:checked + .sliderCheckbox::before {
  transform: translateX(var(--switch-knob-translate));
}

.invoice-card-wrapper .invoice-container-preview .table-responsive {
  border: 0.5px solid var(--color-border-tertiary) !important;
  border-radius: var(--border-radius-md) !important;
  overflow: auto !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive table {
  width: 100% !important;
  margin: 0 !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive th {
  background: var(--color-background-secondary) !important;
  color: var(--color-text-primary) !important;
  font-size: calc(var(--body-font-size) - 2px) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive td {
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--color-border-tertiary) !important;
  font-size: calc(var(--body-font-size) - 1px) !important;
  color: var(--color-text-primary) !important;
}
.invoice-card-wrapper .invoice-container-preview .table-responsive tr:last-child td {
  border-bottom: 0 !important;
}

@media (max-width: 575.98px) {
  .invoice-card-wrapper .invoice-container-preview { padding: 16px !important; }
  .invoice-card-wrapper .invoice-options-box,
  .invoice-card-wrapper .invoice-link-box { padding: 14px !important; }
  .invoice-card-wrapper .invoice-container-preview .invoice-bill-info {
    grid-template-columns: 1fr !important;
  }
  .invoice-card-wrapper .invoice-options-btn-wrapper {
    grid-template-columns: 1fr !important;
  }
  .invoice-card-wrapper .invoice-options-box .head {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .invoice-card-wrapper .invoice-options-box .head .options {
    justify-content: flex-end !important;
  }
}


body.auth-page {
  background: var(--color-background-secondary);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body.auth-page .header-auth {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  height: 56px;
  padding: 0 40px !important;
  box-sizing: border-box !important;
  background: #F5F6F8 !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}

body.auth-page .header-auth .header-left,
body.auth-page .header-auth .header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  float: none !important;
}
body.auth-page .header-auth .header-right { margin-left: auto !important; }

body.auth-page .header-auth .header-right .pull-right,
body.auth-page .header-auth .header-left .pull-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  margin: 0 !important;
  height: 100% !important;
}

body.auth-page .header-auth .header-left .lang-btn,
body.auth-page .header-auth .header-left button,
body.auth-page .header-auth .header-left a {
  color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.08) !important;
  border: 0.5px solid rgba(255,255,255,.14) !important;
  border-radius: var(--border-radius-md) !important;
  font-size: 12.5px !important;
  transition: background .15s, color .15s !important;
}
body.auth-page .header-auth .header-left .lang-btn:hover,
body.auth-page .header-auth .header-left button:hover,
body.auth-page .header-auth .header-left a:hover {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

body.auth-page .header-auth .btn-header-auth {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 8px !important;
  color: #111827 !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  transition: background .15s, color .15s, border-color .15s !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
body.auth-page .header-auth .btn-header-auth:hover {
  background: rgba(0,0,0,.06) !important;
  color: #111827 !important;
  border-color: rgba(0,0,0,.25) !important;
}

body.auth-page .header-auth .hamburger-icon span {
  background: #374151 !important;
}
body.auth-page .header-auth .dropdown-menu {
  background: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,.10) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px 0 !important;
}
body.auth-page .header-auth .dropdown-menu a {
  color: #111827 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  display: block;
  text-decoration: none;
  transition: background .12s;
}
body.auth-page .header-auth .dropdown-menu a:hover {
  background: rgba(0,0,0,.04) !important;
  color: #111827 !important;
}

body.auth-page .header-auth .header-auth-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 2 !important;
  height: 100% !important;
  pointer-events: none;
}

body.auth-page .header-auth-app-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
  font-family: var(--font-sans) !important;
}

body.auth-page .header-auth-logo-img {
  max-height: 34px !important;
  max-width: 140px !important;
  width: auto !important;
  object-fit: contain !important;
}

body.auth-page .auth-logo {
  display: none !important;
}

body.auth-page .login-layout-fallback {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-background-secondary);
  padding: 80px 24px 40px !important;
  box-sizing: border-box !important;
}

body.auth-page .auth-logo,
body.auth-page .auth-logo img,
body.auth-page .auth-logo .logo-text,
body.auth-page .auth-logo::before,
body.auth-page .auth-logo::after {
  display: none !important;
}

body.auth-page .auth-container {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 460px !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: unset !important;
  position: relative;
  z-index: 2;
}

body.auth-page .auth-container .form-content {
  width: 100% !important;

  background: var(--color-background-primary) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 36px 36px 28px !important;
}

body.auth-page .auth-text-heading {
  font-family: var(--font-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -.025em !important;
  margin: 0 0 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 0.5px solid var(--color-border-secondary) !important;
}

body.auth-page .input-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  background: var(--color-background-secondary) !important;
  border: 0.5px solid var(--color-border-primary) !important;
  border-radius: var(--border-radius-md) !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
body.auth-page .input-wrapper {
  gap: 6px !important;
}
body.auth-page .input-wrapper span.input-icon {
  margin-left: 5px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  color: var(--color-text-tertiary) !important;
  font-size: 13px !important;
}
body.auth-page .input-wrapper label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--color-text-secondary) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

body.auth-page .input-wrapper input {
  height: var(--control-height) !important;
  padding: var(--control-padding-y) var(--control-padding-x) !important;
  font-size: var(--body-font-size) !important;
  font-family: var(--font-sans) !important;
  color: var(--color-text-primary) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.auth-page .input-wrapper input[type="password"] {
  padding-right: 40px !important;
}
body.auth-page .input-wrapper input:-webkit-autofill,
body.auth-page .input-wrapper input:-webkit-autofill:hover,
body.auth-page .input-wrapper input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-background-secondary) inset !important;
  box-shadow: 0 0 0 1000px var(--color-background-secondary) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
body.auth-page .input-wrapper:has(input:-webkit-autofill) {
  background: var(--color-background-secondary) !important;
}

body.auth-page .input-wrapper:focus-within {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 15%, transparent) !important;
  background: var(--color-background-primary) !important;
}

body.auth-page .input-wrapper input::placeholder {
  color: var(--color-text-tertiary) !important;
}

body.auth-page .show_hide_icon {
  top: 0% !important;
}
body.auth-page .show_hide_icon .icon {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--color-text-tertiary) !important;
}
body.auth-page .show_hide_icon:hover .icon {
  stroke: var(--color-text-primary) !important;
}

body.auth-page .input-error {
  font-size: 11.5px !important;
  color: var(--color-text-danger) !important;
  background: var(--color-background-danger) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 5px 10px !important;
  margin-top: -8px !important;
  margin-bottom: 8px !important;
  border-left: 2px solid var(--accent-red) !important;
}

body.auth-page .toggle-wrapper {
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.auth-page .toggle-wrapper p {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

body.auth-page .forget-password {
  display: block !important;
  margin-top: 10px !important;
  font-size: 12.5px !important;
  color: var(--accent-blue) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
body.auth-page .forget-password:hover {
  color: color-mix(in srgb, var(--accent-blue) 80%, black 20%) !important;
  text-decoration: underline !important;
}

body.auth-page .button-wrapper {
  margin-top: 22px !important;
}

body.auth-page .button-wrapper button[type="submit"] {
  width: 100% !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -.01em !important;
  color: #fff !important;
  background: var(--secondary-color) !important;
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  cursor: pointer !important;
  transition: opacity .15s, transform .1s !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--secondary-color) 28%, transparent) !important;
}

body.auth-page .button-wrapper button[type="submit"]:hover {
  opacity: .88 !important;
}

body.auth-page .button-wrapper button[type="submit"]:active {
  transform: scale(.985) !important;
}

body.auth-page .button-wrapper button[type="submit"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 60%, transparent 80%);
  pointer-events: none;
}

body.auth-page .form-footer {
  margin-top: 20px !important;
  padding-top: 18px !important;
  border-top: 0.5px solid var(--color-border-secondary) !important;
  text-align: center !important;
}

body.auth-page .form-footer p {
  font-size: 13px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

body.auth-page .form-footer a {
  color: var(--accent-blue) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
body.auth-page .form-footer a:hover { text-decoration: underline !important; }

body.auth-page .social-login-divider {
  margin: 18px 0 14px !important;
}

body.auth-page .social-login-divider::before,
body.auth-page .social-login-divider::after {
  border-color: var(--color-border-secondary) !important;
}

body.auth-page .social-login-divider span {
  font-size: 11px !important;
  color: var(--color-text-tertiary) !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.auth-page .social-login-btn {
  border-radius: var(--border-radius-md) !important;
  font-size: 12.5px !important;
  padding: 8px 12px !important;
  font-weight: 500 !important;
  transition: opacity .15s, transform .1s !important;
}
body.auth-page .social-login-btn:hover {
  opacity: .85 !important;
  transform: translateY(-1px) !important;
}

body.auth-page .g-recaptcha { margin: 14px 0 !important; }

@media (max-width: 991.98px) {
  body.auth-page .login-layout-fallback {
    padding: 72px 16px 32px !important;
  }

  body.auth-page .auth-logo {
    position: static !important;
    width: 100% !important;
    max-width: 460px !important;
    height: auto !important;
    padding: 0 0 18px !important;
    background: transparent !important;
  }

  body.auth-page .auth-logo::before,
  body.auth-page .auth-logo::after { display: none !important; }

  body.auth-page .auth-container {
    grid-column: unset !important;
    padding: 0 !important;
    min-height: unset !important;
    background: transparent !important;
  }

  body.auth-page .auth-container .form-content {
    max-width: 100% !important;
    padding: 28px 24px 22px !important;
  }

  body.auth-page .auth-text-heading { font-size: 20px !important; }
}

@media (max-width: 767.98px) {
  body.auth-page .header-auth {
    grid-template-columns: auto 1fr auto !important;
    padding: 0 16px !important;
  }
  body.auth-page .header-auth .header-right { display: none !important; }
  body.auth-page .header-auth .header-auth-mobile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 100% !important;
    float: none !important;
    grid-column: 3 !important;
    position: static !important;
    justify-content: flex-end !important;
  }
  body.auth-page .header-auth .menu-button {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
  }
  body.auth-page .header-auth .header-left { grid-column: 1 !important; }
  body.auth-page .header-auth .header-auth-center {
    grid-column: 2 !important;
    justify-content: center !important;
  }
  body.auth-page .header-auth .select-summary .lang-name,
  body.auth-page .header-auth .select-summary .small-icon,
  body.auth-page .header-auth .select-summary i.fas { display: none !important; }
  body.auth-page .header-auth .select-summary {
    padding: 0 6px !important;
    gap: 0 !important;
    background: transparent !important;
    border-color: rgba(0,0,0,.14) !important;
    height: 32px !important;
    width: 32px !important;
    justify-content: center !important;
  }
  body.auth-page .header-auth-app-name {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 575.98px) {
  body.auth-page .auth-container .form-content {
    padding: 22px 18px 18px !important;
    border-radius: var(--border-radius-lg) !important;
  }

  body.auth-page .auth-text-heading { font-size: 18px !important; }

}

body.auth-page .auth-container.rtl .input-wrapper input[type="password"] {
  padding-right: 12px !important;
  padding-left: 40px !important;
}

body.auth-page .auth-container.rtl .show_hide_icon {
  right: auto !important;
  left: 5px !important;
}

body.auth-page .input-group .input-group-addon .fa,
body.auth-page .input-group .input-group-addon .fas {
  position: static !important;
  left: auto !important;
}

body.auth-page .previous-btn,
body.auth-page a.previous-btn {
  background-color: #6c757d !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  border: none !important;
  border-radius: var(--border-radius-md, 6px) !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
body.auth-page .previous-btn:hover,
body.auth-page a.previous-btn:hover {
  background-color: #5a6268 !important;
  color: #ffffff !important;
}
body.auth-page .previous-btn:disabled {
  background-color: #adb5bd !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}
body.auth-page .next-btn,
body.auth-page a.next-btn {
  background-color: var(--primary-color, #111827) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  border: none !important;
  border-radius: var(--border-radius-md, 6px) !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
body.auth-page .next-btn:hover,
body.auth-page a.next-btn:hover {
  opacity: 0.88 !important;
  color: #ffffff !important;
}

body.auth-page .header-auth .header-right .pull-right {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.wizard>.actions a,
.wizard>.actions a:hover,
.wizard>.actions a:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 20px !important;
  border-radius: var(--border-radius-md, 6px) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: var(--primary-color, #111827) !important;
  color: #ffffff !important;
  border: none !important;
}
.wizard>.actions a.previous-btn,
.wizard>.actions a.previous-btn:active {
  background: #6c757d !important;
  color: #ffffff !important;
}
.wizard>.actions a.previous-btn:hover {
  background: #5a6268 !important;
  color: #ffffff !important;
}
.wizard>.actions a.next-btn,
.wizard>.actions a.next-btn:active {
  background: var(--primary-color, #111827) !important;
  color: #ffffff !important;
}
.wizard>.actions a.next-btn:hover {
  opacity: 0.88 !important;
  color: #ffffff !important;
}
.wizard>.actions .disabled a,
.wizard>.actions .disabled a:hover,
.wizard>.actions .disabled a:active {
  background: #adb5bd !important;
  color: #ffffff !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

body.auth-page .input-wrapper .input-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  pointer-events: none !important;
  color: var(--color-text-tertiary) !important;
  font-size: 13px !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}
html.dark-mode .btn.btn-primary, html.dark-mode .new-user .btn-modal, html.dark-mode button.primary-btn, html.dark-mode button.add-user-modal, html.dark-mode .new-user .add-user-modal-btn, html.dark-mode input.btn-success, html.dark-mode .btn-warning, html.dark-mode .invoice-btn, html.dark-mode a.new-user, html.dark-mode button.new-user, html.dark-mode a.pos {
    background-color: var(--secondary-color) !important;
    border: none;
}
section#receipt_section.invoice,
#receipt_section.print_section,
#receipt_section.print_section.invoice,
.print_section#receipt_section,
.print_section#receipt_section.invoice,
body > .receipt {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #111 !important;
}

#receipt_section .receipt,
#receipt_section .receipt .row,
#receipt_section .receipt [class*="col-"],
#receipt_section .receipt .border-bottom,
.print_section .receipt,
.print_section .receipt .row,
.print_section .receipt [class*="col-"],
.print_section .receipt .border-bottom,
body > .receipt,
body > .receipt .row,
body > .receipt [class*="col-"],
body > .receipt .border-bottom {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#receipt_section .receipt,
.print_section .receipt,
body > .receipt {
  background: #fff !important;
  background-color: #fff !important;
}
.assignments-container {
    padding: 8px 10px !important;
}

.assignments-container .assignment-item {
    margin: 0 !important;
    padding: 4px 6px !important;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background: transparent;
    transition: background-color 0.15s ease-in-out;
    line-height: 1.25;
}

.assignments-container .assignment-item:last-child {
    border-bottom: 0;
}

.assignments-container .assignment-item:hover {
    background-color: #f7f9fb;
}

.assignments-container .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-weight: 400;
}

.assignments-container .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    transform: none;
    accent-color: #3b82f6;
    cursor: pointer;
}

.assignments-container .checkmark {
    display: none;
}

.assignments-container .item-info {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

.assignments-container .item-info .item-name {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.assignments-container .item-info .item-details {
    color: #888;
    font-size: 0.8em;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assignments-container .item-info .item-details:empty {
    display: none;
}