/*!
 * مدد — المكونات (components.css)
 * 1) ربط ألوان Bootstrap المُجمَّع بمتغيرات مدد (الخطة 10.2.3) — فاتح وداكن.
 * 2) مكونات مدد المشتركة بين الموقع العام واللوحات (بادئة jb-).
 */

/* =========================================================
   1) ربط Bootstrap بالمتغيرات
   ========================================================= */
:root,
[data-bs-theme="dark"] {
  --bs-primary: var(--jb-primary);
  --bs-primary-rgb: var(--jb-primary-rgb);
  --bs-link-color: var(--jb-primary);
  --bs-link-color-rgb: var(--jb-primary-rgb);
  --bs-link-hover-color: var(--jb-primary-hover);
  --bs-link-hover-color-rgb: var(--jb-primary-rgb);
  --bs-body-bg: var(--jb-bg);
  --bs-body-color: var(--jb-text);
  --bs-body-color-rgb: var(--jb-text-rgb);
  --bs-body-font-family: var(--jb-font);
  --bs-emphasis-color: var(--jb-text);
  --bs-border-color: var(--jb-border);
  --bs-secondary-color: var(--jb-text-muted);
  --bs-secondary-bg: var(--jb-surface-2);
  --bs-tertiary-bg: var(--jb-surface-2);
  --bs-heading-color: var(--jb-text);
  --bs-focus-ring-color: rgba(var(--jb-primary-rgb), .45);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-xl);
  --bs-box-shadow: var(--sh-md);
  --bs-box-shadow-sm: var(--sh-sm);
  --bs-box-shadow-lg: var(--sh-lg);
  --bs-primary-bg-subtle: var(--jb-primary-subtle);
  --bs-primary-text-emphasis: var(--jb-primary);
  --bs-primary-border-subtle: rgba(var(--jb-primary-rgb), .35);
}

/* ===== الأزرار ===== */
.btn {
  --bs-btn-font-family: var(--jb-font);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: .625rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-border-radius: var(--r-md);
  --bs-btn-focus-box-shadow: var(--jb-focus-ring);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: color var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease),
    border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease),
    transform var(--mo-fast) var(--mo-ease);
}
.btn:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: 2px; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: 1.0625rem; --bs-btn-border-radius: var(--r-md); min-height: 52px; }
.btn-sm { --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .875rem; min-height: 36px; }

.btn-primary {
  --bs-btn-color: var(--jb-on-primary);
  --bs-btn-bg: var(--jb-primary);
  --bs-btn-border-color: var(--jb-primary);
  --bs-btn-hover-color: var(--jb-on-primary);
  --bs-btn-hover-bg: var(--jb-primary-hover);
  --bs-btn-hover-border-color: var(--jb-primary-hover);
  --bs-btn-active-color: var(--jb-on-primary);
  --bs-btn-active-bg: var(--jb-primary-hover);
  --bs-btn-active-border-color: var(--jb-primary-hover);
  --bs-btn-disabled-color: var(--jb-on-primary);
  --bs-btn-disabled-bg: var(--jb-primary);
  --bs-btn-disabled-border-color: var(--jb-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 31, 61, .14);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 12px -2px rgba(var(--jb-primary-rgb), .35); }
/* «سماوي سريري» (D25-17): الزر الرئيسي فيروزي سريري بنص أبيض (5.58:1) على الفاتح، وفيروزي فاتح بنص زيتي (8.37:1) على الداكن — من رموز tokens.css مباشرة */

/* الاتجاه A: الثانوي أبيض بحد رفيع، والتفاعل هادئ (بدون انقلاب كامل للون) */
.btn-outline-primary {
  --bs-btn-color: var(--jb-primary);
  --bs-btn-bg: var(--jb-surface);
  --bs-btn-border-color: rgba(var(--jb-primary-rgb), .35);
  --bs-btn-hover-color: var(--jb-primary-hover);
  --bs-btn-hover-bg: var(--jb-primary-subtle);
  --bs-btn-hover-border-color: var(--jb-primary);
  --bs-btn-active-color: var(--jb-primary-hover);
  --bs-btn-active-bg: var(--jb-primary-subtle);
  --bs-btn-active-border-color: var(--jb-primary);
  --bs-btn-disabled-color: var(--jb-primary);
  --bs-btn-disabled-border-color: var(--jb-primary);
  box-shadow: var(--sh-xs);
}
/* الخيار المختار (btn-check) لازم يضل واضح بعد تهدئة الزر الثانوي */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  color: var(--jb-on-primary);
  background-color: var(--jb-primary);
  border-color: var(--jb-primary);
}

/* زر ثانوي هادئ (سطح) */
.btn-jb-soft {
  --bs-btn-color: var(--jb-text);
  --bs-btn-bg: var(--jb-surface);
  --bs-btn-border-color: var(--jb-border);
  --bs-btn-hover-color: var(--jb-primary);
  --bs-btn-hover-bg: var(--jb-surface);
  --bs-btn-hover-border-color: var(--jb-primary);
  --bs-btn-active-color: var(--jb-primary);
  --bs-btn-active-bg: var(--jb-primary-subtle);
  --bs-btn-active-border-color: var(--jb-primary);
  box-shadow: var(--sh-xs);
}

/* زر شفاف (أيقونة أو رابط) */
.btn-jb-ghost {
  --bs-btn-color: var(--jb-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--jb-primary);
  --bs-btn-hover-bg: rgba(var(--jb-primary-rgb), .08);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--jb-primary);
  --bs-btn-active-bg: rgba(var(--jb-primary-rgb), .14);
  --bs-btn-active-border-color: transparent;
}

/* زر بحدود بيضاء فوق خلفية داكنة ثابتة (Hero، الدعوة الأخيرة) */
.jb-btn-on-dark {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: rgba(255, 255, 255, .06);
  --bs-btn-border-color: rgba(255, 255, 255, .6);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: rgba(255, 255, 255, .14);
  --bs-btn-hover-border-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-border-color: #FFFFFF;
}
.jb-btn-on-dark:focus-visible { outline-color: #FFFFFF; }

/* زر لون التمييز (خلفية التمييز + نص داكن 8.14:1) */
.btn-jb-accent {
  --bs-btn-color: var(--jb-on-accent);
  --bs-btn-bg: var(--jb-accent);
  --bs-btn-border-color: var(--jb-accent);
  --bs-btn-hover-color: var(--jb-on-accent);
  --bs-btn-hover-bg: #5ED6DE;
  --bs-btn-hover-border-color: #5ED6DE;
  --bs-btn-active-color: var(--jb-on-accent);
  --bs-btn-active-bg: #5ED6DE;
  --bs-btn-active-border-color: #5ED6DE;
}

.btn-success, .btn-danger, .btn-warning, .btn-info {
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
}
.btn-success { --bs-btn-color: var(--jb-on-success); --bs-btn-bg: var(--jb-success); --bs-btn-border-color: var(--jb-success); --bs-btn-hover-color: var(--jb-on-success); --bs-btn-hover-bg: var(--jb-success); --bs-btn-active-color: var(--jb-on-success); --bs-btn-active-bg: var(--jb-success); --bs-btn-disabled-bg: var(--jb-success); --bs-btn-disabled-color: var(--jb-on-success); }
.btn-danger { --bs-btn-color: var(--jb-on-danger); --bs-btn-bg: var(--jb-danger); --bs-btn-border-color: var(--jb-danger); --bs-btn-hover-color: var(--jb-on-danger); --bs-btn-hover-bg: var(--jb-danger); --bs-btn-active-color: var(--jb-on-danger); --bs-btn-active-bg: var(--jb-danger); --bs-btn-disabled-bg: var(--jb-danger); --bs-btn-disabled-color: var(--jb-on-danger); }
.btn-warning { --bs-btn-color: var(--jb-on-warning); --bs-btn-bg: var(--jb-warning); --bs-btn-border-color: var(--jb-warning); --bs-btn-hover-color: var(--jb-on-warning); --bs-btn-hover-bg: var(--jb-warning); --bs-btn-active-color: var(--jb-on-warning); --bs-btn-active-bg: var(--jb-warning); --bs-btn-disabled-bg: var(--jb-warning); --bs-btn-disabled-color: var(--jb-on-warning); }
.btn-info { --bs-btn-color: var(--jb-on-info); --bs-btn-bg: var(--jb-info); --bs-btn-border-color: var(--jb-info); --bs-btn-hover-color: var(--jb-on-info); --bs-btn-hover-bg: var(--jb-info); --bs-btn-active-color: var(--jb-on-info); --bs-btn-active-bg: var(--jb-info); --bs-btn-disabled-bg: var(--jb-info); --bs-btn-disabled-color: var(--jb-on-info); }
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover { filter: brightness(1.08); }

/* زر أيقونة مربع 44×44 */
.jb-icon-btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: var(--r-md);
  font-size: 1.125rem;
}

