/* ==========================================================================
   Forms + Buttons
   - .ui-field     حقل كامل: عنوان + إدخال + مساعدة/خطأ
       --warm      خلفية برتقالية فاتحة (البيانات الشخصية في تصميم التسجيل)
       --cool      خلفية زرقاء فاتحة (بيانات الحساب: الإيميل وكلمة المرور)
   - .ui-input / .ui-select / .ui-textarea
   - .ui-btn       --primary | --secondary | --outline | --ghost | --danger | --brand
                   --sm | --lg | --block
   ========================================================================== */

/* ---------- Field ---------- */
.ui-field {
  --field-bg: var(--color-surface);
  --field-border: var(--color-border-strong);
  --field-focus: var(--color-primary);
  --label-color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-field--warm {
  --field-bg: var(--orange-50);
  --field-border: var(--orange-200);
  --select-bg: var(--orange-50);
  --select-border: var(--orange-200);
  --select-hover-bg: var(--orange-100);
  --label-color: var(--color-primary);
}

.ui-field--cool {
  --field-bg: var(--blue-50);
  --field-border: var(--blue-300);
  --select-border: var(--blue-300);
  --label-color: var(--color-secondary);
}

.ui-field__label {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-semibold);
  color: var(--label-color);
}

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

.ui-field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.ui-field__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  color: var(--color-text-subtle);
  pointer-events: none;
}

.ui-field__icon + .ui-input {
  padding-inline-start: calc(var(--space-3) + 1.25em + var(--space-2));
}

.ui-field__help,
.ui-field__error {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

.ui-field__help  { color: var(--color-text-muted); }
.ui-field__error { color: var(--color-danger); }

/* ---------- Inputs ---------- */
.ui-input,
.ui-select,
.ui-textarea {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--field-border, var(--color-border-strong));
  border-radius: var(--radius-lg);
  background: var(--field-bg, var(--color-surface));
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.ui-textarea {
  min-block-size: 6rem;
  resize: vertical;
}

.ui-select {
  appearance: none;
  padding-inline-end: calc(var(--space-4) + 1.75rem);
  border-color: var(--select-border, var(--blue-100));
  background-color: var(--select-bg, var(--blue-50));
  color: var(--blue-900, var(--color-text));
  font-weight: var(--weight-medium);
  cursor: pointer;
  /* السهم: مربع أبيض بحواف دائرية وسهم أزرق */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%23ffffff'/%3E%3Cpath d='m9 12 5 5 5-5' fill='none' stroke='%232A6CB5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.75rem;
  background-position: right var(--space-2) center;
}

[dir="rtl"] .ui-select {
  background-position: left var(--space-2) center;
}

.ui-select:hover {
  border-color: var(--blue-300);
  background-color: var(--select-hover-bg, var(--blue-100));
}

.ui-select:focus {
  background-color: var(--color-surface);
}

.ui-select option {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-regular);
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--color-text-subtle);
}

.ui-input:hover,
.ui-textarea:hover {
  border-color: var(--field-focus, var(--color-primary));
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: none;
  border-color: var(--field-focus, var(--color-primary));
  box-shadow: 0 0 0 .25rem var(--color-focus-ring);
}

/* خطأ */
.ui-field.has-error .ui-input,
.ui-field.has-error .ui-select,
.ui-field.has-error .ui-textarea,
.ui-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.ui-field.has-error .ui-input:focus,
.ui-field.has-error .ui-select:focus,
.ui-field.has-error .ui-textarea:focus {
  box-shadow: 0 0 0 .25rem rgb(255 56 60 / .2);
}

/* معطّل / للقراءة فقط */
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.ui-input[readonly] {
  background: var(--color-surface-muted);
}

/* زر إظهار كلمة المرور */
.ui-field__toggle {
  position: absolute;
  inset-inline-end: var(--space-2);
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-secondary);
  cursor: pointer;
}

.ui-field__toggle:hover { background: rgb(127 127 127 / .1); }

.ui-field__toggle + .ui-input,
.ui-input:has(+ .ui-field__toggle) {
  padding-inline-end: var(--space-12);
}

