/* ══════════════════════════════════════════════════════════
   dr.ps — Redesign component library (T1, 2026-07-31)
   ─────────────────────────────────
   Namespace: all selectors prefixed `.ui-` — zero collisions confirmed
   against style-rtl.css / mobile.css / design-tokens.css / components.css /
   feed.css / dashboard-components.css. Depends on redesign-tokens.css.
   STATUS: additive only, loaded by /dev/ui-kit only until T2.
══════════════════════════════════════════════════════════ */

.ui-scope, .ui-scope *{ box-sizing:border-box; }
.ui-scope{ font-family:var(--font-sans); color:var(--ink); }
.ui-scope :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
/* بعض المكوّنات (الستيبر الموحّد، الأكورديون) تُستخدَم خارج غلاف .ui-scope
   داخل show.blade.php — قاعدة تركيز مستقلة كي لا تعتمد على وجود الغلاف. */
.ui-accordion__head:focus-visible,
.ui-stepper-action__btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
.ui-mono{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; }

/* ── Button ── */
.ui-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-sm); font-size:14px; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-decoration:none; line-height:1.3;
  transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.ui-btn:active{ transform:translateY(1px); }
.ui-btn[disabled], .ui-btn.is-disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.ui-btn--sm{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
.ui-btn--lg{ padding:13px 24px; font-size:15px; }

.ui-btn--primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.ui-btn--primary:hover{ background:var(--primary-deep); border-color:var(--primary-deep); }

.ui-btn--navy{ background:var(--navy); border-color:var(--navy); color:#fff; }
.ui-btn--navy:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }

.ui-btn--outline{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.ui-btn--outline:hover{ border-color:var(--primary); color:var(--primary-deep); }

.ui-btn--ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.ui-btn--ghost:hover{ background:var(--paper); color:var(--ink); }

.ui-btn--wa{ background:#25D366; border-color:#25D366; color:#fff; }
.ui-btn--wa:hover{ background:#1EBE57; border-color:#1EBE57; }

/* ── Status pill ── */
.ui-status-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
  border-radius:100px; font-size:12.5px; font-weight:700; line-height:1.5;
  border:1px solid transparent; white-space:nowrap;
}
.ui-status-pill__dot{ width:7px; height:7px; border-radius:50%; flex:none; }

.ui-status-pill--success{ background:var(--success-soft); color:var(--primary-deep); border-color:var(--primary-soft); }
.ui-status-pill--success .ui-status-pill__dot{ background:var(--success); }

.ui-status-pill--waiting{ background:var(--waiting-soft); color:var(--waiting); border-color:var(--waiting-line); }
.ui-status-pill--waiting .ui-status-pill__dot{ background:var(--waiting); }

.ui-status-pill--danger{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.ui-status-pill--danger .ui-status-pill__dot{ background:var(--danger); }

.ui-status-pill--disabled{ background:var(--slate-soft); color:var(--muted); border-color:var(--line); }
.ui-status-pill--disabled .ui-status-pill__dot{ background:var(--slate); }

.ui-status-pill--info{ background:var(--info-soft); color:var(--info); border-color:var(--info); border-color:color-mix(in srgb, var(--info) 35%, transparent); }
.ui-status-pill--info .ui-status-pill__dot{ background:var(--info); }

/* ── Card ── */
.ui-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:20px;
}
.ui-card--pad-sm{ padding:14px; }
.ui-card--pad-lg{ padding:28px; }
.ui-card--elevated{ box-shadow:var(--shadow); }

/* ── Section header ── */
.ui-section-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.ui-section-header__title{
  display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink); margin:0;
}
.ui-section-header__title i{ color:var(--primary); font-size:14px; }
.ui-section-header__count{
  background:var(--primary-soft); color:var(--primary-deep); font-size:11.5px; font-weight:700;
  border-radius:100px; padding:1px 9px; font-family:var(--font-mono);
}

/* ── Stepper (unified — replaces the two duplicated bars in reservations/show) ── */
.ui-stepper{ display:flex; align-items:flex-start; gap:0; padding:6px 2px; }
.ui-stepper__step{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; position:relative; }
.ui-stepper__dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; font-family:var(--font-mono); flex:none; z-index:1;
  background:var(--slate-soft); color:var(--muted); border:2px solid var(--slate-soft);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.ui-stepper__label{ font-size:12px; font-weight:600; color:var(--muted); max-width:100px; }
.ui-stepper__conn{ position:absolute; top:13px; inset-inline-start:calc(-50% + 13px); width:calc(100% - 26px); height:2px; background:var(--slate-soft); z-index:0; }
.ui-stepper__step:first-child .ui-stepper__conn{ display:none; }

.ui-stepper__step--done .ui-stepper__dot{ background:var(--primary); border-color:var(--primary); color:#fff; }
.ui-stepper__step--done .ui-stepper__label{ color:var(--ink); }
.ui-stepper__step--done .ui-stepper__conn{ background:var(--primary); }

/* current = كهرماني متوهّج (وليس أزرق) — يميّز "بانتظار إجراء" عن "منجز فعلاً".
   راجع الستيبر الموحّد T2 (2026-07-31) الذي يحلّ محل rsx-steps/sh-tl-v2. */
.ui-stepper__step--current .ui-stepper__dot{ background:var(--waiting-soft); border-color:var(--waiting); color:var(--waiting); box-shadow:0 0 0 4px var(--waiting-soft); animation:ui-stepper-pulse 2.2s ease-in-out infinite; }
.ui-stepper__step--current .ui-stepper__label{ color:var(--waiting); font-weight:700; }
@keyframes ui-stepper-pulse{ 0%,100%{ box-shadow:0 0 0 4px var(--waiting-soft); } 50%{ box-shadow:0 0 0 7px transparent; } }

/* late = نفس "current" لكن عالق أكثر من المهلة (30د) — أحمر بدل كهرماني */
.ui-stepper__step--late .ui-stepper__dot{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); animation:ui-stepper-pulse-late 1.6s ease-in-out infinite; }
.ui-stepper__step--late .ui-stepper__label{ color:var(--danger); font-weight:700; }
@keyframes ui-stepper-pulse-late{ 0%,100%{ box-shadow:0 0 0 4px var(--danger-soft); } 50%{ box-shadow:0 0 0 7px transparent; } }

.ui-stepper__step--cancelled .ui-stepper__dot{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.ui-stepper__step--cancelled .ui-stepper__label{ color:var(--danger); }

.ui-stepper__badge{ display:inline-flex; align-items:center; gap:6px; background:var(--primary-soft); color:var(--primary-deep); font-size:12px; font-weight:700; padding:4px 12px; border-radius:100px; white-space:nowrap; }

@media (max-width:576px){
  .ui-stepper{ overflow-x:auto; justify-content:flex-start; }
  .ui-stepper__label{ font-size:11px; max-width:64px; }
}

/* ── Stepper action bar — "الإجراء التالي" أسفل الستيبر (وضع المسؤول فقط) ── */
.ui-stepper-action{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--waiting-soft); border:1px solid var(--waiting-line); border-radius:var(--r-sm); padding:10px 14px; margin-top:14px; }
.ui-stepper-action--late{ background:var(--danger-soft); border-color:var(--danger); }
.ui-stepper-action__label{ font-size:12px; font-weight:700; color:var(--waiting); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ui-stepper-action--late .ui-stepper-action__label{ color:var(--danger); }
.ui-stepper-action__btn{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--waiting-line); color:var(--waiting); font:inherit; font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:var(--r-sm); cursor:pointer; text-decoration:none; }
.ui-stepper-action__btn:hover{ filter:brightness(.97); }
.ui-stepper-action__btn i{ font-size:11px; }
.ui-stepper-action__hint{ font-size:11.5px; color:var(--muted); }

/* ── Tabs ── */
.ui-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; }
.ui-tabs__tab{
  appearance:none; background:transparent; border:none; border-bottom:2px solid transparent;
  padding:10px 4px; margin-inline-end:20px; font-size:14px; font-weight:600; color:var(--muted);
  cursor:pointer; white-space:nowrap; font-family:inherit;
}
.ui-tabs__tab:hover{ color:var(--ink); }
.ui-tabs__tab.is-active{ color:var(--primary-deep); border-bottom-color:var(--primary); }

/* ── Timeline ── */
.ui-timeline{ list-style:none; margin:0; padding:0; }
.ui-timeline__item{ position:relative; padding-inline-start:24px; padding-bottom:18px; }
.ui-timeline__item::before{ content:''; position:absolute; inset-inline-start:4px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--primary); border:2px solid var(--primary-soft); }
.ui-timeline__item::after{ content:''; position:absolute; inset-inline-start:8px; top:16px; bottom:0; width:1px; background:var(--line); }
.ui-timeline__item:last-child::after{ display:none; }
.ui-timeline__meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:2px; }
.ui-timeline__time{ font-family:var(--font-mono); }
.ui-timeline__desc{ font-size:13.5px; color:var(--ink); }
.ui-timeline__change{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:2px 8px; margin-inline-start:4px; }

