body { font-family: Tahoma, sans-serif; direction: rtl; margin: 20px; background:#f9f9f9; }
h1 { margin-bottom: 20px; }
.tabs { margin-bottom: 10px; display: flex; flex-wrap: wrap; }
.tab {
    display: flex; align-items: center; padding: 10px; margin-left: 5px;
    background: #007bff; color: white; border-radius: 5px 5px 0 0;
    cursor: grab; user-select: none; gap: 5px; transition: background 0.2s;
}
.tab:hover { background: #0069d9; }
.tab button { background: rgba(255,255,255,0.2); border: none; color: white;
    padding: 2px 6px; cursor: pointer; border-radius: 3px; font-weight: bold; }
.tab button:hover { background: rgba(255,255,255,0.4); }
.tab.active { background: #0056b3; }
.tab-content { border: 1px solid #0056b3; background: white; padding: 15px;
    border-radius: 0 5px 5px 5px; display: none; }
.tab-content.active { display: block; }
.message { background: #d4edda; color: #155724; padding: 10px; border-radius: 5px; margin-bottom: 15px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ccc; padding: 8px; vertical-align: middle; }
img.thumb { width: 60px; height: auto; border-radius: 5px; border: 1px solid #ccc; }
.edit-icon, .delete-icon { cursor: pointer; margin-right: 5px; color: #007bff; }
.delete-icon { color: red; }
input[type=text], textarea, input[type=number], input[type=file] { width: 100%; box-sizing: border-box; padding: 5px; }
.action-btn { background: #28a745; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
.action-btn:hover { background: #218838; }