/* =========================================================
   MOBTECH — Catalog Styles (Layout + Grid + Cards)
   ========================================================= */

/* =========================================================
   1) TOKENS / BASE
   ========================================================= */
:root{
  --pad:12px;
  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --gray:#f5f6f8;
  --text:#101828;
  --line:#ebecef;

  /* Grid defaults */
  --cols:8;
  --card-min:240px;
  --gap:12px;

  /* Sidebar spacing */
  --sidebar-top: 26px;
  --sidebar-lift: 16px;
  --sidebar-stick-top: calc(var(--sidebar-top) + var(--sidebar-lift));

  /* Toolbar spacing */
  --toolbar-top: 30px;
  --toolbar-lift: 20px;
  --toolbar-stick-top: calc(var(--toolbar-top) + var(--toolbar-lift));

  /* ارتفاع موحّد لعناصر التولبار */
  --ctb-h: 30px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial;
  background:#fff;
}
a{ color:#0b63ff; text-decoration:none; }
img{ display:block; }

[hidden]{ display:none !important; }

/* =========================================================
   2) HEADER
   ========================================================= */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:8px 16px;
  display:flex;
  gap:12px;
  align-items:center;
}
.header__title{ font-weight:700; }
.header__search{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.header__search input{
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:10px;
  min-width:280px;
}
.header__search button{
  padding:8px 12px;
  border:1px solid #ddd;
  background:#fafafa;
  border-radius:10px;
  cursor:pointer;
}

/* =========================================================
   3) LAYOUT (SIDEBAR + CONTENT)
   ========================================================= */
.layout,
.layout.grid{
  padding:0 16px 12px;
  display:grid;
  grid-template-columns:240px 1fr;
  gap:14px;
  align-items:start;
}

/* Sidebar: sticky + independent scroll + lift */
.layout > .sidebar,
.layout.grid > .sidebar{
  position: sticky;
  top: var(--sidebar-stick-top);
  margin-top: calc(var(--sidebar-lift) * -1);
  max-height: calc(100vh - var(--sidebar-stick-top) - 12px + var(--sidebar-lift));
  overflow:auto;
  display:grid;
  gap:10px;
  align-content:start;
  z-index:20;
}

/* Sidebar cards */
.sidebar .card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card__title{
  font-weight:700;
  padding:10px var(--pad);
  border-bottom:1px solid var(--line);
}
.card__body{
  padding:8px var(--pad);
  /* مهم لمرونة الكارت: كـ flex عمودي */
  display:flex;
  flex-direction:column;
  gap:8px;
}
.list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

/* =========================================================
   4) CATALOG TOOLBAR (STICKY)
   ========================================================= */
.catalog-toolbar{
  position: sticky;
  top: var(--toolbar-stick-top);
  z-index: 90;
  background: #fff;
  margin-top: calc(var(--toolbar-lift) * -1);
  padding: calc(8px + var(--toolbar-lift)) 0 10px;
}

/* صف التولبار */
.ctb-form{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
}

/* الجروب الموحد */
.ctb-group{
  height: var(--ctb-h);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:9999px;
  box-sizing:border-box;
}

/* البحث */
.ctb-group.ctb-search{
  flex:1 1 380px;
  min-width:320px;
}
.ctb-search svg{ opacity:.7; }
.ctb-search input{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
  height:100%;
  font-size:14px;
}

/* العدّاد */
.ctb-group.ctb-count{ padding:0 14px; }
.ctb-count-num{
  min-width:60px;
  font-weight:700;
  color:#0f172a;
  border:0;
  padding:0;
  background:transparent;
  line-height:1;
}

.ctb-label{
  font-size:13px;
  color:#475467;
}

/* select */
.ctb-select{
  height:100%;
  border:0;
  background:transparent;
  padding:0 34px 0 8px;
  font-size:14px;
  line-height:normal;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.ctb-select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* =========================================================
   5) GRID SYSTEM
   ========================================================= */
.grid{
  --cols:8;
  --card-min:240px;
  --gap:12px;
}

/* عدد الأعمدة يدّيه الـ backend في inline style عبر --cols */
.grid.cols-mode{
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  gap:var(--gap);
}

/* وضع auto-fit (لو حبيت تستخدمه لاحقاً) */
.grid.fit-mode{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap:var(--gap);
}

/* Masonry mode (غير مستخدم حاليًا لكن محتفظين به كمود بديل) */
.grid.masonry-mode{
  column-count:var(--cols);
  column-gap:var(--gap);
}
.grid.masonry-mode .card{
  display:inline-block;
  width:100%;
  margin:0 0 var(--gap);
  break-inside:avoid;
}

/* كل كارت يملأ ارتفاع العمود بالكامل */
.card-wrapper{
  height:100%;
}

/* =========================================================
   6) CARD BASE
   ========================================================= */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .12s, box-shadow .12s;
}