.ui-field__toggle .is-shown { display: none; }
.ui-field__toggle[aria-pressed="true"] .is-shown  { display: inline-flex; }
.ui-field__toggle[aria-pressed="true"] .is-hidden { display: none; }

/* ---------- Buttons ---------- */
.ui-btn {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-color: var(--color-on-primary);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 2.5rem;
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  color: var(--btn-color);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
}

.ui-btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-color);
}

.ui-btn--secondary {
  --btn-bg: var(--color-secondary);
  --btn-bg-hover: var(--color-secondary-hover);
  --btn-color: var(--color-on-secondary);
}

.ui-btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-primary-subtle);
  --btn-color: var(--color-primary);
  --btn-border: var(--color-primary);
}

.ui-btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-surface-muted);
  --btn-color: var(--color-text);
}

.ui-btn--danger {
  --btn-bg: var(--color-danger);
  --btn-bg-hover: var(--red-700);
  --btn-color: var(--gray-0);
}

/* زر الهوية: تدرج من الأزرق للبرتقالي (تسجيل الدخول/إنشاء الحساب)
   نستخدم background-image مو background، لأن الصيغة المختصرة ترجّع background-origin
   للافتراضي فيتكرر التدرج تحت الإطار ويطلع خط باللون المقابل على الأطراف */
.ui-btn--brand {
  --btn-color: var(--gray-0);
  --brand-angle: 90deg;
  border: 0;
  background-color: var(--color-primary);
  background-image: linear-gradient(var(--brand-angle), var(--color-primary), var(--color-secondary));
  text-transform: uppercase;
  letter-spacing: .02em;
}

[dir="rtl"] .ui-btn--brand {
  --brand-angle: 270deg;
}

.ui-btn--brand:hover {
  background-color: var(--color-primary);
  background-image: linear-gradient(var(--brand-angle), var(--color-primary), var(--color-secondary));
  filter: brightness(1.05) saturate(1.1);
}

.ui-btn--sm    { min-block-size: 2rem;  padding: var(--space-1) var(--space-4); font-size: var(--text-xs); }
.ui-btn--lg    { min-block-size: 3rem;  padding: var(--space-3) var(--space-8); }
.ui-btn--block { inline-size: 100%; }

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  opacity: .5;
  filter: saturate(.6);
  cursor: not-allowed;
  pointer-events: none;
}

/* حالة التحميل */
.ui-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.ui-btn.is-loading::after {
  content: "";
  position: absolute;
  inline-size: 1.1em;
  block-size: 1.1em;
  border: 2px solid var(--btn-color);
  border-inline-end-color: transparent;
  border-radius: var(--radius-full);
  animation: ui-spin .7s linear infinite;
}

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

/* ---------- Form layout ---------- */
.ui-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ui-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.ui-form__errors {
  margin: 0;
}

/* ---------- Form grid — نموذج بعمودين (من 768 وفوق) ---------- */
.ui-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-6);
}

@media (min-width: 768px) {
  .ui-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ui-form-grid > .ui-field--wide,
.ui-form-grid > .ui-form-grid__full {
  grid-column: 1 / -1;
}

/* عنوان قسم داخل النموذج */
.ui-form-section {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

/* ---------- File upload — مربع رفع ملف ---------- */
.ui-file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 1.5px dashed var(--blue-300);
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

.ui-file:hover,
.ui-file.is-dragover {
  border-color: var(--color-primary);
  background: var(--blue-100);
}

.ui-file:focus-within {
  box-shadow: 0 0 0 .25rem var(--color-focus-ring);
}

.ui-file__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
}


.ui-file__text strong { color: var(--color-primary); }

.ui-file__name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.ui-file__name:empty { display: none; }

/* الحقل الأصلي مخفي بصرياً لكن يظل يستقبل الملفات والتركيز */
.ui-file__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.ui-field.has-error .ui-file {
  border-color: var(--color-danger);
  background: var(--color-danger-subtle);
}

/* أزرار النموذج على الطرف (نماذج الصفحات) بدل المنتصف (نماذج الدخول) */
.ui-form__actions--end {
  justify-content: flex-end;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

/* ---------- Choice cards — اختيار واحد من بطاقات (راديو) ----------
   <fieldset class="ui-choices"><legend class="ui-choices__label">...</legend>
     <div class="ui-choices__grid">
       <label class="ui-choice"><input type="radio" name="x" value="a" class="ui-choice__input">
         <span class="ui-choice__icon">(icon)</span><span class="ui-choice__text">...</span></label>
   </div></fieldset> */
.ui-choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.ui-choices__label {
  float: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.ui-choices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-2);
}

@media (max-width: 575.98px) {
  .ui-choices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ui-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 3.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--orange-200);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.ui-choice:hover { border-color: var(--orange-300); background: var(--orange-50); }

.ui-choice__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ui-choice__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--orange-100);
  color: var(--orange-700);
}