/* ===== الحقول ===== */
.form-control, .form-select {
  border-color: var(--jb-border-input);
  border-radius: var(--r-sm);
  background-color: var(--jb-surface);
  color: var(--jb-text);
  min-height: 44px;
}
.form-control::placeholder { color: var(--jb-text-muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: var(--jb-primary);
  box-shadow: var(--jb-focus-ring);
  background-color: var(--jb-surface);
  color: var(--jb-text);
}
.form-check-input { border-color: var(--jb-border-input); }
.form-check-input:checked { background-color: var(--jb-primary); border-color: var(--jb-primary); }
.form-check-input:focus { box-shadow: var(--jb-focus-ring); border-color: var(--jb-primary); }

/* ===== الأكورديون (السهم بلون النص الحالي عبر mask) ===== */
.accordion {
  --bs-accordion-bg: var(--jb-surface);
  --bs-accordion-color: var(--jb-text);
  --bs-accordion-border-color: var(--jb-border);
  --bs-accordion-border-radius: var(--r-lg);
  --bs-accordion-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-accordion-btn-color: var(--jb-text);
  --bs-accordion-btn-bg: var(--jb-surface);
  --bs-accordion-active-color: var(--jb-primary);
  --bs-accordion-active-bg: var(--jb-primary-subtle);
  --bs-accordion-btn-focus-box-shadow: inset var(--jb-focus-ring);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1.1rem;
  --bs-accordion-body-padding-x: 1.25rem;
}
.accordion-button { font-weight: 600; gap: var(--sp-3); }
.accordion-button::after {
  background-image: none !important;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
  width: 1rem;
  height: 1rem;
  margin-inline-start: auto;
}
.accordion-body { color: var(--jb-text-muted); }

/* ===== التبويبات (Pills) ===== */
.nav-pills {
  --bs-nav-pills-border-radius: var(--r-pill);
  --bs-nav-pills-link-active-color: var(--jb-on-primary);
  --bs-nav-pills-link-active-bg: var(--jb-primary);
  --bs-nav-link-color: var(--jb-text-muted);
  --bs-nav-link-hover-color: var(--jb-primary);
  --bs-nav-link-font-weight: 600;
}
.nav-pills .nav-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2); padding-inline: 1.1rem; }
.nav-pills .nav-link:focus-visible { box-shadow: var(--jb-focus-ring); outline: none; }

/* ===== البطاقة ===== */
.jb-card {
  background: var(--jb-surface);
  border: 1px solid var(--jb-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: var(--sp-5);
}
.jb-card--hover {
  transition: transform var(--mo-base) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease);
}
.jb-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(var(--jb-primary-rgb), .35);
}
.jb-card__title { font-size: var(--fs-h3); margin-block-end: var(--sp-2); }
.jb-card__text { color: var(--jb-text-muted); margin: 0; }

/* مربع الأيقونة */
.jb-icon-tile {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--jb-primary-subtle);
  color: var(--jb-primary);
  font-size: 1.375rem;
}
.jb-icon-tile--accent { background: rgba(var(--jb-accent-rgb), .14); color: var(--jb-accent-text); }

/* ===== الشارات ===== */
.jb-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .25em .7em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--jb-surface-2);
  color: var(--jb-text-muted);
}
.jb-badge--primary { background: var(--jb-primary-subtle); color: var(--jb-primary); }
.jb-badge--accent { background: var(--jb-accent); color: var(--jb-on-accent); }

/* شارات حالات الموعد: لون + أيقونة + نص (10.2.2) — الاستخدام: class="jb-badge jb-status--arrived" */
.jb-status--booked { background: var(--jb-st-booked-bg); color: var(--jb-st-booked); }
.jb-status--confirmed { background: var(--jb-st-confirmed-bg); color: var(--jb-st-confirmed); }
.jb-status--arrived { background: var(--jb-st-arrived-bg); color: var(--jb-st-arrived); }
.jb-status--with-doctor { background: var(--jb-st-with-doctor-bg); color: var(--jb-st-with-doctor); }
.jb-status--completed { background: var(--jb-st-completed-bg); color: var(--jb-st-completed); }
.jb-status--no-show { background: var(--jb-st-no-show-bg); color: var(--jb-st-no-show); }
.jb-status--cancelled { background: var(--jb-st-cancelled-bg); color: var(--jb-st-cancelled); text-decoration: line-through; }

/* وسم "مثال" للمحتوى التجريبي (11 — قاعدة 7) */
.jb-sample-tag {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .1em .55em;
  border: 1px dashed var(--jb-border-input);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--jb-text-muted);
  background: var(--jb-surface);
}

/* ===== بطاقة الإعلان الأصلية (FR-ADS 2.2 — القسم 11) =====
   صورة 1200×628 + وسم «إعلان» + الاسم + الوصف + أزرار التواصل، وأداتا الإبلاغ والإغلاق.
   تُستخدم أسفل شاشتي الاستقبال والطبيب، وبين منشورات المنتدى، ومعاينة المعلن.
   تصير أفقية تلقائياً حين يتسع حاويها (container query) */
.jb-adcard { container-type: inline-size; position: relative; display: grid; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--jb-border); background: var(--jb-surface); box-shadow: var(--sh-sm); }
.jb-adcard__media { position: relative; aspect-ratio: 1200 / 628; background: linear-gradient(135deg, rgba(var(--jb-primary-rgb), .16), rgba(var(--jb-accent-rgb), .18)); display: grid; place-items: center; overflow: hidden; }
.jb-adcard__media img { width: 100%; height: 100%; object-fit: cover; }
.jb-adcard__art { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--jb-surface); color: var(--jb-primary); font-size: 2.1rem; box-shadow: var(--sh-sm); }
.jb-adcard__sample { position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2); }
.jb-adcard__body { display: grid; gap: var(--sp-2); padding: var(--sp-4); min-width: 0; }
.jb-adcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.jb-adcard__label { padding: .05em .55em; border-radius: var(--r-sm); background: var(--jb-surface-2); border: 1px solid var(--jb-border); color: var(--jb-text-muted); }
.jb-adcard__title { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.jb-adcard__text { margin: 0; color: var(--jb-text-muted); font-size: var(--fs-sm); }
.jb-adcard__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-1); }
.jb-adcard__actions .btn { display: inline-flex; align-items: center; gap: .35rem; }
.jb-adcard__tools { position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); display: flex; gap: var(--sp-1); }
.jb-adcard__tools > * { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(15, 31, 61, .62); color: #FFFFFF; font-size: .8rem; }
@container (min-width: 560px) {
  .jb-adcard__wrap { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
  .jb-adcard__wrap .jb-adcard__media { aspect-ratio: auto; min-height: 11rem; }
  .jb-adcard__body { padding: var(--sp-5); }
}

/* ===== خيارات بطاقات (مربعات اختيار متعددة — التسجيل، المرضى…) ===== */
.jb-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.jb-choice { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--jb-border-input); background: var(--jb-surface); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease); }
.jb-choice input { flex: none; margin: 0; }
.jb-choice:hover { border-color: var(--jb-primary); }
.jb-choice:has(input:checked) { border-color: var(--jb-primary); background: var(--jb-primary-subtle); color: var(--jb-primary); }
.jb-choice:has(input:focus-visible) { outline: 3px solid var(--jb-primary); outline-offset: 2px; }
fieldset[aria-invalid="true"] .jb-choice { border-color: var(--jb-danger); }

