/* ════════════════════════════════════════════════════════════════════════
   114-uni-atlas.css — UNI-ATLAS · بلاطات اختيار الجامعة عند الطالب (عقد §7)
   ──────────────────────────────────────────────────────────────────────
   طبقة مستقلة بعد bundle-core (ترتيب المصدر يغلب). ألوان الجامعة تُحقن
   inline: style="--ua-c1:#…;--ua-c2:#…" فتعمل تحت purple/light بلا
   تفريعات. حزام color-mix عبر @supports. للإزالة: احذف هذا الملف + رابطه
   + ua-student.js — تعود شاشة الاختيار القديمة.
   ════════════════════════════════════════════════════════════════════════ */

/* ── الشبكة (≥3 أعمدة حتى 340px) ── */
.ua-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(92px,24vw,124px),1fr));
  gap:clamp(8px,2vw,14px);
  direction:inherit;
}

/* ── الخلية ── */
.ua-cell{display:flex;flex-direction:column;align-items:stretch;min-width:0;position:relative;}

/* ── البلاطة المربعة ── */
.ua-tile{
  position:relative;
  aspect-ratio:1;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:12%;
  border-radius:var(--hu-r-md,16px);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
/* هدف لمس ≥44px حتى لو صغرت البلاطة */
.ua-tile::before{content:'';position:absolute;inset:-4px;border-radius:inherit;}
/* القاعدة العامة قبل كتلة @supports — ترتيب المصدر يُبقي توهّج color-mix حياً
   (كانت العامة تدهسه — مراجعة عدائية) */
.ua-tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.28);}
@supports (background:color-mix(in srgb, red 10%, blue)){
  .ua-tile{
    background:color-mix(in srgb, var(--ua-c1, var(--primary)) 12%, var(--bg-card));
    border-color:color-mix(in srgb, var(--ua-c1, var(--primary)) 30%, var(--border-color));
  }
  .ua-tile:hover{box-shadow:0 8px 24px color-mix(in srgb, var(--ua-c1, var(--primary)) 28%, transparent);}
}
.ua-tile:active{transform:scale(.97);}
.ua-tile:focus-visible{outline:2px solid var(--ua-c1, var(--primary));outline-offset:2px;}

/* ── الشعار والمونوغرام ── */
/* لوح أبيض خلف الشعار (طلب المالك 2026-07-17): الشعارات الرسمية مصمَّمة على
   أبيض — شعارات داكنة (القصيم/طيبة/SEU/بيشة…) كانت تختفي على بلاطات الثيمات
   الداكنة. اللوح يضمن الوضوح تحت purple/light معاً، ولون الجامعة يبقى
   بصبغة البلاطة وإطارها. النِّسَب المئوية (width/padding) كلاهما من عرض
   البلاطة الأم ⇒ تناسب ثابت على كل المقاسات. */
.ua-logo{
  width:76%;height:76%;object-fit:contain;pointer-events:none;
  background:#fff;
  border-radius:20%;
  padding:5.5%;
  box-sizing:border-box;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.ua-mono{
  width:58%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--ua-c1, var(--primary)), var(--ua-c2, var(--ua-c1, var(--primary))));
  color:#fff;font-weight:800;font-size:clamp(1rem,4.5vw,1.5rem);
  pointer-events:none;user-select:none;
}

/* ── الاسم (تحت البلاطة — لون النص الأساسي دائماً، ممنوع لون الجامعة) ── */
.ua-name{
  margin-top:6px;
  font-size:clamp(.72rem,2.6vw,.85rem);
  color:var(--text-primary);
  text-align:center;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
.ua-code-row{text-align:center;margin-top:3px;}
.ua-code{
  display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.4px;
  padding:1px 7px;border-radius:999px;
  color:var(--ua-c1, var(--primary));
  background:rgba(127,127,127,.12);
}
@supports (background:color-mix(in srgb, red 10%, blue)){
  .ua-code{background:color-mix(in srgb, var(--ua-c1, var(--primary)) 10%, transparent);}
}

/* ── شارات ── */
.ua-count{
  position:absolute;top:6px;inset-inline-start:6px;
  font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color);
  display:flex;align-items:center;gap:4px;z-index:1;
}
.ua-you{
  position:absolute;top:6px;inset-inline-end:6px;
  font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:999px;
  background:var(--primary);color:#fff;z-index:1;
  display:inline-flex;align-items:center;gap:4px;
}
.ua-pref .ua-tile{border-width:1.5px;}

