html {
  font-size: 12px;
}

/* Critical: Ensure header and navbar are always visible */
header,
header *,
.navbar,
.navbar * {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  html {
    font-size: 13px;
  }
}

body {
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: start;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

.form-label {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.form-control, .form-select {
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  text-align: start;
}

.btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
}

.table {
  font-size: 0.85rem;
}

.table th, .table td {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
  text-align: start;
}

.card {
  margin-bottom: 0.75rem;
}

.card-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

.card-body {
  padding: 0.75rem;
}

.container {
  padding-inline-end: 0.75rem;
  padding-inline-start: 0.75rem;
  max-width: 100%;
}

@media (max-width: 576px) {
  .container {
    padding-inline-end: 0.5rem;
    padding-inline-start: 0.5rem;
  }
}

.row {
  margin-inline-end: -0.25rem;
  margin-inline-start: -0.25rem;
}

.row > * {
  padding-inline-end: 0.25rem;
  padding-inline-start: 0.25rem;
}

.g-3 {
  --bs-gutter-y: 0.5rem;
  --bs-gutter-x: 0.5rem;
}

/* Dropdown arrow on the trailing edge (right in LTR, left in RTL) */
.form-select {
  background-position: right 0.75rem center !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  padding-inline-end: 2.5rem !important;
  padding-inline-start: 0.75rem !important;
  text-align: start !important;
  background-repeat: no-repeat;
  background-size: 16px 12px;
}

html[dir="rtl"] .form-select {
  background-position: left 0.75rem center !important;
}

.form-select:focus {
  background-position: right 0.75rem center !important;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

html[dir="rtl"] .form-select:focus {
  background-position: left 0.75rem center !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Remove border radius from all elements */
* {
  border-radius: 0 !important;
}

.btn,
.form-control,
.form-select,
.input-group,
.card,
.modal-content,
.dropdown-menu,
.alert,
.badge,
.navbar,
.table,
.img-thumbnail,
.pagination,
.page-link,
.list-group-item,
.breadcrumb,
.breadcrumb-item,
.progress,
.progress-bar,
.tooltip,
.popover,
.tag-item,
.tags-input-container {
  border-radius: 0 !important;
}

/* RTL: reverse input-group so the leading control sits on the right */
html[dir="rtl"] .input-group {
  flex-direction: row-reverse;
}

.input-group > .form-control,
.input-group > .form-select {
  text-align: start;
}

.navbar-nav {
}

.navbar-nav .nav-link {
  text-align: start;
}

html[dir="rtl"] .btn-group {
  flex-direction: row-reverse;
}

.card-header,
.card-body {
  text-align: start;
}

.form-label {
  text-align: start;
}

textarea.form-control {
  text-align: start;
}

/* Select2 RTL and styling */
.select2-container {
  text-align: start;
}

.select2-container--bootstrap-5 .select2-selection {
  border-radius: 0 !important;
  border: 1px solid #ced4da;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
}

.select2-container--bootstrap-5 .select2-selection--single {
  height: auto;
  line-height: 1.5;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding-inline-start: 2.5rem !important;
  padding-inline-end: 0.75rem !important;
  text-align: start !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  inset-inline-start: auto !important;
  inset-inline-end: 0.75rem !important;
  height: 100%;
}

/* Clear button on the trailing edge (left in RTL, right in LTR) */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
  float: inline-end !important;
  margin-inline-end: 0.5rem !important;
  margin-inline-start: 0 !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0.5rem !important;
  position: absolute !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding-inline-start: 2.5rem !important;
  padding-inline-end: 2rem !important; /* Add space for clear button on left */
  text-align: start !important;
}

.select2-dropdown {
  border-radius: 0 !important;
  border: 1px solid #ced4da;
  text-align: start;
}

.select2-search--dropdown .select2-search__field {
  border-radius: 0 !important;
  border: 1px solid #ced4da;
  padding: 0.35rem 0.5rem;
  text-align: start;
}

.select2-results__option {
  text-align: start;
  padding: 0.5rem 0.75rem;
}

.select2-results__option--highlighted {
  background-color: #0d6efd;
  color: white;
}

/* Tags input container - ensure correct order: select, input, button */
.tags-input-container .input-group {
  flex-direction: row !important;
}

/* Professional Navbar Styling */
.custom-navbar {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  padding: 0.6rem 1rem;
  border-bottom: 3px solid rgba(255, 255, 255, 0.15);
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  width: 100%;
  z-index: 1030;
  min-height: 56px;
  overflow-x: auto;
  overflow-y: hidden;
}

/* قائمة إحصائيات - قائمة مخصصة بأولوية طبقية عالية */
.custom-navbar .nav-item-stats-dropdown {
  position: relative;
}
.custom-navbar .stats-dropdown-menu {
  display: none;
  position: fixed;
  min-width: 200px;
  background: #2d3748;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  padding: 0.5rem 0;
  z-index: 9999 !important;
  list-style: none;
}
.custom-navbar .nav-item-stats-dropdown.open .stats-dropdown-menu {
  display: block !important;
}
.custom-navbar .stats-dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
  transition: background 0.2s;
  border: none;
  text-align: start;
}
.custom-navbar .stats-dropdown-item:hover {
  background: rgba(255,255,255,0.15);
  color: #fff !important;
}
.custom-navbar .stats-dropdown-item.active {
  background: rgba(255,255,255,0.2);
  font-weight: 600;
}
.custom-navbar .stats-arrow {
  font-size: 0.65rem;
  margin-inline-start: 0.25rem;
  transition: transform 0.2s;
}
.custom-navbar .nav-item-stats-dropdown.open .stats-arrow {
  transform: rotate(180deg);
}
.custom-navbar .navbar-collapse.show {
  overflow: visible !important;
}

.custom-navbar .navbar-brand {
  font-size: 1.2rem;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  transition: all 0.3s ease;
  border-radius: 6px;
  margin-inline-start: 0.75rem;
}

.custom-navbar .navbar-brand:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.custom-navbar .brand-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.custom-navbar .brand-text {
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-navbar .navbar-nav {
  gap: 0.3rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.custom-navbar .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  padding: 0.5rem 0.8rem !important;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  margin: 0 0.1rem;
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.custom-navbar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.custom-navbar .nav-link.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.custom-navbar .nav-link.active::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.custom-navbar .nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 4px 0 0 4px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.custom-navbar .nav-icon {
  font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
  line-height: 1;
  flex-shrink: 0;
}

.custom-navbar .nav-link:hover .nav-icon,
.custom-navbar .nav-link.active .nav-icon {
  transform: scale(1.1);
}

.custom-navbar .nav-text {
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
}

.custom-navbar .navbar-toggler {
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (min-width: 992px) {
  .custom-navbar .navbar-toggler {
    display: none !important;
  }
}

.custom-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.custom-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.5em;
  height: 1.5em;
  display: block;
}

/* Desktop navbar layout */
@media (min-width: 992px) {
  .custom-navbar .navbar-nav {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    width: auto;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  
  .custom-navbar .navbar-nav:last-child {
    margin-inline-end: auto;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  
  .custom-navbar .container-fluid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    overflow: visible;
  }
  
  .custom-navbar .navbar-collapse {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    overflow: visible;
  }
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .custom-navbar {
    flex-wrap: wrap;
  }
  
  .custom-navbar .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }
  
  .custom-navbar .navbar-brand {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
  
  .custom-navbar .navbar-toggler {
    margin-inline-end: 0.5rem;
    order: 2;
  }
  
  .custom-navbar .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: stretch;
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .custom-navbar .navbar-collapse:not(.show) {
    display: none;
  }
  
  .custom-navbar .navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
  }
  
  .custom-navbar .navbar-collapse.collapsing {
    display: flex !important;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
  }
  
  .custom-navbar .navbar-nav {
    margin-top: 0;
    gap: 0.25rem;
    flex-direction: column;
    width: 100%;
  }
  
  .custom-navbar .nav-link {
    padding: 0.65rem 0.9rem !important;
    margin: 0.2rem 0;
    width: 100%;
    justify-content: flex-start;
    font-size: 0.85rem;
  }
  
  .custom-navbar .nav-icon {
    font-size: 1rem;
  }
  
  .custom-navbar .nav-text {
    font-size: 0.8rem;
  }
}

/* Mobile specific styles */
@media (max-width: 576px) {
  .container {
    padding-inline-end: 0.5rem;
    padding-inline-start: 0.5rem;
  }
  
  .custom-navbar {
    padding: 0.5rem 0.75rem;
    display: flex !important;
    visibility: visible !important;
  }
  
  .custom-navbar .container-fluid {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .custom-navbar .navbar-brand {
    font-size: 1.1rem;
    padding: 0.4rem 0.75rem;
    display: flex !important;
    visibility: visible !important;
  }
  
  .custom-navbar .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .custom-navbar .brand-text {
    font-size: 0.9rem;
  }
  
  .custom-navbar .nav-link {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.8rem;
  }
  
  .custom-navbar .nav-icon {
    font-size: 0.95rem;
  }
  
  .custom-navbar .nav-text {
    font-size: 0.75rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  h3 {
    font-size: 1.1rem;
  }
  
  .btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  
  .table {
    font-size: 0.75rem;
  }
  
  .table th, .table td {
    padding: 0.3rem 0.4rem;
  }
  
  .card-body {
    padding: 0.5rem;
  }
  
  .card-header {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }
  
  .form-control, .form-select {
    font-size: 0.8rem;
    padding: 0.3rem 0.4rem;
  }
  
  .form-label {
    font-size: 0.8rem;
  }
}

/* Tablet styles */
@media (min-width: 577px) and (max-width: 991px) {
  .container {
    padding-inline-end: 1rem;
    padding-inline-start: 1rem;
  }
  
  .custom-navbar .nav-link {
    padding: 0.55rem 0.85rem !important;
    font-size: 0.85rem;
  }
  
  .custom-navbar .nav-icon {
    font-size: 1rem;
  }
  
  .custom-navbar .nav-text {
    font-size: 0.8rem;
  }
}

/* Ensure tables are responsive */
@media (max-width: 991px) {
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table {
    min-width: 600px;
  }
}

/* Ensure buttons don't wrap on mobile */
@media (max-width: 576px) {
  .btn-group {
    flex-wrap: wrap;
  }
  
  .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .d-flex.justify-content-between > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

/* Table Header Styling - Match Navbar Colors */
.table-dark,
.table thead.table-dark th,
.table thead th {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  font-weight: 600;
}

.table-dark th,
.table thead.table-dark th {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
  color: #ffffff !important;
}

/* Pagination Styling - Match Navbar Colors */
.pagination .page-link {
  color: #4a5568;
  background-color: #ffffff;
  border-color: #dee2e6;
  transition: all 0.3s ease;
}

.pagination .page-link:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  border-color: #4a5568;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  border-color: #2d3748;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #ffffff;
  border-color: #dee2e6;
  opacity: 0.6;
}

/* Actions Column Styling - Consistent across all pages */
.table td:first-child,
.table th:first-child,
.table td[data-column="Actions"],
.table th[data-column="Actions"] {
  width: 1% !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  max-width: none !important;
}

.table td:first-child .btn-group,
.table td[data-column="Actions"] .btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.15rem;
  width: auto;
}

.table td:first-child .btn,
.table td[data-column="Actions"] .btn {
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  line-height: 1.2;
}

/* Override table layout for actions column */
.table {
  table-layout: auto;
}

/* Ensure navbar is always visible and functional */
.navbar {
  position: relative;
  z-index: 1030;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

header {
  display: block !important;
  visibility: visible !important;
}

.custom-navbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

@media (min-width: 992px) {
  .navbar-collapse {
    display: flex !important;
    flex-wrap: nowrap;
    overflow: visible;
  }
}

/* Force navbar elements to be visible on mobile */
@media (max-width: 991px) {
  .custom-navbar,
  .custom-navbar .container-fluid,
  .custom-navbar .navbar-brand,
  .custom-navbar .navbar-toggler {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .custom-navbar .navbar-toggler {
    display: block !important;
  }
}

/* Profit viability coloring (orange = in viability range) */
.profit-orange {
  color: #fd7e14 !important;
  font-weight: 600;
}

/* Ensure container-fluid works properly on mobile */
.container-fluid {
  padding-inline-end: 0.75rem;
  padding-inline-start: 0.75rem;
}

@media (max-width: 576px) {
  .container-fluid {
    padding-inline-end: 0.5rem;
    padding-inline-start: 0.5rem;
  }
}

/* Sortable table headers - shared across Order, Shipment, FBAShipment, Sale */
.sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-inline-end: 20px !important;
  transition: background-color 0.2s ease;
}

.sortable-header:hover {
  background-color: #3a3f44 !important;
}

.sortable-header::after {
  content: '⇅';
  position: absolute;
  inset-inline-end: 5px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  font-size: 0.8em;
}

.sortable-header.sort-asc::after {
  content: '▲';
  opacity: 1;
  color: #ffc107;
}

.sortable-header.sort-desc::after {
  content: '▼';
  opacity: 1;
  color: #ffc107;
}

/* صفحات التفاصيل — عمود المنتج: سطر الاسم + سطر المعرّفات؛ عرض العمود = عرض سطر المعرّفات فقط (لا نسبة من colgroup) */
.table-responsive table.table-details-product-layout {
  table-layout: auto;
  width: 100%;
}

/* colgroup: عمود المنتج فقط — لا تفرض نسبة مئوية (كانت تسبب عرضاً زائداً) */
table.table-details-product-layout col.col-details-product {
  width: 0 !important;
}

td.details-table-product-col {
  /* width:0 + table layout = أقل عرض ممكن يكفي المحتوى (سطر المعرّفات) دون أخذ فراغ زائد من الجدول */
  width: 0;
  max-width: 96vw;
  min-width: 0;
  vertical-align: top !important;
  white-space: normal !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* مع سطر معرّفات: الحاوية بعرض سطر المعرّفات فقط (في التدفق)؛ الاسم فوقه يُقتطع لنفس العرض */
.details-product-cell--with-meta {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 96vw;
  box-sizing: border-box;
  padding-top: 1.35em;
  min-width: 0;
  vertical-align: top;
}

.details-product-cell--with-meta .details-product-name-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.details-product-cell--with-meta .details-product-meta-line {
  display: block;
  /* العرض المعتمد: عرض نص Barcode | ASIN | SKU | … كسطر واحد */
  width: max-content;
  max-width: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  color: #6c757d;
  line-height: 1.35;
}

.details-product-cell--with-meta .details-product-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  width: 100%;
  min-width: 0;
  font-weight: 600;
  color: #212529;
}

/* بدون معرّفات: الاسم فقط — حد معقول حتى لا يتمدد العمود بلا حدود */
.details-product-cell--name-only {
  display: block;
  min-width: 0;
  max-width: min(56ch, 96vw);
}

.details-product-cell--name-only .details-product-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  max-width: 100%;
  font-weight: 600;
  color: #212529;
}
/* ===== شريط القوائم بسطرين (2026-09-26): الأول = قوائم الموقع الأصلية (أسود)، الثاني = الصفحات الجديدة ===== */
header { padding: 6px 8px 0; }
.custom-navbar.nav-row-main {
  background: #121418;
  border-bottom: 1px solid #2c323b;
  border-radius: 12px 12px 0 0;
  box-shadow: none;
  margin-bottom: 0 !important;
}
.custom-navbar.nav-row-new {
  background: #2a2f38;
  border-bottom: 3px solid #d4a017;
  border-radius: 0 0 12px 12px;
  min-height: 44px;
  padding: 0.25rem 1rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.custom-navbar.nav-row-new .nav-link { padding: 0.35rem 0.7rem !important; }
.nav-row-label {
  color: #f0c24b;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  margin-inline-end: 0.6rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(240, 194, 75, 0.45);
  border-radius: 20px;
}
.nav-beta {
  font-size: 0.66rem;
  font-weight: 700;
  background: #f0c24b;
  color: #3b2a00;
  border-radius: 20px;
  padding: 0.05rem 0.5rem;
  margin-inline-start: 0.2rem;
  line-height: 1.5;
}
/* الشاشات الواسعة: التفاف بدل السحب الأفقي */
@media (min-width: 992px) {
  .custom-navbar.nav-row-main, .custom-navbar.nav-row-new { overflow: visible; flex-wrap: wrap; }
  .custom-navbar.nav-row-main .navbar-nav, .custom-navbar.nav-row-new .navbar-nav { flex-wrap: wrap; row-gap: 0.2rem; }
  /* السطر الثاني يلتف داخل عرض الصفحة (كان يتجاوزه عند 1024) */
  .custom-navbar.nav-row-new .container-fluid { min-width: 0; }
  .custom-navbar.nav-row-new .navbar-nav { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 992px) {
  .custom-navbar.nav-row-main .container-fluid,
  .custom-navbar.nav-row-main .navbar-collapse { flex-wrap: wrap; min-width: 0; }
  /* القوائم تلتف داخل مساحتها، وقائمة المستخدم تبقى في طرفها */
  .custom-navbar.nav-row-main .navbar-nav.flex-grow-1 { flex: 1 1 0; min-width: 0; }
  .custom-navbar.nav-row-main .navbar-collapse > .navbar-nav:not(.flex-grow-1) { flex: 0 0 auto; }
}
/* الجوال: السطر الثاني سطر واحد يُسحب جانبياً بدل قائمة طويلة */
@media (max-width: 991.98px) {
  .custom-navbar.nav-row-new .container-fluid { flex-wrap: nowrap; overflow-x: auto; }
  .custom-navbar.nav-row-new .navbar-nav { flex-direction: row !important; flex-wrap: nowrap; }
  .custom-navbar.nav-row-new .nav-link { padding: 0.3rem 0.55rem !important; }
}
/* الشرح المنبثق لصفحات السطر الثاني */
.nav-tip {
  position: fixed; z-index: 10000; max-width: 330px; direction: rtl; text-align: right;
  background: #fbf3e2; color: #3d2f16; border: 1px solid #e6d3a8; border-radius: 12px;
  padding: 0.65rem 0.85rem; font-size: 0.86rem; line-height: 1.7;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.nav-tip.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== «شرح هذه الصفحة» (قرار المالك ١٣ أكتوبر ٢٠٢٦): رابط صغير بجانب اسم الصفحة يفتح الشرح كاملاً،
   ولا يُفتح الشرح وحده أبداً. الرابط بلون العنوان نفسه خافتاً، فيصلح فوق الأشرطة الملوّنة والبيضاء معاً،
   وحجمه ثابت بوحدة rem فلا يكبر داخل العناوين الكبيرة. ونقله إلى جانب العنوان في js/s44-pageguide.js ===== */
.pg-link {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  margin: 0; margin-inline-start: .55rem; padding: 0 .1rem; border: 0; background: none;
  color: inherit; opacity: .68; font-family: inherit; font-weight: 500; font-size: .74rem; line-height: 1.2; letter-spacing: 0;
  text-shadow: none; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.pg-link:hover, .pg-link:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.pg-link:not(.pg-in-h):not(.pg-alone) { visibility: hidden; }   /* قبل نقله إلى العنوان: لا يرمش في مكانه الأول */
.pg-link.pg-alone { margin: 0 0 .35rem; }
.pg-q {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50% !important; /* site.css يلغي الاستدارة عن الكل */
  font: 700 9px/1 system-ui, sans-serif;
}
/* نافذة الشرح */
html.pg-locked, html.pg-locked body { overflow: hidden; }
.pg-pop {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 21000; display: flex; align-items: flex-start; justify-content: center;
  box-sizing: border-box;   /* مقاس الشاشة لا مقاس الصفحة: الوضع الليلي يضع مرشّحاً على الجذر فيصير هو حاوي العناصر الثابتة */
  padding: 7vh 16px 16px; background: rgba(15, 20, 30, .45);
}
.pg-pop[hidden] { display: none; }
html.th-night .pg-pop { background: rgba(240, 235, 225, .5); }   /* الليلي يقلب الألوان: الفاتح هنا يصير تعتيماً داكناً */
.pg-box {
  width: min(880px, 100%); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  background: #fbf3e2; color: #3d2f16; border: 1px solid #e6d3a8; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28); text-align: start;
}
.pg-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .85rem; border-bottom: 1px solid #efdfbb; font-size: .95rem;
}
.pg-top b { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; }
.pg-top .pg-q { width: 18px; height: 18px; font-size: 11px; }
.pg-x { border: 0; background: none; color: inherit; font-size: 1rem; line-height: 1; padding: .3rem .45rem; border-radius: 8px; cursor: pointer; opacity: .7; }
.pg-x:hover, .pg-x:focus-visible { opacity: 1; background: rgba(0, 0, 0, .06); }
.pg-body { padding: .7rem .85rem .85rem; overflow: auto; }
.pg-idea { margin: 0 0 .55rem; line-height: 1.8; font-size: .9rem; }
.pg-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .45rem; }
.pg-part { background: rgba(255,255,255,.6); border: 1px solid #efdfbb; border-radius: 12px; padding: .45rem .6rem; font-size: .83rem; line-height: 1.65; }
.pg-part b { display: block; margin-bottom: .1rem; }
.pg-start { margin: .55rem 0 0; font-size: .86rem; }
/* «جدول ضوابط العمل» داخل الشرح (طلب المالك 2026-10-01): المهل والخطوات والمسؤول */
.pg-rules { margin: .6rem 0 0; }
.pg-rules-t { display: block; margin-bottom: .35rem; font-size: .87rem; }
.pg-rules table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.6); border: 1px solid #efdfbb; border-radius: 12px; overflow: hidden; font-size: .82rem; }
.pg-rules th { background: rgba(0,0,0,.05); text-align: right; font-weight: 600; padding: .4rem .55rem; white-space: nowrap; }
.pg-rules td { padding: .45rem .55rem; border-top: 1px solid #efdfbb; line-height: 1.65; vertical-align: top; }
.pg-r-k { white-space: nowrap; font-weight: 600; }
.pg-r-w { min-width: 9rem; }
.pg-r-o { white-space: nowrap; font-weight: 600; }
@media (max-width: 700px) {
  .pg-rules table, .pg-rules thead, .pg-rules tbody, .pg-rules tr, .pg-rules td { display: block; width: 100%; }
  .pg-rules thead { display: none; }
  .pg-rules tr { border-top: 1px solid #efdfbb; padding: .3rem 0; }
  .pg-rules td { border: 0; padding: .2rem .55rem; }
  .pg-rules td.pg-r-w::before { content: "المهلة: "; font-weight: 600; }
  .pg-rules td.pg-r-o::before { content: "المسؤول: "; font-weight: 600; }
}
@media (max-width: 576px) {
  .pg-parts { grid-template-columns: 1fr; }
  .pg-pop { padding: 10px; }
  .pg-box { max-height: calc(100vh - 20px); }
}

/* ===== «🎬 شرح بالفيديو» (2026-09-27): فيديو حي على الصفحة الحقيقية ===== */
.pt-btn { display: inline-flex; align-items: center; gap: .35rem; border: 0; border-radius: 12px; padding: .38rem .9rem; font-weight: 800; font-size: .9rem;
  background: linear-gradient(135deg, #ffcf4d, #f5a300); color: #3a2400; box-shadow: 0 6px 16px rgba(245,163,0,.35); cursor: pointer; }
.pt-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pt-btn i { font-size: 1.1rem; }
.pt-embed header, .pt-embed .pt-btn, .pt-embed footer { display: none !important; }
.pt-ov { position: fixed; inset: 0; z-index: 10050; background: rgba(12,8,24,.72); display: grid; place-items: center; padding: 16px; }
.pt-ov[hidden] { display: none; }
.pt-box { width: min(1100px, 100%); background: #14101f; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); direction: rtl; }
.pt-top { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; color: #f3ecff; }
.pt-top b { font-size: 1rem; }
.pt-voice { font-size: .75rem; color: #b9a8e6; margin-inline-start: auto; }
.pt-x { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 2rem; height: 2rem; border-radius: 50%; }
.pt-stage { position: relative; aspect-ratio: 16 / 9; background: #fff; overflow: hidden; }
.pt-stage iframe { position: absolute; top: 0; left: 0; width: 1366px; border: 0; transform-origin: top left; pointer-events: none; }
.pt-cap { position: absolute; inset-inline: 4%; bottom: 5%; display: flex; gap: .6rem; align-items: center; background: rgba(20,12,40,.9); color: #fff;
  border-radius: 16px; padding: .7rem 1rem; font-size: clamp(.9rem, 1.6vw, 1.2rem); font-weight: 700; line-height: 1.7; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s; }
.pt-cap.on { opacity: 1; transform: none; }
.pt-emo { font-size: 1.8em; line-height: 1; }
.pt-ctrl { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; color: #d8ccf5; }
.pt-ctrl button { border: 0; background: rgba(255,255,255,.1); color: #fff; border-radius: 10px; min-width: 2.3rem; height: 2.1rem; font-size: 1rem; }
.pt-ctrl button:hover { background: rgba(255,255,255,.2); }
.pt-prog { flex: 1; height: 6px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; }
.pt-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffcf4d, #f5a300); }
.pt-n { font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 3rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .pt-cap { transition: none; } }

/* ===== حجم الخط (تجربة 2026-09-28): 3 أحجام تكبّر محتوى الصفحة كله (الجداول والأرقام معاً) دون شريط القوائم ===== */
html.fzon.fz2 main { zoom: 1.12; }
html.fzon.fz3 main { zoom: 1.25; }
html.fzon.fz4 main { zoom: 1.35; }
/* خط عريض: تسميك موحّد لكل النصوص (يحافظ على فرق العناوين والنص العادي) */
/* الخط العريض بوزن حقيقي بلا حد أو ظل (قرار المالك 2026-09-28: كان مشوشاً) — :where حتى لا يطغى على العناوين والعريض أصلاً */
html.fzon.fzb main :where(p, li, td, dd, dt, label, span, a, div, small, input, select, textarea, button, .form-control, .form-select) { font-weight: 600; }
html.fzon main { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.fs-switch { position: fixed; top: 6px; left: 8px; z-index: 2000; display: flex; gap: 2px; background: rgba(255,255,255,.95); border: 1px solid #d8dee6; border-radius: 999px; padding: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.15); direction: rtl; }
.fs-switch button { border: none; background: transparent; width: 24px; height: 22px; border-radius: 999px; font-weight: 800; color: #16324f; cursor: pointer; line-height: 1; padding: 0; }
.fs-switch .fs-b { font-family: Georgia, serif; font-size: 13px; }
.fs-sep { width: 1px; background: #d8dee6; margin: 3px 2px; }
.fs-switch button.on { background: #16324f; color: #fff; }
.fs-switch button:hover:not(.on) { background: #eef3fb; }
@media print { .fs-switch { display: none; } }

/* ===== الواجهتان: أمازون | نون وترينديول (2026-09-28) ===== */
.ws-switch { display: flex; align-items: center; background: rgba(0,0,0,.25); border-radius: 999px; padding: 3px; margin-inline-end: 8px; gap: 2px; }
.ws-switch a { color: #e2e8f0; text-decoration: none; font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.ws-switch a:hover { background: rgba(255,255,255,.12); color: #fff; }
.ws-switch a.on { background: #ff9900; color: #1a1a1a; }
body.ws-noon .ws-switch a.on { background: #feee00; color: #1a1a1a; }
body.ws-noon .custom-navbar.nav-row-main { background: linear-gradient(135deg, #3d3a1c 0%, #26240f 100%); border-bottom: 3px solid #feee00; margin-bottom: 1rem; }
body.ws-noon .custom-navbar .nav-link.active { background: rgba(254,238,0,.18); }
.nt-store-pick { display: flex; align-items: center; gap: 3px; margin-inline-start: 10px; background: rgba(255,255,255,.08); border-radius: 8px; padding: 3px; }
.nt-store-pick a { color: #e2e8f0; text-decoration: none; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; }
.nt-store-pick a.on { background: #feee00; color: #1a1a1a; }

/* اختيار أكثر من متجر في قائمة المبيعات (2026-09-28) */
.store-multi { display: inline-flex; align-items: center; gap: 1px; }
.store-add { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .75rem; font-weight: 800; text-decoration: none; color: #4b5563; background: #eef2f7; margin-inline-start: 2px; }
.store-add:hover { background: #dbeafe; color: #1d4ed8; }

/* ===== المظهر: افتراضي / دافئ / نهاري (قرار المالك 03/10/2026) =====
   زر الهلال ☾ في شريط الخط يتنقّل بينها، ويُحفظ على الجهاز (s44-th).
   الدافئ: درجات البيج والرملي لإراحة العين؛ النهاري: أبيض أخفّ سطوعاً. يُطبَّق على الصفحة كلها مرة واحدة
   (حتى الألوان المكتوبة داخل الصفحات)، فلا تحتاج كل صفحة تعديلاً خاصاً. */
html.th-warm body::after, html.th-day body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; mix-blend-mode: multiply; }
html.th-warm body::after { background: #f2dfbf; }   /* بيج رملي: الأبيض يصير كريمياً والألوان تدفأ، والنص يبقى واضحاً */
html.th-day  body::after { background: #e6e9ee; }   /* أبيض أخفّ سطوعاً بلمسة رمادية باردة */
@media print { html.th-warm body::after, html.th-day body::after { display: none; } }
.fs-switch .fs-th { font-size: 15px; }
.fs-switch .fs-th.on[data-th="warm"] { background: #a8641d; color: #fff8ec; }
.fs-switch .fs-th.on[data-th="day"]  { background: #5b7088; color: #fff; }

/* ===== الوضع الليلي (الضغطة الرابعة على الهلال) — قرار المالك 03/10/2026 =====
   قلب الألوان للصفحة كلها، ثم إعادة قلب الصور والفيديو فتبقى بألوانها الحقيقية. */
html.th-night { filter: invert(.9) hue-rotate(180deg); background: #111; }
html.th-night img, html.th-night video, html.th-night canvas, html.th-night iframe, html.th-night .fs-switch { filter: invert(1) hue-rotate(180deg); }
@media print { html.th-night { filter: none; } html.th-night img, html.th-night video, html.th-night canvas, html.th-night iframe { filter: none; } }
.fs-switch .fs-th.on[data-th="night"] { background: #1f2937; color: #fde68a; }

/* ===== تنسيق الجداول في كل الموقع (03/10/2026) ===== */
/* أرقام متساوية العرض: تصطف الأرقام تحت بعضها فتسهل المقارنة */
table td, table th { font-variant-numeric: tabular-nums; }
/* تمييز الصف تحت المؤشر — بظل داخلي فلا يمحو ألوان الحالات */
table tbody tr:hover > td { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, .07); }
/* رأس الجدول العائم (ينشئه سكربت الرأس للجداول الطويلة) */
.fh-box { position: fixed; top: 0; z-index: 1500; overflow: hidden; display: none; pointer-events: none; box-shadow: 0 3px 8px rgba(0,0,0,.18); background: #fff; }
.fh-box table { table-layout: fixed; background: #fff; }
.fh-box th { background-color: #f1f5f9; }
@media print { .fh-box { display: none !important; } }
/* ضغط المسافات (زر ☰) */
html.dense table td, html.dense table th { padding-top: 2px !important; padding-bottom: 2px !important; line-height: 1.25; }
html.dense .card-body { padding-top: .5rem; padding-bottom: .5rem; }
.fs-switch .fs-dn { font-size: 13px; }

/* «جدول مختصر» (طلب المالك 2026-10-03): الصف سطر واحد — تُخفى الصور والرموز الثانوية،
   ويُقصّ النص الطويل، فيظهر في الشاشة الواحدة ضعف ما كان يظهر. والاختيار على جهاز صاحبه. */
body.s44-compact table td,
body.s44-compact table th { padding-top: .18rem !important; padding-bottom: .18rem !important; }
body.s44-compact table td { white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
body.s44-compact .c-img, body.s44-compact td.c-img, body.s44-compact th.c-img { display: none !important; }
body.s44-compact .lab-img, body.s44-compact .lab-noimg, body.s44-compact .pb-pimg { display: none !important; }
body.s44-compact .lk-rate { display: none !important; }
body.s44-compact .lk-nm-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.s44-compact .lab-det-short, body.s44-compact .lab-det-en { display: none !important; }
body.s44-compact .pb-pmeta { display: none !important; }
body.s44-compact .lk-bs span.d, body.s44-compact .lk-riv span.p:nth-child(n+5) { display: none !important; } /* أرخص ثلاثة بائعين تحت بعض (طلب المالك 2026-10-06) */
body.s44-compact .lk-maps, body.s44-compact .lk-age span.old ~ span { font-size: .62rem; }

/* صندوق كتابة الأسماء المختصرة بالذكاء الاصطناعي (طلب المالك 2026-10-04: لم يكن له زر) */

/* الجدول المختصر — أربعة اختصارات في سطر الاسم نفسه (طلب المالك 2026-10-05):
   رابط البيع، ورابط الشراء، وزرّ نسخ الرمز بأيقونته وحدها بلا نصّه، واسم الحساب.
   وما سواها يبقى مخفيّاً: التقييم وحالة النشاط والمخزون ونسخ المنتج في المنصات الأخرى.
   والصفّ يبقى سطراً واحداً، فالأيقونات مصغّرة والاسم وحده هو الذي يُقصّ عند الضيق. */
body.s44-compact .lk-nm { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: .22rem; min-width: 0; }
body.s44-compact .lk-nm-t { flex: 0 1 auto; min-width: 0; }
body.s44-compact .lk-nm-r,
body.s44-compact .lk-nm-n { display: inline-flex !important; align-items: center; gap: .18rem; flex: 0 0 auto; margin: 0 !important; }
/* من صفّ الحالة لا يبقى إلا اسم الحساب */
body.s44-compact .lk-nm-n > * { display: none !important; }
body.s44-compact .lk-nm-n > .lk-acc { display: inline-flex !important; }
/* زرّ النسخ: الأيقونة وحدها، فالرمز يُنسخ بالضغط ولا حاجة لرؤيته */
body.s44-compact .lk-nm-r .lab-copy > span { display: none !important; }
body.s44-compact .lk-nm-r .lab-copy { padding: 0 .18rem !important; min-width: 0 !important; line-height: 1.1; }
body.s44-compact .lk-nm-r .lab-copy i { font-size: .72rem; }
body.s44-compact .lk-nm-r .lk-lnk { padding: 0 .22rem !important; font-size: .64rem; line-height: 1.25; }
body.s44-compact .lk-acc { font-size: .62rem; padding: 0 .2rem !important; }

/* ===== تعميم «الجدول المختصر» على بقية النوافذ (طلب المالك 2026-10-05) =====
   القاعدة العامة أعلاه تضيّق الحاشية في كل الجداول. وما يبقى هو ما يرفع الصفّ سطراً ثانياً:
   عمود الصورة، وسطر المعرّفات تحت الاسم، والاسم الإنجليزي بعد العربي.
   ولا تُحذف معلومة: المعرّفات تنتقل إلى سطر الاسم نفسه، والاسم الإنجليزي في تلميح الاسم. */

/* عمود الصورة في جداول المنتجات والطلبات: يُخفى كله ترويسةً وخلايا */
body.s44-compact table td[data-column="Image"],
body.s44-compact table th[data-column="Image"] { display: none !important; }
/* صور مصغّرة متناثرة في صفوف جداول أخرى */
body.s44-compact table td img.img-thumbnail { display: none !important; }

/* خلية المنتج المشتركة (التفاصيل واللوحة ومقارنة المبيعات والشحنات): سطر واحد.
   المعرّفات تجاور الاسم بدل أن تكون سطراً ثانياً، فلا تُفقد معلومة.
   والتدفّق سطريّ لا مرن: الاسم أولاً فلا يُدفع خارج العمود، والمعرّفات بعده تُقصّ عند الضيق.
   وعمود المنتج في الوضع الكامل عرضه صفر يتمدّد بسطر المعرّفات، فيُعاد له عرض تلقائي هنا. */
body.s44-compact td.details-table-product-col {
    width: auto !important;
    max-width: 24rem !important;
    white-space: nowrap !important;
}
body.s44-compact .details-product-cell--with-meta {
    padding-top: 0 !important;
    display: block !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.s44-compact .details-product-cell--with-meta .details-product-name-line {
    position: static !important;
    display: inline !important;
    overflow: visible !important;
}
body.s44-compact .details-product-cell--with-meta .details-product-name {
    display: inline !important;
    width: auto !important;
    overflow: visible !important;
}
body.s44-compact .details-product-cell--with-meta .details-product-meta-line {
    display: inline !important;
    width: auto !important;
    max-width: none;
    margin-inline-start: .35rem;
    font-size: .68rem;
}
/* الاسم الإنجليزي بعد العربي يطيل السطر، وهو كاملاً في تلميح الاسم */
body.s44-compact .details-product-name-en { display: none !important; }

/* ===== الأربعة اختصارات في كل نافذة لا في «نظرات» وحدها (طلب المالك 2026-10-05) =====
   الخلية المشتركة ودفتر الأرباح والبطاقات تعرض الأربعة بأصناف «نظرات» نفسها، لكن ملفّ تنسيق
   «نظرات» لا يُحمّل في تلك النوافذ — فهذه نسخة مصغّرة من قواعده مقصورة على مجموعة الاختصارات،
   فلا تمسّ صفحة «نظرات» ولا المختبر. والمجموعة كتلة سطرية لا تُقصّ، والاسم وحده هو الذي يُقصّ. */
.s44-sc { display: inline-flex; align-items: center; gap: .18rem; vertical-align: middle; flex: 0 0 auto; }
.s44-sc .lab-copy { display: inline-flex; align-items: center; margin: 0; border: 1px dashed #b9dccd; background: #f6fbf8; color: #0b5140; border-radius: 6px; padding: 0 .2rem; line-height: 1.25; cursor: copy; }
.s44-sc .lab-copy:hover { background: #e1f3ea; border-style: solid; }
.s44-sc .lab-copy.ok { background: #12785a; border-color: #12785a; color: #fff; }
/* زرّ النسخ بأيقونته وحدها (المربّعان) بلا إظهار الرمز، والضغط ينسخه */
.s44-sc .lab-copy > span { display: none !important; }
.s44-sc .s44-ci { display: inline-flex; }
.s44-sc .s44-ci svg { width: .72rem; height: .72rem; fill: currentColor; }
.s44-sc .lk-lnk { font-size: .64rem; text-decoration: none; border: 1px solid #cfe0d8; border-radius: 5px; padding: 0 .22rem; line-height: 1.3; white-space: nowrap; }
.s44-sc .lk-lnk.sale { color: #0f6b50; border-color: #b7dbcb; }
.s44-sc .lk-lnk.buy { color: #a3722f; border-color: #e8cf9a; }
.s44-sc .lk-acc { font-size: .62rem; font-weight: 700; color: #3f5668; background: #eef3f8; border: 1px solid #dbe5ee; border-radius: 6px; padding: 0 .22rem; line-height: 1.4; white-space: nowrap; }

/* الخلية المشتركة: الاسم والمعرّفات والاختصارات في صفّ مرن واحد، فالاختصارات لا تُقصّ أبداً
   والاسم وحده يُقصّ عند الضيق — وبهذا لا يزيد ارتفاع الصفّ عمّا كان قبل إضافتها. */
body.s44-compact .details-product-cell--with-meta,
body.s44-compact .details-product-cell--name-only {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    overflow: hidden;
}
body.s44-compact .details-product-cell--with-meta .details-product-name-line,
body.s44-compact .details-product-cell--name-only .details-product-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* الاسم أولى بالمساحة من سطر المعرّفات: المعرّفات تنكمش أولاً (وهي كاملة في تلميحها،
   ورمزها في زرّ النسخ)، فلا يُقصّ الاسم المختصر إلا بعد أن تنكمش هي إلى حدّها الأدنى.
   وبهذا صار الاسم أوسع ممّا كان قبل إضافة الاختصارات، وعرض العمود لم يتغيّر. */
body.s44-compact .details-product-cell--with-meta .details-product-meta-line {
    flex: 0 1 auto;
    flex-shrink: 50;
    min-width: 3.5rem;
    margin-inline-start: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* دفتر الأرباح: خانة المنتج صفّ مرن أصلاً، فالاختصارات تجاور الاسم بلا سطر ثانٍ.
   وخانة المنتج تتوسّع قليلاً لأن الاختصارات تأخذ نحو تسعين بكسل، فلولا التوسعة لقُصّ الاسم
   المختصر نفسه — والجدول عريض أصلاً وله شريط تمريره الداخلي، وارتفاع الصفّ لا يتغيّر. */
body.s44-compact .pb-pwrap { gap: .25rem; }
body.s44-compact .pb-pwrap .s44-sc { margin-inline-start: .1rem; }
body.s44-compact .pb-table td.pb-prod { width: 23rem; max-width: 23rem !important; }

/* نافذة «البطاقات»: سطر الاسم صفّ مرن، وسطر المعرّفات يُخفى لأن رمزه في زرّ النسخ */
.cp-nameline { display: flex; align-items: center; gap: .25rem; min-width: 0; }
/* ولا قطعَ بنقطٍ هنا أصلاً (قاعدة المالك الثابتة): حُذف `text-overflow: ellipsis` و`white-space: nowrap`
   من هذا السطر لأن كتلةَ منع القطع في آخر الملفّ كانت تلغيهما بـ`important` فبقيا معطَّلين بلا عمل. */
.cp-nameline > a { overflow: hidden; min-width: 0; }
body.s44-compact .cp-pmeta { display: none !important; }

/* صفحة «الوصول»: لسانُ المحتوى المسجّل.
   كانت الصورةُ تُخفى هنا في الوضع المختصر ليبقى الصفُّ سطراً واحداً والكميةُ هي المقصودة.
   وأمرُ المالك في ١١ أكتوبر ٢٠٢٦ نقضَ ذلك بنصّه: «محتوى الشحنة هذا أبي يكون المنتجاتُ فيه مع
   صورةٍ لها» — فالسائقُ يطابق العلبةَ بالصورةِ لا بالاسم. فحُذف إخفاؤها، وبقيَ باقي التضييق. */
body.s44-compact .ar-item { padding-top: .2rem !important; padding-bottom: .2rem !important; }
body.s44-compact .ar-iname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
    /* وعلى الجوالِ يبقى الاسمُ سطرين لا سطراً مقطوعاً، فالسائقُ على جوالِه */
    body.s44-compact .ar-iname { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* القوائم المجمّعة (04/10/2026): زر ▦ يبدّل بين سطري الروابط وقوائم منسدلة في سطر واحد — على الشاشات العريضة فقط */
.custom-navbar ul.nvg-bar { display: none !important; }
.fs-switch .fs-nv.on { background: #16324f; color: #fff; }
@media (min-width: 992px) {
    html.nav-g .nav-row-main ul.navbar-nav.flex-grow-1:not(.nvg-bar), html.nav-g .nav-row-new { display: none !important; }
    html.nav-g .custom-navbar ul.nvg-bar { display: flex !important; align-items: center; }
    .nvg-item { position: relative; }
    .nvg-head .nvg-arrow { font-size: .7em; margin-inline-start: 4px; opacity: .8; }
    .nvg-menu { display: none; position: absolute; top: 100%; right: 0; z-index: 2100; min-width: 230px; padding: 6px; background: #fff; border: 1px solid #d8dee6; border-radius: 10px; box-shadow: 0 10px 28px rgba(15,35,60,.22); }
    .nvg-item:hover .nvg-menu, .nvg-item.open .nvg-menu { display: block; }
    .nvg-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; color: #16324f; text-decoration: none; white-space: nowrap; font-size: .92rem; }
    .nvg-link:hover { background: #eef3f9; color: #0b2540; }
    .nvg-link.active { background: #16324f; color: #fff; }
    .nvg-link.nvg-test::after { content: "تجربة"; margin-inline-start: auto; font-size: .7rem; padding: 1px 6px; border-radius: 999px; background: #fff4d6; color: #8a5a00; }
    .nvg-link.active.nvg-test::after { background: rgba(255,255,255,.2); color: #fff; }
}

/* ======================================================================
   قاعدة المالك ٨ أكتوبر ٢٠٢٦: لا قطعَ للنصّ بنقطٍ ثلاث في أي جدول.
   ونصُّه: «أنا أودّ الخلايا تكون فيها احتواءٌ تلقائي لما هو مكتوبٌ فيها،
   ما يُترك على سبيل أنك أنت تفهمها، ولا تحطّ الماوس ويطلع الكتابة البعدية».
   فالخليةُ تلفّ سطرها ويعلو الصفُّ بقدر ما فيه. ووضعُ «الجدول المضغوط»
   يبقى يضغط المسافات العمودية — وهو غرضُه — ولا يقطع نصّاً.
   وهي قاعدةٌ عامة لكلِّ جدولٍ يُبنى بعد اليوم، لا لصفحةٍ بعينها.
   ====================================================================== */
body.s44-compact table td,
body.s44-compact .lk-nm-t,
body.s44-compact .ar-iname,
body.s44-compact .details-product-cell--with-meta,
body.s44-compact .details-product-cell--with-meta .details-product-name-line,
.details-product-cell--with-meta .details-product-meta-line,
.details-product-cell--with-meta .details-product-name,
.details-product-cell--name-only .details-product-name,
.cp-nameline > a,
.pb-pname,
.pb-table td.pb-prod {
    white-space: normal !important;
    text-overflow: clip !important;
}

/* وكسرُ الكلمة في وسطها لا يُعمَّم على كل خلية (علّةٌ قيستُ 2026-10-08): إذ يجعل أدنى عرضٍ
   للعمود حرفاً واحداً، فتنكمش أعمدةُ «تنبيه» و«بيع وشراء» ويعلو الصفُّ إلى ثمانيةٍ وثمانين
   بكسلاً. فهو لخانات الاسم وحدها، حيث يُخشى اسمٌ طويلٌ بلا مسافات. */
body.s44-compact .lk-nm-t,
body.s44-compact .ar-iname,
.details-product-cell--with-meta .details-product-name,
.details-product-cell--name-only .details-product-name,
.pb-pname { overflow-wrap: anywhere; word-break: break-word; }

/* واسمُ المنتج في «البطاقات» عنصرٌ مرنٌ في صفّ، فـ«anywhere» يجعل أدنى عرضه حرفاً واحداً
   فينكمش إلى خمسةَ عشرَ بكسلاً وينزل الاسمُ حرفاً فوق حرف (علّةٌ رآها المالك وقِيست 2026-10-08).
   فيُلفّ بـ«break-word» وحدها — وهي لا تمسّ أدنى العرض — ويأخذ ما بقي من الصفّ. */
.cp-nameline > a { overflow-wrap: break-word; word-break: normal; flex: 1 1 auto; }

/* ======================================================================
   وعلّةٌ صُلحت في اليوم نفسه (شكوى المالك: «الجدول ليش صار كذا عريض؟
   الصفوف ارتفاعها عالٍ. رجّعها زي أول»): الكتلةُ أعلاه كانت تضع كذلك
   `overflow: visible` على كلِّ خلية، فسقط حدُّ العرض الذي كان يحجزها،
   فلفَّ الاسمُ الطويل في ثلاثة أسطر وعلا الصفُّ من واحدٍ وثلاثين بكسلاً
   إلى خمسةٍ وستين. **والحلُّ ليس إعادة القطع** — فهي قاعدةٌ ثابتة — بل:
     ① يُعاد القصُّ البصريُّ للخلية (overflow) وتُلفُّ الكلمةُ داخلها، فلا يتمدّد العمود.
     ② ويُوسَّع عمودُ الاسم ليكفي **الاسمَ المختصر** (أطولُه المقيس ثمانية وخمسون حرفاً)
        فلا يلفّ أصلاً ولا يُقطع، ويعود الصفُّ سطراً واحداً.
   ====================================================================== */

/* صفحة المنتجات «نظرات»: خانة الاسم صفٌّ واحد فيه الصورةُ المصغّرة والاسمُ المختصر والأيقونات الأربع.
   وعرضُ العمود مقيسٌ لا مُقدَّر: ثمانيةٌ وعشرون ريمَ تكفي أطولَ اسمٍ مختصرٍ مع الصورة والأيقونات. */
body.s44-compact .lk-table.lk-dense .c-name,
body.s44-compact .lk-table.lk-dense th.c-name { width: 28rem; min-width: 28rem; max-width: 28rem; overflow: hidden; }
body.s44-compact .lk-nm-t { font-size: .76rem; line-height: 1.5; }
/* خانة «بيع وشراء»: سطراها يتجاوران في المختصر فلا يرفعان الصفّ (كما فُعل بالبائعين وعمر المخزون).
   وأرقامُها قليلةٌ قصيرة فلا يخفى منها شيء، فيُسمح لها بسطرٍ واحدٍ بلا لفّ — ولا قطعَ بنقط. */
body.s44-compact .lk-bs span.r { display: inline-block; margin-inline-start: .25rem; }
body.s44-compact td.lk-bs,
body.s44-compact td.lk-note { white-space: nowrap !important; }
body.s44-compact td.lk-note .lk-decide { white-space: nowrap; }

/* دفتر الأرباح: خانةُ المنتج تتوسّع لتكفي الاسمَ المختصر في سطر واحد.
   وقياسُ الصفّ قبل التوسعة ثلاثون بكسلاً وبعدَها اثنان وعشرون — وهو ما كان قبل العلّة.
   ولم يُمسّ ملفُّ s44-profitbook.css، فجلسةٌ أخرى تعمل على تلك الصفحة. */
body.s44-compact .pb-tablewrap > .pb-table { width: auto; min-width: 100%; }
body.s44-compact .pb-table td.pb-prod,
body.s44-compact .pb-table th.pb-sticky { width: 27rem; max-width: 27rem !important; min-width: 27rem; overflow: hidden; }
body.s44-compact .pb-pwrap .pb-pname { line-height: 1.35; }

/* أيقونتا «الصور» و«الجدول المختصر» في شريط الأزرار (طلب المالك 2026-10-08) */
.fs-switch .fs-img, .fs-switch .fs-cmp { font-size: 12px; }

/* صورةٌ مصغّرة قبل الاسم المختصر في بقية النوافذ (تعميم طلب المالك 2026-10-08)،
   بنفس مقاس دفتر الأرباح المقيس فلا ترفع الصفّ. */
.s44-nimg { width: 16px; height: 16px; object-fit: contain; background: #fff; border: 1px solid #e3ece8; border-radius: 4px; vertical-align: -3px; margin-inline-end: .2rem; flex: none; }

/* اسم الحساب يأخذ لونَ حالة المنتج في كل النوافذ لا في صفحة المنتجات وحدها
   (قرار المالك 2026-10-08) — ولذلك موضعُها هنا لا في ملفّ «نظرات». */
.lk-acc-st { background: var(--sb, #eef3f8) !important; color: var(--sf, #3f5668) !important; border-color: var(--sr, #dbe5ee) !important; font-weight: 800; }

/* ===== شاراتُ التركيزِ والعددِ والشكل، وروابطُ الشراءِ والبيعِ في اللسان =====
   طلبُ المالك ١١ أكتوبر ٢٠٢٦. موضعُها هنا لا في ملفِّ صفحةٍ واحدةٍ لأنها تُعرض في
   صفحة الوصول وفي تفاصيل الشحنة معاً، فيبقى شكلُها واحداً فيهما.
   والعددُ أبرزُها لوناً لأنه جوهرُ الفائدة (ستّون حبّةً بدلَ مئةٍ وعشرين). */
.nf-row { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.nf { display: inline-block; font-size: .72rem; font-weight: 900; line-height: 1.5;
      padding: .02rem .4rem; border-radius: 7px; border: 1px solid transparent; white-space: nowrap; }
.nf-cnt { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.nf-str { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.nf-frm { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* روابطُ المورّدِ والمنصّةِ في لسان الوصول: مكتوبةٌ بالإنجليزيةِ بنصِّ المالك، وتفتح
   نافذةً جديدةً دائماً مع حمايةِ `noopener`. وما لا رابطَ له لا يُعرض له زرٌّ فارغ. */
.ar-ilinks { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.ar-ilink { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 800;
            padding: .05rem .45rem; border-radius: 8px; text-decoration: none; border: 1px solid; }
.ar-ilink.buy { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.ar-ilink.sell { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.ar-ilink:hover { filter: brightness(.96); text-decoration: none; }
.ar-ilink i { font-size: .72rem; }

/* شرح منبثق عام لأي عنصر عليه data-help (طلب عادل ١٣ أكتوبر ٢٠٢٦) — wwwroot/js/s44-help.js */
.s44-help-pop { position: fixed; z-index: 3000; max-width: 320px; background: #1f2937; color: #fff; font-size: .82rem; line-height: 1.6;
    padding: .45rem .7rem; border-radius: 8px !important; box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none;
    opacity: 0; transform: translateY(-2px); transition: opacity .12s, transform .12s; direction: rtl; text-align: right; white-space: normal; }
.s44-help-pop.show { opacity: 1; transform: none; }
[data-help] { cursor: help; }
a[data-help], button[data-help], label[data-help], input[data-help], select[data-help] { cursor: pointer; }

/* أُلغي الجدول الكامل (قرار المالك 2026-10-13): الجدول مختصر دائماً، فلا زرّ للتبديل */
.fs-switch .fs-cmp, .fs-switch .fs-cmp + .fs-sep { display: none !important; }

/* ===== رموزُ أمازون في رسائل البريد وروابطُ بيعها (قاعدة دائمة من المالك ١٥ أكتوبر ٢٠٢٦) — Views/Shared/_MailAsins.cshtml =====
   في صفحة الحساب وصفحة البريد معاً. الرمزُ يُنسخ بضغطة (يُضاء أخضرَ ويقول «تم ✓»)، و«بيع» رابطٌ صغير، والوسمُ رماديٌّ هادئ. */
.ma-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ma-a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ma-a .ma-cp { margin: 0; padding: 0 5px; height: 18px; border: 1px dashed #b9dccd; border-radius: 4px; background: #f6fbf8; color: #0b5140; font-size: 11px; line-height: 1; font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; direction: ltr; cursor: copy; }
.ma-a .ma-cp:hover { background: #e1f3ea; border-style: solid; }
.ma-a .ma-cp.ok { background: #12785a; border-color: #12785a; color: #fff; font-family: inherit; direction: rtl; }
.ma-a .ma-sale { font-size: 11px; color: #0f6b50; text-decoration: none; border: 1px solid #b7dbcb; border-radius: 4px; padding: 0 5px; line-height: 16px; }
.ma-a .ma-sale:hover { background: #eef7f2; }
.ma-a .ma-flag { font-style: normal; font-size: 10px; line-height: 15px; padding: 0 5px; border-radius: 3px; border: 1px solid #E5E7EB; background: #F3F4F6; color: #6B7280; }
.ma-a .ma-flag.ma-notours { border-color: #EBCFD2; background: #FDF6F6; color: #A4434B; }
.ma-many { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #5E7D95; white-space: nowrap; }
.ma-all { gap: 6px 14px; }

/* صفّ منتجٍ في الحاضنة (٢١ أكتوبر ٢٠٢٦): لافندر فاتح جداً وشريطٌ رفيع بنفسجيّ الصندوق #7C3AED على حافة الصفّ، بلا نصّ، في كل قوائم المنتجات */
tr.lab-inc > td { background: #F4EFFC !important; }
tr.lab-inc > td:first-child { box-shadow: inset -3px 0 0 #7C3AED; }
tr.lab-inc:hover > td { background: #EDE5FA !important; }