/* ===== رأس القسم ===== */
.jb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
  padding: .25rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(var(--jb-primary-rgb), .06);
  border: 1px solid rgba(var(--jb-primary-rgb), .2);
  color: var(--jb-primary);
  font-size: .8125rem;
  font-weight: 600;
}

/* ===== قائمة الصح ===== */
.jb-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.jb-checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.jb-checklist .bi { color: var(--jb-success); font-size: 1.1rem; margin-block-start: .3rem; flex: none; }
.jb-checklist--muted .bi { color: var(--jb-text-muted); }

/* ===== Toast (إشعار منبثق) ===== */
.jb-toast-region {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  display: grid;
  gap: var(--sp-2);
  width: min(92vw, 420px);
  pointer-events: none;
}
[dir="rtl"] .jb-toast-region { transform: translateX(50%); }
.jb-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--jb-text);
  color: var(--jb-bg);
  box-shadow: var(--sh-lg);
  font-weight: 500;
  animation: jb-toast-in var(--mo-base) var(--mo-ease);
}
@keyframes jb-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== Skeleton (تحميل) ===== */
.jb-skeleton {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--jb-surface-2) 25%, var(--jb-border) 50%, var(--jb-surface-2) 75%);
  background-size: 200% 100%;
  animation: jb-shimmer 1.4s linear infinite;
}
@keyframes jb-shimmer { to { background-position: -200% 0; } }

/* ===== ظهور تدريجي عند التمرير (الموقع العام فقط — 10.7) ===== */
html.js [data-jb-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--mo-slow) var(--mo-ease), transform var(--mo-slow) var(--mo-ease);
  transition-delay: var(--jb-reveal-delay, 0ms);
}
html.js [data-jb-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-jb-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   2) مكونات اللوحات (الدفعة 2 — دليل نظام التصميم)
   ========================================================= */

/* ===== Bootstrap: نوافذ، أدراج، قوائم، تبويبات، ترقيم، مسار ===== */
.modal {
  --bs-modal-bg: var(--jb-surface);
  --bs-modal-color: var(--jb-text);
  --bs-modal-border-color: var(--jb-border);
  --bs-modal-border-radius: var(--r-xl);
  --bs-modal-inner-border-radius: calc(var(--r-xl) - 1px);
  --bs-modal-header-border-color: var(--jb-border);
  --bs-modal-footer-border-color: var(--jb-border);
  --bs-modal-box-shadow: var(--sh-lg);
}
.modal-title { font-size: var(--fs-h3); }
.modal-footer { gap: var(--sp-2); }
.modal-footer > * { margin: 0; }
.offcanvas {
  --bs-offcanvas-bg: var(--jb-surface);
  --bs-offcanvas-color: var(--jb-text);
  --bs-offcanvas-border-color: var(--jb-border);
  --bs-offcanvas-width: min(92vw, 440px);
}
.btn-close { opacity: .7; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.dropdown-menu {
  --bs-dropdown-bg: var(--jb-surface);
  --bs-dropdown-color: var(--jb-text);
  --bs-dropdown-border-color: var(--jb-border);
  --bs-dropdown-link-color: var(--jb-text);
  --bs-dropdown-link-hover-bg: var(--jb-surface-2);
  --bs-dropdown-link-hover-color: var(--jb-text);
  --bs-dropdown-link-active-bg: var(--jb-primary);
  --bs-dropdown-link-active-color: var(--jb-on-primary);
  --bs-dropdown-border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.dropdown-item { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; }
.dropdown-item.jb-danger-item { color: var(--jb-danger); }
.nav-tabs {
  --bs-nav-tabs-border-color: var(--jb-border);
  --bs-nav-tabs-link-active-color: var(--jb-primary);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--jb-primary);
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-link-color: var(--jb-text-muted);
  --bs-nav-link-hover-color: var(--jb-primary);
  gap: var(--sp-1);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.nav-tabs .nav-link { border-width: 0 0 3px; font-weight: 600; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2); }
.tab-content { padding-block-start: var(--sp-4); }
.pagination {
  --bs-pagination-color: var(--jb-text);
  --bs-pagination-bg: var(--jb-surface);
  --bs-pagination-border-color: var(--jb-border);
  --bs-pagination-hover-color: var(--jb-primary);
  --bs-pagination-hover-bg: var(--jb-surface-2);
  --bs-pagination-hover-border-color: var(--jb-border);
  --bs-pagination-focus-box-shadow: var(--jb-focus-ring);
  --bs-pagination-active-bg: var(--jb-primary);
  --bs-pagination-active-border-color: var(--jb-primary);
  --bs-pagination-active-color: var(--jb-on-primary);
  --bs-pagination-disabled-color: var(--jb-text-muted);
  --bs-pagination-disabled-bg: var(--jb-surface-2);
  --bs-pagination-disabled-border-color: var(--jb-border);
  gap: var(--sp-1);
  margin: 0;
}
.page-link { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: var(--r-md) !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--jb-text-muted); --bs-breadcrumb-item-active-color: var(--jb-text); margin: 0; font-size: var(--fs-sm); }
.breadcrumb { --bs-breadcrumb-divider: "/"; }
.progress { --bs-progress-bg: var(--jb-surface-2); --bs-progress-bar-bg: var(--jb-primary); --bs-progress-border-radius: var(--r-pill); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.form-check-label { cursor: pointer; }

/* ===== الحقول: تسمية، مساعدة، خطأ ===== */
.jb-field { display: grid; gap: var(--sp-1); min-width: 0; align-content: start; }
.jb-field > label, .jb-label { font-weight: 600; font-size: var(--fs-sm); color: var(--jb-text); }
.jb-req { color: var(--jb-danger); margin-inline-start: .15em; }
.jb-help { color: var(--jb-text-muted); font-size: var(--fs-xs); margin: 0; }
.jb-error { display: flex; align-items: center; gap: .35rem; color: var(--jb-danger); font-size: var(--fs-xs); font-weight: 600; margin: 0; }
.jb-error[hidden] { display: none; }
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: var(--jb-danger); }
.form-control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .3); }
.input-group-text { background: var(--jb-surface-2); border-color: var(--jb-border-input); color: var(--jb-text-muted); font-weight: 600; }
.jb-phone { direction: ltr; }
/* حقل الهاتف دائماً LTR (+962 يساراً)، لكن bootstrap.rtl يدوّر الزوايا ويُداخل الحدود كأن الترتيب RTL ← زوايا معكوسة.
   نعيدها LTR: المقدمة مدوّرة يساراً، والحقل مدوّر يميناً، والتداخل على حدّه الأيسر
   (!important لأن قواعد input-group في Bootstrap أعلى خصوصية؛ وبالإنجليزية تتوحّد الزاوية مع الحقول var(--r-sm)) */
