/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Michroma&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Custom Properties */
:root {
  /* Fonts */
  --font-inter: "Inter", sans-serif;
  --font-Michroma: "Michroma", sans-serif;
  --font-Manrope: "Manrope", sans-serif;
  --font-Nunito: "Nunito Sans", sans-serif;

  /* Colors */
  --color-primary: #16b843;
  --color-grayText: #6b7280;
  --color-darkText: #111827;
  --color-redBg: #ff4f59;
}

/* ====================================================================
                   Global Focus Styles (Green Border)
===================================================================== */
input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.input_field:focus,
 .flatpickr-input:focus {
  border-color: #16b843 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(22, 184, 67, 0.15) !important;
} 

/* Select wrapper focus-within */
.select_wrapper:focus-within,
.dashboard_outlet_search_item:focus-within {
  border-color: #16b843;
  box-shadow: 0 0 0 2px rgba(22, 184, 67, 0.15);
}

/* Search box focus */
.search_box:focus-within,
.transaction_search_input:focus-within {
  border-color: #16b843 !important;
  box-shadow: 0 0 0 2px rgba(22, 184, 67, 0.15) !important;
}

/* ====================================================================
                   Table Sorting Styles
===================================================================== */
/* Sortable column headers */
th.sortable,
td.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 20px !important;
  transition: background-color 0.2s ease;
}

th.sortable:hover,
td.sortable:hover {
  background-color: rgba(22, 184, 67, 0.08);
}

/* Sort arrow indicators */
th.sortable::after,
td.sortable::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.3;
  border-bottom: 5px solid currentColor;
}

/* Ascending sort - up arrow */
th.sortable.sort-asc::after,
td.sortable.sort-asc::after {
  border-bottom: 6px solid #16b843;
  border-top: none;
  opacity: 1;
}

/* Descending sort - down arrow */
th.sortable.sort-desc::after,
td.sortable.sort-desc::after {
  border-top: 6px solid #16b843;
  border-bottom: none;
  opacity: 1;
}

/* Active sorted column highlight */
th.sortable.sort-active,
td.sortable.sort-active {
  background-color: rgba(22, 184, 67, 0.1);
}

/* No sort indicator (default state) */
th.sortable:not(.sort-asc):not(.sort-desc)::after,
td.sortable:not(.sort-asc):not(.sort-desc)::after {
  border-bottom: 5px solid #9ca3af;
  opacity: 0.4;
}

/* Hover state for unsorted columns */
th.sortable:not(.sort-asc):not(.sort-desc):hover::after,
td.sortable:not(.sort-asc):not(.sort-desc):hover::after {
  opacity: 0.7;
}

/* Exclude action columns from sorting */
th.no-sort,
td.no-sort,
th.action-column,
td.action-column {
  cursor: default !important;
}

th.no-sort::after,
td.no-sort::after,
th.action-column::after,
td.action-column::after {
  display: none !important;
}

/* ====================================================================
                        Global CSS Starts Here
=====================================================================*/
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: green;
  border-radius: 3px;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.text-right {
  text-align: right;
}
.bold {
  font-weight: bold !important;
}
.primary-color {
  color: var(--color-primary) !important;
}
.dashboard_menu_active {
  background: rgba(22, 184, 67, 0.1) !important;
  color: var(--color-primary) !important;
}
/* ====================================================================
                        Global CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Auth Shared CSS Starts Here
===================================================================== */
.auth_main {
  width: 100%;
}
.auth_container {
  width: 100%;
  min-height: 100vh;
  max-width: 547px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth_header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.auth_title {
  color: var(--color-primary);
  font-size: 32.25px;
  font-weight: 400;
  line-height: 132%;
  letter-spacing: -0.322px;
  text-align: center;
}
.auth_subtitle {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

.auth_form {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}

.input_label {
  color: #4b5563;
  font-family: var(--font-inter);
  font-size: 0.8rem;;
  font-weight: 500;
  line-height: normal;
}
.input_field {
     border: 1px solid #e5e7eb;
    padding: 0.4rem 0.8rem;
    width: 100%;
    border-radius: 0.4rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: normal;
}
.input_field::placeholder {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: normal;
}
.auth_button {
  background-color: var(--color-primary);
  color: white;
  cursor: pointer;
  width: 100%;
  padding: 0.3rem 03rem;
  border: none;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}
.remember_me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.remember_checkbox {
  cursor: pointer;
}
.auth_options_title,
.auth_copyright {
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.auth_copyright {
  margin-top: 30px;
}
.signup_link,
.login_link {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}
/* ====================================================================
                        Auth Shared CSS Ends Here
===================================================================== */

/* ====================================================================
                        Login CSS Starts Here
=====================================================================*/
.login_container {
  min-height: 100vh;
  padding-left: 1rem;
  padding-right: 1rem;
}
.login_form {
  padding: 32px;
}
.input_group {
  display: grid;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}
.auth_options {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.signup_prompt {
  text-align: center;
  margin-top: 20px;
}
.signup_link {
  color: var(--color-primary);
  text-decoration: underline;
}
.copyright_text {
  text-align: center;
  margin-top: 2.5rem;
}
/* ====================================================================
                        Login CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Signup CSS Starts Here
=====================================================================*/
.name_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}
/* ====================================================================
                        Signup CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Pick Store CSS Starts Here
=====================================================================*/
.pick_store_form {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 32px;
  gap: 24px;
}
.select_wrapper {
  position: relative;
  width: 100%;
}
.select_wrapper .input_field {
  appearance: none;
  padding-right: 2.5rem;
  font-size: 1rem;
}
.select_arrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--color-grayText);
}
.error_message {
  color: var(--color-redBg);
  font-family: var(--font-inter);
  font-size: 14px;
  margin-top: 4px;
  display: none;
}
.input_field:invalid + .select_arrow + .error_message {
  display: block;
}
/* ====================================================================
                        Pick Store CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Customer Select CSS Starts Here
=====================================================================*/
.button_group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.auth_button_outline {
  background-color: transparent;
  color: var(--color-grayText);
  cursor: pointer;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  font-family: var(--font-Manrope);
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.auth_button_outline:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.relative {
  position: relative;
}
.search_icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--color-grayText);
  cursor: pointer;
}
.search_input_field {
  border: 1px solid #e5e7eb;
    padding: 0.45rem 1.5rem;
    width: 100%;
    border-radius: 0.5rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
}
/* ====================================================================
                        Customer Select CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Create Customer CSS Starts Here
=====================================================================*/
.customer_form, .fixcharge_form, .items_form {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.discount-input-wrapper {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
.discount-type-select {
  flex: 0 0 80px;
}
.discount-value-input {
  flex: 1;
}
.checkbox-input-group {
  margin: 0;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}
.checkbox-label input[type="checkbox"] {
  margin: 0;
}
.form-action-buttons {
  display: flex;
  gap: 10px;
  justify-content: stretch;
  margin-top: 1.5rem;
  width: 100%;
}
.form-action-buttons .auth_button {
  flex: 1;
  width: 50%;
  min-width: 0;
  padding: 0.5rem 1.5rem;
}
.form-action-buttons .form-cancel-btn {
  background-color: rgb(253, 100, 100);
  color: #fff;
  border: 1px solid #e5e7eb;
}
.form-action-buttons .form-cancel-btn:hover {
  background-color: #a73e47;
  color: #fff;
}
.form-action-buttons .form-confirm-btn {
  background-color: #16b843;
  color: white;
  border: 1px solid #16b843;
}
.form-action-buttons .form-confirm-btn:hover {
  background-color: #14a738;
  border-color: #14a738;
}
.remove-dialog-message {
  margin-bottom: 1.5rem;
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
}
.remove-employee-content .order-details-scroll {
  padding: 1.5rem;
}
.name_fields,
.contact_fields,
.address_fields,
.location_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}
.input_group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.input_field:required + .input_label::after {
  content: " *";
  color: var(--color-redBg);
}
/* ====================================================================
                        Create Customer CSS Ends Here
=====================================================================*/

/* ====================================================================
                      Business Select CSS Starts Here
=====================================================================*/
.is_employee_checkbox {
  padding: 12px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin: 10px;
}
.toggle-switch .toggle-input {
  display: none;
}
.toggle-switch .toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 24px;
  background-color: #e5e5e5;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Anahtarın yuvarlak kısmının stil */
.toggle-switch .toggle-label::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

/* Anahtarın etkin hale gelmesindeki stil değişiklikleri */
.toggle-switch .toggle-input:checked + .toggle-label {
  background-color: #4caf50;
}

.toggle-switch .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

/* Light tema */
.toggle-switch.light .toggle-label {
  background-color: #bebebe;
}

.toggle-switch.light .toggle-input:checked + .toggle-label {
  background-color: #9b9b9b;
}

.toggle-switch.light .toggle-input:checked + .toggle-label::before {
  transform: translateX(6px);
}

/* Dark tema */
.toggle-switch.dark .toggle-label {
  background-color: #4b4b4b;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label {
  background-color: #717171;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

/* ====================================================================
                      Business Select CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Common CSS Starts Here
=====================================================================*/
.dashboard_home_main {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.topbar {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #e5e7eb;
  background: white;
  top: 0;
  left: 0;
  z-index: 999;
}
.dashboard_body {
  width: 100%;
  height: 92%;
  padding-top: 0.5rem;
  overflow-y: scroll;
}
.dashboard_sidebar {
  width: 20%;
  height: calc(100vh - 5dvh);
  background: white;
  overflow-y: scroll;
  border-right: 1px solid #e5e7eb;
  position: fixed;
  left: 0;
  top: 5dvh;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
  transform: translateX(-100%);
}

.dashboard_sidebar.sidebar-open {
  transform: translateX(0);
}

/* Overlay for sidebar */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.overlay.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Required Field Asterisk Styling */
.required-asterisk {
  color: red !important;
  font-weight: bold;
}

/* Modal Close Icon Styling */
.modal-close-icon {
  font-size: 22px;
  font-weight: bold;
  color: #cc2e43;
  cursor: pointer;
  transition: transform 0.12s ease, color 0.15s ease;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close-icon:hover {
  color: #a73e74;
  transform: scale(1.20);
}

.modal-close-icon:active {
  transform: scale(1.10);
}

/* Style SVG paths within modal close icons */
.modal-close-icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.12s ease;
}

.modal-close-icon:hover svg {
  transform: scale(1.20);
}

.modal-close-icon:active svg {
  transform: scale(1.10);
}

.modal-close-icon svg path {
  stroke: #cc2e43;
  transition: stroke 0.15s ease;
}

.modal-close-icon:hover svg path {
  stroke: #a73e74;
}

.dashboard_outlet {
	width: 100%;
	height: 95dvh;
	padding-top: 1%;
	padding-right: 1%;
	padding-bottom: 0%;
	padding-left: 1%;
	overflow-y: visible;
	text-align: justify;
	position: fixed;
	top: 5dvh;
}
.dashboard_main_outlet {
	width: 100%;
	height: 95dvh;
	padding-right: 1%;
	padding-left: 1%;
	overflow-y: visible;
	text-align: justify;
	position: fixed;
	top: 5dvh;
}
.dashboard_orderpage_outlet {
	width: 100%;
	height: 95dvh;
	padding-top: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
	overflow-y: auto;
	text-align: justify;
	position: fixed;
	top: 5dvh;
}
#headerMain {
  height: 5dvh;
}
/* ====================================================================
                    Dashboard Common CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Dashboard Topbar CSS Starts Here
=====================================================================*/
.topbar_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
      padding-top: 0px;
    padding-right: 1rem;
    padding-bottom: 0px;
    padding-left: 1rem;
  height: 100%;
  margin: 0 auto;
}
.logo {
  color: var(--color-primary);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.topbar_actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.new_order_text {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 2dvh;
  font-weight: 600;
  transition: all linear 0.3s;
}
.new_order_text:hover {
  color: var(--color-primary);
   cursor: pointer;
}
.notification_icon {
  position: relative;
  cursor: pointer;
}
.notification_icon i {
  font-size: 1.5rem;
  color: var(--color-grayText);
}
.notification_badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--color-redBg);
  border-radius: 50%;
}
.user_dropdown {
  position: relative;
}
.dropdown_trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.user_avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.dropdown_arrow {
  color: var(--color-grayText);
  font-size: 1rem;
  display: none;
}
.dropdown_content {
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  min-width: 240px;
  z-index: 2000;
  display: none;
}
/* .user_dropdown:hover .dropdown_content {
  display: block;
} */
.user_profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
}
.profile_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.profile_info {
  display: flex;
  flex-direction: column;
}
.profile_name {
  color: var(--color-darkText);
  font-family: var(--font-Manrope);
  font-weight: 700;
  font-size: 1rem;
}
.profile_email {
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 0.875rem;
  margin-bottom: 0;
}
.dropdown_item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.dropdown_item:hover {
  color: var(--color-primary);
}
.dropdown_item i {
  font-size: 1.5rem;
}
.mobile_only {
  display: none;
}
.mobile_menu_btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.mobile_menu_btn i {
  font-size: 1.5rem;
  color: var(--color-grayText);
}
.sidebar_header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  height: 80px;
  display: flex;
  align-items: center;
}
.sidebar_content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.side_nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nav_link {
  padding: 0.75rem 1rem;
  color: var(--color-grayText);
  font-family: var(--font-inter);
  border-radius: 0.25rem;
}
.nav_link:hover {
  background-color: #f3f4f6;
  color: var(--color-primary);
}
/* ====================================================================
                        Dashboard Topbar CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Sidebar CSS Starts Here
=====================================================================*/
.sidebar_content {
  padding: 0 1.5rem;
}
.sidebar_section_title {
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 1rem 0 1rem;
}
.sidebar_menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar_link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
      padding: 0.2rem 0.5rem;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
  margin-bottom: 0.25rem;
}
.sidebar_link.active {
  color: var(--color-primary);
  background-color: rgba(22, 184, 67, 0.1);
  font-weight: 500;
}
.sidebar_link.active .sidebar_icon {
  fill: var(--color-primary);
}
.sidebar_link:hover {
  background-color: rgba(22, 184, 67, 0.1);
}
.sidebar_dropdown {
  margin-bottom: 0.25rem;
}
.dropdown_icon_container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dropdown_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding:0.2rem 0.5rem;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0.5rem;
}
.dropdown_header:hover {
  background-color: #f3f4f6;
}
.dropdown_arrow {
  margin-left: auto;
  transition: transform 0.2s;
}
.dropdown_menu {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 2.5rem;
}
.dropdown_menu.show {
}
.dropdown_link {
  display: block;
  padding: 0.2rem 0.5rem;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0.5rem;
      cursor: pointer;
}
.dropdown_link:hover {
  color: var(--color-primary);
}
/* ====================================================================
                    Dashboard Sidebar CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Progress CSS Starts Here
=====================================================================*/
.progress-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.progress-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.card-title {
  color: #212633;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-Manrope);
}
.select-container {
  position: relative;
  width: 100%;
  max-width: 176px;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background-color: #e8f8ed;
  color: #212633;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.select-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
}
.select-content.show {
  display: block;
}
.select-group {
  padding: 8px 0;
}
.select-label {
  padding: 8px 12px;
  font-size: 12px;
  color: #64748b;
}
.select-item {
  padding: 8px 12px;
  cursor: pointer;
}
.select-item:hover {
  background-color: #e8f8ed;
  color: #212633;
}
.circular-progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.circular-progress-text {
  text-anchor: middle;
}
.circular-progress-text-total {
  fill: #8e9abb;
  font-size: 18px;
  font-weight: 500;
}
.circular-progress-text-value {
  fill: #212633;
  font-size: 32px;
  font-weight: 600;
}
#singleProgress,
#businessProgress {
  color: #212633;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
  font-family: var(--font-inter);
}
/* ====================================================================
                    Dashboard Progress CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Customers Table CSS Starts Here
=====================================================================*/
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 30px;
}
.table-block h1 {
  color: #111827;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  margin-bottom: 24px;
}
.table-container {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  padding: 12px;
  text-align: left;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #424953;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  background: #f7f7f7;
}
thead tr:first-child {
  border-bottom: 1px solid #e5e7eb;
}
tr:hover {
  background-color: #f7f7f7;
}
td {
  padding: 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #4b5563;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.name-cell {
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 500;
}
.amount-cell {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
.reward-cell {
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}
.services-cell {
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 500;
}
.net-cell {
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
}
.sales-cell {
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}
/* ====================================================================
                    Customers Table CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard New Order CSS Starts Here
=====================================================================*/
.dashboard_new_order_outlet {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}	
.dashboard_new_order_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
}
.dashboard_new_order_outlet.pos-selected {
  flex: 0 0 calc(35% - 10px);
  text-align: right;
  font-family: var(--font-Manrope);
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
  border-left: 4px solid #4CAF50;
  padding-left: 10px;
}
.dashboard_outlet_content_left {
  width: 65%;
  /* height: 100%; */
  height: 89dvh; /* or adjust based on your layout */
  overflow-y: auto;	
  padding-bottom: 1%;
}

