/* =====================================================================
   Empire skin — يُلبس تطبيق الترتيب (gge.sa1.top) هوية ضرغام الموحّدة.
   يعتمد على رموز empire-ui.css (المحمّلة من sa1.top) ويغطي أصناف Tailwind في الحزمة.
   ===================================================================== */

/* الجسم والقسم الجذري للتطبيق */
body.eu-body { background: var(--bg-0) !important; color: var(--text) !important; font-family: var(--font-body) !important; }
#app { position: relative; }
#app > section { position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
  background: transparent !important; color: var(--text) !important; padding-top: 0 !important; }
#app > section.dark, #app > section:not(.dark) { background: transparent !important; color: var(--text) !important; }

/* شعار اللعبة داخل التطبيق (الهيكل يملك شعاره) */
#app img[alt="Game logo"] { display: none !important; }

/* زر الإعدادات */
#app button[aria-label="Settings"] { position: absolute !important; top: 10px !important; inset-inline-start: 10px !important; z-index: 20;
  width: 42px; height: 42px; padding: 0 !important; border-radius: 10px !important; border: 1px solid var(--line) !important;
  background: rgba(var(--gold-rgb), .08) !important; color: var(--gold) !important; transition: all .25s var(--ease); }
#app button[aria-label="Settings"]:hover { background: rgba(var(--gold-rgb), .16) !important; border-color: var(--line-strong) !important; box-shadow: var(--glow-gold); }

/* شريط الفلاتر (السيرفر / الرتبة / لاعب-تحالف) */
#app > section > div.grow > div.flex.flex-wrap { background: linear-gradient(160deg, var(--bg-3), var(--bg-2)) !important; border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 10px 10px 60px; gap: 10px; margin: 0 0 14px !important; box-shadow: var(--shadow-1); position: relative; }
html[dir="rtl"] #app > section > div.grow > div.flex.flex-wrap { padding: 10px 60px 10px 10px; }
#app > section > div.grow > div.flex.flex-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--ember)); opacity: .8; }
#app > section > div.grow > div.flex.flex-wrap > div { padding: 0 2px; }

/* القوائم المنسدلة العائمة */
#app select.peer { background-color: rgba(0,0,0,.3) !important; border: 1px solid var(--line) !important; border-radius: 10px !important;
  color: var(--text) !important; font-family: var(--font-num) !important; font-weight: 600; min-height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4a24c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-size: 14px !important; transition: border-color .25s, box-shadow .25s; }
#app select.peer:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .15) !important; outline: none !important; }
#app select.peer option { background: var(--bg-3); color: var(--text); }
#app label.absolute.top-0 { color: var(--text-3) !important; font-family: var(--font-body); font-weight: 700; }

/* مفاتيح التبديل (لاعب/تحالف، GGE/E4K) */
#app [id^="toggle-switch-"] { background: rgba(0,0,0,.3) !important; border: 1px solid var(--line); border-radius: 10px !important; min-height: 56px; }
#app [id^="toggle-switch-"] label span { color: var(--text-2); font-weight: 700; transition: color .2s; }
#app [id^="toggle-switch-"] label:has(input:checked) span { color: var(--text-on-accent); }
#app [id^="toggle-switch-"] label:has(input:checked) img { filter: brightness(0) saturate(0); opacity: .8; }
#app [id^="toggle-switch-"] input[type="radio"]:checked::before { background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3)) !important; box-shadow: 0 4px 12px rgba(var(--gold-rgb), .35) !important; border-radius: 8px !important; }
#app [id^="toggle-switch-"] input[type="radio"]:focus { box-shadow: none !important; }

/* بطاقة الجدول */
#app div.border.rounded-lg.overflow-hidden.shadow { border: 1px solid var(--line) !important; border-radius: 16px !important;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2)) !important; box-shadow: var(--shadow-2) !important; }
#app .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--line-soft) !important; }
#app table { font-family: var(--font-num); }
#app thead { background: rgba(var(--gold-rgb), .1) !important; }
#app thead th { color: var(--gold) !important; letter-spacing: .12em; font-weight: 700 !important; border-bottom: 1px solid var(--line-strong); }
#app tbody tr { transition: background .2s; }
#app tbody tr:hover { background: rgba(var(--gold-rgb), .08) !important; }
#app tbody td { color: var(--text-2) !important; font-size: 1rem !important; font-weight: 600 !important; padding: 12px 10px !important; }
#app tbody td.font-medium, #app tbody td:nth-child(2) { color: var(--text) !important; }
#app thead th { padding: 12px 10px !important; }
/* المراكز الثلاثة الأولى */
#app tbody tr.bg-yellow-300, #app tbody tr.dark\:bg-yellow-600 { background: linear-gradient(90deg, rgba(243,201,105,.30), rgba(243,201,105,.10)) !important; color: var(--medal-gold) !important; font-weight: 700; }
#app tbody tr.bg-gray-300, #app tbody tr.dark\:bg-gray-600 { background: linear-gradient(90deg, rgba(201,206,214,.24), rgba(201,206,214,.08)) !important; color: var(--medal-silver) !important; font-weight: 700; }
#app tbody tr.bg-yellow-700, #app tbody tr.dark\:bg-yellow-900 { background: linear-gradient(90deg, rgba(196,138,90,.28), rgba(196,138,90,.10)) !important; color: var(--medal-bronze) !important; font-weight: 700; }
#app tbody tr.bg-yellow-300 td, #app tbody tr.bg-gray-300 td, #app tbody tr.bg-yellow-700 td { color: inherit !important; }
#app tbody tr.bg-yellow-300:hover, #app tbody tr.bg-gray-300:hover, #app tbody tr.bg-yellow-700:hover { filter: brightness(1.15); }
#app tbody tr.bg-yellow-300 td:first-child::before { content: '🏆 '; font-size: .85em; }

