/* ============================================================
   Component library — مكوّنات عامة قابلة لإعادة الاستعمال: الأزرار، النماذج
   والحقول، البطاقة (.card: النماذج والإعدادات فقط)، التنبيهات والتوست،
   الحالات الفارغة، الأفاتار، قائمة التفاصيل، الشريط الزمني، الرسوم،
   ورقة التأكيد، معالج التسجيل العام، صفحات الدخول.
   الصفوف والشارات والمربعات ولغة الصفحات (.rows/.item/.pill/.tiles/.hero/.sec)
   في ui.css؛ هذا الملف لا يعرّفها.

   Radius بالدور (tokens.css): chip 8 · control 12 · tile 16 · card 18 · lg 20 · sheet 24.
   ============================================================ */

/* ==================== Page structure ==================== */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.page-header__text {
  min-width: 0;
}

/* عنوان + سطر سياق تحته: أقرب من أي شيء آخر. */
.page-header__text .supporting-text {
  margin-top: var(--space-1);
}

.page-header__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.section {
  margin-bottom: var(--space-7);
}

.section:last-child {
  margin-bottom: 0;
}

.supporting-text a,
.meta-text a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* روابط ثانوية قائمة بذاتها ("سجل الجلسات السابقة"...) تأخذ هدف لمس كاملًا. */
.text-center > a.supporting-text {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
}

/* <details>/<summary> عبر التطبيق: صف إجراء هادئ بسهم يدور عند الفتح. */
.app-main summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  cursor: pointer;
  list-style: none;
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.app-main summary::-webkit-details-marker {
  display: none;
}

.app-main summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 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 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition-base);
}

.app-main details[open] > summary::after {
  transform: rotate(180deg);
}

/* ==================== Surfaces ==================== */

/* .card: a self-contained block of content. Prefer .list-group for lists and
   .section spacing for grouping — don't nest cards. */
.card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.card + .card {
  margin-top: var(--space-3);
}

.card--tint {
  background: var(--color-primary-soft);
  border-color: transparent;
}

/* ==================== Rows & lists ====================
   Use these instead of stacking full .card blocks for list items. */

/* .list-group يقصّ ما يخرج عن حدوده: حلقة التركيز تُرسم للداخل. */
.more-menu :is(a, button):focus-visible {
  outline-offset: -3px;
  border-radius: inherit;
}

/* أيقونة سياقية داخل صف (تنبيه، متابعة...). */
.row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.row-icon--danger { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.row-icon--warning { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.row-icon--info { background: var(--color-info-soft); color: var(--color-info-strong); }
.row-icon--muted { background: var(--color-fill); color: var(--color-text-muted); }

/* عدّاد بجانب صف ("3") — رقم واضح بلا زخرفة. */
.row-count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.row-count--primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* حقل بحث بأيقونة داخله بدل زر منفصل. */

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover {
    background: var(--color-primary-dark);
  }

  .btn--secondary:not(:disabled):hover {
    background: var(--color-surface-secondary);
  }

  .btn--ghost:not(:disabled):hover {
    background: color-mix(in srgb, var(--color-primary) 9%, transparent);
  }

  .btn--danger:not(:disabled):hover {
    background: var(--color-danger-hover);
  }

  .btn--danger-ghost:not(:disabled):hover {
    background: var(--color-danger-soft);
  }

  .icon-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  }

  .more-menu__row:hover {
    background: var(--color-surface-secondary);
  }

  .segmented-control__label:hover,
  .choice-pill__label:hover {
    color: var(--color-text);
  }

  .option-list__label:hover {
    background: var(--color-surface-secondary);
  }

  .file-upload:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
  }
}

/* ترقيم الصفحات: السابق ‹ صفحة x من y › التالي — ثابت العرض حتى لا يقفز الوسط. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pagination .btn,
.pagination__spacer {
  min-width: 88px;
}

/* ==================== Charts ====================
   بلا مكتبة: أعمدة CSS خالصة. على الهاتف الرسم "ملخّص + شكل" لا جدول:
   بلا تسمية لكل عمود (كانت تتراكب على 360px)؛ طرفا المدى فقط. */

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 88px;
}

