/* ═══════════════════════════════════════════════════════════════════════
   مكوّنات الشاشات: البطاقات والأفاتار والعروض والجداول.
   الأساس (`base.css`) يحمل الرموز والهيكل؛ هنا ما تراه داخل الصفحات.
   ═══════════════════════════════════════════════════════════════════════ */

/* `minmax(0,1fr)` لا `1fr`: المسار الافتراضي يتّسع لأعرض محتوى غير قابل
   للكسر، وشريحة «مفتوح الآن … حتى ٩ م» تطول وقت الذروة فتدفع الصفحة
   جانبياً. قيست فعلاً: بطاقة ٤٥١px داخل عمود ٣٩٨px. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

/* ── الأفاتار ───────────────────────────────────────────────────────── */

.ava {
  width: var(--s, 56px); height: var(--s, 56px); flex: none;
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--bg-2); color: var(--faint); border: 1px solid var(--line);
}
.ava.sq { border-radius: 26%; }
.ava.ok { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--teal); }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava b { font-size: calc(var(--s, 56px) * .38); font-weight: 800; }

/* ── بطاقة الطبيب ───────────────────────────────────────────────────── */

.dcard {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dcard:active { transform: scale(.985); }
@media (hover: hover) { .dcard:hover { box-shadow: var(--shadow-lift); } }
.dcard-b { flex: 1; min-width: 0; }
.dcard-t { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dcard-t b { font-size: 15.5px; font-weight: 800; }
.dcard-s { color: var(--muted); font-size: 13.5px; margin-top: 1px; }
.dcard-a { margin-top: 7px; min-width: 0; }
.dcard-a .chip { max-width: 100%; white-space: normal; }
.dcard-go { color: var(--faint); flex: none; }
.dcard-go svg { width: 18px; height: 18px; }

/* ── بلاطات التخصصات ────────────────────────────────────────────────── */

.tile {
  display: grid; justify-items: center; gap: 7px; width: 92px; text-align: center;
}
.tile-ic {
  width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 25px; font-weight: 800; color: var(--teal);
}
.tile span { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.tile small { color: var(--faint); font-size: 11.5px; }

.depcard {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.depcard b { font-size: 14.5px; font-weight: 700; }
.depcard span { color: var(--muted); font-size: 12.5px; }

/* ── بطاقة العرض ────────────────────────────────────────────────────── */

.ocard {
  position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden;
  padding: 18px 16px; border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(135deg, #12A594 0%, #0E8A6E 55%, #0B7C63 100%);
  box-shadow: var(--shadow);
}
.ocard-d {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  background: #E8B84B; color: #3A2B05; font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-end-end-radius: 14px; display: inline-flex; align-items: center; gap: 5px;
}
.ocard-d svg { width: 14px; height: 14px; }
.ocard-b { flex: 1; min-width: 0; padding-top: 12px; }
.ocard-b b { display: block; font-size: 21px; font-weight: 800; line-height: 1.25; }
.ocard-b span { display: block; font-size: 15px; opacity: .95; }
.ocard-b i { display: block; font-style: normal; font-weight: 700; margin-top: 6px; }
.ocard-b u { display: block; text-decoration: none; opacity: .8; font-size: 12.5px; }
.ocard-img { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: none;
             border: 3px solid rgb(255 255 255 / .55); background: #fff; }
.ocard-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── هيرو صفحة الطبيب ───────────────────────────────────────────────── */

.hero { text-align: center; padding: 6px 0 18px; }
.hero .ava { margin-inline: auto; }
.hero h1 { margin: 12px 0 2px; font-size: 21px; font-weight: 800; }
.hero .dep { color: var(--muted); font-size: 14px; }
.hero .chips { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* ── برنامج اليوم ───────────────────────────────────────────────────── */

.stops { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.stops::-webkit-scrollbar { display: none; }
.stop {
  flex: none; min-width: 152px; padding: 11px 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.stop b { display: block; font-size: 13.5px; font-weight: 700; }
.stop span { display: block; color: var(--muted); font-size: 12.5px; }
.stop.now { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-soft); }
.stop.now b { color: var(--ok); }
.stop.next { border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.stop.done { opacity: .55; }

/* ── شريط الإجراءات ─────────────────────────────────────────────────── */

/* `fixed` لا `sticky`: الالتصاق يعتمد على موضع العنصر داخل حاويته، وقد ثبت
   بالقياس أنه لا يثبت هنا (يمرّ ويختفي عند التمرير ٧٠٠px). شريط تواصل الطبيب
   هو أهم ما في الصفحة، فيجب أن يبقى في متناول الإصبع دائماً — والتثبيت الصريح
   لا يعتمد على شيء. العمود محصور بعرض المحتوى ومتوسّط كبقيّة الصفحة. */
.acts {
  position: fixed; inset-inline: 0; margin-inline: auto; width: min(100%, var(--max));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index: 30;
  display: flex; gap: 8px; padding: 8px; margin-top: 18px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lift);
}
.acts .btn { flex: 1; min-height: 44px; padding: 0 10px; font-size: 13.5px; }
.acts .btn.ico-only { flex: 0 0 46px; padding: 0; }

/* ── العيادات والجداول ──────────────────────────────────────────────── */

.tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
}
.tab.on { background: linear-gradient(140deg, var(--navy-top), var(--navy-deep)); color: #fff; border-color: transparent; }

.week { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.week td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.week tr:last-child td { border-bottom: 0; }
.week td:first-child { font-weight: 700; width: 34%; }
.week tr.today td { background: var(--teal-soft); }
.week .off { color: var(--faint); }

.photos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.photos::-webkit-scrollbar { display: none; }
.photos img { width: 148px; height: 108px; object-fit: cover; border-radius: 12px; flex: none; border: 1px solid var(--line); }

/* ── نصوص ومقالات ───────────────────────────────────────────────────── */

.prose { font-size: 15.5px; line-height: 1.95; }
.prose p { margin: 0 0 12px; }
.hint { color: var(--muted); font-size: 13px; }

.tcard { display: flex; gap: 12px; padding: 12px; background: var(--card);
         border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.tcard img { width: 96px; height: 74px; object-fit: cover; border-radius: 12px; flex: none; }
.tcard b { font-size: 14.5px; font-weight: 700; }
.tcard span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ── البحث ──────────────────────────────────────────────────────────── */

.field {
  width: 100%; min-height: 50px; padding: 0 16px; font: inherit; font-size: 15px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
}
.field::placeholder { color: var(--faint); }

/* ── صفوف الإعدادات ─────────────────────────────────────────────────── */

.row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  padding: 15px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); cursor: pointer; font: inherit; color: inherit;
}
.row + .row { margin-top: 8px; }
.row svg { width: 21px; height: 21px; color: var(--teal); flex: none; }
.row b { flex: 1; font-weight: 700; font-size: 14.5px; }
.row span { color: var(--muted); font-size: 13px; }

/* الشاشات الكبيرة: العمود يبقى بعرض الهاتف ويتوسّط — نفس قرار التابلت */
@media (min-width: 900px) {
  .hdr, .nav { box-shadow: none; }
}

/* سطر التوافر في الهيرو يطول وقت الذروة («مفتوح الآن · … حتى ٧:٣٠ م · بعدها
   عيادة شفا ٨ م»). `.chip` تمنع الكسر و`.doc-top` تُخفي الفائض، فيضيع نصف
   الجملة بصمت. هنا نسمح بالكسر لهذه الشريحة وحدها. */
.avail { white-space: normal; }

/* الشريط الثابت يغطّي آخر عنصر ما لم نفتح له مكاناً */
.doc-body { padding-bottom: 84px; }