/* ════════════════════════════════════════════════════════════════════════════
 * WAITING LESSONS — ADMIN CSS — مربع «مقاطع الانتظار» داخل صفحة تعديل المادة
 * ────────────────────────────────────────────────────────────────────────────
 * 🎨 يحاكي بدقة ستايل مربعات (a-card) القائمة في الأدمن: نفس الحواف، نفس
 *    الذهبي، نفس الكحلي، نفس التظليل، نفس مسافات a-group / a-input / a-btn.
 *    ما يلامس أي ستايل قائم — كل المحدّدات ببادئة wlx- (waiting-lesson-x).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── المربع الرئيسي ────────────────────────────────────────────────────────── */
.wlx-box { /* يرث ستايل a-card عبر الكلاس الإضافي في HTML */ }

.wlx-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;gap:8px;flex-wrap:wrap;
}
.wlx-head h6{font-weight:600;color:var(--primary);margin:0;}
.wlx-head h6 i{margin-left:6px;}

/* ── منطقة النموذج (inline) ────────────────────────────────────────────────── */
.wlx-form-area{
  display:none;margin-bottom:12px;padding:14px;
  background:var(--card2,rgba(0,0,0,0.18));border-radius:12px;
  border:1px solid var(--border,rgba(245,158,11,0.15));
}
.wlx-form-area.open{display:block;animation:wlxFormIn .22s ease;}

@keyframes wlxFormIn{
  from{opacity:0;transform:translateY(-4px);}
  to  {opacity:1;transform:translateY(0);}
}

.wlx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.wlx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:600px){
  .wlx-grid-2,.wlx-grid-3{grid-template-columns:1fr;}
}

/* segmented control لنوع العرض */
.wlx-seg{
  display:inline-flex;gap:0;border:1px solid var(--border,rgba(245,158,11,0.25));
  border-radius:10px;overflow:hidden;background:var(--card2,rgba(0,0,0,0.12));
}
.wlx-seg button{
  background:transparent;color:var(--text,#fff);border:0;cursor:pointer;
  padding:8px 14px;font-family:inherit;font-size:0.86rem;font-weight:600;
  transition:background .18s,color .18s;
}
.wlx-seg button.on{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#0b1726;
}
.wlx-seg button i{margin-left:6px;}

/* مفتاح تبديل (toggle) النشر */
.wlx-toggle{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  user-select:none;font-size:0.9rem;color:var(--text,#fff);
}
.wlx-toggle input{display:none;}
.wlx-toggle .wlx-sw{
  width:42px;height:24px;border-radius:12px;background:#3a3a3a;
  position:relative;transition:background .22s;
}
.wlx-toggle .wlx-sw::after{
  content:"";position:absolute;top:2px;right:2px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .22s,right .22s;
}
.wlx-toggle input:checked + .wlx-sw{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
}
.wlx-toggle input:checked + .wlx-sw::after{ right:20px; }

/* معاينة الثمبنيل */
.wlx-thumb-wrap{
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
}
.wlx-thumb-preview{
  width:160px;height:90px;border-radius:10px;overflow:hidden;
  background:var(--border,#2a2a2a);border:2px dashed var(--border,#444);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  position:relative;
}
.wlx-thumb-preview img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
}
.wlx-thumb-preview i{color:var(--muted,#888);font-size:1.4rem;}

/* أزرار الحفظ/الإلغاء */
.wlx-form-actions{
  display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;
}

/* ── قائمة مقاطع الانتظار ──────────────────────────────────────────────────── */
.wlx-list{margin-top:6px;}
.wlx-empty{
  color:var(--muted,#888);text-align:center;padding:18px 8px;font-size:0.9rem;
}
.wlx-row{
  display:flex;gap:12px;align-items:center;padding:10px 12px;
  background:var(--card2,rgba(0,0,0,0.14));border-radius:10px;margin-bottom:8px;
  border:1px solid var(--border,rgba(245,158,11,0.1));
  transition:background .18s,border-color .18s;
}
.wlx-row:hover{
  background:var(--card2-hover,rgba(245,158,11,0.06));
  border-color:rgba(245,158,11,0.25);
}
.wlx-row-thumb{
  width:64px;height:36px;border-radius:6px;overflow:hidden;flex-shrink:0;
  background:var(--border,#2a2a2a);position:relative;
  display:flex;align-items:center;justify-content:center;
}
.wlx-row-thumb img{width:100%;height:100%;object-fit:cover;}
.wlx-row-thumb i{color:var(--muted,#888);font-size:0.95rem;}

.wlx-row-info{flex:1;min-width:0;}
.wlx-row-title{
  font-weight:600;font-size:0.94rem;color:var(--text,#fff);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wlx-row-meta{
  font-size:0.78rem;color:var(--muted,#9ca3af);margin-top:2px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.wlx-row-meta i{margin-left:4px;}

.wlx-row-mode{
  font-size:0.78rem;font-weight:600;padding:3px 10px;border-radius:10px;
  background:rgba(245,158,11,0.15);color:#f59e0b;white-space:nowrap;
}
.wlx-row-mode.pct{background:rgba(16,185,129,0.15);color:#10b981;}

.wlx-row-status{
  font-size:0.72rem;padding:2px 8px;border-radius:8px;font-weight:600;
}
.wlx-row-status.on  {background:rgba(16,185,129,0.15);color:#10b981;}
.wlx-row-status.off {background:rgba(107,114,128,0.18);color:#9ca3af;}

.wlx-row-acts{display:flex;gap:4px;flex-shrink:0;}

/* رقم الترتيب */
.wlx-row-ord{
  width:28px;height:28px;border-radius:8px;
  background:rgba(245,158,11,0.12);color:#f59e0b;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.85rem;flex-shrink:0;
}

/* hint نصي خفيف تحت الحقول */
.wlx-hint{
  font-size:0.74rem;color:var(--muted,#9ca3af);margin-top:4px;
  display:block;
}

/* slider/range للنسبة */
.wlx-range-wrap{display:flex;gap:10px;align-items:center;}
.wlx-range-wrap input[type="range"]{flex:1;}
.wlx-range-val{
  min-width:54px;text-align:center;font-weight:700;color:#f59e0b;
  background:rgba(245,158,11,0.12);border-radius:8px;padding:4px 10px;
}

/* ── مقبض السحب لإعادة ترتيب صفوف مقاطع الانتظار ───────────────────────────── */
.wlx-row-drag{
  cursor:grab;color:var(--muted,#9ca3af);font-size:1.05rem;padding:0 4px;
  flex-shrink:0;user-select:none;
  touch-action:none; /* يمنع تمرير الصفحة عند بدء السحب من المقبض على الجوال */
}
.wlx-row-drag:active{ cursor:grabbing; }
.wlx-row.wlx-dragging{ opacity:0.45;border-color:var(--primary); }