.dashboard_outlet_content_cards {
  width: 100%;
  display: grid;
 grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}
.product_card {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
   height: 100%;
  display: flex;
  flex-direction: column;
}
.product_content {
	 flex-grow: 1; 
  display: flex;
   align-items: center; 
  justify-content: center;
  user-select: none;
  flex-grow: 1; /* pushes the details to take available space */
}
.product_image_container {
  width: 35%;
  display: flex;
  justify-content: center;
  
}
.product_image {
  height: auto;
  max-width: 4rem;
    max-height: 4rem;
    object-fit: contain;
}
.product_details {
  width: 65%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.product_name {
  color: var(--color-darkText);
  font-family: var(--font-Manrope);
  font-size: 1rem;
  text-align: center;
      font-weight: 800;
}
.product_price, .product_rush_price {
  color: #00701f;
  font-family: var(--font-Manrope);
  font-size: 1rem;
  font-weight: 800; 
}
.quantity_controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
/*   margin: 0.5rem 0; */
   margin-top: auto; /* pushes this block to the bottom */
}
.quantity_button {
	width: 1.3rem;
	height: 1.3rem;
 /*  padding: 0; */
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background-color: #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
/* .quantity_button {
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
} */
.quantity_button:hover {
  background-color: rgba(22, 184, 67, 0.1);
}
.minus_icon,
.plus_icon {
  fill: var(--color-darkText);
}
.quantity_display {
  user-select: none;
  font-family: var(--font-Manrope);
  /* font-size: 1.25rem; */
  font-weight: 700;
  width: 70%;
    text-align: center;
    height: 1.3rem;
        border: none;
}
.quantity_input::-webkit-outer-spin-button, .quantity_input::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

.quantity_input[type=number] {
	-moz-appearance: textfield;
}

.add_button {
  background-color: #e1e1e1;
  width: 70%;
  border-radius: 5px;
  font-family: var(--font-Manrope);
  color: black;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: var(--font-Manrope);
}
.add_button_wrapper {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_button:hover {
  background-color: rgba(22, 184, 67, 0.1);
}
.order_button {
  background-color: var(--color-primary);
  width: 100%;
  padding: 0.3rem 0; 
  border-radius: 6px;
  font-weight: 500;
  font-family: var(--font-Manrope);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.order_button:hover {
  background-color: #16a034;
}

.dashboard_outlet_content_right {
  padding: 0.3rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
   width: 35%;
  min-height: 100%;
  height: 89dvh;
  overflow-y: auto;
}
.dashboard_outlet_content_right_header {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0.5rem;
}
.dashboard_outlet_content_right_header_title {
  color: #111827;
  font-family: var(--font-Manrope);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  flex: 0 0 40%;
}
.start_over_btn {
  display: flex;
    padding: 0.4rem 0.1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
    border: 1px solid #ff4f59;
    background: #ff4f59;
    color: #fff;
    font-family: Manrope;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex: 0 0 20%;
}
.dashboard_outlet_content_right_body {
}
.add_another_service {
  display: flex;
  padding: 0.2rem 0.2rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 8px;
  border: 1px dashed var(--Text-200, #e5e7eb);
  background: #fff;
  margin: 0.5rem 0;
}
.add_another_service_text {
  color: #6b7280;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.total_quantity_box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.total_quantity_box_content {
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.total_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.total_item_title {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.total_item_value {
  color: #4b5563;
  font-family: var(--font-inter);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.added_items_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.added_items_list_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
}

.added_items_list_item_title {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.added_items_list_item_title_text {
  color: var(--Text-900, #111827);
  font-family: var(--font-Manrope);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.added_items_list_item_title_price {
  color: var(--color-primary);
  font-family: var(--font-Manrope);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
    font-size: 0.85rem;
}

.added_items_list_item_filter {
  flex: 0 0 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.added_items_list_item_button{
	flex: 0 0 10%;
}
.added_items_list_item_button .remove_button {
 display: flex;
flex-direction: column;
justify-content: center;
border: 0.0rem solid ;
color: #d30000;
background: white;
font-family: var(--font-Manrope);
transition: all linear 0.3s;
padding: 0.4rem 0.6rem;
height: 2.25rem;

}
.added_items_list_item_button .remove_button:hover {
  color: #ff4f59;
}
.filter_select {
  padding: 0.2rem 0.1rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  color: var(--Text-700, #4b5563);
  font-family: var(--font-Manrope);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.filter_select_option {
  color: #4b5563;
  font-family: var(--font-Manrope);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Order Summary Styles */
.order-summary-form {
  font-family: "Inter", sans-serif;
  margin: 0 auto;
 /*  padding: 1rem; */
}

.order-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .order-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }
}

.order-summary-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #111827;
  display: block;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .order-summary-label {
    margin-bottom: 0.3rem;
  }
}

.order-summary-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
}

@media (min-width: 768px) {
  .order-summary-input {
    padding: 0.25rem 0.7rem;
    font-size: 0.9rem;
  }
}
#amountPaid .order-summary-input {
    padding: 0.25rem 0.7rem;
    font-size: 0.9rem;
            text-align: right;
  }
.order-summary-input::placeholder {
  color: #ff4f59;
}

.order-summary-input.error {
  border-color: #ef4444;
}

.order-summary-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  font-weight: 500;
}

/* Payment Method Styles */
.order-summary-payment-methods {
 /*  grid-column: 1 / -1; */
  margin-bottom: 16px;
}

.order-summary-payment-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  display: block;
}

.order-summary-payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .order-summary-payment-options {
    flex-direction: row;
  }
}

.order-summary-payment-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
}

.order-summary-payment-option:hover {
  border-color: #d1d5db;
}

.order-summary-payment-option.paymentSelected {
  border-color: #16b843;
  box-shadow: 0 0 0 1px #16b843;
}

.order-summary-payment-option.error {
  border-color: #ef4444;
}

.order-summary-radio {
  width: 16px;
  height: 16px;
  border: 1px solid #9ca3af;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .order-summary-radio {
    width: 20px;
    height: 20px;
  }
}

.order-summary-radio-dot {
  width: 10px;
  height: 10px;
  background-color: #16b843;
  border-radius: 50%;
  display: none;
}

@media (min-width: 768px) {
  .order-summary-radio-dot {
    width: 12px;
    height: 12px;
  }
}

.order-summary-payment-option.paymentSelected .order-summary-radio-dot {
  display: block;
}

.order-summary-payment-icon {
  font-size: 20px;
  color: #6b7280;
}

@media (min-width: 768px) {
  .order-summary-payment-icon {
    font-size: 27px;
  }
}

.order-summary-payment-text {
  font-size: 14px;
  color: #6b7280;
}

/* Save Card Checkbox */
.order-summary-save-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0;
}

.order-summary-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.order-summary-checkbox:checked {
  border-color: #6b7280;
  background-color: white;
}

.order-summary-checkbox:checked::after {
  content: "✓";
  color: #16b843;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
}

.order-summary-save-label {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

@media (min-width: 768px) {
  .order-summary-save-label {
    font-size: 16px;
  }
}

/* Delivery Switch */
.order-summary-delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0;
}

.order-summary-delivery-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.order-summary-switch {
  width: 33px;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.order-summary-switch.on {
  background: linear-gradient(to right, #16a34a, #4ade80);
}

.order-summary-switch-knob {
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.order-summary-switch.on .order-summary-switch-knob {
  transform: translateX(13px);
}

/* Order Total */
.order-summary-total {
  background-color: #f9fafb;
  padding: 0.5rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.order-summary-total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
}

.order-summary-total-label {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.order-summary-total-value {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.order-summary-total-shipping {
  color: #16b843;
}

/* Action Buttons */
.order-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

@media (min-width: 640px) {
  .order-summary-actions {
    flex-direction: row;
    gap: 1rem;
  }
}

.order-summary-button {
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .order-summary-button {
    padding: 0.5rem 1.5rem;
  }
}

.order-summary-cancel {
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #111827;
  order: 2;
}

@media (min-width: 640px) {
  .order-summary-cancel {
    order: 1;
  }
}

.order-summary-cancel:hover {
  background-color: #ff4f59;
  color: white;
}

.order-summary-submit {
  background-color: #16b843;
  color: white;
  border: none;
  order: 3;
}

@media (min-width: 640px) {
  .order-summary-submit {
    order: 3;
  }
}

.order-summary-submit:hover {
  background-color: #15803d;
}
.order-summary-submit-new {
  background-color: #facc15; /* yellow */
  color: #111827;           /* dark text */
  border: none;
  order: 2;               /* visually between cancel (1) and submit (2) */
}

@media (min-width: 640px) {
  .order-summary-submit-new {
    order: 2;
  }
}

.order-summary-submit-new:hover {
  background-color: #eab308; /* darker yellow */
  color: #111827;
}
/* ====================================================================
                    Dashboard New Order CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Select Box CSS Starts Here
=====================================================================*/
/* From Uiverse.io by 3bdel3ziz-T */
.select {
  width: 100%;
  height: 44px;
  cursor: pointer;
  position: relative;
  transition: 300ms;
  color: white;
}
.selected {
  background-color: #fff;
  padding: 5px;
  margin-bottom: 3px;
  border-radius: 5px;
  position: relative;
  z-index: 99;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #8e939b;
  padding: 10px 20px;

  color: #6b7280;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.arrow {
  position: relative;
  right: 0px;
  height: 10px;
  transform: rotate(-90deg);
  width: 25px;
  fill: black;
  z-index: 100000;
  transition: 300ms;
}
.options {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  padding: 5px;
  background-color: #fff;
  position: relative;
  top: -100px;
  opacity: 0;
  transition: 300ms;
  border: 1px solid #8e939b;
  padding: 10px;
}
.select:hover > .options {
  opacity: 1;
  top: 0;
}
.select:hover > .selected .arrow {
  transform: rotate(0deg);
}
.option {
  width: 100%;
  border-radius: 5px;
  padding: 5px;
  transition: 300ms;
  background-color: #fff;
  width: 150px;
  font-size: 15px;
  color: #111827;
}
.option:hover {
  background-color: #dfdede;
}
.options input[type="radio"] {
  display: none;
}
.options label {
  width: 100%;
  display: block;
}
.options label::before {
  content: attr(data-txt);
}
.options input[type="radio"]:checked + label {
  display: none;
}
.options input[type="radio"]#all:checked + label {
  display: none;
}
.select:has(.options input[type="radio"]#all:checked) .selected::before {
  content: attr(data-default);
}
.select:has(.options input[type="radio"]#option-1:checked) .selected::before {
  content: attr(data-one);
}
.select:has(.options input[type="radio"]#option-2:checked) .selected::before {
  content: attr(data-two);
}
.select:has(.options input[type="radio"]#option-3:checked) .selected::before {
  content: attr(data-three);
}
/* ====================================================================
                        Select Box CSS Ends Here
=====================================================================*/

/* ====================================================================
                      Dashboard Order CSS Starts Here
=====================================================================*/
.default_page_outlet {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1% 1% 1% 1%;
  height : 95dvh;
  overflow-y: scroll;
}
.dashboard_outlet_content_top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  background: #fff;
}
.dashboard_outlet_title {
  color: #010101;
  font-family: var(--font-inter);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.dashboard_outlet_search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.search_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.search_button {
  display: flex;
  padding: 12px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  background: #16b843;
}
.show_pickup {
  display: flex;
  min-width: max-content;
  height: 46px;
  padding: 6px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.orders-table {
  width: 100%;
  outline: 1px solid #e5e7eb !important;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
  margin-bottom: 0.9rem;
}
.orders-table-header {
  background-color: #f3f4f6;
}
.orders-table-header-row {
  color: #6b7280;
  font-size: 16px;
  font-weight: 500;
}
.orders-table-header-cell {
  padding: 1rem 0.2rem;;
  text-align: left;
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* Center align Action column headers */
.orders-table-header-cell:has(#lastColumnHeader),
.orders-table-header-cell:has(span#lastColumnHeader),
th:has(#lastColumnHeader),
th:has(span#lastColumnHeader) {
  text-align: center;
}

/* Fallback for browsers that don't support :has() */
.orders-table-header-cell #lastColumnHeader,
.orders-table-header-cell span#lastColumnHeader {
  display: block;
  text-align: center;
}
.orders-table-body-row {
  color: #6b7280;
  font-family: var(--font-inter);
  border-top: 1px solid #e5e7eb;
}
.orders-table-body-row:hover {
  background-color: #f9fafb;
}
.orders-table-body-cell {
  padding: 0.5rem;
  color: #000000;
  font-family: var(--font-inter);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Center align action buttons in table cells */
.orders-table-body-cell:has(.employee-action-btns),
td:has(.employee-action-btns) {
  text-align: center;
}

/* Fallback for browsers that don't support :has() - center action button containers */
.orders-table-body-cell .employee-action-btns,
td .employee-action-btns {
  margin: 0 auto;
}

/* Center align View buttons and other action buttons in table cells */
.orders-table-body-cell:has(.orders-view-btn),
.orders-table-body-cell:has(.transaction-view-btn),
.orders-table-body-cell:has(.invoice-view-btn),
.orders-table-body-cell:has(.invoice-order-view-btn),
td:has(.orders-view-btn),
td:has(.transaction-view-btn),
td:has(.invoice-view-btn),
td:has(.invoice-order-view-btn) {
  text-align: center;
}

/* Center align action buttons that are direct children or in action columns */
.orders-table-body-cell .orders-view-btn,
.orders-table-body-cell .transaction-view-btn,
.orders-table-body-cell .invoice-view-btn,
.orders-table-body-cell .invoice-order-view-btn,
td .orders-view-btn,
td .transaction-view-btn,
td .invoice-view-btn {
  margin: 0 auto;
  display: inline-block;
}

/* Additional centering for action-related columns (some already have text-center class) */
.orders-table-body-cell.order-view-column,
.orders-table-body-cell.view-note,
.orders-table-body-cell.invoice-order-view-btn {
  text-align: center;
}
.orders-status-select {
  width: 120px;
  padding: 8px;
  border-radius: 6px;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
}
.orders-status-select.completed {
  background-color: rgba(107, 33, 168, 0.1);
  color: #6b21a8;
}
.orders-status-select.pending {
  background-color: #fffaeb;
  color: #b54708;
}
.orders-status-select.cancelled {
  background-color: #fef3f2;
  color: #b42318;
}
.orders-status-select.default {
  background-color: rgba(30, 64, 175, 0.1);
  color: #1e40af;
}
.orders-view-btn, .storeclose-view-btn, .reenable-order-btn {
  background-color: #f3f4f6;
  width: fit-content;
  padding: 4px 16px;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 14px;
}
.orders-view-btn:hover, .storeclose-view-btn:hover, .reenable-order-btn:hover {
  background-color: #e5e7eb;
}
.orders-action-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;

 /*  margin-bottom: 4rem; */
}
.orders-cancel-btn {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  background-color: white;
  transition: all 0.3s;
}
.orders-cancel-btn:hover {
  background-color: #a73e47;
  color: white;
  border-color: #a73e47;
}
.orders-save-btn {
  color: white;
  font-size: 1rem;
  font-weight: 500;
  background-color: #16b843;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
.orders-save-btn:hover {
  background-color: #14a738;
}
.orders-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.orders-no-results {
  height: 96px;
  text-align: center;
}
.order-details-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.order-details-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
}
.customer-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  width: auto !important;
}
.customer-modal-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(90vh - 60px);
  padding: 0rem !important;
}
#orderSumurryDialog .order-details-content {
  background-color: white;
  border-radius: 8px;
  max-height: 90vh;
  overflow: hidden;
}
.order-details-content-note {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 30%;
  max-height: 80%;
  overflow: hidden;
}
.order-details-content-rack {
  background-color: white;
  border-radius: 8px;
  width: 20%;
  /* max-width: 30%; */
  max-height: 80%;
  overflow: hidden;
}
 
.customer-rewards-box {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.customer-rewards-title {
  color: #16b843;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.customer-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.customer-rewards-single {
  padding: 0.5rem 0;
}

.customer-rewards-single .customer-rewards-label {
  display: block;
  margin-bottom: 0.35rem;
}

.customer-rewards-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

.customer-rewards-label {
  display: block;
  font-size: 0.85rem;
  color: #6b7280;
}

.customer-rewards-value {
  font-weight: 600;
  color: #111827;
}

.customer-rewards-points-input {
  width: 100%;
  margin-top: 0.25rem;
  font-weight: 600;
  color: #111827;
}

.customer-rewards-ledger-list {
  max-height: 180px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.5rem;
}

.customer-rewards-ledger-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed #e5e7eb;
}

.customer-rewards-ledger-item:last-child {
  border-bottom: none;
}

.customer-rewards-subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.reward-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.reward-toggle-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.reward-tier-section {
  margin-top: 1rem;
}

/* Black text for entered values; placeholders stay gray */
.reward-tier-section .input_field,
.reward-config-grid .input_field {
  color: #000;
}

.reward-tier-table .order-items-header-cell {
  text-align: left;
}

.reward-preview-section {
  margin-top: 1rem;
}

.reward-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.reward-preview-result {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}

.reward-report-section {
  margin-top: 1rem;
}

.reward-report-box {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}


.reward-summary-cards,
.reward-liability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.reward-metric-card {
  background: #fff;
  border-radius: 8px;
  padding: 0.85rem;
  border-left: 4px solid #28a745;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
}

.reward-metric-label {
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.reward-metric-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
}

.reward-report-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.reward-bar-chart {
  margin-top: 0.75rem;
  background: #fff;
  border-radius: 8px;
  padding: 0.85rem;
  border: 1px solid #e5e7eb;
  display: grid;
  gap: 0.75rem;
}

.reward-bar {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 0.5rem;
}

.reward-bar-label {
  font-size: 0.82rem;
  color: #374151;
  font-weight: 600;
}

.reward-bar-track {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.reward-bar-fill {
  height: 100%;
  background: #28a745;
  width: 0%;
}

.reward-bar-value {
  text-align: right;
  font-weight: 600;
  color: #111827;
}

.reward-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.reward-modal-content {
  background: #fff;
  border-radius: 10px;
  width: min(1100px, 92%);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.reward-modal-header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reward-modal-body {
  padding: 1rem;
  overflow: auto;
}

.reward-customer-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.reward-subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.order-summary-rewards {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  background: #f0fdf4;
}

.reward-section-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #065f46;
  background: #d1fae5;
  margin: -0.75rem -0.75rem 0.75rem -0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px 8px 0 0;
}

.order-summary-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1rem;
  margin-bottom: 0.75rem;
}

.order-summary-reward-label {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 1px;
}

.order-summary-reward-value {
  font-weight: 600;
  font-size: 0.95rem;
  color: #111827;
}

.reward-dollar-highlight {
  color: #059669;
}

.reward-redeem-row {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid #d1fae5;
}

.reward-redeem-row .reward-redeem-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reward-redeem-row .reward-redeem-input-wrap .input_field {
  flex: 1;
  min-width: 0;
}

.reward-apply-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.15s;
}

.reward-apply-btn:hover {
  background: #059669;
}

.reward-apply-btn:active {
  transform: scale(0.95);
}

.order-summary-reward-applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: #ecfdf5;
  border-radius: 4px;
  border: 1px dashed #a7f3d0;
}

/* Dark-green scrollbar for reward sections */
.order-summary-rewards::-webkit-scrollbar {
  width: 6px;
}
.order-summary-rewards::-webkit-scrollbar-track {
  background: #ecfdf5;
  border-radius: 3px;
}
.order-summary-rewards::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 3px;
}
.order-summary-rewards::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* Small popup class for compact modals */
.small-popup {
  background-color: white;
  border-radius: 8px;
  width: auto;
  max-width: 500px;
  min-width: 300px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Wider popup for bulk update with more fields */
.small-popup.bulk-update-popup {
  max-width: 700px;
  min-width: 500px;
}
/* Rack Queue Popup - wider to accommodate queue preview */
.order-details-content.rack-queue-popup,
.rack-queue-popup {
  background-color: white;
  border-radius: 8px;
  width: auto !important;
  max-width: 700px !important;
  min-width: 500px !important;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Rack Queue Section */
.rack-queue-section {
  margin-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}
.rack-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.rack-queue-title {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
  font-family: var(--font-inter, 'Inter', sans-serif);
}
.rack-clear-all-btn {
  padding: 0.375rem 0.75rem;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-inter, 'Inter', sans-serif);
}
.rack-clear-all-btn:hover {
  background-color: #dc2626;
}
.rack-clear-all-btn:active {
  background-color: #b91c1c;
}
/* Rack Queue Preview Container */
.rack-queue-preview {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: #f9fafb;
  padding: 0.5rem;
}
.rack-queue-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}
.rack-queue-empty p {
  margin: 0.25rem 0;
}
.rack-queue-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.5rem !important;
}
/* Rack Queue Item Row */
.rack-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.5rem;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  animation: rackItemFadeIn 0.2s ease;
}
.rack-queue-item:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.rack-queue-item:last-child {
  margin-bottom: 0;
}
@keyframes rackItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.rack-queue-item-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.rack-queue-item-order {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  min-width: 80px;
  font-family: var(--font-inter, 'Inter', sans-serif);
}
.rack-queue-order-input {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  min-width: 80px;
  max-width: 100px;
  font-family: var(--font-inter, 'Inter', sans-serif);
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.rack-queue-order-input:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}
.rack-queue-order-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: white;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.rack-queue-item-separator {
  color: #9ca3af;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.rack-queue-item-rack {
  color: #059669;
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--font-inter, 'Inter', sans-serif);
}
.rack-queue-rack-input {
  color: #059669;
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--font-inter, 'Inter', sans-serif);
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  border-radius: 4px;
  flex: 1;
  min-width: 0;
  transition: all 0.2s ease;
}
.rack-queue-rack-input:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}
.rack-queue-rack-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: white;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.rack-queue-item-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rack-queue-item-remove:hover {
  background-color: #fee2e2;
}
.rack-queue-item-remove:active {
  background-color: #fecaca;
}
.rack-queue-item-remove svg {
  width: 16px;
  height: 16px;
}
/* Scrollbar styling for rack queue preview */
.rack-queue-preview::-webkit-scrollbar {
  width: 8px;
}
.rack-queue-preview::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.rack-queue-preview::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.rack-queue-preview::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* Horizontal field layout with separator */
.bulk-update-field-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.bulk-update-field-row .input_group {
  flex: 1;
}
.bulk-update-separator {
  color: #6b7280;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 0 0.5rem;
}
.bulk-update-separator.or {
  font-size: 1rem;
  font-weight: 600;
}
.bulk-update-separator.arrow {
  font-size: 1.2rem;
  font-weight: bold;
}
/* Status row with arrow */
.bulk-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.bulk-status-row .input_group {
  flex: 1;
}
.bulk-status-arrow {
  margin: 0 5px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #6b7280;
  white-space: nowrap;
  align-self: flex-end; /* Align with bottom of select dropdowns */
  margin-bottom: 1rem; /* Fine-tune vertical alignment */
}
/* Black border for Bulk Status Update dropdowns */
.bulk-update-status-dropdown {
  border: 1px solid #000 !important;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .bulk-update-field-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .bulk-update-separator {
    display: none;
  }
  .bulk-status-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .bulk-status-arrow {
    padding-top: 0;
    transform: rotate(90deg);
  }
}
.order-details-scroll {
  max-height: 80%;
  overflow-y: auto;
  padding: 1rem;
  position: relative;
}
.order-details-header {
 /* margin-bottom: 20px; */
   display: flex; 
  align-items: start;
      text-align: center;
  justify-content: space-between;
}
.order-details-title {
  color: #16b843;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.order-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.order-info-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.order-info-card {
  background-color: #f9fafb;
  padding: 13px;
  border-radius: 6px;
/*   display: flex;
  flex-direction: column;
  justify-content: space-between; */
  position: relative;
}
.order-info-label {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.order-info-value {
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  height: 37px;
}
.order-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9999px;
  width: fit-content;
}
.order-status-pending {
  color: #92400e;
  background-color: #fef3c7;
}
.order-status-completed {
  color: #065f46;
  background-color: #d1fae5;
}
.order-status-cancelled {
  color: #991b1b;
  background-color: #fee2e2;
}
.order-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}
.order-items-header {
  background-color: #f9fafb;
}
.order-items-header-cell {
  padding: 12px;
  text-align: left;
  font-weight: 500;
}
.order-items-row {
  border-bottom: 1px solid #e5e7eb;
}
.order-items-cell {
  padding: 12px;
  vertical-align: middle;
}
.order-item-product {
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-item-icon {
  background-color: #dcfce7;
  padding: 8px;
  border-radius: 4px;
}
.order-item-name {
  font-size: 14px;
}
.order-item-price {
  color: #16b843;
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
}
.order-item-description {
  text-align: center;
  font-size: 14px;
}
.order-item-color-label {
  color: #6b7280;
}
.order-item-color-value {
  color: #111827;
  font-weight: 500;
  margin-top: 4px;
}
@media (min-width: 768px) {
  .order-item-color-value {
    margin-top: 12px;
  }
}
.order-summary {
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 6px;
      margin-bottom: 24px;
}
.order-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: #111827;
  font-weight: 500;
}
.order-summary-value {
  color: #111827;
  font-weight: 600;
}
.order-summary-shipping-free {
  color: #16b843;
  font-weight: 600;
}
.order-summary-total {
  font-weight: 700;
  font-size: 14px;
}
.order-details-close, .invoice-details-close, .pay-now-btn, .pay-now-details-close {
  cursor: pointer;
}
.order-info-checkbox {
  display: none;
}
.order-info-checkbox:checked + .order-info-card {
  .order-info-checkmark {
    .order-info-check-path {
      display: block;
    }
  }
}
.order-info-checkmark {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.order-info-check-path {
  display: none;
}
.order-info-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: var(--font-Manrope);
    font-size: 16px;
    font-weight: 500;
    color: #4b5563;
    background: white;
    border: 1px solid #e5e7eb;
    transition: all linear 0.3s;

    &.add {
      background: #16b843;
      color: #fff;
    }
    &.add:hover {
      background: #61f18a;
      color: #fff;
    }
    &.cancle:hover {
      background: rgb(248, 97, 97);
      color: #fff;
    }
  
}

