/* ==========================================================================
   components.css — مكتبة المكوّنات
   كل مكوّن معرَّف مرّة واحدة فقط. لا !important إلا في حالات نادرة موثّقة.
   جميع الخصائص الاتجاهية منطقية (inline-start/end) لدعم RTL دون حيَل.
   ========================================================================== */

/* --------------------------------------------------------------------------
   البطاقات
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-5);
  position: relative;
}
.card--flush { padding: 0; overflow: hidden; }
.card--glass {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: var(--border-strong);
}
.card--quiet { box-shadow: none; background: var(--surface-2); }

.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding-block-end: var(--sp-3);
  margin-block-end: var(--sp-4);
  border-block-end: var(--border-w) solid var(--border);
}
.card__title { font-size: var(--text-lg); display: flex; align-items: center; gap: var(--sp-2); }
.card__title svg { color: var(--brand); flex: none; }
.card__hint { font-size: var(--text-sm); color: var(--text-2); margin-block-start: var(--sp-1); }

/* --------------------------------------------------------------------------
   الأزرار
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  border: var(--border-w) solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { flex: none; }

.btn--primary {
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}
.btn--primary:hover:not(:disabled) { background: var(--brand-strong); }

.btn--ghost {
  background: transparent; color: var(--text-2); border-color: var(--border);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--surface-hover); color: var(--text); border-color: var(--border-strong);
}

.btn--soft { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--brand-border); }
.btn--soft:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 22%, transparent); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.92); }
.btn--danger-soft { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 34%, transparent); }
.btn--danger-soft:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 20%, transparent); }

.btn--whatsapp { background: var(--whatsapp); color: #06331b; }
.btn--whatsapp:hover:not(:disabled) { background: var(--whatsapp-dark); color: #fff; }

.btn--sm { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn--lg { min-height: 54px; padding: 0 var(--sp-8); font-size: var(--text-lg); border-radius: var(--r-lg); }
.btn--block { width: 100%; }
.btn--icon-only { padding: 0; width: var(--tap-min); }

.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--on-brand);
  animation: spin 0.7s linear infinite;
}

/* زر أيقونة دائري */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-full);
  color: var(--text-2);
  background: transparent;
  border: var(--border-w) solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  flex: none;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.icon-btn--active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-border); }

/* --------------------------------------------------------------------------
   الحقول
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.field__label {
  font-size: var(--text-sm); font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; gap: var(--sp-2);
}
.field__label .req { color: var(--danger); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  color: var(--text);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--text-md);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field__textarea { min-height: 110px; resize: vertical; line-height: var(--leading-normal); }

.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-3); opacity: 1; }

.field__input:hover,
.field__select:hover,
.field__textarea:hover { border-color: var(--border-strong); }

.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field__input:disabled,
.field__select:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }

.field__input[aria-invalid='true'] { border-color: var(--danger); }
.field__error { font-size: var(--text-xs); color: var(--danger); font-weight: 600; }
.field__hint  { font-size: var(--text-xs); color: var(--text-3); }

/* سهم القائمة: SVG مضمّن — أوضح وأدق من حيلة التدرّجات المائلة،
   وموضعه منطقي فيظهر على الجانب الصحيح في RTL و LTR معاً. */
.field__select {
  appearance: none;
  padding-inline-end: calc(var(--sp-4) + 20px);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238494b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left var(--sp-4) center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}
[dir='ltr'] .field__select { background-position: right var(--sp-4) center; }
/* التقويم الأصلي يظهر بالأبيض على خلفية داكنة — نعكسه في الوضع الداكن فقط */
[data-theme='dark'] input[type='date']::-webkit-calendar-picker-indicator { filter: invert(0.85); }

/* حقل بأيقونة داخلية */
.input-group { position: relative; display: flex; align-items: center; width: 100%; }
.input-group__icon {
  position: absolute; inset-inline-start: var(--sp-3);
  color: var(--text-3); pointer-events: none; display: flex;
}
.input-group .field__input { padding-inline-start: calc(var(--sp-4) + 22px); }
.input-group__clear {
  position: absolute; inset-inline-end: var(--sp-2);
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: none; align-items: center; justify-content: center;
  color: var(--text-3);
}
.input-group__clear:hover { background: var(--surface-3); color: var(--text); }
.input-group.has-value .input-group__clear { display: flex; }