/* ── Patient band ── */
.ui-patient-band{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
}
.ui-patient-band__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; background:var(--primary-soft); }
.ui-patient-band__body{ flex:1; min-width:160px; }
.ui-patient-band__name{ font-size:15.5px; font-weight:700; color:var(--ink); margin:0 0 4px; }
.ui-patient-band__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ui-patient-band__chip{ font-size:11.5px; color:var(--muted); background:var(--paper); border-radius:100px; padding:2px 10px; font-family:var(--font-mono); }
.ui-patient-band__actions{ display:flex; gap:8px; flex:none; }

/* ── WhatsApp message card ── */
.ui-wa-message{ display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; }
.ui-wa-message__icon{ width:34px; height:34px; border-radius:50%; background:#E7F9EE; color:#25D366; display:flex; align-items:center; justify-content:center; flex:none; }
.ui-wa-message__body{ flex:1; min-width:0; }
.ui-wa-message__title{ font-size:13.5px; font-weight:700; color:var(--ink); margin:0 0 2px; }
.ui-wa-message__phone{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }
.ui-wa-message__link{ display:inline-block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; font-family:var(--font-mono); font-size:12px; color:var(--info); }
.ui-wa-message__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px; }
.ui-wa-message__time{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }

/* ── Accordion (collapsible section, T2 2026-07-31) ── */
.ui-accordion{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:14px; }
.ui-accordion__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; background:transparent; border:none; border-bottom:1px solid transparent;
  font:inherit; color:inherit; cursor:pointer; text-align:inherit; transition:background .15s ease;
}
.ui-accordion__head:hover{ background:var(--paper); }
.ui-accordion.is-open .ui-accordion__head{ border-bottom-color:var(--line-soft); background:var(--paper); }
.ui-accordion__title{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px; }
.ui-accordion__title i{ color:var(--primary); font-size:15px; }
.ui-accordion__right{ display:flex; align-items:center; gap:10px; flex:none; }
.ui-accordion__count{ background:var(--slate-soft); color:var(--muted); border-radius:7px; padding:1px 9px; font-size:12px; font-weight:700; font-family:var(--font-mono); }
.ui-accordion__chevron{ width:16px; height:16px; color:var(--muted); transition:transform .25s ease; flex:none; }
.ui-accordion.is-open .ui-accordion__chevron{ transform:rotate(180deg); }
.ui-accordion__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.ui-accordion.is-open .ui-accordion__body{ grid-template-rows:1fr; }
.ui-accordion__inner{ overflow:hidden; min-height:0; }
.ui-accordion__pad{ padding:14px 18px; max-height:560px; overflow-y:auto; }
@media (prefers-reduced-motion:reduce){
  .ui-accordion__body, .ui-accordion__chevron{ transition:none; }
  .ui-stepper__step--current .ui-stepper__dot,
  .ui-stepper__step--late .ui-stepper__dot{ animation:none; }
}

