:root{
            --accent: #c7b89b; /* نحاسي / عاجي */
            --gradient-start: #1c1c1c; /* خلفية داكنة متدرجة */
            --gradient-end: #444444; /* خلفية داكنة متدرجة */
            --glass-bg: rgba(0, 0, 0, 0.4); /* خلفية داكنة شفافة للبطاقة */
            --text-light: #e9e6e0;
            --sidebar-width: 280px;
            --active-success-color: #2ecc71; /* لون نشط جديد (أخضر) */
            --inactive-color: #5a5a5a; /* لون غير نشط جديد (رمادي داكن) */
            --dark-bg: #121212; /* خلفية داكنة جداً */
            --glass-border: rgba(255, 255, 255, 0.15); /* حدود زجاجية فاتحة */
            --input-bg: rgba(0, 0, 0, 0.3); /* خلفية حقل داكنة وشفافة */
            --input-bg-dark: rgba(255, 255, 255, 0.05);
            --input-text-dark: var(--text-light);
            --input-text-on-white: #111;
            --danger-dark: #d9534f; 
            --warning-color: #f0ad4e; 
            --glass-panel: rgba(0,0,0,0.7);
            --input-text: #e9e6df;
            --panel: rgba(255,255,255,0.03);
            --input-top: #2a2a2a;
            --input-bottom: #141414;
            --input-border: rgba(255,255,255,0.04);
            --muted: rgba(255,255,255,0.85);
            --bg-dark: #1c1c1c; /* خلفية داكنة جداً */
            --glass-dark: rgba(0,0,0,0.6); /* خلفية البطاقة الزجاجية */
            --input-border-dark: rgba(255, 255, 255, 0.15);

        }
        

*{box-sizing:border-box;}


  body { 
            font-family: 'Cairo', sans-serif;
            color: #fff; 
            
            min-height: 100vh;
            background: linear-gradient(-45deg, var(--gradient-start), var(--gradient-end)); 
        }
  a{
      text-decoration: none !important;
  }
  
/*Start Side Bar*/


        .sidepage { 
            font-family: 'Cairo', sans-serif;
            color: #e9e6e0; 
            background: linear-gradient(-45deg, #1c1c1c, #444444);
            min-height: 100vh;
            overflow-x: hidden; 
            padding: 0;
            margin: 0;
        }


       

     
        .sidebar {
            background: rgba(0, 0, 0, 0.4); 
            backdrop-filter: blur(10px) saturate(180%);
            color: #e9e6e0;
            padding: 1.5rem 1rem;
            border-radius: 12px;
            height: fit-content;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
            margin: 50px;
            width: 350px;
            position: fixed;
            overflow-y: auto; /* يسمح بالتمرير داخل السايد بار لو المحتوى طويل */
            z-index: 1000;

        }
html[lang="ar"] .main-content {
    margin-right: 450px;
    margin-left: 0;
}

html[lang="en"] .main-content {
    margin-left: 450px;
    margin-right: 0;
}
.main-content {
    padding: 25px;
    transition: margin-right 0.3s ease;
    overflow-y: auto; /* السكرول هنا فقط */
}


        .sidebar h4 { color: #c7b89b; font-weight: 900; border-bottom: 2px solid #c7b89b; padding-bottom: 10px; margin-bottom: 20px; text-align: center; }
        .sidebar .nav-item { 
            cursor: pointer; 
            font-weight: 500; 
            border-radius: 6px; 
            color: #e9e6e0; 
            transition: background-color 0.2s, color 0.2s; 
        }
        

        .sidebar .active-link { 
            background-color: rgba(255, 255, 255, 0.1); 
            color: #e9e6e0!important; 
            font-weight: 700!important; 
        }

      
        .sidebar .nav-item a:hover { 
            background-color: #c7b89b; 
            color: #111 !important; 
        }
        .sidebar .nav-item a { 
                        padding: 10px 15px; 

        }

         .sidebar .main-content {
            padding-left: 15px; 
        }
        
       .sidebar .main-content h2 { 
            color: #c7b89b;
            font-weight: 800; 
            text-shadow: 0 4px 8px rgba(0,0,0,0.5);
            margin-bottom: 2rem;
            text-align: center;
        }
.sidebar .active-link {
    background-color: rgba(255, 255, 255, 0.15);
    color: #c7b89b !important;
    font-weight: 800 !important;
    border-right: 3px solid #c7b89b;
}
.sidebar .nav-item a{
        display: block;

    cursor: pointer;
    font-weight: 500;
    border-radius: 6px;
    color: #c7b89b !important;
    transition: background-color 0.2s, color 0.2s;
}

    
        @media (max-width: 992px) {
            .sidebar .page-wrapper {
                padding: 15px;
            }
            .sidebar .main-content {
                padding-left: 0; 
            }
            .sidebar {
                justify-content: flex-start;
                margin-bottom: 20px; 
            }
            .sidebar h4 { display: none; } 
            
            .sidebar ul { 
                display: flex; 
                flex-direction: row; 
                justify-content: center; 
                flex-wrap: wrap; 
                gap: 8px;
            }

            .sidebar .event-card { 
                flex-direction: column; 
                max-width: 100%; 
                min-height: auto; 
                margin: 10px 0; 
            }
            .sidebar .event-card img { width: 100%; height: 160px; }
            .sidebar .card-body { width: 100%; }
        }






/*End Side Bar*/






/*Start Manage Report Event*/

        /* عنوان الصفحة في المحتوى الرئيسي */
        .manage_report .main-content h2 { 
            color: var(--accent); 
            font-weight: 900; 
            text-shadow: none; /* إزالة الظل من التصميم السابق */
            margin-bottom: 2rem;
        }

        /* بطاقة الفعالية بتصميم Glassmorphism */
        .manage_report .event-card {
            width: 300px; 
            margin: 1rem;
            border-radius: 15px;
            overflow: hidden;
            /* تطبيق تصميم الزجاج الداكن */
            background: rgba(0, 0, 0, 0.5); /* خلفية داكنة شفافة */
            backdrop-filter: blur(8px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-light);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        }
        
        /* تأثير التفاعل (Hover Effect) */
        .manage_report .event-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
            background: rgba(0, 0, 0, 0.7); /* زيادة قتامة الخلفية عند التفاعل */
        }
        
        .manage_report .event-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            filter: brightness(0.95);
        }
        
        .manage_report .event-card h5 {
            text-align: center; /* توسيط الاسم */
            padding: 1rem 1.25rem;
            color: var(--accent); /* لون النص بلون التمييز */
            font-weight: 700;
            margin: 0;
            /* فصل النص بخط نحاسي */
            border-top: 2px solid var(--accent);
        }

        /* زر إضافة فعالية جديدة */
        .manage_report .btn-new-event {
            background: var(--accent);
            color:#111;
            border: none;
            font-weight: 700;
            padding: 10px 20px;
            border-radius: 8px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .manage_report .btn-new-event:hover {
            background: #fff;
            color: #000;
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.5);
        }

        .manage_report .no-events-message {
            color: #111; 
            background-color: rgba(255,255,255,0.8);
            font-weight: 700;
        }



/*End Manage Report Event*/