.chart-bars__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.chart-bars__bar {
  width: 100%;
  max-width: 18px;
  min-height: 3px;
  border-radius: 4px 4px 1px 1px;
  background: var(--color-primary);
}

.chart-bars__bar--empty {
  background: var(--color-divider-solid);
}

.chart-bars__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.hbar-chart__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hbar-chart__row + .hbar-chart__row {
  margin-top: var(--space-3);
}

.hbar-chart__label {
  width: 72px;
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.hbar-chart__track {
  flex: 1;
  height: 8px;
  background: var(--color-divider-solid);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.hbar-chart__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.hbar-chart__value {
  width: 28px;
  flex-shrink: 0;
  text-align: end;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* بطاقة/كتلة اتجاهات: عنوان + رقم رئيسي + رسم، سطح واحد. */
.trend {
  padding: var(--space-4);
}

.trend__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.trend__title {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.trend__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ==================== Profile header ====================
   رأس الملف بلا سطح: هوية الشخص أولًا (من؟ أين؟ كيف حاله؟) ثم كل شيء آخر. */

/* ملخّص ملاحظات ولي الأمر: نص لا يُلمس (تحذير هادئ لا تنبيه أحمر). */
.card.cluster {
  display: flex;
}

.row-icon--primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* صف <details> داخل .list-group: العنوان بحجم صف عادي لا رابط إجراء صغير. */

.review-block {
  padding: var(--space-4);
}

/* ==================== Photo viewer ====================
   الضغط على صورة شخص (avatar() مع data-photo-full) يفتحها كبيرة — المنطق في app.js. */

.avatar[data-photo-full] {
  cursor: zoom-in;
}

button .avatar[data-photo-full] {
  cursor: inherit;
}

.avatar[data-photo-full]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 60; /* فوق الأوراق (30–50): قد تُفتح من ورقة «المزيد» */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-6) + var(--safe-top, 0px)) var(--gutter) calc(var(--space-6) + var(--safe-bottom));
  background: color-mix(in srgb, var(--palette-charcoal-dark) 92%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility 0s linear 200ms;
}

.photo-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transition-base), visibility 0s;
}

.photo-viewer__frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  transform: scale(.94);
  transition: transform var(--transition-sheet);
}

.photo-viewer.is-open .photo-viewer__frame {
  transform: scale(1);
}

.photo-viewer__img {
  display: block;
  max-width: min(100%, 560px);
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  border-radius: var(--radius-card);
  object-fit: contain;
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
}

.photo-viewer__name {
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.photo-viewer__close {
  position: absolute;
  top: calc(var(--space-4) + var(--safe-top, 0px));
  inset-inline-end: var(--gutter);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: color-mix(in srgb, #fff 16%, transparent);
  cursor: pointer;
}

.photo-viewer__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .photo-viewer,
  .photo-viewer__frame {
    transition: none;
  }
}

/* ==================== Avatar ====================
   دائرية للأشخاص. بلا صورة: الحرفان الأولان من الاسم (avatar() في helpers.php). */

.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  user-select: none;
}

.avatar[hidden] {
  display: none;
}

.avatar--sm { width: 40px; height: 40px; font-size: 15px; }
.avatar--md { width: 48px; height: 48px; font-size: 17px; }
.avatar--lg { width: 72px; height: 72px; font-size: 26px; }

/* ==================== Detail list / info rows ==================== */

.detail-list {
  display: flex;
  flex-direction: column;
}

.detail-list__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.detail-list__row + .detail-list__row {
  border-top: 1px solid var(--color-divider);
}

.detail-list__row:first-child { padding-top: 0; }
.detail-list__row:last-child { padding-bottom: 0; }

.detail-list__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.detail-list__value {
  font-weight: var(--font-weight-medium);
  text-align: end;
  min-width: 0;
  overflow-wrap: break-word;
}