/* عنوان الفئة + أزرار التنقل والصفحات */
#app p.min-w-\[150px\] { font-family: var(--font-display); font-weight: 700; color: var(--gold-2); font-size: 1rem !important; }
#app button.rounded-full { color: var(--text-2); border: 1px solid transparent; transition: all .2s var(--ease); }
#app button.rounded-full:hover { background: rgba(var(--gold-rgb), .12) !important; color: var(--gold-2); border-color: var(--line); }
#app button.rounded-full[aria-current="page"] { background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3)) !important; color: var(--text-on-accent) !important; text-decoration: none !important; font-weight: 700; }
#app nav[aria-label="Pagination"] button, #app nav[aria-label="Category"] button { font-family: var(--font-num); }
#app .bg-current { background-color: currentColor !important; }

/* حقل البحث */
#app input[type="text"] { background: rgba(0,0,0,.3) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; color: var(--text) !important;
  font-family: var(--font-body) !important; min-height: 44px; box-shadow: none !important; }
#app input[type="text"]:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .15) !important; }
#app input[type="text"]::placeholder { color: var(--text-3) !important; }

/* لوحة الإعدادات الجانبية */
#drawer-navigation { position: fixed !important; top: 0 !important; bottom: 0 !important; height: 100dvh !important; z-index: 1200 !important; padding-top: 18px !important;
  background: var(--bg-2) !important; color: var(--text) !important; border-inline-end: 1px solid var(--line-strong); box-shadow: var(--shadow-3); width: 18rem !important; overflow-y: auto; }
#drawer-navigation button[aria-label="Close"] { position: absolute !important; top: 12px !important; inset-inline-end: 12px !important; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; }
#drawer-navigation h5 { color: var(--gold) !important; font-family: var(--font-num); letter-spacing: .2em; font-size: .75rem !important; }
#drawer-navigation p { color: var(--text-3) !important; }
#drawer-navigation button[aria-label="Close"] { color: var(--text-2) !important; border-radius: 10px !important; }
#drawer-navigation button[aria-label="Close"]:hover { background: rgba(var(--ember-rgb), .2) !important; color: #fff !important; }
#drawer-navigation li:has(#toggle-switch-dark_mode), #drawer-navigation li:has([data-theme-picker]) { display: none; }
#drawer-navigation .text-sm.text-neutral-400 { color: var(--text-3) !important; }
#drawer-navigation a { color: var(--gold) !important; }
#app .z-50.absolute.top-0.start-0.h-dvh.w-dvw, #app .h-dvh.w-dvw { position: fixed !important; inset: 0 !important; z-index: 1190 !important; background: rgba(0,0,0,.55) !important; backdrop-filter: blur(3px); }

/* مؤشر التحميل */
#app .loader { color: var(--gold) !important; }
#app .loader-square { background: var(--gold) !important; box-shadow: 0 0 10px rgba(var(--gold-rgb), .5); }
#app .absolute.z-40.size-24 { color: var(--gold) !important; }

/* تذييل التطبيق الداخلي إن وجد */
#app footer, #app .max-w-screen-xl { color: var(--text-3) !important; }

/* حماية الهيكل من أي تنسيقات قديمة في حزمة التطبيق */
header.eu-topbar { background: var(--bg-glass) !important; color: var(--text) !important; border-bottom: 1px solid var(--line) !important; padding: 0 !important; text-align: start !important; font-size: inherit !important; }
footer.eu-footer { background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)) !important; color: var(--text-2) !important; text-align: start !important; margin-top: auto !important; padding: 0 !important; border-top: 1px solid var(--line) !important; }
html[data-theme="parchment"] footer.eu-footer { background: linear-gradient(180deg, transparent, rgba(138,90,22,.08)) !important; }
body.eu-body, body.eu-body .eu-shell { font-family: var(--font-body); }
#app { font-family: var(--font-body); }
#app table, #app nav button, #app p.min-w-\[150px\] { font-family: var(--font-num) !important; }

/* ثيم الرقّ الفاتح */
html[data-theme="parchment"] #app select.peer, html[data-theme="parchment"] #app [id^="toggle-switch-"], html[data-theme="parchment"] #app input[type="text"] { background-color: rgba(255,255,255,.6) !important; }
html[data-theme="parchment"] #app tbody td { color: var(--text-2) !important; }
html[data-theme="parchment"] #app tbody td.font-medium, html[data-theme="parchment"] #app tbody td:nth-child(2) { color: var(--text) !important; }
html[data-theme="parchment"] #app thead { background: rgba(var(--gold-rgb), .14) !important; }
html[data-theme="parchment"] #app tbody tr.bg-yellow-300, html[data-theme="parchment"] #app tbody tr.bg-gray-300, html[data-theme="parchment"] #app tbody tr.bg-yellow-700 { color: var(--text) !important; }
html[data-theme="parchment"] #app button.rounded-full { color: var(--text-2); }
html[data-theme="parchment"] #drawer-navigation { background: var(--bg-1) !important; }

@media (max-width: 720px) {
  #app > section > div.grow > div.flex.flex-wrap { padding: 56px 10px 10px !important; }
  #app button[aria-label="Settings"] { top: 8px !important; }
}