/* ═══════════════════════════════════════════════════════════════════════════
   TawahudCare — طبقة التصميم فوق style.css المشتركة مع TigrisCare.

   style.css يوفّر: .container .card .grid .table .table-wrap .btn .btn-danger
   .btn-outline .btn-secondary .badge .form-row .flash .toast .pill .kv .receipt
   وسمات الثيم (--bg --surface --text --muted --border --primary --accent ...).

   هذا الملف يضيف:  التبويب العلوي، ترويسة الصفحة، بطاقات الأرقام، شريط الفلاتر،
   الحالة الفارغة، مفاتيح التبديل، شبكة الجدول الزمني، رقائق الحالة.
   ⚠️ استخدم متغيرات الثيم دائماً — لا ألوان ثابتة في القوالب.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── هوية اللون: تيل هادئ بدل الذهبي (بيئة علاجية — تعليمات وزارة الصحة) ── */
:root{
  --primary:#14b8a6; --primary-600:#0d9488;
  --accent:#2dd4bf;  --accent-soft:#99f6e4; --on-accent:#04241f;
  --warm:#f59e0b; --violet:#8b5cf6; --sky:#38bdf8; --rose:#fb7185;
  --gold-glow:0 0 20px rgba(20,184,166,.16);
}
body.light{
  --primary:#0d9488; --primary-600:#0f766e;
  --accent:#0d9488;  --accent-soft:#5eead4; --on-accent:#ffffff;
  --warm:#b45309; --violet:#6d28d9; --sky:#0284c7; --rose:#e11d48;
  --gold-glow:0 0 20px rgba(13,148,136,.12);
}

/* ═══ 1. الشريط العلوي ═════════════════════════════════════════════════════ */
.tbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 4px; margin:0 0 18px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.tbar-brand{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--text); padding:4px 10px 4px 4px; margin-inline-end:6px;
}
.tbar-mark{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  color:#fff; font-weight:800; font-size:1.05rem; box-shadow:var(--gold-glow);
}
.tbar-name{display:flex; flex-direction:column; line-height:1.15}
.tbar-name b{font-size:.92rem; font-weight:800}
.tbar-name span{font-size:.66rem; color:var(--muted); letter-spacing:.04em}

.tbar-tab{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:10px; text-decoration:none;
  color:var(--muted); font-size:.87rem; font-weight:700; white-space:nowrap;
  border:1px solid transparent; background:transparent; cursor:pointer;
  transition:background .15s, color .15s;
}
.tbar-tab:hover{background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--text)}
.tbar-tab.on{
  color:var(--on-accent);
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  box-shadow:0 2px 10px color-mix(in srgb,var(--primary) 35%,transparent);
}
.tbar-spacer{flex:1}
.tbar-tools{display:flex; align-items:center; gap:6px}
.tbar-icon{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; font-size:1rem;
}
.tbar-icon:hover{background:color-mix(in srgb,var(--primary) 12%,var(--surface))}
.tbar-user{
  display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer;
  font-size:.82rem; font-weight:700; color:var(--text);
}
.tbar-av{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  color:#fff; font-size:.8rem; font-weight:800;
}
.tbar-user small{display:block; color:var(--muted); font-weight:600; font-size:.68rem}

.tbar-menu{
  position:absolute; inset-inline-end:8px; top:56px; z-index:70; min-width:210px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px; display:none;
}
.tbar-menu.open{display:block}
.tbar-menu a, .tbar-menu button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:start;
  padding:8px 11px; border-radius:8px; text-decoration:none; border:0;
  background:transparent; color:var(--text); font-size:.85rem; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.tbar-menu a:hover, .tbar-menu button:hover{background:color-mix(in srgb,var(--primary) 12%,transparent)}
.tbar-menu hr{border:0; border-top:1px solid var(--border); margin:5px 2px}