.input-group.jb-phone > :first-child:not(:last-child) { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }
.input-group.jb-phone > :last-child:not(:first-child) { margin-right: 0 !important; margin-left: calc(var(--bs-border-width) * -1) !important; border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.jb-search { position: relative; }
.jb-search > .bi { position: absolute; z-index: 1; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%); color: var(--jb-text-muted); pointer-events: none; }
.jb-search .form-control { padding-inline-start: 2.4rem; padding-inline-end: 4.6rem; }
.jb-search kbd {
  /* موضع فيزيائي: direction:ltr على العنصر بيقلب inset-inline-end */
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  padding: .1rem .45rem; border-radius: var(--r-sm); background: var(--jb-surface-2); color: var(--jb-text-muted);
  border: 1px solid var(--jb-border); font-size: var(--fs-xs); font-family: inherit; direction: ltr; z-index: 1;
}
[dir="rtl"] .jb-search kbd { right: auto; left: .6rem; }
textarea.form-control { min-height: 110px; line-height: 1.7; }

/* رمز التحقق */
.jb-otp { display: flex; gap: var(--sp-2); direction: ltr; justify-content: center; }
.jb-otp input {
  width: 48px; height: 56px; padding: 0; text-align: center; font-size: 1.4rem; font-weight: 700;
  border: 1px solid var(--jb-border-input); border-radius: var(--r-md); background: var(--jb-surface); color: var(--jb-text);
}
.jb-otp input:focus { outline: none; border-color: var(--jb-primary); box-shadow: var(--jb-focus-ring); }
@media (max-width: 400px) { .jb-otp { gap: 6px; } .jb-otp input { width: 40px; height: 50px; } }

/* مشغّل الصوت: LTR دائماً حتى ما ينعكس شريط التقدم (13.2) */
.jb-audio { direction: ltr; display: block; width: 100%; max-width: 440px; height: 40px; }

/* ===== التنبيهات ===== */
.jb-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--fs-sm);
}
.jb-alert > .bi { font-size: 1.15rem; flex: none; margin-block-start: .1rem; }
.jb-alert__body { flex: 1; min-width: 0; }
.jb-alert__body b { display: block; }
.jb-alert__body p { margin: 0; }
.jb-alert--success { background: var(--jb-st-completed-bg); color: var(--jb-st-completed); border-color: rgba(22, 101, 52, .2); }
.jb-alert--info { background: var(--jb-st-confirmed-bg); color: var(--jb-st-confirmed); border-color: rgba(3, 105, 161, .2); }
.jb-alert--warning { background: var(--jb-st-arrived-bg); color: var(--jb-st-arrived); border-color: rgba(146, 64, 14, .2); }
.jb-alert--danger { background: var(--jb-st-no-show-bg); color: var(--jb-st-no-show); border-color: rgba(190, 18, 60, .2); }
.jb-alert__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }
/* تنبيه طبي بارز (لطبيب المريض فقط) */
.jb-medical-alert {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--jb-danger); color: var(--jb-on-danger); font-weight: 600;
}
.jb-medical-alert .bi { font-size: 1.3rem; }
.jb-medical-alert small { display: block; font-weight: 400; }
/* شريط حالة الاشتراك (أعلى اللوحة) */
.jb-subbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-4); padding: .55rem var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; text-align: center; }
.jb-subbar a { color: inherit; font-weight: 700; }
.jb-subbar--trial { background: var(--jb-primary-subtle); color: var(--jb-primary); }
.jb-subbar--grace { background: var(--jb-st-arrived-bg); color: var(--jb-st-arrived); }
.jb-subbar--readonly { background: var(--jb-st-no-show-bg); color: var(--jb-st-no-show); }

/* ===== بطاقات ===== */
.jb-kpi { display: grid; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--jb-surface); border: 1px solid var(--jb-border); }
.jb-kpi__label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); color: var(--jb-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.jb-kpi__label .bi { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--jb-primary-subtle); color: var(--jb-primary); font-size: 1.05rem; }
.jb-kpi__value { font-size: 1.9rem; font-weight: 700; line-height: 1.2; color: var(--jb-text); font-variant-numeric: tabular-nums; }
.jb-kpi__meta { color: var(--jb-text-muted); font-size: var(--fs-xs); }

.jb-person { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.jb-person__avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--jb-primary-subtle); color: var(--jb-primary); font-weight: 700; }
.jb-person__text { display: flex; flex-direction: column; min-width: 0; }
.jb-person__text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-person__text small { color: var(--jb-text-muted); font-size: var(--fs-xs); }

.jb-appt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--jb-surface); border: 1px solid var(--jb-border); }
.jb-appt__time { display: grid; text-align: center; padding: .35rem .6rem; border-radius: var(--r-md); background: var(--jb-surface-2); font-weight: 700; line-height: 1.3; direction: ltr; }
.jb-appt__time small { font-size: var(--fs-xs); color: var(--jb-text-muted); font-weight: 500; }
.jb-appt__actions { display: flex; align-items: center; gap: var(--sp-1); }
.jb-wa-btn { --bs-btn-color: #166534; --bs-btn-bg: #DCFCE7; --bs-btn-border-color: transparent; --bs-btn-hover-color: #14532D; --bs-btn-hover-bg: #BBF7D0; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #BBF7D0; --bs-btn-active-color: #14532D; }
[data-bs-theme="dark"] .jb-wa-btn { --bs-btn-color: #86EFAC; --bs-btn-bg: #0F2E1C; --bs-btn-hover-color: #BBF7D0; --bs-btn-hover-bg: #14532D; --bs-btn-active-bg: #14532D; --bs-btn-active-color: #BBF7D0; }
@media (max-width: 480px) {
  .jb-appt { grid-template-columns: auto 1fr; }
  .jb-appt__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

.jb-listing { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--jb-surface); border: 1px solid var(--jb-border); }
.jb-listing__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, var(--jb-primary-subtle), var(--jb-surface-2)); color: var(--jb-primary); font-size: 2.6rem; }
.jb-listing__media .jb-badge { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); }
.jb-listing__body { display: grid; gap: var(--sp-1); padding: var(--sp-4); }
.jb-listing__title { font-size: 1rem; font-weight: 700; margin: 0; }
.jb-listing__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); color: var(--jb-text-muted); font-size: var(--fs-xs); }
.jb-listing__price { font-weight: 700; color: var(--jb-primary); }

/* ===== الجدول (بطاقات على الموبايل) ===== */
.jb-table-card { border-radius: var(--r-lg); background: var(--jb-surface); border: 1px solid var(--jb-border); overflow: hidden; }
.jb-table-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--jb-border); }
.jb-table-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--jb-border); color: var(--jb-text-muted); font-size: var(--fs-sm); }
.jb-table-wrap { position: relative; overflow-x: auto; }
.jb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.jb-table th, .jb-table td { padding: .7rem var(--sp-4); text-align: start; border-block-end: 1px solid var(--jb-border); vertical-align: middle; }
.jb-table thead th { background: var(--jb-surface-2); color: var(--jb-text-muted); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; }
.jb-table tbody tr:last-child td { border-block-end: 0; }
.jb-table tbody tr:hover td { background: rgba(var(--jb-primary-rgb), .04); }
.jb-table tbody tr.is-selected td { background: rgba(var(--jb-primary-rgb), .09); }
/* plaintext: الاتجاه من أول حرف قوي بالمحتوى — الأرقام وحدها (هاتف، آيبان، مبلغ) تبقى LTR،
   وما يبدأ بعربي («3 من 4»، «12 عيادة»، «15 تشرين الأول 2026»، «120.000 د.أ») يُرتَّب RTL صحيحاً.
   (كانت direction: ltr + isolate تقلب ترتيب الكلمات العربية داخل العنصر) */
