/* ============================================================
   أنماط نظام التداول الذكي
   ============================================================ */

* { box-sizing: border-box; }

body { font-family: 'Tajawal', sans-serif; }

.tab-btn {
  padding: 0.6rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  color: #94a3b8;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
.tab-btn:hover { color: #e2e8f0; background: rgba(255,255,255,0.03); }
.tab-btn.active {
  color: #fbbf24;
  border-bottom: 2px solid #fbbf24;
  background: rgba(251,191,36,0.06);
}

.tab-panel.hidden { display: none; }

.card {
  background: linear-gradient(180deg, rgba(30,41,59,0.6), rgba(15,23,42,0.6));
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 1rem;
  padding: 1.25rem;
}
.card-title {
  font-weight: 900;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  color: #e2e8f0;
}

.stat-card {
  background: linear-gradient(160deg, rgba(30,41,59,0.7), rgba(15,23,42,0.7));
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 1rem;
  padding: 1rem;
}
.stat-label { color: #94a3b8; font-size: 0.75rem; font-weight: 700; }
.stat-value { font-size: 1.5rem; font-weight: 900; margin-top: 0.25rem; }

.form-label { display: block; font-size: 0.8rem; font-weight: 700; color: #cbd5e1; margin-bottom: 0.35rem; }
.form-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: #e2e8f0;
  outline: none;
}
.form-input:focus { border-color: #f59e0b; }
.form-hint { font-size: 0.7rem; color: #64748b; margin-top: 0.25rem; }

.toggle-checkbox { width: 2.5rem; height: 1.4rem; accent-color: #f59e0b; cursor: pointer; }

table th, table td { text-align: right; }
tbody tr { border-bottom: 1px solid rgba(148,163,184,0.08); }
tbody tr:hover { background: rgba(255,255,255,0.02); }

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}
.badge-long { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.badge-short { background: rgba(244,63,94,0.15); color: #fb7185; border: 1px solid rgba(244,63,94,0.3); }
.badge-neutral { background: rgba(148,163,184,0.15); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.badge-both { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }

.text-profit { color: #34d399; }
.text-loss { color: #fb7185; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* وميض خفيف عند تحديث قيمة مباشرة من البث اللحظي */
.live-flash {
  background-color: rgba(252, 213, 53, 0.18);
  transition: background-color 0.4s ease;
  border-radius: 4px;
}

/* ============================================================
   نبضات اتجاهية بنمط بينانس: صعود = خضراء / هبوط = حمراء
   تُطبَّق للحظة على كل رقم يتغير — تعطي إحساس التدفق اللحظي
   ============================================================ */
/* نبضة لون الرقم نفسه (كما في تطبيق بينانس): يتم تعيين اللون مباشرة عبر
   inline style من الـJS (لأن !important داخل @keyframes يتجاهله المتصفح بحسب المواصفة)
   ونستخدم transition ليتم الرجوع للون الأصلي بسلاسة عند إزالة inline. */
.tick-flash { transition: color 0.5s ease-out; }

/* أسهم اتجاه صغيرة تظهر بجانب السعر */
.tick-arrow-up::after   { content: ' ▲'; color: var(--bn-green); font-size: 0.7em; }
.tick-arrow-down::after { content: ' ▼'; color: var(--bn-red);   font-size: 0.7em; }

/* ============================================================
   جلد بينانس الرسمي (Binance Skin)
   الألوان الرسمية: الأصفر #FCD535 - الأخضر (صعود) #0ECB81 - الأحمر (هبوط) #F6465D
   الخلفية #0B0E11 - الأسطح #181A20 - الحدود #2B3139 - النص الثانوي #848E9C
   ============================================================ */
:root {
  --bn-yellow: #D97706; /* warm gold / amber */
  --bn-yellow-dark: #B45309;
  --bn-green: #10B981; /* vibrant emerald green */
  --bn-red: #EF4444; /* vibrant rose red */
  --bn-bg: #F8FAFC; /* ultra-clean bright slate background */
  --bn-surface: #FFFFFF; /* clean white card */
  --bn-surface-2: #F1F5F9; /* light surface for tables/secondary elements */
  --bn-border: #E2E8F0; /* soft gray border */
  --bn-text: #0F172A; /* dark slate text */
  --bn-text-2: #475569; /* slate text-2 */
}

/* الخلفية العامة والنص */
body {
  background: linear-gradient(135deg, #FFFDF5 0%, #F5FFF8 40%, #EEF5FF 100%) !important;
  color: var(--bn-text) !important;
  min-height: 100vh;
}
body.bg-slate-950 {
  background: linear-gradient(135deg, #FFFDF5 0%, #F5FFF8 40%, #EEF5FF 100%) !important;
  color: var(--bn-text) !important;
}

/* Header & Ticker Overrides */
header, .bg-slate-950\/90 {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--bn-border) !important;
}
#market-ticker {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid var(--bn-border) !important;
}
.ticker-symbol {
  color: var(--bn-text) !important;
}
.ticker-price {
  color: var(--bn-text) !important;
}

/* Card Overrides */
.card, .stat-card, #binance-wallet-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}
#binance-wallet-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 252, 240, 0.95)) !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

/* Tab buttons */
.tab-btn {
  color: var(--bn-text-2) !important;
}
.tab-btn:hover {
  color: var(--bn-text) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
.tab-btn.active {
  color: var(--bn-yellow-dark) !important;
  border-bottom-color: var(--bn-yellow) !important;
  background: rgba(217, 119, 6, 0.08) !important;
}

/* Forms & Inputs */
.form-input, input, select {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: var(--bn-text) !important;
}
.form-input:focus, input:focus, select:focus {
  border-color: var(--bn-yellow) !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.1) !important;
}
.form-hint {
  color: #64748B !important;
}

/* Headings & Text Overrides */
.card-title, h1, h2, h3, h4, h5, h6 {
  color: var(--bn-text) !important;
}
.text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400 {
  color: var(--bn-text-2) !important;
}
.text-slate-500, .text-slate-600 {
  color: #64748B !important;
}

/* Badges & Accents */
.badge-long {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--bn-green) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.badge-short {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--bn-red) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
.badge-both {
  background: rgba(217, 119, 6, 0.1) !important;
  color: var(--bn-yellow-dark) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}
#live-badge.border-slate-600 {
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

/* Tables */
table th {
  color: var(--bn-text-2) !important;
}
table td {
  color: var(--bn-text) !important;
}
tbody tr {
  border-bottom: 1px solid #F1F5F9 !important;
}
tbody tr:hover {
  background: rgba(15, 23, 42, 0.02) !important;
}

/* Background Utility Classes */
.bg-slate-800 {
  background-color: var(--bn-surface-2) !important;
  color: var(--bn-text) !important;
}
.bg-slate-800.hover\:bg-slate-700:hover, .hover\:bg-slate-700:hover {
  background-color: #E2E8F0 !important;
}
.bg-slate-900 {
  background-color: var(--bn-surface-2) !important;
}
.border-slate-800, .border-slate-700 {
  border-color: var(--bn-border) !important;
}

/* Scrollbars */
::-webkit-scrollbar-track {
  background: #F8FAFC;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

/* Modal and Overlays */
#detail-modal > div:last-child {
  background-color: #FFFFFF !important;
  border-color: var(--bn-border) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Additional text/icon states */
.text-profit {
  color: var(--bn-green) !important;
}
.text-loss {
  color: var(--bn-red) !important;
}

.ticker-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.ticker-symbol { color: var(--bn-text); }
.ticker-price { color: var(--bn-text); }
.ticker-change-up { color: var(--bn-green); }
.ticker-change-down { color: var(--bn-red); }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-ticker { animation: ticker-scroll 60s linear infinite; }
.animate-ticker:hover { animation-play-state: paused; }

/* تخصيص شريط التمرير لقائمة آراء الخبراء التاريخية */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #F8FAFC;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* فرض الأرقام الإنجليزية (اللاتينية) في الواجهة بالكامل */
input, select, textarea, span, p, div, td, th, h1, h2, h3, h4, h5, h6 {
  font-variant-numeric: lining-nums !important;
  -webkit-font-feature-settings: "lnum" 1 !important;
  font-feature-settings: "lnum" 1 !important;
  -webkit-locale: "en" !important;
}

/* تأكيد الاتجاه من اليسار لليمين للأرقام والمدخلات الرقمية مع الحفاظ على محاذاتها */
input[type="number"], input[type="text"].force-en, .font-mono {
  direction: ltr !important;
  unicode-bidi: bidi-override !important;
}