.cols-mode .card,
.fit-mode .card{
  height:100%;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.card__link{
  display:flex;
  flex-direction:column;
  color:inherit;
  height:100%;
}

/* media area */
.card__media{
  position:relative;
  background:var(--gray);
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card__media img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* badges */
.badge{
  position:absolute;
  left:10px;
  top:10px;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
}
.badge--amazon{ background:#ff9900; color:#111; }
.badge--noon{   background:#ffe500; color:#111; }

/* body (للكروت العادية/amazon/noon) */
.card__body{
  padding:10px var(--pad);
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* title (عام لكل الكروت) */
.title{
  font-size:12px;
  line-height:1.3;
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.3em * 3);
}

/* عنوان كروت Noon – سطر زيادة عشان مايبقاش مقصوص أوي */
.card--noon .title{
  -webkit-line-clamp:4;
  min-height:calc(1.3em * 4);
}

/* عنوان التصنيف الجديد في الكروت – متعدد الأسطر */
.cls-title{
  font-weight:700;
  font-size:12px;
  line-height:1.35;
  color:#111827;
  margin:2px 0 4px;

  display:-webkit-box;        /* زي العنوان القديم */
  -webkit-line-clamp:3;       /* حد أقصى ٣ سطور */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* كروت Noon نخليها سطر زيادة */
.card--noon .cls-title{
  -webkit-line-clamp:4;
}

/* meta */
.meta{
  display:flex;
  flex-wrap:wrap;           /* يخلي السطر يلف لو طويل */
  gap:4px 8px;
  font-size:12px;
  color:#475467;
  align-items:flex-start;
  min-height:18px;
}

.meta__key{
  opacity:.75;
  flex:0 0 auto;            /* اللابل ثابت */
}

.meta__val{
  font-weight:600;
  color:#344054;
  flex:1 1 100%;            /* القيمة تكمل على سطر جديد */
  word-break:break-all;     /* مهم مع SKU الطويل */
}

/* =========================================================
   7) AMAZON CARD EXTRAS (BRAND / COLOR / PRICE / QTY)
   ========================================================= */
/* صف صفات مختصرة (براند/لون) */
.attrs{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  min-height:0;
}
.attr-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid #e5e7eb;
  border-radius:9999px;
  font-size:12px;
  color:#334155;
  background:#fff;
}
.attr-chip .chip-ico{
  display:inline-block;
  opacity:.75;
}
.attr-chip .swatch{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid #e5e7eb;
  background:#ddd;
}

/* صف مفاتيح/قيم صغير للسعر والكمية */
.kv-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
  flex-wrap:wrap;        /* مهم مع الأعمدة الضيقة */
}
.kv{
  display:flex;
  align-items:center;
  gap:6px;
}
.kv-key{
  font-size:12px;
  color:#64748b;
}
.kv-val{
  font-weight:700;
  font-size:12.5px;
  color:#0f172a;
}
.kv-val.is-ok{   color:#137333; }
.kv-val.is-warn{ color:#7a4b00; }
.kv-val.is-bad{  color:#b91c1c; }

/* أزرار الأكشن — أيقونات فقط */
.actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.actions--compact{ margin-top:4px; }

/* خلي أزرار الأكشن دايمًا في أسفل الكارت */
.card__body .actions{
  margin-top:auto;
}

.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  transition:all .15s ease-in-out;
}
.action-btn:hover{
  background:#0b63ff;
  border-color:#0b63ff;
  color:#fff;
}

/* ضمان بقاء حجم الكارت صغير ومرتب */
.card.card--amazon .card__body{
  gap:8px;
}

/* =========================================================
   8) SALES BUTTON (خارج الكارت الأساسي أحيانًا)
   ========================================================= */
.sales-btn{
  display:inline-block;
  margin-top:4px;
  padding:6px 10px;
  font-size:12.5px;
  font-weight:600;
  border-radius:8px;
  background:#f1f5ff;
  color:#0b63ff;
  border:1px solid #d0e1ff;
  transition:all .15s ease-in-out;
}
.sales-btn:hover{
  background:#0b63ff;
  color:#fff;
  border-color:#0b63ff;
  text-decoration:none;
}

/* =========================================================
   9) CARD SELECTION BADGE
   ========================================================= */
/* شارة التحديد أعلى يمين الصورة */
.sel-badge{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #cbd5e1;
  background:#ffffffcc;
  display:none;              /* تظهر فقط في وضع التحديد */
  align-items:center;
  justify-content:center;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  backdrop-filter: blur(2px);
  z-index:5;
}
.sel-badge:hover{
  background:#0b63ff;
  color:#fff;
  border-color:#0b63ff;
}
.sel-badge.is-on{
  background:#0b63ff;
  color:#fff;
  border-color:#0b63ff;
}

/* إبراز الكارت المختار */
.card.sel-on{
  outline:2px solid #0b63ff;
  outline-offset:-2px;
  box-shadow:0 0 0 2px rgba(11,99,255,0.15) inset;
}

/* عندما يكون وضع الاختيار مفعّل، أظهر الشارة على كروت أمازون فقط */
.catalog-select-mode .card--amazon .sel-badge{
  display:flex;
}

/* =========================================================
   10) PAGINATION
   ========================================================= */
.pagination{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin:16px 0;
  flex-wrap:wrap;
}
.pagination .page,
.pagination .ellipsis{
  padding:8px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  min-width:40px;
  text-align:center;
}
.pagination .current{
  background:#0b63ff;
  color:#fff;
  border-color:#0b63ff;
}
.pagination .disabled{
  opacity:.4;
  pointer-events:none;
}

/* =========================================================
   11) BULK UPDATE WIDGET
   ========================================================= */
form[data-widget="bulk-update"] #bulk-log{
  border:1px solid #ddd;
  border-radius:8px;
  background:#f8fbf9;
  padding-top:10px;
  padding-bottom:10px;
  padding-inline:14px;
  margin-top:.5rem;
  box-sizing:border-box;
}
form[data-widget="bulk-update"] #bulk-log .bu-ready,
form[data-widget="bulk-update"] #bulk-log .bu-banner{
  display:block;
  width:max-content;
  margin:0 auto .6rem;
  text-align:center;
}
.bu-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:6px;
  font-weight:600;
  font-size:12px;
}
.bu-ok{
  background:#e8f6ee;
  border:1px solid #b7ebc6;
  color:#137333;
}
.bu-warn{
  background:#fff4e5;
  border:1px solid #ffd9a8;
  color:#7a4b00;
}
.bu-alert{
  padding:8px;
  border-radius:6px;
  text-align:center;
}
.bu-error{
  background:#fff2f2;
  border:1px solid #ffd6d6;
  color:#932323;
}
.bu-neutral{
  background:#fafafa;
  border:1px solid #eee;
  color:#333;
}
.bu-pending{
  background:#f3faf6;
  border:1px dashed #c7e0d2;
  color:#137333;
}

/* =========================================================
   12) SIDEBAR SWITCHES & FILTERS (SCOPED)
   ========================================================= */
#catalog-sidebar .sbar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px var(--pad);
  border-bottom:1px solid #e5e7eb;
}

/* =========================================================
   12) SIDEBAR SWITCHES & FILTERS (SCOPED)
   ========================================================= */
#catalog-sidebar .sbar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px var(--pad);
  border-bottom:1px solid #e5e7eb;
}

