/* =========================================================
   Cash Cloud � Form boxes & inputs (visual only)
   Scope: .cc-app-content / #scrollable-container (layout has no .content-wrapper)
   Excludes: POS (#pos_table), print/PDF tables, lockscreen POS.
   ========================================================= */

/* ---------- Product form field grid (create/edit) � compact + dynamic ---------- */
html body .cc-app-content .product_form .row.cc-product-fields,
html body #scrollable-container .product_form .row.cc-product-fields {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Direct expense create/edit layout; intentionally isolated from POS. */
html body:not(.lockscreen) .cc-expense-page {
  overflow-x: clip !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-main-card {
  border: 1px solid rgba(36, 151, 208, .25) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(35, 92, 125, .06) !important;
  overflow: visible !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-main-grid,
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 22px !important;
  row-gap: 14px !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-field,
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-field {
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-expense-page .form-group {
  margin-bottom: 0 !important;
}
html body:not(.lockscreen) .cc-expense-page .form-control,
html body:not(.lockscreen) .cc-expense-page .input-group,
html body:not(.lockscreen) .cc-expense-page .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-expense-page .form-control,
html body:not(.lockscreen) .cc-expense-page .select2-selection,
html body:not(.lockscreen) .cc-expense-page .input-group-addon {
  min-height: 38px !important;
  border-color: #d7e2eb !important;
}
html body:not(.lockscreen) .cc-expense-page .form-control,
html body:not(.lockscreen) .cc-expense-page .select2-selection {
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-reason-field textarea {
  height: 48px !important;
  min-height: 48px !important;
  resize: vertical !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-amount-field label {
  color: #176ca0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-amount-field .form-control {
  max-width: 100% !important;
  text-align: center !important;
  border: 1px solid #9fd1eb !important;
  font-weight: 800 !important;
}
html body:not(.lockscreen) .cc-expense-page
  :is(.cc-expense-main-grid, .cc-expense-extra-grid) label[for]::before {
  display: inline-block !important;
  width: 18px !important;
  margin-inline-end: 5px !important;
  color: #247dab !important;
  font-family: "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-expense-page label[for="location_id"]::before { content: "\f3c5"; }
html body:not(.lockscreen) .cc-expense-page label[for="expense_category_id"]::before { content: "\f07c"; }
html body:not(.lockscreen) .cc-expense-page label[for="expense_sub_category_id"]::before { content: "\f02b"; }
html body:not(.lockscreen) .cc-expense-page label[for="transaction_date"]::before { content: "\f073"; }
html body:not(.lockscreen) .cc-expense-page label[for="additional_notes"]::before { content: "\f15c"; }
html body:not(.lockscreen) .cc-expense-page label[for="final_total"]::before { content: "\f3d1"; }
html body:not(.lockscreen) .cc-expense-page label[for="ref_no"]::before { content: "\f02a"; }
html body:not(.lockscreen) .cc-expense-page label[for="expense_for"]::before { content: "\f007"; }
html body:not(.lockscreen) .cc-expense-page label[for="contact_id"]::before { content: "\f2b9"; }
html body:not(.lockscreen) .cc-expense-page label[for="tax_id"]::before { content: "\f295"; }
html body:not(.lockscreen) .cc-expense-page label[for="document"]::before { content: "\f0c6"; }
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-options {
  display: block !important;
  width: 100% !important;
  margin-top: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(36, 151, 208, .22) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  padding: 9px 15px !important;
  border: 0 !important;
  background: linear-gradient(100deg, #2864f0, #12b6b0, #19c85a) !important;
  color: #fff !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  list-style: none !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-summary::-webkit-details-marker,
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-summary::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-summary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-chevron {
  transition: transform .18s ease !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-options[open] .cc-expense-extra-chevron {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-grid {
  padding: 16px !important;
  background: #f9fcfe !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-field {
  padding: 11px !important;
  border: 1px solid #deebf3 !important;
  border-radius: 9px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-refund-field {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 76px !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-field .file-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .input-group,
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .file-caption-main {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 1px solid #d7e2eb !important;
  border-radius: 8px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .file-caption {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  width: 1% !important;
  min-width: 0 !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .file-caption-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .input-group-btn {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .input-group-btn > .btn {
  display: inline-flex !important;
  flex: 0 0 38px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-inline-start: 1px solid #d7e2eb !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .fileinput-remove-button,
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .fileinput-cancel-button {
  display: none !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .btn-file {
  color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #18b981) !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .btn-file i {
  margin: 0 !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-expense-page .cc-clear-expense-document {
  display: none !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .cc-clear-expense-document {
  display: none !important;
  flex: 0 0 32px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-inline-start: 1px solid #d7e2eb !important;
  border-radius: 0 !important;
  background: #fff5f5 !important;
  color: #dc2626 !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .cc-clear-expense-document.is-visible {
  display: inline-flex !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-input .cc-clear-expense-document i {
  margin: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
}
html body:not(.lockscreen) .cc-expense-page
  .cc-expense-extra-field .file-preview {
  display: none !important;
}
html body:not(.lockscreen) .cc-expense-page .help-block {
  margin: 5px 0 0 !important;
  font-size: 11px !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-expense-page .cc-expense-main-grid,
  html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-expense-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-expense-page .cc-expense-main-card .box-body {
    padding: 11px !important;
  }
  html body:not(.lockscreen) .cc-expense-page .cc-expense-main-grid,
  html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  html body:not(.lockscreen) .cc-expense-page .cc-expense-extra-grid {
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-expense-page .cc-expense-reason-field textarea {
    height: 48px !important;
    min-height: 48px !important;
  }
}

/* Bootstrap .row::before/::after become ghost grid cells � hide them */
html body .cc-app-content .product_form .row.cc-product-fields::before,
html body .cc-app-content .product_form .row.cc-product-fields::after,
html body #scrollable-container .product_form .row.cc-product-fields::before,
html body #scrollable-container .product_form .row.cc-product-fields::after {
  display: none !important;
  content: none !important;
}

html body .cc-app-content .product_form .row.cc-product-fields > [class*="col-"],
html body #scrollable-container .product_form .row.cc-product-fields > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
}

/* Hidden fields must leave ZERO gap (Bootstrap .hide / inline display:none) */
html body .cc-app-content .product_form .row.cc-product-fields > .hide,
html body #scrollable-container .product_form .row.cc-product-fields > .hide,
html body .cc-app-content .product_form .row.cc-product-fields > .clearfix,
html body #scrollable-container .product_form .row.cc-product-fields > .clearfix {
  display: none !important;
}

/* ���� ����� � ���� ���� ��� (���� full-width ��� ����) */
html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col {
  grid-column: auto;
}

/* Compact spacing inside product fields only */
html body .cc-app-content .product_form .row.cc-product-fields > [class*="col-"] > .form-group,
html body #scrollable-container .product_form .row.cc-product-fields > [class*="col-"] > .form-group {
  margin-bottom: 0 !important;
}

html body .cc-app-content .product_form .row.cc-product-fields .form-group > label,
html body #scrollable-container .product_form .row.cc-product-fields .form-group > label,
html body .cc-app-content .product_form .row.cc-product-fields .form-group > label[for],
html body #scrollable-container .product_form .row.cc-product-fields .form-group > label[for] {
  margin-bottom: 4px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

html body .cc-app-content .product_form .row.cc-product-fields .form-control,
html body #scrollable-container .product_form .row.cc-product-fields .form-control,
html body .cc-app-content .product_form .row.cc-product-fields .select2-container .select2-selection--single,
html body #scrollable-container .product_form .row.cc-product-fields .select2-container .select2-selection--single {
  min-height: 40px !important;
  height: 40px !important;
}

html body .cc-app-content .product_form .row.cc-product-fields .select2-container .select2-selection--multiple,
html body #scrollable-container .product_form .row.cc-product-fields .select2-container .select2-selection--multiple {
  min-height: 40px !important;
  height: auto !important;
}

html body .cc-app-content .product_form .row.cc-product-fields .input-group,
html body #scrollable-container .product_form .row.cc-product-fields .input-group {
  min-height: 40px !important;
}

html body .cc-app-content .product_form .row.cc-product-fields .form-group .help-block,
html body #scrollable-container .product_form .row.cc-product-fields .form-group .help-block {
  margin: 4px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

/* Compact manage-stock card */
html body .cc-app-content .product_form .row.cc-product-fields .form-group.cc-manage-stock,
html body #scrollable-container .product_form .row.cc-product-fields .form-group.cc-manage-stock,
html body .cc-app-content .product_form .row.cc-product-fields .form-group:has(#enable_stock),
html body #scrollable-container .product_form .row.cc-product-fields .form-group:has(#enable_stock) {
  padding: 10px 12px !important;
  margin-top: 24px !important; /* ������ �� ��� ������� ��� ���� ���� ������� */
  margin-bottom: 0 !important;
  min-height: 40px !important;
}

html body .cc-app-content .product_form .row.cc-product-fields > [class*="col-"]:has(#enable_stock),
html body #scrollable-container .product_form .row.cc-product-fields > [class*="col-"]:has(#enable_stock) {
  align-self: start !important;
  padding-top: 0 !important;
}

html body .cc-app-content .product_form .row.cc-product-fields .form-group.cc-manage-stock > label,
html body .cc-app-content .product_form .row.cc-product-fields .form-group:has(#enable_stock) > label {
  margin-bottom: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ������ ������ ����� ������� � ����� ������ ��������� ����� ����� */
html body .cc-app-content .form-group.cc-manage-stock > .cc-stock-help-note,
html body #scrollable-container .form-group.cc-manage-stock > .cc-stock-help-note,
html body .cc-app-content .form-group:has(#enable_stock) > .cc-stock-help-note,
html body #scrollable-container .form-group:has(#enable_stock) > .cc-stock-help-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-inline-start: 8px !important;
  color: #F59E0B !important;
  font-size: 15px !important;
  cursor: help !important;
  vertical-align: middle !important;
}

html body .cc-app-content .form-group.cc-manage-stock > .cc-stock-help-note:hover,
html body #scrollable-container .form-group.cc-manage-stock > .cc-stock-help-note:hover {
  color: #D97706 !important;
}

/* ����� �� �������� ������ ��� ����� ������� */
html body .cc-app-content .form-group:has(#enable_stock) > .help-block,
html body #scrollable-container .form-group:has(#enable_stock) > .help-block,
html body .modal-body .form-group:has(#enable_stock) > .help-block {
  display: none !important;
}

/* Compact product image dropzone � 2-line height */
html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone {
  height: 72px !important;
  min-height: 72px !important;
  max-width: 100%;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-selected,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-selected {
  max-width: 100%;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::before,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::before {
  font-size: 28px !important;
  margin-bottom: 6px !important;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small {
  padding: 8px 12px !important;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small > .help-block,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small > .help-block {
  font-size: 10px !important;
  margin-bottom: 4px !important;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::after,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::after {
  font-size: 11px !important;
}

@media (max-width: 1199px) {
  html body .cc-app-content .product_form .row.cc-product-fields,
  html body #scrollable-container .product_form .row.cc-product-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  html body .cc-app-content .product_form .row.cc-product-fields,
  html body #scrollable-container .product_form .row.cc-product-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
}

@media (max-width: 767px) {
  html body .cc-app-content .product_form .row.cc-product-fields,
  html body #scrollable-container .product_form .row.cc-product-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone,
  html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone,
  html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-selected,
  html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-selected {
    max-width: 100%;
    width: 100%;
  }
}

html body .cc-app-content #pos_table .row.cc-product-fields,
html body.lockscreen .cc-app-content .row.cc-product-fields {
  display: block !important;
}

/* ---------- Form section cards / boxes ---------- */
html body .cc-app-content .box:not(.pos-box),
html body #scrollable-container .box:not(.pos-box),
html body .cc-app-content .box-primary,
html body #scrollable-container .box-primary,
html body .cc-app-content .box-success,
html body #scrollable-container .box-success,
html body .cc-app-content .box-info,
html body #scrollable-container .box-info,
html body .cc-app-content .box-warning,
html body #scrollable-container .box-warning,
html body .cc-app-content .box-danger,
html body #scrollable-container .box-danger {
  background: #fff !important;
  border: 1px solid #E5ECF3 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html body .cc-app-content .box > .box-header,
html body #scrollable-container .box > .box-header,
html body .cc-app-content .box-primary > .box-header,
html body #scrollable-container .box-primary > .box-header {
  border-bottom: 1px solid #EEF2F7 !important;
  border-radius: 14px 14px 0 0 !important;
  background: transparent !important;
}

html body .cc-app-content .box > .box-body,
html body #scrollable-container .box > .box-body,
html body .cc-app-content .box-primary > .box-body,
html body #scrollable-container .box-primary > .box-body {
  padding: 16px 18px 20px !important;
  background: #fff !important;
}

/* Widget component cards (Tailwind-based) */
html body .cc-app-content [class*="tw-rounded-xl"].tw-bg-white.tw-ring-1,
html body #scrollable-container [class*="tw-rounded-xl"].tw-bg-white.tw-ring-1,
html body .cc-app-content .box-primary.tw-rounded-xl,
html body #scrollable-container .box-primary.tw-rounded-xl,
html body .cc-app-content .tw-rounded-xl.tw-ring-gray-200,
html body #scrollable-container .tw-rounded-xl.tw-ring-gray-200 {
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* ---------- Form groups & labels ---------- */
html body .cc-app-content .form-group:not(.pos-form-group),
html body #scrollable-container .form-group:not(.pos-form-group) {
  margin-bottom: 18px !important;
}

html body .cc-app-content .form-group > label,
html body #scrollable-container .form-group > label,
html body .cc-app-content .form-group label.control-label,
html body #scrollable-container .form-group label.control-label {
  display: inline-block;
  margin-bottom: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.35 !important;
}

html body .cc-app-content .form-group .help-block,
html body #scrollable-container .form-group .help-block {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #617385 !important;
  line-height: 1.4 !important;
}

/* ---------- Text / select / textarea ---------- */
html body .cc-app-content .form-control:not(.cc-sell-line-note),
html body #scrollable-container .form-control:not(.cc-sell-line-note),
html body .cc-app-content input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body #scrollable-container input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body .cc-app-content select.form-control,
html body #scrollable-container select.form-control,
html body .cc-app-content textarea.form-control:not(.cc-sell-line-note),
html body #scrollable-container textarea.form-control:not(.cc-sell-line-note) {
  min-height: 40px !important;
  height: 40px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0F172A !important;
  background-color: #fff !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

html body .cc-app-content textarea.form-control:not(.cc-sell-line-note),
html body #scrollable-container textarea.form-control:not(.cc-sell-line-note) {
  height: auto !important;
  min-height: 88px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  resize: vertical;
}

html body .cc-app-content .form-control::placeholder,
html body #scrollable-container .form-control::placeholder {
  color: #7A8B9C !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

html body .cc-app-content .form-control:hover:not(:disabled):not([readonly]),
html body #scrollable-container .form-control:hover:not(:disabled):not([readonly]) {
  border-color: #94A3B8 !important;
}

html body .cc-app-content .form-control:focus,
html body #scrollable-container .form-control:focus,
html body .cc-app-content input.form-control:focus,
html body #scrollable-container input.form-control:focus,
html body .cc-app-content select.form-control:focus,
html body #scrollable-container select.form-control:focus,
html body .cc-app-content textarea.form-control:focus,
html body #scrollable-container textarea.form-control:focus {
  border-color: #2563EB !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  background-color: #fff !important;
}

html body .cc-app-content .form-control:disabled,
html body #scrollable-container .form-control:disabled,
html body .cc-app-content .form-control[readonly],
html body #scrollable-container .form-control[readonly] {
  background-color: #F8FAFC !important;
  color: #64748B !important;
  opacity: 1 !important;
}

html body .cc-app-content .multi-input .form-control,
html body #scrollable-container .multi-input .form-control {
  border-radius: 10px !important;
}

/* ---------- Select2 (visual shell only) ---------- */
html body .cc-app-content .select2-container .select2-selection--single,
html body #scrollable-container .select2-container .select2-selection--single {
  min-height: 40px !important;
  height: 40px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

html body .cc-app-content .select2-container--default .select2-selection--single .select2-selection__rendered,
html body #scrollable-container .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding-inline-start: 14px !important;
  padding-inline-end: 28px !important;
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body .cc-app-content .select2-container--default .select2-selection--single .select2-selection__arrow,
html body #scrollable-container .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  width: 28px !important;
}

html body .cc-app-content .select2-container .select2-selection--multiple,
html body #scrollable-container .select2-container .select2-selection--multiple {
  min-height: 40px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  padding: 4px 6px !important;
}

html body .cc-app-content .select2-container--default.select2-container--focus .select2-selection--single,
html body #scrollable-container .select2-container--default.select2-container--focus .select2-selection--single,
html body .cc-app-content .select2-container--default.select2-container--open .select2-selection--single,
html body #scrollable-container .select2-container--default.select2-container--open .select2-selection--single,
html body .cc-app-content .select2-container--default.select2-container--focus .select2-selection--multiple,
html body #scrollable-container .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .cc-app-content .select2-container--default.select2-container--open .select2-selection--multiple,
html body #scrollable-container .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

html body .cc-app-content .select2-container--default .select2-selection--multiple .select2-selection__choice,
html body #scrollable-container .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 8px !important;
  border-color: #E2E8F0 !important;
  background: #F1F5F9 !important;
  color: #334155 !important;
  font-weight: 500 !important;
}

html body .select2-container--open .select2-dropdown,
html body .select2-dropdown {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
  overflow: hidden;
}

html body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #2563EB !important;
}

/* ---------- Input groups (+ quick-add) ---------- */
html body .cc-app-content .input-group,
html body #scrollable-container .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  border-radius: 10px !important;
}

html body .cc-app-content .input-group .form-control,
html body #scrollable-container .input-group .form-control,
html body .cc-app-content .input-group .select2-container,
html body #scrollable-container .input-group .select2-container {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
}

/* Default: trailing btn pattern (input then button) */
html body .cc-app-content .input-group .form-control,
html body #scrollable-container .input-group .form-control {
  border-radius: 10px 0 0 10px !important;
}

html[dir="rtl"] body .cc-app-content .input-group .form-control,
html[dir="rtl"] body #scrollable-container .input-group .form-control {
  border-radius: 0 10px 10px 0 !important;
}

html body .cc-app-content .input-group .select2-container .select2-selection--single,
html body #scrollable-container .input-group .select2-container .select2-selection--single {
  border-radius: 10px 0 0 10px !important;
}

html[dir="rtl"] body .cc-app-content .input-group .select2-container .select2-selection--single,
html[dir="rtl"] body #scrollable-container .input-group .select2-container .select2-selection--single {
  border-radius: 0 10px 10px 0 !important;
}

html body .cc-app-content .input-group-btn,
html body #scrollable-container .input-group-btn {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

html body .cc-app-content .input-group-btn > .btn,
html body #scrollable-container .input-group-btn > .btn,
html body .cc-app-content .input-group .btn-modal,
html body #scrollable-container .input-group .btn-modal,
html body .cc-app-content .input-group-btn .btn-default,
html body #scrollable-container .input-group-btn .btn-default,
html body .cc-app-content .input-group-btn .btn-flat,
html body #scrollable-container .input-group-btn .btn-flat {
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #EFF6FF !important;
  background-image: none !important;
  border: 1.5px solid #BFDBFE !important;
  border-radius: 0 10px 10px 0 !important;
  color: #2563EB !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

html[dir="rtl"] body .cc-app-content .input-group-btn > .btn,
html[dir="rtl"] body #scrollable-container .input-group-btn > .btn,
html[dir="rtl"] body .cc-app-content .input-group .btn-modal,
html[dir="rtl"] body #scrollable-container .input-group .btn-modal,
html[dir="rtl"] body .cc-app-content .input-group-btn .btn-default,
html[dir="rtl"] body #scrollable-container .input-group-btn .btn-default {
  border-radius: 10px 0 0 10px !important;
}

html body .cc-app-content .input-group-btn > .btn:hover,
html body #scrollable-container .input-group-btn > .btn:hover,
html body .cc-app-content .input-group .btn-modal:hover,
html body #scrollable-container .input-group .btn-modal:hover {
  background: #DBEAFE !important;
  border-color: #93C5FD !important;
  color: #1D4ED8 !important;
}

html body .cc-app-content .input-group-btn > .btn .fa,
html body #scrollable-container .input-group-btn > .btn .fa,
html body .cc-app-content .input-group-btn > .btn .text-primary,
html body #scrollable-container .input-group-btn > .btn .text-primary {
  color: #2563EB !important;
}

/* Icon addons (calendar / search / phone�): flush with the field � skip POS/cashier */
html body:not(.lockscreen) .cc-app-content .input-group-addon,
html body:not(.lockscreen) #scrollable-container .input-group-addon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1.5px solid #D1D5DB !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

html body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:first-child,
html body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:first-child {
  border-radius: 10px 0 0 10px !important;
  border-right-width: 0 !important;
}

html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:first-child,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:first-child {
  border-radius: 0 10px 10px 0 !important;
  border-right-width: 1.5px !important;
  border-left-width: 0 !important;
}

html body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:last-child,
html body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:last-child {
  border-radius: 0 10px 10px 0 !important;
  border-left-width: 0 !important;
}

html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:last-child,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:last-child {
  border-radius: 10px 0 0 10px !important;
  border-left-width: 1.5px !important;
  border-right-width: 0 !important;
}

/* Leading addon + input: connect radii (overrides trailing-btn defaults) */
html body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:first-child + .form-control,
html body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:first-child + .form-control {
  border-radius: 0 10px 10px 0 !important;
}

html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:first-child + .form-control,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:first-child + .form-control {
  border-radius: 10px 0 0 10px !important;
}

/* Select2 inside input-group: join flush with icon addons (no gap / no full pill radius) */
html body:not(.lockscreen) .cc-app-content .input-group > .select2-container,
html body:not(.lockscreen) #scrollable-container .input-group > .select2-container {
  margin: 0 !important;
  display: block !important;
}
html body:not(.lockscreen) .cc-app-content .input-group > select.select2-hidden-accessible,
html body:not(.lockscreen) #scrollable-container .input-group > select.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
}
html body:not(.lockscreen) .cc-app-content .input-group > .select2-container .select2-selection--single,
html body:not(.lockscreen) #scrollable-container .input-group > .select2-container .select2-selection--single {
  border-radius: 0 !important;
}
/* Leading addon + Select2 (+ optional trailing addon/btn) */
html body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection--single,
html body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection--single {
  border-radius: 0 !important;
}
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection--single,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection--single {
  border-right-width: 1.5px !important;
  border-left-width: 1.5px !important;
}
/* Only trailing button after Select2 (no leading addon): round start side */
html body:not(.lockscreen) .cc-app-content .input-group > .select2-container:first-child .select2-selection--single,
html body:not(.lockscreen) #scrollable-container .input-group > .select2-container:first-child .select2-selection--single {
  border-radius: 10px 0 0 10px !important;
}
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group > .select2-container:first-child .select2-selection--single,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group > .select2-container:first-child .select2-selection--single {
  border-radius: 0 10px 10px 0 !important;
}

/* addon + input + trailing btn: middle field stays square */
html body:not(.lockscreen) .cc-app-content .input-group > .input-group-addon:first-child + .form-control:not(:last-child),
html body:not(.lockscreen) #scrollable-container .input-group > .input-group-addon:first-child + .form-control:not(:last-child) {
  border-radius: 0 !important;
}

/* ---------- Contact add/edit modal — same flush input-group as sell (فرع) ---------- */
html body #cc_global_contact_modal .input-group,
html body .contact_modal .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  float: none !important;
}
html body #cc_global_contact_modal .input-group-addon,
html body .contact_modal .input-group-addon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1.5px solid #D1D5DB !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  border-radius: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
html body #cc_global_contact_modal .input-group > .input-group-addon:first-child,
html body .contact_modal .input-group > .input-group-addon:first-child {
  border-radius: 10px 0 0 10px !important;
  border-right-width: 0 !important;
}
html[dir="rtl"] body #cc_global_contact_modal .input-group > .input-group-addon:first-child,
html[dir="rtl"] body .contact_modal .input-group > .input-group-addon:first-child {
  border-radius: 0 10px 10px 0 !important;
  border-right-width: 1.5px !important;
  border-left-width: 0 !important;
}
html body #cc_global_contact_modal .input-group > .input-group-addon:last-child,
html body .contact_modal .input-group > .input-group-addon:last-child {
  border-radius: 0 10px 10px 0 !important;
  border-left-width: 0 !important;
}
html[dir="rtl"] body #cc_global_contact_modal .input-group > .input-group-addon:last-child,
html[dir="rtl"] body .contact_modal .input-group > .input-group-addon:last-child {
  border-radius: 10px 0 0 10px !important;
  border-left-width: 1.5px !important;
  border-right-width: 0 !important;
}
html body #cc_global_contact_modal .input-group > .form-control,
html body .contact_modal .input-group > .form-control,
html body #cc_global_contact_modal .input-group > select.form-control,
html body .contact_modal .input-group > select.form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  float: none !important;
}
html body #cc_global_contact_modal .input-group > .input-group-addon:first-child + .form-control,
html body .contact_modal .input-group > .input-group-addon:first-child + .form-control,
html body #cc_global_contact_modal .input-group > .input-group-addon:first-child + select.form-control,
html body .contact_modal .input-group > .input-group-addon:first-child + select.form-control {
  border-radius: 0 10px 10px 0 !important;
}
html[dir="rtl"] body #cc_global_contact_modal .input-group > .input-group-addon:first-child + .form-control,
html[dir="rtl"] body .contact_modal .input-group > .input-group-addon:first-child + .form-control,
html[dir="rtl"] body #cc_global_contact_modal .input-group > .input-group-addon:first-child + select.form-control,
html[dir="rtl"] body .contact_modal .input-group > .input-group-addon:first-child + select.form-control {
  border-radius: 10px 0 0 10px !important;
}
html body #cc_global_contact_modal .input-group > .select2-container .select2-selection--single,
html body .contact_modal .input-group > .select2-container .select2-selection--single {
  min-height: 40px !important;
  height: 40px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[dir="rtl"] body #cc_global_contact_modal .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection--single,
html[dir="rtl"] body .contact_modal .input-group > .input-group-addon:first-child ~ .select2-container .select2-selection--single {
  border-radius: 10px 0 0 10px !important;
}

/* ---------- Checkbox / iCheck � safe visual only ---------- */
html body .cc-app-content .icheckbox_square-blue,
html body #scrollable-container .icheckbox_square-blue,
html body .cc-app-content .iradio_square-blue,
html body #scrollable-container .iradio_square-blue {
  margin-inline-end: 8px !important;
  vertical-align: middle !important;
}

html body .cc-app-content .form-group label > strong,
html body #scrollable-container .form-group label > strong {
  color: #334155;
  vertical-align: middle;
}

/* ---------- File upload � soft frame (generic; not product fileinput) ---------- */
html body .cc-app-content input[type="file"].form-control:not(#upload_image),
html body #scrollable-container input[type="file"].form-control:not(#upload_image),
html body .cc-app-content input[type="file"].upload-element:not(#upload_image),
html body #scrollable-container input[type="file"].upload-element:not(#upload_image) {
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 14px !important;
  border: 1.5px dashed #93C5FD !important;
  border-radius: 10px !important;
  background: #F8FBFF !important;
  color: #334155 !important;
  box-shadow: none !important;
  cursor: pointer;
}

html body .cc-app-content input[type="file"].upload-element:not(#upload_image):hover,
html body #scrollable-container input[type="file"].upload-element:not(#upload_image):hover {
  border-color: #2563EB !important;
  background: #EFF6FF !important;
}

html body .cc-app-content input[type="file"].upload-element:not(#upload_image):focus,
html body #scrollable-container input[type="file"].upload-element:not(#upload_image):focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* =========================================================
   Product image (#upload_image) � native dropzone
   Full-area click via <label class="cc-image-dropzone-hit" for="upload_image">
   (native label association � works in all browsers)
   ========================================================= */
html body .cc-app-content .form-group:has(#upload_image),
html body #scrollable-container .form-group:has(#upload_image),
html body .modal-body .form-group:has(#upload_image) {
  position: relative !important;
}

html body .cc-app-content .form-group:has(#upload_image) > label[for="upload_image"],
html body .cc-app-content .form-group:has(#upload_image) > label[for="image"],
html body #scrollable-container .form-group:has(#upload_image) > label[for="upload_image"],
html body #scrollable-container .form-group:has(#upload_image) > label[for="image"] {
  margin-bottom: 8px !important;
  color: #0F2A5F !important;
}

html body .cc-app-content .form-group:has(#upload_image) > label[for="upload_image"]::before,
html body .cc-app-content .form-group:has(#upload_image) > label[for="image"]::before,
html body #scrollable-container .form-group:has(#upload_image) > label[for="upload_image"]::before,
html body #scrollable-container .form-group:has(#upload_image) > label[for="image"]::before {
  content: "\f03e";
  color: #2563EB !important;
}

html body .cc-app-content .cc-image-dropzone,
html body #scrollable-container .cc-image-dropzone,
html body .modal-body .cc-image-dropzone {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 14px !important;
  background: #F8FAFC !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body .cc-app-content .cc-image-dropzone:hover,
html body #scrollable-container .cc-image-dropzone:hover,
html body .cc-app-content .cc-image-dropzone.is-dragover,
html body #scrollable-container .cc-image-dropzone.is-dragover {
  border-color: #93C5FD !important;
  background: #F0F7FF !important;
}

html body .cc-app-content .cc-image-dropzone.is-dragover,
html body #scrollable-container .cc-image-dropzone.is-dragover {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* During drag, let drop events hit the zone (not blocked by hit label) */
html body .cc-app-content .cc-image-dropzone.is-dragover > .cc-image-dropzone-hit,
html body #scrollable-container .cc-image-dropzone.is-dragover > .cc-image-dropzone-hit {
  pointer-events: none !important;
}

/* Invisible full-area hit target � opens file dialog via for="upload_image" */
html body .cc-app-content .cc-image-dropzone > .cc-image-dropzone-hit,
html body #scrollable-container .cc-image-dropzone > .cc-image-dropzone-hit,
html body .modal-body .cc-image-dropzone > .cc-image-dropzone-hit {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 20 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  opacity: 1 !important;
}

html body .cc-app-content .cc-image-dropzone > .cc-image-dropzone-hit::before,
html body .cc-app-content .cc-image-dropzone > .cc-image-dropzone-hit::after {
  content: none !important;
  display: none !important;
}

/* Hide native file control (no visible "����") � label opens it */
html body .cc-app-content .cc-image-dropzone > #upload_image,
html body #scrollable-container .cc-image-dropzone > #upload_image,
html body .modal-body .cc-image-dropzone > #upload_image,
html body .cc-app-content .cc-image-dropzone #upload_image,
html body #scrollable-container .cc-image-dropzone #upload_image {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  font-size: 0 !important;
}

html body .cc-app-content .cc-image-dropzone #upload_image::file-selector-button,
html body .cc-app-content .cc-image-dropzone #upload_image::-webkit-file-upload-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Visual content under the hit label */
html body .cc-app-content .cc-image-dropzone > small,
html body #scrollable-container .cc-image-dropzone > small,
html body .modal-body .cc-image-dropzone > small {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .cc-app-content .cc-image-dropzone > small::before,
html body #scrollable-container .cc-image-dropzone > small::before {
  content: "\f382" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: block !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: #2563EB !important;
  margin: 0 auto 12px !important;
  -webkit-font-smoothing: antialiased;
}

html body .cc-app-content .cc-image-dropzone > small > .help-block,
html body #scrollable-container .cc-image-dropzone > small > .help-block {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #94A3B8 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

html body .cc-app-content .cc-image-dropzone > small > .help-block.text-danger,
html body #scrollable-container .cc-image-dropzone > small > .help-block.text-danger {
  color: #94A3B8 !important;
}

html body .cc-app-content .cc-image-dropzone > small::after,
html body #scrollable-container .cc-image-dropzone > small::after {
  /* اختر صورة او قم بسحبها */
  content: "\0627\062E\062A\0631\00a0\0635\0648\0631\0629\00a0\0627\0648\00a0\0642\0645\00a0\0628\0633\062D\0628\0647\0627" !important;
  display: block !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  white-space: normal !important;
  color: #334155 !important;
}

/* Selected file name + remove */
html body .cc-app-content .cc-image-selected,
html body #scrollable-container .cc-image-selected,
html body .modal-body .cc-image-selected {
  display: none !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

html body .cc-app-content .cc-image-selected.is-visible,
html body #scrollable-container .cc-image-selected.is-visible,
html body .modal-body .cc-image-selected.is-visible,
html body .cc-app-content .cc-image-selected:not([hidden]),
html body #scrollable-container .cc-image-selected:not([hidden]) {
  display: flex !important;
}

html body .cc-app-content .cc-image-selected[hidden],
html body #scrollable-container .cc-image-selected[hidden] {
  display: none !important;
}

html body .cc-app-content .cc-image-selected-icon,
html body #scrollable-container .cc-image-selected-icon {
  flex: 0 0 auto;
  color: #2563EB !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body .cc-app-content .cc-image-selected-name,
html body #scrollable-container .cc-image-selected-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: right !important;
  direction: rtl;
}

