/* المخزون — واجهة واحدة تشتغل على الموبايل زي ما بتشتغل على الشاشة الكبيرة.
   الألوان كلها من متغيرات البراند اللي في index.html، عشان نفس الملف يخدم
   جدو وسمارت ريكو من غير نسختين بتفرقوا مع الوقت. */

.inventory-page {
  --inv-line: var(--gedo-border, #e2e8f0);
  --inv-brand: var(--gedo-blue, #2f6df6);
  --inv-muted: #64748b;
  --inv-soft: #f8fafc;
}

/* ===== كروت التصنيفات وشارات التسعير =====
   الكلاسات دي كانت utilities من Tailwind، وبناء ريكو مش فيه بعضها
   (bg-slate-900 / bg-amber-100 / text-violet-600 …) فكانت بتطلع بلا لون عنده.
   نقلناها هنا عشان الشكل يبقى واحد في البراندين ومربوط بمتغيرات البراند. */
.inv-cat { min-width: 128px; }

.inv-cat-all {
  background: var(--gedo-navy, #13233b);
  color: #fff;
}

.inv-cat-all-sub { color: rgba(255, 255, 255, .72); }

.inv-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.6;
}

.inv-badge-warn { background: #fef3c7; color: #92400e; }
.inv-badge-loss { background: #fee2e2; color: #991b1b; }
.inv-price-dealer { color: #7c3aed; }

.inv-thumb { object-fit: cover; }

.inv-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ===== رأس الصفحة وأزرار التشغيل ===== */
.inv-actions > * {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ===== شريط البحث والتصفية ===== */
.inv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.inv-search {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--inv-line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: .9rem;
  color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.inv-search:focus {
  outline: none;
  border-color: var(--inv-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-brand) 18%, transparent);
}

.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--inv-line);
  border-radius: 14px;
  background: #fff;
  color: #475569;
  font: inherit;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.inv-chip:hover { border-color: #cbd5e1; }
.inv-chip:active { transform: translateY(1px); }

.inv-chip[aria-pressed="true"] {
  background: var(--inv-brand);
  border-color: var(--inv-brand);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--inv-brand) 28%, transparent);
}

.inv-chip-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
}

.inv-chip[aria-pressed="true"] .inv-chip-count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ===== الجدول: ترتيب ورأس أوضح ===== */
.erp-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.erp-th-sort:hover { color: var(--inv-brand, #2f6df6); }
.erp-th-arrow { font-size: .7rem; color: #94a3b8; }
.erp-th-sort[data-active="true"] .erp-th-arrow { color: var(--inv-brand, #2f6df6); }

/* شريط الترتيب — بديل رأس الجدول لما الصفوف تبقى كروت على الموبايل */
.erp-sortbar { display: none; }

/* ===== الموبايل: كل صف يبقى كارت مقروء بدل تمرير أفقي ===== */
@media (max-width: 900px) {
  .inv-head { flex-direction: column; align-items: stretch; }

  /* عناصر flex بتوسّع الصفحة لو ما اتقاليش min-width — ده اللي بيعمل
     التمرير الأفقي المزعج على الموبايل. */
  .inventory-page, .inv-head, .inv-actions, .inv-cats, .inv-toolbar, .erp-table-cards {
    min-width: 0;
    max-width: 100%;
  }

  .inv-actions {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inv-actions::-webkit-scrollbar { display: none; }
  .inv-actions > * { flex: 0 0 auto; }

  .inv-cats { scroll-snap-type: x proximity; }
  .inv-cats > * { scroll-snap-align: start; }

  .inv-chip { flex: 1 1 auto; justify-content: center; }

  .erp-sortbar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .erp-sortbar select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--inv-line, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    font-size: .85rem;
    color: #334155;
  }
  .erp-sortbar button {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--inv-line, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-weight: 700;
    font-size: .8rem;
    color: #334155;
    white-space: nowrap;
  }
  .erp-sortbar button:disabled { opacity: .45; }

  .erp-table-cards .erp-table-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .erp-table-cards table { display: block; width: 100%; }
  .erp-table-cards thead { display: none; }
  .erp-table-cards tbody { display: grid; gap: 10px; }

  .erp-table-cards tbody tr {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--inv-line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  }

  .erp-table-cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    text-align: start;
    font-size: .85rem;
    font-weight: 600;
  }

  .erp-table-cards tbody td + td { border-top: 1px dashed #eef2f7; }

  .erp-table-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--inv-muted, #64748b);
    font-size: .72rem;
    font-weight: 800;
  }

  .erp-table-cards tbody td:not([data-label])::before { content: none; }

  /* أول خانة = عنوان الكارت (صورة + اسم المنتج) — من غير ليبل فوقه */
  .erp-table-cards tbody td:first-child {
    display: block;
    padding-top: 0;
    padding-bottom: 10px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.45;
  }
  .erp-table-cards tbody td:first-child::before { content: none; }

  /* خانة الإجراءات — أزرار أكبر يسهل لمسها */
  .erp-table-cards tbody td:not([data-label]):last-child {
    justify-content: flex-end;
    padding-top: 10px;
  }
  .erp-table-cards tbody td:not([data-label]):last-child button {
    min-width: 44px;
    min-height: 40px;
    font-size: 1.05rem;
  }
}

/* ===== الشاشة الكبيرة: تفرقة أوضح بين الصفوف ===== */
@media (min-width: 901px) {
  .erp-table-cards tbody tr:nth-child(even) { background: var(--inv-soft, #f8fafc); }
  .erp-table-cards tbody tr:hover { background: #eff6ff; }
}