#orderInfo, #invoiceInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
/* ====================================================================
                      Dashboard Order CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Dashboard Customer CSS Starts Here
=====================================================================*/
.add_customer_btn {
  display: flex;
  min-width: max-content;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #16b843;
  color: #fff;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 0;
}

.add_customer_btn:hover {
  background: #14a738;
}
.add_customer_btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #16b843;
}
.add_customer_btn:disabled:hover {
  background: #16b843;
}
.dashboard_customer_outlet {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.order-details-thankyou-image {
  width: 100%;
  display: flex;
  justify-content: center;
}
.order-details-thankyou-image img {
  width: 100%;
  max-width: 70%;
}
.order-details-thankyou-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 0;
}
.order-details-thankyou-description {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}
.order-details-thankyou-title {
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.order-details-thankyou-description {
  color: var(--Text-600, #6b7280);
  text-align: center;
  font-family: var(--font-inter);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
.order-details-thankyou-close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.customer_location_fields {
    display: flex;
    gap: 10px;
}

.customer_location_fields .input_group {
    flex: 0.5; 
}

/* ====================================================================
                        Dashboard Customer CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Employee CSS Starts Here
=====================================================================*/
.employee-action-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
}
.employee-view-btn {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.pegination-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
/*   margin-bottom: 2.5rem; */
}
.pegination-btn {
  display: flex;
  padding: 0.5rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  color: var(--Text-700, #4b5563);
  font-family: var(--font-Manrope);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background: white;
  transition: all linear 0.3s;
}
.pegination-btn:hover {
  background: #f1f1f1;
  color: #000;
}
.pegination-info {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Page number input integrated into "Page X of Y" */
.pegination-info-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
}

.page-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--Text-200, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  background: white;
}

.page-input-wrapper:focus-within {
  border-color: #16B843;
  box-shadow: 0 0 0 2px rgba(22, 184, 67, 0.15);
}

.page-number-input {
  width: 40px;
  padding: 0.35rem 0.4rem;
  border: none;
  font-size: 0.9rem;
  text-align: center;
  font-family: var(--font-inter);
  color: var(--Text-700, #4b5563);
  background: transparent;
}

.page-number-input:focus {
  outline: none;
}

.page-number-input::-webkit-outer-spin-button,
.page-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-number-input[type=number] {
  -moz-appearance: textfield;
}

.page-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.5rem;
  background: #16B843;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.page-search-btn:hover {
  background: #12a03a;
}

.page-search-btn i {
  font-size: 12px;
}

.store_select select {
  width: 100%;
  display: flex;
  padding: 14px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);

  option {
    color: var(--Text-600, #6b7280);
    font-family: var(--font-inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
/* ====================================================================
                    Dashboard Employee CSS Ends Here
=====================================================================*/

/* ====================================================================
                  Dashboard Transaction CSS Starts Here
=====================================================================*/
.dashboard_outlet_search_item {
  width: 100%;
  position: relative;
}
.transaction_top_input_field {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  padding: 0.45rem 1rem;
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background-color: #fff;
}
.transaction_top_input_field::placeholder {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 0.9rem;
  font-weight: 400;
}
.transaction_top_search_btn {
  display: flex;
  min-width: 150px;
  width: 100%;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #16b843;
  color: #fff;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
.transaction_top_search_btn:hover {
  background: #14a738;
}

/* Sales Report Page - Prevent Horizontal Overflow */
.sales-report-outlet {
  overflow-x: hidden;
}

/* Sales Report Filter Row - Equal Width Items */
.sales-report-outlet .transaction_search .dashboard_outlet_search_item,
.sales-report-outlet .transaction_search .dashboard_outlet_search_item:last-child {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}

.sales-report-outlet .transaction_search .dashboard_outlet_search_item select,
.sales-report-outlet .transaction_search .dashboard_outlet_search_item input,
.sales-report-outlet .transaction_search .dashboard_outlet_search_item button {
  width: 100%;
}

/* ====================================================================
                  Dashboard Transaction CSS Ends Here
=====================================================================*/

/* ====================================================================
                Dashboard Sales and Report CSS Starts Here
=====================================================================*/
.transaction_top_input_search_icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  cursor: pointer;
}
.transaction_top_input_field {
  padding-right: 40px;
}
.transaction_top_input_search_icon svg {
  width: 20px;
  height: 20px;
}
.dashboard_sales_report_cards {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  margin: 50px 0;
}
.dashboard_sales_report_card {
  width: 100%;
  display: flex;
  padding: 50px 30px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
}
.dashboard_sales_report_card_amount {
  color: var(--color-primary);
  font-family: var(--font-inter);
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.dashboard_sales_report_card_title {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* ====================================================================
                Dashboard Sales and Report CSS Ends Here
=====================================================================*/

/* ====================================================================
                Dashboard Cleaning Type CSS Starts Here
=====================================================================*/

/* ====================================================================
                Dashboard Cleaning Type CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Employee CSS Starts Here
=====================================================================*/

.remove-employee-content {
	max-width: 500px;
    width: 90%;
}
.remove-employee-content .order-details-scroll {
  padding: 1.5rem;
}

.checkbox-filter{
	color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
	font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.search-icon {
  width: 20px;
  height: 20px;
  color: white; 
}

.dashboard_outlet_search {
  display: flex;
  gap: 1rem; /* spacing between search box and add button */
  align-items: stretch; /* all children will have the same height */
  flex-wrap: wrap; /* wraps on smaller screens */
}

.search_box {
  display: flex;
  flex: 1; /* takes available width */
}

/* .input_field {
  flex: 1;
  padding: 0.5em;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
} */

.search_button,
.add_customer_btn {
  padding: 0.4rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Make sure search button has rounded edge on the right */
.search_button {
  border-radius: 8px;
}

/* Optional: make both buttons same height */
.search_button,
.add_customer_btn {
  height: 100%;
}

/* ====================================================================
                    Dashboard Employee CSS Ends Here
=====================================================================*/
.search_dropdown_box {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  z-index: 99;
  max-height: 110px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  font-size: 14px;
}

.search_dropdown_box div {
  padding: 8px 12px;
  cursor: pointer;
}

.search_dropdown_box div:hover {
  background-color: #f5f5f5;
}



.multi_select_dropdown {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  background-color: #fff;
  font-size: 14px;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
}

.multi_select_label {
  font-weight: bold;
  margin-bottom: 5px;
}

.multi_select_options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.multi_select_option {
  display: flex;
  align-items: center;
  gap: 8px;
}
#additionalChargesDropdown {
  cursor: pointer;
    font-size: 0.8rem;
}


.view-note-btn {
    cursor: pointer;
}

.form-cancel-btn {
	background-color: rgb(253, 100, 100)
}

.form-cancel-btn:hover {
	background-color: #a73e47 !important;
}

.auth_button:not(.form-cancel-btn):not(.form-confirm-btn):hover,
button.auth_button[type="submit"]:hover,
#orderSummarySubmit:hover,
#invoiceAmountSubmit:hover,
#submitWeightBtn:hover,
button[type="submit"].auth_button:hover {
	background-color: #14a738 !important;
}
.update_amount_fields {
    display: flex;
    align-items: center; /* Align items vertically centered */
    gap: 1rem;
    width: 100%;
}

.update_amount_group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    flex: 1;
}

.update_amount_group input {
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    width: 100%;
    border-radius: 0.5rem;
    color: #111827;
    font-family: var(--font-inter);
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    text-align: right;
}

.update_amount_group label {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 0.25rem;
}

.operator_group {
    display: flex;
    align-items: center; /* Center the operator */
    justify-content: center;
}

.operator {
    font-size: 2rem; /* Adjust the size of the operator */
    color: #4b5563;
    padding: 0 10px;
}


.orders-status-select {
	min-width: 200px;
}

.ordersearch_input_field {
	border: 1px solid #e5e7eb;
    padding: 0.45rem 1.5rem;
    width: 100%;
    border-radius: 0.5rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}


.show_pickup {
    background: #fff;
    color: #16b843; /* Text color */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Changes cursor to pointer to indicate clickability */
    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition for hover */
}

/* Hover effect: background turns green */
.show_pickup:hover {
    background: #16b843; /* Green background */
    color: #fff; /* White text color on hover */
    border-color: #16b843; /* Optional: Change border color to green */
}

.view-note, .item-label-print{
	text-align: center
}

.view-note:hover, .item-label-print:hover{
	color: #28A745;
	cursor: pointer;
}

.transaction_search {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  flex-wrap: nowrap;
}
.transaction_search .dashboard_outlet_search_item {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 280px;
}
.transaction_search .dashboard_outlet_search_item:last-child {
  flex: 0 0 auto;
  min-width: 150px;
  max-width: none;
}
@media (max-width: 768px) {
  .transaction_search {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .transaction_search .dashboard_outlet_search_item {
    width: 100%;
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.transaction-info-value {
    color: var(--Text-700, #4b5563);
    font-family: var(--font-inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    height: 17px;
}

.invoice-details-content{
	    max-width: 1000px;
}

#invoice-orders-table .order-items-header-cell{
	text-align: center;
}

.invoice-order-cell{
	text-align: center;
}
#invoiceSummaryPayNowModal .order-summary-row{
	font-size: 14px;
}

select:disabled {
  background-color: rgba(239, 239, 239, 0.3) !important;
}

.input_wrapper {
  position: relative;
  width: 100%;
}

.ordersearch_input_field {
  padding-right: 3rem; /* make room for the icon inside */
  box-sizing: border-box;
}

.search_button_inside {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  height: 24px;
  width: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_button_inside .search-icon {
  color: #16b843; /* or your brand color */
  width: 20px;
  height: 20px;
}


#mainContent.disabled-overlay * {
  pointer-events: none;
}

#mainScreenContent {
}
#sidebarMain{
	position: relative;
    z-index: 10;
}

.quantity_group {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: 1;
  max-width: 50%;
  justify-content: left;
}
#employee-table .orders-table-body-cell{
	    padding: 0.3rem;
    color: #000000;
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#servicetypes-table .orders-table-body-cell{
	padding: 0.3rem 0.5rem;
    color: #000000;
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    min-height: 36px;
    vertical-align: middle;
}

#servicetypes-table .orders-table-body-row {
    min-height: 44px;
}

#servicetypes-table .orders-table-body-row td {
    height: 44px;
    vertical-align: middle;
}

#items-table .orders-table-body-cell,
#employee-table .orders-table-body-cell,
#manage-business-table .orders-table-body-cell,
#business-employee-table .orders-table-body-cell,
#business-transactions-table .orders-table-body-cell,
#fixed-charges-table .orders-table-body-cell,
#customer-table .orders-table-body-cell {
	padding: 0.5rem;
	color: #000000;
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	vertical-align: middle;
}

#items-table .orders-table-body-row td,
#employee-table .orders-table-body-row td,
#manage-business-table .orders-table-body-row td,
#business-employee-table .orders-table-body-row td,
#business-transactions-table .orders-table-body-row td,
#fixed-charges-table .orders-table-body-row td,
#customer-table .orders-table-body-row td {
	height: 48px;
	vertical-align: middle;
}

/* Global Action Buttons - Match Manage Products Page Style */
.action-btn-edit,
.action-btn-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	color: #6b7280;
	cursor: pointer;
}

.action-btn-edit:hover {
	background: #f0fdf4;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.action-btn-delete:hover {
	background: #fef2f2;
	border-color: var(--color-redBg);
	color: var(--color-redBg);
}

/* Items Table Action Buttons */
#items-table .employee-action-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

#additional-charges-table .orders-table-body-cell {
	padding: 0.5rem;
	color: #000000;
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	vertical-align: middle;
}

#additional-charges-table .orders-table-body-row td {
	height: 48px;
	vertical-align: middle;
}