#catalog-sidebar .sbar-card .card__body{
  padding:8px var(--pad);
}

/* ------- SWITCH BASE (OFF) ------- */
#catalog-sidebar .sbar-switch{
  position:relative;
  width:44px;
  height:24px;
  border-radius:9999px;
  border:1px solid #cbd5e1;
  background:#e5e7eb;             /* OFF = رمادي */
  cursor:pointer;
  padding:0;
  outline:none;
  transition:background-color .15s ease, border-color .15s ease;
}

#catalog-sidebar .sbar-switch::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:transform .15s ease;
}

/* ------- ON STATE (بحسب aria-expanded) ------- */
#catalog-sidebar .sbar-switch[aria-expanded="true"]{
  background:#ef4444;             /* أحمر وهو مفتوح */
  border-color:#ef4444;
}

#catalog-sidebar .sbar-switch[aria-expanded="true"]::after{
  transform:translateX(20px);
}

/* Sidebar filters */
#catalog-sidebar .filters-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px 16px;
}

#catalog-sidebar .filter-fieldset{
  margin:0;
  padding:6px 8px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}

#catalog-sidebar .filter-fieldset .filter-title{
  font-weight:700;
  font-size:13px;
  color:#334155;
  margin-bottom:6px;
}

#catalog-sidebar .filter-fieldset .sbar-radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  margin:0 12px 6px 0;
  vertical-align:middle;
}

/* ------- SIDEBAR FILTERS ------- */
#catalog-sidebar .filters-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px 16px;
}

#catalog-sidebar .filter-fieldset{
  margin:0;
  padding:6px 8px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}

#catalog-sidebar .filter-fieldset .filter-title{
  font-weight:700;
  font-size:13px;
  color:#334155;
  margin-bottom:6px;
}

#catalog-sidebar .filter-fieldset .sbar-radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  margin:0 12px 6px 0;
  vertical-align:middle;
}

/* =========================================================
   13) RESPONSIVE
   ========================================================= */
@media (max-width: 768px){
  .layout,
  .layout.grid{
    grid-template-columns:1fr;
  }

  .layout > .sidebar,
  .layout.grid > .sidebar{
    position:static;
    max-height:none;
    overflow:visible;
    top:auto;
    margin-top:0;
    margin-bottom:12px;
  }

  .catalog-toolbar{
    top: var(--toolbar-stick-top);
  }
}