.jb-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; }
.jb-table__check { width: 44px; }
.jb-sort { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.jb-sort .bi { opacity: .45; font-size: .8rem; }
.jb-sort:hover { color: var(--jb-primary); }
.jb-sort:focus-visible { outline: 2px solid var(--jb-primary); outline-offset: 2px; border-radius: var(--r-sm); }
th[aria-sort="ascending"] .jb-sort, th[aria-sort="descending"] .jb-sort { color: var(--jb-primary); }
th[aria-sort="ascending"] .jb-sort .bi, th[aria-sort="descending"] .jb-sort .bi { opacity: 1; }
.jb-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: .5rem var(--sp-4); background: var(--jb-primary-subtle); color: var(--jb-primary); font-weight: 600; font-size: var(--fs-sm); }
.jb-bulkbar[hidden] { display: none; }
@media (max-width: 768px) {
  .jb-table--stack thead { display: none; }
  .jb-table--stack, .jb-table--stack tbody, .jb-table--stack tr, .jb-table--stack td { display: block; width: 100%; }
  .jb-table--stack tr { position: relative; padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--jb-border); }
  .jb-table--stack tbody tr:last-child { border-block-end: 0; }
  .jb-table--stack td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px var(--sp-3); padding: .3rem 0; border: 0; }
  .jb-table--stack td::before { content: attr(data-label); color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 600; }
  .jb-table--stack td.jb-table__check { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-4); width: auto; padding: 0; }
  .jb-table--stack td.jb-table__check::before, .jb-table--stack td.jb-table__main::before { content: none; }
  .jb-table--stack td.jb-table__main { padding-block-end: var(--sp-2); padding-inline-end: 2.5rem; }
  .jb-table--stack tbody tr:hover td { background: none; }
}

/* ===== الحالة الفارغة ===== */
.jb-empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-7) var(--sp-5); text-align: center; }
.jb-empty svg { width: 132px; height: auto; margin-block-end: var(--sp-2); }
.jb-empty__title { font-size: 1.1rem; margin: 0; }
.jb-empty p { color: var(--jb-text-muted); max-width: 34rem; margin: 0; }
.jb-empty .btn { margin-block-start: var(--sp-3); }

/* ===== الخطوات (Stepper) ===== */
.jb-stepper { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; counter-reset: step; }
.jb-stepper li { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); color: var(--jb-text-muted); font-size: var(--fs-sm); font-weight: 600; counter-increment: step; }
.jb-stepper li::before { content: ""; height: 4px; border-radius: var(--r-pill); background: var(--jb-surface-2); }
.jb-stepper li span::before { content: counter(step) ". "; }
.jb-stepper li.is-done::before, .jb-stepper li.is-current::before { background: var(--jb-primary); }
.jb-stepper li.is-current { color: var(--jb-primary); }
.jb-stepper li.is-done { color: var(--jb-text); }
.jb-step-panel[hidden] { display: none; }

/* ===== محدد طريقة التوثيق ===== */
.jb-docmethods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.jb-docmethod {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  min-height: 88px; padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md);
  border: 1px solid var(--jb-border-input); background: var(--jb-surface); color: var(--jb-text);
  font-family: inherit; font-weight: 600; cursor: pointer; text-align: center;
  transition: border-color var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease);
}
.jb-docmethod .bi { font-size: 1.4rem; color: var(--jb-primary); }
.jb-docmethod:hover { border-color: var(--jb-primary); }
.jb-docmethod:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: 2px; }
.jb-docmethod[aria-pressed="true"] { border-color: var(--jb-primary); background: var(--jb-primary-subtle); color: var(--jb-primary); box-shadow: inset 0 0 0 1px var(--jb-primary); }
.jb-docmethod__count { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; min-width: 22px; padding: 0 .35rem; border-radius: var(--r-pill); background: var(--jb-primary); color: var(--jb-on-primary); font-size: var(--fs-xs); line-height: 22px; }
.jb-docmethod__count[hidden] { display: none; }
.jb-docmethod[aria-disabled="true"] { cursor: not-allowed; color: var(--jb-text-muted); background: var(--jb-surface-2); border-style: dashed; }
.jb-docmethod[aria-disabled="true"] .bi { color: var(--jb-text-muted); }
.jb-docmethod__lock { font-size: var(--fs-xs); font-weight: 500; }
@media (max-width: 420px) {
  .jb-docmethods { grid-template-columns: 1fr; }
  .jb-docmethod { flex-direction: row; min-height: 52px; justify-content: flex-start; padding-inline: var(--sp-4); }
}

/* ===== مسجّل الصوت ===== */
.jb-rec { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--jb-border); background: var(--jb-surface); }
.jb-rec__panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--jb-surface-2); direction: ltr; }
.jb-rec[data-state="recording"] .jb-rec__panel { background: var(--jb-st-no-show-bg); }
.jb-rec[data-state="paused"] .jb-rec__panel { background: var(--jb-st-arrived-bg); }
.jb-rec__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--jb-text-muted); }
.jb-rec[data-state="recording"] .jb-rec__dot { background: var(--jb-danger); }
.jb-rec__wave { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 3px; height: 32px; }
.jb-rec__wave span { flex: 1; max-width: 4px; height: 12%; border-radius: 3px; background: var(--jb-text-muted); opacity: .5; transition: height 120ms linear; }
.jb-rec[data-state="recording"] .jb-rec__wave span { background: var(--jb-st-no-show); opacity: .9; }
.jb-rec__time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--jb-text); }
.jb-rec__left { color: var(--jb-text-muted); font-size: var(--fs-xs); }
.jb-rec__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.jb-rec__status { margin: 0; font-size: var(--fs-sm); color: var(--jb-text-muted); }
.jb-rec__review[hidden], .jb-rec__consent[hidden] { display: none; }
.jb-rec__review, .jb-rec__consent { display: grid; gap: var(--sp-2); }
.jb-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.jb-note { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--jb-border); }
.jb-note__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.jb-note__head small { color: var(--jb-text-muted); }
.jb-note__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--jb-st-no-show-bg); color: var(--jb-st-no-show); font-size: var(--fs-sm); font-weight: 600; }
.jb-note__confirm[hidden] { display: none; }
.jb-note__fixed { display: inline-flex; align-items: center; gap: .3rem; color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .jb-rec__wave span { transition: none; } }

/* ===== رافع الملفات ===== */
.jb-drop {
  position: relative; display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4);
  border: 2px dashed var(--jb-border-input); border-radius: var(--r-lg); background: var(--jb-surface); text-align: center;
  transition: border-color var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease);
}
.jb-drop.is-over { border-color: var(--jb-primary); background: var(--jb-primary-subtle); }
.jb-drop__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--jb-primary-subtle); color: var(--jb-primary); font-size: 1.6rem; }
.jb-drop p { margin: 0; color: var(--jb-text-muted); font-size: var(--fs-sm); }
.jb-drop__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.jb-drop__camera { display: none !important; }
@media (hover: none) and (pointer: coarse) { .jb-drop__camera { display: inline-flex !important; } }
.jb-files { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.jb-file { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--jb-border); background: var(--jb-surface); }
.jb-file__thumb { width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--jb-surface-2); color: var(--jb-primary); font-size: 1.5rem; }
.jb-file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.jb-file__body { display: grid; gap: .3rem; min-width: 0; }
.jb-file__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-file__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--jb-text-muted); font-size: var(--fs-xs); }
.jb-file__meta .form-select { min-height: 32px; padding-block: .15rem; font-size: var(--fs-xs); width: auto; }
.jb-file .progress { height: 6px; }
.jb-file.is-error { border-color: var(--jb-danger); background: var(--jb-st-no-show-bg); color: var(--jb-st-no-show); }
.jb-file.is-error .jb-file__thumb { color: var(--jb-danger); }
.jb-file.is-error .jb-file__meta { color: var(--jb-st-no-show); }
@media (max-width: 480px) { .jb-file { grid-template-columns: 48px 1fr; } .jb-file > .btn { grid-column: 1 / -1; justify-self: end; } }