/* ==================== Buttons ==================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  border: none;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-dark) 28%, transparent);
  transition: background-color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:active {
  background: var(--color-primary-dark);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  box-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* الثانوي: سطح أبيض بحدّ واضح — يُقرأ كزر دون أن ينافس الأساسي الممتلئ. */
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.btn--secondary:active {
  background: var(--color-surface-secondary);
}

/* ثالثي: نص أخضر بلا خلفية (إجراء هادئ لا ينافس الأساسي). */
.btn--ghost {
  background: transparent;
  color: var(--color-primary-dark);
  box-shadow: none;
}

.btn--ghost:active {
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.btn--danger {
  background: var(--color-danger);
  box-shadow: none;
}

.btn--danger:active {
  background: var(--color-danger-hover);
}

.btn--danger-ghost {
  background: transparent;
  color: var(--color-danger);
  box-shadow: none;
}

.btn--danger-ghost:active {
  background: var(--color-danger-soft);
}

.btn--auto {
  width: auto;
}

.btn--sm {
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
}

/* هدف اللمس 44px حتى في الزر الصغير، دون تضخيم شكله. */
.btn--sm::before {
  content: '';
  position: absolute;
  inset: -2px 0;
}

/* Loading: الزر يحتفظ بعرضه، النص يختفي ويظهر مؤشر دوّار (app.js يضيف .is-loading). */
.btn.is-loading {
  color: transparent;
  pointer-events: none;
  opacity: 1;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  animation: spin 700ms linear infinite;
}

.btn--secondary.is-loading::after,
.btn--danger-ghost.is-loading::after {
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-top-color: var(--color-primary);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-sage-soft);
  color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.icon-btn:active {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
}

.button-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.button-group > .btn,
.button-group > form {
  flex: 1;
  min-width: 140px;
}

.button-group > form > .btn {
  width: 100%;
}

/* شريط إجراء ثابت فوق الشريط السفلي: الزر "يطفو" على تدرّج من لون الخلفية —
   بلا صندوق ولا حدّ — ويبقى تحت الإبهام دائمًا. */
.sticky-actions {
  z-index: 15;
  position: sticky;
  bottom: calc(var(--bottomnav-height) + var(--safe-bottom));
  margin: var(--space-6) calc(var(--gutter) * -1) 0;
  padding: var(--space-3) var(--gutter) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: 0 -1px 0 var(--color-hairline), 0 -14px 26px -20px color-mix(in srgb, var(--palette-forest-dark) 40%, transparent);
  pointer-events: auto;
}

.sticky-actions > * {
  pointer-events: auto;
}

/* ==================== Forms ==================== */

/* النموذج = مجموعات بالمعنى (الأساسية · التنظيم · التفاصيل) على الخلفية مباشرة: لا بطاقة لكل مجموعة (docs/product-ux-reset.md).
   الحقول نفسها أسطح بيضاء بحدّ واضح، والمجموعات تُفصل بمسافة وخط رفيع وعنوان بوزن كافٍ. */
.form-section {
  margin-bottom: var(--space-6);
}

.form-section:last-of-type {
  margin-bottom: 0;
}

.form-section + .form-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}

/* البطاقة داخل مجموعة نموذج (أو حول مجموعات) تصير شفافة: البطاقة للتأكيد لا للهيكل. */
.form-section > .card,
.card:has(> .form-section) {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

fieldset.form-section {
  min-width: 0;
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
}

fieldset.form-section + fieldset.form-section {
  padding-top: var(--space-5);
}

fieldset.form-section > legend.form-section__title {
  float: none;
  width: 100%;
  padding: 0;
}

.form-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

.field + .field {
  margin-top: var(--space-4);
}

/* زر بعد حقول: مسافة أكبر من المسافة بين الحقول (مجموعة → إجراء). */
.field + .btn,
.field + .form-actions,
.field + .button-group {
  margin-top: var(--space-6);
}

.field__required {
  color: var(--color-danger);
  margin-inline-start: 2px;
}

.field__help {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-field-border);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

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

.field__textarea {
  min-height: 104px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  line-height: var(--line-height-normal);
}

/* The browser forces tel/date inputs to LTR, which pins their text to the
   left edge while every other control in the RTL form starts on the right.
   Keep the LTR digit order but align to the same edge as the rest. */
.field__input[type="tel"],
.field__input[type="date"],
.field__input[type="number"],
.field__input[inputmode="numeric"] {
  text-align: end;
}

.field__input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
}