/* ── Stat card (KPI) ── */
.ui-stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.ui-stat-card__label{ font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:8px; }
.ui-stat-card__value{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--ink); line-height:1; }
.ui-stat-card__trend{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; margin-inline-start:8px; font-family:var(--font-mono); }
.ui-stat-card__trend--up{ color:var(--success); }
.ui-stat-card__trend--down{ color:var(--danger); }

/* ── Doctor card ── */
.ui-doctor-card{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; text-decoration:none; color:inherit; transition:box-shadow .15s ease, border-color .15s ease; }
.ui-doctor-card:hover{ box-shadow:var(--shadow); border-color:var(--primary-soft); }
.ui-doctor-card__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; background:var(--primary-soft); }
.ui-doctor-card__name{ font-size:14px; font-weight:700; color:var(--ink); margin:0; }
.ui-doctor-card__specialty{ font-size:12.5px; color:var(--muted); }
.ui-doctor-card__follow{ margin-inline-start:auto; }

/* ── Empty state ── */
.ui-empty-state{ text-align:center; padding:40px 20px; color:var(--muted); }
.ui-empty-state__icon{ font-size:30px; color:var(--slate); margin-bottom:10px; }
.ui-empty-state__title{ font-size:14.5px; font-weight:700; color:var(--ink); margin:0 0 4px; }
.ui-empty-state__desc{ font-size:13px; color:var(--muted); margin:0; }

