/* =========================================
   1. الإعدادات العامة (General Resets)
========================================= */
body { 
    margin: 0; 
    padding: 0; 
    background-color: #0f172a; 
    color: #f8fafc; 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    height: 100dvh; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
}

.brand-title { color: #22c55e; font-size: 2.5rem; margin: 0; filter: drop-shadow(0 0 10px #22c55e); }
.login-section { display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; background-color: #020617; }
.login-box { background-color: #1e293b; padding: 30px; border-radius: 20px; width: 90%; max-width: 380px; text-align: center; }
.app-container { display: flex; flex-direction: column; height: 100%; width: 100%; }

/* =========================================
   2. الشريط العلوي (Header)
========================================= */
.header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background-color: #1e293b; border-bottom: 1px solid #334155; }
.header-left .logo { font-weight: bold; font-size: 1.1rem; }
.user-tag { background: #0f172a; padding: 6px 12px; border-radius: 20px; font-size: 0.9rem; border: 1px solid #334155; }

/* =========================================
   3. الحاويات الرئيسية (Views & Panels)
========================================= */
.view-section { display: none; flex-direction: column; flex-grow: 1; height: calc(100dvh - 75px); overflow-y: auto; overflow-x: hidden; }
.view-section.active { display: flex; }
.scrollable-panel { padding: 15px; }

/* 🌟 هذا هو الحل النظيف لمشكلة فراغ العنوان بدون استخدام أكواد إجبارية 🌟 */
.scrollable-panel h2 { margin-top: 0; margin-bottom: 15px; }

.chart-area { min-height: 280px; flex-shrink: 0; background-color: #020617; width: 100%; }
.trading-panel { padding: 20px 15px 90px 15px; background-color: #1e293b; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -5px 15px rgba(0,0,0,0.4); }

/* =========================================
   4. قسم التداول (Trading Dashboard)
========================================= */
.timeframe-bar-wrapper { width: 100%; background-color: #020617; overflow-x: auto; padding: 8px 0; border-bottom: 1px solid #1e293b; }
.timeframe-bar { display: flex; gap: 4px; padding: 0 10px; width: max-content; }
.timeframe-bar button { background-color: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s; }
.timeframe-bar button.active-tf { background-color: #3b82f6; border-color: #3b82f6; color: white; transform: scale(1.05); }

.pnl-dashboard { background: #020617; border-bottom: 1px solid #334155; padding: 10px 15px; }
.pnl-header { font-size: 0.8rem; color: #94a3b8; margin-bottom: 8px; font-weight: bold; }
.pnl-list-container { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
.pnl-card { background: #1e293b; border: 1px solid #334155; padding: 8px 12px; border-radius: 8px; display: flex; flex-direction: column; min-width: 100px; }
.pnl-card.profit { border-color: rgba(34, 197, 94, 0.5); }
.pnl-card.loss { border-color: rgba(239, 68, 68, 0.5); }

/* معلومات العملة (Coin Info) */
.coin-info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.coin-meta { display: flex; align-items: center; gap: 12px; }
.coin-icon-style, .coin-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.coin-avatar { display: flex; justify-content: center; align-items: center; font-weight: bold; color: white; background-color: #8b5cf6; font-size: 1.2rem; }
.coin-title-text { font-size: 1.4rem; font-weight: bold; }
.coin-price-box { font-size: 1.3rem; font-weight: bold; color: #22c55e; }
.user-position-info { display: flex; justify-content: space-between; font-size: 0.9rem; color: #94a3b8; margin-bottom: 15px; background: #0f172a; padding: 10px; border-radius: 8px; }

/* أزرار ونماذج الإدخال (Inputs & Buttons) */
.amount-input-wrapper input, .form-group input, .form-group select { width: 100%; padding: 14px; border-radius: 10px; border: 1px solid #334155; background-color: #0f172a; color: white; font-size: 1.1rem; box-sizing: border-box; text-align: center; margin-bottom: 10px; }
.percent-shortcut-row { display: flex; gap: 6px; justify-content: space-between; margin-bottom: 10px; }
.btn-shortcut { background: #1e293b; color: #22c55e; border: 1px solid #22c55e; padding: 8px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; flex: 1; font-weight: bold; }
.btn-shortcut.sell-shortcut { color: #ef4444; border: 1px solid #ef4444; }

.actions { display: flex; gap: 12px; margin-top: 10px; }
.btn-buy, .btn-sell, .btn-primary { flex: 1; padding: 14px; border: none; border-radius: 10px; color: white; font-weight: bold; font-size: 1.1rem; cursor: pointer; }
.btn-buy { background-color: #22c55e; } 
.btn-sell { background-color: #ef4444; } 
.btn-primary { background-color: #8b5cf6; width: 100%; }

.bottom-dashboard-col { background-color: #0f172a; padding: 15px; border-radius: 12px; border: 1px solid #334155; margin-bottom: 15px; }
.section-sub-title { font-size: 1rem; margin: 0 0 12px 0; color: #94a3b8; border-bottom: 1px solid #1e293b; padding-bottom: 8px; }
.mt-3 { margin-top: 15px; }

/* شبكة العملات (Coin Grid) */
.coin-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; max-height: 260px; overflow-y: auto; padding-right: 5px; }
.coin-grid-btn { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: white; transition: 0.2s; }
.coin-grid-btn.active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
.coin-grid-icon-box { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: #8b5cf6; overflow: hidden; }
.coin-grid-icon-box img { width: 100%; height: 100%; object-fit: cover; }

/* جدول الحاملين (Holders Table) */
.holders-list-table-wrapper { max-height: 220px; overflow-y: auto; }
.holders-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: right; }
.holders-table th { color: #64748b; padding-bottom: 10px; border-bottom: 1px solid #334155; }
.holders-table td { padding: 10px 4px; border-bottom: 1px solid #1e293b; font-family: monospace; }

/* =========================================
   5. قسم المحفظة (Wallet Cards)
========================================= */
/* الكرت المخصص للعنوان ليكون نظيفاً في الـ HTML */
.wallet-address-card { 
    background: #1e293b; 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px dashed #334155; 
    margin-bottom: 15px; 
    transition: 0.2s; 
    cursor: pointer; 
}
.wallet-address-card:hover { border-color: #3b82f6; }

.action-card { background: #020617; padding: 18px; border-radius: 12px; border: 1px solid #334155; margin-bottom: 18px; }
.asset-card { background-color: #1e293b; padding: 16px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; margin-bottom: 10px; }
.usdt-card { border: 1px solid #22c55e; }

/* مربع العملة الصغير داخل المحفظة في الأعلى */
.portfolio-item {
    display: flex; align-items: center; gap: 8px; padding: 2px 10px; 
    background: #1e293b; border-radius: 6px; border: 1px solid #334155;
    min-width: 80px; height: 30px; font-size: 12px; color: white;
}

/* =========================================
   6. الشريط السفلي (Bottom Nav)
========================================= */
.bottom-nav { 
    display: flex; 
    background-color: #1e293b; 
    border-top: 1px solid #334155; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    z-index: 100; 
    height: 65px; /* زيادة الارتفاع قليلاً لراحة العين والموبايل */
}

.nav-item { 
    flex: 1; 
    display: flex; 
    justify-content: center; /* توسيط النص أفقياً في منتصف المساحة */
    align-items: center; /* توسيط النص عمودياً بدقة */
    color: #64748b; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 1.05rem; 
    transition: all 0.3s ease; 
    border-top: 3px solid transparent; /* خط شفاف مخفي يحافظ على توازن الزرين */
}

.nav-item.active-nav { 
    color: #22c55e; 
    border-top: 3px solid #22c55e; /* الخط الأخضر الجميل في الأعلى للزر النشط */
    background-color: #0f172a; 
}