/* إضافات أغنام فوق تصميم الاستراحة. */

/* الأزرار السريعة في الرئيسية */
.quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.quick a {
  display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: var(--s2) var(--s3);
  background: var(--surface); border-radius: var(--r-large); font-size: 15px; font-weight: 500;
}
.quick a:hover { background: var(--surface-hover); }
.quick a.primary { background: var(--accent); color: #fff; }
.quick a.primary:hover { background: var(--accent-hover); }

/* البحث */
.search-box { position: relative; }
.search-box svg { position: absolute; inset-inline-start: var(--s3); top: 11px; color: var(--muted); pointer-events: none; }
.search-input {
  width: 100%; height: 44px; border: 0; border-radius: var(--r-pill); background: var(--surface); outline: none;
  padding-inline: 44px var(--s4); font-size: 16px;
}
.search-input:focus { box-shadow: 0 0 0 2px var(--ink); }

/* صف الراس */
.thumb { width: 44px; height: 44px; border-radius: var(--r-large); flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--surface); color: var(--muted); font-weight: 700; font-size: 13px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag-no { font-weight: 700; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 2px; }

/* بطاقة الراس */
.animal-head { display: flex; gap: var(--s4); align-items: center; }
.animal-photo { width: 96px; height: 96px; border-radius: var(--r-large); background: var(--surface); flex: none; display: grid;
  place-items: center; overflow: hidden; color: var(--muted); position: relative; border: 0; padding: 0; }
.animal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.animal-head h2 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; }
.kv { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; font-size: 14px; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv > span:first-child { color: var(--muted); flex: none; }
.kv > span:last-child { text-align: end; font-weight: 500; }
.card.kvs { padding-block: var(--s1); }
.tabs { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.missing-note { background: var(--badge-accent-bg); color: var(--badge-accent-ink); padding: var(--s3); border-radius: var(--r-modal); font-size: 13px; line-height: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }

/* نموذج الراس: شاشة وحدة */
.form { display: flex; flex-direction: column; gap: var(--s4); }
.form-section { display: flex; flex-direction: column; gap: var(--s4); }
.form-section > h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.line-row { display: flex; align-items: flex-end; gap: var(--s2); }
.line-row .field { flex: 1; min-width: 0; }
.line-row .field.small { flex: 0 0 96px; }
.total-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.total-line.bad { color: var(--accent); font-weight: 500; }
.total-line.good { color: var(--badge-ok-ink); font-weight: 500; }
input[type="date"].input { direction: ltr; text-align: center; }
.req::after { content: ' *'; color: var(--accent); }
.form-actions { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s4); }

/* سجل العمليات */
.audit-row { width: 100%; align-items: flex-start; }
.audit-row .ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--muted); }
.audit-row.sensitive .ico { border-color: var(--accent); color: var(--accent); background: var(--badge-accent-bg); }
.audit-row .text { font-size: 14px; line-height: 21px; }
.audit-row .sub { margin-top: 2px; }
.diff { display: flex; flex-direction: column; gap: var(--s2); }
.diff pre { margin: 0; padding: var(--s3); background: var(--surface); border-radius: var(--r-modal); font-family: var(--font-mono);
  font-size: 12px; line-height: 18px; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-word; }
.filters { display: flex; flex-direction: column; gap: var(--s3); }
.filters summary { cursor: pointer; font-weight: 500; }
.filters[open] summary { margin-bottom: var(--s3); }

/* جرس التنبيهات */
.bell { position: relative; }
.bell-count { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; }

/* التنبيهات */
.alert-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); }
.alert-card.is-new { border-inline-start: 3px solid var(--accent); }
.alert-card .title { font-size: 14px; line-height: 20px; font-weight: 500; }
.alert-card .sub { font-size: 12px; line-height: 16px; color: var(--muted); }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill.high { background: var(--accent); color: #fff; }

/* الوزن الجماعي */
.weigh-row { display: flex; gap: var(--s2); align-items: flex-end; }
.weigh-row .field { flex: 1; min-width: 0; }

/* منحنى النمو */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .end-label { fill: var(--ink); font-size: 12px; font-weight: 500; }
.chart-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 4px 8px;
  border-radius: var(--r-badge); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; }

/* صفوف المواليد */
.lamb-line { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); background: var(--surface); border-radius: var(--r-modal); }
.pick-list { max-height: 280px; overflow-y: auto; }