@media (prefers-reduced-motion: reduce){
  .ui-scope *{ transition:none !important; animation:none !important; }
}

/* ══════════════════════════════════════════════════════════
   T1 (2026-08-01) — قائمة الحجوزات (reservations/index): toolbar،
   تنبيه العاجل، تبديل النطاق، شريط المراحل، بطاقة إحصاء/فلتر،
   صف حجز. راجع resources/views/components/ui/*.blade.php.
══════════════════════════════════════════════════════════ */

/* ── Stat card — وضع الفلتر القابل للنقر (يضيف فوق KPI الثابت أعلاه) ── */
.ui-stat-card--link{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  border-inline-end:3px solid var(--sc, var(--line));
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ui-stat-card--link:hover{ box-shadow:var(--shadow); border-color:var(--sc, var(--primary)); text-decoration:none; }
.ui-stat-card--link .ui-stat-card__label i{ color:var(--sc, var(--primary)); }
.ui-stat-card--link.is-active{
  background:color-mix(in srgb, var(--sc, var(--primary)) 8%, var(--surface));
  border-color:var(--sc, var(--primary));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sc, var(--primary)) 22%, transparent);
}
.ui-stat-card--link.is-active .ui-stat-card__value{ color:var(--sc, var(--primary)); }
.ui-stat-card--link.is-zero{ opacity:.6; }
.ui-stat-card--link.is-zero .ui-stat-card__value{ color:var(--slate); }
.ui-stat-card--urgent{ border-color:var(--danger); }
.ui-stat-card--urgent .ui-stat-card__label i{ color:var(--danger); }
.ui-stat-card--urgent .ui-stat-card__value{ color:var(--danger); }
.ui-stat-card--urgent.is-active{
  background:var(--danger-soft);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

/* ── Stage chips (شريط مرحلة المعالجة) ── */
.ui-stage-chips{ display:flex; gap:9px; overflow-x:auto; padding:2px 2px 6px; }
.ui-stage-chip{
  display:inline-flex; align-items:center; gap:8px; flex:none; white-space:nowrap;
  padding:8px 14px; border-radius:100px; font-size:12.5px; font-weight:700;
  border:1.5px solid var(--line); background:var(--surface); color:var(--muted); text-decoration:none;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.ui-stage-chip:hover{ border-color:var(--sc, var(--primary)); color:var(--sc, var(--primary)); text-decoration:none; }
.ui-stage-chip i{ font-size:11px; color:var(--sc, var(--slate)); }
.ui-stage-chip__cnt{ background:var(--paper); color:var(--muted); border-radius:100px; padding:1px 9px; font-size:11.5px; font-weight:800; font-family:var(--font-mono); }
.ui-stage-chip.is-active{ background:color-mix(in srgb, var(--sc, var(--primary)) 12%, var(--surface)); border-color:var(--sc, var(--primary)); color:var(--sc, var(--primary)); }
.ui-stage-chip.is-active .ui-stage-chip__cnt{ background:var(--surface); color:var(--sc, var(--primary)); }
@media (max-width:576px){ .ui-stage-chips{ gap:7px; } .ui-stage-chip{ padding:7px 11px; font-size:12px; } }

/* ── Scope toggle (segmented — كل الحجوزات / نطاق فرعي / بقية الحجوزات) ── */
.ui-scope-toggle{ display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:3px; gap:2px; flex-wrap:wrap; }
.ui-scope-toggle__opt{
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:100px;
  font-size:12.5px; font-weight:700; color:var(--muted); text-decoration:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ui-scope-toggle__opt:hover{ color:var(--ink); text-decoration:none; }
.ui-scope-toggle__opt.is-active{ background:var(--surface); color:var(--primary-deep); box-shadow:var(--shadow-sm); }
@media (max-width:576px){ .ui-scope-toggle{ width:100%; } .ui-scope-toggle__opt{ flex:1; justify-content:center; padding:7px 8px; white-space:normal; text-align:center; line-height:1.3; } }

/* ── Urgent banner (تنبيه العاجل — حجوزات متأخرة عن ردّ الطبيب) ── */
.ui-urgent-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--danger-soft); border:1.5px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius:var(--r-sm); padding:11px 16px; margin-bottom:14px;
}
.ui-urgent-banner__icon{ width:32px; height:32px; border-radius:50%; background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; font-size:14px; }
.ui-urgent-banner__text{ flex:1; min-width:180px; font-size:12.5px; font-weight:700; color:var(--danger); }
.ui-urgent-banner__action{ flex:none; }
@media (max-width:576px){ .ui-urgent-banner{ padding:10px 12px; } .ui-urgent-banner__action{ width:100%; } .ui-urgent-banner__action .ui-btn{ width:100%; } }

/* ── Toolbar (بحث + فلاتر + تصدير) ── */
.ui-toolbar{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.ui-toolbar__search{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:5px 6px 5px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.ui-toolbar__search:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.ui-toolbar__search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; color:var(--ink); padding:9px 0; }
.ui-toolbar__search-icon{ color:var(--slate); font-size:13px; flex:none; }
.ui-toolbar__search-btn{ display:inline-flex; align-items:center; gap:6px; flex:none; white-space:nowrap; border:0; border-radius:var(--r-sm); padding:9px 18px; cursor:pointer; font:inherit; background:var(--primary); color:#fff; font-size:12.5px; font-weight:700; }
.ui-toolbar__search-btn:hover{ background:var(--primary-deep); }
.ui-toolbar__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ui-toolbar__filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ui-toolbar__filters select{ padding:7px 12px; border-radius:8px; border:1.5px solid var(--line); font-size:12.5px; background:var(--paper); color:var(--ink); font:inherit; outline:none; max-width:100%; }
.ui-toolbar__filters select:focus{ border-color:var(--primary); }
.ui-toolbar__export{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:9px; font-size:12px; font-weight:700; text-decoration:none; background:var(--success-soft); color:var(--success); border:1.5px solid color-mix(in srgb, var(--success) 35%, transparent); }
.ui-toolbar__export:hover{ background:var(--success); color:#fff; text-decoration:none; }
@media (max-width:576px){ .ui-toolbar__search-btn span{ display:none; } .ui-toolbar__row{ flex-direction:column; align-items:stretch; } }

/* ── Reservation row (x-ui.res-row) ── */
.ui-res-row{
  position:relative; display:flex; align-items:flex-start; gap:12px;
  background:var(--surface); border:1.5px solid var(--line); border-inline-start:4px solid var(--sc, var(--line));
  border-radius:var(--r-sm); padding:13px 15px;
}
.ui-res-row[data-status="success"]{ --sc:var(--success); }
.ui-res-row[data-status="waiting"]{ --sc:var(--waiting); }
.ui-res-row[data-status="danger"]{ --sc:var(--danger); }
.ui-res-row[data-status="disabled"]{ --sc:var(--muted); } /* T4: --slate فشل تباين AA لنص صغير (~2.2:1)، --muted يعطي ~8.9:1 */
.ui-res-row[data-status="info"]{ --sc:var(--info); }
.ui-res-row:hover{ box-shadow:var(--shadow); }
.ui-res-row__body{ flex:1; min-width:0; }
.ui-res-row__top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ui-res-row__name-link{ text-decoration:none; color:inherit; }
.ui-res-row__name-link::after{ content:''; position:absolute; inset:0; z-index:1; } /* stretched-link: يجعل الصف كلّه قابلاً للنقر بلا تعشيش <a> داخل <a> */
.ui-res-row__name{ font-size:13.5px; font-weight:800; color:var(--ink); }
.ui-res-row__id{ font-size:11px; color:var(--slate); }
.ui-res-row__meta{ font-size:12px; color:var(--muted); }
.ui-res-row__time{ font-size:11px; color:var(--sc, var(--muted)); font-weight:700; margin-top:3px; display:flex; align-items:center; gap:5px; }
.ui-res-row__actions{ position:relative; z-index:2; display:flex; align-items:center; gap:6px; flex:none; }
.ui-res-row__iconbtn{ width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line); color:var(--muted); text-decoration:none; }
.ui-res-row__iconbtn:hover{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary-deep); text-decoration:none; }
.ui-res-row__iconbtn--wa{ color:#25D366; }
.ui-res-row__iconbtn--wa:hover{ background:#E7F9EE; border-color:#25D366; color:#1EBE57; }
.ui-res-row__iconbtn--toggle{ font: inherit; cursor:pointer; }
.ui-res-row__iconbtn--toggle i{ transition:transform .2s ease; }
.ui-res-row__iconbtn--toggle.active{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary-deep); }
.ui-res-row__iconbtn--toggle.active i{ transform:rotate(180deg); }
@media (max-width:576px){ .ui-res-row{ flex-wrap:wrap; } .ui-res-row__actions{ width:100%; justify-content:flex-end; margin-top:8px; } }

/* ── T4 (2026-08-02): تركيز وحركة — هذه المكوّنات تُستخدَم في reservations/index
   خارج غلاف .ui-scope (مثل x-ui.accordion/x-ui.stepper-action)، فتحتاج قواعدها
   الخاصة بدل الاعتماد على ".ui-scope :focus-visible" العامة. ── */
.ui-stat-card--link:focus-visible,
.ui-stage-chip:focus-visible,
.ui-scope-toggle__opt:focus-visible,
.ui-toolbar__search input:focus-visible,
.ui-toolbar__search-btn:focus-visible,
.ui-toolbar__export:focus-visible,
.ui-toolbar__filters select:focus-visible,
.ui-res-row__name-link:focus-visible,
.ui-res-row__iconbtn:focus-visible,
.ui-urgent-banner .ui-btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:6px;
}
/* stretched-link (.ui-res-row__name-link::after) يغطي الصف كاملاً بصرياً؛ التركيز
   يظهر على حلقة الاسم نفسها فقط — سلوك متوقَّع، العنصر الفعلي القابل للتركيز أصغر من مساحة النقر */

@media (prefers-reduced-motion:reduce){
  .ui-stat-card--link,
  .ui-stage-chip,
  .ui-scope-toggle__opt,
  .ui-toolbar__search,
  .ui-toolbar__search-btn,
  .ui-toolbar__export,
  .ui-res-row,
  .ui-res-row__iconbtn,
  .ui-res-row__iconbtn--toggle i{ transition:none; }
}