/* ════════════════════════════════════════════════════════════════
   CBA — AlMaarefa University (جامعة المعرفة) | Identity Stylesheet
   ════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
  --teal:     #00adca;
  --teal-dk:  #0095b0;
  --teal-lt:  #D4F1F1;
  --teal-bg:  #E0F5F8;
  --navy:     #0F2B4C;
  --navy-lt:  #1A3D66;
  --gold:     #cfa868;
  --gold-lt:  #F9F0DC;
  --cream:    #F8FAFC;
  --white:    #FFFFFF;
  --gray-50:  #F1F5F9;
  --gray-100: #E2E8F0;
  --gray-200: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --text:     #1E293B;
  --text-lt:  #475569;
  --muted:    #94A3B8;
  --radius:   12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 3px rgba(15,43,76,.04);
  --shadow:   0 4px 20px rgba(15,43,76,.07);
  --shadow-lg:0 12px 40px rgba(15,43,76,.12);
  --transition:.3s cubic-bezier(.4,0,.2,1);
  
  /* Legacy support */
  --navy-deep: #0F2B4C;
  --primary: #00adca;
  --slate: #64748b;
  --bg: #F8FAFC;
  --border: #E2E8F0;
  --accent: #cfa868;
  --gold-light: #F9F0DC;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn {
  from { opacity:0 } to { opacity:1 }
}
@keyframes float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}
}
@keyframes pulse-glow {
  0%,100%{box-shadow:0 0 0 0 rgba(0,173,202,.15)} 50%{box-shadow:0 0 0 12px rgba(0,173,202,0)}
}
.anim-fade-in{animation:fadeIn .8s ease-out}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body {
  font-family:'Tajawal','Inter',Arial,sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.8;
  font-size:17px;
  -webkit-font-smoothing:antialiased
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{display:block;max-width:100%}

/* ═══════════════════ Glassmorphism Cards ═══════════════════ */
.glass-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: var(--transition);
}
.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ═══════════════════ Page Header ═══════════════════ */
.page-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 50%, var(--teal-dk) 100%);
    color: var(--white);
    padding: 3rem 0;
    border-radius: 0 0 50px 50px;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}
.page-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
    opacity: .3;
    pointer-events: none;
}

/* ═══════════════════ Custom Table ═══════════════════ */
.custom-table {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-100);
    background: var(--white);
}
.custom-table thead {
    background: var(--navy);
    color: var(--white);
}
.custom-table thead th {
    padding: 1.1rem 1.2rem;
    font-weight: 700;
    font-size: .88rem;
    border: none;
}
.custom-table tbody tr {
    transition: var(--transition);
}
.custom-table tbody tr:hover {
    background: var(--teal-bg);
}
.custom-table td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--text);
    font-size: .88rem;
}
.custom-table tbody tr:last-child td {
    border-bottom: none;
}

/* ═══════════════════ Navigation Pills ═══════════════════ */
.nav-pills-custom {
    display: inline-flex;
    gap: 8px;
    background: var(--white);
    padding: 6px;
    border-radius: 100px;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    border: 1px solid var(--gray-100);
}
.nav-link-custom {
    padding: 10px 22px;
    border-radius: 100px;
    color: var(--text-lt);
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    transition: var(--transition);
    white-space: nowrap;
}
.nav-link-custom.active {
    background: var(--teal);
    color: var(--white);
}
.nav-link-custom:not(.active):hover {
    background: var(--teal-bg);
    color: var(--teal);
}

/* ═══════════════════ Course Cards & Filter Chips ═══════════════════ */
.course-card {
    border-radius: var(--radius);
    transition: var(--transition);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    background: var(--white);
}
.course-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--teal); 
    box-shadow: var(--shadow-lg); 
}
.course-code { 
    background: var(--navy); 
    color: var(--white); 
    padding: 4px 12px; 
    border-radius: var(--radius-sm); 
    font-weight: 700; 
    font-size: .85rem; 
}
.filter-chip { 
    padding: 8px 20px; 
    border-radius: 100px; 
    border: 1px solid var(--gray-100); 
    background: var(--white); 
    color: var(--text-lt); 
    cursor: pointer; 
    transition: var(--transition); 
    font-weight: 600; 
    font-size: .85rem; 
}
.filter-chip.active { 
    background: var(--teal); 
    color: var(--white); 
    border-color: var(--teal); 
}
.filter-chip:hover:not(.active) { 
    border-color: var(--teal); 
    color: var(--teal); 
}

/* ═══════════════════ Utilities ═══════════════════ */
.text-primary{color:var(--teal)!important}
.text-navy{color:var(--navy)!important}
.text-slate{color:var(--text-lt)!important}
.text-gold{color:var(--gold)!important}
.bg-gold-light{background:var(--gold-lt)!important}
.site-footer { 
    background: var(--navy); 
    color: rgba(255,255,255,.55); 
    padding: 2rem 0; 
    text-align: center; 
    margin-top: 3rem; 
}

/* ═══════════════════ Buttons ═══════════════════ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--teal);color:var(--white);
  font-size:.92rem;font-weight:800;padding:.75rem 2rem;
  border-radius:50px;transition:var(--transition);border:2px solid var(--teal)
}
.btn-primary:hover{background:var(--teal-dk);border-color:var(--teal-dk);transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ═══════════════════ Responsive ═══════════════════ */
@media(max-width:768px){
    .nav-pills-custom {overflow-x:auto;white-space:nowrap;max-width:100%;}
    .glass-card {padding:1.5rem;}
}
@media(max-width:640px){
    .nav-pills-custom {flex-wrap:nowrap;overflow-x:auto;padding:4px;gap:4px;}
    .nav-link-custom {padding:8px 14px;font-size:.8rem;}
}