/* مفتاح تبديل */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; min-height: var(--tap-min); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 46px; height: 26px; border-radius: var(--r-full);
  background: var(--surface-3); border: var(--border-w) solid var(--border);
  position: relative; transition: background var(--dur-base), border-color var(--dur-base); flex: none;
}
.switch__track::after {
  content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-3); transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base);
}
.switch input:checked + .switch__track { background: var(--brand-soft); border-color: var(--brand-border); }
.switch input:checked + .switch__track::after { transform: translateX(-20px); background: var(--brand); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--border-focus); outline-offset: 2px; }

/* مربع اختيار */
.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; min-height: 32px; font-size: var(--text-sm); }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  width: 22px; height: 22px; border-radius: var(--r-xs); flex: none;
  border: 2px solid var(--border-strong); background: var(--surface-2);
  display: grid; place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.checkbox__box::after {
  content: ''; width: 11px; height: 6px;
  border: 2px solid var(--on-brand); border-block-start: 0; border-inline-end: 0;
  transform: rotate(-45deg) scale(0); transition: transform var(--dur-fast) var(--ease-spring);
}
.checkbox input:checked + .checkbox__box { background: var(--brand); border-color: var(--brand); }
.checkbox input:checked + .checkbox__box::after { transform: rotate(-45deg) scale(1); }
.checkbox input:focus-visible + .checkbox__box { outline: 3px solid var(--border-focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   الشارات والوسوم
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--text-2xs); font-weight: 800;
  background: var(--surface-3); color: var(--text-2);
  border: var(--border-w) solid var(--border);
  white-space: nowrap;
}
.badge--ok      { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 32%, transparent); }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.badge--caution { background: var(--accent-soft);  color: var(--accent);  border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.badge--info    { background: var(--info-soft);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 32%, transparent); }
.badge--brand   { background: var(--brand-soft);   color: var(--brand);   border-color: var(--brand-border); }
.badge--count   { min-width: 24px; justify-content: center; font-variant-numeric: tabular-nums; }
.badge--lg      { font-size: var(--text-xs); padding: 5px var(--sp-3); }

/* رقاقة فلترة */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2);
  border: var(--border-w) solid var(--border);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip:hover { background: var(--surface-hover); color: var(--text); }
/* تباين مصحّح: النسخة القديمة كانت أبيض على فيروزي فاتح ≈ 1.9:1 */
.chip[aria-pressed='true'] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.chip__count {
  font-size: var(--text-2xs); padding: 1px 6px; border-radius: var(--r-full);
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-variant-numeric: tabular-nums;
}

.chip-row {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  padding-block: var(--sp-1); scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   النوافذ المنبثقة
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--sp-4);
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in var(--dur-base) var(--ease-out);
  overflow-y: auto;
}
.modal.is-leaving { animation: fade-out var(--dur-base) var(--ease-out) forwards; }

.modal__panel {
  width: 100%; max-height: calc(100svh - var(--sp-8));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  animation: pop-in var(--dur-slow) var(--ease-spring);
  overflow: hidden;
}
.modal__panel--sm { max-width: 430px; }
.modal__panel--md { max-width: 620px; }
.modal__panel--lg { max-width: 940px; }
.modal.is-leaving .modal__panel { animation: fade-out var(--dur-fast) forwards; }

.modal__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: var(--border-w) solid var(--border);
  background: var(--surface-2);
  flex: none;
}
.modal__title { font-size: var(--text-lg); margin: 0; }
.modal__body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; }
.modal__footer {
  display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-block-start: var(--border-w) solid var(--border);
  background: var(--surface-2);
  flex: none;
}
.modal__footer .btn { flex: 1 1 auto; max-width: 200px; }
.modal__message { font-size: var(--text-md); line-height: var(--leading-loose); margin: 0; }
.modal__hint { font-size: var(--text-sm); color: var(--text-2); margin-block-start: var(--sp-3); }

