/* ✅ زر التبديل */
        #toggle-dark-mode {
            position: absolute;
            top: 60px;
            right: 20px;
            z-index: 999999;
            color: black;
            padding: 8px 12px;
            font-size: 15px;
            font-weight: bold;
            border-radius: 15px;
            background-color: #f3c623;
            border: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            text-transform: capitalize;
            transition: background-color 0.3s, color 0.3s;
        }

        /* ✅ الوضع الداكن */
        .dark-mode body {
            background-color: #121212 !important;
            color: #fff !important;
        }

        .dark-mode a,
        .dark-mode h1,
        .dark-mode h2,
        .dark-mode h3,
        .dark-mode h4,
        .dark-mode h5,
        .dark-mode h6,
        .dark-mode div,
        .dark-mode span,
        .dark-mode strong {

            color: rgb(195, 146, 34) !important;
        }





        .dark-mode p,
        .dark-mode li,
        .dark-mode td,
        .dark-mode th,
        .dark-mode label {
            color: white !important;
        }

        /* ✅ استثناء عناصر الشات */
        .chat-container span {
            color: black !important;
        }

        /* ✅ الوضع الداكن لجميع المكونات */
        /* .dark-mode .navbar, */
        .dark-mode .top-bar-container,
        .dark-mode .card,
        .dark-mode .search-area,
        .dark-mode .form-control,
        .dark-mode textarea,
        .dark-mode select,
        .dark-mode .modal-content,
        .dark-mode .table,
        .dark-mode .table-striped,
        .dark-mode .alert,
        .dark-mode .nav-tabs,
        .dark-mode .tab-content,
        .dark-mode .pagination,
        .dark-mode .page-link,
        .dark-mode .badge,
        .dark-mode .fixed-footer,
        .dark-mode .label {
            background-color: #2C2C2C !important;
            color: #ffffff !important;
            border-color: #555 !important;
        }


        /* ✅ خصائص إضافية لبعض العناصر لتوضيح الحدود */
        .dark-mode .table th,
        .dark-mode .table td,
        .dark-mode .page-link {
            border-color: #444 !important;
        }

        .dark-mode .btn {
            border-color: #777;
        }

        .dark-mode .dropdown-menu a {
            color: white !important;
        }

        .dark-mode input {
            color: #ff2727 !important;

        }



        .dark-mode button.btn-outline-dark {
            color: #c39222;
            border-color: #c39222;
        }

        .dark-mode button.btn-outline-dark:hover {
            background-color: #c39222;
            color: #fff;
        }