/* شريط فرعي لأقسام الوحدة */
.subbar{
  display:flex; gap:6px; flex-wrap:wrap; margin:-8px 0 18px; padding-bottom:2px;
  overflow-x:auto;
}
.subbar a{
  padding:6px 13px; border-radius:999px; text-decoration:none; white-space:nowrap;
  font-size:.82rem; font-weight:700; color:var(--muted);
  border:1px solid var(--border); background:var(--surface);
}
.subbar a:hover{color:var(--text); border-color:var(--primary)}
.subbar a.on{
  color:var(--on-accent); border-color:transparent;
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
}

/* ═══ 2. ترويسة الصفحة ═════════════════════════════════════════════════════ */
.phead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin:0 0 16px;
}
.phead h1{margin:0; font-size:1.42rem; font-weight:800; letter-spacing:-.01em}
.phead .sub{margin:3px 0 0; color:var(--muted); font-size:.86rem}
.phead .actions{display:flex; gap:8px; flex-wrap:wrap}

/* ═══ 3. بطاقات الأرقام ════════════════════════════════════════════════════ */
.stats{
  display:grid; gap:12px; margin:0 0 20px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.stat::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:var(--primary);
}
.stat.warm::before{background:var(--warm)}
.stat.violet::before{background:var(--violet)}
.stat.sky::before{background:var(--sky)}
.stat.rose::before{background:var(--rose)}
.stat.ok::before{background:var(--ok)}
.stat .lbl{color:var(--muted); font-size:.79rem; font-weight:700; margin-bottom:6px}
.stat .val{
  font-size:1.55rem; font-weight:800; line-height:1.15;
  font-variant-numeric:tabular-nums; direction:ltr; text-align:start;
}
.stat .val .cur{font-size:.72rem; color:var(--muted); font-weight:700; margin-inline-start:4px}
.stat .foot{margin-top:5px; font-size:.74rem; color:var(--muted)}

/* ═══ 4. شريط الفلاتر ══════════════════════════════════════════════════════ */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 14px; margin:0 0 16px;
}
.filters .f{display:flex; flex-direction:column; gap:4px; min-width:140px}
.filters .f label{font-size:.74rem; font-weight:700; color:var(--muted)}
.filters .f.grow{flex:1; min-width:200px}

/* ═══ 5. الحقول ════════════════════════════════════════════════════════════ */
input, select, textarea{
  font-family:inherit; font-size:.9rem; padding:9px 11px;
  border:1px solid var(--border); border-radius:9px;
  background:var(--surface); color:var(--text); width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);
}
textarea{min-height:80px; resize:vertical}
input[type=checkbox], input[type=radio]{width:auto}
.fgrid{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fgrid .full{grid-column:1/-1}
.fld{display:flex; flex-direction:column; gap:5px}
.fld > label{font-size:.79rem; font-weight:700; color:var(--muted)}
.fld .hint{font-size:.72rem; color:var(--muted)}
.req::after{content:' *'; color:var(--danger)}

/* مفتاح تبديل بدل صندوق الاختيار (اتفاقية BabylonCore) */
.switch{display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none}
.switch input{display:none}
.switch .track{
  width:42px; height:24px; border-radius:999px; background:var(--border);
  position:relative; transition:background .18s; flex:none;
}
.switch .track::after{
  content:''; position:absolute; top:3px; inset-inline-start:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .track{background:var(--primary)}
.switch input:checked + .track::after{transform:translateX(-18px)}
html[dir=ltr] .switch input:checked + .track::after{transform:translateX(18px)}
.switch .lbl{font-size:.85rem; font-weight:600}

/* ═══ 6. الجداول ═══════════════════════════════════════════════════════════ */
.table{width:100%; border-collapse:collapse; font-size:.87rem}
.table thead th{
  text-align:start; padding:10px 12px; font-size:.76rem; font-weight:800;
  color:var(--muted); background:color-mix(in srgb,var(--text) 4%,var(--surface));
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.table tbody td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle}
.table tbody tr:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.table tbody tr:last-child td{border-bottom:0}
.table td.num, .table th.num{direction:ltr; text-align:start; font-variant-numeric:tabular-nums}
.table .row-link{color:var(--text); text-decoration:none; font-weight:700}
.table .row-link:hover{color:var(--primary)}
.table tfoot td{padding:10px 12px; font-weight:800; border-top:2px solid var(--border)}

/* ═══ 7. الرقائق والحالات ══════════════════════════════════════════════════ */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:999px; font-size:.74rem; font-weight:700; white-space:nowrap;
  background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--muted);
  border:1px solid transparent;
}
.chip.ok{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok)}
.chip.bad{background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger)}
.chip.warn{background:color-mix(in srgb,var(--warm) 18%,transparent); color:var(--warm)}
.chip.info{background:color-mix(in srgb,var(--sky) 18%,transparent); color:var(--sky)}
.chip.violet{background:color-mix(in srgb,var(--violet) 18%,transparent); color:var(--violet)}
.chip.pri{background:color-mix(in srgb,var(--primary) 16%,transparent); color:var(--primary)}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; background:currentColor}