.ui-choice__text {
  min-inline-size: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.ui-choice:has(.ui-choice__input:checked) {
  border-color: var(--color-primary);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.ui-choice:has(.ui-choice__input:checked) .ui-choice__icon {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.ui-choice:has(.ui-choice__input:checked) .ui-choice__text { font-weight: var(--weight-bold); }

.ui-choice:has(.ui-choice__input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .ui-choice { gap: var(--space-2); padding: var(--space-2); }
  .ui-choice__icon { inline-size: 1.75rem; block-size: 1.75rem; }
  .ui-choice__icon .ui-icon { inline-size: 1rem; block-size: 1rem; }
}

/* ---------- Prefix — نص ثابت قبل الحقل (مثل +966) ---------- */
.ui-field__prefix {
  position: absolute;
  inset-inline-start: var(--space-2);
  display: inline-flex;
  align-items: center;
  block-size: 2rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  pointer-events: none;
}

.ui-field--warm .ui-field__prefix { background: var(--orange-100); color: var(--orange-700); }

.ui-field__control--prefixed .ui-input { padding-inline-start: 4.75rem; }

/* رابط الملف الحالي تحت مربع الرفع */
.ui-field__current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
}

/* ---------- Checkbox — مربع اختيار ---------- */
.ui-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text);
  user-select: none;
}

.ui-check__input {
  position: absolute;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ui-check__box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 1.5px solid var(--orange-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.ui-check__box .ui-icon { inline-size: .875rem; block-size: .875rem; }

.ui-check:hover .ui-check__box { border-color: var(--orange-500); background: var(--orange-50); }

.ui-check__input:checked + .ui-check__box {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.ui-check__input:focus-visible + .ui-check__box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ui-check__input:disabled + .ui-check__box { opacity: .5; }
.ui-field.has-error .ui-check__box { border-color: var(--color-danger); }

/* ---------- زر ناعم برتقالي (إجراء مساعد بلون الهوية: تصوير، إضافة...) ---------- */
.ui-btn--soft {
  --btn-bg: var(--orange-50);
  --btn-bg-hover: var(--orange-100);
  --btn-color: var(--orange-700);
  --btn-border: var(--orange-200);
}

/* ---------- Switch — مفتاح تشغيل (تفعيل معيار، خيار يفتح قسم) ----------
   <label class="ui-switch"><input type="checkbox" class="ui-switch__input"><span class="ui-switch__track"></span> نص اختياري</label> */
.ui-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
}

.ui-switch__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.ui-switch__track {
  position: relative;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--orange-100);
  border: 1px solid var(--orange-200);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.ui-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 3px;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: var(--radius-full);
  background: var(--gray-0);
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
  transform: translateY(-50%);
  transition: inset-inline-start var(--duration-fast) var(--ease-standard);
}

.ui-switch__input:checked + .ui-switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.ui-switch__input:checked + .ui-switch__track::after { inset-inline-start: calc(100% - 1.125rem - 3px); }
.ui-switch__input:focus-visible + .ui-switch__track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Media picker — ui/components/media_picker.html ---------- */
.ui-media { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-media__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-media__count { font-size: var(--text-xs); color: var(--color-text-muted); }
.ui-media.is-full .ui-media__count { color: var(--orange-700); font-weight: var(--weight-semibold); }
.ui-media__previews { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ui-media__previews:empty { display: none; }

.ui-media__thumb {
  position: relative;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--orange-200);
  background: var(--orange-50);
}

.ui-media__thumb img,
.ui-media__thumb video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.ui-media__remove {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  display: grid;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgb(32 40 50 / .7);
  color: var(--gray-0);
  cursor: pointer;
}

.ui-media__remove .ui-icon { inline-size: .75rem; block-size: .75rem; }

/* ---------- Check list — components/check_list.html ---------- */
.ui-check-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-check-list__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-check-list__search { flex: 1 1 12rem; }
.ui-check-list__search .ui-input { padding-inline-start: 2.5rem; }
.ui-check-list__count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); }
.ui-check-list__count:empty { display: none; }