/* Native select: draw our own chevron so the value lines up exactly with
   sibling inputs (same 16px inline padding) on every browser. */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: calc(var(--space-4) + 24px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-4) center;
  text-overflow: ellipsis;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.field__input:disabled,
.field__select:disabled,
.field__textarea:disabled,
.field__input[readonly] {
  background: var(--color-fill);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* حالة الخطأ: تظهر تلقائيًا متى وُجدت رسالة .field__error داخل الحقل. */
.field:has(.field__error) .field__input,
.field:has(.field__error) .field__select,
.field:has(.field__error) .field__textarea,
.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__textarea {
  border-color: var(--color-danger);
}

.field:has(.field__error) .field__input:focus,
.field:has(.field__error) .field__select:focus,
.field:has(.field__error) .field__textarea:focus,
.field.is-invalid .field__input:focus,
.field.is-invalid .field__select:focus,
.field.is-invalid .field__textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 16%, transparent);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-danger-strong);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* الملء التلقائي للمتصفح بلا لون أصفر/أزرق دخيل. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 100px var(--color-surface) inset;
  transition: background-color 9999s ease-out;
}

.field-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.field-row > .field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.field-row > .field__input {
  flex: 1;
  min-width: 0;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-target-min);
  padding: var(--space-2) 0;
}

.checkbox-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.checkbox-row label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* File upload: <label> wrapping a visually-hidden input — the browser's own
   file button (English, system font, no RTL) never renders. */
.file-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-field-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.file-upload:active {
  background: var(--color-surface-secondary);
}

.file-upload:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.file-upload__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-actions {
  margin-top: var(--space-6);
}

/* Segmented control — تعبئة رمادية هادئة بمقطع مختار مرتفع (شكل iOS بلا تقليده):
   حالة الحضور تلوّن المقطع المختار وتبقى تسميته النصية حاضرة (لا لون وحده). */
.segmented-control {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-control);
  background: var(--color-fill);
}