html body .cc-app-content .cc-image-selected-remove,
html body #scrollable-container .cc-image-selected-remove {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid #FECACA !important;
  border-radius: 10px !important;
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html body .cc-app-content .cc-image-selected-remove:hover,
html body #scrollable-container .cc-image-selected-remove:hover {
  background: #FEE2E2 !important;
  border-color: #F87171 !important;
  color: #B91C1C !important;
}

html body .cc-app-content .cc-image-dropzone.has-file,
html body #scrollable-container .cc-image-dropzone.has-file {
  border-color: #93C5FD !important;
  background: #F8FBFF !important;
}

/* Hide leftover fileinput chrome if old JS wrapped the field */
html body .cc-app-content .form-group:has(#upload_image) .file-caption,
html body .cc-app-content .form-group:has(#upload_image) .file-caption-name,
html body .cc-app-content .form-group:has(#upload_image) .fileinput-remove,
html body .cc-app-content .form-group:has(#upload_image) .fileinput-remove-button,
html body .cc-app-content .form-group:has(#upload_image) .fileinput-cancel-button,
html body .cc-app-content .form-group:has(#upload_image) .fileinput-upload-button,
html body .cc-app-content .form-group:has(#upload_image) .file-preview,
html body .cc-app-content .form-group:has(#upload_image) .file-drop-zone,
html body .cc-app-content .form-group:has(#upload_image) .kv-upload-progress {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Datepicker / touchspin ---------- */
html body .cc-app-content .input-group.date .form-control,
html body #scrollable-container .input-group.date .form-control,
html body .cc-app-content .bootstrap-touchspin .form-control,
html body #scrollable-container .bootstrap-touchspin .form-control {
  border-radius: 10px !important;
}

html body .cc-app-content .bootstrap-touchspin .btn,
html body #scrollable-container .bootstrap-touchspin .btn {
  border-radius: 8px !important;
}

/* ---------- Validation ---------- */
html body .cc-app-content .has-error .form-control,
html body #scrollable-container .has-error .form-control,
html body .cc-app-content .form-control.error,
html body #scrollable-container .form-control.error,
html body .cc-app-content .form-group.has-error .select2-selection--single,
html body #scrollable-container .form-group.has-error .select2-selection--single {
  border-color: #F87171 !important;
}

html body .cc-app-content .has-error .form-control:focus,
html body #scrollable-container .has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
}

html body .cc-app-content label.error,
html body #scrollable-container label.error,
html body .modal-body label.error,
html body form label.error,
html body.lockscreen label.error,
html body label.error,
html body #res_waiter_id-error,
html body .cc-pos-option-item label.error {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  display: block !important;
}

/* ---------- Modal forms ---------- */
html body .modal-content {
  border-radius: 14px !important;
  border: 1px solid #E5ECF3 !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12) !important;
}

/*
 * Mobile: keep modals ABOVE system header / bottom-nav.
 * Header dropdowns use z-index up to ~1300; Bootstrap modal is only 1050.
 */
@media (max-width: 1023px) {
  body.modal-open .modal-backdrop {
    z-index: 2000 !important;
  }
  body.modal-open .modal {
    z-index: 2010 !important;
  }
  body.modal-open .main-header,
  body.modal-open .main-header .navbar,
  body.modal-open .main-header .navbar-custom-menu,
  body.modal-open .cc-bottom-nav-dock,
  body.modal-open .cc-bottom-nav {
    z-index: 1000 !important;
  }
  body.modal-open .select2-container--open,
  body.modal-open .select2-container--open .select2-dropdown {
    z-index: 2025 !important;
  }
}

/* Modal header � brand underline + modern title icon */
html body .modal:not(.cc-sku-scan-modal) .modal-header {
  border-bottom: 2px solid #2B58FB !important;
  padding: 14px 18px !important;
  position: relative !important;
}
html body .modal:not(.cc-sku-scan-modal) .modal-header .close {
  opacity: 0.55 !important;
}
html body .modal:not(.cc-sku-scan-modal) .modal-header .close:hover {
  opacity: 0.9 !important;
}
html body .modal:not(.cc-sku-scan-modal) .modal-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.35 !important;
}
html body .modal:not(.cc-sku-scan-modal) .modal-title::before {
  content: "\f055" !important; /* fa-plus-circle � default create look */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 1.05em !important;
  line-height: 1 !important;
  color: #2B58FB !important;
  background: linear-gradient(135deg, #2B58FB 0%, #00AFC9 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  flex-shrink: 0 !important;
}
/* Edit forms � pencil icon */
html body .modal:not(.cc-sku-scan-modal) form[id*="_edit_form"] .modal-title::before,
html body .modal:not(.cc-sku-scan-modal) form[id*="edit_"] .modal-title::before,
html body .modal:not(.cc-sku-scan-modal) form[id$="_edit"] .modal-title::before {
  content: "\f044" !important; /* fa-edit */
  color: #00AFC9 !important;
  background: linear-gradient(135deg, #00AFC9 0%, #2B58FB 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Modal footer � centered Save/Close (create + edit) */
html body .modal:not(.cc-sku-scan-modal) .modal-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  text-align: center !important;
  border-top: 1px solid #E5ECF3 !important;
  padding: 14px 18px 16px !important;
  background: #FAFBFC !important;
  border-radius: 0 0 14px 14px !important;
}
html body .modal:not(.cc-sku-scan-modal) .modal-footer .tw-dw-btn,
html body .modal:not(.cc-sku-scan-modal) .modal-footer .btn {
  float: none !important;
  margin: 0 !important;
  min-width: 110px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Save / Update � brand gradient */
html body .modal:not(.cc-sku-scan-modal) .modal-footer .tw-dw-btn-primary,
html body .modal:not(.cc-sku-scan-modal) .modal-footer button[type="submit"].tw-dw-btn-primary,
html body .modal:not(.cc-sku-scan-modal) .modal-footer .btn-primary {
  background: linear-gradient(90deg, #2B58FB 0%, #14B8A6 48%, #22C55E 100%) !important;
  background-image: linear-gradient(90deg, #2B58FB 0%, #14B8A6 48%, #22C55E 100%) !important;
  background-color: #2B58FB !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(43, 88, 251, 0.28) !important;
}
html body .modal:not(.cc-sku-scan-modal) .modal-footer .tw-dw-btn-primary:hover,
html body .modal:not(.cc-sku-scan-modal) .modal-footer .btn-primary:hover {
  background: linear-gradient(90deg, #1D4ED8 0%, #0D9488 48%, #16A34A 100%) !important;
  background-image: linear-gradient(90deg, #1D4ED8 0%, #0D9488 48%, #16A34A 100%) !important;
  color: #fff !important;
}
/* Close � soft slate (not harsh black) */
html body .modal:not(.cc-sku-scan-modal) .modal-footer .tw-dw-btn-neutral,
html body .modal:not(.cc-sku-scan-modal) .modal-footer .btn-default,
html body .modal:not(.cc-sku-scan-modal) .modal-footer button[data-dismiss="modal"] {
  background: #F1F5F9 !important;
  background-image: none !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #334155 !important;
  box-shadow: none !important;
}
html body .modal:not(.cc-sku-scan-modal) .modal-footer .tw-dw-btn-neutral:hover,
html body .modal:not(.cc-sku-scan-modal) .modal-footer button[data-dismiss="modal"]:hover {
  background: #E2E8F0 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

@media (max-width: 767px) {
  html body .modal:not(.cc-sku-scan-modal) .modal-header {
    padding: 12px 14px !important;
  }
  html body .modal:not(.cc-sku-scan-modal) .modal-title {
    font-size: 15px !important;
  }
  html body .modal:not(.cc-sku-scan-modal) .modal-footer {
    padding: 12px 14px 14px !important;
    gap: 10px !important;
  }
  html body .modal:not(.cc-sku-scan-modal) .modal-footer .tw-dw-btn,
  html body .modal:not(.cc-sku-scan-modal) .modal-footer .btn {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    max-width: 180px !important;
  }
}

html body .modal-body .form-control,
html body .modal-body select.form-control,
html body .modal-body textarea.form-control {
  min-height: 40px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html body .modal-body .form-control:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Warranty duration: number + type with clear gap */
html body .modal-body .cc-duration-fields {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  clear: both !important;
}
html body .modal-body .cc-duration-fields > .form-control,
html body .modal-body .cc-duration-fields > select.form-control {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
html body .modal-body .cc-duration-fields > input.form-control,
html body .modal-body .cc-duration-fields > #duration {
  flex: 0 0 38% !important;
  width: 38% !important;
}
html body .modal-body .cc-duration-fields > select.form-control,
html body .modal-body .cc-duration-fields > #duration_type {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

html body .modal-body .select2-container .select2-selection--single {
  min-height: 40px !important;
  height: 40px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
}

html body .modal-body .form-group > label {
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 7px !important;
}

/* ---------- Exclusions: POS / print / PDF / table inline ---------- */
html body .cc-app-content #pos_table .form-control,
html body #scrollable-container #pos_table .form-control,
html body .cc-app-content #pos_table input,
html body #scrollable-container #pos_table input,
html body .cc-app-content #pos_table select,
html body #scrollable-container #pos_table select,
html body .cc-app-content #pos_table .select2-selection--single,
html body #scrollable-container #pos_table .select2-selection--single,
html body .cc-app-content table.table-pdf .form-control,
html body #scrollable-container table.table-pdf .form-control,
html body .cc-app-content .table-slim .form-control,
html body #scrollable-container .table-slim .form-control,
html body .cc-app-content table.dataTable td .form-control,
html body #scrollable-container table.dataTable td .form-control,
html body .cc-app-content table.table td .form-control,
html body #scrollable-container table.table td .form-control,
html body.lockscreen .cc-app-content .form-control,
html body.lockscreen #scrollable-container .form-control,
html body.lockscreen .cc-app-content input.form-control,
html body.lockscreen .cc-app-content select.form-control,
html body.lockscreen .cc-app-content .select2-container .select2-selection--single {
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 12px !important;
  border: 1px solid #d2d6de !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

html body.lockscreen .cc-app-content .box,
html body.lockscreen .cc-app-content .box-primary {
  border-radius: 3px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #d2d6de !important;
}

html body .cc-app-content #pos_table .input-group-btn > .btn,
html body #scrollable-container #pos_table .input-group-btn > .btn,
html body.lockscreen .cc-app-content .input-group-btn > .btn {
  min-width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: #fff !important;
  border: 1px solid #d2d6de !important;
  color: inherit !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  html body .cc-app-content .box > .box-body,
  html body #scrollable-container .box > .box-body,
  html body .cc-app-content .box-primary > .box-body,
  html body #scrollable-container .box-primary > .box-body {
    padding: 14px 14px 16px !important;
  }

  html body .cc-app-content .form-group:not(.pos-form-group),
  html body #scrollable-container .form-group:not(.pos-form-group) {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 767px) {
  html body .cc-app-content .form-group:not(.pos-form-group),
  html body #scrollable-container .form-group:not(.pos-form-group) {
    margin-bottom: 18px !important;
  }

  html body .cc-app-content .form-control,
  html body #scrollable-container .form-control,
  html body .cc-app-content input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html body #scrollable-container input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html body .cc-app-content select.form-control,
  html body #scrollable-container select.form-control,
  html body .cc-app-content textarea.form-control,
  html body #scrollable-container textarea.form-control {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  html body .cc-app-content .select2-container,
  html body #scrollable-container .select2-container {
    width: 100% !important;
  }

  html body .cc-app-content .select2-container .select2-selection--single,
  html body #scrollable-container .select2-container .select2-selection--single {
    min-height: 44px !important;
    height: 44px !important;
  }

  html body .cc-app-content .select2-container--default .select2-selection--single .select2-selection__rendered,
  html body #scrollable-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
  }

  html body .cc-app-content .input-group-btn > .btn,
  html body #scrollable-container .input-group-btn > .btn,
  html body .cc-app-content .input-group .btn-modal,
  html body #scrollable-container .input-group .btn-modal {
    min-width: 44px !important;
    height: 44px !important;
  }

  html body .cc-app-content .form-control:not(textarea),
  html body #scrollable-container .form-control:not(textarea),
  html body .cc-app-content input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  html body #scrollable-container input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
    min-height: 44px !important;
    height: 44px !important;
  }

  html body .cc-app-content .box > .box-body,
  html body #scrollable-container .box > .box-body,
  html body .cc-app-content .box-primary > .box-body,
  html body #scrollable-container .box-primary > .box-body {
    padding: 12px 12px 14px !important;
  }
}

/* =========================================================
   Label icons (visual only via ::before � no HTML / logic changes)
   FA5 solid. In RTL ::before sits on the right of the label text.
   ========================================================= */
html body .cc-app-content .form-group > label[for],
html body #scrollable-container .form-group > label[for],
html body .modal-body .form-group > label[for] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap;
}

html body .cc-app-content .form-group > label[for]::before,
html body #scrollable-container .form-group > label[for]::before,
html body .modal-body .form-group > label[for]::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #0F2A5F !important;
  opacity: 0.92;
  flex-shrink: 0;
  speak: never;
  -webkit-font-smoothing: antialiased;
}

/* Product / item � name (tag) */
html body .cc-app-content .form-group > label[for="name"]::before,
html body #scrollable-container .form-group > label[for="name"]::before,
html body .modal-body .form-group > label[for="name"]::before {
  content: "\f02b"; /* fa-tag */
}

/* SKU / barcode */
html body .cc-app-content .form-group > label[for="sku"]::before,
html body #scrollable-container .form-group > label[for="sku"]::before,
html body .modal-body .form-group > label[for="sku"]::before {
  content: "\f02a"; /* fa-barcode */
  color: #2563EB !important;
}

/* Barcode type � QR */
html body .cc-app-content .form-group > label[for="barcode_type"]::before,
html body #scrollable-container .form-group > label[for="barcode_type"]::before,
html body .modal-body .form-group > label[for="barcode_type"]::before {
  content: "\f029"; /* fa-qrcode */
}

/* Unit */
html body .cc-app-content .form-group > label[for="unit_id"]::before,
html body #scrollable-container .form-group > label[for="unit_id"]::before,
html body .modal-body .form-group > label[for="unit_id"]::before,
html body .cc-app-content .form-group > label[for="secondary_unit_id"]::before,
html body #scrollable-container .form-group > label[for="secondary_unit_id"]::before {
  content: "\f1b2"; /* fa-cube � matches reference */
}

/* Sub units */
html body .cc-app-content .form-group > label[for="sub_unit_ids"]::before,
html body #scrollable-container .form-group > label[for="sub_unit_ids"]::before {
  content: "\f1b3"; /* fa-cubes */
}

/* Brand */
html body .cc-app-content .form-group > label[for="brand_id"]::before,
html body #scrollable-container .form-group > label[for="brand_id"]::before,
html body .modal-body .form-group > label[for="brand_id"]::before {
  content: "\f02b"; /* fa-tag */
}

/* Category / subcategory */
html body .cc-app-content .form-group > label[for="category_id"]::before,
html body #scrollable-container .form-group > label[for="category_id"]::before,
html body .modal-body .form-group > label[for="category_id"]::before {
  content: "\f5fd"; /* fa-layer-group */
}
html body .cc-app-content .form-group > label[for="sub_category_id"]::before,
html body #scrollable-container .form-group > label[for="sub_category_id"]::before {
  content: "\f0c9"; /* fa-bars / layers feel */
}

/* Locations / branch */
html body .cc-app-content .form-group > label[for="product_locations"]::before,
html body #scrollable-container .form-group > label[for="product_locations"]::before,
html body .cc-app-content .form-group > label[for="location_id"]::before,
html body #scrollable-container .form-group > label[for="location_id"]::before {
  content: "\f3c5"; /* fa-map-marker-alt */
}

/* Product image */
html body .cc-app-content .form-group > label[for="image"]::before,
html body #scrollable-container .form-group > label[for="image"]::before,
html body .cc-app-content .form-group > label[for="upload_image"]::before,
html body #scrollable-container .form-group > label[for="upload_image"]::before {
  content: "\f03e"; /* fa-image */
}

/* Warranty */
html body .cc-app-content .form-group > label[for="warranty_id"]::before,
html body #scrollable-container .form-group > label[for="warranty_id"]::before {
  content: "\f3ed"; /* fa-shield-alt */
}

/* Tax / pricing */
html body .cc-app-content .form-group > label[for="tax"]::before,
html body #scrollable-container .form-group > label[for="tax"]::before {
  content: "\f295"; /* fa-percent */
}
html body .cc-app-content .form-group > label[for="tax_type"]::before,
html body #scrollable-container .form-group > label[for="tax_type"]::before {
  content: "\f15c"; /* fa-file-alt */
}
html body .cc-app-content .form-group > label[for="type"]::before,
html body #scrollable-container .form-group > label[for="type"]::before {
  content: "\f1b3"; /* fa-cubes */
}

/* Expiry */
html body .cc-app-content .form-group > label[for="expiry_period"]::before,
html body #scrollable-container .form-group > label[for="expiry_period"]::before {
  content: "\f073"; /* fa-calendar-alt */
}

/* Common contact fields */
html body .cc-app-content .form-group > label[for="mobile"]::before,
html body #scrollable-container .form-group > label[for="mobile"]::before,
html body .cc-app-content .form-group > label[for="contact_no"]::before,
html body #scrollable-container .form-group > label[for="contact_no"]::before {
  content: "\f3cd"; /* fa-mobile-alt */
}

html body .cc-app-content .form-group > label[for="email"]::before,
html body #scrollable-container .form-group > label[for="email"]::before {
  content: "\f0e0"; /* fa-envelope */
}

html body .cc-app-content .form-group > label[for="address"]::before,
html body #scrollable-container .form-group > label[for="address"]::before,
html body .cc-app-content .form-group > label[for="address_line_1"]::before,
html body #scrollable-container .form-group > label[for="address_line_1"]::before {
  content: "\f3c5"; /* fa-map-marker-alt */
}

html body .cc-app-content .form-group > label[for="tax_id"]::before,
html body #scrollable-container .form-group > label[for="tax_id"]::before,
html body .cc-app-content .form-group > label[for="tax_number"]::before,
html body #scrollable-container .form-group > label[for="tax_number"]::before {
  content: "\f571"; /* fa-file-invoice-dollar */
}