body.is-modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   الإشعارات
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed; z-index: var(--z-toast);
  inset-block-end: calc(var(--dock-h) + var(--sp-4));
  inset-inline: var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
@media (min-width: 640px) {
  .toast-stack { inset-inline-start: auto; inset-inline-end: var(--sp-5); align-items: flex-end; }
}

.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: min(460px, 100%);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-inline-start: 4px solid var(--brand);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: 600;
  animation: pop-in var(--dur-base) var(--ease-spring);
}
.toast.is-leaving { animation: fade-out var(--dur-base) forwards; }
.toast__icon { display: flex; flex: none; }
.toast__text { flex: 1 1 auto; line-height: 1.5; }
.toast__action {
  font-weight: 800; color: var(--brand); font-size: var(--text-xs);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); flex: none;
}
.toast__action:hover { background: var(--brand-soft); }
.toast__close { font-size: 1.3rem; line-height: 1; color: var(--text-3); padding: 0 var(--sp-1); flex: none; }
.toast__close:hover { color: var(--text); }

.toast--success { border-inline-start-color: var(--success); }
.toast--success .toast__icon { color: var(--success); }
.toast--error   { border-inline-start-color: var(--danger); }
.toast--error .toast__icon { color: var(--danger); }
.toast--warning { border-inline-start-color: var(--warning); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info    { border-inline-start-color: var(--info); }
.toast--info .toast__icon { color: var(--info); }

/* --------------------------------------------------------------------------
   نتائج البحث المنسدلة
   -------------------------------------------------------------------------- */
.suggest {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0;
  z-index: var(--z-sticky);
  max-height: min(52vh, 380px); overflow-y: auto;
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: rise-in-sm var(--dur-fast) var(--ease-out);
  padding: var(--sp-1);
}
.suggest:empty, .suggest[hidden] { display: none; }

.suggest__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; text-align: start;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.suggest__item:hover,
.suggest__item.is-active { background: var(--brand-soft); }
.suggest__item:focus-visible { outline-offset: -2px; }
.suggest__main { min-width: 0; }
.suggest__name { font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); }
.suggest__meta { font-size: var(--text-xs); color: var(--text-3); display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: 2px; }
.suggest__empty { padding: var(--sp-5); text-align: center; color: var(--text-3); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   بطاقات الإحصاء
   -------------------------------------------------------------------------- */
/* 148px تسمح بعمودين على شاشة 320 بكسل بدل عمود واحد شديد الطول. */
.stat-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
@media (min-width: 560px) {
  /* 170 لا 190: عند 834 بكسل (آيباد عمودي) تتّسع الأربع بطاقات في صف واحد. */
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (min-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.stat {
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
  position: relative; overflow: hidden;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.stat::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: var(--accent-line, var(--brand)); opacity: 0.85;
}
.stat--ok      { --accent-line: var(--success); }
.stat--warning { --accent-line: var(--warning); }
.stat--danger  { --accent-line: var(--danger); }
.stat--info    { --accent-line: var(--info); }

.stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.stat__label { font-size: var(--text-xs); font-weight: 700; color: var(--text-2); letter-spacing: 0.2px; }
.stat__value {
  font-family: var(--font-display); font-size: var(--text-stat); font-weight: 800;
  line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums;
}
.stat__desc { font-size: var(--text-xs); color: var(--text-3); }

button.stat { cursor: pointer; text-align: start; font: inherit; }
button.stat:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
button.stat[aria-pressed='true'] {
  border-color: var(--brand); background: var(--brand-soft);
}
button.stat[aria-pressed='true']::after {
  content: 'الفلتر مفعّل'; position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-3);
  font-size: var(--text-2xs); font-weight: 800; color: var(--brand);
}

/* شريط تقدّم */
.meter {
  height: 7px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden; margin-block-start: var(--sp-2);
}
.meter__fill {
  height: 100%; border-radius: inherit;
  background: var(--meter-color, var(--brand));
  transition: width var(--dur-slow) var(--ease-out), background var(--dur-base);
}
.meter--ok      { --meter-color: var(--success); }
.meter--warning { --meter-color: var(--warning); }
.meter--danger  { --meter-color: var(--danger); }

/* --------------------------------------------------------------------------
   بطاقة سجل التأخير
   -------------------------------------------------------------------------- */
.log-list { display: grid; gap: var(--sp-3); }
@media (min-width: 720px)  { .log-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .log-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1680px) { .log-list { grid-template-columns: repeat(4, 1fr); } }

.log-entry {
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-inline-start: 4px solid var(--tone-color, var(--success));
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  animation: slide-start var(--dur-base) var(--ease-out) both;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.log-entry:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.log-entry--ok      { --tone-color: var(--success); }
.log-entry--caution { --tone-color: var(--accent); }
.log-entry--warning { --tone-color: var(--warning); }
.log-entry--danger  { --tone-color: var(--danger); }
.log-entry.is-contacted { background: color-mix(in srgb, var(--success) 5%, var(--surface)); }

.log-entry__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.log-entry__name {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.log-entry__meta {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--text-3); margin-block-start: var(--sp-1);
}
.log-entry__meta b { color: var(--text-2); font-weight: 700; }
.log-entry__time { text-align: end; flex: none; }
.log-entry__duration {
  display: inline-block; font-weight: 800; font-size: var(--text-sm);
  color: var(--tone-color); font-variant-numeric: tabular-nums;
}
.log-entry__clock { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; direction: ltr; }
.log-entry__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
  padding-block-start: var(--sp-3); border-block-start: var(--border-w) solid var(--border);
}

/* --------------------------------------------------------------------------
   الحالات الفارغة
   -------------------------------------------------------------------------- */
.empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-5);
  text-align: center; color: var(--text-3);
}
.empty__icon {
  width: 60px; height: 60px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  color: var(--text-3);
}
.empty__title { font-family: var(--font-display); font-weight: 700; color: var(--text-2); font-size: var(--text-md); }
.empty__text { font-size: var(--text-sm); max-width: 40ch; }