.segmented-control__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.segmented-control__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 42px;
  padding: 0 var(--space-1);
  border-radius: 9px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.segmented-control__input:checked + .segmented-control__label {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.segmented-control__label:active,
.choice-pill__label:active {
  opacity: 0.7;
}

.option-list__label:active {
  background: var(--color-surface-secondary);
}

.segmented-control__input:focus-visible + .segmented-control__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.segmented-control__input--present:checked + .segmented-control__label {
  background: var(--color-success-solid); color: #fff; box-shadow: none;
}
.segmented-control__input--absent:checked + .segmented-control__label {
  background: var(--color-danger); color: #fff; box-shadow: none;
}

/* ==================== Attendance ====================
   صف واحد لكل طالب (الاسم + حالته الحالية). الافتراضي "حاضر" — لمس الصف يفتح
   خيارات الحالة الأربع تحته؛ أغلب الطلاب بلا أي لمسة، والاستثناء بلمستين.
   بدون JS تبقى الخيارات ظاهرة دائمًا (تحسين تدريجي). */

.att-row {
  transition: background-color var(--transition-fast);
}

.att-row.is-open {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

/* ==================== Alerts / Toast ==================== */

.alert {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.alert > svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.alert + .alert,
.alert + .card,
.card + .alert {
  margin-top: var(--space-3);
}

.alert--danger { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.alert--success { background: var(--color-success-soft); color: var(--color-success-strong); }
.alert--info { background: var(--color-info-soft); color: var(--color-info-strong); }
.alert--warning { background: var(--color-warning-soft); color: var(--color-warning-strong); }

@media (prefers-reduced-motion: no-preference) {
  .alert { animation: app-fade-down 200ms var(--ease-out) both; }
}

/* Toast: كبسولة داكنة صغيرة داخل نطاق الشريط العلوي (فلا تغطي العنوان ولا أزرار
   الحفظ ولا الشريط السفلي، وتبقى تحت الـnotch)، تختفي وحدها. تُستعمل لتأكيد إجراء نجح؛ الأخطاء تبقى رسالة ثابتة في مكانها. */
.toast-region {
  position: fixed;
  inset-inline: 0;
  top: calc(var(--safe-top) + 6px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--gutter);
  pointer-events: none;
}

body:not(:has(.topbar)) .toast-region {
  top: calc(var(--safe-top) + var(--space-4));
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(100%, 420px);
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--palette-charcoal-dark);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  animation: toast-in 200ms var(--ease-out) both;
}

.toast > svg {
  flex-shrink: 0;
  color: var(--palette-forest-light);
}

.toast--error > svg { color: var(--color-danger-tint); }

.toast.is-leaving {
  animation: toast-out 180ms ease-in both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

/* ==================== Empty / error state ====================
   أيقونة هادئة + عنوان قصير + سطر واحد + إجراء عند الحاجة. */

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-fill);
  color: var(--color-text-faint);
}

/* .text-success (base.css) loses to the rule above on source order. */
.empty-state__icon.text-success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.empty-state__icon--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.empty-state__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.empty-state__desc {
  max-width: 32ch;
  margin: 0 auto var(--space-5);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.empty-state .btn,
.empty-state .button-group {
  max-width: 280px;
  margin-inline: auto;
}

/* ==================== Timeline ==================== */

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline__item {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-3);
}

/* خط رفيع يصل النقاط ببعضها (من مركز النقطة إلى النقطة التالية). */
.timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 22px;
  bottom: -4px;
  width: 1px;
  background: var(--color-divider-solid);
}

.timeline__marker {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 9px;
  background: var(--color-border-strong);
}

.timeline__marker--present,
.timeline__marker--success { background: var(--color-success); }
.timeline__marker--absent,
.timeline__marker--danger { background: var(--color-danger); }
.timeline__marker--late,
.timeline__marker--warning { background: var(--color-warning); }
.timeline__marker--excused { background: var(--color-text-muted); }
.timeline__marker--info { background: var(--color-info); }

.timeline__body {
  flex: 1;
  min-width: 0;
}

.timeline__label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}

.timeline__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

/* ==================== More menu (bottom sheet) ====================
   ورقة سفلية أصيلة: مقبض يُسحب للإغلاق، صفوف مجمّعة، هوية المستخدم أولًا،
   تحترم الـsafe-area. مغلقة = visibility:hidden فلا يصلها Tab ولا قارئ الشاشة. */

.more-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility 0s linear 220ms;
}

.more-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transition-base), visibility 0s;
}