/* ===== مساحة الإعلان (11) ===== */
.jb-ad { position: relative; margin-inline: auto; overflow: hidden; transition: opacity var(--mo-base) var(--mo-ease), max-height var(--mo-base) var(--mo-ease); }
.jb-ad--h { width: 100%; max-width: 728px; aspect-ratio: 728 / 90; }
.jb-ad--side { width: 300px; max-width: 100%; aspect-ratio: 300 / 250; }
.jb-ad__link { display: block; width: 100%; height: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--jb-border); }
.jb-ad__link picture, .jb-ad__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jb-ad__label { position: absolute; inset-block-start: 6px; inset-inline-end: 40px; padding: 0 .5rem; border-radius: var(--r-pill); background: rgba(15, 31, 61, .78); color: #FFFFFF; font-size: .6875rem; font-weight: 600; line-height: 20px; pointer-events: none; }
.jb-ad__close { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 31, 61, .78); color: #FFFFFF; font-size: .8rem; cursor: pointer; }
.jb-ad__close:hover { background: rgba(15, 31, 61, .92); }
.jb-ad__close:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: 1px; }
.jb-ad.is-closed { opacity: 0; }
@media (max-width: 480px) { .jb-ad--h { max-width: 320px; aspect-ratio: 320 / 100; } }

/* ===== أداة تبديل (Segmented) ===== */
.jb-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--jb-surface-2); border: 1px solid var(--jb-border); }
.jb-seg button { min-height: 34px; padding: 0 .8rem; border: 0; border-radius: calc(var(--r-md) - 3px); background: transparent; color: var(--jb-text-muted); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.jb-seg button[aria-pressed="true"] { background: var(--jb-surface); color: var(--jb-primary); box-shadow: var(--sh-xs); }
.jb-seg button:focus-visible { outline: 2px solid var(--jb-primary); outline-offset: 1px; }

/* ===== بطاقة رسم بياني ===== */
.jb-chart { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--jb-surface); border: 1px solid var(--jb-border); min-width: 0; }
.jb-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.jb-chart__head h3 { font-size: 1rem; margin: 0; }
.jb-chart__head small { color: var(--jb-text-muted); }
.jb-chart__canvas { position: relative; height: 240px; }
.jb-chart details summary { cursor: pointer; color: var(--jb-primary); font-size: var(--fs-sm); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.jb-chart details .jb-table { margin-block-start: var(--sp-2); }

/* =========================================================
   زر الدعم الفني العائم (FR-PUB-05) — بيحقنه core.js بالصفحات العامة والدخول
   اللون الرئيسي + on-primary (مقاس 5.47:1)؛ دائرة على الموبايل، وبنص على الشاشات الأوسع
   ========================================================= */
.jb-support-fab {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: 1rem;
  z-index: 1020; /* تحت الهيدر (1030) وخلفية القائمة (1040) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 56px;
  min-height: 56px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--jb-primary);
  color: var(--jb-on-primary);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-lg);
  transition: background-color var(--mo-fast) var(--mo-ease), transform var(--mo-fast) var(--mo-ease);
}
.jb-support-fab:hover { background: var(--jb-primary-hover); color: var(--jb-on-primary); }
.jb-support-fab:focus-visible { outline: none; box-shadow: var(--jb-focus-ring), var(--sh-lg); }
.jb-support-fab .bi { font-size: 1.5rem; line-height: 1; }
@media (max-width: 768px) {
  .jb-support-fab { padding: 0; width: 56px; }
  .jb-support-fab__text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .jb-support-fab, .jb-support-fab:hover { transition: none; transform: none; } }
/* الفوتر العام فيه زر واتساب خاص فيه، فالزر العائم يختفي بنعومة لما يظهر الفوتر (core.js ← is-footer) — بلا فراغ مصطنع أسفل الصفحة.
   صفحات الدخول بلا فوتر عام، فتبقى لها مسافة أمان تحت سطر الحقوق. */
.has-support-fab .jb-auth__foot { padding-block-end: 5rem; }
.jb-support.is-footer .jb-support-fab { opacity: 0; transform: translateY(12px) scale(.96); visibility: hidden; transition: opacity var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease), visibility 0s linear var(--mo-base); }
.jb-support-fab { transition: background-color var(--mo-fast) var(--mo-ease), opacity var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease); }
@media (prefers-reduced-motion: reduce) { .jb-support-fab, .jb-support.is-footer .jb-support-fab { transition: none; transform: none; } }
.jb-menu-open .jb-support-fab { visibility: hidden; }
@media print { .jb-support-fab { display: none; } }

/* ===== كلمة المرور: زر الإظهار ومقياس القوة (password.js — صفحات الدخول وحسابي C24) ===== */
.jb-pass { position: relative; }
.jb-pass .form-control { padding-inline-end: 3rem; }
.jb-pass__toggle { position: absolute; inset-block: 0; inset-inline-end: 0; display: grid; place-items: center; width: 46px; border: 0; background: none; color: var(--jb-text-muted); border-radius: var(--r-md); }
.jb-pass__toggle:hover { color: var(--jb-primary); }
.jb-pass__toggle:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: -3px; }
.jb-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-block-start: var(--sp-1); }
.jb-meter span { height: 4px; border-radius: var(--r-pill); background: var(--jb-surface-2); transition: background-color var(--mo-fast) var(--mo-ease); }
.jb-meter[data-level="1"] span:nth-child(-n+1) { background: var(--jb-danger); }
.jb-meter[data-level="2"] span:nth-child(-n+2) { background: var(--jb-warning, #D97706); }
.jb-meter[data-level="3"] span:nth-child(-n+3) { background: var(--jb-success); }
.jb-meter[data-level="4"] span { background: var(--jb-success); }
.jb-rules { display: grid; gap: 2px; margin: var(--sp-1) 0 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--jb-text-muted); }
.jb-rules li { display: flex; align-items: center; gap: .35rem; }
.jb-rules li.is-ok { color: var(--jb-success); }

/* تنبيه الموافقة المسبقة للتأمين (C01/C09) */
.rc-prenote { display: flex; gap: .35rem; align-items: flex-start; margin: var(--sp-1) 0 var(--sp-2); }
.rc-prenote .bi { color: var(--jb-warning); }

/* أزرار الخطر المحددة بالفاتح: أحمر الرموز (5.8:1 على surface-2) بدل أحمر Bootstrap الافتراضي */
.btn-outline-danger { --bs-btn-color: var(--jb-danger); --bs-btn-border-color: var(--jb-danger); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--jb-danger); --bs-btn-hover-border-color: var(--jb-danger); --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: var(--jb-danger); --bs-btn-active-border-color: var(--jb-danger); }
/* أزرار الخطر المحددة بالوضع الداكن: لون أفتح يحقق التباين 4.5:1 على الأسطح الداكنة */
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #FCA5A5; --bs-btn-border-color: #F87171; --bs-btn-hover-color: #1F0A0A; --bs-btn-hover-bg: #FCA5A5; --bs-btn-hover-border-color: #FCA5A5; --bs-btn-active-color: #1F0A0A; --bs-btn-active-bg: #F87171; --bs-btn-active-border-color: #F87171; }

