<?php include 'header.php'; ?>

<!-- National University Visual Identity -遵照 Visual Identity Guide 2025 -->
<!-- Fonts: Myriad Pro (Latin) + Noor (Arabic) as per brand guidelines -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Cairo as fallback for Arabic, Noor is preferred but requires license -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
  /* ============================================
     NATIONAL UNIVERSITY VISUAL IDENTITY
    遵照 Visual Identity Guide - Sudan
     Updated December 2025
     Primary Colors | Clean | Professional
     ============================================ */

  :root {
    /* PRIMARY PALETTE - Official National University Colors */
    --nu-blue: #0056B3;      /* Primary Blue - Main brand color */
    --nu-blue-dark: #003366;  /* Dark Blue for depth */
    --nu-blue-light: #2596be; /* Light Blue for accents */
    --nu-gold: #FFC107;       /* Pantone 123 - Yellow/Gold accent */
    --nu-gold-dark: #FFB300;  /* Darker gold for hover */
    
    /* SECONDARY PALETTE - Accent colors only */
    --nu-accent-green: #2E7D32;
    --nu-accent-red: #C62828;
    --nu-accent-teal: #00796B;
    --nu-accent-orange: #F57C00;
    
    /* Neutral palette */
    --nu-white: #FFFFFF;
    --nu-light-bg: #F5F5F5;
    --nu-gray-light: #E0E0E0;
    --nu-gray: #9E9E9E;
    --nu-text-primary: #212121;
    --nu-text-secondary: #757575;
    
    /* Shadows - clean and minimal (avoid drop shadows on text per brand guide) */
    --nu-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --nu-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --nu-transition: all 0.2s ease;
  }

  /* ===== TYPOGRAPHY ===== 
    遵照 Brand Guide: 
     Latin: Myriad Pro (Condensed for headlines, Regular for body, Bold for emphasis)
     Arabic: Noor (Light/Regular/Bold)
     Never add stroke, drop shadow, or distort type
  */
  
  body {
    /* Noor is the official Arabic font, but requires license. Cairo is Google Fonts alternative */
    font-family: 'Cairo', 'Noor', 'Myriad Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--nu-text-primary);
    background-color: var(--nu-light-bg);
    line-height: 1.5;
    direction: rtl;
  }

  /* Headings use bold weight per brand */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Noor', 'Myriad Pro', sans-serif;
    font-weight: 700;
    color: var(--nu-blue-dark);
    margin-bottom: 0.5rem;
  }

  /* No light fonts for headlines - per brand don'ts */
  .headline-light {
    font-weight: 400;  /* Regular, not light */
  }

  /* ===== BACKGROUND PATTERN ===== */
  .nu-bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.03"><path fill="%230056B3" d="M20,20 L30,20 L25,30 Z M70,70 L80,70 L75,80 Z M45,45 L55,45 L50,55 Z"/></svg>');
    background-repeat: repeat;
    z-index: -1;
    pointer-events: none;
  }

  /* ===== MAIN CONTAINER ===== */
  .nu-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
  }

  /* ===== LOGO / HEADER CARD ===== */
  .nu-brand-header {
    text-align: center;
    padding: 2rem;
    margin-bottom: 2.5rem;
    background: var(--nu-white);
    border: 1px solid var(--nu-gray-light);
    border-radius: 4px;
    box-shadow: var(--nu-shadow-sm);
    color: var(--nu-yield);
  }

  .nu-university-name {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--nu-blue);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
  }

  .nu-tagline {
    font-size: 1rem;
    font-weight: 400;
    color: var(--nu-text-secondary);
    border-top: 2px solid var(--nu-gold);
    display: inline-block;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
  }

  /* ===== CARD GRID ===== */
  .nu-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  /* ===== INDIVIDUAL CARDS ===== 
    遵照 Brand: Clean, modern, professional
    No excessive gradients, no drop shadows on text
  */
  .nu-card {
    background: var(--nu-white);
    border: 1px solid var(--nu-gray-light);
    border-radius: 4px;
    padding: 1.5rem;
    transition: var(--nu-transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .nu-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--nu-shadow-md);
    border-color: var(--nu-blue-light);
  }

  /* Colored top bar - using Pantone 123 (gold) as accent */
  .nu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--nu-gold);
  }

  /* Card Icon - clean circle, no heavy gradients */
  .nu-card-icon {
    width: 70px;
    height: 70px;
    background: var(--nu-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .nu-card-icon i {
    font-size: 2rem;
    color: var(--nu-white);
  }

  .nu-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nu-blue-dark);
    margin-bottom: 0.75rem;
  }

  .nu-card-desc {
    font-size: 0.875rem;
    color: var(--nu-text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1;
  }

  /* ===== BUTTONS =====
    遵照 Brand: No drop shadows, clean design
    Primary blue buttons with gold accent on hover
  */
  .nu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border-radius: 4px;
    transition: var(--nu-transition);
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 180px;
  }

  /* Primary button style */
  .nu-btn-primary {
    background: var(--nu-blue);
    color: var(--nu-white);
    border: 1px solid var(--nu-blue);
  }

  .nu-btn-primary:hover {
    background: var(--nu-blue-dark);
    border-color: var(--nu-blue-dark);
    transform: translateY(-1px);
  }

  /* Secondary button style for some cards */
  .nu-btn-secondary {
    background: var(--nu-white);
    color: var(--nu-blue);
    border: 1px solid var(--nu-blue);
  }

  .nu-btn-secondary:hover {
    background: var(--nu-blue);
    color: var(--nu-white);
  }

  /* Gold accent button for special cards */
  .nu-btn-gold {
    background: var(--nu-gold);
    color: var(--nu-blue-dark);
    border: 1px solid var(--nu-gold);
  }

  .nu-btn-gold:hover {
    background: var(--nu-gold-dark);
    transform: translateY(-1px);
  }

  /* Button variations per faculty (using secondary palette as accent) */
  .nu-btn-green {
    background: var(--nu-accent-green);
    color: white;
  }
  .nu-btn-green:hover { background: #1B5E20; }

  .nu-btn-red {
    background: var(--nu-accent-red);
    color: white;
  }
  .nu-btn-red:hover { background: #B71C1C; }

  .nu-btn-teal {
    background: var(--nu-accent-teal);
    color: white;
  }
  .nu-btn-teal:hover { background: #004D40; }

  .nu-btn-orange {
    background: var(--nu-accent-orange);
    color: white;
  }
  .nu-btn-orange:hover { background: #E65100; }

  /* ===== INFO SECTION ===== */
  .nu-info-section {
    background: var(--nu-white);
    border: 1px solid var(--nu-gray-light);
    border-radius: 4px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: var(--nu-shadow-sm);
  }

  .nu-info-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--nu-blue);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-right: 3px solid var(--nu-gold);
    padding-right: 0.75rem;
  }

  .nu-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nu-info-list li {
    font-size: 0.875rem;
    color: var(--nu-text-secondary);
    padding: 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nu-info-list li i {
    color: var(--nu-gold);
    width: 20px;
    font-size: 0.8rem;
  }

  /* ===== FOOTER NOTE ===== */
  .nu-brand-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nu-gray-light);
    font-size: 0.75rem;
    color: var(--nu-text-secondary);
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .nu-container {
      padding: 1rem;
    }
    .nu-brand-header {
      padding: 1.5rem;
    }
    .nu-university-name {
      font-size: 1.6rem;
    }
    .nu-cards-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .nu-card {
      padding: 1.25rem;
    }
  }

  @media (max-width: 480px) {
    .nu-university-name {
      font-size: 1.4rem;
    }
    .nu-btn {
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
    }
  }

  /* ===== UTILITY CLASSES ===== */
  .text-center { text-align: center; }
  .mt-2 { margin-top: 0.5rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .nu-tagline-text {
    color: var(--nu-gold); /* Pantone 123 - #FFC107 */
}
</style>

<!-- Background Pattern -->
<div class="nu-bg-pattern"></div>

<div class="nu-container" dir="rtl">
  
  
 <div class="nu-brand-header">
    <h5 class="nu-university-name nu-tagline-text">القمة الأخرى للتعليم العالي في السودان</h5>
</div>

  <!-- Cards Grid -->
  <div class="nu-cards-grid">
    
    <!-- الإدارة العليا -->
    <div class="nu-card">
      <div class="nu-card-icon"><i class="fas fa-crown"></i></div>
      <h3 class="nu-card-title">الإدارة العليا</h3>
      <p class="nu-card-desc">لوحة التحكم الرئيسية ومتابعة العمليات الإدارية والأكاديمية</p>
      <a href="admin_login.php?role=admin" class="nu-btn nu-btn-primary"><i class="fas fa-sign-in-alt"></i> دخول الإدارة</a>
    </div>
    
    <!-- الكليات -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: var(--nu-accent-green);"><i class="fas fa-university"></i></div>
      <h3 class="nu-card-title">الكليات</h3>
      <p class="nu-card-desc">نظام إدارة تسجيل الطلاب والعمليات الأكاديمية</p>
      <a href="committee_login.php?role=committee" class="nu-btn nu-btn-green"><i class="fas fa-sign-in-alt"></i> دخول الكليات</a>
    </div>
    
    <!-- عمادة شؤون الطلاب -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: var(--nu-accent-teal);"><i class="fas fa-users"></i></div>
      <h3 class="nu-card-title">عمادة شؤون الطلاب</h3>
      <p class="nu-card-desc">إدارة الأنشطة الطلابية والخدمات والدعم والرعاية للطلاب</p>
      <a href="student_affairs_login.php" class="nu-btn nu-btn-teal"><i class="fas fa-sign-in-alt"></i> دخول العمادة</a>
    </div>
    
    <!-- الوحدة الصحية -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: var(--nu-accent-red);"><i class="fas fa-stethoscope"></i></div>
      <h3 class="nu-card-title">الوحدة الصحية</h3>
      <p class="nu-card-desc">نظام الكشف الطبي والمتابعة الصحية وإدارة السجلات الطبية</p>
      <a href="doctor_login.php" class="nu-btn nu-btn-red"><i class="fas fa-sign-in-alt"></i> دخول الوحدة</a>
    </div>
    
    <!-- القبول والتسجيل -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: var(--nu-blue-light);"><i class="fas fa-file-contract"></i></div>
      <h3 class="nu-card-title">القبول والتسجيل</h3>
      <p class="nu-card-desc">إدارة عمليات القبول والتسجيل والتنسيق الأكاديمي</p>
      <a href="admission_login.php" class="nu-btn nu-btn-primary"><i class="fas fa-sign-in-alt"></i> دخول القبول</a>
    </div>

    <!-- البطاقة الجامعية -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: var(--nu-accent-orange);"><i class="fas fa-id-card"></i></div>
      <h3 class="nu-card-title">البطاقة الجامعية</h3>
      <p class="nu-card-desc">إدارة وإصدار البطاقات الجامعية للطلاب والعاملين</p>
      <a href="card_login.php?role=card_printing" class="nu-btn nu-btn-orange"><i class="fas fa-sign-in-alt"></i> دخول النظام</a>
    </div>

    <!-- الإدارة المالية والحسابية -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: #0097A7;"><i class="fas fa-calculator"></i></div>
      <h3 class="nu-card-title">الإدارة المالية</h3>
      <p class="nu-card-desc">إدارة الحسابات المالية والمصروفات والرسوم الدراسية</p>
      <a href="accountant_login.php?role=accountant" class="nu-btn nu-btn-primary"><i class="fas fa-sign-in-alt"></i> دخول المحاسب</a>
    </div>

    <!-- نظام استخراج الشهادات -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: #3949AB;"><i class="fas fa-graduation-cap"></i></div>
      <h3 class="nu-card-title">نظام استخراج الشهادات</h3>
      <p class="nu-card-desc">إدارة وطباعة الشهادات الأكاديمية وتوثيق الدرجات العلمية</p>
      <a href="certificate_login.php" class="nu-btn nu-btn-primary"><i class="fas fa-sign-in-alt"></i> دخول النظام</a>
    </div>

    <!-- المستودع الرقمي -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: #AD1457;"><i class="fas fa-database"></i></div>
      <h3 class="nu-card-title">المستودع الرقمي</h3>
      <p class="nu-card-desc">أرشفة الأبحاث والرسائل العلمية والتقارير الأكاديمية</p>
      <a href="digital_repository_login.php" class="nu-btn nu-btn-primary"><i class="fas fa-sign-in-alt"></i> دخول المستودع</a>
    </div>

    <!-- المجلات العلمية -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: #33691E;"><i class="fas fa-newspaper"></i></div>
      <h3 class="nu-card-title">المجلات العلمية</h3>
      <p class="nu-card-desc">منصة إدارة وتحرير ونشر المجلات العلمية المحكمة</p>
      <a href="journals_login.php" class="nu-btn nu-btn-green"><i class="fas fa-sign-in-alt"></i> دخول المجلات</a>
    </div>

    <!-- المكتبة الإلكترونية -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: #5D4037;"><i class="fas fa-book-open"></i></div>
      <h3 class="nu-card-title">المكتبة الإلكترونية</h3>
      <p class="nu-card-desc">قاعدة رقمية للكتب والمراجع والمصادر العلمية</p>
      <a href="elibrary_login.php" class="nu-btn nu-btn-primary"><i class="fas fa-sign-in-alt"></i> دخول المكتبة</a>
    </div>

    <!-- نظام التحقق من الشهادات -->
    <div class="nu-card">
      <div class="nu-card-icon" style="background: #00838F;"><i class="fas fa-shield-alt"></i></div>
      <h3 class="nu-card-title">نظام التحقق من الشهادات</h3>
      <p class="nu-card-desc">التحقق الإلكتروني من صحة الشهادات والوثائق الصادرة عن الجامعة</p>
      <a href="verify_certificate.php" class="nu-btn nu-btn-gold"><i class="fas fa-search"></i> التحقق من الشهادة</a>
    </div>

  </div>

  <!-- Info Section -->
  <div class="nu-info-section">
    <h4 class="nu-info-title"><i class="fas fa-info-circle"></i> معلومات هامة</h4>
    <ul class="nu-info-list">
      <li><i class="fas fa-check-circle"></i> يرجى استخدام حسابك الرسمي للدخول إلى النظام</li>
      <li><i class="fas fa-clock"></i> النظام متاح على مدار الساعة طوال أيام الأسبوع</li>
      <li><i class="fas fa-headset"></i> للحصول على المساعدة، يرجى التواصل مع الدعم الفني</li>
      <li><i class="fas fa-shield-alt"></i> نظام التحقق من الشهادات متاح للجهات الخارجية دون تسجيل دخول</li>
      <li><i class="fas fa-file-pdf"></i> الملفات الرسمية متوفرة بصيغ EPS و PDF و PNG</li>
    </ul>
  </div>

  <!-- Brand Footer -->
  <div class="nu-brand-footer">
    <p>الجامعة الوطنية - السودان | National University - Sudan</p>
    
  </div>

</div>

<?php include 'footer.php'; ?>