.more-menu {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 31;
  max-width: 560px;
  margin-inline: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* يبقى قابلًا للتمرير على الشاشات القصيرة، لكن بلا شريط تمرير ظاهر. */
  scrollbar-width: none;
  padding: 0 var(--gutter) calc(var(--space-4) + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform var(--transition-sheet);
  box-shadow: var(--shadow-md);
  padding-top: 0;
  background: var(--color-bg);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  max-height: min(92dvh, 820px);
}

.more-menu::-webkit-scrollbar {
  display: none;
}

.more-menu.is-dragging {
  transition: none;
}

.more-menu-overlay.is-open .more-menu {
  transform: translateY(0);
}

/* منطقة المقبض أعلى الورقة أعرض من الخط المرئي (سهلة الإمساك). */
.more-menu__handle {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 0 calc(var(--gutter) * -1) var(--space-1);
  background: var(--color-bg);
  cursor: grab;
  touch-action: none;
  padding: var(--space-3) 0 var(--space-1);
}

.more-menu__handle::before {
  content: '';
  width: 36px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.more-menu__group {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.more-menu__group + .more-menu__group {
  margin-top: var(--space-3);
}

.more-menu__row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}

.more-menu__row:active {
  background: var(--color-surface-secondary);
}

.more-menu__row + .more-menu__row::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  height: 1px;
  background: var(--color-divider);
  inset-inline-start: 72px;
}

.more-menu__row-label {
  min-width: 0;
  flex: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.more-menu__row .meta-text {
  display: flex;
}

.more-menu__row .row-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.more-menu__row--danger {
  color: var(--color-danger-strong);
}

.more-menu__row--danger + .more-menu__row--danger::before {
  display: none;
}

/* ==================== Generated credentials banner ==================== */

.credentials-banner {
  background: var(--color-primary-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}

.credentials-banner__title {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
}

.credentials-banner__values {
  background: var(--color-surface);
  border-radius: var(--radius-control);
  padding: var(--space-3);
}

/* ==================== Photo thumb placeholder ==================== */

.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

/* ==================== Credentials password display ==================== */

.credentials-banner__password {
  font-size: var(--font-size-lg);
  letter-spacing: 1px;
}

/* ==================== Registration wizard ====================
   Multi-step public registration form (registration/form.php). One <form>,
   one POST — JS only toggles which .wizard-step is visible and validates it
   before advancing. Progress: "الخطوة 2 من 5" + شريط رفيع، لا خمس دوائر.
   الإجراءات (التالي/رجوع) ثابتة أسفل الشاشة تحت الإبهام. */

.wizard-progress {
  margin-bottom: var(--space-6);
}

.wizard-progress__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.wizard-progress__meta strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.wizard-progress__bar {
  height: 4px;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-divider-solid);
  overflow: hidden;
}

.wizard-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width var(--transition-base);
}

.wizard-question {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.wizard-question:not(:first-child) {
  margin-top: var(--space-6);
}

.wizard-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: var(--space-3);
  margin: var(--space-6) calc(var(--gutter) * -1) 0;
  padding: var(--space-6) var(--gutter) max(var(--space-3), var(--safe-bottom));
  background: linear-gradient(to top, var(--color-bg) 62%, transparent);
}

.wizard-actions .btn {
  flex: 1;
}

.wizard-actions .btn--secondary {
  flex: 0 0 auto;
  width: auto;
  min-width: 96px;
}

.wizard-step.is-entering {
  animation: app-fade-down 180ms var(--ease-out) both;
}

/* ---- Photo picker (live preview) ---- */
.photo-picker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.photo-picker .file-upload {
  flex: 1;
}

/* ---- Choice pills: 2-option toggles (gender, yes/no questions) ---- */
.choice-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-control);
  background: var(--color-fill);
}

.choice-pill__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.choice-pill__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: 9px;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.choice-pill__check {
  display: none;
  align-items: center;
  justify-content: center;
}

.choice-pill__input:checked + .choice-pill__label {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}
.choice-pill__input:checked + .choice-pill__label .choice-pill__check {
  display: inline-flex;
}
.choice-pill__input:focus-visible + .choice-pill__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ---- Option list: single-select grouped rows (level assessment) ----
   مجموعة واحدة بفواصل، ودائرة اختيار واضحة عند الطرف — لا خمسة صناديق. */
.option-list {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-surface);
  overflow: hidden;
}

.option-list__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.option-list__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.option-list__label:not(:first-of-type)::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: var(--space-4) 0;
  height: 1px;
  background: var(--color-divider);
}

.option-list__label::after {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-field-border);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.option-list__input:checked + .option-list__label {
  background: var(--color-primary-soft);
  font-weight: var(--font-weight-semibold);
}

.option-list__input:checked + .option-list__label::after {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 4px var(--color-primary-soft);
}

