.todo-widget-container {
   backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    font-family: 'Inter', sans-serif; 
    color: var(--text-primary);
    backdrop-filter: blur(20px);
    padding: 15px;
    border-radius: 10px;
    width: 30%;
    margin-top: 5px;
}
.todo-title {
  font-size: 18px;
  font-weight: 600;
  color:var(--text-secondary) ;
  margin-bottom: 10px;
  text-align: center;
}

        /* أنماط قسم إضافة المهام */
        .add-task-section {
            display: flex; /* flex */
            margin-bottom: 1rem; /* mb-6 */
            justify-content:space-between;
        }

        /* أنماط حقل الإدخال */
        #taskInput {
            flex-grow: 1; /* باه قد ما كانت الكتيبة بزاف نةرمال بالنسبة ليه يبقا يكبر */
            padding: 0.5rem; /* p-3 */
            border: 1px solid #f4f7fc; /* border border-gray-300 */
            border-radius:6px; /* rounded-l-lg */
            outline: none; /* focus:outline-none */
             color:var(--text-secondary) ; /* text-gray-700 */
          
        }
       

        /* أنماط زر الإضافة */
        #addTaskBtn {
            background-color: #129c6e; /* bg-blue-600 */
            color: white; /* text-white */
            padding: 0.6rem; /* p-3 */
            border-radius:6px; /* rounded-r-lg */
            border: none;
            cursor: pointer;
            margin-left: 5px;
            transition: background-color 0.2s ease; /* hover:bg-blue-700 transition-colors duration-200 */
            outline: none; /* focus:outline-none */
        }
        #addTaskBtn:hover {
            background-color: #0f7f59; /* hover:bg-blue-700 */
        }
       
        /* أنماط قائمة المهام */
        #taskList {
            list-style: none; /* إزالة نقاط القائمة الافتراضية */
            padding: 0;
            margin: 0;
            display: flex; /* space-y-3 */
            flex-direction: column; /* space-y-3 */
            gap: 0.75rem; /* space-y-3 */
        }

        /* أنماط عناصر المهمة الفردية */
        .task-item {
            display: flex; /* flex */
            align-items: center; /* items-center */
            justify-content: space-between; /* justify-between */
            background-color: #edf4fa; /* bg-gray-50 */
            padding: 0.6rem; /* p-3 */
            border-radius:6px; /* rounded-md */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            transition: all 0.2s ease; /* transition-all duration-200 */
        }

        /* أنماط نص المهمة */
        .task-text {
            font-size: 1rem; /* text-lg */
            color: black; /* text-gray-800 */
            flex-grow: 1; /* flex-grow */
            cursor: pointer;
             /* التعديلات الجديدة لالتفاف النص */
            overflow-wrap: break-word; /* تسمح بكسر الكلمات الطويلة */
            min-width: 0; /* تسمح للعنصر بالانكماش داخل حاوية flex */
        }

        /* أنماط المهام المكتملة */
        .task-item.line-through .task-text {
            text-decoration: line-through; /* line-through */
            color: #6b7280; /* text-gray-500 */
        }
        .task-item.bg-green-50 {
            background-color: #f0fdf4; /* bg-green-50 */
        }
        .task-item.hover\:bg-green-100:hover {
            background-color: #dcfce7; /* hover:bg-green-100 */
        }

        /* أنماط حاوية أزرار الإجراءات */
        .actions-div {
            display: flex; /* flex */
            align-items: center; /* items-center */
            margin-left: 1rem; /* ml-4 */
        }

        /* أنماط زر الحذف */
        .delete-button {
            color: #f85656; /* text-red-500 */
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem; /* حجم الأيقونة */
            transition: color 0.2s ease; /* hover:text-red-700 transition-colors duration-200 */
            outline: none; /* focus:outline-none */
        }
        .delete-button:hover {
            color: #f82727; /* hover:text-red-700 */
        }


        .edit-button {
  color: #129c6e;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  margin-right: 8px;
}
.edit-button:hover {
  color: #0f7f59;
}

.task-edit-input {
  flex-grow: 1;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}