/* ====== الإعدادات العامة ====== */
:root {
  --font-main: "Tajawal", "Noto Kufi Arabic", "Cairo", "Amiri", sans-serif;
  --accent-green: #4CAF50;
  --accent-dark: #2e7d32;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-main), system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: #f7fdf9;
  color: #333;
  line-height: 1.6;
  direction: rtl;
  # padding-top: 60px; /* حتى لا يختفي المحتوى تحت الهيدر */
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  padding: 20px 0;
}

/* ====== العناوين ====== */
h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2px;
  margin: 10px 0;
}
p,a,li,span,label,input,button {
  font-weight: 400;
}

/* ====== الهيدر ====== */

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
	  background: linear-gradient(120deg, var(--accent-green), #8BC34A);
  color: #fff;
  text-align: center;
 /* padding: 30px 20px;*/
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


.header-text {
    text-align: right;
    font-family: 'Cairo', 'Tajawal', sans-serif;
}
.sticky-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000; /* يبقيه فوق باقي العناصر */
    /*background: #fff; /* خلفية للهيدر */
   /* box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
    display: flex;
    align-items: center;
    justify-content: flex-start; 
	  gap: 15px; /* مسافة صغيرة بين اللوغو والنص */
    padding: 10px 20px;
}

.logo-img {
    max-height: 80px;
    width: auto;
}

.hero-header,
.hero-header h1,.main-header h1 {
  font-size: 2rem;
  font-weight: 800;
}
.hero-header p,.main-header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* ====== النافبار ====== */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #f5f5f5;
  padding: 10px;
  gap: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.main-nav a {
  text-decoration: none;
  color: var(--accent-dark);
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: 0.3s;
}
.main-nav a:hover {
  background: var(--accent-green);
  color: #fff;
  transform: translateY(-2px);
}
.main-nav i { margin-left: 5px; color: #388e3c; }
/* Style spécifique pour le bouton de déconnexion */
.main-nav a[href="/logout"] {
  background: #e24f7d;
  color: #fff;  /* texte blanc pour plus de contraste */
  font-weight: 600;
}
.main-nav a[href="/ai_chatbot"] {
  background: #4f80e2;
  color: #fff;  /* texte blanc pour plus de contraste */
  font-weight: 600;
}
.main-nav a[href="/logout"]:hover {
  background: #c93a65; /* une teinte plus foncée au hover */
  transform: translateY(-2px);
}

.main-nav a[href="/ai_chatbot"]:hover {
  background: #0a4a89; /* une teinte plus foncée au hover */
  transform: translateY(-2px);
}

/* Style spécifique pour le bouton de connexion */
.main-nav a[href="/auth"] {
  background: #4e75d6;
  color: #fff;  /* texte blanc pour plus de contraste */
  font-weight: 600;
}

.main-nav a[href="/auth"]:hover {
  background: #436bd1; /* une teinte plus foncée au hover */
  transform: translateY(-2px);
}

/* ====== الشبكة ====== */
.grid { display: grid; gap: 20px; margin: 20px 0; }
.grid-2 { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }

/* ====== البطاقات ====== */
.card,.stats-card,.service-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: 0.2s;
}
.card { padding: 20px; }
.card:hover { transform: translateY(-5px); }