/* =========================================================
   Unit field � pill bar matching reference (select + add-unit +)
   Keeps Select2 + btn-modal behavior; visual shell only.
   ========================================================= */
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group,
html body .cc-app-content .form-group:has(#unit_id) > .input-group,
html body #scrollable-container .form-group:has(#unit_id) > .input-group,
html body .modal-body .form-group:has(> label[for="unit_id"]) > .input-group,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group,
html body #scrollable-container .form-group:has(> label[for="brand_id"]) > .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 44px !important;
  background: #fff !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
  gap: 0 !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .select2-container,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group .select2-container,
html body .cc-app-content .form-group:has(#unit_id) > .input-group .select2-container,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .select2-container,
html body .modal-body .form-group:has(> label[for="unit_id"]) > .input-group .select2-container,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .select2-container,
html body #scrollable-container .form-group:has(> label[for="brand_id"]) > .input-group .select2-container {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .select2-container .select2-selection--single,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group .select2-container .select2-selection--single,
html body .cc-app-content .form-group:has(#unit_id) > .input-group .select2-container .select2-selection--single,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .select2-container .select2-selection--single,
html body .modal-body .form-group:has(> label[for="unit_id"]) > .input-group .select2-container .select2-selection--single,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .select2-container .select2-selection--single,
html body #scrollable-container .form-group:has(> label[for="brand_id"]) > .input-group .select2-container .select2-selection--single {
  min-height: 44px !important;
  height: 44px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .select2-container--default .select2-selection--single .select2-selection__rendered,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group .select2-container--default .select2-selection--single .select2-selection__rendered,
html body .cc-app-content .form-group:has(#unit_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__rendered,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding-inline: 14px !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .select2-container--default .select2-selection--single .select2-selection__arrow,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group .select2-container--default .select2-selection--single .select2-selection__arrow,
html body .cc-app-content .form-group:has(#unit_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__arrow,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .select2-container--default.select2-container--focus .select2-selection--single,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group .select2-container--default.select2-container--focus .select2-selection--single,
html body .cc-app-content .form-group:has(#unit_id) > .input-group .select2-container--default.select2-container--focus .select2-selection--single,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .select2-container--default.select2-container--focus .select2-selection--single,
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .select2-container--default.select2-container--open .select2-selection--single,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .select2-container--default.select2-container--open .select2-selection--single {
  border: none !important;
  box-shadow: none !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group:focus-within,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group:focus-within,
html body .cc-app-content .form-group:has(#unit_id) > .input-group:focus-within,
html body #scrollable-container .form-group:has(#unit_id) > .input-group:focus-within,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group:focus-within,
html body #scrollable-container .form-group:has(> label[for="brand_id"]) > .input-group:focus-within {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Action side: light strip + blue circular + (add unit/brand modal) */
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn,
html body .cc-app-content .form-group:has(#unit_id) > .input-group > .input-group-btn,
html body #scrollable-container .form-group:has(#unit_id) > .input-group > .input-group-btn,
html body .modal-body .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn,
html body #scrollable-container .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 52px !important;
  padding: 0 10px !important;
  background: #F3F4F6 !important;
  border: none !important;
  border-inline-start: 1px solid #E5E7EB !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn > .btn,
html body #scrollable-container .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn > .btn,
html body .cc-app-content .form-group:has(#unit_id) > .input-group > .input-group-btn > .btn,
html body #scrollable-container .form-group:has(#unit_id) > .input-group > .input-group-btn > .btn,
html body .modal-body .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn > .btn,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn > .btn,
html body #scrollable-container .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn > .btn,
html body #scrollable-container .form-group:has(#brand_id) > .input-group > .input-group-btn > .btn,
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .btn-modal,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .btn-modal,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 9999px !important;
  background: #2563EB !important;
  background-image: none !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn > .btn:hover,
html body #scrollable-container .form-group:has(#unit_id) > .input-group > .input-group-btn > .btn:hover,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn > .btn:hover,
html body #scrollable-container .form-group:has(#brand_id) > .input-group > .input-group-btn > .btn:hover,
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .btn-modal:hover,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .btn-modal:hover,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal:hover,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal:hover {
  background: #1D4ED8 !important;
  color: #fff !important;
}

/* Force white + icon on unit/brand add buttons (visible on blue circle) */
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn > .btn .fa,
html body #scrollable-container .form-group:has(#unit_id) > .input-group > .input-group-btn > .btn .fa,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn > .btn .fa,
html body #scrollable-container .form-group:has(#brand_id) > .input-group > .input-group-btn > .btn .fa,
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group .btn-modal .fa,
html body #scrollable-container .form-group:has(#unit_id) > .input-group .btn-modal .fa,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal .fa,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal .fa,
html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn > .btn .text-primary,
html body #scrollable-container .form-group:has(#unit_id) > .input-group > .input-group-btn > .btn .text-primary,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn > .btn .text-primary,
html body #scrollable-container .form-group:has(#brand_id) > .input-group > .input-group-btn > .btn .text-primary,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal .text-primary,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal .text-primary,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal i,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* CSS fallback plus if <i> fails to paint */
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal::before,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal::before {
  content: "\f055" !important;
  font-family: "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  speak: none;
}

html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal:has(> .fa)::before,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal:has(> .fa)::before,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group .btn-modal:has(> i)::before,
html body #scrollable-container .form-group:has(#brand_id) > .input-group .btn-modal:has(> i)::before {
  content: none !important;
  display: none !important;
}

html body .cc-app-content .form-group:has(> label[for="unit_id"]) > .input-group > .input-group-btn > .btn:disabled,
html body #scrollable-container .form-group:has(#unit_id) > .input-group > .input-group-btn > .btn:disabled,
html body .cc-app-content .form-group:has(> label[for="brand_id"]) > .input-group > .input-group-btn > .btn:disabled,
html body #scrollable-container .form-group:has(#brand_id) > .input-group > .input-group-btn > .btn:disabled {
  opacity: 0.45 !important;
  box-shadow: none !important;
}

/* =========================================================
   Manage stock (#enable_stock) � card + toggle (visual only)
   Keeps input-icheck / id / name / JS behavior intact.
   ========================================================= */
html body .cc-app-content .form-group:has(#enable_stock),
html body #scrollable-container .form-group:has(#enable_stock),
html body .modal-body .form-group:has(#enable_stock) {
  background: #F8FAFC !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
}

html body .cc-app-content .form-group:has(#enable_stock) > br,
html body #scrollable-container .form-group:has(#enable_stock) > br {
  display: none !important;
}

html body .cc-app-content .form-group:has(#enable_stock) > label,
html body #scrollable-container .form-group:has(#enable_stock) > label,
html body .modal-body .form-group:has(#enable_stock) > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  cursor: pointer;
  width: auto !important;
  max-width: 100%;
}

html body .cc-app-content .form-group:has(#enable_stock) > label > strong,
html body #scrollable-container .form-group:has(#enable_stock) > label > strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F2A5F !important;
  line-height: 1.35 !important;
}

/* iCheck square ? pill toggle */
html body .cc-app-content .form-group:has(#enable_stock) .icheckbox_square-blue,
html body #scrollable-container .form-group:has(#enable_stock) .icheckbox_square-blue,
html body .modal-body .form-group:has(#enable_stock) .icheckbox_square-blue {
  width: 46px !important;
  height: 26px !important;
  margin: 0 !important;
  margin-inline-end: 0 !important;
  border: none !important;
  border-radius: 9999px !important;
  background: #CBD5E1 !important;
  background-image: none !important;
  background-color: #CBD5E1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  flex-shrink: 0;
  transition: background-color .18s ease;
}

html body .cc-app-content .form-group:has(#enable_stock) .icheckbox_square-blue.checked,
html body #scrollable-container .form-group:has(#enable_stock) .icheckbox_square-blue.checked,
html body .modal-body .form-group:has(#enable_stock) .icheckbox_square-blue.checked {
  background: #2563EB !important;
  background-image: none !important;
  background-color: #2563EB !important;
  box-shadow: none !important;
}

/* Knob */
html body .cc-app-content .form-group:has(#enable_stock) .icheckbox_square-blue::after,
html body #scrollable-container .form-group:has(#enable_stock) .icheckbox_square-blue::after,
html body .modal-body .form-group:has(#enable_stock) .icheckbox_square-blue::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25) !important;
  transition: left .18s ease !important;
  pointer-events: none;
  z-index: 2;
}

html body .cc-app-content .form-group:has(#enable_stock) .icheckbox_square-blue.checked::after,
html body #scrollable-container .form-group:has(#enable_stock) .icheckbox_square-blue.checked::after,
html body .modal-body .form-group:has(#enable_stock) .icheckbox_square-blue.checked::after {
  left: 23px !important;
}

html body .cc-app-content .form-group:has(#enable_stock) .icheckbox_square-blue > ins,
html body #scrollable-container .form-group:has(#enable_stock) .icheckbox_square-blue > ins {
  width: 100% !important;
  height: 100% !important;
  border-radius: 9999px !important;
}

/* Tooltip info icon next to label */
html body .cc-app-content .form-group:has(#enable_stock) .hover-q,
html body #scrollable-container .form-group:has(#enable_stock) .hover-q,
html body .cc-app-content .form-group:has(#enable_stock) .fa-info-circle,
html body #scrollable-container .form-group:has(#enable_stock) .fa-info-circle {
  color: #2563EB !important;
  font-size: 15px !important;
  margin-inline-start: 4px !important;
  vertical-align: middle !important;
}

/* Help text */
html body .cc-app-content .form-group:has(#enable_stock) > .help-block,
html body #scrollable-container .form-group:has(#enable_stock) > .help-block,
html body .modal-body .form-group:has(#enable_stock) > .help-block {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

html body .cc-app-content .form-group:has(#enable_stock) > .help-block > i,
html body #scrollable-container .form-group:has(#enable_stock) > .help-block > i {
  display: none !important;
}

/* =========================================================
   Compact image dropzone � icon + text side by side (2-line look)
   ========================================================= */
html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small,
html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::before {
  font-size: 22px !important;
  margin: 0 !important;
  flex-shrink: 0;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small > .help-block {
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-align: right !important;
}

html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::after {
  font-size: 11px !important;
  white-space: normal;
  letter-spacing: normal;
  word-spacing: normal;
}

/* =========================================================
   ������ ������ � cc-addother-grid
   ����� grid ������ �� ����� ��� .row/.col-sm-* �� Bootstrap
   ========================================================= */
html body .cc-app-content .product_form .cc-addother-grid,
html body #scrollable-container .product_form .cc-addother-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
  width: 100%;
}

/* ���� Bootstrap ���� ����� �� ���� ������ � ������ ���� ��� ���� */
html body .cc-app-content .product_form .cc-addother-grid > .row,
html body #scrollable-container .product_form .cc-addother-grid > .row {
  display: contents !important;
}

html body .cc-app-content .product_form .cc-addother-grid > .row::before,
html body .cc-app-content .product_form .cc-addother-grid > .row::after,
html body #scrollable-container .product_form .cc-addother-grid > .row::before,
html body #scrollable-container .product_form .cc-addother-grid > .row::after {
  display: none !important;
  content: none !important;
}

/* �� ��� (���� �� ���� ������) ���� ��� ����� */
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell,
html body .cc-app-content .product_form .cc-addother-grid > [class*="col-"],
html body #scrollable-container .product_form .cc-addother-grid > [class*="col-"],
html body .cc-app-content .product_form .cc-addother-grid > .row > [class*="col-"],
html body #scrollable-container .product_form .cc-addother-grid > .row > [class*="col-"] {
  min-width: 0;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ����� ������ �������� ���� ���� */
html body .cc-app-content .product_form .cc-addother-grid > .hide,
html body #scrollable-container .product_form .cc-addother-grid > .hide,
html body .cc-app-content .product_form .cc-addother-grid > .clearfix,
html body #scrollable-container .product_form .cc-addother-grid > .clearfix,
html body .cc-app-content .product_form .cc-addother-grid > .row > .hide,
html body #scrollable-container .product_form .cc-addother-grid > .row > .hide,
html body .cc-app-content .product_form .cc-addother-grid > input,
html body #scrollable-container .product_form .cc-addother-grid > input,
html body .cc-app-content .product_form .cc-addother-grid > input[type="hidden"],
html body #scrollable-container .product_form .cc-addother-grid > input[type="hidden"] {
  display: none !important;
}

/* ���� ��� ���� (������ / ��� / ������) */
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-full,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-full,
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-desc,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-desc,
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks {
  grid-column: 1 / -1;
}

/* ���� ����� ���� ����� ����� �� ��� grid */
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-hidden,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-hidden {
  display: none !important;
}

/* ����� ����� jQuery ������ �� show() ���� block � ������ ���� �� grid item */
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell[style*="display: block"],
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell[style*="display:block"],
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell[style*="display: block"],
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell[style*="display:block"] {
  display: block !important;
}

/* form-group ���� ������� */
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell > .form-group,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell > .form-group,
html body .cc-app-content .product_form .cc-addother-grid [class*="col-"] > .form-group,
html body #scrollable-container .product_form .cc-addother-grid [class*="col-"] > .form-group {
  margin-bottom: 0 !important;
}

/* ����� ��� (rack) */
html body .cc-app-content .product_form .cc-addother-grid .cc-ao-section-title,
html body #scrollable-container .product_form .cc-addother-grid .cc-ao-section-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin: 0 !important;
  padding: 6px 0 2px !important;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* �� ������ ������� � 3 ��� ��� ���� ����� */
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: stretch;
}

html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks > .row,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks > .row {
  display: contents !important;
}

html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks > .cc-ao-check,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks > .cc-ao-check,
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks > [class*="col-"],
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks > [class*="col-"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  min-height: 42px !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: #F8FAFC !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
}

html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks [class*="col-"] > .form-group,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks [class*="col-"] > .form-group {
  margin: 0 !important;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks [class*="col-"] > .form-group > br,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks [class*="col-"] > .form-group > br {
  display: none !important;
}

html body .cc-app-content .product_form .cc-addother-grid .cc-ao-check-label,
html body #scrollable-container .product_form .cc-addother-grid .cc-ao-check-label,
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks label,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  cursor: pointer;
  flex: 1;
}

html body .cc-app-content .product_form .cc-addother-grid .cc-ao-check-label > strong,
html body #scrollable-container .product_form .cc-addother-grid .cc-ao-check-label > strong,
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks label > strong,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks label > strong {
  font-size: 13px !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

/* ��� �������� � �� + select ��� ��� */
html body .cc-app-content .product_form .cc-addother-grid .cc-expiry-row,
html body #scrollable-container .product_form .cc-addother-grid .cc-expiry-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 4px !important;
}

html body .cc-app-content .product_form .cc-addother-grid .cc-expiry-row .cc-expiry-num,
html body #scrollable-container .product_form .cc-addother-grid .cc-expiry-row .cc-expiry-num {
  flex: 0 0 40% !important;
  width: 40% !important;
  min-width: 0 !important;
}

html body .cc-app-content .product_form .cc-addother-grid .cc-expiry-row .cc-expiry-sel,
html body #scrollable-container .product_form .cc-addother-grid .cc-expiry-row .cc-expiry-sel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ��� ����� � ���� ���� ���� �������� */
html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-desc > .form-group,
html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-desc > .form-group {
  margin-bottom: 0 !important;
}

html body .cc-app-content .product_form .cc-addother-grid .tox-tinymce,
html body #scrollable-container .product_form .cc-addother-grid .tox-tinymce {
  min-height: 110px !important;
  border-radius: 10px !important;
  border: 1.5px solid #D1D5DB !important;
}

html body .cc-app-content textarea.cc-product-desc,
html body #scrollable-container textarea.cc-product-desc {
  min-height: 62px !important;
  height: 62px !important;
  max-height: 140px !important;
  resize: vertical !important;
}

/* =========================================================
   Responsive � cc-addother-grid
   ========================================================= */
@media (max-width: 991px) {
  html body .cc-app-content .product_form .cc-addother-grid,
  html body #scrollable-container .product_form .cc-addother-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }

  html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks,
  html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ���� ����� ���� ��� ������� */
  html body .cc-app-content .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone,
  html body #scrollable-container .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  html body .cc-app-content .product_form .cc-addother-grid,
  html body #scrollable-container .product_form .cc-addother-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-full,
  html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-full,
  html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-desc,
  html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-cell.cc-ao-desc,
  html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks,
  html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks {
    grid-column: 1;
  }

  html body .cc-app-content .product_form .cc-addother-grid > .cc-ao-checks,
  html body #scrollable-container .product_form .cc-addother-grid > .cc-ao-checks {
    grid-template-columns: 1fr;
  }

  html body .cc-app-content .product_form .cc-addother-grid .cc-expiry-row .cc-expiry-num {
    flex: 0 0 45% !important;
    width: 45% !important;
  }
}

/* =========================================================
   Product form action buttons � brand identity (create/edit only)
   ========================================================= */
html body .cc-app-content .product_form .cc-product-actions,
html body #scrollable-container .product_form .cc-product-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 4px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1px solid #E5ECF3;
  border-radius: 14px;
  box-sizing: border-box;
}

html body .cc-app-content .product_form .cc-product-actions > .cc-pa-btn,
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 150px;
  max-width: 280px;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  white-space: normal !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  cursor: pointer;
}

html body .cc-app-content .product_form .cc-product-actions > .cc-pa-btn:hover:not(:disabled),
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important;
}

html body .cc-app-content .product_form .cc-product-actions > .cc-pa-btn:disabled,
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ����� �� ������ ��� ����� ����� ������� � ���� �� display:inline-flex */
html body .cc-app-content .product_form .cc-product-actions > .cc-pa-btn.cc-pa-hidden,
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-btn.cc-pa-hidden,
html body .product_form .cc-product-actions > #opening_stock_button.cc-pa-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Primary Save � brand blue/teal/green gradient */
html body .cc-app-content .product_form .cc-product-actions > .cc-pa-primary,
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-primary {
  background: linear-gradient(135deg, #2563EB 0%, #0EA5A8 55%, #22C55E 100%) !important;
  background-image: linear-gradient(135deg, #2563EB 0%, #0EA5A8 55%, #22C55E 100%) !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28) !important;
  font-size: 15px !important;
}

/* Save & add another � teal */
html body .cc-app-content .product_form .cc-product-actions > .cc-pa-teal,
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-teal {
  background: linear-gradient(135deg, #0EA5A8 0%, #0D9488 100%) !important;
  background-image: linear-gradient(135deg, #0EA5A8 0%, #0D9488 100%) !important;
}

/* Opening stock � purple (brand) */
html body .cc-app-content .product_form .cc-product-actions > .cc-pa-purple,
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-purple {
  background: linear-gradient(135deg, #8B5CF6 0%, #431DA6 100%) !important;
  background-image: linear-gradient(135deg, #8B5CF6 0%, #431DA6 100%) !important;
}

/* Selling prices � amber/warning */
html body .cc-app-content .product_form .cc-product-actions > .cc-pa-warning,
html body #scrollable-container .product_form .cc-product-actions > .cc-pa-warning {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  background-image: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

@media (max-width: 991px) {
  html body .cc-app-content .product_form .cc-product-actions,
  html body #scrollable-container .product_form .cc-product-actions {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    padding: 12px;
  }

  html body .cc-app-content .product_form .cc-product-actions > .cc-pa-btn,
  html body #scrollable-container .product_form .cc-product-actions > .cc-pa-btn {
    flex: 1 1 calc(50% - 10px);
    max-width: none;
    min-width: 140px;
  }
}

@media (max-width: 575px) {
  html body .cc-app-content .product_form .cc-product-actions,
  html body #scrollable-container .product_form .cc-product-actions {
    width: 100%;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
  }

  html body .cc-app-content .product_form .cc-product-actions > .cc-pa-btn,
  html body #scrollable-container .product_form .cc-product-actions > .cc-pa-btn {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }

  /* �� ����� ������� ���� ����� ��� ������ */
  html body .cc-app-content .product_form .cc-product-actions > .cc-pa-primary,
  html body #scrollable-container .product_form .cc-product-actions > .cc-pa-primary {
    order: -1;
    min-height: 50px !important;
    font-size: 16px !important;
  }
}

/* =========================================================
   Product create � mobile / tablet layout (visual only)
   Scope: .cc-product-create-page / .product_form
   Breakpoint: max-width 991px (tablet + phone)
   Excluded automatically: POS (cc-forms.css not loaded on pos_layout)
   ========================================================= */

/* Section heads � hidden on desktop */
html body .cc-app-content .cc-m-section-head,
html body #scrollable-container .cc-m-section-head {
  display: none;
}

/* Additional options toggle � desktop keeps compact bar */
html body .cc-app-content .product_form .cc-addother-toggle,
html body #scrollable-container .product_form .cc-addother-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 12px 16px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 12px !important;
  background: #EFF6FF !important;
  color: #1E3A8A !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-align: right;
}

html body .cc-app-content .product_form .cc-addother-toggle__icon,
html body #scrollable-container .product_form .cc-addother-toggle__icon {
  color: #2563EB;
  font-size: 15px;
  order: 3;
}

html body .cc-app-content .product_form .cc-addother-toggle__label,
html body #scrollable-container .product_form .cc-addother-toggle__label {
  flex: 1 1 auto;
  order: 2;
  text-align: right;
}

html body .cc-app-content .product_form .cc-addother-toggle__chevron,
html body #scrollable-container .product_form .cc-addother-toggle__chevron {
  order: 1;
  font-size: 12px;
  color: #64748B;
  transition: transform .2s ease;
}

html body .cc-app-content .product_form .cc-addother-toggle.is-open .cc-addother-toggle__chevron,
html body #scrollable-container .product_form .cc-addother-toggle.is-open .cc-addother-toggle__chevron {
  transform: rotate(180deg);
}

@media (max-width: 991px) {
  /* Page chrome */
  html body .cc-app-content .cc-product-create-page,
  html body #scrollable-container .cc-product-create-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body .cc-app-content .cc-product-create-header,
  html body #scrollable-container .cc-product-create-header {
    padding: 8px 12px 4px !important;
  }

  html body .cc-app-content .cc-product-create-header > h1,
  html body #scrollable-container .cc-product-create-header > h1 {
    font-size: 1.15rem !important;
    margin: 0 !important;
    text-align: center;
  }

  /* Cards */
  html body .cc-app-content .cc-product-create-page .cc-product-card,
  html body #scrollable-container .cc-product-create-page .cc-product-card,
  html body .cc-app-content .cc-product-create-page .box-primary,
  html body #scrollable-container .cc-product-create-page .box-primary {
    border-radius: 16px !important;
    border: 1px solid #E5ECF3 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 12px !important;
    overflow: hidden;
  }

  html body .cc-app-content .cc-product-create-page .cc-product-card .tw-p-2,
  html body .cc-app-content .cc-product-create-page .cc-product-card .sm\:tw-p-3,
  html body .cc-app-content .cc-product-create-page .cc-product-card .tw-py-2,
  html body .cc-app-content .cc-product-create-page .cc-product-card .sm\:tw-px-5 {
    padding: 12px !important;
  }

  /* Section heads visible on mobile/tablet */
  html body .cc-app-content .cc-product-create-page .cc-m-section-head,
  html body #scrollable-container .cc-product-create-page .cc-m-section-head {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid #EEF2F7;
  }

  html body .cc-app-content .cc-product-create-page .cc-m-section-head__icon,
  html body #scrollable-container .cc-product-create-page .cc-m-section-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 16px;
    flex: 0 0 36px;
  }

  html body .cc-app-content .cc-product-create-page .cc-m-section-head--pricing .cc-m-section-head__icon {
    background: #ECFDF5;
    color: #059669;
  }

  html body .cc-app-content .cc-product-create-page .cc-m-section-head__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  html body .cc-app-content .cc-product-create-page .cc-m-section-head__title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.3;
  }

  html body .cc-app-content .cc-product-create-page .cc-m-section-head__sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
    line-height: 1.35;
  }

  /* Single-column fields */
  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields,
  html body #scrollable-container .cc-product-create-page .product_form .row.cc-product-fields {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col,
  html body #scrollable-container .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col {
    grid-column: 1 / -1 !important;
    order: 99;
  }

  /* Field labels + inputs � slightly more compact on mobile */
  html body .cc-app-content .cc-product-create-page .product_form .form-group > label,
  html body #scrollable-container .cc-product-create-page .product_form .form-group > label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 4px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .form-control,
  html body #scrollable-container .cc-product-create-page .product_form .form-control,
  html body .cc-app-content .cc-product-create-page .product_form .form-control:not(textarea),
  html body #scrollable-container .cc-product-create-page .product_form .form-control:not(textarea),
  html body .cc-app-content .cc-product-create-page .product_form input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  html body #scrollable-container .cc-product-create-page .product_form input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  html body .cc-app-content .cc-product-create-page .product_form select.form-control,
  html body #scrollable-container .cc-product-create-page .product_form select.form-control,
  html body .cc-app-content .cc-product-create-page .product_form .select2-container .select2-selection--single,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container .select2-selection--single {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 12.5px !important;
    line-height: 32px !important;
    border-radius: 8px !important;
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .form-control::placeholder,
  html body #scrollable-container .cc-product-create-page .product_form .form-control::placeholder {
    font-size: 12px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .select2-container .select2-selection--single .select2-selection__rendered,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 12.5px !important;
    line-height: 32px !important;
    padding-inline: 8px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .select2-container .select2-selection--single .select2-selection__arrow,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
    top: 0 !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .select2-container .select2-selection--multiple,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container .select2-selection--multiple {
    min-height: 32px !important;
    border-radius: 8px !important;
    background: #F8FAFC !important;
    font-size: 12.5px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form textarea.form-control,
  html body #scrollable-container .cc-product-create-page .product_form textarea.form-control {
    height: auto !important;
    min-height: 68px !important;
  }

  /* Unit + button row stays aligned with compact inputs */
  html body .cc-app-content .cc-product-create-page .product_form .input-group-btn > .btn,
  html body #scrollable-container .cc-product-create-page .product_form .input-group-btn > .btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 3px 9px !important;
    font-size: 12.5px !important;
  }

  /* Image dropzone — compact single-row height on mobile only */
  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone,
  html body #scrollable-container .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    max-width: 100% !important;
    width: 100% !important;
    border: 1.5px dashed #93C5FD !important;
    border-radius: 10px !important;
    background: #F8FBFF !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::before {
    content: "\f03e" !important;
    font-size: 16px !important;
    color: #3B82F6 !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small > .help-block,
  html body #scrollable-container .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small > .help-block {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::after,
  html body #scrollable-container .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col .cc-image-dropzone > small::after {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  /* Manage stock � no awkward top margin on mobile */
  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields .form-group.cc-manage-stock,
  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields .form-group:has(#enable_stock) {
    margin-top: 0 !important;
  }

  /* Pricing card fields stack */
  html body .cc-app-content .cc-product-create-page .cc-product-card--pricing .row > [class*='col-'],
  html body #scrollable-container .cc-product-create-page .cc-product-card--pricing .row > [class*='col-'] {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Product prices — green banner + card grid (mobile only) */
  html body .cc-app-content .cc-product-create-page #product_form_part > .table-responsive,
  html body #scrollable-container .cc-product-create-page #product_form_part > .table-responsive {
    border: 1px solid #BBF7D0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    margin-top: 4px !important;
  }

  html body .cc-app-content .cc-product-create-page #product_form_part > .table-responsive::before,
  html body #scrollable-container .cc-product-create-page #product_form_part > .table-responsive::before {
    /* أسعار الصنف — unicode escapes so file encoding cannot corrupt Arabic */
    content: "\0623\0633\0639\0627\0631\0020\0627\0644\0635\0646\0641";
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ECFDF5;
    color: #065F46;
    font-size: 13.5px;
    font-weight: 800;
    border-bottom: 1px solid #BBF7D0;
  }

  html body .cc-app-content .cc-product-create-page .add-product-price-table,
  html body #scrollable-container .cc-product-create-page .add-product-price-table {
    margin: 0 !important;
    border: none !important;
    width: 100% !important;
  }

  html body .cc-app-content .cc-product-create-page .add-product-price-table > tbody > tr:first-child > th,
  html body #scrollable-container .cc-product-create-page .add-product-price-table > tbody > tr:first-child > th {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  html body .cc-app-content .cc-product-create-page .add-product-price-table > tbody > tr:last-child > td,
  html body #scrollable-container .cc-product-create-page .add-product-price-table > tbody > tr:last-child > td {
    border: none !important;
    padding: 10px 8px !important;
    vertical-align: top !important;
    box-shadow: none !important;
  }

  html body .cc-app-content .cc-product-create-page .add-product-price-table .col-sm-6,
  html body #scrollable-container .cc-product-create-page .add-product-price-table .col-sm-6 {
    width: 100% !important;
    float: none !important;
    padding: 0 0 8px !important;
  }

  html body .cc-app-content .cc-product-create-page .add-product-price-table .form-control,
  html body #scrollable-container .cc-product-create-page .add-product-price-table .form-control {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12.5px !important;
    text-align: center;
  }

  /* Action buttons � stacked full-width with icons */
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions,
  html body #scrollable-container .cc-product-create-page .product_form .cc-product-actions {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    margin: 8px 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-btn,
  html body #scrollable-container .cc-product-create-page .product_form .cc-product-actions > .cc-pa-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    gap: 8px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-primary,
  html body #scrollable-container .cc-product-create-page .product_form .cc-product-actions > .cc-pa-primary {
    order: -4 !important;
    min-height: 52px !important;
    font-size: 16px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-warning { order: -3 !important; }
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-purple { order: -2 !important; }
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-teal { order: -1 !important; }

  /* Button icons (Font Awesome) */
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-btn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
  }
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-primary::before { content: "\f0c7"; }
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-warning::before { content: "\f0c0"; }
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-purple::before { content: "\f466"; }
  html body .cc-app-content .cc-product-create-page .product_form .cc-product-actions > .cc-pa-teal::before { content: "\f067"; }

  /* Extra options: single column */
  html body .cc-app-content .cc-product-create-page .product_form .cc-addother-grid,
  html body #scrollable-container .cc-product-create-page .product_form .cc-addother-grid,
  html body .cc-app-content .cc-product-create-page .product_form .cc-ao-checks,
  html body #scrollable-container .cc-product-create-page .product_form .cc-ao-checks {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: 2-col basic fields when wide enough */
@media (min-width: 600px) and (max-width: 991px) {
  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields,
  html body #scrollable-container .cc-product-create-page .product_form .row.cc-product-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .row.cc-product-fields > .cc-product-image-col {
    grid-column: 1 / -1 !important;
  }

  html body .cc-app-content .cc-product-create-page .add-product-price-table > tbody > tr,
  html body #scrollable-container .cc-product-create-page .add-product-price-table > tbody > tr {
    display: table-row !important;
  }
}

/* =========================================================
   SKU camera barcode button � mobile/tablet only
   Beside the field (left in RTL), not floating below
   ========================================================= */
html body .cc-app-content .cc-sku-scan-wrap,
html body #scrollable-container .cc-sku-scan-wrap {
  position: relative;
  display: block;
  width: 100%;
}

html body .cc-app-content .cc-sku-scan-btn,
html body #scrollable-container .cc-sku-scan-btn {
  display: none !important;
}

@media (max-width: 991px) {
  html body .cc-app-content .cc-product-create-page .cc-sku-scan-wrap,
  html body #scrollable-container .cc-product-create-page .cc-sku-scan-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-sku-scan-wrap > #sku,
  html body #scrollable-container .cc-product-create-page .cc-sku-scan-wrap > #sku {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-sku-scan-btn,
  html body #scrollable-container .cc-product-create-page .cc-sku-scan-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    top: auto !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: auto !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #BFDBFE !important;
    border-radius: 9px !important;
    background: #EFF6FF !important;
    color: #2563EB !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-sku-scan-btn:active,
  html body #scrollable-container .cc-product-create-page .cc-sku-scan-btn:active {
    background: #DBEAFE !important;
  }

  html body .cc-app-content .cc-sku-scan-modal .modal-header,
  html body .cc-app-content .cc-sku-scan-modal .modal-body {
    text-align: center;
  }

  html body .cc-app-content .cc-sku-scan-hint {
    margin: 0 0 10px;
    font-size: 13px;
    color: #64748B;
    font-weight: 600;
  }

  html body .cc-app-content #cc_sku_scan_reader {
    width: 100% !important;
    min-height: 240px !important;
    border-radius: 12px;
    overflow: hidden;
    background: #0F172A;
    position: relative;
  }

  html body .cc-app-content #cc_sku_scan_reader video,
  html body .cc-app-content #cc_sku_scan_reader canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 12px;
    background: #000 !important;
  }

  html body .cc-app-content #cc_sku_scan_reader img {
    display: none !important;
  }

  html body .cc-app-content .cc-sku-scan-status {
    margin: 10px 0 0;
    font-size: 12.5px;
    min-height: 1.2em;
  }
}

/* Desktop/POS safety: never show scan UI */
@media (min-width: 992px) {
  html body .cc-app-content .cc-sku-scan-btn,
  html body #scrollable-container .cc-sku-scan-btn {
    display: none !important;
  }
}

/* Profit % stays in the form for the default calculation; hidden on add-product only. */
html body .cc-app-content .cc-product-create-page .cc-profit-visual-hide,
html body #scrollable-container .cc-product-create-page .cc-profit-visual-hide,
.cc-quick-add-dialog .cc-profit-visual-hide {
  display: none !important;
}

/* Product prices block (edit + create) */
html body .cc-app-content .product_form .cc-product-prices-head,
html body #scrollable-container .product_form .cc-product-prices-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: #ECFDF5;
  color: #065F46;
  font-size: 13.5px;
  font-weight: 800;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
}

html body .cc-app-content .product_form .cc-product-prices-wrap,
html body #scrollable-container .product_form .cc-product-prices-wrap {
  margin-top: 6px;
}

@media (max-width: 991px) {
  html body .cc-app-content .cc-product-create-page .cc-pricing-fields > [class*="col-"],
  html body #scrollable-container .cc-product-create-page .cc-pricing-fields > [class*="col-"] {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 10px !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-product-prices-wrap,
  html body #scrollable-container .cc-product-create-page .cc-product-prices-wrap {
    border: 1px solid #BBF7D0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    padding: 0 !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-product-prices-head,
  html body #scrollable-container .cc-product-create-page .cc-product-prices-head {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #BBF7D0 !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-product-prices-wrap > #product_form_part,
  html body .cc-app-content .cc-product-create-page .cc-product-prices-wrap > .form-group {
    padding: 10px !important;
    margin: 0 !important;
  }
}

/* =========================================================
   Product create/edit � force compact fields on mobile
   Must beat global @media(max-width:767px) 44px rules
   (those use input.form-control:not([type=...]) �4 = higher specificity)
   ========================================================= */
@media (max-width: 991px) {
  html body .cc-app-content .cc-product-create-page .product_form .form-control:not(textarea),
  html body #scrollable-container .cc-product-create-page .product_form .form-control:not(textarea),
  html body .cc-app-content .cc-product-create-page .product_form input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  html body #scrollable-container .cc-product-create-page .product_form input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  html body .cc-app-content .cc-product-create-page .product_form select.form-control,
  html body #scrollable-container .cc-product-create-page .product_form select.form-control {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 12.5px !important;
    line-height: 32px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .select2-container .select2-selection--single,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container .select2-selection--single,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group .select2-container .select2-selection--single,
  html body #scrollable-container .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group .select2-container .select2-selection--single,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group .select2-container .select2-selection--single,
  html body #scrollable-container .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group .select2-container .select2-selection--single,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(> label[for="unit_id"]) > .input-group .select2-container .select2-selection--single,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(> label[for="brand_id"]) > .input-group .select2-container .select2-selection--single,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#category_id) .select2-container .select2-selection--single,
  html body #scrollable-container .cc-product-create-page .product_form .form-group:has(#category_id) .select2-container .select2-selection--single {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    line-height: 32px !important;
    display: flex !important;
    align-items: center !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group,
  html body #scrollable-container .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group,
  html body #scrollable-container .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(> label[for="unit_id"]) > .input-group,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(> label[for="brand_id"]) > .input-group {
    min-height: 32px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .select2-container--default .select2-selection--single .select2-selection__rendered,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container--default .select2-selection--single .select2-selection__rendered,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__rendered,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__rendered,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#category_id) .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    font-size: 12.5px !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .select2-container--default .select2-selection--single .select2-selection__arrow,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container--default .select2-selection--single .select2-selection__arrow,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__arrow,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group .select2-container--default .select2-selection--single .select2-selection__arrow,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#category_id) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
    top: 0 !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .input-group-btn > .btn,
  html body #scrollable-container .cc-product-create-page .product_form .input-group-btn > .btn,
  html body .cc-app-content .cc-product-create-page .product_form .input-group .btn-modal,
  html body #scrollable-container .cc-product-create-page .product_form .input-group .btn-modal {
    min-width: 32px !important;
    min-height: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Keep unit/brand input-group content vertically centered on mobile */
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group,
  html body #scrollable-container .cc-product-create-page .product_form .form-group:has(#unit_id) > .input-group,
  html body .cc-app-content .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group,
  html body #scrollable-container .cc-product-create-page .product_form .form-group:has(#brand_id) > .input-group {
    align-items: center !important;
  }

  html body .cc-app-content .cc-product-create-page .product_form .select2-container .select2-selection--multiple,
  html body #scrollable-container .cc-product-create-page .product_form .select2-container .select2-selection--multiple {
    min-height: 32px !important;
  }
}

/* Image size hint under variation uploads */
html body .cc-app-content .cc-img-max-hint,
html body #scrollable-container .cc-img-max-hint {
  display: block !important;
  margin: 6px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #DC2626 !important;
}

/* =========================================================
   Variable + Combo product tables � stack on mobile only
   ========================================================= */
