/* =========================================================
   children.css — تنسيقات المرحلة 3
   ========================================================= */

/* ---- Tabs ---- */
.tabs{ display:flex; gap:8px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.tab-btn{
  background: transparent; border:none; padding: 8px 16px; border-radius: 999px;
  font-size:.85rem; font-weight:700; color: var(--text-dim);
  transition: all .2s var(--ease);
}
.tab-btn:hover{ background: var(--surface-2); color: var(--text); }
.tab-btn.active{ background: var(--accent); color:#fff; }

/* ---- ملخص مصغر ---- */
.mini-stats{ display:flex; gap:12px; margin-bottom: 12px; flex-wrap:wrap; }
.mini-stat{
  flex:1 1 130px; min-width:130px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition: transform .2s var(--ease);
}
.mini-stat:hover{ transform: translateY(-2px); }
.mini-num{ font-size:1.4rem; font-weight:800; font-family: var(--font-display); }
.mini-stat span:last-child{ font-size:.72rem; color: var(--text-dim); text-align:center; }
.danger-mini{ background: color-mix(in srgb, var(--danger) 10%, transparent); }
.danger-mini .mini-num{ color: var(--danger); }

/* ---- تنبيه تجاوز مهلة الإفادة (تلوين تحذيري واضح) ---- */
.row-overdue{ background: color-mix(in srgb, var(--danger) 8%, transparent) !important; }
.row-overdue:hover{ background: color-mix(in srgb, var(--danger) 14%, transparent) !important; }
.overdue-tag{
  display:inline-flex; align-items:center; gap:4px; background: var(--danger); color:#fff;
  font-size:.68rem; font-weight:800; padding: 2px 8px; border-radius: 999px; margin-right:6px;
  animation: overduePulse 1.6s ease-in-out infinite;
}
@keyframes overduePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }

/* ---- قائمة أسعار التحاليل ---- */
.price-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.price-tag{
  background: var(--surface-2); border:1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font-size:.78rem; display:flex; gap:6px; align-items:center;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.price-tag:hover{ border-color: var(--accent); transform: translateY(-2px); }
.price-tag b{ color: var(--accent); }

.price-tag.price-editable{ cursor:pointer; }
.price-tag.price-editable:hover{ background: var(--accent); color:#fff; }
.price-tag.price-editable:hover b{ color: inherit; }

/* ---- Drag & Drop لاختيار عدة تحاليل في جلسة واحدة ---- */
.dnd-layout{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.dnd-pool, .dnd-drop{
  flex:1; min-width:220px; background: var(--surface-2); border:1px dashed var(--border);
  border-radius: var(--radius-sm); padding:12px; max-height: 280px; overflow-y:auto;
}
.dnd-pool h4, .dnd-drop h4{ margin:0 0 8px; font-size:.8rem; }
.dnd-pool-list{ display:flex; flex-wrap:wrap; gap:8px; }
.dnd-chip{
  background: var(--accent); color:#fff; border-radius: var(--radius-sm); padding:6px 10px;
  font-size:.72rem; cursor:grab; text-align:center; user-select:none; transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.dnd-chip:hover{ transform: translateY(-2px); }
.dnd-chip.dragging{ opacity:.4; }
.dnd-drop.drag-over{ background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.dnd-selected{ display:flex; flex-wrap:wrap; gap:8px; min-height:60px; }
.remove-selected-test{ background:none; border:none; color:#fff; font-size:.65rem; margin-right:4px; cursor:pointer; }
/* ملاحظة: التفاف dnd-layout على الشاشات الضيقة يتم تلقائيًا عبر
   flex-wrap في تعريف .dnd-layout بالأعلى — بدون حاجة لـ media query. */
.test-stack{ display:flex; flex-wrap:wrap; gap:6px; }
.test-chip, .test-chip.single{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:.72rem; font-weight:700; padding: 5px 11px; border-radius: 10px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(0);
  animation: chipDrop .35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes chipDrop{ from{ opacity:0; transform: translateY(-8px) scale(.9);} to{ opacity:1; transform:none; } }

.detail-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:10px; font-size:.85rem; }
.detail-grid div{ background: var(--surface-2); border-radius: var(--radius-sm); padding:8px 12px; }
.claims-notice{
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: color-mix(in srgb, var(--text) 80%, var(--warning));
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  font-size: .85rem;
}

.lab-total-box{
  margin-top:14px; background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size:.95rem; text-align:center;
}
.lab-total-box b{ color: var(--accent); font-size:1.15rem; }

/* ---- قائمة تجديد الإفادة المنبثقة ---- */
.renew-dropdown{
  position:absolute; left:0; top:100%; z-index:20; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  min-width:90px; margin-top:4px; overflow:hidden;
}
.renew-option{
  padding:9px 14px; font-size:.82rem; font-weight:600; cursor:pointer;
  transition: background .15s var(--ease), color .15s var(--ease); white-space:nowrap;
  border-bottom: 1px solid var(--border);
}
.renew-option:last-child{ border-bottom:none; }
.renew-option:hover{ background: var(--accent); color:#fff; }

/* ---- قائمة اختيار متعدد (Checkbox) ---- */
.checkbox-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius: var(--radius-sm); padding:10px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:.85rem; cursor:pointer; padding:4px 0; }

/* ---- قائمة تحاليل بالضغط (بديل السحب والإفلات) ---- */
.click-test-list{ display:flex; flex-wrap:wrap; gap:8px; max-height:220px; overflow-y:auto; padding:8px; border:1px solid var(--border); border-radius: var(--radius-sm); }
.click-test-btn{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:8px 12px; font-size:.75rem; cursor:pointer; text-align:center; min-width:100px;
  transition: background .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease);
}
.click-test-btn:hover{ background: var(--accent); color:#fff; border-color:var(--accent); transform: translateY(-2px); }

/* ---- قائمة الحضانات الأخرى (قسم المطالبات) ---- */
.nursery-columns{ display:flex; flex-direction:column; gap:8px; }
.nursery-column-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%;
  background: var(--surface-2); border:1.5px solid var(--border); border-radius: var(--radius-sm);
  padding:12px 16px; font-size:.9rem; text-align:right; cursor:pointer; font-family:inherit;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nursery-column-item:hover{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.nursery-column-item.active-nursery{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.nursery-column-item span:first-child{ font-weight:700; }

/* ---- حالة تنفيذ التحليل (منفَّذ من الكيميائي) ---- */
.test-chip.executed{ background: linear-gradient(135deg, var(--success), #1f8f63) !important; }
.lab-exec-done{ background: color-mix(in srgb, var(--success) 8%, transparent); }