/* ── الهيكل (شيمر — نفس روح .skeleton القائم) ── */
.ua-skel{
  aspect-ratio:1;border-radius:var(--hu-r-md,16px);
  background:linear-gradient(100deg, var(--bg-card) 40%, var(--border-color) 50%, var(--bg-card) 60%);
  background-size:200% 100%;
  animation:uaShimmer 1.4s ease infinite;
}
@keyframes uaShimmer{from{background-position:120% 0;}to{background-position:-80% 0;}}

/* ── البحث الفوري ── */
.ua-search{
  position:relative;
  margin:0 0 clamp(10px,2.5vw,16px);
}
.ua-search i{
  position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:.85rem;pointer-events:none;
}
.ua-search input{
  width:100%;
  padding:12px 42px 12px 14px;
  border-radius:var(--hu-r-md,16px);
  background:var(--bg-input, var(--bg-card));
  border:1px solid var(--border-color);
  color:var(--text-primary);
  font-family:inherit;font-size:.92rem;
  outline:none;
  transition:border-color .18s ease;
}
.ua-search input:focus{border-color:var(--primary);}
.ua-search input::placeholder{color:var(--text-muted);}
.ua-noresult{
  text-align:center;color:var(--text-secondary);
  padding:32px 12px;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;gap:8px;
}

/* ── حالة «قريباً» للجامعة الفارغة (تبيع لا تعتذر) ── */
.ua-coming{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:clamp(24px,6vw,48px) 16px;text-align:center;
}
.ua-coming-logo{
  width:clamp(96px,28vw,140px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--hu-r-lg,20px);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  /* padding ثابت لا نسبة — النسبة تُحسب من عرض الحاوية الأم فترفع أرضية border-box */
  padding:clamp(14px,4vw,20px);
}
@supports (background:color-mix(in srgb, red 10%, blue)){
  .ua-coming-logo{
    background:color-mix(in srgb, var(--ua-c1, var(--primary)) 12%, var(--bg-card));
    border-color:color-mix(in srgb, var(--ua-c1, var(--primary)) 30%, var(--border-color));
  }
}
.ua-coming-logo .ua-logo{width:100%;height:100%;}
.ua-coming-logo .ua-mono{width:82%;font-size:clamp(1.2rem,5vw,1.8rem);}
.ua-coming-title{margin:4px 0 0;font-size:clamp(1rem,3.4vw,1.25rem);color:var(--text-primary);font-weight:800;}
.ua-coming-sub{margin:0;font-size:clamp(.8rem,2.6vw,.9rem);color:var(--text-secondary);}
.ua-wish-cta{
  margin-top:8px;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  background:var(--gradient, var(--primary));
  color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:700;
  box-shadow:var(--glow, none);
  transition:transform .18s ease;
  min-height:44px;
}
.ua-wish-cta:active{transform:scale(.97);}
.ua-wish-cta.ua-wish-done{background:var(--success,#51cf66);color:#0a2010;cursor:default;box-shadow:none;}

/* ── ورقة «الأمنية» ── */
.ua-wish-bg{
  position:fixed;inset:0;z-index:1200;
  background:rgba(5,8,15,.66);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.ua-wish-bg.show{opacity:1;pointer-events:auto;}
.ua-wish-box{
  width:min(480px,100%);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--hu-r-lg,20px) var(--hu-r-lg,20px) 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translateY(14px);
  transition:transform .2s ease;
}
.ua-wish-bg.show .ua-wish-box{transform:translateY(0);}
.ua-wish-title{margin:0 0 4px;font-size:1rem;color:var(--text-primary);font-weight:800;display:flex;align-items:center;gap:8px;}
.ua-wish-title i{color:var(--primary);}
.ua-wish-sub{margin:0 0 10px;font-size:.82rem;color:var(--text-secondary);}
#uaWishNote{
  width:100%;resize:vertical;min-height:76px;
  padding:12px;border-radius:var(--hu-r-md,16px);
  background:var(--bg-input, var(--bg-page));
  border:1px solid var(--border-color);
  color:var(--text-primary);font-family:inherit;font-size:.92rem;
  outline:none;
}
#uaWishNote:focus{border-color:var(--primary);}
.ua-wish-actions{display:flex;gap:8px;margin-top:12px;}
.ua-wish-actions button{
  flex:1;min-height:44px;border-radius:var(--hu-r-md,16px);
  font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;
}
.ua-wish-cancel{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);}
.ua-wish-send{background:var(--gradient, var(--primary));border:none;color:#fff;}
.ua-wish-send:disabled{opacity:.6;cursor:wait;}

/* ══ 🌟 [OPEN-WISH 2026-07-28] حقل تواصل الضيف + نكزة التحويل ══════════════
   محدّدات مفردة عمداً (فخ WIDE-GATE: قوائم المحدّدات غير المتسامحة بiOS ≤16.3
   تُسقِط القائمة كاملةً لو حوت محدّداً غير مدعوم). للإزالة: احذف هذا المقطع. */
.ua-wish-contact{margin-top:8px;}
#uaWishContact{
  width:100%;min-height:44px;
  padding:10px 12px;border-radius:var(--hu-r-md,16px);
  background:var(--bg-input, var(--bg-page));
  border:1px solid var(--border-color);
  color:var(--text-primary);font-family:inherit;font-size:.88rem;
  outline:none;
  /* المحتوى لاتيني (رقم/معرّف) لكن الحقل داخل واجهة RTL ⇒ dir=ltr + محاذاة يمين
     كي يبقى الحقل متسقاً بصرياً مع بقية الورقة ولا يقفز المؤشّر. */
  text-align:right;
}
#uaWishContact:focus{border-color:var(--primary);}
#uaWishContact::placeholder{
  /* الـplaceholder عربي داخل حقل ltr — نعيده لاتجاه النص الطبيعي كي يُقرأ سليماً */
  direction:rtl;
  font-size:.78rem;
  opacity:.75;
}
.ua-wish-nudge{
  margin:10px 0 0;padding:10px 12px;
  border-radius:var(--hu-r-md,16px);
  background:var(--bg-input, var(--bg-page));
  border:1px dashed var(--primary);
  color:var(--text-secondary);font-size:.82rem;line-height:1.7;
}
.ua-wish-nudge-btn{
  margin-inline-start:6px;padding:6px 12px;min-height:32px;
  border:none;border-radius:999px;cursor:pointer;
  background:var(--gradient, var(--primary));color:#fff;
  font-family:inherit;font-size:.78rem;font-weight:700;
}
.ua-wish-nudge-btn:active{transform:scale(.97);}