/* ═══ 8. الأزرار ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-family:inherit;
  font-size:.86rem; font-weight:700; cursor:pointer; text-decoration:none;
  transition:transform .12s, box-shadow .15s, background .15s;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  color:var(--on-accent); border-color:transparent;
}
.btn-danger{background:var(--danger); color:#fff; border-color:transparent}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 11px; font-size:.78rem; border-radius:8px}
.btn-lg{padding:12px 22px; font-size:.95rem}
.btn-block{width:100%}

/* ═══ 9. البطاقات والحالة الفارغة ══════════════════════════════════════════ */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);
  margin:0 0 16px;
}
.card.flush{padding:0; overflow:hidden}
.card-h{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin:0 0 14px;
}
.card.flush .card-h{padding:14px 18px 0}
.card-h h2, .card-h h3{margin:0; font-size:1.02rem; font-weight:800}
.card-h .muted{font-size:.8rem; color:var(--muted); font-weight:600}

.empty{
  text-align:center; padding:44px 20px; color:var(--muted);
}
.empty .ico{font-size:2.4rem; opacity:.5; margin-bottom:10px}
.empty h3{margin:0 0 6px; font-size:1rem; color:var(--text)}
.empty p{margin:0 0 14px; font-size:.85rem}

.cols{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cols-2{display:grid; gap:16px; grid-template-columns:2fr 1fr}
@media(max-width:900px){.cols-2{grid-template-columns:1fr}}

/* ═══ 10. شبكة الجدول الزمني ═══════════════════════════════════════════════ */
.sched{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface)}
.sched table{border-collapse:collapse; width:100%; min-width:760px; font-size:.8rem}
.sched th{
  position:sticky; top:0; z-index:2; padding:9px 8px; background:var(--surface);
  border-bottom:1px solid var(--border); border-inline-start:1px solid var(--border);
  font-size:.75rem; font-weight:800; white-space:nowrap;
}
.sched td{
  padding:0; height:34px; border-bottom:1px solid var(--border);
  border-inline-start:1px solid var(--border); vertical-align:top;
}
.sched .thcol{
  position:sticky; inset-inline-start:0; z-index:1; background:var(--surface);
  font-weight:700; color:var(--muted); padding:6px 9px; white-space:nowrap;
  font-variant-numeric:tabular-nums; direction:ltr; text-align:start;
}
.sblock{
  display:block; margin:2px; padding:4px 7px; border-radius:7px; font-size:.73rem;
  line-height:1.3; text-decoration:none; color:var(--text); overflow:hidden;
  border-inline-start:3px solid var(--primary);
  background:color-mix(in srgb,var(--primary) 13%,transparent);
}
.sblock b{display:block; font-weight:800; font-size:.75rem}
.sblock small{color:var(--muted); font-size:.68rem}
.sblock.attended{border-inline-start-color:var(--ok); background:color-mix(in srgb,var(--ok) 13%,transparent)}
.sblock.absent{border-inline-start-color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent)}
.sblock.cancelled{opacity:.5; text-decoration:line-through}
.sfree{display:block; height:100%; min-height:30px}
.sfree:hover{background:color-mix(in srgb,var(--primary) 9%,transparent); cursor:pointer}