/* Additional Charges Table Action Buttons */
#additional-charges-table .employee-action-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

#fixed-charges-table .orders-table-body-cell{
	    padding: 0.3rem;
    color: #000000;
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.amount-paid{
	align-items: center;
    gap: 65%;
    display: flex;
    justify-content: space-between;
}

#orderNotes::placeholder {
  color: gray;
}

.modal-open #mainScreenContent {
  filter: blur(1px);
  /* pointer-events: none;
  position: relative; */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(215 215 215 / 20%);
  z-index: 1;
  pointer-events: none;
}

.modal-open #mainScreenContent::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  
  background: rgba(255, 255, 255, 0.4); /* semi-transparent white overlay */
  z-index: 1;
  pointer-events: none;
}


#pageheader,
#sideMenu {
  position: relative;
  z-index: 1061;
}

#bodyModals .modal {
  z-index: 1062 !important;
}
#bodyModals .modal-backdrop {
  z-index: 1060 !important;
}

.modal-backdrop.show {
	opacity: 0.4 !important; /* slightly stronger backdrop */
}

.modal-login-active .modal:not(#loginModal) {
	filter: grayscale(100%) opacity(0.3);
	pointer-events: none;
}
/* #pageLoader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
 */
#pageLoader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
    background-color: rgb(215 215 215 / 20%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.loading-text {
	margin-top: 14px;
	font-size: 16px;
	color: #0077b6;
	font-family: sans-serif;
}

.chart-container { width: 80%; margin: 30px auto; }

/* canvas {
  max-width: 100%;
  height: auto;
} */

.chart-small {
    /* width: 900px !important; */
    height: 900px !important;
}

.circular-progress-text-value {
  font-size: 18px;
  fill: #333;
  font-weight: bold;
}

.circular-progress-text-subtext {
  font-size: 14px;
  fill: #666;
}

.chart-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.chart-row-single {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.chart-box {
  width: 45%;
  min-width: 300px;
  height: 400px;            
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-box canvas {
  width: 100% !important;   
  height: 100% !important;    
  display: block;
}
 
 .table-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.table-column {
  flex: 1;
  min-width: 45%;
}

.single-table {
  width: 100%;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.styled-table th,
.styled-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;
}

.styled-table td {
  color: #000000;
}

.styled-table th {
  background-color: #f2f2f2;
}
 
#message-container {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 450px;
    text-align: center;
    pointer-events: none; /* Allow clicks through if needed */
}

.alert {
    padding: 16px 20px;
    margin: 10px auto;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    display: none;
    pointer-events: auto; /* Allow close button to be clickable */
}

.success-alert {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    opacity: 0.8
}

.error-alert {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    opacity: 0.8
}

.close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
}

#message-container-2 {
    position: fixed;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 400px;
    text-align: center;
    pointer-events: none; /* Allow clicks through if needed */
}

.message-text {
  white-space: pre-line;
}

.orders-status.completed {
    background-color: rgba(107, 33, 168, 0.1);
    color: #6b21a8;
}
.orders-status {
    min-width: 200px;
    width: 120px;
    padding: 8px;
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
}

.order-pair {
    display: flex;
    /* align-items: center; */
    gap: 8px;
    /* margin-bottom: 6px; */
}

.order-info-label,
.order-info-value {
    white-space: nowrap;
}

#orderStatus{
	margin-bottom: 1rem;
}

.order-action-btn {
    display: block;
    width: 100%;
    padding: 6px 6px;
    margin-bottom: 8px;
    background-color: #10b981; /* Tailwind's green-500 */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-inter, 'Inter', sans-serif);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.order-action-btn:hover {
    background-color: #059669; /* Darker green on hover */
    transform: translateY(-1px);
}

.order-action-btn:active {
    background-color: #047857;
    transform: scale(0.98);
}

.chart-row-3 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.chart-box-3 {
  flex: 1 1 30%;
  min-width: 300px;
  max-width: 33%;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.text-center{
	text-align: center;
}
.header-active{
	color: var(--color-primary) !important;
}

.rack-cell {
	cursor: pointer;
	position: relative;
}

.order-details-content-transactions {
  background-color: white;
  border-radius: 8px;
  width: 50%;
  /* max-width: 30%; */
  max-height: 80%;
  overflow: hidden;
}

.amount-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    text-align: right;
    pointer-events: none; /* disables click/focus unless editable */
}

.amount-input.editable {
    pointer-events: auto;
    background: white;
    border: 1px solid #ccc;
}

.paid-amount {
	cursor: pointer;
	position: relative;
}

.order-view-column, .storeclose-view-column, .reenable-order-column {
	display: flex;
	justify-content: center;
}

.status-option.received {
  background-color: rgba(0, 123, 255, 0.1);
  color: #007bff;
}

