/* ==========================================================================
   Telkini v119 — تحسينات العرض على الهاتف والكمبيوتر (الأزرار والأيقونات)
   يُحمَّل بعد كل الأنماط الأخرى. لا يغيّر الألوان أو التصميم، فقط الأحجام والترتيب
   حتى تظهر كل الأزرار كاملة وواضحة على كل الشاشات.
   ========================================================================== */

/* ---------- أيقونات Phosphor (خطوط رفيعة مثل الصورة المرجعية) ---------- */
svg.tk-ph { fill: currentColor; stroke: none !important; shape-rendering: geometricPrecision; flex-shrink: 0; vertical-align: middle; }
/* الأيقونات المرسومة بخطوط رفيعة تحتاج حجماً أقل قليلاً من أيقونات Material المملوءة لتبدو متوازنة */
svg.tk-ph.w-3    { width: 1.05rem; height: 1.05rem; }
svg.tk-ph.w-3\.5 { width: 1.2rem;  height: 1.2rem; }
svg.tk-ph.w-4    { width: 1.35rem; height: 1.35rem; }
svg.tk-ph.w-5    { width: 1.6rem;  height: 1.6rem; }
svg.tk-ph.w-6    { width: 1.85rem; height: 1.85rem; }
svg.tk-ph.w-7    { width: 2.05rem; height: 2.05rem; }
svg.tk-ph.w-8    { width: 2.3rem;  height: 2.3rem; }
svg.tk-ph:not([class*="w-"]) { width: 1.35rem; height: 1.35rem; }
div.w-6.h-6 > svg.tk-ph, div.w-7.h-7 > svg.tk-ph { width: 1.15rem; height: 1.15rem; }
div.w-8.h-8 > svg.tk-ph, span.w-8.h-8 > svg.tk-ph { width: 1.3rem; height: 1.3rem; }
button > svg.tk-ph, a > svg.tk-ph { min-width: 1rem; min-height: 1rem; }
svg.tk-ph.moon-icon, svg.tk-ph.sun-icon, svg.tk-ph.gear-icon { width: 1.25rem !important; height: 1.25rem !important; }

/* ---------- عام ---------- */
button, [role="button"], a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 767px) {
  /* منع تكبير الصفحة تلقائياً في آيفون عند الكتابة */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}