/* ═══ 11. الوصل / الطباعة ══════════════════════════════════════════════════ */
@media print{
  .no-print, .tbar, .subbar, .filters, .phead .actions{display:none !important}
  body{background:#fff !important; color:#000 !important}
  .card{border:1px solid #ccc !important; box-shadow:none !important; break-inside:avoid}
  a{text-decoration:none; color:#000}
}
.sheet{
  max-width:760px; margin:0 auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:26px;
}
.sheet h1{margin:0 0 3px; font-size:1.3rem}
.sheet .meta{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--muted); font-size:.82rem; border-bottom:1px solid var(--border);
  padding-bottom:12px; margin-bottom:16px}

/* ═══ 12. أدوات صغيرة ══════════════════════════════════════════════════════ */
.muted{color:var(--muted)}
.num{direction:ltr; text-align:start; font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:10px}
.bar{height:7px; border-radius:999px; background:var(--border); overflow:hidden}
.bar > i{display:block; height:100%; background:var(--primary); border-radius:999px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.86rem}
.kv dt{color:var(--muted); font-weight:700}
.kv dd{margin:0; font-weight:600}
.alert{
  padding:11px 14px; border-radius:10px; font-size:.85rem; font-weight:600;
  border:1px solid transparent; margin:0 0 14px;
}
.alert.warn{background:color-mix(in srgb,var(--warm) 12%,transparent); color:var(--warm);
  border-color:color-mix(in srgb,var(--warm) 35%,transparent)}
.alert.bad{background:color-mix(in srgb,var(--danger) 10%,transparent); color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 32%,transparent)}
.alert.ok{background:color-mix(in srgb,var(--ok) 12%,transparent); color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.alert.info{background:color-mix(in srgb,var(--sky) 12%,transparent); color:var(--sky);
  border-color:color-mix(in srgb,var(--sky) 32%,transparent)}

/* البحث عن طفل (مكوّن مشترك) */
.picker{position:relative}
.picker .res{
  position:absolute; z-index:40; inset-inline:0; top:calc(100% + 4px);
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-lg); max-height:280px; overflow:auto; display:none;
}
.picker .res.open{display:block}
.picker .res button{
  display:flex; justify-content:space-between; gap:10px; width:100%; text-align:start;
  padding:9px 12px; border:0; background:transparent; cursor:pointer;
  color:var(--text); font-family:inherit; font-size:.85rem;
  border-bottom:1px solid var(--border);
}
.picker .res button:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.picker .res small{color:var(--muted)}

@media(max-width:700px){
  .container{padding:0 10px}
  .phead h1{font-size:1.18rem}
  .tbar{gap:4px; padding:6px 2px}
  .tbar-tab{padding:6px 10px; font-size:.8rem}
  .tbar-name span{display:none}
  .stat .val{font-size:1.3rem}
}

/* ═══ 13. تصحيح خصوصية الأزرار ══════════════════════════════════════════════
   style.css يعرّف `body.light .btn` بخصوصية (0,2,1) وهي أعلى من `.btn-primary`
   (0,1,0)، فكان زر الإجراء الأساسي يخرج أبيض بلا لون في الوضع الفاتح — أي على
   كل صفحة في النظام، لأن الفاتح هو الافتراضي. نرفع الخصوصية هنا بدل تعديل
   style.css المشترك مع TigrisCare. */
.btn.btn-primary,
body.light .btn.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:0 2px 10px color-mix(in srgb,var(--primary) 26%,transparent);
}
.btn.btn-primary:hover,
body.light .btn.btn-primary:hover{
  background:linear-gradient(135deg,var(--accent),var(--primary));
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 34%,transparent);
}
.btn.btn-danger,
body.light .btn.btn-danger{
  background:var(--danger); color:#fff; border-color:transparent;
}
.btn.btn-danger:hover,
body.light .btn.btn-danger:hover{
  background:var(--danger); color:#fff; border-color:transparent;
  filter:brightness(.92);
}
.btn.btn-ghost,
body.light .btn.btn-ghost{background:transparent}
.btn.btn-ghost:hover,
body.light .btn.btn-ghost:hover{
  background:color-mix(in srgb,var(--primary) 10%,transparent);
}