.service-card {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: #333;
}
.service-card:hover { transform: scale(1.03); background: #f3f9f4; }
.service-icon {
  font-size: 2rem;
  width: 55px; height: 55px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.icon-green{background:#c8e6c9;color:#2e7d32;}
.icon-blue{background:#bbdefb;color:#1565c0;}
.icon-yellow{background:#fff9c4;color:#f9a825;}
.icon-purple{background:#e1bee7;color:#6a1b9a;}

.stats-card {
  padding: 25px; text-align: center;
}
.stats-card:hover { transform: translateY(-5px); }
.stats-card p:first-child { font-size: 2rem; font-weight: bold; }
.stats-card.green{border-top:5px solid #4CAF50;}
.stats-card.blue{border-top:5px solid #2196F3;}
.stats-card.yellow{border-top:5px solid #FF9800;}

/* ====== الأزرار ====== */
.btn-white {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background: #fff;
  color: #333;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: 0.3s;
}
.btn-white:hover { background: #333; color: #fff; }

/* ====== عنوان القسم ====== */
.section-title {
  font-size: 1.5rem;
  color: var(--accent-green);
  margin: 30px 0 10px;
  text-align: center;
  border-bottom: 2px solid var(--accent-green);
  display: inline-block;
  padding-bottom: 5px;
}

/* ====== الفوتر ====== */
.main-footer {
  background: var(--accent-green);
  color: #fff;
  text-align: center;
  padding: 20px 10px 70px; /* مساحة لشريط التنقل السفلي */
  margin-top: 30px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.2);
}
.main-footer p { font-size: 0.9rem; }
.main-footer .social-icons { margin-top: 10px; }
.main-footer .social-icons a {
  margin: 0 8px;
  color: #fff;
  font-size: 1.2rem;
  transition: 0.3s;
}
.main-footer .social-icons a:hover { color: #dcedc8; transform: scale(1.2); }
.footer-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 0; /* بادينغ أصغر */
  height: 56px;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.09);
  z-index: 1000;
}

.footer-nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #666;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: 0.3s;
  height: 48px;
  justify-content: center;
}

.footer-nav a i {
  font-size: 1.2rem;
  margin-bottom: 2px;
  line-height: 1;
  transition: transform 0.3s;
}
.footer-nav a span {
  font-size: 0.95em;
  line-height: 1.05;
}

.footer-nav a:hover { color: var(--accent-green, #199688); }
.footer-nav a:hover i {  transform: scale(1.15); }
.footer-nav a.active { color: var(--accent-green, #199688); font-weight: bold; }

/* موبايل: الشريط أصغر قليلاً والكلمات أصغر */
@media (max-width:650px){
  .footer-nav {height: 46px;}
  .footer-nav a {height: 37px; font-size: 0.79rem;}
  .footer-nav a i {font-size: 1.05rem;}
  .footer-nav a span {font-size: 0.9em;}
}


/* ====== استجابة الهواتف ====== */
@media (max-width:768px){
  html,body{font-size:15px;}
  .hero-header h1,.main-header h1{font-size:1.6rem;}
  .hero-header p,.main-header p{font-size:0.95rem;}
  .btn-white{padding:7px 12px;font-size:0.9rem;}
}
  
        

        /* Styles للتنبيهات */
        .alert-card {
            background-color: #fff;
            border-radius: 12px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .alert-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .alert-content {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .alert-info {
            display: flex;
            align-items: center;
            flex: 1;
        }

        /* أيقونة التنبيه */
        .alert-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 15px;
            font-size: 20px;
            font-weight: bold;
        }

        /* ألوان الأيقونات حسب المستوى */
        .alert-urgent .alert-icon {
            background-color: #f44336;
            color: white;
        }

        .alert-important .alert-icon {
            background-color: #ff9800;
            color: white;
        }

        .alert-normal .alert-icon {
            background-color: #2196f3;
            color: white;
        }

        /* عنوان التنبيه */
        .alert-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }

        /* زر التفاصيل */
        .details-btn {
            background-color: #fff;
            border: 2px solid #ddd;
            border-radius: 25px;
            padding: 8px 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
            color: #555;
        }

        .alert-urgent .details-btn {
            border-color: #f44336;
            color: #f44336;
        }

        .alert-urgent .details-btn:hover {
            background-color: #f44336;
            color: white;
        }

        .alert-important .details-btn {
            border-color: #ff9800;
            color: #ff9800;
        }

        .alert-important .details-btn:hover {
            background-color: #ff9800;
            color: white;
        }

        .alert-normal .details-btn {
            border-color: #2196f3;
            color: #2196f3;
        }

        .alert-normal .details-btn:hover {
            background-color: #2196f3;
            color: white;
        }

        /* Popup Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            animation: fadeIn 0.3s ease;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 0;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            position: relative;
            animation: slideIn 0.3s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
		

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }

        .modal-header .alert-icon {
            margin-left: 10px;
        }

        .modal-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }

        .modal-body {
            padding: 20px;
            color: #555;
            line-height: 1.6;
            font-size: 16px;
        }

        .close {
            position: absolute;
            top: 15px;
            left: 10px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            color: #999;
            transition: color 0.3s ease;
        }

        .close:hover {
            color: #333;
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { 
                opacity: 0;
                transform: translateY(-50px) scale(0.8);
            }
            to { 
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* رسالة عدم وجود تنبيهات */
        .no-alerts {
            text-align: center;
            padding: 40px;
            color: #666;
            font-size: 18px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
            }
            
            .alert-content {
                padding: 15px;
            }
            
            .alert-title {
                font-size: 16px;
            }
            
            .details-btn {
                padding: 6px 15px;
                font-size: 12px;
            }
            
            .modal-content {
                width: 95%;
                margin: 20% auto;
            }
        }
   
/* Footer Styling */
.main-footer {
    background-color: #2c3e50; /* Couleur de fond */
    color: #ecf0f1; /* Couleur du texte */
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo Section */
.footer-logo {
    flex: 1;
    min-width: 200px;
}
.footer-logo-img {
    width: 100px;
    height: auto;
    margin-bottom: 10px;
}
.footer-logo p {
    font-size: 14px;
    margin-top: 5px;
}

/* Links Section */
.footer-links, .footer-contact, .social-icons {
    flex: 1;
    min-width: 200px;
    margin-top: 20px;
}
.footer-links h4, .footer-contact h4, .social-icons h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #3ECC16; /* Couleur d'accent */
}
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links ul li {
    margin-bottom: 10px;
}
.footer-links ul li a {
    color: #ecf0f1;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links ul li a:hover {
    color: #3ECC16;
}

/* Contact Information */
.footer-contact p {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.footer-contact i {
    margin-right: 10px;
    font-size: 16px;
}

/* Social Media Icons */
.social-icons-list {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}
.social-icons-list a {
    color: #ecf0f1;
    font-size: 20px;
    transition: transform 0.3s ease;
}
.social-icons-list a:hover {
    color: #3ECC16;
    transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-logo, .footer-links, .footer-contact, .social-icons {
        margin-bottom: 20px;
    }
}