/* ===== «كيف عرفت عنا؟» — components/patient-source.js (C04، C02) ===== */
.jb-src-box { display: grid; gap: var(--sp-3); }
.jb-src-box > .jb-field { margin: 0; }
.jb-src-box > .jb-field[hidden] { display: none; }
.jb-src__results { display: grid; gap: 2px; margin: var(--sp-1) 0 0; padding: var(--sp-1); list-style: none; border: 1px solid var(--jb-border); border-radius: var(--r-md); background: var(--jb-surface); box-shadow: var(--sh-sm); }
.jb-src__results[hidden] { display: none; }
.jb-src__opt { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--jb-text); text-align: start; font: inherit; }
.jb-src__opt:hover, .jb-src__opt:focus-visible { background: var(--jb-primary-subtle); }
.jb-src__opt:focus-visible { outline: 2px solid var(--jb-primary); outline-offset: -2px; }
.jb-src__opt small { color: var(--jb-text-muted); font-size: var(--fs-xs); }
.jb-src__none { padding: var(--sp-2) var(--sp-3); color: var(--jb-text-muted); font-size: var(--fs-sm); }
.jb-src__picked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--jb-primary-subtle); color: var(--jb-text); font-weight: 600; font-size: var(--fs-sm); }
.jb-src__picked[hidden] { display: none; }
.jb-src__picked > .bi { color: var(--jb-primary); }
.jb-src__picked > span { flex: 1; min-width: 0; }

/* ===== مخطط الأسنان التشريحي — components/dental-chart.js (C05، C07، S22) =====
   منظر المريض ثابت LTR (يمين المريض على يسار الشاشة) — الأسنان SVG، والألوان من إعداد نموذج الأسنان */
