*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;
  background:#f6f7fb;color:#1f2937
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{background:#111827;color:#fff}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.topbar a{color:#fff;text-decoration:none;margin:0 8px}
.topbar .btn{background:#2563eb;padding:8px 12px;border-radius:8px}
.footer{background:#111827;color:#9ca3af;padding:16px;margin-top:40px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn-primary{background:#2563eb;color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;display:inline-block}
.btn-danger{background:#dc2626;color:#fff;padding:8px 10px;border-radius:8px;text-decoration:none}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px}
input,select,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;margin:6px 0 12px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:right;vertical-align:middle}
thead th{background:#f3f4f6}
.actions a{margin-left:6px}
.small{font-size:12px;color:#6b7280}
.whatsapp{background:#22c55e;color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none}
.tag{display:inline-block;background:#e5e7eb;border-radius:8px;padding:2px 8px;margin-left:6px}
.label{font-size:12px;color:#6b7280;margin-bottom:4px}
nav a.btn{margin-right:8px}

/* Landing Slider */
.landing .slider{
  position:relative;background:#0f172a;color:#fff;border-radius:16px;padding:32px;overflow:hidden
}
.landing .slide{
  opacity:0;transform:translateY(10px);transition:.4s ease;
  position:absolute;inset:0;padding:32px;display:flex;flex-direction:column;justify-content:center
}
.landing .slide.active{opacity:1;transform:none}
.landing .slide h1{margin:0 0 8px;font-size:28px}
.landing .slide p{color:#cbd5e1}
.landing .dots{position:absolute;left:16px;bottom:16px;display:flex;gap:6px}
.landing .dot{width:10px;height:10px;border-radius:50%;border:none;background:#475569;cursor:pointer}
.landing .dot.active{background:#fff}

/* ========== تثبيت عمود الصورة ومنع الـCLS ========== */
.col-img{width:72px} /* 60px للصورة + هامش بسيط */

.thumb-wrap{
  width:60px;height:60px;border-radius:8px;overflow:hidden;
  background:#f3f4f6;border:1px solid #e5e7eb
}

.product-thumb{
  display:block;           /* يمنع فجوة baseline */
  width:100%;height:100%;
  object-fit:cover;        /* قص داخل الإطار */
  image-rendering:auto;
}

/* تثبيت عرض أعمدة الجدول المهمة */
.data-table{table-layout:fixed}
.data-table th:nth-child(1),
.data-table td:nth-child(1){width:80px}    /* عمود الصورة */
.data-table th:nth-child(3),
.data-table td:nth-child(3){width:120px}   /* عمود السعر (مثال) */
/* ثبّت عمود الصورة ومنع الشفت */
.col-img { width: 72px; } /* 60px للصورة + حواف بسيطة */
.thumb-wrap{
  width: 60px; height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}
.product-thumb{
  display: block;         /* يمنع فجوة line-height */
  width: 100%; height: 100%;
  object-fit: cover;      /* قص داخل الإطار */
  image-rendering: auto;
}

/* ثبّت الجدول: يمنع إعادة توزيع الأعمدة مع تحميل الصور */
.data-table{ table-layout: fixed; width:100%; }
.data-table th:nth-child(1),
.data-table td:nth-child(1){ width: 80px; }   /* عمود الصورة */
.data-table th:nth-child(3),
.data-table td:nth-child(3){ width: 120px; }  /* مثال: السعر */
/* ثبّت تخطيط الجدول ومنح أعمدة مضمونة */
.data-table{ table-layout: fixed; }

/* عمود الصورة (لو مش موجود عندك سيبه) */
.data-table th.col-img,
.data-table td.col-img{
  width: 84px;            /* 60 صورة + هوامش */
}

/* عمود السعر مثال */
.data-table th.col-price,
.data-table td.col-price{
  width: 120px;
}

/* عمود الإجراءات: وسّعه وخليه ما يقصّش الأزرار */
.data-table th.col-actions,
.data-table td.col-actions{
  width: 180px;           /* عدّلها 160–200 حسب عدد الأزرار */
  min-width: 160px;
  white-space: normal;    /* السماح باللف لو المساحة ضاقت */
  overflow: visible;      /* ما يقصّش آخر زر */
  padding-left: 12px;     /* مساحة تنفّس قرب حدّ الجدول */
}

/* أزرار صغيرة مضغوطة (أيقونة فقط) */
.btn-icon{
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}

/* صف أزرار الإجراءات */
.action-buttons{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;        /* لو ضاقت تِنزل سطر تاني بدل ما تتقصّ */
}

/* على الشاشات الأضيق قلّل العرض شوية واسمح باللف */
@media (max-width: 1200px){
  .data-table th.col-actions,
  .data-table td.col-actions{ width: 150px; min-width: 140px; }
}
@media (max-width: 992px){
  .data-table th.col-actions,
  .data-table td.col-actions{ width: 130px; min-width: 120px; }
}