/* ---------- الشريط العلوي للموقع ---------- */
#admin-alert-banner { width: max-content; }
/* زر لوحة التحكم يصبح أيقونة فقط حين تضيق الشاشة حتى لا يدفع باقي الأزرار خارجها */
@media (max-width: 1279px) {
  #nav-admin-direct-btn .admin-pill-text,
  #nav-admin-direct-btn .admin-pill-arrow { display: none !important; }
  #main-header #nav-admin-direct-btn.admin-pill { padding: 4px !important; gap: 0 !important; min-height: 0 !important; }
}
@media (max-width: 480px) {
  #main-header { padding-left: 8px !important; padding-right: 8px !important; }
  #main-header > div { padding-left: 10px !important; padding-right: 6px !important; gap: 6px !important; }
  #main-header > div > div:last-child { gap: 4px !important; }
  #main-header .site-logo-img { height: 30px !important; }
  #main-header #nav-admin-direct-btn .admin-pill-icon { width: 30px !important; height: 30px !important; }
}
@media (max-width: 374px) {
  #main-header .site-logo-img { height: 26px !important; }
  #main-header #btn-open-reviews { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ---------- شريط تنبيهات الأدمن: كان يضيق إلى نصف الشاشة على الهاتف ---------- */
@media (max-width: 640px) {
  #admin-alert-banner {
    left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important;
    transform: none !important; --tw-translate-x: 0 !important;
    top: auto !important; bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    flex-wrap: wrap; row-gap: 8px; padding: 12px 14px !important; line-height: 1.6;
  }
  #admin-alert-banner-text { flex: 1 1 60%; min-width: 0; }
  #admin-alert-banner > button { min-height: 36px; }
  #admin-alert-banner > button[aria-label] { min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- تبويبات Lesen (Prüfungen / Teile …): كلها ظاهرة على الهاتف ---------- */
@media (max-width: 767px) {
  .lesen-tabs-card { overflow: visible !important; }
  .lesen-tabs-card > div {
    min-width: 0 !important; display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important;
  }
  .lesen-tabs-card .category-tab { padding: 10px 4px !important; gap: 6px !important; min-height: 44px; min-width: 0; }
  .lesen-tabs-card .category-tab span { font-size: 12.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- رأس شاشات الامتحان (العنوان + Teil 1…Sprach 2 + المؤقت) ---------- */
.ex-header [id$="timer"] { white-space: nowrap; }
.ex-header > :last-child > span:first-child { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 767px) {
  .ex-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title tools" "pill pill";
    column-gap: 8px; row-gap: 8px;
    padding: 8px 10px !important;
  }
  .ex-header > :first-child { grid-area: title; min-width: 0; gap: 8px !important; }
  .ex-header > :last-child { grid-area: tools; gap: 4px !important; justify-self: end; }
  .ex-header > :last-child > span:first-child { padding: 4px 6px !important; }
  .ex-header > .ex-pill, .ex-header > [data-ex-pill] {
    grid-area: pill; display: flex !important; width: 100%; max-width: 100%;
  }
  .ex-header > [data-ex-pill] button {
    flex: 1 1 0; min-width: 0; min-height: 40px;
    padding: 5px 2px !important; font-size: 12px !important;
  }
  .ex-header > [data-ex-pill] button .ex-pill-kicker { font-size: 7px !important; }
  .ex-header .ex-title h2 { font-size: 13px !important; }
  .ex-header .ex-title > div { white-space: nowrap; overflow: hidden; }
}

/* ---------- الشريط السفلي في شاشات الامتحان (تصحيح / Ask AI / الجزء التالي) ---------- */
@media (max-width: 767px) {
  .ex-bottom-bar,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .ex-bottom-bar > div,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 { gap: 6px; }
  .ex-bottom-bar button,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 button {
    padding-left: 12px !important; padding-right: 12px !important;
    min-height: 42px; font-size: 13px !important; gap: 6px !important; white-space: nowrap;
  }
  .ex-bottom-bar .w-px,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 .w-px { display: none !important; }
  .ex-bottom-bar .flex.items-center,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 .flex.items-center { gap: 6px !important; }
  .ex-bottom-bar .ask-ai-btn,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 .ask-ai-btn { padding-left: 10px !important; padding-right: 10px !important; }
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 button[aria-label="إعادة"] { width: 42px !important; height: 42px !important; padding: 0 !important; }
}
@media (max-width: 400px) {
  /* شاشة صغيرة جداً: Ask AI تظهر كأيقونة فقط حتى يبقى زر «الجزء التالي» كاملاً */
  .ex-bottom-bar .ask-ai-btn > span:last-child,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 .ask-ai-btn > span:last-child { display: none; }
  .ex-bottom-bar button,
  [id^="exercise"][id$="-view"] > .fixed.bottom-0 button { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ---------- روابط أسفل الصفحة وأزرار نصية صغيرة: مساحة لمس كافية على الهاتف ---------- */
@media (max-width: 767px) {
  footer button, footer a { min-height: 36px; display: inline-flex; align-items: center; }
  #billing-view button.text-xs { min-height: 40px; padding: 8px 12px; }
}

/* ---------- v119 (2): الهاتف — اسم المستخدم بجانب الصورة يُخفى ليتسع الشريط العلوي ---------- */
@media (max-width: 480px) {
  #nav-user-name { display: none !important; }
  #btn-user-menu { padding: 2px !important; gap: 0 !important; }
  #main-header #nav-admin-direct-btn.admin-pill { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  .dark #main-header #nav-admin-direct-btn.admin-pill { background: transparent !important; }
  #admin-alert-banner { flex-wrap: nowrap; }
}
/* أزرار «الأساسي / التعديل» داخل الأجزاء */
@media (max-width: 767px) {
  [id$="-mode-wrap"] button { min-height: 36px; }
}
/* بنك الكلمات في Sprach 2: عمودان على الشاشات الضيقة حتى تظهر الكلمة كاملة */
@media (max-width: 420px) {
  #ex5-words { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  #user-nav-controls { gap: 4px !important; }
  #btn-user-menu > :not(#nav-user-avatar) { display: none !important; }
}
/* حساب الأدمن (زر إضافي) على شاشة ≤ 374px، أو أي حساب على شاشة ≤ 339px: أزرار 28px */
@media (max-width: 374px) {
  #main-header:has(#nav-admin-direct-btn:not(.hidden)) > div > div:last-child > button,
  #main-header:has(#nav-admin-direct-btn:not(.hidden)) > div > div:last-child > div > button,
  #main-header:has(#nav-admin-direct-btn:not(.hidden)) #user-nav-controls > div > button { width: 28px !important; height: 28px !important; }
  #main-header:has(#nav-admin-direct-btn:not(.hidden)) #btn-open-reviews { width: 28px !important; height: 28px !important; padding: 0 !important; justify-content: center; }
  #main-header #nav-admin-direct-btn .admin-pill-icon { width: 28px !important; height: 28px !important; }
  #main-header:has(#nav-admin-direct-btn:not(.hidden)) #nav-user-avatar { width: 26px !important; height: 26px !important; }
}
@media (max-width: 339px) {
  #main-header > div > div:last-child > button,
  #main-header > div > div:last-child > div > button,
  #user-nav-controls > div > button { width: 28px !important; height: 28px !important; }
  #main-header #btn-open-reviews { width: 28px !important; height: 28px !important; padding: 0 !important; justify-content: center; }
  #nav-user-avatar { width: 26px !important; height: 26px !important; }
}
@media (max-width: 374px) { #main-header .logo-container { padding-right: 0 !important; } }

/* زر الواتساب العائم أصغر قليلاً على الهاتف حتى لا يغطي النصوص */
@media (max-width: 767px) {
  #wa-float .tk-wa { height: 52px; min-width: 52px; border-width: 2px; }
  #wa-float .tk-wa svg { width: 28px; height: 28px; }
}

/* v120: عند إخفاء التبويبات أثناء التعديل (32.js / 31.js) يبقى الإخفاء فعّالاً على الهاتف */
.ex-header > [data-ex-pill].tk-p-hide,
.ex-header > [data-ex-pill].tk-t1-hide { display: none !important; }