CSS01Layout.css

*{ margin:0; padding:0; box-sizing:border-box; font-family:"Noto Kufi Arabic",sans-serif; text-decoration:none; }
body{ background:#F4F4F4; direction:rtl; }
/* تنسيقات عامة */
.layout{ display:flex; min-height:100vh; }
/* الشريط الجانبي */
.sidebar{ width:220px; height:100vh; position:fixed; top:0; right:0; background:linear-gradient(to bottom,#3E2454,#A48BB5); color:#FFFFFF; display:flex; flex-direction:column; justify-content:space-between; z-index:1000; }
.sidebar-top{ width:100%; }
/* الشعار */
.sidebar-logo{ height:82px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,0.18); }
.sidebar-logo img{ width:120px; height:auto; object-fit:contain; }
/* روابط القائمة */
.sidebar-menu{ list-style:none; margin-top:26px; }
.sidebar-menu li{ margin-bottom:12px; }
.sidebar-menu a{ color:#FFFFFF; font-size:17px; font-weight:600; display:block; padding:14px 22px; text-align:center; transition:.25s; position:relative; }
/* الصفحة الحالية في القائمة */
.sidebar-menu a.active{ color:#70A0AF; background:rgba(255,255,255,0.12); }
.sidebar-menu a.active::after{ content:""; position:absolute; right:0; top:0; width:6px; height:100%; background:#70A0AF; }
/* الجزء السفلي من الشريط */
.sidebar-bottom{ padding:0 10px 8px; display:flex; justify-content:center; }
/* زر تسجيل الخروج */
.logout-btn{ background:#F3E6DD; border:none; border-radius:18px; padding:7px 14px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px; box-shadow:0 2px 1px rgba(0,0,0,0.15); transition:transform .3s, box-shadow .3s; }
.logout-btn:hover{ transform:scale(1.04); box-shadow:0 3px 2px rgba(0,0,0,0.18); }
.logout-icon{ width:15px; height:15px; object-fit:contain; }
/* مساحة المحتوى */
.main-content{ margin-right:220px; width:calc(100% - 220px); min-height:100vh; display:flex; flex-direction:column; }
/* الهيدر */
.header{ min-height:82px; position:sticky; top:0; z-index:900; border-bottom:1px solid #d9d9d9; background:#F4F4F4; display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:10px 30px; }
.page-heading{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; text-align:right; }
.page-title{ font-size:22px; font-weight:700; color:#111111; line-height:1.4; text-align:right; width:100%; }
.page-description{ font-size:14px; font-weight:600; color:#1f1f1f; line-height:1.6; text-align:right; }
/* أيقونة الإعدادات */
.header-icons{ display:flex; align-items:center; }
.settings-dropdown{ position:relative; display:inline-block; }
.settings-dropdown::after{ content:""; position:absolute; top:100%; left:0; width:100%; height:10px; }
.menu-icon{ width:32px; height:32px; cursor:pointer; display:block; object-fit:contain; }
.dropdown-menu{ position:absolute; top:100%; left:0; background:#FFFFFF; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1); width:200px; display:none; overflow:hidden; border:1px solid #ececec; z-index:100; }
.settings-dropdown:hover .dropdown-menu{ display:block; }
.dropdown-menu a{ display:block; padding:10px 14px; color:#333333; font-size:14px; text-align:right; }
.dropdown-menu a:hover{ background:#f2f2f2; }
/* مساحة الصفحة نفسها */
.page{ padding:30px; }
.page-top{ display:flex; justify-content:space-between; align-items:center; padding:25px 40px; }
/* زر الرجوع */
.backbtn{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
/* أيقونة السهم الخاصة بالرجوع */
.backicon{ width:42px; height:42px; object-fit:contain; }
/* زر بيانات الحساب */
.header-left{ display:flex; align-items:center; }
.profile-btn{ background:#FFFFFF; color:#3E2454; padding:8px 18px; border-radius:20px; font-size:14px; font-weight:600; border:1px solid #ddd; transition:.3s; }
/* عند المرور على الزر */
.profile-btn:hover{ background:#3E2454; color:#FFFFFF; }
/* السؤال */
.faq-q{ font-weight:700; font-size:15px; color:#3E2454; margin-top:12px; }
/* الإجابة */
.faq-a{ font-size:14px; color:#555555; line-height:1.8; margin-bottom:12px; }