/* =====================================================
   Global Variables (Brand)
===================================================== */
:root{
  --brand-900:#1e3a8a;
  --brand-700:#2563eb;
  --brand-500:#3E9BF1; /* اللون المعتمد */
  --brand-300:#93c5fd;

  --dark:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --bg:#f8f9fa;
}

/* =====================================================
   Base
===================================================== */
*{
  box-sizing: border-box;
}

body{
  font-family: "Tajawal", sans-serif;
  background: var(--bg);
  color: var(--dark);
  line-height: 1.8;
}

/* =====================================================
   Glass Navbar
===================================================== */
.navbar{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.navbar-brand img{
  height: 42px;
}

.navbar .nav-link,
.navbar-brand{
  color: #0f172a !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Hover underline effect */
.navbar .nav-link::after{
  content:'';
  position:absolute;
  bottom:-6px;
  right:0;
  width:0;
  height:2px;
  background: var(--brand-500);
  transition: width .25s ease;
}

.navbar .nav-link:hover::after{
  width:100%;
}

/* =====================================================
   Buttons
===================================================== */
.btn-yusr{
  background: var(--brand-500);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 26px;
  border: 0;
}

.btn-yusr:hover{
  background: var(--brand-700);
  color:#fff;
}

/* =====================================================
   Fix fixed navbar overlap
===================================================== */
body{
  padding-top: 88px; /* ارتفاع الشريط العلوي */
}

@media (max-width: 992px){
  body{
    padding-top: 72px; /* موبايل */
  }
}

/* =====================================================
   Hero Section
===================================================== */
.hero{
  background:
    linear-gradient(rgba(15,23,42,.55),rgba(15,23,42,.55)),
    url('https://tecs.org.sa/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-30-at-16.46.16-1.jpeg')
    center / cover no-repeat;
  color:#fff;
  padding: 120px 20px;
}

.hero h1 span{
  color: var(--brand-300);
}

/* =====================================================
   Sections
===================================================== */
.section-padding{
  padding: 80px 20px;
}

.section-title{
  font-weight: 900;
  margin-bottom: 30px;
}

/* =====================================================
   Cards
===================================================== */
.card,
.soft-card{
  background: var(--card);
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 14px 35px rgba(2,6,23,.06);
}

.kpi-card{
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
}

.kpi-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(62,155,241,.12);
  color: var(--brand-700);
  font-size: 1.2rem;
}

/* =====================================================
   Media Center
===================================================== */
.media-cover{
  aspect-ratio: 16/10;
  object-fit: cover;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}

.media-tag{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .6rem;
  border-radius:999px;
  background: rgba(62,155,241,.12);
  color: var(--brand-700);
  font-weight: 800;
  font-size: .82rem;
}

/* =====================================================
   Dashboard Layout
===================================================== */
.dashboard-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1rem;
}

@media (max-width: 992px){
  .dashboard-grid{
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Quick Links
===================================================== */
.quick-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .8rem .9rem;
  border-radius: 14px;
  background: rgba(62,155,241,.08);
  border: 1px solid rgba(62,155,241,.18);
  text-decoration:none;
  color:#0f172a;
  font-weight: 800;
}

.quick-link:hover{
  background: rgba(62,155,241,.14);
}

/* =====================================================
   Contact / Mail
===================================================== */
.mail-cta{
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(62,155,241,.10),
    rgba(147,197,253,.18)
  );
  border: 1px solid rgba(62,155,241,.25);
}

/* =====================================================
   Footer
===================================================== */
footer{
  background:#0f172a;
  color:#e5e7eb;
}

footer a{
  color: var(--brand-300);
  text-decoration:none;
}

footer a:hover{
  text-decoration: underline;
}