/* --------------------------------------------------------------------------
   الجداول
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto; border: var(--border-w) solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
}
.table { width: 100%; font-size: var(--text-sm); }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: start; }
.table thead th {
  background: var(--surface-2); font-weight: 800; color: var(--text-2);
  font-size: var(--text-xs); white-space: nowrap;
  border-block-end: var(--border-w) solid var(--border);
  position: sticky; inset-block-start: 0; z-index: 1;
}
.table tbody tr { border-block-start: var(--border-w) solid var(--border); }
.table tbody tr:hover { background: var(--surface-2); }
.table td.num { font-variant-numeric: tabular-nums; }
.table .actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* --------------------------------------------------------------------------
   التبويبات
   -------------------------------------------------------------------------- */
.tabs {
  display: flex; gap: var(--sp-1); overflow-x: auto;
  padding: var(--sp-1); border-radius: var(--r-md);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; min-height: 42px; padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: 700; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tab:hover { color: var(--text); background: var(--surface-3); }
.tab[aria-selected='true'] {
  background: var(--surface); color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.tabpanel { animation: rise-in-sm var(--dur-base) var(--ease-out); }
.tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   الأفاتار
   -------------------------------------------------------------------------- */
.avatar {
  width: 40px; height: 40px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
  border: var(--border-w) solid var(--brand-border);
}
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--lg { width: 52px; height: 52px; font-size: var(--text-md); }

/* --------------------------------------------------------------------------
   شريط التنبيه (Banner)
   -------------------------------------------------------------------------- */
.banner {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--info-soft); color: var(--text);
  border: var(--border-w) solid color-mix(in srgb, var(--info) 30%, transparent);
  font-size: var(--text-sm);
}
.banner__icon { color: var(--info); flex: none; margin-block-start: 2px; }
.banner--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.banner--warning .banner__icon { color: var(--warning); }
.banner--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.banner--danger .banner__icon { color: var(--danger); }
.banner--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 32%, transparent); }
.banner--success .banner__icon { color: var(--success); }
.banner__body { flex: 1 1 auto; min-width: 0; }
.banner__title { font-weight: 800; margin-block-end: 2px; }

/* --------------------------------------------------------------------------
   مؤشر الاتصال
   -------------------------------------------------------------------------- */