/*Start Manage Event*/

    .modal-backdrop{
        display: none !important;
    }
    
        .manage_events .page-wrap {
            position: relative;
            z-index: 1;
            padding: 3rem 1rem;
            min-height: 100vh;
        }

        .manage_events h2 { 
            color: var(--accent);
            font-weight: 800; 
            text-shadow: 0 4px 8px rgba(0,0,0,0.5);
        }
        
        /* زر إضافة فعالية */
        .manage_events .btn-add-new {
            background: linear-gradient(90deg,var(--accent), #d2c4a8);
            border: none;
            color: #111;
            font-weight: 700;
            border-radius: 8px;
            padding: 10px 25px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 6px 15px rgba(0,0,0,0.4);
        }
        .manage_events .btn-add-new:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.6);
            background: linear-gradient(90deg,var(--accent), #d2c4a8);
            color:#000;
        }

        .manage_events .event-card {
            width: 100%;
            max-width: 480px; /* زيادة العرض الكلي */
            min-height: 200px; /* لضمان حد أدنى للطول */
            margin: 15px;
            border-radius: 15px;
            overflow: hidden;
            
            /* تفعيل Flexbox أفقيًا */
            display: flex; 
            flex-direction: row; 
            
            background: rgba(255, 255, 255, 0.05); 
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #e9e6e0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .manage_events .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
        }
        
        .manage_events .event-card img {
            width: 40%; /* الصورة تأخذ 40% من العرض */
            height: 100%; /* ارتفاع الصورة يملأ البطاقة */
            object-fit: cover;
            flex-shrink: 0; /* لمنع الصورة من الانكماش */
        }

        .manage_events .card-body { 
            width: 60%; /* التفاصيل تأخذ 60% من العرض */
            padding: 15px; /* تقليل الحشوة قليلاً للتناسب */
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .manage_events .event-card h5 {
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.75rem; /* تقليل الهامش قليلاً */
            font-size: 1.2rem;
        }
        
        .manage_events .card-body p {
            margin-bottom: 0.3rem;
            font-size: 0.9rem; /* تصغير حجم الخط للتناسب */
            color: rgba(255, 255, 255, 0.85);
            font-weight: 300;
        }
        
        /* مجموعة الأزرار */
        .manage_events .btn-group { 
            display: flex; 
            gap: 8px; /* تقليل المسافة بين الأزرار */
            margin-top: 10px; 
            /* لضمان أن الأزرار تكون في أسفل الـ Card Body */
            margin-top: auto; 
            padding-top: 5px; 
        }

        /* ستايلات الأزرار والمودال تبقى كما هي لتوحيد النمط */
        .manage_events .btn-glass { font-weight: 600; border-radius: 6px; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.3); flex-grow: 1; padding: 6px 10px; font-size: 0.9rem; }
        .manage_events .btn-detail { background-color:  var(--accent); color:#111; border: 1px solid var(--accent); }
        .manage_events .btn-detail:hover { background-color:transparent; color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
        .manage_events .btn-edit { background: #fff; border: none; color: #000; }
        .manage_events .btn-edit:hover { background: #ffffff; color: #000; transform: translateY(-2px); }
        .manage_events .btn-delete { background-color: #dc3545; border: 1px solid #dc3545; color: #fff; }
        .manage_events .btn-delete:hover { background-color: #c82333; border-color: #bd2130; transform: translateY(-2px); }
        .manage_events .modal-content { background-color: #1c1c1c; color: #e9e6e0; border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9); }
        .manage_events .modal-title { color: var(--accent); font-weight: 700; }
        .manage_events .btn-close { filter: invert(1); }
        
        @media (max-width: 768px) {
            /* على الشاشات الأصغر، تعود البطاقة إلى الوضع العمودي */
            .manage_events .event-card {
                flex-direction: column;
                max-width: 330px; 
                min-height: auto;
            }
            .manage_events .event-card img {
                width: 100%;
                height: 180px; 
            }
            .manage_events .card-body {
                width: 100%;
                padding: 15px;
            }
        }

/*End Manage Event*/










/*Start Manage Employees*/


        /* حاوية الصفحة الرئيسية */
        .manage_employees .page-container {
            position: relative;
            z-index: 1;
            min-height: 100vh; 
        }
        
      
        /* محتوى الصفحة الرئيسي */
        .manage_employees .main-content {
            background-color: transparent;
            padding: 2rem;
        }

       .manage_employees h3 { color: var(--accent); font-weight: 700; }
        
        /* بطاقة النموذج الزجاجية */
        .manage_employees .card-glass {
            background: var(--glass-bg); 
            backdrop-filter: blur(10px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
            padding: 2rem;
            color: #e9e6e0;
        }
        
        /* حقول الإدخال */
        .manage_employees .form-control, .form-check-input:checked {
            background:#fff;
            border: 2px solid var(--accent);
            color:#111;
            font-weight: 600;
            border-radius:8px;
        }
        .manage_employees .form-control:focus {
            background: #fff;
            box-shadow: 0 0 0 0.25rem rgba(199,184,155,0.4);
            border-color: var(--accent);
        }

        /* زر الإضافة (Submit Button) */
        .manage_employees .btn-submit {
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none;
            color:#111;
            font-weight:700;
            border-radius:8px;
            padding: 10px 20px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 6px 15px rgba(0,0,0,0.4);
        }
        
        /* الجدول الزجاجي */
        .manage_employees .table-glass {
            background-color: rgba(255,255,255,0.9); 
            border-radius: 8px;
        }
        .manage_employees .table-glass th { 
            background-color: var(--accent); 
            color: #111; 
        }

        /* رسائل التنبيه */
        .manage_employees .alert-success { background-color: #d4edda; color: #155724; }
        .manage_employees .alert-danger { background-color: #f8d7da; color: #721c24; }
        
        /* تعديل أزرار العمليات (تعديل/تفاصيل/حذف) */
        .manage_employees .btn-warning { background-color: var(--accent) !important; color: #111 !important; border-color: var(--accent); }
        .manage_employees .btn-info { background-color: #555 !important; color: #fff !important; border-color: #555; }
        .manage_employees .btn-danger { background-color: #e74c3c !important; color: #fff !important; border-color: #e74c3c; }

        /* ================================================= */
        /* تعديل أزرار الحالة (نشط/غير نشط) - التعديل الجديد */
        /* ================================================= */
        .manage_employees .btn-success { /* نشط - اللون الأخضر الجديد */
            background-color: var(--active-success-color) !important; 
            color: #fff !important; 
            border: 1px solid var(--active-success-color) !important;
        }
        .manage_employees .btn-success:hover {
             background-color: #27ae60 !important; /* أخضر أغمق عند التمرير */
        }
        .manage_employees .btn-secondary { /* غير نشط */
            background-color: var(--inactive-color) !important; 
            color: #fff !important; 
            border: 1px solid var(--inactive-color) !important;
        }
        .manage_employees .btn-secondary:hover {
            background-color: #707070 !important;
        }




/*End Manage Employees*/


/* Start Add Event*/




        .add_event .app-wrapper { display: flex; min-height: 100vh; padding: 25px; gap: 25px; }

        .add_event .menu li { 
            padding: 12px 10px; 
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
            cursor: pointer; 
            transition: all 0.2s;
            border-radius: 8px;
            font-weight: 600;
        }
        .add_event .menu li i { margin-left: 10px; color: rgba(255, 255, 255, 0.6); }
        .add_event .menu li:hover { 
            color: var(--accent); 
            background-color: rgba(199, 184, 155, 0.08); /* تأثير بسيط بلون Accent */
        }
        
        /* المنطقة الرئيسية (Glassmorphism) */
        .add_event .main-area { flex-grow: 1; }
        .add_event .container-fluid {
            background: rgba(0, 0, 0, 0.4); /* خلفية شفافة للحاوية */
            backdrop-filter: blur(12px) saturate(180%); /* تمويه قوي */
            border-radius: 15px;
            padding: 30px;
            border: 1px solid var(--glass-border);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
        }

        .add_event .page-header .title { color: var(--accent); font-weight: 900; }

        /* حقول النموذج - Glassmorphism Inputs */
        .add_event .form-label { color: var(--text-light); font-weight: 700; margin-bottom: 8px; }
        .add_event .form-control, .form-select, textarea {
            background: var(--input-bg);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-light);
            padding: 10px 15px;
            border-radius: 10px;
            transition: all 0.2s;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
            caret-color: var(--accent);
        }
        .add_event .form-control:focus, textarea:focus {
            background: rgba(255, 255, 255, 0.95); /* يصبح فاتحاً عند التركيز لزيادة التباين */
            color: #111;
            border-color: var(--accent);
            box-shadow: 0 0 0 0.25rem rgba(199, 184, 155, 0.35);
        }
        .add_event .form-control::placeholder { color: black; }

        /* الخريطة والصور */
        .add_event #map { height: 300px; border: 2px solid var(--glass-border); border-radius: 10px; margin-bottom: 20px; }
        .add_event .main-image-box { 
            height: 200px; 
            background: var(--input-bg); 
            border: 2px dashed var(--accent); 
            border-radius: 10px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            overflow: hidden;
            margin-bottom: 8px;
        }
        .add_event .main-image-box:empty:before { 
            content: "اضغط للتحميل (الصورة الرئيسية)";
            color: rgba(199, 184, 155, 0.7);
            font-size: 1.1rem;
            font-weight: 600;
        }
        .add_event .section-label { color: var(--accent); font-weight: 700; margin-bottom: 10px; display: block; }
        .add_event .thumbs img { 
            width: 80px; height: 80px; 
            object-fit: cover; 
            border-radius: 6px; 
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* زر الإضافة (Accent Button) */
        .add_event .btn-add {
            background: linear-gradient(90deg, var(--accent), #d2c4a8);
            border: none;
            color: #111;
            font-weight: 900;
            padding: 12px 30px;
            border-radius: 10px;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        }
        .add_event .btn-add:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
        }

        /* رسائل التنبيه الزجاجية */
        .add_event .alert { 
            border-radius: 10px; 
            backdrop-filter: blur(5px);
            border: 1px solid var(--glass-border);
            padding: 15px;
            font-weight: 600;
        }
        .add_event .alert-success { background-color: rgba(92, 184, 92, 0.15); color: #84ff89; border-color: #5cb85c; }
        .add_event .alert-danger { background-color: rgba(217, 83, 79, 0.15); color: #ff8484; border-color: #d9534f; }

        /* تخصيص الـ Checkbox/Radio */
       .add_event .form-check-input {
            background-color: var(--input-bg);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .add_event .form-check-input:checked {
            background-color: var(--accent);
            border-color: var(--accent);
        }
        .add_event .form-check-label { color: rgba(255, 255, 255, 0.9); }
        
        @media (max-width: 991px) {
            .add_event .app-wrapper { flex-direction: column; padding: 15px; gap: 15px; }
            .add_event .menu { display: none; } /* إخفاء القائمة في الأجهزة الصغيرة */
            .add_event .col-md-6.left-col { border-top: 1px solid var(--glass-border); border-left: none; padding-top: 20px !important; margin-top: 20px; }
        }




/* End Add Event*/
/* Start Check OTP Employee*/

        /* تم تغيير page-wrap إلى wrap */
        .check_otp_e .wrap{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }

        /* تم تغيير card-glass إلى card */
        .check_otp_e .card{
            width:100%; max-width:420px; padding:30px 25px; border-radius:12px;
            /* تصميم Glassmorphism الداكن */
            background: rgba(0, 0, 0, 0.6); 
            border:1px solid rgba(255,255,255,0.1);
            box-shadow: 0 12px 40px rgba(0,0,0,0.6);
            backdrop-filter: blur(10px) saturate(180%);
            /*text-align:right;*/
        }

        .check_otp_e .brand{ text-align:center; margin-bottom:15px; }
        .check_otp_e .brand img{ max-width:180px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }

        .check_otp_e h2{ color:var(--accent); font-weight:900; margin-bottom:15px; text-align:center; }

        .check_otp_e label{ color:var(--text-light); font-weight:600; display:block; margin-bottom:6px; }

        /* تصميم حقل الإدخال الداكن/الزجاجي */
        .check_otp_e .form-control{
            background: var(--input-bg-dark);
            color: var(--input-text-dark);
            border: 1px solid var(--input-border-dark);
            border-radius:8px;
            padding:12px 14px;
            transition: all .2s ease;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
            caret-color: var(--accent); /* تغيير لون مؤشر الكتابة للـ accent */
        }
        .check_otp_e .form-control::placeholder{ color: black; }

        /* تأثير التركيز (Focus effect) */
        .check_otp_e .form-control:hover,
        .check_otp_e .form-control:focus{
            background:#ffffff; /* يتحول إلى خلفية بيضاء عند التركيز */
            color:var(--input-text-on-white);
            box-shadow: 0 6px 18px rgba(0,0,0,0.2);
            transform: translateY(-2px);
            outline:0;
            border-color: rgba(0,0,0,0.1);
        }

        /* زر الإرسال */
        .check_otp_e .btn-primary{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none; color:#111; font-weight:700; padding:12px 14px; border-radius:10px;
            transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
            width:100%;
        }
        .check_otp_e .btn-primary:hover{ transform:translateY(-4px); color:#000; box-shadow: 0 18px 46px rgba(0,0,0,0.55); }
        .check_otp_e .btn-primary:active { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }


        /* رسائل المساعدة */
        .check_otp_e .help-text, .help{ color:rgba(255,255,255,0.75); font-size:0.92rem; text-align:center; margin-top:10px; }

        /* رسائل الخطأ/التنبيه */
        .check_otp_e .alert{ 
            border-radius:8px; 
            border:1px solid rgba(255,255,255,0.1); 
            background: rgba(199, 184, 155, 0.1); /* خلفية خفيفة بلون الـ accent */
            color:var(--text-light); 
            padding:12px; 
            margin-bottom:15px; 
            /*text-align: right;*/
        }
        
        @media (max-width:576px){
            .check_otp_e .card{ padding:20px; max-width:360px; }
            .check_otp_e .brand img{max-width:160px}
        }



/* End Check OTP Employee*/






/* Start Check OTP Admin*/

   
        /* بطاقة النموذج الزجاجية */
        .check_otp_a { 

            display: flex; 
            align-items: center; 
            justify-content: center;
        }
        .check_otp_a .card-glass {
            width: 100%;
            max-width: 450px;
            padding: 2.5rem;
            border-radius: 15px;
            background: var(--glass-bg); 
            backdrop-filter: blur(10px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
            text-align: center;
        }
        
        .check_otp_a h3 { 
            color: var(--accent); 
            font-weight: 700; 
            margin-bottom: 0.5rem; 
        }

        /* حقل الإدخال */
        .check_otp_a .form-control {
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid var(--accent);
            color:#111;
            font-weight: 700;
            text-align: center;
            font-size: 1.5rem;
            height: 60px;
            border-radius:10px;
            /* تطبيق Bootstrap بشكل صحيح */
            padding: 0.375rem 0.75rem; 
        }
        .check_otp_a .form-control:focus {
            background: #fff;
            box-shadow: 0 0 0 0.25rem rgba(199,184,155,0.4);
            border-color: var(--accent);
            color: black;
        }
        .check_otp_a .form-control:placeholder {
            background: #fff;
            box-shadow: 0 0 0 0.25rem rgba(199,184,155,0.4);
            border-color: var(--accent);
            color: #111;
        }

        /* زر التحقق (Submit Button) */
        .check_otp_a .btn-submit {
            background: linear-gradient(90deg,var(--accent), #d2c4a8);
            border: none;
            color: #111;
            font-weight: 700;
            border-radius: 8px;
            padding: 12px 20px; /* زيادة حجم الزر */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 6px 15px rgba(0,0,0,0.4);
        }
        .check_otp_a .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.6);
          background: linear-gradient(90deg,var(--accent), #d2c4a8);
          color:#000;
        }

        /* رسائل التنبيه */
        .check_otp_a .alert-danger {
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            font-weight: 600;
            text-align: center;
            background-color: #f8d7da;
            color: #721c24;
            border: none;
        }
        
        /* زر إعادة الإرسال */
        .check_otp_a .btn-resend {
            color: #c7b89b;
            font-weight: 600;
            text-decoration: underline;
            transition: color 0.2s;
        }
        .check_otp_a .btn-resend:hover {
            color: #fff;
        }
    






/* End Check OTP Admin*/



/* Start Delete Event*/



 /* بطاقة العرض الزجاجية (Glassmorphism) */
        .delete_event .card-glass {
            width: 100%;
            max-width: 550px; /* زيادة بسيطة في العرض */
            padding: 2.5rem;
            border-radius: 15px; /* تدوير أكبر قليلاً */
            /* تصميم Glassmorphism داكن */
            background: var(--glass-bg); 
            backdrop-filter: blur(12px) saturate(180%); /* زيادة Blur */
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
            text-align: center;
        }
        
        .delete_event h3 { 
            color: var(--danger-dark); 
            font-weight: 800; /* خط أعرض */
            margin-bottom: 1.5rem; 
            border-bottom: 2px solid var(--danger-dark);
            padding-bottom: 10px;
            font-size: 1.75rem;
        }
        .delete_event .event-name { 
            color: var(--accent); 
            font-size: 1.4rem; /* خط أكبر لاسم الفعالية */
            font-weight: 700; 
            display: block; 
            margin-top: 15px; 
            padding: 5px;
        }
        .delete_event .warning-text { 
            color: var(--warning-color); 
            font-weight: 600; 
            font-size: 1.1rem;
        }

        /* ستايل الأزرار المعدل */
        .delete_event .btn-action {
            font-weight: 700;
            border-radius: 8px;
            padding: 12px 25px; /* توسيع الأزرار */
            transition: all 0.2s, box-shadow 0.3s;
        }

        /* زر الإلغاء (شفاف مع إطار نحاسي) */
        .delete_event .btn-cancel {
            background-color: transparent;
            color: var(--accent);
            border: 2px solid var(--accent);
        }
        .delete_event .btn-cancel:hover {
            background-color: var(--accent);
            color: #111;
            transform: scale(1.05); /* تأثير تكبير بسيط */
            box-shadow: 0 8px 18px rgba(199,184,155,0.4);
        }

        /* زر التأكيد (Danger) */
        .delete_event .btn-confirm {
            background-color: var(--danger-dark); 
            border: none;
            color: #fff;
            box-shadow: 0 0 10px rgba(217, 83, 79, 0.5); /* ظل أحمر خفيف */
        }
        .delete_event .btn-confirm:hover {
            background-color: #c9302c;
            transform: scale(1.05); /* تأثير تكبير بسيط */
            box-shadow: 0 8px 18px rgba(217, 83, 79, 0.8);
        }






/* End Delete Event*/



/*Start Edit Employee Employee*/


.edit_employee_e .page{
            position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px;
        }
        
        /* تصميم البطاقة Glassmorphism */
        .edit_employee_e .card-custom{
            width:100%; max-width:850px;
            background: var(--glass-panel);
            border:1px solid var(--glass-border);
            padding:30px; border-radius:18px; 
            box-shadow: 0 16px 40px rgba(0,0,0,0.8);
            backdrop-filter: blur(12px);
        }

        .edit_employee_e .brand{ text-align:center; margin-bottom:14px; }
        .edit_employee_e .brand img{ max-width:180px; filter:brightness(1.5) drop-shadow(0 8px 20px rgba(0,0,0,0.6)); display:inline-block; }

        .edit_employee_e h3.title{ color:var(--accent); font-weight:900; margin-bottom:8px; text-align:center; font-size:1.8rem; }
        .edit_employee_e p.subtitle{ color:rgba(255,255,255,0.75); text-align:center; margin-bottom:25px; }

        /* inputs: dark glass style */
        .edit_employee_e .form-control{
            background: rgba(255,255,255,0.08);
            color: var(--input-text);
            border: 1px solid rgba(199,184,155,0.2);
            border-radius:10px;
            padding:10px 12px;
            transition: all 220ms ease;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
            caret-color: var(--accent);
        }
        .edit_employee_e .form-control::placeholder{ color: black; }
        .edit_employee_e .form-control:focus{
            background: rgba(255,255,255,0.15);
            color: var(--input-text);
            border-color: var(--accent);
            box-shadow: 0 0 0 0.25rem rgba(199,184,155,0.3);
            outline: none;
            transform: translateY(-1px);
        }
        .edit_employee_e label{ color:rgba(255,255,255,0.95); font-weight:700; margin-bottom: 5px; }

        /* checkbox styling */
        .edit_employee_e .form-check-input{
            width:1.25rem; height:1.25rem; margin-top:0.15rem;
            border-radius:6px; border:1px solid rgba(255,255,255);
            background:rgba(255,255,255,0.05);
            transition: all .2s ease;
        }
        .edit_employee_e .form-check-input:checked{
            background-color: var(--accent);
            border-color: var(--accent);
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        .edit_employee_e .form-check-label { color: rgba(255,255,255,0.9); font-weight: 600; }
        
        /* switch styling (المفتاح النشط/غير النشط) */
        .edit_employee_e .form-switch {
            display: flex;
            align-items: center; /* لمحاذاة النص والمفتاح عمودياً */
            gap: 15px; /* مسافة بين المفتاح والنص */
            padding-left: 0 !important; /* إزالة الـ padding الافتراضي لـ Bootstrap */
            margin-bottom: 0;
        }
        
        .edit_employee_e .form-switch .form-check-input {
            width: 2.8rem; 
            height: 1.5rem;
            margin-top: 0; 
            background-color: #dc3545; /* الأحمر في حالة عدم التحديد (غير نشط) */
            border: 1px solid rgba(255,255,255,0.4);
            box-shadow: 0 2px 5px rgba(0,0,0,0.4);
            transition: all .2s ease;
            
            /* لضبط المقبض في الوضع الافتراضي (غير نشط - أبيض) */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e9e6df'/%3e%3c/svg%3e");
            
            margin-right: 0; 
            float: none; 
            order: 2; 
        }
        .edit_employee_e .form-switch .form-check-input:checked {
            background-color: #4CAF50; /* الأخضر للحالة النشطة */
            border-color: #4CAF50;
            
            /* لضبط المقبض في وضع النشط ليتوافق مع لون المسار */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }
        
        .edit_employee_e .form-switch .form-check-label {
            order: 1; /* وضع النص قبل المفتاح */
            margin-left: 0;
            line-height: 1.5rem; 
            padding-bottom: 2px;
        }

        /* primary button: accent style */
        .edit_employee_e .btn-primary{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none;
            color:#111;
            font-weight:800;
            padding:12px 20px;
            border-radius:12px;
            transition: all .2s ease;
            box-shadow: 0 12px 36px rgba(0,0,0,0.45);
        }
        .edit_employee_e .btn-primary:hover{ filter:brightness(.98); transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.7); color:#000; }

        .edit_employee_e .btn-cancel{
            background: rgba(255,255,255,0.1);
            color:rgba(255,255,255,0.95);
            border:1px solid rgba(255,255,255,0.15);
            padding:12px 20px;
            border-radius:12px;
            margin-top:6px;
            font-weight: 700;
            transition: all 0.2s ease;
        }
        .edit_employee_e .btn-cancel:hover{ background: rgba(255,255,255,0.2); transform:translateY(-1px); }

        .edit_employee_e .alert-success { background: rgba(76, 175, 80, 0.3); color: #b7ffb9; border-color: #4CAF50; border-radius: 10px; }
        .edit_employee_e .alert-danger { background: rgba(220, 53, 69, 0.3); color: #ffb7b7; border-color: #dc3545; border-radius: 10px; }
    


/*End Edit Employee Employee*/


/*Start Edit Employee Admin*/


   .edit_employee_a .page{
      position:relative;
      z-index:1;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:30px;
    }

    /* same card style used across pages */
    .edit_employee_a .card-glass, .card-custom{
      width:100%;
      max-width:920px;
      background:#000;
      border:1px solid rgba(255,255,255,0.04);
      padding:18px; border-radius:12px; box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    }
    .edit_employee_a .card-panel{
      background:#000;
      border:1px solid rgba(255,255,255,0.04);
      padding:18px; border-radius:12px; box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    }
    html[lang="ar"] .card-panel {
    margin-right: 450px;
    margin-left: 0;
}

html[lang="en"] .card-panel {
    margin-left: 450px;
    margin-right: 0;
}
.card-panel {
    padding: 25px;
    transition: margin-right 0.3s ease;
    overflow-y: auto; /* السكرول هنا فقط */
}

    .edit_employee_a .brand{ text-align:center; margin-bottom:12px }
    .edit_employee_a .brand img{ max-width:160px; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.6)); }

    .edit_employee_a h3.page-title{ color:var(--accent); text-align:center; margin:6px 0 14px; font-weight:700 }

    /* form styles */
    .edit_employee_a .form-card{ background:transparent; border:none; padding:14px; }
    .edit_employee_a label{ color:rgba(255,255,255,0.92); font-weight:600; }
    .edit_employee_a .brand {
      text-align:center;
      margin-bottom:14px;
    }
    .edit_employee_a .brand img{ max-width:180px; filter:drop-shadow(0 8px 24px rgba(0,0,0,0.6)); display:inline-block; }

   .edit_employee_a h3.title{
      color:var(--accent);
      font-weight:700;
      margin-bottom:8px;
      text-align:center;
    }
    .edit_employee_a p.subtitle{ color:rgba(255,255,255,0.75); text-align:center; margin-bottom:18px; }

    /* inputs: warm gradient -> white on focus */
    .edit_employee_a .form-control{
      background: linear-gradient(180deg,var(--input-top),var(--input-bottom));
      color: var(--input-text);
      border: 1px solid var(--input-border);
      border-radius:10px;
      padding:10px 12px;
      transition: background .12s ease, color .12s ease, box-shadow .12s ease, border-color .12s ease, transform .12s ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
      caret-color: var(--input-text);
    }
    .edit_employee_a .form-control::placeholder{ color: black; }
    .edit_employee_a .form-control:focus{
      background: #ffffff;
      color: var(--input-text-on-white);
      border-color: rgba(0,0,0,0.08);
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
      outline: none;
      transform: translateY(-2px);
    }

    .edit_employee_a label{ color:rgba(255,255,255,0.92); font-weight:600; }

    /* checkbox styling */
    .edit_employee_a .form-check-input{
      width:1.25rem; height:1.25rem; margin-top:0.15rem;
      border-radius:6px; border:1px solid rgba(255,255,255);
      background:var(--panel);
      transition: transform .14s ease;
    }
    .edit_employee_a .form-check-input:checked{
      background: linear-gradient(90deg,var(--accent),#d2c4a8);
      border-color: rgba(0,0,0,0.12);
      transform: translateY(-2px);
    }

    /* primary button used site-wide */
    .edit_employee_a .btn-primary{
      background: linear-gradient(90deg,var(--accent),#d2c4a8);
      border:none;
      color:#6b3f2b;
      font-weight:700;
      padding:10px 14px;
      border-radius:10px;
      transition: filter .12s ease, transform .12s ease, box-shadow .12s ease, color .12s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }
    .edit_employee_a .btn-primary:hover{ filter:brightness(.98); transform: translateY(-4px); box-shadow: 0 18px 46px rgba(0,0,0,0.55); color:#3a2a1f; }

   .edit_employee_a .btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 20px;
    border-radius: 12px;
    margin-top: 6px;
    font-weight: 700;
    transition: all 0.2s ease;
    text-align: center;
}

        .edit_employee_a .btn-cancel:hover{ background: rgba(255,255,255,0.2); transform:translateY(-1px); }

    @media (max-width:991px){
      .edit_employee_a .card-glass, .card-custom{ padding:18px }
    }
      /* switch styling (المفتاح النشط/غير النشط) */
        .edit_employee_a .form-switch {
            display: flex;
            align-items: center; /* لمحاذاة النص والمفتاح عمودياً */
            gap: 15px; /* مسافة بين المفتاح والنص */
            padding-left: 0 !important; /* إزالة الـ padding الافتراضي لـ Bootstrap */
            margin-bottom: 0;
        }
        
        .edit_employee_a .form-switch .form-check-input {
            width: 2.8rem; 
            height: 1.5rem;
            margin-top: 0; 
            background-color: #dc3545; /* الأحمر في حالة عدم التحديد (غير نشط) */
            border: 1px solid rgba(255,255,255,0.4);
            box-shadow: 0 2px 5px rgba(0,0,0,0.4);
            transition: all .2s ease;
            
            /* لضبط المقبض في الوضع الافتراضي (غير نشط - أبيض) */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e9e6df'/%3e%3c/svg%3e");
            
            margin-right: 0; 
            float: none; 
            order: 2; 
        }
        .edit_employee_a .form-switch .form-check-input:checked {
            background-color: #4CAF50; /* الأخضر للحالة النشطة */
            border-color: #4CAF50;
            
            /* لضبط المقبض في وضع النشط ليتوافق مع لون المسار */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }
        
        .edit_employee_a .form-switch .form-check-label {
            order: 1; /* وضع النص قبل المفتاح */
            margin-left: 0;
            line-height: 1.5rem; 
            padding-bottom: 2px;
        }



/*End Edit Employee Admin*/



/*Start Edit Event*/


 
        /* ===== منطقة المحتوى الرئيسي (Main Content) - التعديلات هنا ===== */
        .edit_event .main-content {
            background-color: transparent;
            padding: 2rem;
            margin-right: var(--sidebar-width); 
            min-height: 100vh;
            
            /* 🌟 التوسيط الرأسي والأفقي */
            display: flex;
            justify-content: center; /* توسيط أفقي */
            align-items: center; /* توسيط عمودي */
            flex-direction: column; /* لضمان أن البطاقة تكون هي المحور الأساسي */
        }

        /* 🔥 تعديل في CARD-GLASS */
        .edit_event .card-glass {
            width: 100%;
            max-width: 800px; 
            padding: 2.5rem;
            border-radius: 15px;
            background: var(--glass-bg);
            backdrop-filter: blur(10px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
            /* لإضافة مسافة علوية وسفلية عند اللزوم، لكن التوسيط يتم بواسطة flexbox الأب */
            margin-block: 40px; 
        }

        .edit_event h2{
            color: var(--accent); 
            font-weight: 700; 
            margin-bottom: 2rem; 
            text-align: center;
        }
        .edit_event .form-label{
            color:var(--text-light); 
            font-weight: 600;
        }

        /* حقول الإدخال */
        .edit_event .form-control, .edit_event .form-select, .edit_event .form-control:read-only {
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid var(--accent);
            color:#111;
            font-weight: 500;
            border-radius:10px;
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }
        .edit_event .form-control:focus,.edit_event .form-select:focus {
            background: #fff;
            box-shadow: 0 0 0 0.25rem rgba(199,184,155,0.4);
            border-color: var(--accent);
        }

        /* زر الإرسال (حفظ التعديلات) */
        .edit_event .btn-submit {
            background: linear-gradient(90deg,var(--accent), #d2c4a8);
            border: none;
            color: #111;
            font-weight: 700;
            border-radius: 8px;
            padding: 12px 20px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 0 15px rgba(199,184,155,0.4); /* ظل بلون التمييز */
        }
        .edit_event .btn-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.6);
            background: linear-gradient(90deg,#d2c4a8, var(--accent));
            color:#000;
        }

        /* رسائل التنبيه */
        .edit_event .alert-success { background-color: #d4edda; color: #155724; }
        .edit_event .alert-danger { background-color: #f8d7da; color: #721c24; }
        .edit_event .alert-success,.edit_event .alert-danger {
             padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; 
             font-weight: 600; text-align: center; border: none;
        }
        
        /* تلوين أزرار العودة */
        .edit_event .btn-link-accent {
            color: var(--accent);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s;
        }
        .edit_event .btn-link-accent:hover {
            color: #fff;
            text-decoration: underline;
        }

        /* صورة المعاينة */
        .edit_event .current-image-preview img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-top: 10px;
            border: 1px solid var(--accent);
        }
        .edit_event .hidden-fields {
            display: none;
        }
    
    

    .edit_event #map {
        height: 350px;
        width: 100%;
        border-radius: 10px;
        margin-bottom: 20px;
        border: 2px solid var(--accent);
    }


/*End Edit Event*/




/*Start Details Employee*/


        .employee_details_e .page{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; }
        
        /* تصميم البطاقة Glassmorphism */
        .employee_details_e .card-view{
            background: var(--glass-panel);
            border:1px solid var(--glass-border);
            border-radius:18px; 
            box-shadow: 0 16px 40px rgba(0,0,0,0.8);
            backdrop-filter: blur(12px);
            max-width: 900px;
            width: 100%;
            overflow:hidden;
        }
        
        /* القسم العلوي */
        .employee_details_e .card-top{
            display:flex; gap:20px; align-items:center; padding:25px;
            background: rgba(0,0,0,0.3); /* خلفية داكنة للرأس */
            border-bottom: 1px solid var(--glass-border);
        }
        .employee_details_e .logo{ width:100px; height:100px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; }
        .employee_details_e .logo img{ max-width:80%; height:auto; display:block; filter: brightness(1.5) drop-shadow(0 8px 20px rgba(0,0,0,0.6)); }
        .employee_details_e .head-info{ flex:1; }
        .employee_details_e .head-info h3{ margin:0; color:var(--accent); font-weight:900; font-size:1.8rem; }
        .employee_details_e .head-info p{ margin:4px 0 0; color:var(--muted); font-size:1rem; }

        /* جسم البطاقة */
        .employee_details_e .card-body{ padding:30px; display:grid; grid-template-columns: 1fr 340px; gap:30px; align-items:start; }
        @media (max-width:900px){ .employee_details_e .card-body{ grid-template-columns:1fr; } }

        /* جدول التفاصيل الأساسية */
        .employee_details_e .info-table{ width:100%; border-collapse:collapse; color:inherit; }
        .employee_details_e .info-table tr{ border-bottom:1px solid rgba(255,255,255,0.05); }
        .employee_details_e .info-table th{ 
            /*text-align:right; */
        
        font-weight:700; padding:15px 0 15px 10px; color:var(--accent); width:200px; vertical-align:top; font-size:1.05rem; }
        .employee_details_e .info-table td{ padding:15px 10px 15px 0; color:var(--muted); vertical-align:top; font-weight: 600; }

        /* لوحة الصلاحيات (Meta Panel) */
        .employee_details_e .meta-panel{
            background: rgba(0,0,0,0.3); border-radius:12px; padding:20px; border:1px solid rgba(255,255,255,0.06);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        }
        .employee_details_e .meta-panel h4 { color: var(--accent); font-weight: 700; margin-bottom: 15px; }
        .employee_details_e .meta-item{ display:flex; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,0.05); }
        .employee_details_e .meta-item:last-child{ border-bottom:none; }
        .employee_details_e .meta-item .k{ color:var(--text-light); font-weight:600; }
        .employee_details_e .meta-item .v{ color:var(--muted); }

        /* الأزرار */
        .employee_details_e .actions{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; justify-content: flex-end; }
        .employee_details_e .btn-accent{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none; color:#111; font-weight:800; padding:12px 20px; border-radius:12px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.45); transition:all .2s ease;
        }
        .employee_details_e .btn-accent:hover{ transform:translateY(-5px); color:#000; box-shadow: 0 20px 50px rgba(0,0,0,0.7); }
        .employee_details_e .btn-secondary{
            background:rgba(255,255,255,0.1); color:var(--text-light); border:1px solid rgba(255,255,255,0.15);
            padding:12px 20px; border-radius:12px; font-weight: 700; transition: all 0.2s ease;
        }
        .employee_details_e .btn-secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }

        /* بادجات الحالة والصلاحيات */
        .employee_details_e .status-badge { padding:6px 10px; border-radius:999px; font-weight:700; display: inline-block; }
        .employee_details_e .badge-yes{ background:#4CAF50; color:white; }
        .employee_details_e .badge-no{ background:#dc3545; color:white; }
        .employee_details_e .badge-permission { padding: 4px 8px; font-size: 0.9rem; }
        .employee_details_e .small{ font-size:0.95rem; color:rgba(255,255,255,0.75); }




/*End Details Employee*/




/*Start Employees Employee*/


  
        .employees_e .app{position:relative; z-index:1; min-height:100vh; display:flex; gap:30px;    padding: 0 !important;}
        
       
        .employees_e .main{flex:1}
        
.employees_e .card-panel {
    background: var(--glass-panel);
    border: 1px solid var(--glass-border);
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    margin-right: 450px;
}

        .employees_e .brand{ text-align:center; margin-bottom:15px }
        .employees_e .brand img{ max-width:180px; filter:brightness(1.5) drop-shadow(0 8px 20px rgba(0,0,0,0.8)); }

        .employees_e h3.page-title{ color:var(--accent); text-align:center; margin:6px 0 20px; font-weight:900; font-size: 1.8rem; }

        /* form styles */
        .employees_e .form-card{ background:rgba(255,255,255,0.04); border-radius:14px; padding:20px; }
        .employees_e label{ color:var(--text-light); font-weight:700; }
        .employees_e .form-check-label { color: var(--muted); font-weight: 600; }
        .employees_e .form-check-input:checked {
            background-color: var(--accent);
            border-color: var(--accent);
        }
        
        /* تصميم الإدخال الداكن */
        .employees_e .form-control, .employees_e .form-select{
            background:rgba(255,255,255,0.08);
            border:1px solid rgba(199,184,155,0.2);
            color:var(--text-light);
            border-radius:10px;
            padding:10px 12px;
            transition: all 220ms ease;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
        }
        .employees_e .form-control::placeholder{ color: black; }
        .employees_e .form-control:hover,.employees_e .form-control:focus,
        .employees_e .form-select:hover,.employees_e .form-select:focus{
            background:rgba(255,255,255,0.15); 
            color:var(--text-light);
            box-shadow: 0 0 0 0.25rem rgba(199,184,155,0.3);
            border-color:var(--accent);
            transform: translateY(-1px);
            outline:0;
        }

        /* زر الإضافة المميز */
        .employees_e .btn-accent{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            color:#000;
            border:none; font-weight:800; padding:12px 14px; border-radius:12px;
            transition: transform .2s ease, box-shadow .2s ease;
            box-shadow: 0 12px 36px rgba(0,0,0,0.45);
        }
        .employees_e .btn-accent:hover{ transform:translateY(-5px); color:#000; box-shadow: 0 20px 50px rgba(0,0,0,0.7); }
/* ... (كود CSS السابق) ... */

/* أزرار العمليات في الجدول */
.employees_e .btn-ghost{ /* تم الإبقاء عليه لأي استخدام مستقبلي لكن لن يستخدم لتبديل الحالة حالياً */
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); 
    color:var(--muted); padding:8px 10px; border-radius:8px; font-size:0.9rem;
    transition: all 0.2s ease;
}
.employees_e .btn-ghost:hover{
    background:var(--accent); border-color:var(--accent); color:#111; 
    transform:translateY(-1px);
}
.employees_e .btn-warning { background-color: #f7a83d; border-color: #f7a83d; color: #111; font-weight: 700; border-radius:8px; padding: 8px 10px; font-size: 0.9rem; }
.employees_e .btn-danger { background-color: #dc3545; border-color: #dc3545; font-weight: 700; border-radius:8px; padding: 8px 10px; font-size: 0.9rem; }
/* التعديل هنا: إضافة نفس حجم وستايل التعديل والحذف */
.employees_e .btn-info { 
    background-color: #0dcaf0; 
    border-color: #0dcaf0; 
    color: #111; 
    font-weight: 700; 
    border-radius:8px;
    padding: 8px 10px; /* جعل نفس حجم الأزرار الأخرى */
    font-size: 0.9rem; /* جعل نفس حجم الخط */
}
.employees_e .btn-warning:hover, .btn-danger:hover, .btn-info:hover { transform: translateY(-1px); }

/* ... (باقي كود CSS) ... */

        /* تصميم الجدول */
        .employees_e .table-wrap{ overflow:auto; margin-top:20px; border-radius:12px; border:1px solid var(--glass-border); }
        .employees_e table.custom-table{ 
            width:100%; border-collapse:collapse; 
            color:var(--text-light); 
            background: rgba(255,255,255,0.02);
        }
        .employees_e table.custom-table th, table.custom-table td{ padding:12px 15px; border-bottom:1px solid rgba(255,255,255,0.06);
        
        /*text-align:right; */
        vertical-align:middle; font-size:0.95rem; }
        .employees_e table.custom-table th{ 
            color:var(--accent); 
            font-weight:700; 
            background:rgba(255,255,255,0.04); 
            border-bottom:2px solid var(--accent);
        }
        .employees_e .status-badge{ padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem; }
        .employees_e .status-badge:nth-child(even) { background-color: #4CAF50; color: white; } /* نشط */
        .employees_e .status-badge:nth-child(odd) { background-color: #FFC107; color: #111; } /* غير نشط */
        .employees_e .alert-success { background: rgba(76, 175, 80, 0.3); color: #b7ffb9; border-color: #4CAF50; }
        .employees_e .alert-danger { background: rgba(220, 53, 69, 0.3); color: #ffb7b7; border-color: #dc3545; }

        @media (max-width:900px){
            .employees_e .app{flex-direction:column; padding:16px; gap: 20px;}
            /*.employees_e .sidebar{width:100%; display:flex; flex-direction: column; height: auto;}*/
            /*.employees_e .nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: center; }*/
            /*.employees_e .sidebar h4, .employees_e .brand { margin-bottom: 10px; }*/
            .employees_e .card-panel { padding: 18px; }
            .employees_e .form-card { padding: 15px; }
        }




/*End Employees Employee*/




/*Start Event Details Admin*/


   .event_details_a .wrap{position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px;}
        
        /* 🎨 تصميم البطاقة Glassmorphism الداكنة */
        .event_details_a .card-event{
            background: var(--glass-dark);
            border:1px solid var(--glass-border);
            padding:30px; /* زيادة التباعد */
            border-radius:18px; 
            box-shadow: 0 16px 50px rgba(0,0,0,0.8);
            display:grid; 
            grid-template-columns: 480px 1fr; /* زيادة عرض الصورة */
            gap: 30px;
            max-width: 1200px;
            width: 100%;
            backdrop-filter: blur(10px) saturate(180%);
        }
        @media (max-width:1080px){ .event_details_a .card-event{ grid-template-columns:1fr; } }

        .event_details_a .media{
            background: rgba(0,0,0,0.25);
            padding:20px; 
            border-radius: 14px;
            display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:flex-start;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .event_details_a .media img{ width:100%; height:350px; object-fit:cover; border-radius:10px; box-shadow: 0 10px 30px rgba(0,0,0,0.7); }
        .event_details_a .media .logo{ 
            width:160px; height:60px; object-fit:contain; display:block; margin-top:6px; 
            /* تفتيح الشعار الداكن ليتناسب مع الخلفية الداكنة */
            filter: brightness(1.5) drop-shadow(0 8px 24px rgba(0,0,0,0.8)); 
        }

        .event_details_a .details{ padding:0; display:flex; flex-direction:column; gap:12px; }
        .event_details_a .title{ color:var(--accent); font-weight:900; font-size:2.2rem; margin:0; }
        .event_details_a .meta{ color:rgba(255,255,255,0.8); display:flex; gap:15px; flex-wrap:wrap; align-items:center; font-weight:600; }
        .event_details_a .meta .pill{ 
            background: rgba(199,184,155,0.15); 
            color:var(--accent); 
            padding:8px 14px; 
            border-radius:999px; 
            font-weight:700; 
            border: 1px solid rgba(199,184,155,0.25); 
            display:inline-flex; align-items:center; gap: 5px;
        }

        .event_details_a .desc{ color:var(--text-light); line-height:1.8; margin-top:6px; font-size: 1.05rem; }

        .event_details_a .actions{ margin-top:20px; display:flex; gap:15px; flex-wrap:wrap; align-items: center; }
        /* تصميم زر التسجيل المميز */
        .event_details_a .btn-accent{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none; color:#111; font-weight:800; padding:12px 24px; border-radius:12px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.45); transition: all .2s ease;
            text-decoration: none;
            display:inline-flex; align-items:center; gap: 8px;
            font-size: 1.1rem;
        }
        .event_details_a .btn-accent:hover{ 
            transform:translateY(-5px); 
            color:#111; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.7); 
        }

        .event_details_a .map-wrap{ margin-top:12px; border-radius:10px; overflow:hidden; border:2px solid var(--accent); height:300px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
        .event_details_a .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:15px; }
        .event_details_a .info-card{ 
            background: rgba(0,0,0,0.35); 
            padding:15px; border-radius:10px; 
            border:1px solid rgba(255,255,255,0.06); 
            color:var(--text-light);
            font-weight: 700;
        }

        .event_details_a .muted{ color:rgba(255,255,255,0.75); font-size:0.95rem; font-weight: 600; }
        .event_details_a .muted strong { color: var(--accent); }

        .event_details_a footer{ text-align:center; margin-top:25px; color:rgba(255,255,255,0.5); font-size:0.9rem; }
        .event_details_a .btn-outline-light {
            color: var(--text-light);
            border-color: rgba(255,255,255,0.2);
            font-weight: 600;
        }
        .event_details_a .btn-outline-light:hover {
            color: #111;
            background-color: var(--accent);
            border-color: var(--accent);
        }
     


/*End Event Details Admin*/




/*Start Event Details Employee*/



        .event_details_e .wrap{position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px;}
        
        /* 🎨 تصميم البطاقة Glassmorphism الداكنة */
        .event_details_e .card-event{
            background: var(--glass-dark);
            border:1px solid var(--glass-border);
            padding:30px; /* زيادة التباعد */
            border-radius:18px; 
            box-shadow: 0 16px 50px rgba(0,0,0,0.8);
            display:grid; 
            grid-template-columns: 480px 1fr; /* زيادة عرض الصورة */
            gap: 30px;
            max-width: 1200px;
            width: 100%;
            backdrop-filter: blur(10px) saturate(180%);
        }
        @media (max-width:1080px){ .event_details_e .card-event{ grid-template-columns:1fr; } }

        .event_details_e .media{
            background: rgba(0,0,0,0.25);
            padding:20px; 
            border-radius: 14px;
            display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:flex-start;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .event_details_e .media img{ width:100%; height:350px; object-fit:cover; border-radius:10px; box-shadow: 0 10px 30px rgba(0,0,0,0.7); }
        .event_details_e .media .logo{ width:160px; height:60px; object-fit:contain; display:block; margin-top:6px; filter: brightness(1.5) drop-shadow(0 8px 24px rgba(0,0,0,0.8)); }

        .event_details_e .details{ padding:0; display:flex; flex-direction:column; gap:12px; }
        .event_details_e .title{ color:var(--accent); font-weight:900; font-size:2.2rem; margin:0; }
        .event_details_e .meta{ color:rgba(255,255,255,0.8); display:flex; gap:15px; flex-wrap:wrap; align-items:center; font-weight:600; }
        .event_details_e .meta .pill{ background: rgba(199,184,155,0.15); color:var(--accent); padding:8px 14px; border-radius:999px; font-weight:700; border: 1px solid rgba(199,184,155,0.25); }

        .event_details_e .desc{ color:var(--text-light); line-height:1.8; margin-top:6px; font-size: 1.05rem; }

        .event_details_e .actions{ margin-top:20px; display:flex; gap:15px; flex-wrap:wrap; align-items: center; }
        /* تصميم زر التسجيل المميز */
        .event_details_e .btn-accent{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none; color:#111; font-weight:800; padding:12px 24px; border-radius:12px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.45); transition: all .2s ease;
            text-decoration: none;
            display:inline-flex; align-items:center; gap: 8px;
            font-size: 1.1rem;
        }
        .event_details_e .btn-accent:hover{ 
            transform:translateY(-5px); 
            color:#111; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.7); 
        }

        .event_details_e .map-wrap{ margin-top:12px; border-radius:10px; overflow:hidden; border:2px solid var(--accent); height:300px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
        .event_details_e .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:15px; }
        .event_details_e .info-card{ 
            background: rgba(0,0,0,0.35); 
            padding:15px; border-radius:10px; 
            border:1px solid rgba(255,255,255,0.06); 
            color:var(--text-light);
            font-weight: 700;
        }

        .event_details_e .muted{ color:rgba(255,255,255,0.75); font-size:0.95rem; font-weight: 600; }
        .event_details_e .muted strong { color: var(--accent); }

        .event_details_e footer{ text-align:center; margin-top:25px; color:rgba(255,255,255,0.5); font-size:0.9rem; }
        .event_details_e .btn-outline-light {
            color: var(--text-light);
            border-color: rgba(255,255,255,0.2);
            font-weight: 600;
        }
        .event_details_e .btn-outline-light:hover {
            color: #111;
            background-color: var(--accent);
            border-color: var(--accent);
        }
       



/*End Event Details Employee*/




/*Start Login Admin*/


   
        .login_admin .page-wrap{
            position:relative;
            z-index:1;
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:2rem;
        }
        .login_admin .card-glass{

             width:100%;
            max-width:420px;
            margin-inline:1rem;
            padding:2rem;
            border-radius:12px;
            background: var(--glass-bg); /* الخلفية الداكنة الشفافة */
            border:1px solid rgba(255,255,255,0.1);
            box-shadow: 0 8px 30px rgba(0,0,0,0.6);
            backdrop-filter: blur(8px) saturate(180%);
            /*text-align:right;*/
            
        }
        .login_admin .brand{
            text-align:center;
            margin-bottom:1.5rem;
        }
        .login_admin .brand img{
            max-width:240px;
            width:70%;
            height:auto;
            display:inline-block;
            filter: brightness(1.3) drop-shadow(0 8px 25px rgba(0,0,0,0.6)); /* إضاءة أكثر للشعار */
        }
        .login_admin h2{color:var(--accent); font-weight:900; margin-bottom:0.75rem; font-size: 1.8rem;}
        .login_admin .form-label{color:var(--text-light); font-weight: 600;}

        /* توحيد تصميم الإدخال مع النمط الداكن */
        .login_admin .form-control{
            background: rgba(255,255,255,0.08); /* خلفية شفافة قليلاً */
            border:1px solid rgba(199,184,155,0.2);
            color:var(--text-light);
            border-radius:10px;
            padding:10px 14px;
            transition: all 240ms ease;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
            font-weight: 600;
        }
        .login_admin .form-control::placeholder{ color: black; }

        .login_admin .form-control:hover, .login_admin .form-control:focus{
            background: rgba(255,255,255,0.15); /* تفتيح عند التركيز */
            box-shadow: 0 0 0 0.25rem rgba(199,184,155,0.3);
            border-color:var(--accent);
            outline:0;
            transform: translateY(-1px);
        }

        .login_admin .btn-primary{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none;
            color:#111;
            font-weight:700;
            border-radius:10px;
            padding: 12px 0;
            transition: all 180ms ease;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }
        .login_admin .btn-primary:hover{
            color:#111;
            transform: translateY(-5px);
            box-shadow: 0 18px 48px rgba(0,0,0,0.6);
        }
        .login_admin .help-text{
            font-size:0.9rem;
            color:rgba(255,255,255,0.65);
            margin-top:1rem;
            text-align: center;
        }
        /* Alerts */
        .login_admin .alert-danger, .login_admin .alert-success {
            border-radius: 10px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .login_admin .alert-danger {
            background-color: rgba(139, 0, 0, 0.7);
            color: #fff;
            border: 1px solid darkred;
        }

/*End Login Admin*/




/*Start Reports Employee*/


        .reports_e .layout{ position:relative; z-index:1; min-height:100vh; display:flex; gap:22px;  align-items:flex-start; }

        .reports_e .main{ flex:1; 
            
            margin: 25px;
            
        }
        .reports_e .panel{
          background: var(--glass-dark);
          border:1px solid var(--glass-border);
          padding:25px;
          border-radius:12px;
          box-shadow: 0 12px 40px rgba(0,0,0,0.6);
          backdrop-filter: blur(8px) saturate(180%);
        }

        .reports_e .page-title{ color:var(--accent); font-weight:900; text-align:center; margin:6px 0 20px; font-size:1.6rem }
        .reports_e .stats{ display:flex; gap:12px; margin-bottom:25px; align-items:stretch; }
        .reports_e .stat{
          flex:1; padding:18px; border-radius:10px; 
          background: rgba(199,184,155,0.05); 
          text-align:center;
          border:1px solid rgba(255,255,255,0.08);
          transition: transform .16s ease, box-shadow .16s ease;
        }
        .reports_e .stat:hover{ 
            transform:translateY(-6px); 
            box-shadow: 0 18px 46px rgba(0,0,0,0.6); 
            background: rgba(199,184,155,0.1);
        }
        .reports_e .stat h5{ margin:0; color:var(--accent); font-weight:700 }
        .reports_e .stat h2{ margin:8px 0 0; font-size:2.4rem; color:var(--text-light); font-weight: 900; }

        /* الأزرار و أدوات التحكم */
        .reports_e .controls{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
        .reports_e .btn-accent{
          background: linear-gradient(90deg,var(--accent),#d2c4a8);
          border:none; color:#111; font-weight:700; padding:10px 16px; border-radius:10px;
          box-shadow: 0 8px 30px rgba(0,0,0,0.35);
          transition: transform .14s ease, box-shadow .14s ease;
          text-decoration:none;
        }
        .reports_e .btn-accent:hover{ 
            transform:translateY(-4px); 
            color:#000; 
            box-shadow: 0 18px 46px rgba(0,0,0,0.55); 
        }
        .reports_e .btn-accent-remind {
            /* لون مختلف لزر التذكير */
            background: linear-gradient(90deg, #5e72e4, #825ee4) !important; 
            color: #fff !important;
            box-shadow: 0 8px 30px rgba(94, 114, 228, 0.5) !important;
        }
        .reports_e .btn-accent-remind:hover {
            transform:translateY(-4px); 
            color:#fff !important; 
            box-shadow: 0 18px 46px rgba(94, 114, 228, 0.7) !important;
        }

        .reports_e .btn-filter{
          background: rgba(255,255,255,0.05);
          color:var(--muted);
          border:1px solid rgba(255,255,255,0.1);
          padding:10px 16px;
          border-radius:10px;
          transition: all .14s ease;
          font-weight: 600;
          text-decoration: none;
        }
        .reports_e .btn-filter:hover{
            background: rgba(255,255,255,0.1);
            color: var(--text-light);
        }
        .reports_e .btn-filter.active{ 
            background: rgba(199,184,155,0.2); 
            color:var(--accent); 
            border-color: var(--accent);
        }

        /* الجداول */
        .reports_e .table-wrap{ overflow:auto; border-radius:10px; }
        .reports_e table.table{
          min-width:1000px;
          background: rgba(255,255,255,0.02);
          border-collapse:separate;
          border-spacing: 0;
        }
        .reports_e table.table thead th{
          background: rgba(0,0,0,0.45);
          color:var(--accent);
          font-weight:700;
          border-bottom:2px solid var(--accent);
          text-align:center;
          padding:14px 10px;
          white-space: nowrap;
        }
        .reports_e table.table tbody td{
          background: rgba(255,255,255,0.02);
          color:var(--muted);
          padding:14px 10px;
          vertical-align:middle;
          text-align:center;
          border-bottom:1px solid rgba(255,255,255,0.05);
          white-space: nowrap;
        }
        .reports_e table.table tbody tr:hover td{ 
            background: rgba(199,184,155,0.06); 
            transform: translateY(-2px); 
            transition:all .12s ease; 
            cursor: default;
        }

        .reports_e .badge-present{ background: rgba(33, 133, 61, 0.2); color:#4CAF50; padding:6px 10px; border-radius:750px; font-weight:700; border: 1px solid #4CAF50; }
        .reports_e .badge-absent{ color:#ff6347; background: rgba(255, 99, 71, 0.2); padding:6px 10px; border-radius:750px; font-weight:700; border: 1px solid #ff6347; }
        .reports_e .search-row{ display:flex; gap:15px; align-items:center; margin-bottom:20px; justify-content:flex-start; flex-wrap:wrap; }
        .reports_e .search-row input{
          background: rgba(255,255,255,0.05);
          border:1px solid var(--glass-border);
          color:var(--text-light);
          padding:10px 12px;
          border-radius:8px;
          min-width:250px;
          transition: all 0.2s ease;
        }
        .reports_e .search-row input:focus {
          background: #fff;
          color: #111;
          border-color: #d2c4a8;
          outline: none;
        }
        .reports_e .search-row .small{ color:rgba(255,255,255,0.7); font-size:0.95rem; }

        @media (max-width:992px){
          .reports_e .layout{ flex-direction:column; padding:16px }

          .reports_e .stats{ flex-direction:column; }
          .reports_e .controls { gap: 8px; }
          .reports_e table.table{ min-width:650px; }
        }



/*End Reports Employee*/




/*Start Reports Admin*/




      .reports_a .controls{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
        .reports_a .btn-accent{
          background: linear-gradient(90deg,var(--accent),#d2c4a8);
          border:none; color:#111; font-weight:700; padding:10px 16px; border-radius:10px;
          box-shadow: 0 8px 30px rgba(0,0,0,0.35);
          transition: transform .14s ease, box-shadow .14s ease;
          text-decoration:none;
        }
        .reports_a .btn-accent:hover{ 
            transform:translateY(-4px); 
            color:#000; 
            box-shadow: 0 18px 46px rgba(0,0,0,0.55); 
        }
        .reports_a .btn-accent-remind {
            /* لون مختلف لزر التذكير */
            background: linear-gradient(90deg, #5e72e4, #825ee4) !important; 
            color: #fff !important;
            box-shadow: 0 8px 30px rgba(94, 114, 228, 0.5) !important;
        }
        .reports_a .btn-accent-remind:hover {
            transform:translateY(-4px); 
            color:#fff !important; 
            box-shadow: 0 18px 46px rgba(94, 114, 228, 0.7) !important;
        }

       
     
        /* ===== منطقة المحتوى الرئيسي (Main Content) ===== */
        .reports_a .main-content {
            background-color: transparent;
            padding: 2rem;
            min-height: 100vh;
            overflow-y: auto;
        }

        .reports_a h3 { 
            color: var(--accent); 
            font-weight: 900; 
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
        }

        /* البطاقات الإحصائية (Stats Cards) */
        .reports_a .card-stat {
            background:linear-gradient(90deg, var(--accent), #d2c4a8); /* تدرج نحاسي فاتح */
            backdrop-filter: blur(6px) saturate(150%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            color: #111; /* نص داكن على خلفية فاتحة */
            box-shadow: 0 8px 30px rgba(0,0,0,0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .reports_a .card-stat:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.6);
        }
        .reports_a .card-stat h2 { color: #000; font-weight: 900; }
        .reports_a .card-stat h5 { font-weight: 500; }

        /* الأزرار المشتركة (Filter buttons) */
        .reports_a .btn-accent {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--accent);
            color: var(--text-light);
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        .reports_a .btn-accent.active {
            background: var(--accent);
            color: var(--accent-dark); /* نص نحاسي داكن */
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
        }
        .reports_a .btn-accent:hover:not(.active) {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            border-color: #fff;
        }

        /* زر التصدير (Success) */
        .reports_a .btn-success {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
            font-weight: 600;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
        }
        .reports_a .btn-success:hover {
            background-color: #218838;
            border-color: #1e7e34;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.5);
        }

        /* تصميم الجدول الزجاجي */
        .reports_a .card-table {
            background: var(--glass-bg);
            backdrop-filter: blur(6px) saturate(150%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 8px 30px rgba(0,0,0,0.5);
        }
        .reports_a .table-glass {
            background-color: rgba(255, 255, 255, 0.95); /* خلفية شبه بيضاء للوضوح */
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        .reports_a .table-glass th { 
            background-color: var(--accent); 
            color: #000; 
            font-weight: 700; 
            border-color: #bfae95;
        }
        .reports_a .table-glass td, .reports_a .table-glass th { 
            color: #111;
            padding: 12px;
            vertical-align: middle;
        }

/*End Reports Admin*/




/*Start Send Reminders*/


    .send_reminders .wrap{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px; }
    .send_reminders .card{
      width:100%; max-width:880px; border-radius:12px; padding:30px;
      /* تصميم Glassmorphism الداكن */
      background: rgba(0, 0, 0, 0.6); 
      border:1px solid rgba(255,255,255,0.1); 
      box-shadow: 0 14px 40px rgba(0,0,0,0.7);
      backdrop-filter: blur(10px) saturate(180%);
    }
    .send_reminders h2{ color:var(--accent); text-align:center; margin-bottom:15px; font-weight:900 }
    
    /* إحصائيات الإرسال */
    .send_reminders .stats{ display:flex; gap:12px; margin:20px 0; }
    .send_reminders .stat{ 
        flex:1; padding:20px; border-radius:10px; 
        /* جعل الإحصائيات بارزة باستخدام خلفية نحاسية خفيفة */
        background: linear-gradient(135deg, rgba(199, 184, 155, 0.1), rgba(210, 196, 168, 0.1));
        text-align:center; 
        border:1px solid var(--accent); 
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        transition: transform 0.3s;
    }
    .send_reminders .stat:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    }
    .send_reminders .stat h3{ margin:0; color:var(--accent); font-weight:700 }
    .send_reminders .stat p{ margin:8px 0 0; font-size:1.8rem; color:#fff; font-weight: 900; }
    
    /* الأخطاء */
    .send_reminders .errors{ margin-top:20px; display:grid; gap:12px; }
    .send_reminders .err-item{ 
        background: rgba(255, 99, 71, 0.1); /* خلفية حمراء فاتحة شفافة */
        padding:12px; border-radius:8px; color: #ff9999; /* لون نص أحمر فاتح */
        border:1px solid #ff6347; /* حدود حمراء */
        font-size: 0.95rem;
        word-break: break-word; /* لكسر الكلمات الطويلة في الأخطاء */
    }
    .send_reminders .err-item strong {
        color: #ff6347;
    }
    .send_reminders .success{ color:#8bc34a; font-weight: 600; }
    
    /* الأزرار */
    .send_reminders .actions{ display:flex; gap:15px; justify-content:center; margin-top:30px; }
    .send_reminders .btn-accent{
      /* زر نحاسي ممتلئ */
      background: linear-gradient(90deg,var(--accent),#d2c4a8); 
      border:none; color:#111; font-weight:700; padding:12px 20px; border-radius:10px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.4); text-decoration:none;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .send_reminders .btn-accent:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.6);
        background: linear-gradient(90deg,#d2c4a8, var(--accent)); 
    }
    .send_reminders .btn-outline{ 
        /* زر محيطي شفاف داكن */
        background:rgba(255,255,255,0.05); 
        border:1px solid var(--accent); 
        color:var(--text-light); 
        font-weight: 600;
        padding:12px 20px; border-radius:10px; 
        text-decoration:none; 
        transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .send_reminders .btn-outline:hover {
        background: rgba(199, 184, 155, 0.2);
        color: #fff;
        transform: translateY(-2px);
    }
    .send_reminders .small-muted{ color:rgba(255,255,255,0.75); font-size:0.95rem; text-align:center; margin-top:8px; }
    
    @media (max-width:720px){ 
        .send_reminders .stats{ flex-direction:column } 
        .send_reminders .actions{ flex-direction: column; }
        .send_reminders .actions a { text-align: center; }
    }
   


/*End Send Reminders*/




/*Start Verify OTP Employee*/



    .verify_otp_e .page{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }

    .verify_otp_e .card-glass{
      width:100%; max-width:420px; padding:30px 25px; border-radius:12px;
      /* خلفية Glassmorphism داكنة */
      background: rgba(0, 0, 0, 0.6); 
      border:1px solid rgba(255,255,255,0.1);
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      backdrop-filter: blur(10px) saturate(180%);
    }

    .verify_otp_e .brand{ text-align:center; margin-bottom:15px }
  

    .verify_otp_e h2{ color:var(--accent); text-align:center; margin-bottom:15px; font-weight:900 }

    .verify_otp_e label.form-label{ color: var(--text-light); font-weight:600; }
    
    /* تصميم حقل الإدخال الداكن/الزجاجي */
    .verify_otp_e .form-control{
      background: var(--input-bg-dark);
      color: var(--input-text-dark);
      border: 1px solid var(--input-border-dark);
      border-radius:8px;
      padding:12px 14px;
      transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
      caret-color: var(--input-text-dark);
    }
    .verify_otp_e .form-control::placeholder{ color: black; }

    /* تأثير التركيز (Focus effect) */
    .verify_otp_e .verify_otp_e .form-control:focus{
      background: #ffffff; /* يتحول إلى خلفية بيضاء عند التركيز */
      color: var(--input-text-on-white);
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 6px 18px rgba(0,0,0,0.2);
      outline: none;
      transform: translateY(-2px);
    }

    .verify_otp_e .otp-input{
      font-size:1.5rem; text-align:center; letter-spacing:4px; /* تقليل التباعد قليلاً */
      font-weight: 700;
    }

    .verify_otp_e .btn-primary{
      /* زر بلون التمييز النحاسي المتدرج */
      background: linear-gradient(90deg,var(--accent),#d2c4a8);
      border:none; color:#111; font-weight:700; padding:12px 14px; border-radius:10px;
      transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
      width:100%;
    }
    .verify_otp_e .btn-primary:hover{ 
        transform:translateY(-4px); 
        color:#000; 
        box-shadow: 0 18px 46px rgba(0,0,0,0.55); 
    }

    .verify_otp_e .help, .verify_otp_e .note{ 
        color:rgba(255,255,255,0.75); 
        font-size:0.9rem; 
        text-align:center; 
    }
    .verify_otp_e .help a{
        color: var(--accent) !important;
        font-weight: 600;
        transition: color 0.2s;
    }
    .verify_otp_e .verify_otp_e .help a:hover {
        color: #fff !important;
    }
    .verify_otp_e .note{ margin-top:8px; margin-bottom: 5px; }

    @media (max-width:480px){
      .verify_otp_e .card-glass{ padding:20px; max-width:360px }
    }



/*End Verify OTP Employee*/



/*Start Verify OTP Admin*/


        
        /* تغليف الصفحة والتوسيط الكامل */
        .verify_otp_a .page-wrap{
            position:relative;
            z-index:1;
            min-height:100vh;
            display:flex;
            align-items:center; /* توسيط عمودي */
            justify-content:center; /* توسيط أفقي */
            padding:2rem;
        }
        
        /* تصميم البطاقة الزجاجية الداكنة */
        .verify_otp_a .card-glass{
            width:100%;
            max-width:420px;
            margin-inline:1rem;
            padding:2rem;
            border-radius:12px;
            background: var(--glass-bg); /* الخلفية الداكنة الشفافة */
            border:1px solid rgba(255,255,255,0.1);
            box-shadow: 0 8px 30px rgba(0,0,0,0.6);
            backdrop-filter: blur(8px) saturate(180%);
            /*text-align:right;*/
        }
        
        /* العلامة التجارية */
        .verify_otp_a .brand{ text-align:center; margin-bottom:1rem; }
        .verify_otp_a .brand img{
            max-width:220px;
            width:70%;
            height:auto;
            display:inline-block;
            /* قلب فلاتر الألوان لتناسب الخلفية الداكنة */
            filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
        }
        
        .verify_otp_a h2{color:var(--accent); font-weight:700; margin-bottom:1.5rem; text-align:center;} /* العنوان باللون النحاسي و توسيطه */
        .verify_otp_a h3{color:var(--text-light); font-weight:400; font-size:1.1rem; margin-bottom:2rem; text-align:center;} /* رسالة إرشادية باللون الفاتح وتوسيطها */
        .verify_otp_a .form-label{color:var(--text-light)} /* لون التسميات فاتح */

        /* حقول الإدخال */
        .verify_otp_a .form-control{
            /* جعل حقل الإدخال فاتحاً بلمسة نحاسية */
            background: linear-gradient(90deg,var(--accent),#d2c4a8); 
            border:1px solid rgba(199,184,155,0.14);
            color:#111; /* نص داكن داخل الحقل الفاتح */
            border-radius:6px;
            padding:10px 10px;
            transition: background 240ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
            /* تغيير الخط وحجمه لحقول OTP لتكون أكثر وضوحاً */
            text-align:center;
            font-size:1.5rem;
            font-weight:600;
            letter-spacing: 0.35rem; /* تقليل المسافة قليلاً */
        }
        .verify_otp_a .form-control::placeholder{ color: black }
        .verify_otp_a .form-control:hover, .verify_otp_a .form-control:focus{
             /* تفتيح الخلفية أكثر عند التركيز */
            background: #ffffff;
            color: #111;
            box-shadow: 0 6px 18px rgba(0,0,0,0.45);
            border-color:rgba(0,0,0,0.12);
            outline:0;
            transform: translateY(-1px);
        }

        /* زر التأكيد (بنفس التدرج النحاسي) */
        .verify_otp_a .btn-primary{
            background: linear-gradient(90deg,var(--accent),#d2c4a8);
            border:none;
            color:#111;
            font-weight:700; /* زيادة سمك الخط */
            border-radius:8px;
            transition: color 180ms ease, transform 160ms ease, box-shadow 160ms ease;
            box-shadow: 0 6px 18px rgba(0,0,0,0.35);
        }
        .verify_otp_a .btn-primary:hover{
            color:#000;
            opacity: 0.9;
            transform: translateY(-4px);
            box-shadow: 0 14px 36px rgba(0,0,0,0.55);
        }
        
        /* روابط المساعدة وإعادة الإرسال */
        .verify_otp_a .help-text{
            font-size:0.9rem;
            color:rgba(255,255,255,0.7); /* نص فاتح رمادي */
            margin-top:0.75rem;
        }
        .verify_otp_a .resend-link{
            color:var(--accent); /* الرابط باللون النحاسي */
            text-decoration: none;
            font-weight: 600;
        }
        .verify_otp_a .resend-link:hover{
            color:#fff;
            text-decoration: underline;
        }
        @media (max-width:576px){
            .verify_otp_a .card-glass{padding:1.25rem; max-width:360px}
        }



/*End Verify OTP Admin*/







/*Start Register Manual*/



 .register_manual .container-fluid {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px) saturate(180%);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.register_manual .title {
    color: #c7b89b;
    font-weight: 900;
}
.register_manual .form-label {
    color: #e9e6e0;
    font-weight: 700;
    margin-bottom: 8px;
}

.register_manual .form-control, .form-select {
    background: var(--input-bg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    padding: 10px 15px;
    border-radius: 10px;
    transition: all 0.2s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    caret-color: var(--accent);
}
.register_manual .card{
    
        width: 600px;
}
.register_manual{
    display: flex;
    justify-content: center;
    align-items: center;
}
.register_manual .btn-add {
    background: linear-gradient(90deg, var(--accent), #d2c4a8);
    border: none;
    color: #111;
    font-weight: 900;
    padding: 12px 30px;
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}



/*End Register Manual*/