body{

margin:0;

font-family:Tahoma;

display:flex;

height:100vh;

}

.sidebar{

width:250px;

background:#1f2937;

color:white;

padding:20px;

}

.sidebar ul{

list-style:none;

padding:0;

}

.sidebar li{

padding:12px;

cursor:pointer;

margin-bottom:5px;

background:#374151;

border-radius:5px;

}

.sidebar li:hover{

background:#4b5563;

}

.content{

flex:1;

padding:20px;

background:#f3f4f6;

}

.page{

display:none;

}
.cards{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.card{

background:white;

padding:20px;

border-radius:10px;

box-shadow:0 0 10px rgba(0,0,0,.1);

width:220px;

text-align:center;

}

.card h3{

margin:0;

margin-bottom:10px;

}

.card p{

font-size:24px;

font-weight:bold;

color:#2563eb;

}

/* الحقول */

input,
select{

width:100%;

padding:10px;

border:1px solid #ccc;

border-radius:5px;

box-sizing:border-box;

}

/* الأزرار */

button{

background:#2563eb;

color:white;

border:none;

padding:10px 15px;

border-radius:5px;

cursor:pointer;

}

button:hover{

opacity:.9;

}

/* الجداول */

table{

width:100%;

border-collapse:collapse;

background:white;

}

table th,
table td{

border:1px solid #ddd;

padding:10px;

text-align:center;

}

table th{

background:#1f2937;

color:white;

}

/* العناوين */

h1{

margin-top:0;

}

/* تنسيق التنبيهات */

#alerts{

background:white;

padding:15px;

border-radius:10px;

box-shadow:0 0 10px rgba(0,0,0,.1);

}