.status-option.inprogress {
  background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.status-option.cleaning-done {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.status-option.ready-to-pickup {
  background-color: rgba(23, 162, 184, 0.1);
  color: #17a2b8;
}

.status-option.completed {
background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.orders-status-select.received {
  background-color: rgba(0, 123, 255, 0.1);
  color: #007bff;
}

.orders-status-select.inprogress {
  background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.orders-status-select.cleaning-done {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.orders-status-select.ready-to-pickup {
  background-color: rgba(23, 162, 184, 0.1);
  color: #17a2b8;
}

.orders-status-select.completed {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.status-option.paid {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.status-option.pending {
   background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.invoice-status.pending {
  background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.invoice-status.paid {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}


/* ====================================================================
                        Dashboard Dropdown CSS Starts Here
=====================================================================*/

:root{
  --ctrl-w: 8rem;
  --ctrl-h: 2rem;
  --ctrl-pad-x: .5rem;
  --ctrl-radius: 8px;
  --ctrl-fs: .8rem;
  --ctrl-border: 1px solid var(--Text-200, #e5e7eb);
  --ctrl-color: var(--Text-700, #4b5563);

  --menu-w: 10rem;
  --menu-max: 32rem;

  --caret-w: 12px;
  --caret-h: 8px;
  --caret-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* native select (Color) */
.filter_select{
  width: var(--ctrl-w);
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  padding-right: 1.6rem;
  border-radius: var(--ctrl-radius);
  border: var(--ctrl-border);
  color: var(--ctrl-color);
  font: 400 var(--ctrl-fs)/normal var(--font-Manrope, inherit);
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: var(--caret-svg);
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: var(--caret-w) var(--caret-h);
}
.filter_select::-ms-expand{ display:none; }

/* custom selects (Pattern/Print) */
.img-select-wrap{
  position: relative;
  display: inline-block;
  width: var(--ctrl-w);
}
.img-select-wrap select{ display:none; }

.img-select-wrap .img-btn{
  position: relative;
  width: 100%;
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  padding-right: 1.6rem;
  border-radius: var(--ctrl-radius);
  border: var(--ctrl-border);
  color: var(--ctrl-color);
  font: 400 var(--ctrl-fs)/normal var(--font-Manrope, inherit);
  background: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  opacity: 1;
  filter: none;
}
.img-select-wrap .img-btn::after{
  content:"";
  position: absolute;
  right: .55rem; top: 50%;
  width: var(--caret-w); height: var(--caret-h);
  transform: translateY(-50%);
  background-image: var(--caret-svg);
  background-repeat: no-repeat;
  background-size: var(--caret-w) var(--caret-h);
  pointer-events: none;
}
/* neutralize any legacy carets */
.img-select-wrap .img-btn > i,
.img-select-wrap .img-btn .caret,
.img-select-wrap .img-btn::before{ display:none !important; }

/* dropdown menu */
.img-menu{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 1000;
  display: none;
  max-height: 260px;
  overflow: auto;
  width: 100%;
}
.img-menu.open{ display:block; }

/* wider menu for Pattern/Print only */
.pattern_select + .img-btn + .img-menu,
.print_select  + .img-btn + .img-menu{
  right: auto;
  width: auto;
  min-width: var(--menu-w);
  max-width: min(90vw, var(--menu-max));
  white-space: normal;
}

/* option rows */
.img-opt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}
.img-opt:hover{ background:#f5f5f5; }

.img-swatch{
  width: 48px; height: 28px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-size: cover;
  background-position: center;
  flex: 0 0 48px;
}
.img-name{
  font-size: 14px;
  color: #222;
}

/* keep each filter cell aligned */
.added_items_list_item_filter_item{
  flex: 0 0 var(--ctrl-w);
}

.order_item_edit_outlet {
  width: 100%;
  /* height: 100%; */
  overflow-y: auto;
  text-align: justify;
}


/* ====================================================================
                        Dashboard Dropdown CSS Ends Here
=====================================================================*/

.order-item-edit-dialog {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 92%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.order-item-edit-content {
  background-color: white;
  border-radius: 8px;
/*   width: 95%; */
width: 97%;
  height: 100%;
  max-width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.order-item-edit-scroll {
  max-height: 99%;
  overflow: hidden;
  padding: 0.3rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

.order-item-edit-scroll #mainScreenContent {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Fix for edit order popup - ensure product cards are fully accessible */
.order-item-edit-dialog .dashboard_outlet_content_left {
  height: auto;
  max-height: calc(85vh - 20px);
  overflow-y: auto;
  padding-bottom: 0.25rem;
}

.order-item-edit-dialog .dashboard_outlet_content_cards {
  padding-bottom: 0.25rem;
}

/* Right side order summary in edit dialog */
.order-item-edit-dialog .dashboard_outlet_content_right {
  height: auto;
  max-height: calc(85vh - 20px);
  overflow-y: auto;
  padding-bottom: 0.25rem;
}

.order_edit_product_details {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}


/* keep each filter cell aligned */
.order_edit_added_items_list_item_filter_item {
}

.order_edit_img-select-wrap{
  position: relative;
  display: inline-block;
}

.order_edit_filter_select{
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  padding-right: 1.6rem;
  border-radius: var(--ctrl-radius);
  border: var(--ctrl-border);
  color: var(--ctrl-color);
  font: 400 var(--ctrl-fs)/normal var(--font-Manrope, inherit);
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: var(--caret-svg);
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: var(--caret-w) var(--caret-h);
}



.order_edit_img-select-wrap .order_edit_img-btn{
  position: relative;
  width: 100%;
  max-width: 5rem;
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  padding-right: 1.6rem;
  border-radius: var(--ctrl-radius);
  border: var(--ctrl-border);
  color: var(--ctrl-color);
  font: 400 var(--ctrl-fs)/normal var(--font-Manrope, inherit);
  background: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  opacity: 1;
  filter: none;
}

.order_edit_img-btn {
}

.order-edit-container .added_items_list_item_title {
  flex: 0 0 20%;
}


.order-edit-container.added_items_list {
}

.auth_button_outline:disabled, .total_quantity_order_button:disabled {
    background-color: #d3d3d3;  /* light gray */
    color: #888;               /* dim text */
    cursor: not-allowed;       /* show disabled cursor */
    opacity: 0.6;              /* slightly transparent */
}



.previous_incomplete_order_header {
  color: #111827;
  font-family: var(--font-Manrope);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
      flex: 0 0 45%;
      display: flex;
      justify-content: center;
}

#orderStores.invalid, #serviceTypes.invalid, #transactionStores.invalid, #businesses.invalid, #safeDropStores.invalid, #storeCloseStores.invalid {
	border-color: red; /* Light red */
}

.add-row-btn, .remove-row-btn, .drawer-add-row-btn, .drawer-remove-row-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;          /* makes it circular */
  border: none;                /* remove default border */
  background-color: #4CAF50;   /* green for add */
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.remove-row-btn, .drawer-remove-row-btn {
  background-color: #f44336;   /* red for remove */
}

.add-row-btn:hover, .drawer-add-row-btn:hover {
  background-color: #45a049;
}

.remove-row-btn:hover, .drawer-remove-row-btn:hover {
  background-color: #d32f2f;
}

.validation-error {
  border: 1px solid red !important;
}

.search-option.highlighted, .search-business-employee-option.highlighted {
    background-color: #f0f0f0;
}

.rack_orders_btn {
  display: flex;
  min-width: max-content;
  padding: 0.4rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #16b843;
  color: #fff;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 0;
}

.bulk-orders-rack-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.promotion-content{
	max-width: 1200px;
}

.required-star {
    color: red;
    font-weight: bold;
    margin-left: 2px;
}

.add_card, .add_item_card {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 2px dashed #ccc;
    border-radius: 8px;
    min-height: 120px;
    background: #f9f9f9;
}

.add_card_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
}

.add_icon {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
}

.add_text {
    font-size: 14px;
    color: #444;
}
.placeholder-center::placeholder {
    text-align: center;
}
/* Backdrop only under the header */
.custom-modal {
    display: none;
    position: fixed;
    top: 8%;                   /* start below header */
    left: 0;
    width: 100%;
    height: 92%;               /* cover rest of the page */
    background-color: rgba(0,0,0,0.3);
    z-index: 1050;

    align-items: center;       /* center inside this 92% block */
    justify-content: center;
}

/* Trick: shift modal up by half header height so it looks screen-centered */
.custom-modal-content {	
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);

    /* pull modal upward by 4% (half of the header’s 8%) */
    transform: translateY(-4%);
}

.separator {
  border-right: 1px solid #ccc;
  padding: 0;
}

.orders-table-header-cell.centered {
  text-align: center;
  vertical-align: middle; /* keeps text aligned vertically */
}
.orders-table-header-cell.with-left-space {
  padding-left: 20px;  /* adjust value as you like */
}


.rush-toggle-wrapper, .rush-toggle-edit-wrapper {
    display: flex;
    align-items: center;
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #ffffff;
	border-top: 1px solid #e0e0e0;
	padding: 0.8rem 1rem;
	text-align: center;
	font-family: 'Inter', 'Manrope', sans-serif;
	font-size: 0.9rem;
	color: #555;
	z-index: 100;
}

.footer p {
	margin: 0;
	line-height: 1.4;
}

.footer_link {
	color: #16b843;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.footer_link:hover {
	color: #129d38;
	text-decoration: underline;
}

/* optional subtle hover effect for the whole footer */
.footer:hover {
	background: #f9f9f9;
}

#custBusinessNoteHeader{
	color: var(--Text-900, #111827);
    font-family: var(--font-Manrope);
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0.3rem;
}

#customerBusinessNotes{
	font-family: var(--font-Manrope);
}

.order-note-button{
	margin-left: 1rem;
    margin-right: 1rem;
}
  
.order-details-content-note {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
}

.note-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-details-title {
  color: #16b843;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.order-details-close svg {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.note-div textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.95rem;
  resize: none;
 /*  background-color: #f9f9f9; */
}

.note-div textarea:disabled {
  color: #555;
  background-color: #f4f4f4;
}

.order-note-button {
  background-color: #16b843;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  display: block;
  margin: 12px 0 18px auto; /* Right-aligned spacing */
}

.order-note-button:hover {
  background-color: #219653;
}

#customerNoteSection {
  border-top: 1px solid #e5e5e5;
  padding-top: 15px;
  margin-top: 10px;
}

.note-details-scroll {
    max-height: 80%;
    overflow-y: auto;
    position: relative;
}

.complete-order-btn {
  background-color: #16b843;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.complete-order-btn:hover {
  background-color: #219653;
}

.complete-order-btn:disabled {
  background-color: #b5b5b5;
  cursor: not-allowed;
}


.order-warning-text {
  color: #b3261e;
  background-color: #fdecea;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 15px;
}

.pending-highlight .order-summary-total-value {
  color: #e53935;
  font-weight: 700;
}

#pendingPaymentDialog .order-summary-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

#pendingPaymentDialog .order-summary-button {
  padding: 8px 18px;
  border-radius: 6px;
}

#savePaymentBtn {
  background-color: #16b843;
  color: #fff;
  border: none;
}

#savePaymentBtn:hover {
  background-color: #219653;
}

.disabled-btn {
  opacity: 0.6;
  pointer-events: none; /* makes it unclickable */
  cursor: not-allowed;
}

/* === Smooth Inputs === */
.input_field:focus {
  border-color: #60a5fa;
  outline: none;
  box-shadow: 0 0 0 2px rgba(96,165,250,0.3);
  transition: 0.2s;
}

.dropdown_content {
  display: none;
}
.dropdown_content.show {
  display: block;
}
.divider_line {
  border: none;
  border-top: 1px solid #00701f;
  margin: 0.1rem;
  width: 100%;
}
.chat-icon-wrapper {
	padding: 0rem 1rem;
}

.order-chat-btn {
	background: none;
	border: none;
}

.chat-toggle-icon {
	box-shadow: none;
}

.chat-toggle-icon:hover {
	transform: scale(1.08);
}

.chat-toggle-icon {
	pointer-events: auto;
	cursor: pointer;
	width: 2rem;}
.chat-load-more {
    text-align: center;
    padding: 8px;
    cursor: pointer;
    background: #eee;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
}
.hidden { display: none; }
.chat-box {
    position: absolute;
    right: 2rem;
    top: 9rem;
    width: 35rem;
    height: 35rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
   /*  z-index: 9999; */
}

.hidden { display: none !important; }

.chat-header {
    background: #f7f7f7;
    padding: 10px 14px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.chat-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.chat-messages {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    background: #fafafa;
    height: 350px;
}

.chat-msg {
    max-width: 75%;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.3;
}

.mine {
    background: #d1f5d3;
    align-self: flex-end;
}

.theirs {
    background: #ffffff;
    border: 1px solid #ddd;
}

.chat-media-thumb {
    width: 140px;
    border-radius: 10px;
    cursor: pointer;
}

.chat-input-bar {
    padding: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    border-top: 1px solid #ddd;
}

.chat-text-input {
    flex: 1;
    border-radius: 20px;
    border: 1px solid #ddd;
    padding: 8px 12px;
    max-height: 15rem;
}

.chat-send-btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.chat-media-btn {
    cursor: pointer;
}

/* .fullscreen-viewer {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.9);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index: 999999;
} */
.fullscreen-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
}

.fullscreen-viewer img {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
}


#chatBoxContainer {
    position: absolute;
   /*  z-index: 999999; */
}
.chat-image-viewer-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.chat-image-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
}

.chat-image-viewer img {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.chat-image-close {
    position: absolute;
    top:1rem; 
    right:1rem;
    background: #fff;
    color: #333;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}
/* Chat message row alignment */
.chat-message-row {
    width: 100%;
    margin: 6px 0;
    display: flex;
}

.chat-message-row.left {
    justify-content: flex-start;
}

.chat-message-row.right {
    justify-content: flex-end;
}

/* Chat bubbles */
.chat-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.3rem;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Customer → inbound → left → grey bubble */
.chat-bubble.inbound {
    background-color: #f1f2f6;
    color: #333;
    border-top-left-radius: 0;
}

/* Store → outbound → right → blue bubble */
.chat-bubble.outbound {
    background-color: #006dff;
    color: white;
    border-top-right-radius: 0;
}

/* Images/media inside bubbles */
.chat-bubble img {
    max-width: 180px;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
}
.credit-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.credit-table th,
.credit-table td {
	padding: 10px;
	border: 1px solid #ccc;
	font-size: 14px;
	color: #000000;
}



/* ====================================================================
                        Item Notes CSS Starts Here
=====================================================================*/
.items-flex-wrap {
    flex-wrap: wrap;
}
.input-flex-fix {
    min-width: 140px;
    flex: 1 1 150px;
} 
.items-flex-child {
    flex: 1 1 120px;
}
/* ====================================================================
                        Item Notes CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Copy Item CSS Starts Here
=====================================================================*/

/* Match the base input look */
.select2-container--default .select2-selection--multiple {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    /* padding: 0.4rem 0.4rem; */
    padding: 0.1rem 0.1rem 0.3rem 0.1rem;
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 400;
}

/* Tag (selected option) styling */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    padding: 2px 6px;
    color: #4b5563;
    font-size: 0.8rem;
}

/* Tag remove button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #6b7280;
    margin-right: 4px;
    font-size: 0.9em;
}

/* Placeholder style */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #9ca3af;
    font-size: 0.8rem;
}

/* Dropdown panel */
.select2-dropdown {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.4rem !important;
}

/* Search box inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.4rem;
}

#fromStore option:disabled,
#toStore option:disabled {
    color: #6b7280;        /* darker grey text */
    background-color: #f1f1f1; /* light grey background */
    font-style: italic;    /* optional: makes it look more disabled */
}

/* ====================================================================
                       Copy Item CSS Ends Here
=====================================================================*/

/* ====================================================================
                Dashboard Service Type & Search Input Beautification
=====================================================================*/

/* Custom Select Dropdown for Service Type */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    background: transparent !important;
}

/* Ensure native select is completely hidden */
.custom-select-wrapper select {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
}

.custom-select-trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.4rem;
    padding: 0.2rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: #000  !important;
    font-family: var(--font-inter);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
}

.custom-select-trigger:hover {
    border-color: #000 ;
    background: #fafafa;
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: #16b843;
    box-shadow: 0 0 0 2px rgba(22, 184, 67, 0.1);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000  !important;
    font-size: 1rem;
    background: transparent !important;
}

.custom-select-value.placeholder {
    color: #000  !important;
}

.custom-select-arrow {
    color: #000 ;
    font-size: 14px;
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: 8px;
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
    color: #16b843;
}

.custom-select-trigger:hover .custom-select-arrow {
    color: #16b843;
}

/* Dropdown Options Menu */
.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #16b843;
    border-top: none;
    border-radius: 0 0 0.4rem 0.4rem;
    max-height: calc(100vh - 150px); /* Viewport height minus header/spacing */
    overflow-y: auto; /* Scrollbar only when needed */
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: none;
}

.custom-select-wrapper.open .custom-select-options {
    display: block;
    animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-select-option {
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font-inter);
    color: #000 ;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.custom-select-option:last-child {
    border-bottom: none;
    border-radius: 0 0 0.4rem 0.4rem;
}

.custom-select-option:hover {
    background: linear-gradient(135deg, rgba(22, 184, 67, 0.08) 0%, rgba(14, 153, 51, 0.08) 100%);
    color: #16b843;
}

.custom-select-option.selected {
    background: linear-gradient(135deg, rgba(22, 184, 67, 0.12) 0%, rgba(14, 153, 51, 0.12) 100%);
    color: #16b843;
    font-weight: 500;
}

.custom-select-option.disabled {
    color: #000 ;
    background: #f9fafb;
    cursor: default;
    font-style: italic;
}

.custom-select-option.disabled:hover {
    background: #f9fafb;
    color: #000 ;
}

/* Scrollbar styling for options */
.custom-select-options::-webkit-scrollbar {
    width: 6px;
}

.custom-select-options::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.custom-select-options::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Search Item Input - Keep original 50% width, add search icon */
#searchItem {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    padding: 0.4rem 0.8rem 0.4rem 2.2rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #000 ;
    font-family: var(--font-inter);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: normal;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.6rem center;
    background-size: 14px 14px;
}

