/* --- الإعدادات الأساسية --- */
body { 
    background: linear-gradient(rgba(10, 15, 25, 0.9), rgba(10, 15, 25, 0.9)), url('bg.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    color: #e0e0e0; 
    font-family: 'Montserrat', sans-serif; 
    margin: 0; 
	body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.header {
    margin-bottom: 0 !important;
}
}

/* --- الهيدر الفخم --- */
.header { 
    display: flex; 
    justify-content: center; 
    background: rgba(8, 12, 18, 0.95); 
    padding: 25px; 
    gap: 40px; 
    border-bottom: 3px solid #FFD31C; 
    box-shadow: 0 0 30px rgba(255, 211, 28, 0.3);
}
.header a { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 15px; 
    transition: 0.4s;
    text-shadow: 0 0 5px rgba(255, 211, 28, 0.5);
}
.header a:hover { 
    color: #FFD31C; 
    text-shadow: 0 0 15px #FFD31C, 0 0 25px #FF9900;
}

/* --- التخطيط العام --- */
.container { 
    width: 1200px; 
    margin: 20px auto; 
    display: flex; 
    gap: 20px; 
    align-items: flex-start; 
    flex-wrap: nowrap;
}
.sidebar { 
    width: 300px; 
    flex-shrink: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* --- التعديل: المحتوى مع سكرول داخلي --- */
.content { 
    flex: 1; 
    min-height: 600px; 
    max-height: 800px; /* تحديد الارتفاع لمنع المط */
    overflow-y: auto;  /* إضافة سكرول داخلي */
    overflow-x: hidden;
    padding: 20px;
}

/* --- سكرول ذهبي فخم --- */
.content::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-track { background: rgba(8, 12, 18, 0.9); }
.content::-webkit-scrollbar-thumb { background: #FFD31C; border-radius: 4px; }

/* --- تأثير الزجاج الفاخر --- */
.glass { 
    background: rgba(12, 17, 27, 0.85) !important; 
    backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 211, 28, 0.3) !important; 
    border-radius: 12px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 211, 28, 0.1); 
    padding: 20px;
}

/* --- عناوين الجداول (تأثير ناري ذهبي) --- */
h3, .section-title { 
    color: #FFD31C !important; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    text-shadow: 0 0 10px #FF9900, 0 0 20px #FF4500; 
    border-bottom: 2px solid rgba(255, 211, 28, 0.3);
    padding-bottom: 10px;
}

/* --- تحسين الجداول --- */
table { 
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0 5px; 
    background: rgba(20, 20, 25, 0.5); 
}
th { 
    color: #FFD31C !important; 
    background: rgba(0,0,0,0.3) !important;
    text-shadow: 0 0 5px #FFD31C;
    padding: 15px;
}
td {
    padding: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}
tr:hover td { 
    background: rgba(255, 211, 28, 0.08) !important; 
}

/* --- الأزرار الذهبية --- */
button { 
    background: linear-gradient(to bottom, #FFD31C, #b89800); 
    border: 1px solid #FFD31C;
    padding: 10px 20px; 
    color: #000; 
    font-weight: 900; 
    cursor: pointer; 
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 211, 28, 0.4);
}
button:hover {
    background: #fff;
    box-shadow: 0 0 20px #FFD31C;
}

/* --- التجاوب مع الموبايل --- */
@media screen and (max-width: 768px) {
    .container { display: block !important; width: 95% !important; }
    .sidebar, .content { width: 100% !important; }
}
/* --- ضغط الموقع لأعلى --- */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.header {
    margin-bottom: 0 !important;
}