.conn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700; color: var(--text-3);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  background: var(--surface-2); border: var(--border-w) solid var(--border);
}
.conn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.conn--offline { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.conn--offline .conn__dot { background: var(--warning); animation: soft-pulse 2s ease-in-out infinite; }
.conn--error { color: var(--danger); }
.conn--error .conn__dot { background: var(--danger); }

/* على الشاشات الضيّقة نُبقي النقطة الملوّنة فقط — المعنى يبقى في title/aria،
   والمساحة المحرّرة تكفي لعرض اسم المدرسة كاملاً بدل اقتطاعه. */
@media (max-width: 520px) {
  .conn { padding: var(--sp-2); }
  .conn__label { display: none; }
}

/* --------------------------------------------------------------------------
   قائمة قابلة للطي
   -------------------------------------------------------------------------- */
.disclosure { border: var(--border-w) solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.disclosure > summary {
  padding: var(--sp-3) var(--sp-4); cursor: pointer; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--tap-min); list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: ''; width: 8px; height: 8px; flex: none;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-base);
  color: var(--text-3);
}
.disclosure[open] > summary::after { transform: rotate(-135deg); }
.disclosure__body { padding: 0 var(--sp-4) var(--sp-4); }

/* ==========================================================================
   أجهزة اللمس (جوال / تابلت)
   الماوس دقيق، الإصبع لا. كل هدف تفاعلي يرتفع إلى 44 بكسل على الأقل —
   وهو الحد الموصى به في WCAG 2.5.5 وإرشادات آبل وجوجل معاً.
   يُطبَّق حسب نوع المؤشّر لا حسب عرض الشاشة، فالتابلت الكبير يستفيد أيضاً.
   ========================================================================== */
@media (pointer: coarse) {
  .btn--sm {
    min-height: 44px;
    padding-inline: var(--sp-4);
    font-size: var(--text-sm);
  }
  .chip { min-height: 44px; padding-inline: var(--sp-5); }
  .tab { min-height: 48px; }
  .icon-btn { width: 46px; height: 46px; }
  .checkbox { min-height: 44px; }
  .checkbox__box { width: 24px; height: 24px; }
  .switch { min-height: 48px; }
  .suggest__item { min-height: 56px; }
  .input-group__clear { width: 42px; height: 42px; }
  .modal__close { width: 46px; height: 46px; }
  .toast__close { min-width: 40px; min-height: 40px; }
  .spec-row { min-height: 60px; }

  /* الأزرار داخل بطاقة السجل تملأ العرض على الشاشات الضيّقة حتى لا تتراص */
  .log-entry__actions { gap: var(--sp-2); }
  .log-entry__actions .btn { flex: 1 1 auto; min-width: 132px; }

  /* لا تأثير تحويم على اللمس — يبقى الشكل عالقاً بعد الضغط */
  .log-entry:hover { transform: none; box-shadow: none; }
  button.stat:hover { transform: none; }
  .gate-btn:hover { transform: none; }
}

/* شاشات ضيّقة جداً: الأزرار تتكدّس عمودياً بدل أن تنضغط */
@media (max-width: 380px) {
  .log-entry__actions { flex-direction: column; align-items: stretch; }
  .log-entry__actions .btn,
  .log-entry__actions .checkbox { width: 100%; }
  .modal__footer { flex-direction: column-reverse; }
  .modal__footer .btn { width: 100%; max-width: none; }
}

/* --------------------------------------------------------------------------
   بطاقة التواصل مع المطوّر — تظهر بعد ثلاث محاولات دخول خاطئة
   -------------------------------------------------------------------------- */
/* بدون هذا السطر يتغلّب display:flex على السمة hidden فتظهر البطاقة فوراً. */
.dev-contact[hidden] { display: none; }
.dev-contact {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: var(--border-w) solid color-mix(in srgb, var(--accent) 38%, transparent);
  direction: ltr;
  text-align: center;
}
.dev-contact__label {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-2);
}
.dev-contact__name {
  font-size: var(--text-lg); font-weight: 800; letter-spacing: 0.05em;
  color: var(--accent);
}