#searchItem:hover {
    border-color: #000 ;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
}

#searchItem:focus {
    outline: none;
    border-color: #16b843;
    box-shadow: 0 0 0 2px rgba(22, 184, 67, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316b843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
}

#searchItem::placeholder {
    color: var(--color-grayText);
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #searchItem {
        width: 100% !important;
    }
}

/* ====================================================================
            Dashboard Service Type & Search Input CSS Ends Here
=====================================================================*/

/* ====================================================================
            Dashboard Right Panel Beautification Starts Here
=====================================================================*/
/* Header section - tight spacing */
.dashboard_outlet_content_right_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.35rem 0.4rem !important;
    margin-bottom: 0 !important;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
}

/* Rush toggle wrapper - compact */
.rush-toggle-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
}

.rush-toggle-wrapper span {
    margin-right: 0.25rem;
}

/* Toggle switch - smaller */
.toggle-switch {
    margin: 0 !important;
    width: 36px !important;
    height: 20px !important;
}

.toggle-switch .toggle-label {
    width: 36px !important;
    height: 20px !important;
}

.toggle-switch .toggle-label::before {
    width: 16px !important;
    height: 16px !important;
}

.toggle-switch .toggle-input:checked + .toggle-label::before {
    transform: translateX(16px) !important;
}

/* Chat icon - compact */
.chat-icon-wrapper {
    padding: 0 0.3rem !important;
    display: flex;
    align-items: center;
}

.chat-toggle-icon {
    width: 25px;
    height: 25px;
}

/* Order Ringup title - smaller */
.dashboard_outlet_content_right_header_title {
    font-family: var(--font-inter) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    flex: 0 0 auto !important;
}

/* Start Over button - compact */
.start_over_btn {
    padding: 0.3rem 0.6rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: var(--font-inter) !important;
    border-radius: 4px !important;
    border: none !important;
    background: #ff4f59 !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background 0.2s ease !important;
}

.start_over_btn:hover {
    background: #a73e47 !important;
    transform: scale(1.08);
}

/* Customer Notes Section - compact */
#custBusinessNoteSection {
    background: transparent;
    border-radius: 0;
    padding: 0.4rem !important;
    margin-bottom: 0 !important;
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
}

#custBusinessNoteHeader {
    font-family: var(--font-inter) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin-bottom: 0.15rem !important;
    display: block;
}

#customerBusinessNotes {
    width: 100%;
    padding: 0.4rem 0.5rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-family: var(--font-inter) !important;
    font-size: 0.9rem !important;
    color: #374151;
    background: #fafafa;
    resize: none;
    min-height: 40px !important;
}

#customerBusinessNotes:focus {
    border-color: #16b843 !important;
    outline: none;
    background: #ffffff;
}

/* Order items body - minimal margin */
.dashboard_outlet_content_right_body {
    margin: 0.25rem 0 !important;
    min-height: auto;
}

/* Add Additional Services - compact */
.add_another_service {
    padding: 0.4rem 0.5rem !important;
    margin: 0.35rem 0 !important;
    border: 1px dashed #d1d5db !important;
    border-radius: 6px !important;
    background: #fafafa !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add_another_service:hover {
    border-color: #16b843 !important;
    background: #f0fdf4 !important;
}

#additionalChargesDropdown {
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

.add_another_service:hover #additionalChargesDropdown {
    color: #16b843;
}

/* Total Quantity Box - compact */
.total_quantity_box {
    margin-top: 0.35rem !important;
    gap: 0.35rem !important;
}

.total_quantity_box_content {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 0.35rem 0.5rem !important;
    gap: 0 !important;
}

.total_item {
    padding: 0.1rem 0 !important;
    border-bottom: none;
}

.total_item_title {
    font-family: var(--font-inter) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}
.total_item_title.bold {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #000 !important;
}

.total_item_value {
    font-family: var(--font-inter) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.total_item_value.bold {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #00701f !important;
}

/* Order Now Button - compact */
.total_quantity_order_button {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    font-family: var(--font-inter) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 6px !important;
    background: #16b843 !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background 0.2s ease !important;
    text-transform: none;
    letter-spacing: normal;
}

.total_quantity_order_button:hover:not(:disabled) {
    background: #12a339 !important;
}

.total_quantity_order_button:disabled {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}
.item_notes {
  color: #000 !important;
  font-size: 1rem !important;
}

/* Previous incomplete order - tight */
.previous_incomplete_order_box_content {
    margin-top: 0.35rem;
}

/* Responsive - keep compact */
@media (max-width: 1200px) {
    .dashboard_outlet_content_right {
        padding: 0.35rem !important;
    }
}

@media (max-width: 768px) {
    .dashboard_outlet_content_right {
        width: 100% !important;
        border-left: 1px solid #e5e7eb !important;
        border-top: 3px solid #16b843 !important;
        margin-top: 0.5rem;
    }
    .order-summary-reward-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 0.75rem;
    }
    .reward-section-header {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
}

/* ====================================================================
            Dashboard Right Panel Beautification Ends Here
=====================================================================*/

/* ====================================================================
            Chat Widget Beautification Starts Here
=====================================================================*/

/* Chat Panel Container */
#chatPanel {
    z-index: 10000;
}

/* Main Chat Box - Larger for better readability */
.chat-box {
    position: absolute !important;
    /* right: 1rem !important;
    top: 6rem !important; */
    width: 440px !important;
    height: 560px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
}

/* Chat Header - Dark neutral instead of green */
.chat-header {
    background: #1f2937 !important;
    padding: 14px 16px !important;
    border-bottom: none !important;
    font-weight: 600 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #ffffff !important;
    font-family: var(--font-inter);
    font-size: 1rem;
    min-height: auto !important;
}

#chatHeaderName {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

/* Close Button */
.chat-close-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    padding: 0 !important;
}

.chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.chat-close-btn .icon {
    width: 14px !important;
    height: 14px !important;
    filter: brightness(0) invert(1);
}

/* Messages Container */
.chat-messages {
    padding: 12px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    background: #f8fafc !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Load More Button */
.chat-load-more {
    text-align: center !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    margin: 0 auto 8px auto !important;
    width: fit-content !important;
    transition: all 0.2s ease !important;
    font-family: var(--font-inter);
}

.chat-load-more:hover {
    background: #f3f4f6 !important;
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Message Row */
.chat-message-row {
    width: 100% !important;
    margin: 3px 0 !important;
    display: flex !important;
}

.chat-message-row.left {
    justify-content: flex-start !important;
}

.chat-message-row.right {
    justify-content: flex-end !important;
}

/* Chat Bubbles - Improved readability */
.chat-bubble {
    max-width: 80% !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    font-family: var(--font-inter);
    position: relative;
}

/* Inbound (Customer) Messages - Left */
.chat-bubble.inbound {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    border-top-left-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

/* Outbound (Store) Messages - Right - Soft Blue */
.chat-bubble.outbound {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-top-right-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25) !important;
    border: none !important;
}

.chat-bubble p {
    margin: 0 0 4px 0;
}

/* Timestamp */
.chat-time {
    font-size: 11px !important;
    margin-top: 6px;
    text-align: right;
    opacity: 0.8;
}

.chat-bubble.inbound .chat-time {
    color: #6b7280;
}

.chat-bubble.outbound .chat-time {
    color: rgba(255, 255, 255, 0.85);
}

/* Media/Images in Bubbles */
.chat-bubble img,
.chat-media-thumb {
    max-width: 100% !important;
    width: 160px !important;
    border-radius: 12px !important;
    margin: 4px 0 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

.chat-bubble img:hover,
.chat-media-thumb:hover {
    transform: scale(1.02);
}

/* Input Bar */
.chat-input-bar {
    padding: 10px 12px !important;
    display: flex !important;
    gap: 8px !important;
    align-items: flex-end !important;
    border-top: 1px solid #e5e7eb !important;
    background: #ffffff !important;
}

/* Media Upload Button */
.chat-media-btn {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0;
}

.chat-media-btn:hover {
    background: #e5e7eb !important;
}

.chat-media-btn .icon {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.7;
}

/* Text Input */
.chat-text-input {
    flex: 1 !important;
    border-radius: 20px !important;
    border: 1px solid #e5e7eb !important;
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    font-family: var(--font-inter) !important;
    max-height: 120px !important;
    min-height: 40px !important;
    resize: none !important;
    background: #f9fafb !important;
    color: #1f2937 !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    line-height: 1.5 !important;
}

.chat-text-input:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.chat-text-input::placeholder {
    color: #9ca3af !important;
}

/* Send Button */
.chat-send-btn {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    font-family: var(--font-inter) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0;
    min-height: 38px;
}

.chat-send-btn:hover {
    background: #2563eb !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}

.chat-send-btn:active {
    transform: translateY(0);
}

/* Full Image Viewer Overlay */
.chat-image-viewer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.9) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    backdrop-filter: blur(4px);
}

.chat-image-viewer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
}

.chat-image-viewer img {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.chat-image-close {
    position: fixed !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.chat-image-close:hover {
    background: #f3f4f6 !important;
    transform: scale(1.1);
}

/* Custom Scrollbar for Chat */
.chat-messages.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.chat-messages.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.chat-messages.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .chat-box {
        width: calc(100vw - 2rem) !important;
        max-width: 360px !important;
        right: 1rem !important;
        height: 450px !important;
    }
    
    .chat-bubble {
        max-width: 85% !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .chat-box {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 70vh !important;
        border-radius: 16px 16px 0 0 !important;
    }
    
    .chat-header {
        padding: 14px 16px !important;
    }
    
    .chat-input-bar {
        padding: 12px !important;
    }
}

/* ====================================================================
            Chat Widget Beautification Ends Here
=====================================================================*/

/* ====================================================================
            Previous Incomplete Orders Section Starts Here
=====================================================================*/

/* Main container - no box, flows naturally */
.previous_incomplete_order_box_content {
    /* margin-top: 0.75rem !important;
    padding-top: 0.5rem; */
    border-top: 1px solid #e5e7eb;
}

/* Section wrapper - NO card styling */
.incomplete-orders-section {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

/* Header row - minimal */
.incomplete-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    margin-bottom: 6px;
    background: transparent;
    border-bottom: none;
}

.previous_incomplete_order_header {
    color: #1f2937 !important;
    font-family: var(--font-inter) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    flex: none !important;
    display: block !important;
}

/* Complete All button in header */
.complete-all-btn {
    background: #16b843;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-inter);
    cursor: pointer;
    transition: background 0.2s ease;
}

.complete-all-btn:hover {
    background: #12a339;
}

/* List container - NO scroll, flows naturally */
.incomplete-orders-list {
    max-height: none !important;
    overflow: visible !important;
}

/* Table styling - larger text, minimal padding */
.previous_incomplete_order_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-inter);
    font-size: 1rem;
    table-layout: fixed;
}

.previous_incomplete_order_table thead {
    background: transparent;
    position: relative;
}

.previous_incomplete_order_table th {
    padding: 4px 6px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid #e5e7eb;
}

/* Column widths */
.previous_incomplete_order_table th:nth-child(1),
.previous_incomplete_order_table td:nth-child(1) { width: 15%; } /* Order */
.previous_incomplete_order_table th:nth-child(2),
.previous_incomplete_order_table td:nth-child(2) { width: 18%; } /* Status */
.previous_incomplete_order_table th:nth-child(3),
.previous_incomplete_order_table td:nth-child(3) { width: 15%; } /* Amount */
.previous_incomplete_order_table th:nth-child(4),
.previous_incomplete_order_table td:nth-child(4) { width: 32%; } /* Rack - wider for wrapping */
.previous_incomplete_order_table th:nth-child(5),
.previous_incomplete_order_table td:nth-child(5) { width: 20%; } /* Complete button */

.previous_incomplete_order_table td {
    padding: 6px;
    color: #000000;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
    font-size: 1rem;
    white-space: normal;
    word-wrap: break-word;
}

/* Row hover effect */
.incomplete-order-row {
    transition: background 0.15s ease;
}

.incomplete-order-row:hover {
    background: #f9fafb;
}

.incomplete-order-row:last-child td {
    border-bottom: none;
}

/* Order ID - large, bold, readable */
.order-id-badge {
    font-weight: 700;
    color: #1f2937;
    font-size: 1rem;
}

/* Status - NO background, just text */
.order-status-badge {
    display: inline;
    padding: 0;
    background: transparent !important;
    color: #374151;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Amount styling - large, bold */
.order-amount {
    font-weight: 700;
    color: #059669;
    font-size: 1rem;
}

/* Rack styling - wraps long text */
.order-rack {
    color: #374151;
    font-size: 0.9rem;
    display: block;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
    max-width: 150px;
}

/* Complete button in rows */
.previous_incomplete_order_table .complete-order-btn {
    background: #16b843 !important;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.previous_incomplete_order_table .complete-order-btn:hover {
    background: #12a339 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .previous_incomplete_order_header {
        font-size: 0.95rem !important;
    }
    
    .previous_incomplete_order_table th,
    .previous_incomplete_order_table td {
        padding: 5px;
        font-size: 0.9rem;
    }
    
    .order-id-badge,
    .order-status-badge,
    .order-amount,
    .order-rack {
        font-size: 0.9rem;
    }
}

/* ====================================================================
            Previous Incomplete Orders Section Ends Here
=====================================================================*/

/* ====================================================================
            Order Summary Popup Beautification Starts Here
=====================================================================*/

/* 
 * LAPTOP/DESKTOP: Preserve original layout exactly
 * MOBILE: Beautify only
 * NO INTERNAL SCROLLING anywhere
 */

/* Remove any scroll from popup - content must fit */
#orderSumurryDialog .order-details-content {
    max-height: none !important;
    overflow: visible !important;
}