.jb-teeth { direction: ltr; display: grid; gap: 2px; padding: var(--sp-3); border: 1px solid var(--jb-border); border-radius: var(--r-lg, 16px); background: var(--jb-surface); overflow-x: auto; }
.jb-teeth__sides { display: flex; justify-content: space-between; color: var(--jb-text-muted); font-size: var(--fs-xs); padding-inline: 2px; }
.jb-teeth__jaw { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 34rem; }
.jb-teeth--child .jb-teeth__jaw { min-width: 18.5rem; }
.jb-teeth__jaw--upper { align-items: flex-end; padding-block-end: 4px; border-block-end: 1px dashed var(--jb-border); }
.jb-teeth__jaw--lower { align-items: flex-start; padding-block-start: 4px; }
.jb-teeth__t { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 1px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--jb-text); font: inherit; }
.jb-teeth__t.is-mid { margin-inline-start: 6px; }
.jb-teeth__t.is-mid::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: -5px; border-inline-start: 1px dashed var(--jb-border); }
.jb-teeth.is-interactive .jb-teeth__t { cursor: pointer; transition: background-color .15s, border-color .15s; }
.jb-teeth.is-interactive .jb-teeth__t:hover { background: var(--jb-surface-2); }
.jb-teeth__t:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: 1px; }
.jb-teeth__t.is-selected, .jb-teeth__t[aria-pressed="true"] { border-color: var(--jb-primary); background: var(--jb-primary-subtle); }
/* ارتفاع موحّد ← كل سن بعرضه التشريحي الحقيقي (الطاحن أعرض من القاطع) */
.jb-teeth__svg { display: block; height: clamp(92px, 8.5vw, 118px); width: auto; max-width: 100%; overflow: visible; }
.jb-teeth--child .jb-teeth__svg { height: clamp(84px, 9vw, 104px); }
.jb-teeth__n { font-size: 11px; font-weight: 600; color: var(--jb-text-muted); line-height: 1; }
.jb-teeth__t.has-state .jb-teeth__n { color: var(--jb-text); }
.jb-teeth__root { fill: #F1E9D8; stroke: #B9A88A; stroke-width: 1.1; }
.jb-teeth__crown { fill: url(#jbt-enamel) #FFFFFF; stroke: #8E9AAB; stroke-width: 1.2; }
.jb-teeth__root.is-painted, .jb-teeth__crown.is-painted { stroke: rgba(15, 31, 61, .45); }
.jb-teeth__cerv { fill: none; stroke: #B9A88A; stroke-width: .9; }
.jb-teeth__cusp { fill: none; stroke: #A9B4C2; stroke-width: .9; }
.jb-teeth__crown.is-painted ~ .jb-teeth__cusp { stroke: rgba(255, 255, 255, .6); }
.jb-teeth__ring { fill: none; stroke-width: 2.4; stroke-dasharray: 4 3; }
.jb-teeth__x { fill: none; stroke-width: 3; stroke-linecap: round; }
.jb-teeth__thread { stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.jb-teeth__fill { stroke: rgba(15, 31, 61, .45); stroke-width: 1; }
.jb-teeth__svg.is-missing { opacity: .32; }
.jb-teeth__svg.is-missing .jb-teeth__crown, .jb-teeth__svg.is-missing .jb-teeth__root { fill: transparent; stroke-dasharray: 3 2; }
[data-bs-theme="dark"] .jb-teeth__root { fill: #3B3426; stroke: #8C7B5D; }
[data-bs-theme="dark"] .jb-teeth__crown { fill: #E7ECF3; stroke: #5F6E88; }
[data-bs-theme="dark"] .jb-teeth__cerv { stroke: #8C7B5D; }
.jb-teeth__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.jb-teeth__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.jb-teeth__sw { width: 14px; height: 14px; border-radius: 4px; background: var(--sw); border: 1px solid rgba(15, 31, 61, .25); }
.jb-teeth__sw--root { background: linear-gradient(to bottom, var(--sw) 55%, #FFFFFF 55%); }
.jb-teeth__sw--outline { background: transparent; border: 2px dashed var(--sw); }
.jb-teeth__sw--missing { background: transparent; border: 1.5px dashed var(--sw); }
.jb-teeth__sw--mark { background: transparent; border: 0; position: relative; }
.jb-teeth__sw--mark::before, .jb-teeth__sw--mark::after { content: ""; position: absolute; inset-inline-start: 6px; top: -1px; width: 2.5px; height: 16px; background: var(--sw); transform: rotate(45deg); border-radius: 2px; }
.jb-teeth__sw--mark::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .jb-teeth.is-interactive .jb-teeth__t { transition: none; } }
@media print { .jb-teeth { overflow: visible; border-color: #999; } }

/* ===== النماذج التخصصية — components/template-form.js (C07 ومعاينة S22) ===== */
.jb-tplform__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 992px) { .jb-tplform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .jb-tplform__grid { grid-template-columns: minmax(0, 1fr); } }
.jb-tplform__grid > .jb-field { margin: 0; min-width: 0; }
.jb-tplform__f.is-wide, .jb-tplform__h { grid-column: 1 / -1; }
.jb-tplform__h { margin: var(--sp-2) 0 0; padding-block-start: var(--sp-2); border-block-start: 1px solid var(--jb-border); font-size: var(--fs-sm); font-weight: 700; color: var(--jb-text-muted); }
.jb-tplform__h:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.jb-tplform__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.jb-tplform__calc { background: var(--jb-surface-2); font-weight: 700; }
.jb-tplform__actions { display: flex; justify-content: flex-end; margin-block-start: var(--sp-3); }
.jb-tplform fieldset.jb-field { border: 0; padding: 0; min-width: 0; }

/* رسمة الأسطح الخمسة لكل سن (M O D B L) + قناة الجذر المعالجة */
.jb-teeth__map { display: block; width: clamp(18px, 2.5vw, 28px); height: auto; margin-block: 2px; overflow: visible; }
.jb-teeth--child .jb-teeth__map { width: clamp(20px, 2.8vw, 30px); }
.jb-teeth__surf { fill: #FFFFFF; stroke: #8E9AAB; stroke-width: 1.4; stroke-linejoin: round; }
.jb-teeth__surf.is-painted { stroke: rgba(15, 31, 61, .5); }
.jb-teeth__map.is-missing { opacity: .3; }
.jb-teeth__canal { stroke: rgba(255, 255, 255, .85); stroke-width: 1.4; stroke-dasharray: 3 2; fill: none; }
[data-bs-theme="dark"] .jb-teeth__surf { fill: #E7ECF3; stroke: #5F6E88; }
.jb-teeth__lgmap { flex-basis: 100%; color: var(--jb-text-muted); font-size: var(--fs-xs); }
.jb-teeth__map--lg { width: 22px; flex: none; margin: 0; }

/* تعدّد المرفقات والتسجيلات (قرار 2026-10-19) */
.jb-files__summary { margin: var(--sp-3) 0 0; color: var(--jb-text-muted); font-size: var(--fs-sm); }
.jb-file__view { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.jb-file__view:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: -3px; }
.jb-rec__count { margin: var(--sp-2) 0 0; color: var(--jb-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.jb-rec[data-state="full"] .jb-rec__panel { opacity: .5; }

/* ===== مخطط الأسنان: مرحلة العلاج (2.5 — D25-09) — الألوان السريرية كما هي، والمرحلة علامات منفصلة ===== */
.jb-teeth__mk { display: flex; align-items: center; justify-content: center; gap: 2px; height: 12px; min-height: 12px; }
.jb-teeth__pdot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--jb-surface); }
.jb-teeth__ok { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: #16A34A; color: #fff; font-size: 8px; line-height: 1; }
.jb-teeth__ok .bi { line-height: 1; vertical-align: 0; }
.is-ph-planned { fill-opacity: .32; stroke-opacity: .5; }
.is-ph-progress { fill-opacity: .55; }
path.jb-teeth__x.is-ph-planned { stroke-opacity: .45; }
.jb-teeth__prog { fill: none; stroke-width: 1.7; stroke-dasharray: 3.2 2.2; stroke-linejoin: round; }
.jb-teeth--plan .jb-teeth__t.is-offplan .jb-teeth__svg, .jb-teeth--plan .jb-teeth__t.is-offplan .jb-teeth__map { opacity: .3; }
/* الجسر: وصلة بين سنّين متجاورين بنفس المجموعة (الترتيب البصري LTR ثابت) */
.jb-teeth__t.is-link::after { content: ""; position: absolute; top: var(--lky, 62%); right: -7px; z-index: 1; width: 12px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--lk); box-shadow: 0 0 0 1px rgba(15, 31, 61, .18); pointer-events: none; }
.jb-teeth__jaw--lower .jb-teeth__t.is-link::after { top: var(--lky, 38%); }
.jb-teeth__t.is-link-faint::after { opacity: .45; }
/* مفتاح المراحل */
.jb-teeth__legends { display: grid; gap: var(--sp-2); }
.jb-teeth__legend--ph { margin-top: 0; padding-top: var(--sp-2); border-top: 1px dashed var(--jb-border); }
.jb-teeth__sw--ph-planned { position: relative; background: transparent; border: 0; }
.jb-teeth__sw--ph-planned::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--jb-text-muted); }
.jb-teeth__sw--ph-progress { background: transparent; border: 2px dashed var(--jb-text-muted); }
.jb-teeth__sw--ph-done { display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: #16A34A; color: #fff; font-size: 9px; }
/* عرضا المخطط: حالة الأسنان / خطة العلاج */
.jb-dview { display: inline-flex; }
/* الخطة العلاجية */
.jb-tplan { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--jb-border); border-radius: var(--r-lg, 16px); background: var(--jb-surface); }
.jb-tplan__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.jb-tplan__t { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: 1rem; font-weight: 700; }
.jb-tplan__prog { color: var(--jb-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.jb-tplan__bar { flex: 1 1 120px; height: 6px; overflow: hidden; border-radius: 6px; background: var(--jb-surface-2); }
.jb-tplan__bar > span { display: block; height: 100%; border-radius: 6px; background: #16A34A; }
.jb-tplan__empty { margin: 0; color: var(--jb-text-muted); font-size: var(--fs-sm); }
.jb-tplan__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jb-tplan__i { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: .5rem .65rem; border: 1px solid var(--jb-border); border-radius: var(--r-md); }
.jb-tplan__i.is-done { background: color-mix(in srgb, #16A34A 6%, var(--jb-surface)); }
.jb-tplan__teeth { flex: none; min-width: 2.6rem; padding: .1rem .45rem; border-radius: 6px; background: var(--jb-surface-2); font-size: var(--fs-sm); font-weight: 700; text-align: center; direction: ltr; }
.jb-tplan__tx { display: inline-flex; flex: 1 1 140px; align-items: center; gap: .4rem; min-width: 0; font-size: var(--fs-sm); }
.jb-tplan__dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.jb-tplan__ph { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem; border-radius: var(--r-pill, 999px); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.jb-tplan__ph--planned { background: var(--jb-surface-2); color: var(--jb-text); box-shadow: inset 0 0 0 1px var(--jb-border); }
.jb-tplan__ph--progress { background: #FEF3C7; color: #92400E; }
.jb-tplan__ph--done { background: #DCFCE7; color: #166534; }
[data-bs-theme="dark"] .jb-tplan__ph--progress { background: #3A2A0A; color: #FCD34D; }
[data-bs-theme="dark"] .jb-tplan__ph--done { background: #0F2E1C; color: #86EFAC; }
.jb-tplan__i .btn { display: inline-flex; align-items: center; gap: .3rem; }

/* ملخص أخطاء النموذج (D25-11): رسالة موجّهة للحل أعلى النموذج */
.jb-form-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0 0 var(--sp-3); padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--jb-danger) 40%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--jb-danger) 8%, var(--jb-surface)); color: var(--jb-danger); font-size: var(--fs-sm); font-weight: 600; }
.jb-form-sum .bi { flex: none; }
.jb-form-sum span { flex: 1 1 200px; }
.jb-form-sum__go { padding: 0; color: inherit; font-weight: 700; text-decoration: underline; }

/* ===== تنبيه حذف بيانات التجربة المجانية (D25-20) ===== */
.jb-purge-note { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid color-mix(in srgb, var(--jb-warning) 40%, transparent); border-inline-start-width: 3px; border-radius: var(--r-md, 8px); background: color-mix(in srgb, var(--jb-warning) 9%, var(--jb-surface, #fff)); color: var(--jb-text); font-size: var(--fs-sm); line-height: 1.7; text-align: start; }
.jb-purge-note[hidden] { display: none; }
.jb-purge-note > .bi { flex: none; margin-block-start: 2px; color: var(--jb-warning); }

/* ===== مخطط الأسنان: رسم المعالجات والأسنان المختلطة (ملاحظات 2026-11-01) ===== */
.jb-teeth__spot { stroke: rgba(255, 255, 255, .9); stroke-width: 1; }
.jb-teeth__rct { fill: none; stroke-width: 3; stroke-linecap: round; }
.jb-teeth__gloss { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.jb-teeth__ext { fill: #0F0F0F !important; stroke: #0F0F0F; }
.jb-teeth__extL { fill: #FFFFFF; font: 700 20px/1 system-ui, sans-serif; }
.jb-teeth__sw--gold { background: linear-gradient(to bottom, #FFE680, #FFD700 45%, #C9A227); }
.jb-teeth__sw--spot { border-radius: 50%; }
.jb-teeth__t.is-faded .jb-teeth__svg, .jb-teeth__t.is-faded .jb-teeth__map { opacity: .4; }
.jb-teeth--mixed .jb-teeth__jaw--primary { width: 68%; min-width: 18.5rem; justify-self: center; }
.jb-teeth--mixed .jb-teeth__jaw--upper:not(.jb-teeth__jaw--primary) { border-block-end: 0; padding-block-end: 2px; }
.jb-teeth--mixed .jb-teeth__jaw--lower.jb-teeth__jaw--primary { padding-block-end: 2px; }
.jb-teeth--mixed .jb-teeth__jaw--primary .jb-teeth__svg { height: clamp(70px, 7vw, 90px); }