@media (max-width: 991px) {
  /* Outer variation shell */
  html body .cc-app-content .cc-product-create-page #product_variation_form_part > thead,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part > thead {
    display: none !important;
  }

  html body .cc-app-content .cc-product-create-page #product_variation_form_part,
  html body .cc-app-content .cc-product-create-page #product_variation_form_part > tbody,
  html body .cc-app-content .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row,
  html body .cc-app-content .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row > td,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part > tbody,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  html body .cc-app-content .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row {
    margin: 0 0 14px !important;
    padding: 10px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  }

  html body .cc-app-content .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row > td,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row > td {
    border: none !important;
    padding: 6px 2px !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-var-actions-cell,
  html body #scrollable-container .cc-product-create-page .cc-var-actions-cell {
    text-align: end !important;
    padding-bottom: 4px !important;
  }

  html body .cc-app-content .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row > td[data-label]:not([data-label=""])::before,
  html body #scrollable-container .cc-product-create-page #product_variation_form_part > tbody > tr.variation_row > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748B;
  }

  /* Inner variation value rows ? stacked cards */
  html body .cc-app-content .cc-product-create-page .variation_value_table > thead,
  html body #scrollable-container .cc-product-create-page .variation_value_table > thead {
    display: none !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table,
  html body .cc-app-content .cc-product-create-page .variation_value_table > tbody,
  html body .cc-app-content .cc-product-create-page .variation_value_table > tbody > tr,
  html body .cc-app-content .cc-product-create-page .variation_value_table > tbody > tr > td,
  html body #scrollable-container .cc-product-create-page .variation_value_table,
  html body #scrollable-container .cc-product-create-page .variation_value_table > tbody,
  html body #scrollable-container .cc-product-create-page .variation_value_table > tbody > tr,
  html body #scrollable-container .cc-product-create-page .variation_value_table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table > tbody > tr,
  html body #scrollable-container .cc-product-create-page .variation_value_table > tbody > tr {
    margin: 0 0 12px !important;
    padding: 10px !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: 12px !important;
    background: #F8FFFB !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table > tbody > tr > td,
  html body #scrollable-container .cc-product-create-page .variation_value_table > tbody > tr > td {
    border: none !important;
    padding: 6px 2px !important;
    text-align: start !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table > tbody > tr > td[data-label]:not([data-label=""])::before,
  html body #scrollable-container .cc-product-create-page .variation_value_table > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #065F46;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table .purchase-price-container,
  html body #scrollable-container .cc-product-create-page .variation_value_table .purchase-price-container {
    flex-direction: column !important;
    gap: 8px !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table .col-sm-6,
  html body #scrollable-container .cc-product-create-page .variation_value_table .col-sm-6 {
    width: 100% !important;
    float: none !important;
    padding: 0 0 6px !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table .cc-var-row-actions,
  html body #scrollable-container .cc-product-create-page .variation_value_table .cc-var-row-actions {
    text-align: end !important;
    padding-top: 4px !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_value_table .form-control,
  html body #scrollable-container .cc-product-create-page .variation_value_table .form-control {
    text-align: start !important;
  }

  html body .cc-app-content .cc-product-create-page .variation_images,
  html body #scrollable-container .cc-product-create-page .variation_images {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Combo (�����) compact mobile cards � no horizontal overflow */
  html body .cc-app-content .cc-product-create-page .cc-combo-wrap,
  html body #scrollable-container .cc-product-create-page .cc-combo-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-combo-wrap .table-responsive,
  html body #scrollable-container .cc-product-create-page .cc-combo-wrap .table-responsive {
    overflow-x: hidden !important;
    border: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-combo-search,
  html body .cc-app-content .cc-product-create-page .cc-combo-wrap > .col-sm-8,
  html body .cc-app-content .cc-product-create-page .cc-combo-wrap > .col-sm-12,
  html body #scrollable-container .cc-product-create-page .cc-combo-search,
  html body #scrollable-container .cc-product-create-page .cc-combo-wrap > .col-sm-8,
  html body #scrollable-container .cc-product-create-page .cc-combo-wrap > .col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > thead,
  html body #scrollable-container .cc-product-create-page .combo_product_table > thead {
    display: none !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tfoot,
  html body #scrollable-container .cc-product-create-page .combo_product_table,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tfoot {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr.cc-combo-row,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr.cc-combo-row,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 8px;
    position: relative !important;
    margin: 0 0 10px !important;
    padding: 10px 10px 8px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
    padding: 0 !important;
    text-align: start !important;
    float: none !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-name,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td:first-child,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-name,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td:first-child {
    grid-column: 1 / -1;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: #0F172A !important;
    padding-inline-start: 26px !important;
    margin-bottom: 2px !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-qty,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-qty {
    grid-column: 1 / -1;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-name::before,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td:first-child::before,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-name::before,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td:first-child::before {
    content: none !important;
    display: none !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td[data-label]:not([data-label=""])::before,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    color: #64748B;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table .cc-combo-qty-wrap,
  html body #scrollable-container .cc-product-create-page .combo_product_table .cc-combo-qty-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table .cc-combo-qty-wrap .quantity,
  html body #scrollable-container .cc-product-create-page .combo_product_table .cc-combo-qty-wrap .quantity {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 48% !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 6px !important;
    font-size: 12.5px !important;
    text-align: center !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table .cc-combo-qty-wrap .sub_unit,
  html body .cc-app-content .cc-product-create-page .combo_product_table .cc-combo-unit,
  html body #scrollable-container .cc-product-create-page .combo_product_table .cc-combo-qty-wrap .sub_unit,
  html body #scrollable-container .cc-product-create-page .combo_product_table .cc-combo-unit {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 48% !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 6px !important;
    font-size: 11.5px !important;
    line-height: 24px !important;
    color: #475569 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-price,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-total,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-price,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-total {
    background: #F8FAFC !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    min-width: 0 !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-price .display_currency,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-total .display_currency,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-price .display_currency,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-total .display_currency {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    display: block !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-remove,
  html body .cc-app-content .cc-product-create-page .combo_product_table > tbody > tr > td.cc-var-row-actions,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-combo-remove,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tbody > tr > td.cc-var-row-actions {
    position: absolute !important;
    top: 6px !important;
    inset-inline-start: 6px !important;
    width: auto !important;
    grid-column: auto !important;
    padding: 0 !important;
    z-index: 2;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tfoot > tr,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tfoot > tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 2px 0 10px !important;
    padding: 8px 10px !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 10px !important;
    background: #EFF6FF !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tfoot > tr > td,
  html body #scrollable-container .cc-product-create-page .combo_product_table > tfoot > tr > td {
    display: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(2),
  html body .cc-app-content .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(4),
  html body #scrollable-container .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(2),
  html body #scrollable-container .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(4) {
    display: block !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(2),
  html body #scrollable-container .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(2) {
    font-size: 12px !important;
    color: #1E3A8A !important;
  }

  html body .cc-app-content .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(4),
  html body #scrollable-container .cc-product-create-page .combo_product_table > tfoot > tr > td:nth-child(4) {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-combo-pricing,
  html body #scrollable-container .cc-product-create-page .cc-combo-pricing {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-combo-pricing > .cc-combo-pricing-item,
  html body .cc-app-content .cc-product-create-page .cc-combo-pricing > .col-sm-4,
  html body #scrollable-container .cc-product-create-page .cc-combo-pricing > .cc-combo-pricing-item,
  html body #scrollable-container .cc-product-create-page .cc-combo-pricing > .col-sm-4 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-combo-pricing label,
  html body #scrollable-container .cc-product-create-page .cc-combo-pricing label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }

  html body .cc-app-content .cc-product-create-page .cc-combo-pricing .form-control,
  html body #scrollable-container .cc-product-create-page .cc-combo-pricing .form-control {
    text-align: center !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 6px !important;
    font-size: 12.5px !important;
  }
}

/* =========================================================
   Extra options (outside widget card) � gradient toggle bar
   ========================================================= */
html body:not(.lockscreen) .cc-app-content .cc-extra-options,
html body:not(.lockscreen) #scrollable-container .cc-extra-options {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  float: none;
  clear: both;
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options__bar,
html body:not(.lockscreen) #scrollable-container .cc-extra-options__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #2563EB 0%, #12B981 100%) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options__bar::-webkit-details-marker,
html body:not(.lockscreen) .cc-app-content .cc-extra-options__bar::marker,
html body:not(.lockscreen) #scrollable-container .cc-extra-options__bar::-webkit-details-marker,
html body:not(.lockscreen) #scrollable-container .cc-extra-options__bar::marker {
  display: none;
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options__title,
html body:not(.lockscreen) #scrollable-container .cc-extra-options__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options__title > .fa,
html body:not(.lockscreen) #scrollable-container .cc-extra-options__title > .fa {
  color: #fff !important;
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options__chevron,
html body:not(.lockscreen) #scrollable-container .cc-extra-options__chevron {
  color: #fff !important;
  font-size: 12px;
  transition: transform .15s ease;
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options[open] .cc-extra-options__chevron,
html body:not(.lockscreen) #scrollable-container .cc-extra-options[open] .cc-extra-options__chevron {
  transform: rotate(180deg);
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options__body,
html body:not(.lockscreen) #scrollable-container .cc-extra-options__body {
  margin-top: 10px;
  padding: 14px 16px 16px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html body:not(.lockscreen) .cc-app-content .cc-extra-options.col-sm-12,
html body:not(.lockscreen) #scrollable-container .cc-extra-options.col-sm-12 {
  float: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Extra options grid � only rendered fields; no empty holes */
html body:not(.lockscreen) .cc-app-content .cc-extra-grid,
html body:not(.lockscreen) #scrollable-container .cc-extra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field,
html body:not(.lockscreen) #scrollable-container .cc-extra-field {
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field > .form-group,
html body:not(.lockscreen) #scrollable-container .cc-extra-field > .form-group {
  margin-bottom: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field .help-block,
html body:not(.lockscreen) #scrollable-container .cc-extra-field .help-block {
  margin-bottom: 0;
  margin-top: 6px;
  font-size: 12px;
}

/* Pay term: two controls side-by-side without float gaps */
html body:not(.lockscreen) .cc-app-content .cc-extra-pay-term,
html body:not(.lockscreen) #scrollable-container .cc-extra-pay-term {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-pay-term > .form-control:first-child,
html body:not(.lockscreen) #scrollable-container .cc-extra-pay-term > .form-control:first-child {
  flex: 0 0 38% !important;
  width: auto !important;
  float: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-pay-term > .form-control:last-child,
html body:not(.lockscreen) #scrollable-container .cc-extra-pay-term > .form-control:last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  float: none !important;
  min-width: 0 !important;
}

/* Subscription check tile */
html body:not(.lockscreen) .cc-app-content .cc-extra-field--check,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--check {
  align-self: stretch;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-check,
html body:not(.lockscreen) #scrollable-container .cc-extra-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  height: 100%;
  padding: 12px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  background: #F8FAFC;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-check__label,
html body:not(.lockscreen) #scrollable-container .cc-extra-check__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-check__link,
html body:not(.lockscreen) #scrollable-container .cc-extra-check__link {
  padding: 0 4px;
}

/* Orders chip */
html body:not(.lockscreen) .cc-app-content .cc-extra-chip,
html body:not(.lockscreen) #scrollable-container .cc-extra-chip {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-height: 72px;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-chip__icon,
html body:not(.lockscreen) #scrollable-container .cc-extra-chip__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
  align-self: center;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-chip__icon--orders,
html body:not(.lockscreen) #scrollable-container .cc-extra-chip__icon--orders {
  background: #EEF2FF;
  color: #4F46E5;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-chip__body,
html body:not(.lockscreen) #scrollable-container .cc-extra-chip__body {
  flex: 1 1 auto;
  min-width: 0;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-chip__body > label,
html body:not(.lockscreen) #scrollable-container .cc-extra-chip__body > label {
  margin-bottom: 6px;
}