#orderSumurryDialog .order-details-scroll {
    max-height: none !important;
    overflow: visible !important;
}

/* ================================================
   PAYMENT DROPDOWN - GREEN BORDER & BEAUTIFICATION
   ================================================ */

/* Payment dropdown container */
#orderSumurryDialog .order-summary-payment-methods {
    margin-bottom: 8px;
}

/* Payment label styling */
#orderSumurryDialog .order-summary-payment-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: block;
}

/* Select wrapper positioning */
#orderSumurryDialog .order-summary-payment-methods .select_wrapper {
    position: relative;
    width: 100%;
}

/* Payment dropdown - GREEN BORDER (closed state) */
#orderSumurryDialog .order-summary-payment-methods .select_wrapper .input_field,
#orderSumurryDialog .order-summary-payment-methods #paymentMethod {
    border: 2px solid #16b843 !important;
    border-radius: 8px !important;
    padding: 12px 40px 12px 14px !important;
    font-size: 1rem !important;
    font-family: var(--font-inter) !important;
    color: #1f2937 !important;
    background-color: #ffffff !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Payment dropdown - focus/open state */
#orderSumurryDialog .order-summary-payment-methods .select_wrapper .input_field:focus,
#orderSumurryDialog .order-summary-payment-methods #paymentMethod:focus {
    border-color: #12a339 !important;
    box-shadow: 0 0 0 3px rgba(22, 184, 67, 0.15) !important;
    outline: none !important;
}

/* Payment dropdown - hover state */
#orderSumurryDialog .order-summary-payment-methods .select_wrapper .input_field:hover,
#orderSumurryDialog .order-summary-payment-methods #paymentMethod:hover {
    border-color: #12a339 !important;
}

/* Dropdown arrow styling */
#orderSumurryDialog .order-summary-payment-methods .select_wrapper .select_arrow {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #16b843 !important;
    font-size: 14px !important;
    pointer-events: none !important;
}

/* Dropdown options styling (when open) */
#orderSumurryDialog .order-summary-payment-methods #paymentMethod option {
    padding: 10px 14px !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    background: #ffffff !important;
}

#orderSumurryDialog .order-summary-payment-methods #paymentMethod option:hover,
#orderSumurryDialog .order-summary-payment-methods #paymentMethod option:checked {
    background: #f0fdf4 !important;
}

/* ================================================
   AMOUNT PAID - MINIMAL SIZE ADJUSTMENTS ONLY
   ================================================ */

/* Amount Paid label - Slightly larger font */
#orderSumurryDialog #amountPaid .order-summary-label,
#orderSumurryDialog .amount-paid .order-summary-label {
    font-size: 1rem !important;
}

/* Amount Paid input - Slightly bigger */
#orderSumurryDialog #amountPaidInput,
#orderSumurryDialog #amountPaid .order-summary-input {
    padding: 0.5rem 0.8rem !important;
    font-size: 1rem !important;
    font-weight: bold;
}

/* ================================================
   MOBILE-ONLY BEAUTIFICATION (max-width: 640px)
   ================================================ */
@media (max-width: 640px) {
    
    /* Popup container - fit to screen without scroll */
    #orderSumurryDialog .order-details-content {
        width: 95% !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 12px !important;
    }
    
    #orderSumurryDialog .order-details-scroll {
        padding: 12px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Header - slightly improved */
    #orderSumurryDialog .order-details-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px !important;
        margin-bottom: 8px !important;
    }
    
    #orderSumurryDialog .order-details-title {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
    }
    
    /* Form - compact but readable */
    #orderSumurryDialog .order-summary-form {
        padding: 0 !important;
    }
    
    /* Grid - stack vertically on mobile */
    #orderSumurryDialog .order-summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* Labels - larger for readability */
    #orderSumurryDialog .order-summary-label,
    #orderSumurryDialog .order-summary-payment-label {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        margin-bottom: 4px !important;
    }
    
    /* Inputs - larger touch targets */
    #orderSumurryDialog .order-summary-input,
    #orderSumurryDialog .select_wrapper .input_field {
        font-size: 1rem !important;
        padding: 10px !important;
    }
    
    /* Payment methods - full width */
    #orderSumurryDialog .order-summary-payment-methods {
        grid-column: span 1 !important;
    }
    
    /* Payment dropdown - mobile adjustments */
    #orderSumurryDialog .order-summary-payment-methods .select_wrapper .input_field,
    #orderSumurryDialog .order-summary-payment-methods #paymentMethod {
        padding: 14px 40px 14px 12px !important;
        font-size: 1.05rem !important;
    }
    
    #orderSumurryDialog .order-summary-payment-methods .select_wrapper .select_arrow {
        right: 12px !important;
        font-size: 16px !important;
    }
    
    /* Toggle wrapper - compact */
    #orderSumurryDialog .toggle-wrapper {
        padding: 6px 0 !important;
    }
    
    /* Notes textarea - smaller on mobile */
    #orderSumurryDialog textarea.order-summary-input {
        min-height: 50px !important;
    }
    
    /* Summary totals - compact */
    #orderSumurryDialog .order-summary-total {
        padding: 10px !important;
        margin-top: 10px !important;
    }
    
    #orderSumurryDialog .order-summary-total-row {
        padding: 6px 0 !important;
    }
    
    #orderSumurryDialog .order-summary-total-label {
        font-size: 0.9rem !important;
    }
    
    #orderSumurryDialog .order-summary-total-value {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    
    /* Action buttons - stack vertically, larger touch targets */
    #orderSumurryDialog .order-summary-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }
    
    #orderSumurryDialog .order-summary-button {
        padding: 12px 16px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }
    
    /* Business info section - compact */
    #orderSumurryDialog #businessInfoSection {
        gap: 8px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
    
    #orderSumurryDialog #businessEmployeeSummary {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ================================================
   TABLET (641px - 900px) - Minor adjustments only
   ================================================ */
@media (min-width: 641px) and (max-width: 900px) {
    #orderSumurryDialog .order-details-content {
        max-height: none !important;
        overflow: visible !important;
    }
    
    #orderSumurryDialog .order-details-scroll {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ================================================
   LAPTOP/DESKTOP (901px+) - No changes, preserve original
   ================================================ */
@media (min-width: 901px) {
    /* Ensure no scroll on desktop */
    #orderSumurryDialog .order-details-content {
        max-height: none !important;
        overflow: visible !important;
    }
    
    #orderSumurryDialog .order-details-scroll {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ====================================================================
            Order Summary Popup Beautification Ends Here
=====================================================================*/

/* ====================================================================
                    Manage Weights Page CSS Starts Here
=====================================================================*/

/* Weights Table - Consistent with Orders page */
#weights-table .orders-table-body-cell {
	padding: 0.5rem;
	color: #000000;
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	vertical-align: middle;
}

#weights-table .orders-table-body-row td {
	height: 48px;
	vertical-align: middle;
}

#weights-table .input_field {
	padding: 0.4rem 0.6rem;
	font-size: 0.875rem;
	min-width: 80px;
}

/* Weight Action Buttons - Same as Orders page */
#weights-table .employee-action-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}


/* Add Weight Button - Use site-wide add_customer_btn style */
#addWeightRowBtn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Store Price Section in Modal */
#storePricingSection {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}

.store-price-header {
	display: flex;
	gap: 10px;
	padding: 0.5rem 0;
	border-bottom: 1px solid #f3f4f6;
	margin-bottom: 0.75rem;
	align-items: baseline;
}

.store-price-header .input_label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	line-height: 1.2;
	padding: 0;
	margin: 0;
}

.store-price-header .input_label:first-child {
	flex: 1.2;
}

.store-price-header .input_label:not(:first-child):not(:last-child) {
	flex: 1;
}

.store-price-header .input_label:last-child {
	width: 65px;
	flex: 0 0 65px;
}

.store-price-row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	align-items: center;
}

.store-price-row .input_field {
	padding: 0.4rem 0.5rem;
	font-size: 0.85rem;
	height: 38px;
	box-sizing: border-box;
}

.store-price-row .store-dropdown {
	flex: 1.2;
	min-width: 100px;
}

.store-price-row .store-price {
	flex: 1;
	min-width: 80px;
}

.store-price-row .add-row-btn,
.store-price-row .remove-row-btn {
	width: 38px;
	height: 38px;
	min-width: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #6b7280;
	cursor: pointer;
	font-size: 0.75rem;
	box-sizing: border-box;
}

.store-price-row .add-row-btn:hover {
	background: #f0fdf4;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.store-price-row .remove-row-btn:hover {
	background: #fef2f2;
	border-color: var(--color-redBg);
	color: var(--color-redBg);
}

.store-price-row .add-row-btn.disabled-btn,
.store-price-row .remove-row-btn.disabled-btn {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Validation Error */
.store-price-row .validation-error {
	border-color: var(--color-redBg) !important;
}

/* Weights Form */
#weightsDialogue .weights_form .input_group {
	flex: 1;
}

#weightsDialogue .cleaning_type_form_field {
	margin-top: 0.75rem;
}

/* Required Star */
.required-star {
	color: var(--color-redBg);
	font-weight: 600;
}

/* ====================================================================
                Manage Weights Page Responsive Styles
=====================================================================*/

@media (max-width: 768px) {
	.store-price-header {
		display: none;
	}

	.store-price-row {
		flex-wrap: wrap;
		gap: 8px;
		padding: 0.75rem;
		background: #f9fafb;
		border-radius: 6px;
		margin-bottom: 0.75rem;
	}

	.store-price-row .store-dropdown {
		flex: 1 1 100%;
		min-width: 100%;
		height: 38px;
	}

	.store-price-row .store-price {
		flex: 1 1 calc(50% - 4px);
		min-width: calc(50% - 4px);
		height: 38px;
	}

	.store-price-row .add-row-btn,
	.store-price-row .remove-row-btn {
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
	}

	#weights-table .orders-table-header-cell,
	#weights-table .orders-table-body-cell {
		padding: 0.4rem 0.5rem;
		font-size: 0.85rem;
	}

	#weights-table .input_field {
		padding: 0.3rem 0.4rem;
		font-size: 0.8rem;
		min-width: 60px;
	}
}

@media (max-width: 480px) {
	.store-price-row {
		gap: 6px;
		padding: 0.5rem;
	}

	.store-price-row .store-price {
		flex: 1 1 100%;
		min-width: 100%;
		height: 38px;
	}

	.store-price-row .add-row-btn,
	.store-price-row .remove-row-btn {
		width: 38px;
		height: 38px;
	}
}

/* ====================================================================
                    Manage Weights Page CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Product Image Upload CSS Starts Here
=====================================================================*/
.product-form-container {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 0.8rem;
}

.product-form-left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.service-type-narrow {
}

.service-type-narrow .input_field {
	width: 100%;
}

.product-form-row {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.product-form-row .input_group {
	min-width: 0;
}

.item-name-wide {
	flex: 1;
}

.pieces-narrow {
	flex: 0 0 80px;
}

.pieces-narrow .input_field {
	width: 100%;
}

.product-image-input-group {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 220px;
}

.product-image-buttons-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.product-image-upload-wrapper {
    position: relative;
    flex: 1;
}

.product-image-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

.product-image-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    height: 2.25rem;
    white-space: nowrap;
}

.product-image-upload-btn:hover {
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

.product-image-upload-btn i {
    font-size: 0.875rem;
}

.product-image-choose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 2.25rem;
    white-space: nowrap;
    flex-shrink: 0;
    width: 100%;
}

.product-image-choose-btn:hover {
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

.product-image-choose-btn i {
    font-size: 0.875rem;
}

/* SVG Selection Search */
.svg-search-container {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
}

.svg-search-input-wrapper {
    position: relative;
    width: 100%;
}

.svg-search-input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-family: var(--font-inter);
    font-size: 0.875rem;
    color: #4b5563;
    background-color: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.svg-search-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #16b843);
    transition: color 0.2s ease;
}

.svg-search-button:hover {
    color: #12a035;
}

.svg-search-button i {
    font-size: 1rem;
}

.svg-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.svg-search-input::placeholder {
    color: #9ca3af;
}

/* SVG Selection Grid */
.svg-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    padding: 1rem;
    max-height: 500px;
    /* overflow-y: auto; */
}

.svg-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}

.svg-grid-item:hover {
    border-color: var(--color-primary);
    background-color: #f0fdf4;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.svg-grid-item.selected {
    border-color: var(--color-primary);
    background-color: #dcfce7;
    border-width: 2px;
}

.svg-preview-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.iconify-preview-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.iconify-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Filename is hidden - stored in data attribute only */
.svg-filename {
    display: none;
}

.product-image-preview-wrapper {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
}

.product-image-preview {
	width: 100px;
	height: 140px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: #f9fafb;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.product-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #fff;
}

.product-image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	color: #9ca3af;
	font-size: 0.75rem;
}

.product-image-placeholder i {
	font-size: 1.5rem;
	color: #d1d5db;
}

.product-image-placeholder span {
	font-size: 0.7rem;
}

.product-image-delete-icon {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(220, 38, 38, 0.9);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	z-index: 10;
}

.product-image-delete-icon:hover {
	background-color: rgba(220, 38, 38, 1);
	transform: scale(1.1);
}

.product-image-delete-icon i {
	font-size: 0.875rem;
	color: #fff;
}

@media (max-width: 768px) {
	.product-form-container {
		flex-direction: column;
	}
	
	.product-form-row {
		flex-direction: column;
		align-items: stretch;
	}
	
	.service-type-narrow {
		max-width: 100%;
	}
	
	.pieces-narrow {
		flex: 1;
	}
	
	.product-image-input-group {
		min-width: 100%;
		max-width: 100%;
	}
	
	.product-image-buttons-wrapper {
		flex-wrap: wrap;
	}
	
	.product-image-choose-btn {
		flex: 1 1 auto;
		min-width: calc(50% - 0.25rem);
	}
	
	.product-image-preview-wrapper {
		width: 100%;
		justify-content: flex-start;
	}
	
	.product-image-preview {
		width: 100px;
		height: 100px;
	}
}
/* ====================================================================
                    Product Image Upload CSS Ends Here
=====================================================================*/