.ui-check-list__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-2);
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.ui-check-list__items--1 { grid-template-columns: minmax(0, 1fr); }
.ui-check-list__items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-check-list__items--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-check-list__empty { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.ui-check-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--orange-200);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.ui-check-card:hover { border-color: var(--orange-500); }
.ui-check-card[draggable="true"] { cursor: grab; }
.ui-check-card.is-dragging { opacity: .55; }
.ui-check-card > input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.ui-check-card:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ui-check-card.is-checked { border-color: var(--color-primary); background: var(--blue-50); }
.ui-check-card__body { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
.ui-check-card__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-check-card__meta { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-check-card__tick {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--orange-200);
  color: transparent;
}

.ui-check-card.is-checked .ui-check-card__tick { background: var(--color-primary); border-color: var(--color-primary); color: var(--gray-0); }
.ui-check-card:has(> input[type="radio"]) .ui-check-card__tick { border-radius: var(--radius-full); }
.ui-check-list:has(.ui-check-card > input[type="radio"]) .ui-check-list__count { display: none; }

.ui-check-card__fav {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.ui-check-card__fav:hover { background: var(--orange-50); color: var(--orange-700); }
.ui-check-card.is-favorite .ui-check-card__fav { color: var(--color-secondary); }
.ui-check-card.is-favorite .ui-check-card__fav svg { fill: currentColor; }

/* ملف محفوظ: رابطه + "حذف الملف الحالي" (field.html) */
.ui-field__current-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* تاريخ + وقت في حقل واحد (SplitDateTime) */
.ui-split-datetime { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2); inline-size: 100%; }
/* مربع ملف مصغّر (داخل جدول) — سطر واحد بدل المربع الكبير */
.ui-file--compact { flex-direction: row; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); text-align: start; }
.ui-file--compact .ui-file__icon { inline-size: 1.75rem; block-size: 1.75rem; }
.ui-file--compact .ui-file__name { max-inline-size: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Permission picker — صلاحيات Django (ui/components/permission_picker.html) ----------
   القسم ← سطر لكل جدول ← شرائح الأفعال (عرض/إضافة/تعديل/حذف بألوان ثابتة) + الصلاحيات الخاصة بنصها الكامل */
.ui-perm { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-perm__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ui-perm__head .ui-field__label { margin: 0; }
.ui-perm__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-perm__search { flex: 1 1 16rem; }
.ui-perm__toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.ui-perm__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.ui-perm__legend > span:not(.ui-perm__chip) { margin-inline-end: var(--space-2); }

.ui-perm__apps {
  display: flex; flex-direction: column; gap: var(--space-2);
  max-block-size: 34rem; overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}
.ui-perm__app { border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.ui-perm__app[hidden] { display: none; }
.ui-perm__app.has-checked { border-color: var(--blue-200, #b9d0ec); }
.ui-perm__app-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer; list-style: none;
  position: sticky; inset-block-start: calc(var(--space-1) * -1); z-index: 1;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.ui-perm__app-head::-webkit-details-marker { display: none; }
.ui-perm__app-name { flex: 1; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.ui-perm__app-count { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ui-perm__app.has-checked .ui-perm__app-count { color: var(--color-primary); font-weight: var(--weight-bold); }
.ui-perm__app[open] .ui-disclosure__chevron { transform: rotate(180deg); }
.ui-perm__models { display: flex; flex-direction: column; padding: 0 var(--space-3) var(--space-2); }

.ui-perm__model {
  display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: var(--space-2) var(--space-4);
  align-items: center;
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}
.ui-perm__model[hidden] { display: none; }
.ui-perm__model-name { display: flex; flex-direction: column; min-inline-size: 0; }
.ui-perm__model-name strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.ui-perm__model-name code { font-size: .7rem; color: var(--color-text-subtle); overflow-wrap: anywhere; text-align: start; }
.ui-perm__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }

.ui-perm__chip {
  --chip: var(--color-text-muted);
  --chip-bg: var(--color-surface-muted);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-block-size: 1.9rem;
  padding: .2rem .7rem .2rem .45rem;
  border: 1px solid color-mix(in srgb, var(--chip) 30%, transparent);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ui-perm__chip > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.ui-perm__chip:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ui-perm__chip:hover { border-color: var(--chip); }
.ui-perm__tick {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 1.1rem; block-size: 1.1rem;
  border: 1.5px solid color-mix(in srgb, var(--chip) 55%, transparent);
  border-radius: var(--radius-sm);
  color: transparent;
}
/* علامة الصح بالـ CSS (بدل أيقونة SVG في كل شريحة — مئات الشرائح بالصفحة) */
.ui-perm__tick::after { content: ""; inline-size: .3rem; block-size: .55rem; margin-block-start: -.12rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-perm__chip.is-checked, .ui-perm__chip:has(input:checked) { background: var(--chip-bg); border-color: var(--chip); }
.ui-perm__chip.is-checked .ui-perm__tick, .ui-perm__chip:has(input:checked) .ui-perm__tick { background: var(--chip); border-color: var(--chip); color: #fff; }
.ui-perm__chip.is-static { padding-inline: .6rem; cursor: default; background: var(--chip-bg); border-color: var(--chip); }

.ui-perm__chip--view   { --chip: var(--color-primary);  --chip-bg: var(--blue-50); }
.ui-perm__chip--add    { --chip: var(--color-success);  --chip-bg: var(--color-success-subtle); }
.ui-perm__chip--change { --chip: var(--orange-600, #d9821f); --chip-bg: var(--orange-50); }
.ui-perm__chip--delete { --chip: var(--color-danger);   --chip-bg: var(--color-danger-subtle); }
.ui-perm__chip--custom { --chip: #6d5bd0; --chip-bg: #f1eefc; border-radius: var(--radius-md); }  /* صلاحية خاصة: نصها الكامل يلتف */

.ui-perm__all {
  padding: .15rem .55rem;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  cursor: pointer;
}
.ui-perm__all:hover { background: var(--blue-50); }

@media (max-width: 767.98px) {
  .ui-perm__model { grid-template-columns: minmax(0, 1fr); }
  .ui-perm__apps { max-block-size: 28rem; }
}

/* زر القسم الرئيسي: منح كل صلاحياته بضغطة / سحبها */
.ui-perm__app-all {
  flex: none;
  padding: .2rem .7rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  cursor: pointer;
}
.ui-perm__app-all:hover { background: var(--blue-50); }
.ui-perm__app-all.is-full { border-color: var(--color-danger); color: var(--color-danger); }
.ui-perm__app-all.is-full:hover { background: var(--color-danger-subtle); }

/* وضع القراءة فقط (readonly) — معاينة: الصفحة تلوّن الشرائح بحالة التغيير */
.ui-perm__chip[hidden] { display: none; }
.ui-perm--readonly .ui-perm__chip { cursor: default; }
.ui-perm--readonly .ui-perm__chip.is-add    { background: var(--color-success-subtle); border-color: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 14%, transparent); }
.ui-perm--readonly .ui-perm__chip.is-keep   { background: var(--blue-50); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
.ui-perm--readonly .ui-perm__chip.is-remove { background: var(--color-danger-subtle); border-color: var(--color-danger); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-danger) 60%, transparent); }
.ui-perm--readonly .ui-perm__chip.is-add .ui-perm__tick    { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.ui-perm--readonly .ui-perm__chip.is-keep .ui-perm__tick   { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ui-perm--readonly .ui-perm__chip.is-remove .ui-perm__tick { background: var(--color-surface); border-color: var(--color-danger); color: transparent; }