/* File upload � stop fileinput chrome from overlapping */
html body:not(.lockscreen) .cc-app-content .cc-extra-field--file .file-input,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--file .file-input {
  display: block !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field--file .file-input .input-group,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--file .file-input .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  overflow: hidden !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field--file .file-input .form-control,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--file .file-input .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 40px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field--file .file-input .btn,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--file .file-input .btn,
html body:not(.lockscreen) .cc-app-content .cc-extra-field--file .file-input .input-group-btn,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--file .file-input .input-group-btn {
  flex: 0 0 auto !important;
  position: static !important;
  float: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field--file .file-preview,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--file .file-preview {
  display: none !important;
}

/* Restaurant: table + waiter icon cards (sell only � not POS) */
html body:not(.lockscreen) .cc-app-content .cc-extra-field--restaurant,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--restaurant {
  grid-column: 1 / -1 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-field--restaurant #restaurant_module_span,
html body:not(.lockscreen) #scrollable-container .cc-extra-field--restaurant #restaurant_module_span {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-item,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-item {
  flex: 1 1 240px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  text-align: start !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card__icon,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  background: #EFF6FF !important;
  color: #2563EB !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card__icon--table,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card__icon--table {
  background: #ECFDF5 !important;
  color: #059669 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card__icon--waiter,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card__icon--waiter {
  background: #ECFEFF !important;
  color: #0891B2 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card__title,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card__title {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card__control,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card__control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card__control .form-group,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card__control .form-group {
  margin: 0 !important;
}
/* Sell: use native table select (POS picker modal is not on this page) */
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-table-picker-trigger,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-table-picker-trigger {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-table-select-native,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-table-select-native,
html body:not(.lockscreen) .cc-app-content .cc-extra-options #res_table_id,
html body:not(.lockscreen) #scrollable-container .cc-extra-options #res_table_id,
html body:not(.lockscreen) .cc-app-content .cc-extra-options #res_waiter_id,
html body:not(.lockscreen) #scrollable-container .cc-extra-options #res_waiter_id {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  pointer-events: auto !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-hide-tooltip,
html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-hide-tooltip {
  margin-top: 8px;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-app-content .cc-extra-grid,
  html body:not(.lockscreen) #scrollable-container .cc-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-app-content .cc-extra-grid,
  html body:not(.lockscreen) #scrollable-container .cc-extra-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-field--restaurant #restaurant_module_span,
  html body:not(.lockscreen) #scrollable-container .cc-extra-field--restaurant #restaurant_module_span {
    flex-direction: column !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-item,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-item {
    flex: 1 1 100% !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-chip,
  html body:not(.lockscreen) #scrollable-container .cc-extra-chip,
  html body:not(.lockscreen) .cc-app-content .cc-extra-options .cc-pos-option-card,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options .cc-pos-option-card {
    padding: 10px 12px !important;
  }
}

/* Sell primary row: price / customer / date � equal one line */
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-row,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  column-gap: 20px !important;
  row-gap: 12px !important;
  width: 100% !important;
  clear: both !important;
  margin: 0 0 10px !important;
  align-items: end !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field > .form-group,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field > .form-group {
  margin-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field__label,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field__label {
  display: block !important;
  margin-bottom: 5px !important;
  line-height: 1.4 !important;
  min-height: 1.4em !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group > .form-control,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group > .form-control,
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group > .select2-container,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group > .select2-container {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .select2-container,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .select2-container {
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group-addon,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group-addon,
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group-btn,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group > .select2-container .select2-selection--single,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group > .select2-container .select2-selection--single {
  border-radius: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group > .input-group-addon:first-child,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group > .input-group-addon:first-child {
  margin-inline-end: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field .input-group > .select2-container,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field .input-group > .select2-container {
  margin: 0 !important;
}
/* Datepicker widget above sell form cards */
body > .bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 20050 !important;
}
/* Sell date picker (appended to body): force viewport-fixed placement via JS;
   neutralize library's wrong absolute bottom/right in RTL shells */
html body:not(.lockscreen) > .bootstrap-datetimepicker-widget {
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-row,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-row,
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field,
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field > .form-group,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field > .form-group,
html body:not(.lockscreen) .cc-app-content .cc-sell-date-group,
html body:not(.lockscreen) #scrollable-container .cc-sell-date-group {
  overflow: visible !important;
  position: relative !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-primary-field #transaction_date,
html body:not(.lockscreen) #scrollable-container .cc-sell-primary-field #transaction_date {
  cursor: pointer !important;
  pointer-events: auto !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-date-group > .input-group-addon,
html body:not(.lockscreen) #scrollable-container .cc-sell-date-group > .input-group-addon {
  cursor: pointer !important;
  pointer-events: auto !important;
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-app-content .cc-sell-primary-row,
  html body:not(.lockscreen) #scrollable-container .cc-sell-primary-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
}

html body:not(.lockscreen) .cc-app-content .cc-final-total-bar,
html body:not(.lockscreen) #scrollable-container .cc-final-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1.5px solid #BFDBFE;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}

html body:not(.lockscreen) .cc-app-content .cc-final-total-bar__label,
html body:not(.lockscreen) #scrollable-container .cc-final-total-bar__label {
  font-size: 14px;
  font-weight: 700;
  color: #1E40AF;
}

html body:not(.lockscreen) .cc-app-content .cc-final-total-bar__value,
html body:not(.lockscreen) #scrollable-container .cc-final-total-bar__value {
  font-size: 22px;
  font-weight: 800;
  color: #1D4ED8;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

html body:not(.lockscreen) .cc-app-content .cc-form-actions,
html body:not(.lockscreen) #scrollable-container .cc-form-actions {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ---------- Primary action buttons ? brand blue?green gradient; skipped on POS via layout ---------- */
html body:not(.lockscreen) .cc-app-content .tw-dw-btn-primary,
html body:not(.lockscreen) #scrollable-container .tw-dw-btn-primary,
html body:not(.lockscreen) .cc-app-content .btn-primary,
html body:not(.lockscreen) #scrollable-container .btn-primary,
html body:not(.lockscreen) .cc-app-content a.btn-primary,
html body:not(.lockscreen) #scrollable-container a.btn-primary,
html body .modal:not(.cc-sku-scan-modal) .tw-dw-btn-primary,
html body .modal:not(.cc-sku-scan-modal) .btn-primary {
  background: linear-gradient(90deg, #2B58FB 0%, #14B8A6 48%, #22C55E 100%) !important;
  background-image: linear-gradient(90deg, #2B58FB 0%, #14B8A6 48%, #22C55E 100%) !important;
  background-color: #2B58FB !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(43, 88, 251, 0.28) !important;
}
html body:not(.lockscreen) .cc-app-content .tw-dw-btn-primary:hover,
html body:not(.lockscreen) #scrollable-container .tw-dw-btn-primary:hover,
html body:not(.lockscreen) .cc-app-content .btn-primary:hover,
html body:not(.lockscreen) #scrollable-container .btn-primary:hover,
html body:not(.lockscreen) .cc-app-content .tw-dw-btn-primary:focus,
html body:not(.lockscreen) #scrollable-container .tw-dw-btn-primary:focus,
html body:not(.lockscreen) .cc-app-content .btn-primary:focus,
html body:not(.lockscreen) #scrollable-container .btn-primary:focus,
html body .modal:not(.cc-sku-scan-modal) .tw-dw-btn-primary:hover,
html body .modal:not(.cc-sku-scan-modal) .btn-primary:hover {
  background: linear-gradient(90deg, #1D4ED8 0%, #0D9488 48%, #16A34A 100%) !important;
  background-image: linear-gradient(90deg, #1D4ED8 0%, #0D9488 48%, #16A34A 100%) !important;
  border: none !important;
  color: #fff !important;
}

/* Update product price � instructions checklist */
html body:not(.lockscreen) .cc-app-content .cc-price-instructions,
html body:not(.lockscreen) #scrollable-container .cc-price-instructions {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}
html body:not(.lockscreen) .cc-app-content .cc-price-instructions__title,
html body:not(.lockscreen) #scrollable-container .cc-price-instructions__title {
  margin: 0 0 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}
html body:not(.lockscreen) .cc-app-content .cc-price-instructions__list,
html body:not(.lockscreen) #scrollable-container .cc-price-instructions__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html body:not(.lockscreen) .cc-app-content .cc-price-instructions__list > li,
html body:not(.lockscreen) #scrollable-container .cc-price-instructions__list > li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 28px !important;
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .cc-price-instructions__list > li,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .cc-price-instructions__list > li,
html[lang="ar"] body:not(.lockscreen) .cc-app-content .cc-price-instructions__list > li,
html[lang="ar"] body:not(.lockscreen) #scrollable-container .cc-price-instructions__list > li {
  padding: 0 28px 0 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-price-instructions__list > li::before,
html body:not(.lockscreen) #scrollable-container .cc-price-instructions__list > li::before {
  content: "\f00c";
  font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(43, 88, 251, 0.12);
  color: #2B58FB;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .cc-price-instructions__list > li::before,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .cc-price-instructions__list > li::before,
html[lang="ar"] body:not(.lockscreen) .cc-app-content .cc-price-instructions__list > li::before,
html[lang="ar"] body:not(.lockscreen) #scrollable-container .cc-price-instructions__list > li::before {
  left: auto;
  right: 0;
}

/* =========================================================
   Import pages � panel layout + collapsed instructions
   (native <details>, no JS; skipped on POS via layout)
   ========================================================= */
html body:not(.lockscreen) .cc-app-content .cc-import-panel,
html body:not(.lockscreen) #scrollable-container .cc-import-panel {
  display: block;
}
html body:not(.lockscreen) .cc-app-content .cc-import-panel__row,
html body:not(.lockscreen) #scrollable-container .cc-import-panel__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
}
html body:not(.lockscreen) .cc-app-content .cc-import-panel__file,
html body:not(.lockscreen) #scrollable-container .cc-import-panel__file {
  flex: 1 1 260px;
  min-width: 0;
  margin-bottom: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-import-panel__actions,
html body:not(.lockscreen) #scrollable-container .cc-import-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}
html body:not(.lockscreen) .cc-app-content .cc-import-panel__actions .tw-dw-btn,
html body:not(.lockscreen) #scrollable-container .cc-import-panel__actions .tw-dw-btn {
  min-height: 40px;
}

html body:not(.lockscreen) .cc-app-content .cc-import-instructions,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions,
html body .modal .cc-import-instructions {
  margin: 0 0 8px;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  background: #F8FAFC;
  overflow: hidden;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__bar,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__bar,
html body .modal .cc-import-instructions__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: #0F172A;
  font-weight: 700;
  font-size: 15px;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__bar::-webkit-details-marker,
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__bar::marker,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__bar::-webkit-details-marker,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__bar::marker,
html body .modal .cc-import-instructions__bar::-webkit-details-marker,
html body .modal .cc-import-instructions__bar::marker {
  display: none;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__title,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__title,
html body .modal .cc-import-instructions__title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__title > .fa,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__title > .fa,
html body .modal .cc-import-instructions__title > .fa {
  color: #2B58FB;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__hint,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__hint,
html body .modal .cc-import-instructions__hint {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__chevron,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__chevron,
html body .modal .cc-import-instructions__chevron {
  color: #94A3B8;
  font-size: 12px;
  transition: transform .15s ease;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions[open] .cc-import-instructions__chevron,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions[open] .cc-import-instructions__chevron,
html body .modal .cc-import-instructions[open] .cc-import-instructions__chevron {
  transform: rotate(180deg);
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions[open] .cc-import-instructions__hint,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions[open] .cc-import-instructions__hint,
html body .modal .cc-import-instructions[open] .cc-import-instructions__hint {
  display: none;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__body,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__body,
html body .modal .cc-import-instructions__body {
  padding: 4px 16px 16px;
  border-top: 1px solid #E2E8F0;
  background: #fff;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__intro,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__intro,
html body .modal .cc-import-instructions__intro {
  margin: 12px 0 14px;
  color: #334155;
  line-height: 1.55;
}
html body:not(.lockscreen) .cc-app-content .cc-import-instructions__table,
html body:not(.lockscreen) #scrollable-container .cc-import-instructions__table,
html body .modal .cc-import-instructions__table {
  margin-bottom: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-import-panel .cc-import-instructions,
html body:not(.lockscreen) #scrollable-container .cc-import-panel .cc-import-instructions {
  margin-top: 18px;
}

@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-app-content .cc-import-panel__actions,
  html body:not(.lockscreen) #scrollable-container .cc-import-panel__actions {
    width: 100%;
  }
  html body:not(.lockscreen) .cc-app-content .cc-import-panel__actions .tw-dw-btn,
  html body:not(.lockscreen) #scrollable-container .cc-import-panel__actions .tw-dw-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Sell product search: seamless merged bar � no inner rounded corners (non-POS) */
html body:not(.lockscreen) .cc-app-content .cc-sell-search-group,
html body:not(.lockscreen) #scrollable-container .cc-sell-search-group,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .cc-sell-search-group,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .cc-sell-search-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  column-gap: 0 !important;
  width: 100% !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-search-group > *,
html body:not(.lockscreen) #scrollable-container .cc-sell-search-group > *,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .cc-sell-search-group > *,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .cc-sell-search-group > * {
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .form-control,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .form-control,
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > #search_product,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > #search_product,
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > input.form-control,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > input.form-control,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .form-control,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .form-control,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > #search_product,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > #search_product,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > input.form-control,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > input.form-control {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding-inline: 14px !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  outline: none !important;
}
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn {
  display: flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #EFF6FF !important;
}
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn,
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default,
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 46px !important;
  width: 46px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #2563EB !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Never force-show camera barcode on desktop sell search */
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default.cc-mobile-product-scan-btn,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default.cc-mobile-product-scan-btn,
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat.cc-mobile-product-scan-btn,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat.cc-mobile-product-scan-btn {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-search-group > .input-group-btn > .btn .fa,
html body:not(.lockscreen) #scrollable-container .cc-sell-search-group > .input-group-btn > .btn .fa,
html body:not(.lockscreen) .cc-app-content .cc-sell-search-group > .input-group-btn > .btn .fas,
html body:not(.lockscreen) #scrollable-container .cc-sell-search-group > .input-group-btn > .btn .fas,
html body:not(.lockscreen) .cc-app-content .cc-sell-search-group > .input-group-btn > .btn .text-primary,
html body:not(.lockscreen) #scrollable-container .cc-sell-search-group > .input-group-btn > .btn .text-primary {
  display: inline-block !important;
  color: #2563EB !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-search-group > .input-group-btn > .btn:hover,
html body:not(.lockscreen) #scrollable-container .cc-sell-search-group > .input-group-btn > .btn:hover {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
  border-radius: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-search-group:focus-within,
html body:not(.lockscreen) #scrollable-container .cc-sell-search-group:focus-within {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Product-search camera barcode — desktop hidden; mobile/tablet only */
html body:not(.lockscreen) .cc-mobile-product-scan-btn,
html body:not(.lockscreen) .cc-app-content .cc-mobile-product-scan-btn,
html body:not(.lockscreen) #scrollable-container .cc-mobile-product-scan-btn,
html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 992px) {
  html body:not(.lockscreen) .cc-mobile-product-scan-btn,
  html body:not(.lockscreen) .cc-app-content .cc-mobile-product-scan-btn,
  html body:not(.lockscreen) #scrollable-container .cc-mobile-product-scan-btn,
  html body:not(.lockscreen) button.cc-mobile-product-scan-btn,
  html body:not(.lockscreen) .btn.cc-mobile-product-scan-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-mobile-product-scan-btn,
  html body:not(.lockscreen) .cc-app-content .cc-mobile-product-scan-btn,
  html body:not(.lockscreen) #scrollable-container .cc-mobile-product-scan-btn,
  html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat.cc-mobile-product-scan-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #2563EB !important;
  }
}

@media (max-width: 991px) {
  /* Sell search: keep barcode + plus fully visible on mobile */
  html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn,
  html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn,
  html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn,
  html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  html body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) .cc-app-content .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-default.cc-mobile-product-scan-btn,
  html[dir="rtl"] body:not(.lockscreen) #scrollable-container .input-group.cc-sell-search-group > .input-group-btn > .btn.btn-flat.cc-mobile-product-scan-btn {
    display: inline-flex !important;
    visibility: visible !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}

/* Sell toggle bars: same full width as ������� �����ɻ (non-POS) */
html body:not(.lockscreen) .cc-sell-toggle-section,
html body:not(.lockscreen) .cc-app-content .cc-sell-toggle-section,
html body:not(.lockscreen) #scrollable-container .cc-sell-toggle-section {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) button.cc-sell-toggle-btn,
html body:not(.lockscreen) .cc-sell-toggle-btn,
html body:not(.lockscreen) .cc-app-content .cc-sell-toggle-btn,
html body:not(.lockscreen) #scrollable-container .cc-sell-toggle-btn,
html body:not(.lockscreen) .cc-app-content button.cc-sell-toggle-btn,
html body:not(.lockscreen) #scrollable-container button.cc-sell-toggle-btn {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  min-height: 36px !important;
  margin: 0 0 12px !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #2563EB 0%, #12B981 100%) !important;
  background-color: #2563EB !important;
  background-image: linear-gradient(90deg, #2563EB 0%, #12B981 100%) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  cursor: pointer !important;
  outline: none !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body:not(.lockscreen) button.cc-sell-toggle-btn:hover,
html body:not(.lockscreen) .cc-sell-toggle-btn:hover,
html body:not(.lockscreen) button.cc-sell-toggle-btn:focus,
html body:not(.lockscreen) .cc-sell-toggle-btn:focus {
  color: #fff !important;
  filter: brightness(1.05);
  background: linear-gradient(90deg, #2563EB 0%, #12B981 100%) !important;
  background-image: linear-gradient(90deg, #2563EB 0%, #12B981 100%) !important;
}
html body:not(.lockscreen) .cc-sell-toggle-panel,
html body:not(.lockscreen) .cc-app-content .cc-sell-toggle-panel,
html body:not(.lockscreen) #scrollable-container .cc-sell-toggle-panel {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  clear: both !important;
}

/* =========================================================
   Sell products table � image-2 compact card rows (non-POS)
   ========================================================= */
html body:not(.lockscreen) .cc-app-content .cc-sell-products,
html body:not(.lockscreen) #scrollable-container .cc-sell-products {
  margin-top: 4px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .table-responsive,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .table-responsive {
  overflow-x: auto !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table,
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  background: transparent !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th,
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th {
  border: 0 !important;
  background: transparent !important;
  color: #1e3a8a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 4px 8px 8px !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th.cc-sell-th-product,
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th.cc-sell-th-product {
  text-align: start !important;
  padding-inline-start: 8px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > tbody,
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > tbody {
  counter-reset: cc-sell-row;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > tbody > tr.product_row,
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > tbody > tr.product_row {
  background: transparent !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > tbody > tr.product_row > td,
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > tbody > tr.product_row > td {
  border: 0 !important;
  background: transparent !important;
  padding: 4px 6px !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table.table-striped > tbody > tr:nth-of-type(odd),
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table.table-striped > tbody > tr:nth-of-type(odd),
html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table.table-striped > tbody > tr:nth-of-type(even),
html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table.table-striped > tbody > tr:nth-of-type(even) {
  background: transparent !important;
}

/* Serial column */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-serial,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-serial,
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-th-serial,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-th-serial {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 48px !important;
  padding-inline: 4px !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-row-num,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-row-num {
  counter-increment: cc-sell-row;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-row-num::before,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-row-num::before {
  content: counter(cc-sell-row);
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-item-card,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-item-card {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 6px 10px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 10px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-item-card__img,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-item-card__img {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-item-card__meta,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-item-card__meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: start !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-item-card__name,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-item-card__name {
  display: block !important;
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-item-card__sub,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-item-card__sub {
  display: block !important;
  color: #6B7280 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-item-card__chevron,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-item-card__chevron {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #6B7280 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-item-card__chevron.is-open i,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-item-card__chevron.is-open i {
  transform: rotate(180deg);
}

/* Line note: same field, folded until the note icon is pressed */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-note-toggle,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-note-toggle {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: auto !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 1px solid #F5D78A !important;
  border-radius: 8px !important;
  background: #FFFBEB !important;
  color: #B45309 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-note-toggle .fa-sticky-note,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-note-toggle .fa-sticky-note {
  font-size: 13px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-note-toggle .fa-chevron-down,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-note-toggle .fa-chevron-down {
  font-size: 10px !important;
  transition: transform 0.2s ease;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-note-toggle.is-open,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-note-toggle.is-open {
  background: #FEF3C7 !important;
  border-color: #F59E0B !important;
  color: #92400E !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-note-toggle.is-open .fa-chevron-down,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-note-toggle.is-open .fa-chevron-down {
  transform: rotate(180deg);
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-line-note-panel,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-line-note-panel {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-line-note-panel.is-open,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-line-note-panel.is-open {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 6px 0 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-line-note,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-line-note,
html body:not(.lockscreen) .cc-app-content .cc-sell-products textarea.form-control.cc-sell-line-note,
html body:not(.lockscreen) #scrollable-container .cc-sell-products textarea.form-control.cc-sell-line-note {
  display: block !important;
  width: 100% !important;
  /* No height:!important — it blocks native drag-resize */
  min-height: 40px !important;
  max-height: 240px !important;
  height: 40px;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #F5D78A !important;
  border-radius: 10px !important;
  background: #FFFBEB !important;
  box-shadow: none !important;
  resize: vertical !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-pos-lot-panel:not(.is-open),
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-pos-lot-panel:not(.is-open) {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-pos-lot-panel.is-open,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-pos-lot-panel.is-open {
  display: block !important;
  margin-top: 8px !important;
  width: 100% !important;
}

/* Money fields (price / discount) */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-money,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-money {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 96px !important;
  max-width: 130px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  overflow: hidden !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-money > .form-control,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-money > .form-control {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #111827 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-money__cur,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-money__cur {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  padding: 0 8px !important;
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border: 0 !important;
}

/* Qty stepper */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty {
  width: 1% !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .casher__quantity,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .casher__quantity {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .input-group.input-number,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .input-group.input-number {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: 132px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .input-group.input-number > .input-group-btn,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .input-group.input-number > .input-group-btn {
  width: auto !important;
  display: flex !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .input-group.input-number > .input-group-btn > .btn,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .input-group.input-number > .input-group-btn > .btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #EFF6FF !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .quantity-down .fa,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .quantity-down .fa,
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .quantity-up .fa,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .quantity-up .fa {
  color: #2563EB !important;
  font-size: 13px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .pos_quantity,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .pos_quantity {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 64px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-inline: 1px solid #E5E7EB !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
/* Keep secondary-unit extras hidden; show sub_unit select + unit label */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .casher__quantity > br,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .casher__quantity > br {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .casher__quantity > :not(.input-group):not(input):not(select):not(.cc-sell-unit-label),
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .casher__quantity > :not(.input-group):not(input):not(select):not(.cc-sell-unit-label) {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty select.sub_unit,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty select.sub_unit,
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty select.form-control.sub_unit,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty select.form-control.sub_unit,
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty select.form-control.input-sm.sub_unit,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty select.form-control.input-sm.sub_unit {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 132px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 auto !important;
  padding: 4px 8px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 8px !important;
  background: #EFF6FF !important;
  box-shadow: none !important;
  color: #1E3A8A !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-align-last: center !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  overflow: visible !important;
}

/* Discount: amount only in row (type kept in DOM) */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-discount-pair,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-discount-pair {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
  max-width: 130px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-discount-type,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-discount-type,
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-prev-discount,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-prev-discount,
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-discount .help-block,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-discount .help-block {
  display: none !important;
}

/* Warranty */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-warranty,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-warranty {
  min-width: 120px !important;
  max-width: 160px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-warranty .form-control,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-warranty .form-control {
  height: 40px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

/* Total */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-total,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-total {
  min-width: 96px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-total .pos_line_total_text,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-total .pos_line_total_text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  width: 100% !important;
  padding: 6px 10px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 10px !important;
  background: #EFF6FF !important;
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
/* Keep editable-subtotal mode: show input only, never both */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-total .pos_line_total_text.hide,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-total .pos_line_total_text.hide {
  display: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-total .pos_line_total:not([type="hidden"]),
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-total .pos_line_total:not([type="hidden"]) {
  height: 40px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 10px !important;
  background: #EFF6FF !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* Delete chip */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-actions,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-actions {
  width: 48px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-remove-btn,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-remove-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #FEE2E2 !important;
  color: #DC2626 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-remove-btn:hover,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-remove-btn:hover {
  background: #FECACA !important;
  color: #B91C1C !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-remove-btn .fa,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-remove-btn .fa {
  color: inherit !important;
  font-size: 14px !important;
}

/* Price / discount column widths */
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-price,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-price,
html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-discount,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-discount {
  width: 1% !important;
  white-space: nowrap !important;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th.cc-sell-th-product,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th.cc-sell-th-product {
    padding-inline-start: 8px !important;
  }
}

html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-unit-label,
html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-unit-label {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 132px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 auto !important;
  padding: 4px 8px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 8px !important;
  background: #EFF6FF !important;
  color: #1E3A8A !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Sell totals bar — image-2 summary (non-POS)
   ========================================================= */
html body:not(.lockscreen) .cc-app-content .cc-sell-products-wrap,
html body:not(.lockscreen) #scrollable-container .cc-sell-products-wrap {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-products-wrap > .pos_product_div.cc-sell-products,
html body:not(.lockscreen) #scrollable-container .cc-sell-products-wrap > .pos_product_div.cc-sell-products {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  max-height: 50vh !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar,
html body:not(.lockscreen) .cc-sell-totals-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important; /* يسار الشاشة في RTL */
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  float: none !important;
  margin: 12px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 14px !important;
  background: #F0F7FF !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.06) !important;
  box-sizing: border-box !important;
  color: #1E3A8A !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__inner,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__inner,
html body:not(.lockscreen) .cc-sell-totals-bar__inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px 14px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__icon,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__icon,
html body:not(.lockscreen) .cc-sell-totals-bar__icon {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  order: 99 !important;
  margin-inline-start: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #93C5FD !important;
  border-radius: 50% !important;
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__icon .fa,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__icon .fa,
html body:not(.lockscreen) .cc-sell-totals-bar__icon .fa,
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__icon .fas,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__icon .fas,
html body:not(.lockscreen) .cc-sell-totals-bar__icon .fas {
  font-size: 14px !important;
  color: inherit !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__item,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__item,
html body:not(.lockscreen) .cc-sell-totals-bar__item {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  color: #1E3A8A !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__label,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__label,
html body:not(.lockscreen) .cc-sell-totals-bar__label {
  color: #1E3A8A !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar .total_quantity,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar .total_quantity,
html body:not(.lockscreen) .cc-sell-totals-bar .total_quantity,
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar .price_total,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar .price_total,
html body:not(.lockscreen) .cc-sell-totals-bar .price_total {
  color: #1E3A8A !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-total-amount,
html body:not(.lockscreen) #scrollable-container .cc-sell-total-amount,
html body:not(.lockscreen) .cc-sell-total-amount {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
}
/* MultiCurrency injects its switch after .price_total.
   Keep it visually after the complete amount (to the left in RTL). */
html body:not(.lockscreen) .cc-app-content .cc-sell-total-amount > .mc-currency-icon-wrap,
html body:not(.lockscreen) #scrollable-container .cc-sell-total-amount > .mc-currency-icon-wrap,
html body:not(.lockscreen) .cc-sell-total-amount > .mc-currency-icon-wrap {
  order: -1 !important;
  flex: 0 0 auto !important;
  margin: 0 6px 0 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__cur,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__cur,
html body:not(.lockscreen) .cc-sell-totals-bar__cur {
  color: #1E3A8A !important;
  font-weight: 700 !important;
  font-family: Cairo, Tahoma, Arial, sans-serif !important;
  unicode-bidi: isolate !important;
  direction: ltr !important;
  display: inline-block !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__sep,
html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__sep,
html body:not(.lockscreen) .cc-sell-totals-bar__sep {
  flex: 0 0 1px !important;
  width: 1px !important;
  height: 20px !important;
  background: #CBD5E1 !important;
  border: 0 !important;
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar,
  html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar,
  html body:not(.lockscreen) .cc-sell-totals-bar {
    justify-content: flex-end !important;
    padding: 10px 12px !important;
    margin-top: 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    gap: 8px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__inner,
  html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__inner,
  html body:not(.lockscreen) .cc-sell-totals-bar__inner {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 8px 10px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__icon,
  html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__icon,
  html body:not(.lockscreen) .cc-sell-totals-bar__icon {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__sep,
  html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__sep,
  html body:not(.lockscreen) .cc-sell-totals-bar__sep {
    display: none !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__item,
  html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__item,
  html body:not(.lockscreen) .cc-sell-totals-bar__item {
    gap: 4px !important;
  }
}
@media (max-width: 480px) {
  html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar,
  html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar,
  html body:not(.lockscreen) .cc-sell-totals-bar {
    padding: 10px !important;
    font-size: 12px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-totals-bar__inner,
  html body:not(.lockscreen) #scrollable-container .cc-sell-totals-bar__inner,
  html body:not(.lockscreen) .cc-sell-totals-bar__inner {
    justify-content: flex-end !important;
    row-gap: 8px !important;
  }
}

/* =========================================================
   Direct-sell option cards — POS-like presentation, no toggle
   ========================================================= */
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards {
  margin: 0 0 16px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-options__body,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-options__body {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-grid,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: stretch !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field {
  flex: 1 0 calc((100% - 50px) / 6) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  padding: 10px !important;
  border: 1px solid #DDE3EA !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field > .form-group,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field > .form-group {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field > .form-group:has(> i.hover-q),
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field > .form-group:has(> i.hover-q) {
  position: relative !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field > .form-group > i.hover-q,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field > .form-group > i.hover-q {
  position: absolute !important;
  top: 37px !important;
  left: calc(50% - 43px) !important;
  z-index: 2 !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field > .form-group > label,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field > .form-group > label,
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-document-label-row > label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 42px !important;
  margin: 0 0 7px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field > .form-group > label::before,
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-document-label-row > label::before {
  content: "\f044" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="types_of_service_id"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="types_of_service_id"]::before,
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="types_of_service_text"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="types_of_service_text"]::before {
  content: "\f562" !important;
  background: #ECFDF5 !important;
  color: #0EA5A4 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="pay_term_number"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="pay_term_number"]::before {
  content: "\f254" !important;
  background: #EFF6FF !important;
  color: #2563EB !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="commission_agent"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="commission_agent"]::before {
  content: "\f508" !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="status"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="status"]::before {
  content: "\f058" !important;
  background: #ECFEFF !important;
  color: #0EA5E9 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="invoice_scheme_id"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="invoice_scheme_id"]::before {
  content: "\f570" !important;
  background: #F5F3FF !important;
  color: #7C3AED !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="invoice_no"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="invoice_no"]::before {
  content: "\f543" !important;
  background: #FFF7ED !important;
  color: #D97706 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards label[for="upload_document"]::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards label[for="upload_document"]::before {
  content: "\f382" !important;
  background: #EEF2FF !important;
  color: #4F46E5 !important;
}
/* Explicit semantic icons per card type (stable even when field IDs vary). */
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--service > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--service > .form-group > label::before {
  content: "\f0f2" !important; /* briefcase / service */
  background: #ECFDF5 !important;
  color: #059669 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--pay-term > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--pay-term > .form-group > label::before {
  content: "\f017" !important; /* clock */
  background: #EFF6FF !important;
  color: #2563EB !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--agent > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--agent > .form-group > label::before {
  content: "\f007" !important; /* sales agent */
  background: #ECFDF5 !important;
  color: #0F9F6E !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--status > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--status > .form-group > label::before {
  content: "\f058" !important; /* status */
  background: #ECFEFF !important;
  color: #0891B2 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--invoice-scheme > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--invoice-scheme > .form-group > label::before {
  content: "\f15c" !important; /* invoice document */
  background: #F5F3FF !important;
  color: #7C3AED !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--invoice-number > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--invoice-number > .form-group > label::before {
  content: "\f02a" !important; /* invoice number / barcode */
  background: #FFF7ED !important;
  color: #D97706 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--custom > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--custom > .form-group > label::before {
  content: "\f040" !important; /* custom field / pencil */
  background: #F1F5F9 !important;
  color: #475569 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--document > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--document > .form-group > label::before,
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-field--document .cc-extra-document-label-row > label::before {
  content: "\f0c6" !important; /* attachment */
  background: #EEF2FF !important;
  color: #4F46E5 !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-document-label-row {
  display: flex !important;
  direction: rtl !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 0 7px !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-document-label-row > label {
  min-height: 42px !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-document-label-row > i.hover-q {
  position: static !important;
  flex: 0 0 auto !important;
  margin: 0 0 2px !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-field--document > .form-group {
  position: relative !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-field--document .cc-clear-sell-document {
  position: absolute !important;
  left: 7px !important;
  bottom: 8px !important;
  z-index: 5 !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 8px !important;
  line-height: 18px !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.25) !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-field--document .cc-clear-sell-document:hover {
  background: #dc2626 !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-field--document .file-caption {
  padding-left: 34px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field.cc-extra-field--sale-date > .form-group > label::before,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field.cc-extra-field--sale-date > .form-group > label::before {
  content: "\f073" !important; /* calendar */
  background: #EFF6FF !important;
  color: #2563EB !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field--sale-date,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field--sale-date,
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field--sale-date .cc-sell-date-group,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field--sale-date .cc-sell-date-group {
  overflow: visible !important;
  position: relative !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field--sale-date #transaction_date,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field--sale-date #transaction_date {
  cursor: pointer !important;
  pointer-events: auto !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .form-control,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .form-control,
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .select2-container,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .form-control,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .form-control,
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .select2-selection,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .select2-selection {
  min-height: 34px !important;
  border-color: #DDE3EA !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .input-group,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .input-group {
  width: 100% !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .help-block,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .help-block {
  margin: 5px 0 0 !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* Checkbox and order cards use the same single-card shell. */
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-check,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-check,
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-chip,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-chip {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-check,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-check {
  justify-content: center !important;
  flex-direction: column !important;
  position: relative !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-check > i.hover-q,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-check > i.hover-q {
  position: absolute !important;
  bottom: 17px !important;
  left: calc(50% - 43px) !important;
  z-index: 2 !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-check__label {
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-check__label::before {
  content: "\f2f1" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #FFF7ED !important;
  color: #D97706 !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-check__link,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-check__link {
  position: absolute !important;
  inset-inline-start: 8px !important;
  top: 8px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field--check,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field--check {
  position: relative !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-chip {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-chip__icon,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-chip__icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-chip__body,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-chip__body {
  width: 100% !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-chip__body > label,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-chip__body > label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* Restaurant cards form the wide second row like the cashier. */
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field--restaurant,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field--restaurant {
  display: contents !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field--restaurant #restaurant_module_span,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field--restaurant #restaurant_module_span {
  display: contents !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-item,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-item {
  flex: 1 0 calc((100% - 50px) / 6) !important;
  height: auto !important;
  min-height: 124px !important;
  max-height: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-card,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-card {
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  height: auto !important;
  min-height: 124px !important;
  max-height: none !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  overflow: visible !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-item > label.error,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-item > label.error,
html body.lockscreen .cc-pos-option-item label.error,
html body.lockscreen #res_waiter_id-error {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  text-align: center !important;
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-card__icon,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-card__icon {
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-card__title,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-card__title {
  display: block !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-card__control,
html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-card__control {
  width: 100% !important;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-item,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-item {
    flex-basis: calc((100% - 30px) / 4) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-grid,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-grid {
    gap: 8px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-item,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-item {
    flex-basis: calc((100% - 8px) / 2) !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field {
    padding: 8px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field--restaurant #restaurant_module_span,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field--restaurant #restaurant_module_span {
    display: contents !important;
  }
}
@media (max-width: 420px) {
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-item,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-item {
    flex-basis: 100% !important;
  }
}

/* Keep wide product columns from creating a page-level scrollbar.
   The product table retains its own horizontal scrolling. */
html body:not(.lockscreen) .cc-app-content .cc-sell-page,
html body:not(.lockscreen) #scrollable-container .cc-sell-page,
html body:not(.lockscreen) .cc-sell-page form#add_sell_form,
html body:not(.lockscreen) .cc-sell-page form#edit_sell_form {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-sell-page .cc-sell-products-wrap,
html body:not(.lockscreen) .cc-sell-page .cc-sell-products,
html body:not(.lockscreen) .cc-sell-page .cc-extra-options--cards {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-sell-page .cc-sell-products .table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

/* Direct-sell discount layout only; the cashier/POS screen is excluded. */
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-grid > [class*="col-md-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-grid > .clearfix {
  display: none !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-field,
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-tax {
  order: 1;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-rewards {
  display: none !important;
  order: 2;
  grid-column: 1 / -1 !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-note {
  order: 3;
  grid-column: 1 / -1 !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-field .form-group,
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-tax .form-group {
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-grid .input-group,
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-grid .form-control {
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-inline-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 9px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: #334155 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-note textarea {
  width: 100% !important;
  min-height: 90px !important;
  resize: vertical !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-sell-page #discountContainer .cc-discount-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Direct-sell shipping: auto-flow fields so disabled options leave no gaps. */
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px 18px !important;
  align-items: start !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body::before,
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body > [class*="col-md-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body > .clearfix {
  display: none !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body > .col-md-12,
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body > #additional_expenses_div {
  grid-column: 1 / -1 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .form-group {
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer textarea.form-control {
  width: 100% !important;
  min-height: 62px !important;
  resize: vertical !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .input-group,
html body:not(.lockscreen) .cc-sell-page #shipContainer .form-control,
html body:not(.lockscreen) .cc-sell-page #shipContainer .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .file-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .file-input .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  overflow: hidden !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .file-input .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .file-input .btn,
html body:not(.lockscreen) .cc-sell-page #shipContainer .file-input .input-group-btn {
  position: static !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .file-input .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .fileinput-remove-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 0 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .cc-clear-shipping-documents {
  margin-top: 8px !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .cc-clear-shipping-documents:hover {
  background: #dc2626 !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .help-block {
  margin: 5px 0 0 !important;
  overflow-wrap: anywhere !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body > .col-md-12.text-center {
  margin-top: 14px !important;
}
html body:not(.lockscreen) .cc-sell-page #shipContainer #toggle_additional_expense {
  margin-top: 24px !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-sell-page #shipContainer .box-body {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* مربعات الشحن/العنوان بنفس ارتفاع الحقول الأخرى على الجوال فقط */
  html body:not(.lockscreen) .cc-sell-page #shipContainer textarea.form-control,
  html body:not(.lockscreen) .cc-sell-page #shipContainer textarea#shipping_details,
  html body:not(.lockscreen) .cc-sell-page #shipContainer textarea#shipping_address {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 1.25 !important;
    resize: none !important;
    overflow: hidden !important;
  }
  /* تمييز مربع الرصيد (إجمالي المستحق) على الجوال */
  html body:not(.lockscreen) .cc-sell-page .cc-sell-total-payable {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #86efac !important;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #065f46 !important;
  }
  html body:not(.lockscreen) .cc-sell-page .cc-sell-total-payable #total_payable {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #047857 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* صف الأصناف: تمرير أفقي + مسافات أوضح حتى يظهر +/- */
  html body:not(.lockscreen) .cc-app-content .cc-sell-products .table-responsive,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: thin !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table {
    min-width: 720px !important;
    width: max-content !important;
    max-width: none !important;
    border-spacing: 0 10px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > thead > tr > th,
  html body:not(.lockscreen) .cc-app-content .cc-sell-products #pos_table.cc-sell-pos-table > tbody > tr.product_row > td,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products #pos_table.cc-sell-pos-table > tbody > tr.product_row > td {
    padding-inline: 10px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .input-group.input-number,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .input-group.input-number {
    max-width: none !important;
    gap: 0 !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .casher__quantity,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .casher__quantity {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .input-group.input-number > .input-group-btn > .btn,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .input-group.input-number > .input-group-btn > .btn {
    width: 36px !important;
    min-width: 36px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-sell-products .cc-sell-col-qty .pos_quantity,
  html body:not(.lockscreen) #scrollable-container .cc-sell-products .cc-sell-col-qty .pos_quantity {
    width: 52px !important;
    min-width: 52px !important;
  }
}

/* Shared payment fields outside POS: four across, responsive, CSS-only. */
html body:not(.lockscreen) .cc-payment-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-payment-fields-grid.hide {
  display: none !important;
}

/* Hide "apply service staff to all rows" control on direct-sell cards only. */
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-field--restaurant
  #restaurant_module_span .cc-pos-hide-tooltip,
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-field--restaurant
  #select_all_service_staff {
  display: none !important;
}
html body:not(.lockscreen) .cc-payment-fields-grid::before,
html body:not(.lockscreen) .cc-payment-fields-grid::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-payment-fields-grid > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-payment-fields-grid > .clearfix {
  display: none !important;
}
html body:not(.lockscreen) .cc-payment-fields-grid > .col-md-12,
html body:not(.lockscreen) .cc-payment-fields-grid > .payment_details_div {
  grid-column: 1 / -1 !important;
}
html body:not(.lockscreen) .cc-payment-fields-grid .form-group {
  min-width: 0 !important;
  margin-bottom: 0 !important;
}
html body:not(.lockscreen) .cc-payment-fields-grid .input-group,
html body:not(.lockscreen) .cc-payment-fields-grid .form-control,
html body:not(.lockscreen) .cc-payment-fields-grid .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-payment-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-payment-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  html body:not(.lockscreen) .cc-payment-fields-grid > [class*="col-"] {
    grid-column: 1 / -1 !important;
  }
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-method-field,
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-account-field {
    grid-column: auto !important;
  }
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-method-field label,
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-account-field label {
    margin-bottom: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-method-field .form-control,
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-account-field .form-control,
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-method-field .select2-selection--single,
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-account-field .select2-selection--single {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11px !important;
  }
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-method-field .input-group-addon,
  html body:not(.lockscreen) .cc-payment-fields-grid > .cc-payment-account-field .input-group-addon {
    min-width: 34px !important;
    width: 34px !important;
    padding: 0 7px !important;
  }
  html body:not(.lockscreen) .cc-sell-balance-due {
    padding-top: 4px !important;
  }
  html body:not(.lockscreen) .cc-sell-balance-due > div {
    padding: 7px 10px !important;
    border-width: 1px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
  html body:not(.lockscreen) .cc-sell-balance-due > div strong,
  html body:not(.lockscreen) .cc-sell-balance-due > div .balance_due {
    font-size: inherit !important;
  }
}

/* Direct-sell extra cards: one swipeable row on phones only. */
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-grid,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-grid {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-grid::-webkit-scrollbar,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-grid::-webkit-scrollbar {
    display: none !important;
  }
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-extra-field,
  html body:not(.lockscreen) .cc-app-content .cc-extra-options--cards .cc-pos-option-item,
  html body:not(.lockscreen) #scrollable-container .cc-extra-options--cards .cc-pos-option-item {
    flex: 0 0 min(78vw, 220px) !important;
    width: min(78vw, 220px) !important;
    max-width: min(78vw, 220px) !important;
    scroll-snap-align: start;
  }
}

/* Purchase create/edit — lightweight, isolated layout. */
html body:not(.lockscreen) .cc-purchase-page {
  --cc-purchase-blue: #e8f5ff;
  --cc-purchase-blue-strong: #d7efff;
  --cc-purchase-ink: #27445d;
  --cc-purchase-border: #d8e6f0;
  overflow-x: hidden !important;
}
html body:not(.lockscreen) .cc-purchase-page .container {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .box {
  border: 1px solid rgba(60, 141, 188, 0.24) !important;
  border-top: 1px solid rgba(60, 141, 188, 0.24) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(60, 141, 188, 0.05) !important;
  overflow: visible !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding-inline: 8px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-custom-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid::before,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid::after,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-custom-grid::before,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-custom-grid::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid > [class*="col-"],
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-custom-grid > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html[dir="rtl"] body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-main-grid label[for="supplier_id"] + .input-group
  .input-group-btn:last-child > .btn {
  border-radius: 8px 0 0 8px !important;
  border-inline-start: 1px solid #d7e2eb !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-main-grid > [class*="col-"] .form-group {
  position: relative !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-main-grid > .cc-purchase-supplier-field {
  padding-left: 21px !important;
  padding-right: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .form-group {
  min-width: 0 !important;
  margin-bottom: 10px !important;
}
html body:not(.lockscreen) .cc-purchase-page .form-control,
html body:not(.lockscreen) .cc-purchase-page .input-group,
html body:not(.lockscreen) .cc-purchase-page .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .form-control,
html body:not(.lockscreen) .cc-purchase-page .select2-selection {
  min-height: 38px !important;
  border-color: #d7e2eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-purchase-page .input-group .form-control {
  border-radius: 0 8px 8px 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .input-group-addon,
html body:not(.lockscreen) .cc-purchase-page .input-group-btn > .btn {
  border-color: #d7e2eb !important;
  background: #f5fbff !important;
  color: #4386b5 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid label::before {
  display: inline-block !important;
  width: 18px !important;
  margin-inline-end: 5px !important;
  color: #2497d0 !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-purchase-page label[for="supplier_id"]::before { content: "\f007"; }
html body:not(.lockscreen) .cc-purchase-page label[for="ref_no"]::before { content: "\f02a"; }
html body:not(.lockscreen) .cc-purchase-page label[for="transaction_date"]::before { content: "\f073"; }
html body:not(.lockscreen) .cc-purchase-page label[for="status"]::before { content: "\f058"; }
html body:not(.lockscreen) .cc-purchase-page label[for="location_id"]::before { content: "\f3c5"; }
html body:not(.lockscreen) .cc-purchase-page label[for="exchange_rate"]::before { content: "\f362"; }
/* Hide supplier name/address echo under the dropdown only (create/edit purchase). */
html body:not(.lockscreen) .cc-purchase-page #supplier_address_div {
  display: none !important;
}

html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options {
  width: 100% !important;
  margin-top: 14px !important;
  overflow: hidden !important;
  border: 1px solid #cce8fa !important;
  border-radius: 10px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options__bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #eaf7ff, #dff2ff) !important;
  color: #246b98 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  list-style: none !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options__bar::-webkit-details-marker,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options__bar::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options__chevron {
  transition: transform .18s ease !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options[open] .cc-purchase-extra-options__chevron {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  padding: 14px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-field {
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid #e2ebf2 !important;
  border-radius: 9px !important;
  background: #fbfdff !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-field label::before {
  display: inline-block !important;
  margin-inline-end: 6px !important;
  color: #2b9bd3 !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-field--term label::before { content: "\f017"; }
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-field--orders label::before { content: "\f46d"; }
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-field--reference label::before { content: "\f02a"; }
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-field--status label::before { content: "\f058"; }
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-pay-term {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(100%, 1050px) !important;
  margin: 0 auto 12px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-row > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-row .form-group {
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-input {
  flex: 1 1 auto !important;
  width: auto !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-import {
  flex: 0 0 auto !important;
  transform: translateY(-7px) !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-import .tw-dw-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 40px !important;
  padding-inline: 14px !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 40px !important;
  overflow: hidden !important;
  border: 1px solid #cbd9e4 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group > * {
  margin: 0 !important;
  border-radius: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-product-search-group > .form-control {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  border: 0 !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-product-search-group > .input-group-addon,
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-product-search-group > .input-group-btn {
  display: flex !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: #f3f9fd !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-product-search-group > .input-group-addon {
  border-inline-end: 1px solid #dbe6ee !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-product-search-group > .input-group-btn {
  border-inline-start: 1px solid #dbe6ee !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-product-search-group > .input-group-btn > .btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important; /* keep wide table inside card so .table-responsive can scroll */
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card > .box-body,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card .row,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card [class*="col-"] {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* Must beat #scrollable-container .table-responsive { overflow-x: visible } from list-table CSS */
html body:not(.lockscreen) #scrollable-container .cc-purchase-page .cc-purchase-products-card .table-responsive,
html body:not(.lockscreen) .cc-app-content .cc-purchase-page .cc-purchase-products-card .table-responsive,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card .table-responsive {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
}
/* Desktop/normal: nudge table toward the visual left edge only (search/totals unchanged) */
@media (min-width: 768px) {
  html body:not(.lockscreen) #scrollable-container .cc-purchase-page .cc-purchase-products-card .table-responsive,
  html body:not(.lockscreen) .cc-app-content .cc-purchase-page .cc-purchase-products-card .table-responsive,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card .table-responsive {
    width: calc(100% + 14px) !important;
    max-width: none !important;
    margin-left: -14px !important;
    margin-right: 0 !important;
  }
}
html body:not(.lockscreen) #scrollable-container
  .cc-purchase-page .cc-purchase-products-card .table-responsive::-webkit-scrollbar,
html body:not(.lockscreen) .cc-app-content
  .cc-purchase-page .cc-purchase-products-card .table-responsive::-webkit-scrollbar,
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-products-card .table-responsive::-webkit-scrollbar {
  display: block !important;
  width: 0 !important;
  height: 4px !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-products-card .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(39, 68, 93, 0.35) !important;
  border-radius: 999px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table {
  min-width: 1180px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
/* عند تفعيل ضريبة الأصناف: مساحة كافية + تمرير أفقي بدل ضغط الأعمدة */
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table.cc-purchase-inline-tax,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax {
  min-width: 1680px !important;
  width: max(100%, 1680px) !important;
  table-layout: auto !important;
}
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax > thead > tr > th,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax > tbody > tr > td {
  overflow: visible !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax > tbody > tr > td:nth-child(2),
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax > thead > tr > th:nth-child(2) {
  white-space: normal !important;
  min-width: 180px !important;
}
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax .cc-purchase-inline-input-meta {
  min-width: 140px !important;
  max-width: 100% !important;
}
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax .purchase_line_tax_id,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax td .input-group {
  min-width: 170px !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax .purchase_unit_cost_after_tax,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax .purchase_unit_cost_without_discount,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax .inline_discounts,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax .default_sell_price {
  min-width: 88px !important;
}
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax .cc-purchase-col-total {
  min-width: 90px !important;
  max-width: none !important;
  width: auto !important;
}
html:has(body:not(.lockscreen) .cc-purchase-page),
body:not(.lockscreen):has(.cc-purchase-page),
body:not(.lockscreen):has(.cc-purchase-page) .content-wrapper {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > thead > tr > th,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > thead > tr > th {
  padding: 10px 8px !important;
  border: 1px solid #bcdff3 !important;
  background: var(--cc-purchase-blue-strong) !important;
  background-image: none !important;
  color: var(--cc-purchase-ink) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > tbody > tr > td {
  padding: 7px 6px !important;
  border-color: #dce8f0 !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row > .purchase_quantity {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: 32px !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row > .sub_unit,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row > select.sub_unit {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 2px 2px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-inline-input-meta {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 125px !important;
}
html body:not(.lockscreen) .cc-purchase-page
  .cc-purchase-inline-input-meta > .form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 55px !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-previous-value {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-height: 30px !important;
  padding: 4px 6px !important;
  border: 1px solid #d5e4ee !important;
  border-radius: 7px !important;
  background: #f5faff !important;
  color: #50738c !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-previous-value > i {
  color: #2d91c4 !important;
  font-size: 10px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-unit-name {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 2px 4px !important;
  border: 1px solid #d7e2eb !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > thead > tr > th:nth-child(3),
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > tbody > tr > td:nth-child(3),
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > thead > tr > th:nth-child(3),
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > tbody > tr > td:nth-child(3) {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-col-total,
html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table .cc-purchase-col-total {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-controls {
  min-width: 150px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid #c9dce9 !important;
  border-radius: 9px !important;
  background: #f5fbff !important;
  color: #2d85b8 !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-toggle--exp {
  color: #e38927 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-toggle.is-active,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-toggle:hover {
  border-color: #37a9c8 !important;
  background: #e8f7fb !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-field {
  display: none !important;
  margin-top: 7px !important;
  text-align: start !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-field.is-open {
  display: block !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-toggle.hide,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-field.hide {
  display: none !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-date-field > small {
  display: block !important;
  margin-bottom: 3px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html body:not(.lockscreen) .cc-purchase-page .cc-purchase-toggle-section {
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-toggle-btn {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 0 10px !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, #2563eb 0%, #12b981 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 7px rgba(37, 99, 235, .16) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-field,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-notes {
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-notes {
  grid-column: 1 / -1 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-inline-summary {
  min-height: 24px !important;
  margin-top: 5px !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  background: #f5f9fc !important;
  color: #40566a !important;
  font-size: 12px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-notes textarea {
  min-height: 72px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-main,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-custom {
  display: grid !important;
  gap: 14px !important;
  margin: 0 0 12px !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-main {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-custom {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-main::before,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-main::after,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-custom::before,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-custom::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-main > [class*="col-"],
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-custom > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-expenses,
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-total {
  margin-inline: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-expenses > [class*="col-"],
html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-total > [class*="col-"] {
  margin-inline: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-page #additional_expenses_div {
  width: 100% !important;
  overflow-x: auto !important;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-custom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-grid,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-custom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Tablet/mobile: barcode + plus visible; do not touch import button position */
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group {
    overflow: hidden !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .input-group-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .input-group-btn > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn {
    display: inline-flex !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 40px !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
    border-inline-end: 1px solid #dbe6ee !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-purchase-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .box-body {
    padding: 4px 8px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .form-group {
    margin-bottom: 4px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-custom-grid,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options__grid,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-grid,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-main,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-shipping-custom {
    grid-template-columns: 1fr !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-main-grid {
    row-gap: 3px !important;
    gap: 3px !important;
    padding-inline: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-main-grid > .cc-purchase-supplier-field {
    padding-left: 30px !important;
    padding-right: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-extra-options__grid,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-discount-grid {
    gap: 6px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-row {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-row > [class*="col-"] {
    width: auto !important;
    padding: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-import .tw-dw-btn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-import-label {
    display: none !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-search-import {
    transform: translateY(-10px) !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group,
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .form-control {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-product-search-group {
    overflow: hidden !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .input-group-addon {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .input-group-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
    height: 40px !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .input-group-btn > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-product-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn {
    display: inline-flex !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 40px !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
    border-inline-end: 1px solid #dbe6ee !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-payment-due {
    float: none !important;
    display: table !important;
    width: fit-content !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-payment-due:only-child {
    margin-inline: auto !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-pay-term {
    grid-template-columns: 1fr 1fr !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card {
    overflow: visible !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table,
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table {
    min-width: 100% !important;
    width: max(100%, 1100px) !important;
    max-width: none !important;
  }
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-products-table > thead > tr > th,
  html body:not(.lockscreen) .cc-purchase-page
    .cc-purchase-products-table > tbody > tr > td,
  html body:not(.lockscreen) .cc-purchase-page
    table#purchase_entry_table > thead > tr > th,
  html body:not(.lockscreen) .cc-purchase-page
    table#purchase_entry_table > tbody > tr > td {
    box-sizing: border-box !important;
  }

  /* Purchase add, phone only: finish the total box and place amount/date beside their labels. */
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-purchase-net-total {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 2px 0 18px !important;
    padding: 12px 16px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-purchase-net-total #grand_total2 {
    margin-inline-start: 12px !important;
    white-space: nowrap !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-purchase-advance-balance {
    margin: 0 0 18px !important;
    padding: 11px 14px !important;
    border: 1px solid #d7e8d7 !important;
    border-radius: 12px !important;
    background: #f7fff7 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-purchase-advance-balance > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-amount-field .form-group,
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-paid-on-field .form-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 8px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-amount-field label,
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-paid-on-field label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 46% !important;
    margin: 0 !important;
    color: #27445d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-amount-field .input-group,
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-paid-on-field .input-group {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-amount-field .form-control,
  html body:not(.lockscreen) .cc-purchase-page .cc-payment-voucher-box--payment .cc-payment-paid-on-field .form-control {
    min-height: 40px !important;
    height: 40px !important;
  }
}

/* Global identity outline for section containers; cashier/POS is excluded. */
html body:not(.lockscreen) .content .box-solid,
html body:not(.lockscreen) .content .box-primary,
html body:not(.lockscreen) .content .box-info,
html body:not(.lockscreen) .content .box-success,
html body:not(.lockscreen) .content .box-warning,
html body:not(.lockscreen) .content .box-danger,
html body:not(.lockscreen) .content .box,
html body:not(.lockscreen) .cc-app-content .box,
html body:not(.lockscreen) #scrollable-container .box,
html body:not(.lockscreen) .content .panel,
html body:not(.lockscreen) .cc-app-content .panel,
html body:not(.lockscreen) #scrollable-container .panel,
html body:not(.lockscreen) .content .well,
html body:not(.lockscreen) .cc-app-content .well,
html body:not(.lockscreen) #scrollable-container .well,
html body:not(.lockscreen) .home-dashboard__card,
html body:not(.lockscreen) .home-dashboard__quick-links,
html body:not(.lockscreen) .cc-stat-card,
html body:not(.lockscreen) .cc-monitoring-panel,
html body:not(.lockscreen) .cc-monitoring-stats-frame {
  border: 1px solid rgba(17, 153, 142, 0.18) !important;
  box-shadow: 0 1px 4px rgba(17, 153, 142, 0.035) !important;
}

/* Direct-sell card icons: larger glyphs without colored background tiles. */
html body:not(.lockscreen) .cc-extra-options--cards
  .cc-extra-field > .form-group > label::before,
html body:not(.lockscreen) .cc-extra-options--cards
  .cc-extra-document-label-row > label::before,
html body:not(.lockscreen) .cc-extra-options--cards
  .cc-extra-check__label::before {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 17px !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-extra-options--cards .cc-extra-chip__icon,
html body:not(.lockscreen) .cc-extra-options--cards .cc-pos-option-card__icon {
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 17px !important;
  box-shadow: none !important;
}

/* Receipt/payment voucher headings on non-POS screens. */
html body:not(.lockscreen) .cc-payment-voucher-box .box-header {
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 4px 2px 10px !important;
  border-bottom: 1px solid #bfdbfe !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-payment-voucher-box .box-title,
html body:not(.lockscreen) .cc-payment-voucher-modal-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #2563eb !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-payment-voucher-box .box-title::before,
html body:not(.lockscreen) .cc-payment-voucher-modal-title::before {
  content: "\f571";
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #2563eb !important;
  font-size: 16px !important;
  margin-inline-end: 8px !important;
}
html body:not(.lockscreen) .cc-payment-voucher-box--payment .box-title::before,
html body:not(.lockscreen) .cc-payment-voucher-modal-title::before {
  content: "\f53c";
}
html body:not(.lockscreen) .cc-payment-voucher-modal-title {
  padding-bottom: 9px !important;
  border-bottom: 1px solid #bfdbfe !important;
}

/* Purchase order create/edit — matches direct-purchase styling, isolated from POS. */
html body:not(.lockscreen) .cc-purchase-order-page {
  --cc-po-blue: #d7efff;
  --cc-po-ink: #27445d;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .box {
  border: 1px solid rgba(60, 141, 188, .24) !important;
  border-top: 1px solid rgba(60, 141, 188, .24) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(60, 141, 188, .05) !important;
  overflow: visible !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-card {
  position: relative !important;
  z-index: 20 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-card .box-body,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid .form-group {
  overflow: visible !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .bootstrap-datetimepicker-widget,
html body:not(.lockscreen) .cc-purchase-order-page .datepicker,
html body:not(.lockscreen) .cc-purchase-order-page .datepicker-dropdown {
  z-index: 999999 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-core-grid,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid::before,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid::after,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-core-grid::before,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-core-grid::after,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-grid::before,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-grid::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  :is(.cc-po-main-grid, .cc-po-extra-core-grid, .cc-po-extra-grid) > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-main-grid > .cc-po-supplier-field {
  padding-left: 40px !important;
  padding-right: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-grid > .clearfix {
  display: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .form-group {
  min-width: 0 !important;
  margin-bottom: 10px !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .form-control,
html body:not(.lockscreen) .cc-purchase-order-page .input-group,
html body:not(.lockscreen) .cc-purchase-order-page .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .form-control,
html body:not(.lockscreen) .cc-purchase-order-page .select2-selection {
  min-height: 38px !important;
  border-color: #d7e2eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid label::before,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-field label::before {
  display: inline-block !important;
  width: 18px !important;
  margin-inline-end: 5px !important;
  color: #2497d0 !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-purchase-order-page label[for="supplier_id"]::before { content: "\f007"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="ref_no"]::before { content: "\f02a"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="transaction_date"]::before { content: "\f073"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="delivery_date"]::before { content: "\f274"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="location_id"]::before { content: "\f3c5"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="exchange_rate"]::before { content: "\f362"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="pay_term_number"]::before { content: "\f017"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="document"]::before { content: "\f0c6"; }
html body:not(.lockscreen) .cc-purchase-order-page label[for="purchase_requisition_ids"]::before { content: "\f46d"; }
html body:not(.lockscreen) .cc-purchase-order-page textarea.form-control {
  min-height: 70px !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-options {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 !important;
  overflow: hidden !important;
  border: 1px solid #cce8fa !important;
  border-radius: 11px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-options__bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #eaf7ff, #dff2ff) !important;
  color: #246b98 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  list-style: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-options__bar::-webkit-details-marker,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-options__bar::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-options__chevron {
  transition: transform .18s ease !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-options[open] .cc-po-extra-options__chevron {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-notes-details {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 !important;
  overflow: hidden !important;
  border: 1px solid #cce8fa !important;
  border-radius: 11px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-notes-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  padding: 9px 14px !important;
  background: linear-gradient(135deg, #eaf7ff, #dff2ff) !important;
  color: #246b98 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  list-style: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-notes-summary::-webkit-details-marker,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-notes-summary::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-notes-chevron {
  transition: transform .18s ease !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-notes-details[open] .cc-po-notes-chevron {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-notes-card {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-card {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-field {
  padding: 11px !important;
  border: 1px solid #e2ebf2 !important;
  border-radius: 9px !important;
  background: #fbfdff !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-pay-term {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-search-row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-search-row > [class*="col-"] {
  float: none !important;
  width: min(100%, 850px) !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-product-search-group {
  display: flex !important;
  align-items: stretch !important;
  min-height: 40px !important;
  overflow: hidden !important;
  border: 1px solid #cbd9e4 !important;
  border-radius: 10px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-product-search-group > * {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-product-search-group > .form-control {
  flex: 1 1 auto !important;
  width: auto !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-product-search-group > :is(.input-group-addon, .input-group-btn) {
  display: flex !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: #f3f9fd !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-product-search-group > .input-group-btn > .btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .table-responsive {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
html body:not(.lockscreen) .cc-purchase-order-page #purchase_entry_table {
  min-width: 1100px !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  #purchase_entry_table > thead > tr > th {
  padding: 10px 8px !important;
  border: 1px solid #bcdff3 !important;
  background: var(--cc-po-blue) !important;
  background-image: none !important;
  color: var(--cc-po-ink) !important;
  font-weight: 800 !important;
  text-align: center !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-purchase-qty-unit-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  min-width: 150px !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-purchase-unit-name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 6px !important;
  border: 1px solid #d7e2eb !important;
  border-radius: 8px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-expenses,
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-total {
  margin-inline: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page #additional_expenses_div {
  width: 100% !important;
  margin-inline: 0 !important;
  overflow-x: auto !important;
}
html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-card .file-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group,
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .file-caption-main {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 1px solid #d7e2eb !important;
  border-radius: 8px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .file-caption {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  width: 1% !important;
  min-width: 0 !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .file-caption-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group-btn {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
  border: 0 !important;
  background: transparent !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group-btn > .btn,
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group-btn > .btn-file {
  display: inline-flex !important;
  flex: 0 0 38px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  border: 0 !important;
  border-inline-start: 1px solid #d7e2eb !important;
  border-radius: 0 !important;
  background: #f5fbff !important;
  color: #287fae !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group-btn > .btn i,
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group-btn > .btn span[class*="glyphicon"],
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group-btn > .btn-file i,
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .input-group-btn > .btn-file span[class*="glyphicon"] {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .fileinput-remove-button,
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .fileinput-cancel-button {
  display: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .cc-clear-po-document {
  display: none !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-inline-start: 1px solid #d7e2eb !important;
  border-radius: 0 !important;
  background: #fff5f5 !important;
  color: #dc2626 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .cc-clear-po-document.is-visible {
  display: inline-flex !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .cc-clear-po-document > i {
  margin: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .btn-file {
  color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #18b981) !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .btn-file i,
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-input .btn-file .fa {
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .file-preview {
  display: none !important;
}
html body:not(.lockscreen) .cc-purchase-order-page
  .cc-po-extra-card .help-block {
  margin: 5px 0 0 !important;
  overflow-wrap: anywhere !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid,
  html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-core-grid,
  html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-purchase-order-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-purchase-order-page .box-body {
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-purchase-order-page .cc-po-main-grid,
  html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-core-grid,
  html body:not(.lockscreen) .cc-purchase-order-page .cc-po-extra-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  html body:not(.lockscreen) .cc-purchase-order-page
    .cc-po-main-grid > .cc-po-supplier-field {
    padding-left: 20px !important;
    padding-right: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-order-page .cc-po-pay-term {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Unified "View details" action outside the cashier interface. */
html body:not(.lockscreen) a.cc-view-details-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin-inline: 6px !important;
  padding: 5px 13px !important;
  border: 1px solid #168fc4 !important;
  border-radius: 7px !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 5px rgba(21, 159, 209, .20) !important;
  transition: background .15s ease, transform .15s ease !important;
}
html body:not(.lockscreen) a.cc-view-details-link:hover,
html body:not(.lockscreen) a.cc-view-details-link:focus {
  background: linear-gradient(100deg, #1d4ed8, #118ebc, #18ad5c) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* Formal profit and loss statement; visual-only and isolated from POS. */
html body:not(.lockscreen) .cc-profit-loss-page {
  overflow-x: clip !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 12px !important;
  border: 1px solid #d9e8f2 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f7fbff, #f1f8fc) !important;
  box-shadow: 0 2px 8px rgba(31, 84, 115, .05) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters > [class*="col-"] {
  float: none !important;
  width: min(100%, 330px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters > .col-md-2 {
  width: auto !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters .form-group,
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters .input-group {
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-filters .select2-container,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-filters .select2-selection,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-filters .select2-selection__rendered,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-filters .input-group-addon {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 38px !important;
}
html body:not(.lockscreen) .cc-profit-loss-page #profit_loss_date_filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  position: relative !important;
  top: 8px !important;
  border-radius: 8px !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-data {
  width: 100% !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-statement {
  overflow: visible !important;
  margin-bottom: 16px !important;
  border: 1px solid #cfe2ee !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgba(28, 78, 107, .08) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-statement-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 13px 17px !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
  color: #fff !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-statement-heading > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 16px !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-statement-heading small {
  color: #dff5ff !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 16px !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-panel {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dbe8ef !important;
  border-radius: 11px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-panel > header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 43px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-panel--income > header {
  border-bottom: 2px solid #27ae72 !important;
  background: #eafaf2 !important;
  color: #16744b !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-panel--costs > header {
  border-bottom: 2px solid #e29a34 !important;
  background: #fff7e8 !important;
  color: #98601b !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table tr,
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table tr[style] {
  background: #fff !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table tr:nth-child(even),
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table tr:nth-child(even)[style] {
  background: #f8fbfd !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table th,
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table td {
  padding: 9px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #e8eff4 !important;
  vertical-align: middle !important;
  line-height: 1.45 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table th {
  color: #334155 !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table td {
  width: 34% !important;
  color: #0f4970 !important;
  font-weight: 800 !important;
  text-align: end !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-financial-table td[colspan="2"] {
  height: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  background: #eef5f8 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-financial-table tr.cc-pl-total-row,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-financial-table tr.cc-pl-total-row[style] {
  background: linear-gradient(90deg, #eaf5ff, #edf9f5) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-financial-table tr.cc-pl-total-row th,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-financial-table tr.cc-pl-total-row td {
  border-top: 1px solid #b9dcec !important;
  border-bottom: 1px solid #b9dcec !important;
  color: #155b82 !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes {
  display: block !important;
  overflow: hidden !important;
  margin: 4px 16px 18px !important;
  border: 1px solid #cbdfea !important;
  border-radius: 10px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 43px !important;
  padding: 10px 14px !important;
  background: linear-gradient(100deg, #edf7ff, #e9faf3) !important;
  color: #17688f !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  list-style: none !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-stock-notes > summary::-webkit-details-marker,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-stock-notes > summary::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes > summary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes-chevron {
  transition: transform .18s ease !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-stock-notes[open] .cc-pl-stock-notes-chevron {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
  border-top: 1px solid #dceaf1 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes-grid.cc-pl-stock-notes-grid--mfg {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-note.cc-pl-stock-note--mfg {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-note.cc-pl-stock-note--mfg strong {
  color: #c2410c !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-note {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid #deebf2 !important;
  border-radius: 8px !important;
  background: #f9fcfe !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-note span {
  color: #405d70 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-note span small {
  display: block !important;
  margin-top: 2px !important;
  color: #7890a0 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-note strong {
  color: #0d668f !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-results {
  display: grid !important;
  gap: 9px !important;
  padding: 0 16px 16px !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card {
  position: relative !important;
  z-index: 1 !important;
  padding: 11px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-result-card:nth-of-type(1) {
  z-index: 40 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-result-card:nth-of-type(2) {
  z-index: 30 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-result-card:nth-of-type(3) {
  z-index: 20 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-result-card:nth-of-type(4) {
  z-index: 10 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card:hover,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-result-card:has(.cc-pl-explanation[open]) {
  z-index: 1000 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card--cogs {
  border-color: #f3d8a5 !important;
  background: #fff8e9 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card--gross {
  border-color: #b9d8f5 !important;
  background: #edf6ff !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card--net {
  border-color: #a9e4c5 !important;
  background: #edfcf4 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card--after-depreciation {
  border-color: #d8cef7 !important;
  background: #f5f2ff !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  color: #183b56 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card h3 .display_currency {
  color: #0d668f !important;
  font-size: 18px !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-explanation {
  display: inline-block !important;
  position: relative !important;
  z-index: 20 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-explanation:hover,
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-explanation[open] {
  z-index: 10000 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-explanation > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 1px solid #8bcbe8 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #1681b4 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  list-style: none !important;
  box-shadow: 0 2px 5px rgba(22, 129, 180, .13) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-explanation > summary::-webkit-details-marker,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-explanation > summary::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-explanation > summary:hover {
  border-color: #1681b4 !important;
  background: #eaf7fd !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-explanation .cc-pl-explanation-content {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 10001 !important;
  width: min(380px, calc(100vw - 60px)) !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 1px solid #b9ddea !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #425c6d !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  text-align: start !important;
  box-shadow: 0 8px 24px rgba(24, 71, 98, .18) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-explanation:hover .cc-pl-explanation-content,
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-explanation[open] .cc-pl-explanation-content {
  display: block !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card small {
  display: block !important;
  margin-top: 5px !important;
  color: #64748b !important;
  line-height: 1.55 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-print-row {
  margin: 0 0 10px !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-breakdown {
  overflow: hidden !important;
  border: 1px solid #d6e6ef !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(31, 84, 115, .06) !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-breakdown > .nav-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  overflow-x: auto !important;
  padding: 8px 8px 0 !important;
  border-bottom: 1px solid #dbe7ee !important;
  scrollbar-width: thin !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-breakdown > .nav-tabs > li {
  float: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-breakdown > .nav-tabs > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  color: #496579 !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-breakdown > .nav-tabs > li.active > a {
  background: #eaf5ff !important;
  color: #176ca0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-profit-loss-page
  .cc-pl-breakdown > .nav-tabs > li.active::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  content: none !important;
  background: none !important;
}
html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-breakdown > .tab-content {
  padding: 12px !important;
}

@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-profit-loss-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters > [class*="col-"],
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-filters > .col-md-2 {
    width: 100% !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page #profit_loss_date_filter {
    width: 100% !important;
    top: 0 !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-statement-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 11px 13px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-columns {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table {
    font-size: 12px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table th,
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-financial-table td {
    padding: 8px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-results {
    padding: 0 10px 10px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes {
    margin: 3px 10px 12px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes-grid {
    grid-template-columns: 1fr !important;
    padding: 9px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-stock-notes-grid.cc-pl-stock-notes-grid--mfg {
    grid-template-columns: 1fr !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card h3 {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 14px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-result-card h3 .display_currency {
    align-self: flex-end !important;
    font-size: 16px !important;
  }
  html body:not(.lockscreen) .cc-profit-loss-page .cc-pl-breakdown > .tab-content {
    padding: 8px !important;
  }
}

@media print {
  .cc-profit-loss-page .cc-pl-filters,
  .cc-profit-loss-page .cc-pl-print-row,
  .cc-profit-loss-page .cc-pl-breakdown {
    display: none !important;
  }
  .cc-profit-loss-page .cc-pl-statement {
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
}

/* Swap Edit and Account Book colors without changing generated actions. */
html body:not(.lockscreen) .cc-account-management-page
  #other_account_table button.btn-modal.tw-dw-btn-primary {
  border: 1px solid #f2c94c !important;
  background: #fff !important;
  color: #d39b00 !important;
  box-shadow: 0 1px 3px rgba(211, 155, 0, .14) !important;
}
html body:not(.lockscreen) .cc-account-management-page
  #other_account_table button.btn-modal.tw-dw-btn-primary:hover,
html body:not(.lockscreen) .cc-account-management-page
  #other_account_table button.btn-modal.tw-dw-btn-primary:focus {
  border-color: #dca800 !important;
  background: #fff9df !important;
  color: #b78300 !important;
}
html body:not(.lockscreen) .cc-account-management-page
  #other_account_table a.tw-dw-btn-warning {
  border: 1px solid #168fc4 !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(37, 99, 235, .18) !important;
}
html body:not(.lockscreen) .cc-account-management-page
  #other_account_table a.tw-dw-btn-warning:hover,
html body:not(.lockscreen) .cc-account-management-page
  #other_account_table a.tw-dw-btn-warning:focus {
  border-color: #168fc4 !important;
  background: linear-gradient(100deg, #1d4ed8, #118ebc, #18ad5c) !important;
  color: #fff !important;
}

/* Formal purchase/sell trading report; visual-only and isolated from POS. */
html body:not(.lockscreen) .cc-trading-report-page {
  overflow-x: clip !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 12px !important;
  border: 1px solid #d8e8f1 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f7fbff, #f0f9f7) !important;
  box-shadow: 0 2px 8px rgba(31, 84, 115, .05) !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-filters > [class*="col-"] {
  float: none !important;
  width: min(100%, 330px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-filters > .col-md-2 {
  width: auto !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-filters .form-group,
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-filters .input-group {
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-filters :is(.select2-container, .select2-selection, .select2-selection__rendered, .input-group-addon) {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 38px !important;
}
html body:not(.lockscreen) .cc-trading-report-page #purchase_sell_date_filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  position: relative !important;
  top: 8px !important;
  border-radius: 8px !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-statement-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
  padding: 13px 17px !important;
  border-radius: 12px 12px 0 0 !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
  color: #fff !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-statement-heading > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 16px !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-statement-heading small {
  color: #ecffff !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 14px !important;
  padding: 16px !important;
  border: 1px solid #d3e4ed !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  background: #f8fbfd !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-columns::before,
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-columns::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-columns > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-columns > [class*="col-"]:first-child {
  order: 2 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-columns > [class*="col-"]:nth-child(2) {
  order: 1 !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-panel {
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dce8ee !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(31, 84, 115, .05) !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-panel > [class*="tw-p-"],
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-panel [class*="tw-px-3"] {
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-panel .box-header {
  padding: 11px 14px !important;
  border-bottom: 2px solid transparent !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-panel--purchases .box-header {
  border-bottom-color: #e2a43d !important;
  background: #fff7e8 !important;
  color: #8c5b14 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-panel--sales .box-header {
  border-bottom-color: #25ad71 !important;
  background: #eafaf2 !important;
  color: #146b46 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-panel > .box-body {
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-table {
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-table tr {
  background: #fff !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table tr:nth-child(even) {
  background: #f7fafc !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table th,
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table td {
  padding: 11px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid #e6eef3 !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table th {
  color: #334155 !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table td {
  width: 34% !important;
  color: #0e6089 !important;
  font-weight: 900 !important;
  text-align: end !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table tr:first-child {
  background: linear-gradient(90deg, #eaf5ff, #edf9f5) !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table tr:first-child th,
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-table tr:first-child td {
  color: #155b82 !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-summary-row {
  margin: 0 0 10px !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-summary {
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid #cfe1ea !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 12px rgba(31, 84, 115, .06) !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-summary > [class*="tw-p-"] {
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-summary .box-header {
  padding: 11px 15px !important;
  border-bottom: 1px solid #c7dfea !important;
  background: #eef7fb !important;
  color: #225d7d !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-summary [class*="tw-px-3"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-result {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #c8e1ec !important;
  border-radius: 9px !important;
  background: #edf7ff !important;
  color: #234e68 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-result--due {
  border-color: #bae5ce !important;
  background: #edfcf4 !important;
}
html body:not(.lockscreen) .cc-trading-report-page
  .cc-trading-result > span {
  color: #0d6a91 !important;
  font-size: 18px !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-trading-report-page .cc-trading-print-row {
  margin: 0 !important;
}

@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-trading-report-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page .cc-trading-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page
    .cc-trading-filters > [class*="col-"],
  html body:not(.lockscreen) .cc-trading-report-page
    .cc-trading-filters > .col-md-2 {
    width: 100% !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page
    #purchase_sell_date_filter {
    width: 100% !important;
    top: 0 !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page
    .cc-trading-statement-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 11px 13px !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page .cc-trading-columns {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page
    .cc-trading-table th,
  html body:not(.lockscreen) .cc-trading-report-page
    .cc-trading-table td {
    padding: 9px 8px !important;
    font-size: 12px !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page
    .cc-trading-summary [class*="tw-px-3"] {
    grid-template-columns: 1fr !important;
    padding: 9px !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page .cc-trading-result {
    min-height: 52px !important;
    padding: 10px !important;
    font-size: 13px !important;
  }
  html body:not(.lockscreen) .cc-trading-report-page
    .cc-trading-result > span {
    font-size: 15px !important;
  }
}

@media print {
  .cc-trading-report-page .cc-trading-filters,
  .cc-trading-report-page .cc-trading-print-row {
    display: none !important;
  }
  .cc-trading-report-page .cc-trading-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Formal trial balance; visual-only and isolated from POS. */
html body:not(.lockscreen) .cc-trial-balance-page {
  overflow-x: clip !important;
}
html body:not(.lockscreen) .cc-trial-balance-page .cc-trial-filters {
  margin: 0 0 14px !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters > .col-sm-12 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters > .col-sm-12 > div {
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid #d7e7f0 !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 8px rgba(31, 84, 115, .05) !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .box-header {
  min-height: 42px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  background: linear-gradient(100deg, #eff7ff, #edf9f5) !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .box-header a {
  color: #17688f !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .box-body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 13px !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .box-body::before,
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .box-body::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .box-body > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .form-group,
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .input-group,
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters .select2-container {
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-filters + br {
  display: none !important;
}
html body:not(.lockscreen) .cc-trial-balance-page .cc-trial-balance-card {
  overflow: hidden !important;
  margin: 0 0 14px !important;
  border: 1px solid #cfe1eb !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(27, 76, 104, .07) !important;
}
html body:not(.lockscreen) .cc-trial-balance-page .cc-trial-report-heading {
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-report-heading .box-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-balance-card > .box-body {
  padding: 14px !important;
}
html body:not(.lockscreen) .cc-trial-balance-page .cc-trial-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid #dce7ed !important;
  border-radius: 10px !important;
}
html body:not(.lockscreen) .cc-trial-balance-page .cc-trial-table {
  width: 100% !important;
  min-width: 620px !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table thead th {
  padding: 11px 13px !important;
  border: 0 !important;
  border-bottom: 2px solid #94bfd3 !important;
  background: #eaf4fa !important;
  color: #184d6b !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table thead th:first-child {
  width: 58% !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table thead th:nth-child(2) {
  width: 21% !important;
  background: #edf8f2 !important;
  color: #176b49 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table thead th:nth-child(3) {
  width: 21% !important;
  background: #fff7e8 !important;
  color: #8a5a17 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody tr {
  background: #fff !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody tr:nth-child(even) {
  background: #f8fbfd !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody + tbody tr:first-child > * {
  border-top: 2px solid #d4e3eb !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody th,
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody td {
  display: table-cell !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #e8eef2 !important;
  color: #334155 !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody th {
  color: #263f50 !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody td:first-child,
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody .pl-20-td {
  color: #2d4859 !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody th a {
  color: #155b80 !important;
  text-decoration: none !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody th a:hover {
  color: #0f4e71 !important;
  text-decoration: underline !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody td:nth-child(2),
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tbody td:nth-child(3) {
  direction: ltr !important;
  color: #174e6d !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tfoot th,
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tfoot td {
  padding: 11px 13px !important;
  border: 0 !important;
  border-top: 2px solid #75b9cf !important;
  background: linear-gradient(90deg, #e8f3ff, #eaf9f2) !important;
  color: #124f70 !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tfoot td:nth-child(2),
html body:not(.lockscreen) .cc-trial-balance-page
  .cc-trial-table tfoot td:nth-child(3) {
  direction: ltr !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-trial-balance-page .cc-trial-footer {
  padding: 10px 14px !important;
  border-top: 1px solid #dce8ee !important;
  background: #f8fbfd !important;
}

@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-trial-balance-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-trial-balance-page
    .cc-trial-filters .box-body {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-trial-balance-page
    .cc-trial-report-heading {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  html body:not(.lockscreen) .cc-trial-balance-page
    .cc-trial-report-heading .box-title {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  html body:not(.lockscreen) .cc-trial-balance-page
    .cc-trial-balance-card > .box-body {
    padding: 8px !important;
  }
  html body:not(.lockscreen) .cc-trial-balance-page .cc-trial-table {
    min-width: 540px !important;
    font-size: 11px !important;
  }
  html body:not(.lockscreen) .cc-trial-balance-page
    .cc-trial-table tbody th,
  html body:not(.lockscreen) .cc-trial-balance-page
    .cc-trial-table tbody td {
    padding: 8px 7px !important;
  }
}

@media print {
  .cc-trial-balance-page .cc-trial-filters {
    display: none !important;
  }
  .cc-trial-balance-page .cc-trial-balance-card {
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
  .cc-trial-balance-page .cc-trial-table {
    min-width: 0 !important;
  }
}

/* Unified unlinked-payments notice outside the cashier interface. */
html body:not(.lockscreen) .cc-unlinked-payments-alert {
  position: relative !important;
  margin-bottom: 14px !important;
  padding: 11px 14px !important;
  border: 1px solid #f0bf69 !important;
  border-inline-start: 4px solid #e69422 !important;
  border-radius: 9px !important;
  background: linear-gradient(100deg, #fff8e8, #fff3dc) !important;
  color: #79501a !important;
  box-shadow: 0 2px 7px rgba(196, 124, 24, .08) !important;
}
html body:not(.lockscreen) .cc-unlinked-payments-alert ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html body:not(.lockscreen) .cc-unlinked-payments-alert li {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}
html body:not(.lockscreen) .cc-unlinked-payments-alert li::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 25px !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  background: #f2a93b !important;
  color: #fff !important;
  content: "\f071" !important;
  font-family: "Font Awesome 5 Free", FontAwesome !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-unlinked-payments-alert .cc-view-details-link {
  min-height: 28px !important;
  margin-inline: 3px !important;
  padding: 4px 12px !important;
}

@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-unlinked-payments-alert {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
  html body:not(.lockscreen) .cc-unlinked-payments-alert li {
    align-items: flex-start !important;
  }
}

/* Opening stock form and modal; layout-only and isolated from POS. */
html body:not(.lockscreen) .cc-opening-stock-dialog {
  width: calc(100% - 30px) !important;
  max-width: 1280px !important;
  margin: 18px auto !important;
}
html body:not(.lockscreen) .cc-opening-stock-modal {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid #cfe2ec !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 38px rgba(25, 69, 95, .18) !important;
}
html body:not(.lockscreen) .cc-opening-stock-modal .modal-header {
  padding: 13px 17px !important;
  border-bottom: 1px solid #d7e6ee !important;
  background: linear-gradient(100deg, #eff7ff, #edf9f5) !important;
}
html body:not(.lockscreen) .cc-opening-stock-modal .modal-title {
  color: #185f85 !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-opening-stock-modal .modal-body {
  max-height: 72vh !important;
  padding: 13px !important;
  overflow: auto !important;
}
html body:not(.lockscreen) .cc-opening-stock-modal .modal-footer {
  padding: 10px 14px !important;
  border-top: 1px solid #d9e7ee !important;
  background: #f8fbfd !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-form {
  margin: 0 !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-form > .col-sm-12 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-location-card {
  overflow: hidden !important;
  margin: 0 0 12px !important;
  border: 1px solid #d4e5ed !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 8px rgba(31, 84, 115, .05) !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-location-card .box-header {
  padding: 10px 14px !important;
  border-bottom: 1px solid #cee1ea !important;
  background: #f1f8fc !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-location-card .box-title {
  color: #234f68 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-location-card .box-body {
  padding: 10px !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-scroll {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-scroll > .col-sm-12 {
  float: none !important;
  width: 100% !important;
  min-width: 1050px !important;
  padding: 0 !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table {
  width: 100% !important;
  margin: 0 !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table thead th {
  padding: 9px 8px !important;
  border-color: #cddfe8 !important;
  background: #eaf4fa !important;
  color: #244e67 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table thead th i {
  margin-inline-end: 5px !important;
  color: #2486b5 !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table tbody td {
  padding: 8px !important;
  border-color: #e3ecf1 !important;
  background: #fff !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table tbody tr:nth-child(even) td {
  background: #f8fbfd !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table .form-control,
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table .input-group {
  width: 100% !important;
  min-width: 118px !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table .os_date {
  min-width: 155px !important;
  text-align: center !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table textarea.form-control {
  width: 170px !important;
  min-width: 170px !important;
  height: 48px !important;
  min-height: 48px !important;
  resize: vertical !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table .add_stock_row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #2563eb, #18b981) !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(28, 115, 175, .16) !important;
}
html body:not(.lockscreen)
  :is(.cc-opening-stock-page, .cc-opening-stock-modal)
  .cc-opening-stock-table tfoot td {
  padding: 9px !important;
  border-color: #c7deea !important;
  background: linear-gradient(90deg, #edf6ff, #edf9f4) !important;
  color: #1b5f82 !important;
  font-weight: 800 !important;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 0 !important;
  }
  /* List DataTables: host must not own the scrollbar (table wrap .cc-dt-xscroll does) */
  html body:not(.lockscreen) .table-responsive:has(.dataTables_wrapper) {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  html body:not(.lockscreen) .table-responsive
    input.form-control:not([type="checkbox"]):not([type="radio"]),
  html body:not(.lockscreen) .table-responsive select.form-control {
    min-width: 105px !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-opening-stock-dialog {
    width: calc(100% - 12px) !important;
    margin: 6px auto !important;
  }
  html body:not(.lockscreen) .cc-opening-stock-modal .modal-body {
    max-height: 76vh !important;
    padding: 8px !important;
  }
  html body:not(.lockscreen)
    :is(.cc-opening-stock-page, .cc-opening-stock-modal)
    .cc-opening-stock-scroll > .col-sm-12 {
    min-width: 940px !important;
  }
  html body:not(.lockscreen)
    :is(.cc-opening-stock-page, .cc-opening-stock-modal)
    .cc-opening-stock-table thead th,
  html body:not(.lockscreen)
    :is(.cc-opening-stock-page, .cc-opening-stock-modal)
    .cc-opening-stock-table tbody td {
    padding: 7px 6px !important;
    font-size: 11px !important;
  }
}

/* Formal balance sheet; visual-only and isolated from POS. */
html body:not(.lockscreen) .cc-balance-sheet-page {
  overflow-x: clip !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters {
  margin: 0 0 14px !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters > .col-sm-12 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters > .col-sm-12 > div {
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid #d7e7f0 !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 8px rgba(31, 84, 115, .05) !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .box-header {
  min-height: 42px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  background: linear-gradient(100deg, #eff7ff, #edf9f5) !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .box-header a {
  color: #17688f !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .box-body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 13px !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .box-body::before,
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .box-body::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .box-body > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .form-group,
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .input-group,
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters .select2-container {
  width: 100% !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-filters + br {
  display: none !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-card {
  overflow: hidden !important;
  margin: 0 0 14px !important;
  border: 1px solid #cfe1eb !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(27, 76, 104, .07) !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-heading {
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-heading .box-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-card > .box-body {
  padding: 14px !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid #d8e6ed !important;
  border-radius: 10px !important;
  -webkit-overflow-scrolling: touch !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table {
  width: 100% !important;
  min-width: 760px !important;
  margin: 0 !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > thead > tr > th {
  width: 50% !important;
  padding: 12px 14px !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > thead > tr > th:first-child {
  border-bottom: 2px solid #29aa72 !important;
  background: #eafaf2 !important;
  color: #176b49 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > thead > tr > th:nth-child(2) {
  border-bottom: 2px solid #dfa03a !important;
  background: #fff7e8 !important;
  color: #8b5a14 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > tbody > tr > td {
  width: 50% !important;
  padding: 10px !important;
  border: 0 !important;
  vertical-align: top !important;
  background: #f9fbfc !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > tbody > tr > td:first-child {
  border-inline-end: 1px solid #dce8ee !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) {
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid #e0eaf0 !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) tr {
  background: #fff !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) tr:nth-child(even) {
  background: #f7fafc !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) th,
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) td {
  display: table-cell !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7eef2 !important;
  color: #304b5d !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) th {
  width: 70% !important;
  font-weight: 700 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) td {
  width: 30% !important;
  direction: ltr !important;
  color: #155d82 !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) tbody td:first-child:not([colspan]) {
  width: 70% !important;
  direction: rtl !important;
  color: #304b5d !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: normal !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) tbody td:last-child:not(:first-child) {
  width: 30% !important;
  direction: ltr !important;
  color: #155d82 !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) tbody td[colspan] {
  width: auto !important;
  direction: rtl !important;
  text-align: right !important;
  white-space: normal !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  #fixed_accumulated_assets td.pl-20-td {
  width: 50% !important;
  direction: rtl !important;
  text-align: right !important;
  white-space: normal !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) th a {
  color: #155f85 !important;
  text-decoration: none !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) th a:hover {
  color: #103f59 !important;
  text-decoration: underline !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) th[colspan="2"] {
  width: auto !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-bottom: 1px solid #bcd6e3 !important;
  background: linear-gradient(90deg, #edf6ff, #edf9f4) !important;
  color: #235e7c !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  :is(#assets_table, #liability_table) th[colspan="2"] span {
  color: inherit !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > tfoot > tr > td {
  padding: 8px 10px !important;
  border: 0 !important;
  border-top: 2px solid #79b8ce !important;
  background: linear-gradient(90deg, #e8f3ff, #eaf9f2) !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > tfoot table {
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > tfoot table th,
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > tfoot table td {
  padding: 7px !important;
  border: 0 !important;
  background: transparent !important;
  color: #124f70 !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-table > tfoot table td {
  direction: ltr !important;
  text-align: center !important;
}
html body:not(.lockscreen) .cc-balance-sheet-page
  .cc-balance-sheet-footer {
  padding: 10px 14px !important;
  border-top: 1px solid #dce8ee !important;
  background: #f8fbfd !important;
}

@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-balance-sheet-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-balance-sheet-page
    .cc-balance-sheet-filters .box-body {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-balance-sheet-page
    .cc-balance-sheet-heading {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  html body:not(.lockscreen) .cc-balance-sheet-page
    .cc-balance-sheet-heading .box-title {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  html body:not(.lockscreen) .cc-balance-sheet-page
    .cc-balance-sheet-card > .box-body {
    padding: 8px !important;
  }
  html body:not(.lockscreen) .cc-balance-sheet-page
    .cc-balance-sheet-table {
    min-width: 700px !important;
    font-size: 11px !important;
  }
  html body:not(.lockscreen) .cc-balance-sheet-page
    :is(#assets_table, #liability_table) th,
  html body:not(.lockscreen) .cc-balance-sheet-page
    :is(#assets_table, #liability_table) td {
    padding: 7px 6px !important;
  }
}

@media print {
  .cc-balance-sheet-page .cc-balance-sheet-filters {
    display: none !important;
  }
  .cc-balance-sheet-page .cc-balance-sheet-card {
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
  .cc-balance-sheet-page .cc-balance-sheet-table {
    min-width: 0 !important;
  }
}

/* Business settings: horizontal tabs and responsive form layout, excluded from POS. */
html body:not(.lockscreen) .cc-business-settings-page {
  overflow-x: clip !important;
}
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-container {
  overflow: hidden !important;
  margin-bottom: 18px !important;
  border: 1px solid #cee1eb !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(27, 76, 104, .07) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-container > [class*="tw-p-"],
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-container [class*="tw-px-3"] {
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-menu,
html body:not(.lockscreen) .cc-business-settings-page .pos-tab {
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-bottom: 1px solid #d8e7ee !important;
  background: linear-gradient(100deg, #f2f8ff, #effaf5) !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #d4e3eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #3f5f72 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(31, 84, 115, .04) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item::before {
  color: #2185b2 !important;
  content: "\f013" !important;
  font-family: "Font Awesome 5 Free", FontAwesome !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin-inline-end: 8px !important;
  margin-inline-start: 0 !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="building"]::before { content: "\f1ad" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="cogs"]::before { content: "\f085" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="desktop"]::before { content: "\f108" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="chart"]::before { content: "\f201" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="cart"]::before { content: "\f07a" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="cube"]::before { content: "\f1b2" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="tags"]::before { content: "\f02b" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="envelope"]::before { content: "\f0e0" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="percent"]::before { content: "\f295" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item[data-cc-tab-icon="user"]::before { content: "\f007" !important; }
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item.active,
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item.active:hover,
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item.active:focus {
  border-color: #168fc4 !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(24, 132, 179, .18) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item.active::before {
  color: #fff !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-menu .list-group-item.active::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content {
  min-height: 360px !important;
  padding: 16px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-content > .row {
  margin-inline: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-content .form-group {
  margin-bottom: 14px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-content .form-control,
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-content .input-group,
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-content .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .pos-tab-content h4 {
  margin: 4px 0 14px !important;
  padding: 9px 12px !important;
  border-inline-start: 4px solid #2497d0 !important;
  border-radius: 7px !important;
  background: #eff7fc !important;
  color: #1e5d7e !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  button[type="submit"].tw-dw-btn-error {
  border: 0 !important;
  background: linear-gradient(100deg, #2563eb, #159fd1, #1fc76a) !important;
  box-shadow: 0 4px 10px rgba(24, 132, 179, .18) !important;
}
/* Business settings checkboxes: compact visual switches; iCheck behavior is unchanged. */
html body:not(.lockscreen) .cc-business-settings-page .icheckbox_square-blue {
  position: relative !important;
  display: inline-block !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 18px !important;
  margin: 0 0 0 7px !important;
  border: 1px solid #bccbd5 !important;
  border-radius: 999px !important;
  background: #d8e1e7 none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08) !important;
  vertical-align: middle !important;
  transition: background-color .16s ease, border-color .16s ease !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .icheckbox_square-blue::after {
  position: absolute !important;
  top: 2px !important;
  inset-inline-start: 2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .24) !important;
  content: "" !important;
  transition: inset-inline-start .16s ease !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .icheckbox_square-blue.checked {
  border-color: #159dbe !important;
  background: linear-gradient(135deg, #2387da, #13bf77) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .icheckbox_square-blue.checked::after {
  inset-inline-start: 18px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .icheckbox_square-blue.disabled {
  cursor: not-allowed !important;
  opacity: .55 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .icheckbox_square-blue > ins {
  z-index: 2 !important;
  border-radius: 999px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  input[type="checkbox"]:not(.input-icheck) {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-block !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 18px !important;
  margin: 0 0 0 7px !important;
  border: 1px solid #bccbd5 !important;
  border-radius: 999px !important;
  background-color: #d8e1e7 !important;
  background-image: radial-gradient(circle at 8px 50%, #fff 0 6px, transparent 6.5px) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background-color .16s ease, border-color .16s ease !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  input[type="checkbox"]:not(.input-icheck):checked {
  border-color: #159dbe !important;
  background-color: #169fc0 !important;
  background-image: radial-gradient(circle at calc(100% - 8px) 50%, #fff 0 6px, transparent 6.5px), linear-gradient(135deg, #2387da, #13bf77) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  input[type="checkbox"]:not(.input-icheck):focus {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(21, 159, 193, .16) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-expiry-action-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(72px, 2fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-expiry-action-fields > .form-control {
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-settings {
  clear: both !important;
  width: calc(100% - 30px) !important;
  margin: 8px 15px 16px !important;
  overflow: hidden !important;
  border: 1px solid #d4e5ed !important;
  border-radius: 10px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  padding: 9px 13px !important;
  list-style: none !important;
  background: linear-gradient(100deg, #eff7ff, #edf9f5) !important;
  color: #1c678c !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-summary::-webkit-details-marker,
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-summary::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-summary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-chevron {
  transition: transform .18s ease !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-settings[open] .cc-sms-extra-chevron {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 11px !important;
  padding: 13px !important;
  border-top: 1px solid #dce9ef !important;
  background: #fbfdfe !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-grid > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-grid > .clearfix {
  display: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-grid > hr {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 1px 0 !important;
  border-color: #e1ebf0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-extra-grid .form-group {
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-test-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-test-group > #test_number {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-test-group > .input-group-btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-sms-test-group #test_sms_btn {
  width: auto !important;
  min-width: 132px !important;
  height: 40px !important;
  padding: 0 13px !important;
  white-space: nowrap !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 12px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .file-input {
  width: 100% !important;
  max-width: 200px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .file-input .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .file-caption {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  height: 38px !important;
  border-color: #cbdde7 !important;
  border-radius: 0 8px 8px 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .input-group-btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field :is(.fileinput-remove-button, .fileinput-cancel-button) {
  display: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .btn-file {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px 0 0 8px !important;
  background: linear-gradient(135deg, #2387da, #13bf77) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .btn-file i {
  margin: 0 !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .cc-clear-business-logo {
  display: none !important;
  flex: 0 0 32px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d9e3ea !important;
  border-block-width: 1px !important;
  border-radius: 0 !important;
  background: #fff5f5 !important;
  color: #dc2626 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .cc-clear-business-logo.is-visible {
  display: inline-flex !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-business-logo-field .cc-clear-business-logo i {
  margin: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
}

html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab {
  padding: 14px !important;
}
/* Primary custom-labels grid rules live near end of file (after denser-grid overrides). */
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-fold {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid #d4e5ed !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(31, 84, 115, .05) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: linear-gradient(100deg, #eff7ff, #edf9f5) !important;
  color: #1c678c !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  list-style: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-summary::-webkit-details-marker,
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-summary::marker {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-title .cc-settings-fold-heading {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-chevron {
  transition: transform .18s ease !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold[open] .cc-settings-fold-chevron {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 14px !important;
  border-top: 1px solid #dce9ef !important;
  background: #fbfdfe !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid > .clearfix {
  display: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid > [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid #e0ebf1 !important;
  border-radius: 8px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .form-group {
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group > .form-control {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group > .input-group-addon {
  position: static !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 66px !important;
  max-width: 55% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group-addon label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group-addon input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .custom_label_product_div .input-group-addon {
  flex-basis: 96px !important;
  min-width: 96px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .custom_label_product_div .input-group-addon select {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group:has(.input-group-addon label + label),
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .cc-settings-stacked-options {
  flex-wrap: wrap !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group:has(.input-group-addon label + label)
  > .form-control,
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .cc-settings-stacked-options > .form-control {
  flex: 1 0 100% !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .input-group-addon:has(label + label),
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .cc-settings-wide-options {
  flex: 1 0 100% !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding-inline: 9px !important;
  border-top-width: 0 !important;
  border-radius: 0 0 8px 8px !important;
  overflow: visible !important;
  white-space: normal !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-settings-fold-grid .cc-settings-wide-options label {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:not(.cc-custom-labels-tab) > .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12) {
    width: 50% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .cc-settings-panel__body > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-settings-fold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-sms-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-business-settings-page {
    padding-inline: 8px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-business-logo-field .file-input {
    width: 100% !important;
    max-width: 200px !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    overflow: visible !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-business-logo-field .file-input .input-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-business-logo-field .file-caption {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-business-logo-field .input-group-btn {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 38px !important;
    overflow: visible !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-business-logo-field .btn-file {
    position: relative !important;
    z-index: 2 !important;
    width: 38px !important;
    min-width: 38px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-menu .list-group {
    padding: 7px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-menu .list-group-item {
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content,
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab {
    min-height: 0 !important;
    padding: 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .cc-settings-panel__body > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content > .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12) {
    float: none !important;
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    display: block !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:not(.cc-custom-labels-tab) > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:not(.cc-custom-labels-tab) > .row > .clearfix {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-settings-fold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 9px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-sms-extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 9px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-settings-fold-grid > [class*="col-"] {
    padding: 9px !important;
  }
}

/* =========================================================
   Quick-add expense modal — compact layout (POS-safe CSS only)
   ========================================================= */
#cc_global_expense_modal .cc-expense-quick,
#expense_modal .cc-expense-quick,
.modal .cc-expense-quick {
  border-radius: 14px !important;
  overflow: hidden !important;
}
#cc_global_expense_modal .cc-expense-quick .modal-header,
#expense_modal .cc-expense-quick .modal-header {
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #fff !important;
}
#cc_global_expense_modal .cc-expense-quick .modal-title,
#expense_modal .cc-expense-quick .modal-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  margin: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick .modal-body,
#expense_modal .cc-expense-quick .modal-body {
  padding: 12px 14px 10px !important;
  background: #f8fafc !important;
}
#cc_global_expense_modal .cc-expense-quick .modal-footer,
#expense_modal .cc-expense-quick .modal-footer {
  padding: 10px 14px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #fff !important;
}

#cc_global_expense_modal .cc-expense-quick__main,
#expense_modal .cc-expense-quick__main {
  padding: 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
#cc_global_expense_modal .cc-expense-quick__grid,
#expense_modal .cc-expense-quick__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  width: 100% !important;
  margin: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__field,
#expense_modal .cc-expense-quick__field {
  min-width: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__field .form-group,
#expense_modal .cc-expense-quick__field .form-group {
  margin-bottom: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__field > .form-group > label,
#expense_modal .cc-expense-quick__field > .form-group > label {
  margin-bottom: 5px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}
#cc_global_expense_modal .cc-expense-quick .form-control,
#expense_modal .cc-expense-quick .form-control,
#cc_global_expense_modal .cc-expense-quick .select2-selection,
#expense_modal .cc-expense-quick .select2-selection {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
}
#cc_global_expense_modal .cc-expense-quick textarea.form-control,
#expense_modal .cc-expense-quick textarea.form-control {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 72px !important;
  resize: vertical !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
/* Soft integrated field icons (no detached white boxes) */
#cc_global_expense_modal .cc-expense-quick .input-group,
#expense_modal .cc-expense-quick .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick .input-group-addon,
#expense_modal .cc-expense-quick .input-group-addon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid #d1d5db !important;
  border-inline-end: 0 !important;
  border-radius: 9px 0 0 9px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  box-shadow: none !important;
  line-height: 1 !important;
}
html[dir="rtl"] #cc_global_expense_modal .cc-expense-quick .input-group-addon,
html[dir="rtl"] #expense_modal .cc-expense-quick .input-group-addon {
  border-radius: 0 9px 9px 0 !important;
  border-inline-end: 1.5px solid #d1d5db !important;
  border-inline-start: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick .input-group-addon i,
#expense_modal .cc-expense-quick .input-group-addon i {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #64748b !important;
}
#cc_global_expense_modal .cc-expense-quick .input-group > .form-control,
#expense_modal .cc-expense-quick .input-group > .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 1% !important;
  border-radius: 0 9px 9px 0 !important;
}
html[dir="rtl"] #cc_global_expense_modal .cc-expense-quick .input-group > .form-control,
html[dir="rtl"] #expense_modal .cc-expense-quick .input-group > .form-control {
  border-radius: 9px 0 0 9px !important;
}
#cc_global_expense_modal .cc-expense-quick .input-group > .input-group-addon + .form-control,
#expense_modal .cc-expense-quick .input-group > .input-group-addon + .form-control,
#cc_global_expense_modal .cc-expense-quick .input-group > .input-group-addon ~ .select2-container .select2-selection,
#expense_modal .cc-expense-quick .input-group > .input-group-addon ~ .select2-container .select2-selection {
  border-inline-start: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick .input-group > .select2-container,
#expense_modal .cc-expense-quick .input-group > .select2-container {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}
#cc_global_expense_modal .cc-expense-quick .input-group > .input-group-addon ~ .select2-container .select2-selection--single,
#expense_modal .cc-expense-quick .input-group > .input-group-addon ~ .select2-container .select2-selection--single {
  border-radius: 0 9px 9px 0 !important;
  height: 36px !important;
  min-height: 36px !important;
}
html[dir="rtl"] #cc_global_expense_modal .cc-expense-quick .input-group > .input-group-addon ~ .select2-container .select2-selection--single,
html[dir="rtl"] #expense_modal .cc-expense-quick .input-group > .input-group-addon ~ .select2-container .select2-selection--single {
  border-radius: 9px 0 0 9px !important;
}
#cc_global_expense_modal .cc-expense-quick .help-block,
#expense_modal .cc-expense-quick .help-block {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Amount hero */
#cc_global_expense_modal .cc-expense-quick__amount,
#expense_modal .cc-expense-quick__amount {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid #86efac !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 55%, #eff6ff 100%) !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.1) !important;
}
#cc_global_expense_modal .cc-expense-quick__amount .form-group,
#expense_modal .cc-expense-quick__amount .form-group {
  margin: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__amount > .form-group > label:not(.error),
#expense_modal .cc-expense-quick__amount > .form-group > label:not(.error) {
  display: block !important;
  margin-bottom: 8px !important;
  color: #15803d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
}
#cc_global_expense_modal .cc-expense-quick label.error,
#expense_modal .cc-expense-quick label.error {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-weight: 600 !important;
  text-align: start !important;
}
#cc_global_expense_modal .cc-expense-quick__amount-wrap,
#expense_modal .cc-expense-quick__amount-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  max-width: 320px !important;
  margin: 0 auto !important;
}
#cc_global_expense_modal .cc-expense-quick__amount-icon,
#expense_modal .cc-expense-quick__amount-icon {
  position: absolute !important;
  inset-inline-start: 12px !important;
  color: #16a34a !important;
  font-size: 16px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
#cc_global_expense_modal .cc-expense-quick__amount-input,
#expense_modal .cc-expense-quick__amount-input {
  height: 48px !important;
  min-height: 48px !important;
  padding-inline-start: 38px !important;
  border: 2px solid #4ade80 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #14532d !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12) !important;
}
#cc_global_expense_modal .cc-expense-quick__amount-input:focus,
#expense_modal .cc-expense-quick__amount-input:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22) !important;
}

/* Extra options (collapsed) */
#cc_global_expense_modal .cc-expense-quick__extra,
#expense_modal .cc-expense-quick__extra {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
#cc_global_expense_modal .cc-expense-quick__extra-bar,
#expense_modal .cc-expense-quick__extra-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 0 !important;
  background: linear-gradient(100deg, #2864f0, #12b6b0, #19c85a) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  list-style: none !important;
}
#cc_global_expense_modal .cc-expense-quick__extra-bar::-webkit-details-marker,
#expense_modal .cc-expense-quick__extra-bar::-webkit-details-marker,
#cc_global_expense_modal .cc-expense-quick__extra-bar::marker,
#expense_modal .cc-expense-quick__extra-bar::marker {
  display: none !important;
  content: none !important;
}
#cc_global_expense_modal .cc-expense-quick__extra-bar span,
#expense_modal .cc-expense-quick__extra-bar span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#cc_global_expense_modal .cc-expense-quick__extra-chevron,
#expense_modal .cc-expense-quick__extra-chevron {
  transition: transform 0.18s ease !important;
}
#cc_global_expense_modal .cc-expense-quick__extra[open] .cc-expense-quick__extra-chevron,
#expense_modal .cc-expense-quick__extra[open] .cc-expense-quick__extra-chevron {
  transform: rotate(180deg) !important;
}
#cc_global_expense_modal .cc-expense-quick__extra-grid,
#expense_modal .cc-expense-quick__extra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
  background: #f8fafc !important;
}
#cc_global_expense_modal .cc-expense-quick__extra-grid .cc-expense-quick__field,
#expense_modal .cc-expense-quick__extra-grid .cc-expense-quick__field {
  padding: 8px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

/* Payment voucher block */
#cc_global_expense_modal .cc-expense-quick__voucher,
#expense_modal .cc-expense-quick__voucher {
  margin-top: 10px !important;
  padding: 12px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 12px !important;
  background: #fff !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-voucher-modal-title,
#expense_modal .cc-expense-quick__voucher .cc-payment-voucher-modal-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #bfdbfe !important;
  color: #2563eb !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-voucher-modal-title::before,
#expense_modal .cc-expense-quick__voucher .cc-payment-voucher-modal-title::before {
  content: "\f53c" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #2563eb !important;
  font-size: 15px !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid,
#expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  width: 100% !important;
  margin: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid > [class*="col-"],
#expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
/* Account field: full-width text, no clipping */
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field,
#expense_modal .cc-expense-quick__voucher .cc-payment-account-field {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field .input-group,
#expense_modal .cc-expense-quick__voucher .cc-payment-account-field .input-group {
  width: 100% !important;
  overflow: visible !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-container,
#expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-container {
  width: 100% !important;
  max-width: 100% !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection--single,
#expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection--single {
  height: auto !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection__rendered,
#expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection__rendered {
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
  padding: 2px 22px 2px 0 !important;
  color: #0f172a !important;
}
html[dir="rtl"] #cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection__rendered,
html[dir="rtl"] #expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection__rendered {
  padding: 2px 0 2px 22px !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection__arrow,
#expense_modal .cc-expense-quick__voucher .cc-payment-account-field .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid > .clearfix,
#expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid > .clearfix {
  display: none !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid > .col-md-12,
#expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid > .col-md-12,
#cc_global_expense_modal .cc-expense-quick__voucher .payment_details_div,
#expense_modal .cc-expense-quick__voucher .payment_details_div {
  grid-column: 1 / -1 !important;
}
#cc_global_expense_modal .cc-expense-quick__voucher .form-group,
#expense_modal .cc-expense-quick__voucher .form-group {
  margin-bottom: 0 !important;
}
#cc_global_expense_modal .cc-expense-quick__due,
#expense_modal .cc-expense-quick__due {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px dashed #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 13px !important;
}
#cc_global_expense_modal .cc-expense-quick__due #expense_payment_due,
#expense_modal .cc-expense-quick__due #expense_payment_due {
  color: #2563eb !important;
  font-weight: 800 !important;
}

@media (min-width: 768px) {
  #cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid,
  #expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-account-field,
  #expense_modal .cc-expense-quick__voucher .cc-payment-account-field {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px) {
  #cc_global_expense_modal .cc-expense-quick-dialog,
  #expense_modal .cc-expense-quick-dialog {
    width: auto !important;
    margin: 0.4rem !important;
  }
  #cc_global_expense_modal .cc-expense-quick__grid,
  #expense_modal .cc-expense-quick__grid,
  #cc_global_expense_modal .cc-expense-quick__extra-grid,
  #expense_modal .cc-expense-quick__extra-grid,
  #cc_global_expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid,
  #expense_modal .cc-expense-quick__voucher .cc-payment-fields-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #cc_global_expense_modal .cc-expense-quick__amount-wrap,
  #expense_modal .cc-expense-quick__amount-wrap {
    max-width: 100% !important;
  }
  #cc_global_expense_modal .cc-expense-quick__amount-input,
  #expense_modal .cc-expense-quick__amount-input {
    font-size: 1.2rem !important;
  }
  #cc_global_expense_modal .cc-expense-quick .modal-body,
  #expense_modal .cc-expense-quick .modal-body {
    padding: 10px !important;
  }
  #cc_global_expense_modal .cc-expense-quick__main,
  #expense_modal .cc-expense-quick__main,
  #cc_global_expense_modal .cc-expense-quick__voucher,
  #expense_modal .cc-expense-quick__voucher {
    padding: 10px !important;
  }
}

@media (max-width: 420px) {
  #cc_global_expense_modal .cc-expense-quick__amount,
  #expense_modal .cc-expense-quick__amount {
    padding: 10px !important;
  }
  #cc_global_expense_modal .cc-expense-quick__amount-input,
  #expense_modal .cc-expense-quick__amount-input {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 1.1rem !important;
  }
}

/* Business settings: collapsible panels + grids (visual only) */
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel {
  margin: 12px 0 16px !important;
  border: 1px solid #d5e6ef !important;
  border-radius: 12px !important;
  background: #fbfefe !important;
  box-shadow: 0 2px 10px rgba(27, 76, 104, .06) !important;
  overflow: hidden !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel__toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  background: linear-gradient(100deg, #eef7fc, #eefaf4) !important;
  color: #1e5d7e !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: start !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel__title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel__badge,
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-free-badge {
  display: inline-block !important;
  margin-inline-start: 8px !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(100deg, #22c55e, #16a34a) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  vertical-align: middle !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel__chev {
  transition: transform .2s ease !important;
  color: #2185b2 !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel__toggle[aria-expanded="true"] .cc-settings-panel__chev {
  transform: rotate(180deg) !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel__body {
  padding: 14px 14px 8px !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-panel__body > .row:first-child > .col-sm-12 > h4,
html body:not(.lockscreen) .cc-business-settings-page #cc-panel-weighing .cc-settings-panel__body > .row > .col-sm-12 > h4 {
  display: none !important;
}

/* Reward points: no grey well background (desktop + all sizes) */
html body:not(.lockscreen) .cc-business-settings-page #cc-panel-rewards .well,
html body:not(.lockscreen) .cc-business-settings-page #cc-panel-rewards .row.well,
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:has(#enable_rp) .well,
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:has(#enable_rp) .row.well {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* POS toggles: 4 per row desktop, 2 mobile — equal parallel columns */
html body:not(.lockscreen) .cc-business-settings-page .cc-pos-toggle-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -6px !important;
  margin-right: -6px !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-pos-toggle-grid > [class*="col-"] {
  width: 25% !important;
  float: none !important;
  margin-bottom: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  padding-bottom: 10px !important;
  display: flex !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-pos-toggle-grid .cc-toggle-item,
html body:not(.lockscreen) .cc-business-settings-page .cc-pos-toggle-grid .form-group.cc-toggle-item {
  flex: 1 1 auto !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #e2eef4 !important;
  border-radius: 10px !important;
  background: #fff !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-toggle-item .checkbox {
  margin: 0 !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-toggle-item label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-toggle-label {
  display: inline-block !important;
  max-width: calc(100% - 48px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-pos-toggle-grid > [class*="col-"] {
    width: 50% !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-pos-toggle-grid > [class*="col-"],
  html body:not(.lockscreen) .cc-business-settings-page .cc-pos-toggle-grid > .col-xs-6 {
    width: 50% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-toggle-item label {
    flex-wrap: nowrap !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-toggle-label {
    max-width: calc(100% - 42px) !important;
  }
}

/* Prefixes / modules: 4 columns desktop, 2 mobile */
html body:not(.lockscreen) .cc-business-settings-page .cc-settings-grid-4 .col-sm-4,
html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .col-sm-3 {
  width: 25% !important;
  float: right !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-settings-grid-4 .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .col-sm-3,
  html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .col-xs-6 {
    width: 50% !important;
  }
}
@media (max-width: 480px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-settings-grid-4 .col-sm-4 {
    width: 50% !important;
  }
}

/* Product / sales / purchase: denser grids (exclude custom labels — uses CSS grid) */
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-4:has(.checkbox),
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-4:has(.icheckbox_square-blue) {
  width: 50% !important;
}
html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-4:not(:has(.checkbox)):not(:has(.icheckbox_square-blue)) {
  width: 25% !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-4:not(:has(.checkbox)):not(:has(.icheckbox_square-blue)),
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-4:has(.checkbox),
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-md-4,
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-xs-4 {
    width: 50% !important;
  }
}
@media (max-width: 575px) {
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-md-4,
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-xs-4,
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-3 {
    width: 50% !important;
    float: right !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .pos-tab-content:not(.cc-custom-labels-tab) .row > .col-sm-6 {
    width: 100% !important;
  }
}

/* Custom labels: real 4-col grid, full-width fields, single-line labels */
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-settings-panel__body > .row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  margin: 0 !important;
  align-items: start !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-settings-panel__body > .row::before,
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-settings-panel__body > .row::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > .col-sm-12,
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > .col-md-12 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > .clearfix {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] > .form-group {
  width: 100% !important;
  margin-bottom: 4px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] > .form-group > label,
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] > .form-group > label[for] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group > .form-control {
  flex: 1 1 0 !important;
  width: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group > .input-group-addon {
  position: static !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group-addon label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group-addon input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
/* Shipping fields with two options: input full width, options under it */
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group:has(.input-group-addon label + label) {
  flex-wrap: wrap !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group:has(.input-group-addon label + label) > .form-control {
  flex: 1 0 100% !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group-addon:has(label + label) {
  flex: 1 0 100% !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding-inline: 8px !important;
  border-radius: 0 0 8px 8px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] > .form-group > .form-control,
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] > .form-group > select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-settings-panel__body > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-settings-panel__body > .row {
    grid-template-columns: 1fr !important;
  }
}

/* Product custom fields: keep cells tidy when dropdown options appear */
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .custom_label_product_div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .custom_label_product_div .custom_label_product_dropdown {
  margin: 0 !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .custom_label_product_div .custom_label_product_dropdown textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .custom_label_product_div .input-group-addon {
  flex-basis: 88px !important;
  min-width: 88px !important;
}
html body:not(.lockscreen) .cc-business-settings-page
  .cc-custom-labels-tab .custom_label_product_div .input-group-addon select {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Business location form (visual only) */
.cc-business-location-form .cc-bl-main-grid > [class*='col-'] {
  margin-bottom: 4px;
}
.cc-business-location-form .cc-bl-main-grid > .col-sm-12 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}
.cc-business-location-form #featured_products,
.cc-business-location-form #featured_products + .select2-container,
.cc-business-location-form .select2-container--default {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.cc-business-location-form #featured_products + .select2-container .select2-selection--multiple {
  min-height: 40px !important;
  width: 100% !important;
}
.cc-bl-payment-wrap { margin-top: 8px; }
.cc-bl-payment-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  margin: 4px auto 0;
  border-radius: 8px !important;
}
@media (max-width: 767px) {
  .cc-business-location-form .cc-bl-main-grid > .col-sm-4 {
    width: 100% !important;
  }
}

/* Product settings tab: 4 toggles/row, mobile 2; top fields 4-col */
html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-top-row > .col-sm-3,
html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-toggle-grid > .col-sm-3 {
  width: 25% !important;
  float: right !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-toggle-grid > .col-sm-3 .checkbox {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-toggle-grid > .col-sm-3 .form-group {
  padding: 6px 8px !important;
  border: 1px solid #e4eef4 !important;
  border-radius: 8px !important;
  background: #fff !important;
  min-height: 44px !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-top-row > .col-sm-3,
  html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-toggle-grid > .col-sm-3,
  html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-toggle-grid > .col-xs-6 {
    width: 50% !important;
  }
}
@media (max-width: 480px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-top-row > .col-sm-3,
  html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-top-row > .col-xs-12 {
    width: 100% !important;
    float: none !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-toggle-grid > .col-sm-3,
  html body:not(.lockscreen) .cc-business-settings-page .cc-product-settings-tab .cc-product-toggle-grid > .col-xs-6 {
    width: 50% !important;
  }
}
/* Project settings tab: desktop/tablet 3-col unchanged; phone = 1 full-width row */
html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-logo-col .cc-business-logo-field {
  max-width: 210px !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-logo-help-sm {
  margin-bottom: 2px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-business-logo-field .file-input {
  max-width: 200px !important;
}
@media (min-width: 992px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid > [class*="col-"],
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid > .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid > .col-xs-12 {
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    float: none !important;
    flex: 0 0 33.333333% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
@media (max-width: 991px) {
  /* Project tab: business name full width, then 2-col */
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid > [class*="col-"],
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid > .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid > .col-xs-12 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-fields-grid > [class*="col-"]:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-project-logo-col .cc-business-logo-field {
    max-width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-project-settings-tab .cc-business-logo-field .file-input {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   Business settings — mobile 2-col refinements (max-width:767)
   Scoped under .cc-business-settings-page only (non-POS)
   ========================================================= */
@media (max-width: 767px) {
  /* Tax tab: 2 fields per row; enable_inline_tax full width */
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) > .row > .clearfix {
    display: none !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) > .row > .col-sm-4 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) > .row > .col-sm-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    clear: both !important;
    padding-inline: 6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) > .row > .col-sm-8 .checkbox label,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) > .row > .col-sm-8 label {
    white-space: normal !important;
    line-height: 1.45 !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) .form-group {
    margin-bottom: 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) .input-group {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#tax_label_1) .form-control {
    min-width: 0 !important;
  }

  /* Email: #toggle_visibility .col-xs-4 → 2 per row */
  html body:not(.lockscreen) .cc-business-settings-page
    #toggle_visibility .col-xs-4,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content #toggle_visibility ~ .col-xs-4,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content .row > .col-xs-4 {
    width: 50% !important;
    max-width: 50% !important;
    float: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    padding-inline: 6px !important;
  }

  /* SMS panels: .col-xs-3 → 2 per row */
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content .row > .col-xs-3,
  html body:not(.lockscreen) .cc-business-settings-page
    .sms_service_settings > .col-xs-3 {
    width: 50% !important;
    max-width: 50% !important;
    float: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    padding-inline: 6px !important;
  }

  /* Custom labels: 2 per row (already grid above; reinforce) */
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .cc-settings-panel__body > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .col-sm-3 {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Dual-option toggles only: stack under each field (inputs unchanged) */
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group-addon:has(label + label) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    white-space: normal !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .cc-settings-panel__body > .row > [class*="col-"] .input-group-addon:has(label + label) label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    font-size: 11px !important;
  }
  /* Product fields: wider label input, compact type select (mobile only) */
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .custom_label_product_div .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .custom_label_product_div .input-group > .form-control {
    flex: 1 1 58% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .custom_label_product_div .input-group > .input-group-addon {
    flex: 0 1 42% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 42% !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-custom-labels-tab .custom_label_product_div .input-group-addon select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
  }

  /* Purchase settings toggles: 50% + info icon left of its text (mobile) */
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_purchase_status) > .row > .col-sm-6,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_purchase_status) > .row > .col-sm-4 {
    width: 50% !important;
    max-width: 50% !important;
    float: none !important;
    padding-inline: 6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_purchase_status) .checkbox {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 4px 6px !important;
    margin: 4px 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_purchase_status) .checkbox > label {
    display: inline-flex !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_purchase_status) .checkbox > i.fa-info-circle,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_purchase_status) .checkbox > .fa-info-circle,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_purchase_status) .checkbox > [data-toggle="popover"] {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    position: static !important;
    float: none !important;
    line-height: 1 !important;
  }

  /* Sales: keep early fields 2-col; stack commission / payment / stripe full-width */
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row > .col-sm-4 {
    width: 50% !important;
    max-width: 50% !important;
    float: none !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row > .col-md-12,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row > .col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    padding-inline: 6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) > .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#enable_payment_link) > .col-sm-4 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    padding-inline: 6px !important;
  }
  /* Commission: both dropdowns on one row; toggle full width below */
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) > .col-sm-4:has(#sales_cmsn_agnt),
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) > .col-sm-4:has(#cmmsn_calculation_type) {
    width: 50% !important;
    max-width: 50% !important;
    clear: none !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) > .col-sm-4:has(#is_commission_agent_required) {
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) #is_commission_agent_required ~ *,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) .checkbox:has(#is_commission_agent_required) > label {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    flex: 0 1 auto !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) .checkbox:has(#is_commission_agent_required) {
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) .form-group,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#enable_payment_link) .form-group {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) .input-group,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#enable_payment_link) .input-group,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) .form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#enable_payment_link) .form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#sales_cmsn_agnt) .select2-container,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) > .row:has(#enable_payment_link) .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) .checkbox {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) .checkbox label {
    white-space: normal !important;
    line-height: 1.4 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) h4 {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#default_sales_discount) h4 .fa-info-circle {
    margin-inline-start: 6px !important;
  }

  /* Modules: 2 per row on mobile + show ~10+ chars */
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .cc-settings-mod-item,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .col-sm-3,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .col-xs-6 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    display: flex !important;
    vertical-align: top !important;
    min-height: 44px !important;
    padding-inline: 4px !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .cc-settings-mod-item .form-group,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .cc-settings-mod-item .checkbox {
    width: 100% !important;
    margin: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .cc-settings-mod-item label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
    font-size: 11px !important;
  }

  /* Project: name 100%, rest 50% (override any 1-col leftovers) */
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-project-settings-tab .cc-project-fields-grid > [class*="col-"] {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .cc-project-settings-tab .cc-project-fields-grid > [class*="col-"]:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Reward points: remove grey well; 2 fields per row on mobile */
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .well,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .well,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .row.well {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .row.well > .clearfix,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .row.well > .clearfix {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .col-sm-6,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .col-sm-4,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .col-sm-6 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    display: block !important;
    vertical-align: top !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .col-sm-12,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
    float: none !important;
    padding-inline: 6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .form-group,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .form-group {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .input-group,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .select2-container,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .input-group {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .form-group > label,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .form-group > label {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    font-size: 11px !important;
  }
  /* Expiry period: full-width row + balanced number / unit controls */
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .col-sm-6:has(#rp_expiry_period),
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .col-sm-6:has(#rp_expiry_period) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .form-group:has(#rp_expiry_period) > .input-group,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .form-group:has(#rp_expiry_period) > .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .form-group:has(#rp_expiry_period) > .input-group > #rp_expiry_period,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .form-group:has(#rp_expiry_period) > .input-group > #rp_expiry_period {
    flex: 1 1 45% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .form-group:has(#rp_expiry_period) > .input-group > .input-group-addon,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .form-group:has(#rp_expiry_period) > .input-group > .input-group-addon {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-rewards .form-group:has(#rp_expiry_period) > .input-group > select.form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content:has(#enable_rp) .form-group:has(#rp_expiry_period) > .input-group > select.form-control {
    flex: 1 1 45% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Weighing scale barcode: 2 fields per row on mobile */
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-weighing .cc-settings-panel__body > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-weighing .cc-settings-panel__body > .row > .col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-weighing .cc-settings-panel__body > .row > .col-sm-3 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    display: block !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-weighing .form-group {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-weighing .form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-weighing .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tax: inline-tax row full width + readable single line */
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content > .row > .col-sm-8:has(.checkbox) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    clear: both !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content > .row > .col-sm-8 .checkbox {
    white-space: normal !important;
    width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    .pos-tab-content > .row > .col-sm-8 .checkbox > label {
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  /* Tooltips beside toggle (purchase / modules / sales) — not under */
  html body:not(.lockscreen) .cc-business-settings-page .checkbox {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .checkbox > br {
    display: none !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .checkbox > label {
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .checkbox > i.fa-info-circle,
  html body:not(.lockscreen) .cc-business-settings-page .checkbox > .fa-info-circle,
  html body:not(.lockscreen) .cc-business-settings-page .checkbox > [data-toggle="popover"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: static !important;
    align-self: center !important;
  }

  /* Payment panel: 2 fields per row on mobile (denominations stay full width) */
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .cc-settings-panel__body > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .cc-settings-panel__body > .row > .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .cc-settings-panel__body > .row > .col-sm-4 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    display: block !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .form-group {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .checkbox > label {
    white-space: normal !important;
    line-height: 1.3 !important;
    font-size: 11px !important;
  }
  /* Credit limit: input immediately beside its label (mobile only) */
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .form-group:has(#default_credit_limit) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .form-group:has(#default_credit_limit) > label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .form-group:has(#default_credit_limit) > #default_credit_limit.form-control,
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .form-group:has(#default_credit_limit) > input#default_credit_limit {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 140px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-payment .cc-settings-panel__body > .row > .col-sm-4:has(#default_credit_limit) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    clear: both !important;
  }

  /* Modules: truncate long names but keep ~10+ chars readable (2-col cell) */
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .cc-settings-mod-item .checkbox > label {
    max-width: calc(100% - 28px) !important;
    min-width: 10ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .cc-settings-mod-item {
    min-height: 42px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page
    #cc-panel-modules .cc-settings-mod-item .form-group {
    margin-bottom: 6px !important;
  }
}

/* ==========================================================================
   Contact show page - visual only (scoped; no POS/cashier/tables impact)
   ========================================================================== */
html body:not(.lockscreen) .cc-contact-show-page {
  --cc-cs-ink: #1f3a4d;
  --cc-cs-muted: #6b7f90;
  --cc-cs-line: #d7e6f0;
  --cc-cs-soft: #f3f9fd;
  --cc-cs-blue: #2563eb;
  --cc-cs-green: #12b981;
}

html body:not(.lockscreen) .cc-contact-show-page > .row:first-child {
  margin-bottom: 8px !important;
  align-items: center !important;
}

html body:not(.lockscreen) .cc-contact-show-page > .row:first-child h3 {
  margin: 0 !important;
  color: var(--cc-cs-ink) !important;
  font-weight: 800 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .box.box-solid {
  border: 1px solid var(--cc-cs-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(31, 58, 77, 0.06) !important;
  overflow: visible !important;
}

html body:not(.lockscreen) .cc-contact-show-page .box.box-solid > .box-body {
  padding: 16px 18px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px 20px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__body {
  flex: 1 1 420px !important;
  min-width: 0 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__identity {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2563eb, #12b981) !important;
  color: #fff !important;
  font-size: 20px !important;
  flex: 0 0 auto !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__name {
  margin: 0 0 4px !important;
  color: var(--cc-cs-ink) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__role {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  background: #e8f3ff !important;
  color: #1d4f91 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--cc-cs-line) !important;
  border-radius: 12px !important;
  background: var(--cc-cs-soft) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--cc-cs-blue) !important;
  flex: 0 0 auto !important;
  margin-top: 1px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip__label {
  color: var(--cc-cs-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip__value {
  color: var(--cc-cs-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: 190px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-action-btn:hover,
html body:not(.lockscreen) .cc-contact-show-page .cc-contact-action-btn:focus {
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-action-btn--due {
  background: linear-gradient(90deg, #2563eb 0%, #12b981 100%) !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-action-btn--discount {
  background: linear-gradient(90deg, #0ea5e9 0%, #22c55e 100%) !important;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.22) !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-action-btn i {
  font-size: 14px !important;
}

/* Tabs strip */
html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom {
  border: 1px solid var(--cc-cs-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(31, 58, 77, 0.05) !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .nav-tabs {
  background: linear-gradient(90deg, #edf6ff, #edf9f4) !important;
  border-bottom: 1px solid var(--cc-cs-line) !important;
  padding: 6px 8px 0 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .nav-tabs > li > a {
  border-radius: 10px 10px 0 0 !important;
  color: var(--cc-cs-ink) !important;
  font-weight: 700 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .nav-tabs > li.active > a {
  background: #fff !important;
  border-top: 2px solid var(--cc-cs-blue) !important;
  color: var(--cc-cs-blue) !important;
}

html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .tab-content {
  padding: 14px 16px !important;
  background: #fff !important;
}

/* Ledger filter bar */
html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 14px !important;
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--cc-cs-line) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #f7fbfe 0%, #ffffff 100%) !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--date {
  flex: 1 1 260px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--format {
  flex: 0 1 auto !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--branch {
  flex: 1 1 200px !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field__label {
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--cc-cs-ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field__control,
html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field .select2-container {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field .form-control,
html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field .select2-selection {
  min-height: 38px !important;
  border-radius: 10px !important;
  border-color: #cfe0ec !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-format-pills {
  display: inline-flex !important;
  gap: 6px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-format-pill {
  margin: 0 !important;
  padding: 7px 14px !important;
  border: 1px solid #cfe0ec !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--cc-cs-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-format-pill.active,
html body:not(.lockscreen) .cc-contact-show-page .cc-contact-format-pill:hover {
  border-color: transparent !important;
  background: linear-gradient(90deg, #2563eb, #12b981) !important;
  color: #fff !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-inline-start: auto !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-tool {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2563eb, #12b981) !important;
  color: #fff !important;
  font-size: 16px !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22) !important;
  transition: transform .15s ease, filter .15s ease !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-tool:hover,
html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-tool:focus {
  color: #fff !important;
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-tool .fa-file-pdf {
  color: #fff !important;
}

@media (max-width: 767px) {
  /* Compact contact show on mobile only — desktop rules unchanged */
  html body:not(.lockscreen) .cc-contact-show-page.content {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 6px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page > br {
    display: none !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page > .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
    margin-bottom: 8px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page > .row > [class*="col-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page > .row:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page > .row:first-child > [class*="col-"] {
    margin: 0 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page > .row:first-child h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page > .row:first-child .mt-15 {
    margin-top: 0 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .box.box-solid {
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .box.box-solid > .box-body {
    padding: 10px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile {
    flex-direction: column !important;
    gap: 10px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__body {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__identity {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__name {
    font-size: 15px !important;
    margin-bottom: 2px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__actions > .cc-contact-action-btn:only-child {
    grid-column: 1 / -1 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-action-btn {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-profile__meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    gap: 6px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip__icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip__label {
    font-size: 10px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-meta-chip__value {
    font-size: 11.5px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom {
    margin-bottom: 0 !important;
    border-radius: 12px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding: 4px 6px 0 !important;
    margin: 0 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .nav-tabs > li {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 2px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .nav-tabs > li > a {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .nav-tabs-custom > .tab-content {
    padding: 10px 8px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field,
  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--date,
  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--format,
  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--branch {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--date,
  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--format {
    grid-column: 1 / -1 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field--branch {
    grid-column: 1 / 2 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-tools {
    grid-column: 2 / 3 !important;
    margin: 0 !important;
    align-self: end !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field__label {
    font-size: 11px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field__control,
  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field .select2-container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field .form-control,
  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-field .select2-selection {
    min-height: 36px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-format-pills {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-format-pill {
    width: 100% !important;
    text-align: center !important;
    padding: 8px 10px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page .cc-contact-ledger-tool {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div {
    margin-top: 4px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Summary columns: full width, stacked — no half-empty col-xs-6 */
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div > .col-xs-6,
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .col-xs-6,
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .col-sm-6,
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .col-md-6 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 0 10px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d7e6f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(31, 58, 77, 0.06) !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .blue-heading {
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    table-layout: auto !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table > tbody > tr,
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table > tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid #e8eef3 !important;
    background: #fff !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table > tbody > tr:nth-child(even),
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table > tr:nth-child(even) {
    background: #f5fafd !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table > tbody > tr:last-child,
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table > tr:last-child {
    border-bottom: 0 !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table td:first-child {
    flex: 1 1 auto !important;
    color: #40566a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: start !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .summary-box > table.table td:last-child {
    flex: 0 0 auto !important;
    color: #1f3a4d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: end !important;
  }

  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .table-responsive,
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .cc-dt-xscroll,
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div .dataTables_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
  }

  /* Only the ledger data table needs min-width for horizontal scroll */
  html body:not(.lockscreen) .cc-contact-show-page #contact_ledger_div table#ledger_table {
    width: max-content !important;
    min-width: 720px !important;
    max-width: none !important;
    overflow: visible !important;
  }
}

/* Custom labels: collapsible panels + inner grids */
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab > .cc-settings-panel {
  margin-bottom: 12px !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  margin: 0 !important;
  align-items: start !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row::before,
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row > .col-sm-12,
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row > .col-md-12 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  float: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row > .clearfix {
  display: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row > [class*="col-"]:not(.col-sm-12):not(.col-md-12) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Product custom fields: 4 per row, compact name + type as list-button */
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px 6px !important;
  margin: 0 !important;
  align-items: start !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-item {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-item .custom_label_product_div {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-item .custom_label_product_div > label {
  display: block !important;
  margin: 0 0 2px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-controls::before,
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-controls::after {
  display: none !important;
  content: none !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-controls > .cc-cl-product-name {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 30px !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type {
  position: relative !important;
  display: flex !important;
  flex: 0 0 108px !important;
  align-items: center !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.custom_labels_products,
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.form-control {
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 30px !important;
  border: 1px solid #1c678c !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  background-color: #1c678c !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 8px center !important;
  padding: 2px 8px 2px 22px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  cursor: pointer !important;
  text-overflow: ellipsis !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.custom_labels_products option,
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.form-control option {
  color: #1e293b !important;
  background: #fff !important;
  font-weight: 600 !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-item .custom_label_product_dropdown {
  margin: 0 !important;
  width: 100% !important;
}
html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-item .custom_label_product_dropdown textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
}

@media (max-width: 1199px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Mobile/tablet only: widen text input; type = arrow-only button */
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-item .custom_label_product_div > label {
    font-size: 11px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-controls {
    gap: 4px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-controls > .cc-cl-product-name {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 12px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type {
    position: relative !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    overflow: hidden !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    border-radius: 6px !important;
    background-color: #1c678c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.4 1.2L6 6.8l4.6-5.6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 12px 8px !important;
    border: 1px solid #1c678c !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.custom_labels_products,
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.form-control {
    position: relative !important;
    z-index: 1 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    caret-color: transparent !important;
    background: #1c678c !important;
    background-image: none !important;
    border: 1px solid #1c678c !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    opacity: 1 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.custom_labels_products option,
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-type select.form-control option {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    background: #fff !important;
    font-weight: 600 !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-item .custom_label_product_dropdown textarea {
    font-size: 11px !important;
  }
}

/* Mobile: product custom field type select compact; enlarge text input */
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-inner-row {
    grid-template-columns: 1fr !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page .cc-custom-labels-tab .cc-cl-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
  }

  /* Modules: 2 per row, smaller labels, show ~10+ chars */
  html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .col-sm-3,
  html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .col-xs-6,
  html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .cc-settings-mod-item {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .checkbox label,
  html body:not(.lockscreen) .cc-business-settings-page #cc-panel-modules .cc-settings-mod-item .checkbox > label {
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 28px) !important;
    min-width: 10ch !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   Purchase create/edit — mobile products table: full width of card only
   Does not change search row or totals. Desktop unchanged (>767px)
   ========================================================================== */
@media (max-width: 767px) {
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card {
    overflow: visible !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card > .box-body {
    overflow: visible !important;
  }
  /* Bleed ONLY the products table past Bootstrap col side padding (15px each)
     Search row already uses padding:0 on cols — that mismatch caused the left gap */
  html body:not(.lockscreen) #scrollable-container .cc-purchase-page .cc-purchase-products-card .table-responsive,
  html body:not(.lockscreen) .cc-app-content .cc-purchase-page .cc-purchase-products-card .table-responsive,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-card .table-responsive {
    display: block !important;
    width: calc(100% + 30px) !important;
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    border: 0 !important;
    border-block: 1px solid #d7e6f0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table,
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table {
    min-width: 100% !important;
    width: max(100%, 1100px) !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table.cc-purchase-inline-tax,
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table.cc-purchase-inline-tax {
    width: max(100%, 1680px) !important;
    min-width: 1680px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > thead > tr > th,
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > thead > tr > th {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > tbody > tr > td,
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > tbody > tr > td {
    white-space: nowrap !important;
    vertical-align: middle !important;
    padding: 8px 8px !important;
    font-size: 12px !important;
  }
  /* Name column uses more of the mobile viewport */
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > tbody > tr > td:nth-child(2),
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > tbody > tr > td:nth-child(2) {
    min-width: 40vw !important;
    max-width: none !important;
    width: 40vw !important;
    white-space: normal !important;
    text-align: start !important;
    line-height: 1.35 !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > thead > tr > th:nth-child(2),
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > thead > tr > th:nth-child(2) {
    min-width: 40vw !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > tbody > tr > td:nth-child(3),
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > tbody > tr > td:nth-child(3),
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > thead > tr > th:nth-child(3),
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > thead > tr > th:nth-child(3) {
    min-width: 130px !important;
    max-width: 150px !important;
    width: 140px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > tbody > tr > td:nth-child(4),
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table > tbody > tr > td:nth-child(5),
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > tbody > tr > td:nth-child(4),
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table > tbody > tr > td:nth-child(5) {
    min-width: 110px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row {
    grid-template-columns: minmax(0, 1fr) 48px !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row > .sub_unit,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row > select.sub_unit,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-unit-name {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 10px !important;
    padding: 2px 2px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-products-table .form-control,
  html body:not(.lockscreen) .cc-purchase-page table#purchase_entry_table .form-control {
    min-width: 64px !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row > .sub_unit,
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-qty-unit-row > select.sub_unit {
    min-width: 48px !important;
    max-width: 48px !important;
    width: 48px !important;
    padding: 2px 2px !important;
    font-size: 10px !important;
  }
  html body:not(.lockscreen) .cc-purchase-page .cc-purchase-inline-input-meta {
    min-width: 120px !important;
  }
}

/* ===== Stock transfer create/edit — product row + mobile search barcode ===== */
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-search-group {
  display: table !important;
  width: 100% !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-search-group > .form-control {
  border: 0 !important;
  box-shadow: none !important;
  height: 42px !important;
  min-height: 42px !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-search-group > .input-group-addon {
  background: #F8FAFC !important;
  border: 0 !important;
  color: #64748B !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-search-group:focus-within {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-qty__wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-qty__wrap > .product_quantity {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-qty__wrap > .cc-st-qty__unit,
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-qty__wrap > .sub_unit {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 88px !important;
  max-width: 120px !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-qty__unit-label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  white-space: nowrap !important;
  background: #F1F5F9 !important;
  border-radius: 8px !important;
  min-height: 34px !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-product__title {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #0F172A !important;
  line-height: 1.35 !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-product__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  margin-top: 3px !important;
  font-size: 11.5px !important;
  color: #64748B !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-product__lot {
  margin-top: 6px !important;
  max-width: 100% !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-remove-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  cursor: pointer !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-remove-btn:hover {
  background: #FEE2E2 !important;
}
html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn {
  display: none !important;
}
@media (max-width: 991px) {
  html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-search-group > .input-group-btn {
    display: table-cell !important;
    width: 1% !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-search-group > .input-group-btn > .btn.cc-mobile-product-scan-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #2563EB !important;
    background: #EFF6FF !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-table-wrap,
  html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-products-card .table-responsive {
    overflow: visible !important;
    border: 0 !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table,
  html body:not(.lockscreen) .cc-stock-transfer-page .cc-st-products-table {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > thead {
    display: none !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody,
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tfoot {
    display: block !important;
    width: 100% !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row,
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.cc-st-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px 6px;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td,
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.cc-st-row > td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: start !important;
    vertical-align: top !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-product {
    grid-column: 1 / -1;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-qty {
    grid-column: 1 / 2;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-price {
    grid-column: 2 / 3;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-total {
    grid-column: 3 / 4;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-remove {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    align-self: end !important;
    justify-self: center !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-qty::before,
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-price::before,
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-total::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tfoot > tr {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 4px 4px 0 !important;
    border: 0 !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tfoot > tr > td {
    display: block !important;
    border: 0 !important;
    width: auto !important;
    padding: 0 !important;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table .form-control {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row,
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.cc-st-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-qty {
    grid-column: 1 / 2;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-price {
    grid-column: 2 / 3;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-total {
    grid-column: 1 / 3;
  }
  html body:not(.lockscreen) .cc-stock-transfer-page #stock_adjustment_product_table > tbody > tr.product_row > td.cc-st-remove {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    align-self: center !important;
  }
}