.option-list__input:focus-visible + .option-list__label {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ---- Review step ---- */
/* كتل المراجعة: كل كتلة سطح مستقل بمسافة بينها (لا سطح واحد بفواصل)، بنفس لغة .rows. */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-list > * {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.review-card__header .section-title {
  margin-bottom: 0;
  font-size: var(--font-size-md);
}

/* ==================== Platform colors admin (/settings/colors) ====================
   كل بطاقة لوحة فيها ثلاث درجات؛ خلفية كل درجة هي لونها نفسه (--swatch) ويتغيّر
   لون النص (data-ink) تلقائيًا ليبقى مقروءًا. القيم الحسابية (HSL/CMYK/OKLCH)
   تُملأ من theme-editor.js. */

.palette-card__head {
  margin-bottom: var(--space-4);
}

.swatches {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .swatches {
    grid-template-columns: repeat(3, 1fr);
  }
}

.swatch {
  --ink: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-surface);
  background: var(--swatch);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  transition: background-color var(--transition-base);
}

.swatch[data-ink="dark"] {
  --ink: #161616;
}

.swatch__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.swatch__name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.swatch__picker {
  width: var(--touch-target-min);
  height: 36px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.swatch__picker::-webkit-color-swatch-wrapper { padding: 2px; }
.swatch__picker::-webkit-color-swatch { border: none; border-radius: 6px; }
.swatch__picker::-moz-color-swatch { border: none; border-radius: 6px; }

.swatch__hex {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-transform: lowercase;
}

.swatch__hex:focus-visible,
.swatch__picker:focus-visible,
.swatch__value:focus-visible,
.swatch__reset:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.swatch__error {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-danger-strong);
  font-size: var(--font-size-xs);
}

.swatch__values {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.swatch__value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.swatch__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.swatch__ico {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.8;
}

.swatch__ico--ok,
.swatch__value.is-copied .swatch__ico--copy {
  display: none;
}

.swatch__value.is-copied .swatch__ico--ok {
  display: inline-flex;
}

.swatch__reset {
  align-self: flex-start;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .swatch__value:hover {
    background: color-mix(in srgb, var(--ink) 22%, transparent);
  }
}

/* ==================== Auth / error cards ==================== */

.card--roomy {
  padding: var(--space-6) var(--space-5);
}

.empty-state--flush {
  padding: var(--space-2) 0;
}

/* النماذج الطويلة (تسجيل الطالب) تبدأ من الأعلى — لا تتمركز عموديًا فتقفز بين الخطوات. */
.guest-shell:has(.guest-card--wide) {
  justify-content: flex-start;
}

/* رقم الطلب: كتلة واضحة قابلة للنسخ (تحديد بلمسة واحدة). */
.reference-code {
  display: block;
  margin: 0 auto var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-align: center;
  user-select: all;
  -webkit-user-select: all;
}

/* أضيق الهواتف: حقلان متجاوران يتراصّان بدل أن يضيق كل منهما. */
@media (max-width: 359px) {
  .field-row:has(> .field + .field) {
    flex-direction: column;
    align-items: stretch;
  }
}

/* لوحة التحكم على الشاشات العريضة: عمودان (ما يحتاج إجراءً + لقطة | اتجاهات + اختصارات)،
   وعلى الهاتف عمود واحد بنفس الترتيب. */
.dashboard-grid {
  display: block;
}

/* العمودان يتراصّان على الهاتف: آخر قسم في العمود الأول يحتفظ بمسافة القسم. */
.dashboard-grid__col > .section:last-child {
  margin-bottom: var(--space-7);
}

@media (min-width: 1024px) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 var(--space-8);
    align-items: start;
  }
}

/* ==================== Confirm sheet ====================
   تأكيد الإجراءات الحساسة كورقة سفلية (على الشاشات العريضة: نافذة وسطية). */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility 0s linear 200ms;
}

.confirm-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transition-base), visibility 0s;
}

.confirm-sheet {
  width: 100%;
  max-width: 420px;
  padding: var(--space-6) var(--gutter) calc(var(--space-4) + var(--safe-bottom));
  background: var(--color-bg);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-md);
  transform: translateY(100%);
  transition: transform var(--transition-sheet);
}

.confirm-overlay.is-open .confirm-sheet {
  transform: translateY(0);
}

.confirm-sheet__message {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-align: center;
}

.confirm-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .confirm-overlay {
    align-items: center;
  }

  .confirm-sheet {
    border-radius: var(--radius-sheet);
    padding-bottom: var(--space-6);
    transform: translateY(12px);
  }
}