/* ── الثيم الفاتح: حدود أوضح كي لا تبهت (ألوان الجامعات على أبيض) ── */
@supports (background:color-mix(in srgb, red 10%, blue)){
  :root[data-theme="light"] .ua-tile{
    background:color-mix(in srgb, var(--ua-c1, var(--primary)) 9%, var(--bg-card));
    border-color:color-mix(in srgb, var(--ua-c1, var(--primary)) 42%, var(--border-color));
  }
  :root[data-theme="light"] .ua-coming-logo{
    border-color:color-mix(in srgb, var(--ua-c1, var(--primary)) 42%, var(--border-color));
  }
}
/* لوح الشعار على الفاتح: ظل أخف + خيط حدّ كي يُقرأ اللوح كسطح لا يذوب */
:root[data-theme="light"] .ua-logo{
  box-shadow:0 2px 8px rgba(15,23,42,.10), inset 0 0 0 1px rgba(15,23,42,.07);
}
:root[data-theme="light"] .ua-wish-bg{background:rgba(15,23,42,.35);}

/* ── استجابة (عرف ≤600/480/390/360/340 — صفر تمرير أفقي) ── */
@media (max-width:480px){
  .ua-grid{grid-template-columns:repeat(auto-fill,minmax(clamp(88px,26vw,110px),1fr));}
}
@media (max-width:360px){
  .ua-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
}

/* ── تقليل الحركة ── */
@media (prefers-reduced-motion:reduce){
  .ua-tile{transition:none;}
  .ua-tile:hover{transform:none;}
  .ua-tile:active{transform:none;}
  .ua-skel{animation:none;}
  .ua-wish-bg,.ua-wish-box{transition:none;}
}