/* ====================================================================
                    RESPONSIVE CSS - Mobile & Tablet Only
                    Desktop (min-width: 1025px) remains unchanged
=====================================================================*/

/* ====================================================================
                    TABLET RESPONSIVE (max-width: 1024px)
=====================================================================*/
@media only screen and (max-width: 1024px) {
	/* Modals - order-details-dialog */
	.order-details-dialog {
		padding: 1rem;
	}
	
	.order-details-content {
		width: 95% !important;
		max-width: 95% !important;
	}
	
	.order-details-content-note {
		width: 90% !important;
		max-width: 90% !important;
	}
	
	.order-details-content-rack {
		width: 90% !important;
		max-width: 90% !important;
	}
	
	.small-popup {
		width: 90% !important;
		max-width: 90% !important;
		min-width: auto;
	}
	
	.small-popup.bulk-update-popup {
		max-width: 95% !important;
		min-width: auto;
	}
	
	.order-details-content-transactions {
		width: 95% !important;
		max-width: 95% !important;
	}
	
	#orderSumurryDialog .order-details-content {
		width: 95% !important;
		max-width: 95% !important;
	}
	
	.customer-modal-content {
		width: 95% !important;
		max-width: 95% !important;
	}
	
	/* Bootstrap Modals */
	.modal-dialog {
		max-width: 90% !important;
		margin: 1rem auto !important;
	}
	
	.modal-content {
		border-radius: 12px !important;
	}
	
	/* Tables - ensure horizontal scroll */
	.responsive-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	
	.orders-table {
		min-width: 600px;
	}
	
	/* Grid layouts */
	.grid {
		grid-template-columns: 1fr !important;
		gap: 1.5rem;
	}
	
	.order-info-grid {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}
	
	/* Filter/Search sections */
	.dashboard_outlet_search {
		flex-direction: column;
		gap: 0.75rem;
		align-items: stretch;
	}
	
	.transaction_search {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	
	.transaction_search .dashboard_outlet_search_item {
		width: 100% !important;
		flex: 1 1 100% !important;
		max-width: 100% !important;
		min-width: auto !important;
	}
	
	.search_box {
		width: 100%;
	}
	
	.dashboard_outlet_content_top .d-flex {
		flex-direction: column;
		align-items: stretch !important;
		gap: 0.75rem !important;
	}
	
	.dashboard_outlet_content_top .input_field {
		width: 100% !important;
	}
	
	/* Forms */
	.order-info-row {
		grid-template-columns: 1fr !important;
	}
	
	/* Buttons */
	.add_customer_btn,
	.search_button,
	.transaction_top_search_btn {
		width: 100%;
		justify-content: center;
	}
	
	.rack_orders_btn {
		width: 100%;
	}
	
	.orders-action-btns {
		flex-direction: column;
		gap: 0.75rem;
	}
	
	/* Chat Widget - Tablet */
	.chat-box {
		width: calc(100vw - 2rem) !important;
		max-width: 400px !important;
		right: 1rem !important;
		height: 500px !important;
		max-height: 500px !important;
	}
	
	.chat-messages {
		max-height: calc(500px - 120px) !important;
	}
	
	.orders-cancel-btn,
	.orders-save-btn {
		width: 100%;
	}
	
	.pegination-btns {
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: center;
	}
	
	/* Footer */
	.footer {
		font-size: 0.8rem;
		padding: 0.6rem 0.75rem;
	}
	
	.footer p {
		line-height: 1.3;
	}
}

/* ====================================================================
                    MOBILE RESPONSIVE (max-width: 600px)
=====================================================================*/
@media only screen and (max-width: 600px) {
	/* Modals - order-details-dialog */
	.order-details-dialog {
		padding: 0.5rem;
		align-items: flex-start;
		padding-top: 1rem;
	}
	
	.order-details-content {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 95vh !important;
		margin: 0 auto;
	}
	
	.order-details-scroll {
		max-height: calc(95vh - 60px) !important;
		padding: 0.75rem !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.order-details-content-note {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 90vh !important;
	}
	
	.order-details-content-rack {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 90vh !important;
	}
	
	.small-popup {
		width: 95% !important;
		max-width: 95% !important;
		min-width: auto;
		max-height: 90vh !important;
	}
	
	.small-popup.bulk-update-popup {
		max-width: 95% !important;
		min-width: auto;
	}
	
	.order-details-content-transactions {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 95vh !important;
	}
	
	#orderSumurryDialog .order-details-content {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 95vh !important;
	}
	
	.customer-modal-content {
		width: 95% !important;
		max-width: 95% !important;
		max-height: 95vh !important;
	}
	
	.customer-modal-scroll {
		max-height: calc(95vh - 60px) !important;
	}
	
	.order-details-header {
		margin-bottom: 0.75rem;
	}
	
	.order-details-title {
		font-size: 1.25rem !important;
	}
	
	/* Bootstrap Modals */
	.modal-dialog {
		max-width: 95% !important;
		margin: 0.5rem auto !important;
	}
	
	.modal-content {
		border-radius: 8px !important;
		padding: 1rem !important;
	}
	
	.modal-body {
		padding: 0.75rem !important;
		overflow-y: auto;
		max-height: calc(95vh - 120px);
		-webkit-overflow-scrolling: touch;
	}
	
	/* Tables - ensure horizontal scroll */
	.responsive-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		margin: 0 -0.5rem;
		padding: 0 0.5rem;
	}
	
	.orders-table {
		min-width: 500px;
		font-size: 0.875rem;
	}
	
	.orders-table-header-cell {
		padding: 0.5rem 0.25rem !important;
		font-size: 0.875rem !important;
		white-space: nowrap;
	}
	
	.orders-table-body-cell {
		padding: 0.5rem 0.25rem !important;
		font-size: 0.8125rem !important;
		white-space: nowrap;
	}
	
	/* Grid layouts */
	.grid {
		grid-template-columns: 1fr !important;
		gap: 1rem;
		margin-top: 1.5rem;
	}
	
	.order-info-grid {
		grid-template-columns: 1fr !important;
		gap: 0.75rem;
		margin-bottom: 1rem;
	}
	
	.order-info-row {
		grid-template-columns: 1fr !important;
		gap: 0.75rem;
	}
	
	.order-info-card {
		padding: 0.75rem;
	}
	
	.order-info-label,
	.order-info-value {
		font-size: 0.8125rem;
	}
	
	/* Filter/Search sections */
	.dashboard_outlet_content_top {
		padding: 0 !important;
		margin-bottom: 0.75rem !important;
	}
	
	.dashboard_outlet_title {
		font-size: 1.125rem !important;
		margin-bottom: 0.75rem;
	}
	
	.dashboard_outlet_search {
		flex-direction: column;
		gap: 0.5rem;
		align-items: stretch;
		width: 100%;
	}
	
	.transaction_search {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 0.5rem;
		width: 100%;
	}
	
	.transaction_search .dashboard_outlet_search_item {
		width: 100% !important;
		flex: 1 1 100% !important;
		max-width: 100% !important;
		min-width: auto !important;
	}
	
	.transaction_top_input_field {
		width: 100% !important;
		font-size: 0.875rem !important;
		padding: 0.4rem 0.75rem !important;
	}
	
	.transaction_top_search_btn {
		width: 100% !important;
		font-size: 0.875rem !important;
	}
	
	.search_box {
		width: 100%;
	}
	
	.search_input_field {
		font-size: 0.875rem;
	}
	
	.dashboard_outlet_content_top .d-flex {
		flex-direction: column;
		align-items: stretch !important;
		gap: 0.5rem !important;
	}
	
	.dashboard_outlet_content_top .input_field {
		width: 100% !important;
		font-size: 0.875rem !important;
	}
	
	/* Checkbox filters */
	.checkbox-filter {
		font-size: 0.875rem;
		margin-bottom: 0.5rem;
	}
	
	/* Forms and inputs */
	.input_field {
		font-size: 0.875rem;
		padding: 0.4rem 0.75rem;
	}
	
	.input_label {
		font-size: 0.75rem;
	}
	
	.auth_form {
		padding: 1rem;
	}
	
	.name_fields,
	.contact_fields,
	.address_fields,
	.location_fields {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}
	
	/* Buttons */
	.add_customer_btn,
	.search_button,
	.transaction_top_search_btn,
	.rack_orders_btn {
		width: 100%;
		justify-content: center;
		font-size: 0.875rem;
		padding: 0.5rem 1rem;
	}
	
	.orders-action-btns {
		flex-direction: column;
		gap: 0.5rem;
		margin-top: 0.75rem;
	}
	
	.orders-cancel-btn,
	.orders-save-btn {
		width: 100%;
		font-size: 0.875rem !important;
		padding: 0.5rem 1rem !important;
	}
	
	.pegination-btns {
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: center;
		padding: 0.5rem 0;
	}
	
	.pegination-btn {
		font-size: 0.8125rem !important;
		padding: 0.4rem 0.75rem !important;
		min-width: 80px;
	}
	
	.pegination-info {
		font-size: 0.8125rem !important;
	}
	
	.employee-remove-btn {
		font-size: 0.75rem !important;
		padding: 0.3rem 0.5rem !important;
	}
	
	.orders-view-btn,
	.storeclose-view-btn,
	.reenable-order-btn {
		font-size: 0.75rem !important;
		padding: 0.3rem 0.75rem !important;
	}
	
	.action-btn-edit,
	.action-btn-delete {
		width: 28px;
		height: 28px;
	}
	
	/* Order items table in modals */
	.order-items-table {
		font-size: 0.8125rem;
	}
	
	.order-items-header-cell {
		padding: 0.5rem 0.25rem;
		font-size: 0.8125rem;
	}
	
	.order-items-cell {
		padding: 0.5rem 0.25rem;
		font-size: 0.75rem;
	}
	
	/* Order summary */
	.order-summary {
		font-size: 0.875rem;
	}
	
	.order-summary-row {
		font-size: 0.8125rem;
	}
	
	/* Product form */
	.product-form-container {
		flex-direction: column;
	}
	
	.product-form-row {
		flex-direction: column;
		align-items: stretch;
	}
	
	/* Footer */
	.footer {
		font-size: 0.75rem;
		padding: 0.5rem 0.75rem;
		z-index: 100;
	}
	
	.footer p {
		line-height: 1.2;
		margin: 0;
	}
	
	/* Dashboard outlet padding */
	.dashboard_orderpage_outlet,
	.dashboard_outlet,
	.default_page_outlet {
		padding: 1rem 0.75rem !important;
	}
	
	.dashboard_outlet_content_bottom {
		margin-top: 0.75rem !important;
	}
	
	/* Pagination */
	.pegination-btns {
		margin-top: 1rem;
	}
	
	/* Icons in tables - make them smaller on mobile */
	.orders-table-body-cell svg,
	.order-items-cell svg {
		width: 18px;
		height: 18px;
	}
	
	.order-item-icon svg {
		width: 20px;
		height: 20px;
	}
	
	/* Close button in modals */
	.order-details-close svg {
		width: 18px;
		height: 18px;
	}
	
	/* Table block headings */
	.table-block h1 {
		font-size: 1.125rem !important;
		margin-bottom: 1rem;
	}
	
	/* Progress containers */
	.progress-container {
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}
	
	.progress-card {
		padding: 1rem;
	}
	
	/* Chat Widget */
	.chat-box {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 70vh !important;
		max-height: 70vh !important;
		border-radius: 16px 16px 0 0 !important;
	}
	
	.chat-header {
		padding: 12px 14px !important;
		font-size: 0.9375rem;
	}
	
	.chat-messages {
		height: auto !important;
		flex: 1;
		max-height: calc(70vh - 120px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.chat-input-bar {
		padding: 10px 12px !important;
		flex-wrap: wrap;
	}
	
	.chat-text-input {
		font-size: 0.875rem !important;
		padding: 8px 12px !important;
		min-height: 36px !important;
		max-height: 100px !important;
	}
	
	.chat-send-btn {
		padding: 8px 16px !important;
		font-size: 0.875rem !important;
		min-height: 36px !important;
	}
	
	.chat-media-btn {
		width: 32px !important;
		height: 32px !important;
	}
	
	.chat-media-btn img {
		width: 20px;
		height: 20px;
	}
	
	.chat-msg {
		max-width: 85% !important;
		font-size: 0.875rem;
	}
	
	.chat-media-thumb {
		max-width: 120px;
		width: auto;
	}
	
	/* Order edit dialog specific */
	.order-item-edit-content {
		width: 95% !important;
		max-height: 95vh !important;
	}
	
	.order-item-edit-scroll {
		max-height: calc(95vh - 60px) !important;
		padding: 0.75rem !important;
	}
	
	/* Dashboard new order specific adjustments */
	.dashboard_new_order_outlet {
		padding: 0.5rem;
	}
	
	.dashboard_outlet_content_left,
	.dashboard_outlet_content_right {
		width: 100%;
	}
	
	.dashboard_outlet_content_cards {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.5rem;
	}
	
	/* Order summary form specific */
	.order-summary-form {
		padding: 0 !important;
	}
	
	.order-summary-button {
		font-size: 0.875rem !important;
		padding: 0.5rem 1rem !important;
	}
	
	.order-info-button button {
		padding: 0.5rem 1rem !important;
		font-size: 0.875rem !important;
	}
}

/* ====================================================================
                    RESPONSIVE CSS ENDS HERE
=====================================================================*/


/* ====================================================================
                    DATA EXPORTS CSS STARTS HERE
=====================================================================*/

.data-export-page .input_field,
.data-export-page .input_group {
	max-width: 100%;
}
.data-export-page .export-date-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.data-export-page .export-date-row .input_field {
	min-width: 120px;
	flex: 1 1 120px;
}
.export-customer-search-wrap {
	position: relative;
	width: 100%;
}
.export-customer-search-wrap .search_dropdown_box {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	max-height: 240px;
	overflow-y: auto;
}
@media (max-width: 768px) {
	.data-export-page .export-date-row { flex-direction: column; align-items: stretch; }
	.data-export-page .d-flex.ms-auto { margin-left: 0 !important; margin-top: 0.5rem; }
	.data-export-page .nav-tabs .nav-link { font-size: 0.9rem; padding: 0.4rem 0.6rem; }
}
.export-date-row{
	display: flex;
    align-items: center;
    gap: 1rem;
}
 .flatpickr-monthSelect-months {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
}

.flatpickr-monthSelect-month {
    white-space: nowrap;
    text-align: center;
}

.flatpickr-monthSelect-month.selected{
padding: 10px 35px;
} 

.flatpickr-day {
    padding: 0 !important;
    margin: 0 !important;
}

/* ====================================================================
                    DATA EXPORTS CSS ENDS HERE
=====================================================================*/