:root{
  --navy:#0B1D35;
  --navy2:#142f55;
  --gold:#C8A850;
  --bg:#f7f7f8;
  --text:#0f172a;
  --muted:#64748b;
  --shadow:0 20px 50px rgba(15,23,42,.08), 0 8px 20px rgba(15,23,42,.05);
}

/* ===== PAGE HEADER ===== */
.ph{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:26px;
}

.ph-title{
  font-size:28px;
  font-weight:700;
  color:var(--navy);
}

.ph-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* ===== ROLE BADGE ===== */
.rb{
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#eef4ff;
  color:var(--navy);
}

/* ===== STATS ===== */
.sbar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
  margin-bottom:26px;
}

.sc{
  background:#fff;
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
  transition:.25s;
  cursor:pointer;
}

.sc:hover{
  transform:translateY(-4px);
  box-shadow:0 35px 80px rgba(15,23,42,.12);
}

.sv{
  font-size:28px;
  font-weight:700;
  color:var(--navy);
}

.sl{
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
}

/* ===== GRID ===== */
.g2{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:22px;
}

/* ===== TABLE CARD ===== */
.dash-course-table{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ===== TABLE ===== */
table{
  width:100%;
  border-collapse:collapse;
}

thead th{
  font-size:12px;
  color:var(--navy);
  background:#f8fafc;
  padding:14px;
  text-align:left;
}

tbody td{
  padding:14px;
  border-bottom:1px solid #eef2f7;
}

tbody tr:hover{
  background:#fbfcfe;
}

/* ===== SECTION TITLE ===== */
.sec-title{
  font-size:16px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:12px;
}

/* ===== ANIMATION ===== */
.sc{
  animation:fadeUp .5s ease;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .g2{
    grid-template-columns:1fr;
  }
}


/* ===== FORCE PURE WHITE TABLE/CARD ===== */
.dash-course-table,
.dash-course-table table,
table,
thead,
thead th,
tbody tr,
tbody td,
.card,
.panel,
.widget,
.dashboard-card{
  background:#ffffff !important;
}
/* ===== END ===== */



/* ===== WHITE TABLE HEADER ===== */
thead th{
  background:#ffffff !important;
}
/* ===== END ===== */



/* ===== MATCH SIDEBAR COLOR ===== */
.dash-course-table thead,
thead,
thead th{
  background:#0B1D35 !important;
  color:#ffffff !important;
}

thead th{
  border:none !important;
  font-weight:600;
}

/* تخلي الهيدر شيك */
.dash-course-table thead th:first-child{
  border-top-left-radius:12px;
}
.dash-course-table thead th:last-child{
  border-top-right-radius:12px;
}
/* ===== END ===== */



/* ===== TABLE ROW HOVER PRO ===== */
tbody tr{
  transition:background .18s ease, transform .18s ease;
}

tbody tr:hover{
  background:#f8fbff !important;
  transform:scale(1.002);
}
/* ===== END ===== */



/* ===== NEW COURSE BUTTON PRO ===== */
a[href*="course"], .btn, button{
  border-radius:12px !important;
  box-shadow:0 10px 22px rgba(11,29,53,.18);
}

a[href*="course"]:hover, .btn:hover, button:hover{
  transform:translateY(-1px);
}
/* ===== END ===== */



/* ===== GLOBAL LMS POLISH ===== */

/* page titles */
h1, .page-title, .ph-title{
  color:#0B1D35;
  letter-spacing:-0.2px;
}

.page-subtitle, .ph-sub, .muted{
  color:#64748b;
}

/* cards / panels */
.card, .panel, .widget, .box, .content-card{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.05);
  border-radius:18px !important;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}

.card:hover, .panel:hover, .widget:hover, .box:hover, .content-card:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 60px rgba(15,23,42,.10);
}

/* tables */
table{
  border-radius:16px;
  overflow:hidden;
}

thead th{
  background:linear-gradient(135deg,#0B1D35,#142f55) !important;
  color:#fff !important;
  font-weight:700;
  border:none !important;
}

tbody tr{
  transition:background .18s ease, transform .18s ease;
}

tbody tr:hover{
  background:#f8fbff !important;
}

/* forms */
input, select, textarea{
  background:#fff !important;
  border:1.5px solid #d1d5db !important;
  border-radius:12px !important;
}

input:focus, select:focus, textarea:focus{
  border-color:#0B1D35 !important;
  box-shadow:0 0 0 4px rgba(11,29,53,.08) !important;
  outline:none !important;
}

/* buttons */
button, .btn, a.btn, input[type="submit"]{
  border-radius:12px !important;
  background:linear-gradient(135deg,#0B1D35,#142f55) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(11,29,53,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}

button:hover, .btn:hover, a.btn:hover, input[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(11,29,53,.22);
}

/* section titles */
.sec-title, .section-title{
  color:#0B1D35;
  font-weight:700;
}

/* badges */
.badge, .tag, .status{
  border-radius:999px;
  font-weight:700;
}

/* ===== END GLOBAL LMS POLISH ===== */



/* ===== DELETE BUTTON PRO ===== */
.btn-danger, button.delete, a.delete{
  background:#fff !important;
  color:#dc2626 !important;
  border:1.5px solid #dc2626 !important;
  border-radius:10px !important;
  transition:all .18s ease;
}

/* hover */
.btn-danger:hover, button.delete:hover, a.delete:hover{
  background:#dc2626 !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(220,38,38,.25);
}

/* icon spacing */
.btn-danger i{
  margin-right:6px;
}
/* ===== END ===== */



/* ===== WHATSAPP ICON PRO ===== */
.fa-whatsapp,
i.fa-whatsapp,
.whatsapp,
.whatsapp-icon{
  color:#25D366 !important;
  transition:all .18s ease;
}

.fa-whatsapp:hover,
i.fa-whatsapp:hover,
.whatsapp:hover,
.whatsapp-icon:hover{
  color:#1ebe5d !important;
  transform:scale(1.08);
}
/* ===== END ===== */



/* ===== GRADES PREMIUM UPGRADE ===== */

/* Row Hover Effect */
table tbody tr{
  transition:all .2s ease;
}
table tbody tr:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  background:#ffffff !important;
}

/* WhatsApp Button Premium */
.fa-whatsapp{
  color:#25D366 !important;
}
.fa-whatsapp:hover{
  color:#1ebe5d !important;
  transform:scale(1.15);
}

/* Action Buttons */
button, .btn{
  border-radius:10px !important;
  transition:all .2s ease;
}
button:hover, .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

/* Grade Highlight */
td:last-child{
  font-weight:700;
}

/* High Grade Glow */
td:has(span:contains("A")),
td:has(span:contains("B")){
  color:#15803d !important;
}

/* Low Grade */
td:has(span:contains("F")){
  color:#dc2626 !important;
}

/* Top Cards Shadow */
.stat-card, .card{
  border-radius:14px !important;
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
}

/* ===== END ===== */



/* ===== DELETE BUTTON RED FIX ===== */

.btn-danger, .delete-btn{
  background:#ef4444 !important;   /* الأحمر الأساسي */
  border:none !important;
  color:#fff !important;
}

.btn-danger:hover, .delete-btn:hover{
  background:#dc2626 !important;   /* الأحمر الغامق عند hover */
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(220,38,38,0.25);
}

/* لو الأزرار عبارة عن button بدون class */
button:has(.fa-trash){
  background:#ef4444 !important;
  color:#fff !important;
  border:none !important;
}

button:has(.fa-trash):hover{
  background:#dc2626 !important;
}

/* ===== END ===== */

\n
/* ===== DELETE POPUP UI ===== */
.du-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.38);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  backdrop-filter:blur(3px);
}
.du-modal{
  width:min(420px,92vw);
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.20);
  padding:22px;
  animation:duFade .18s ease;
}
.du-title{
  font-size:20px;
  font-weight:700;
  color:#0B1D35;
  margin-bottom:8px;
}
.du-text{
  font-size:14px;
  color:#64748b;
  line-height:1.5;
  margin-bottom:18px;
}
.du-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.du-cancel,
.du-confirm{
  min-width:96px;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.du-cancel{
  background:#e5e7eb !important;
  color:#111827 !important;
}
.du-confirm{
  background:#ef4444 !important;
  color:#fff !important;
}
.du-confirm:hover{
  background:#dc2626 !important;
}
@keyframes duFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
/* ===== END DELETE POPUP UI ===== */
\n

/* ===== WHATSAPP ICON ORIGINAL COLOR ===== */

/* Font Awesome */
.fa-whatsapp{
  color:#25D366 !important;
}

/* لو icon داخل زر */
button .fa-whatsapp,
.btn .fa-whatsapp{
  color:#25D366 !important;
}

/* Hover */
button:hover .fa-whatsapp,
.btn:hover .fa-whatsapp{
  color:#1ebe5d !important;
  transform:scale(1.1);
}

/* لو SVG */
svg.whatsapp-icon{
  fill:#25D366 !important;
}

/* ===== END ===== */



/* ===== FORCE WHATSAPP GREEN (FINAL FIX) ===== */

/* أيقونة واتساب داخل الأزرار */
.btn i.fa-whatsapp,
button i.fa-whatsapp,
.fa-whatsapp{
  color:#25D366 !important;
}

/* الخلفية تخليها شيك */
.btn:has(.fa-whatsapp),
button:has(.fa-whatsapp){
  background:#0f172a !important;  /* نفس لون الأزرار */
  border:none !important;
}

/* Hover */
.btn:has(.fa-whatsapp):hover,
button:has(.fa-whatsapp):hover{
  background:#111827 !important;
}

.btn:has(.fa-whatsapp):hover i,
button:has(.fa-whatsapp):hover i{
  color:#1ebe5d !important;
  transform:scale(1.15);
}

/* لو الأيقونة SVG */
svg[data-icon="whatsapp"]{
  fill:#25D366 !important;
}

/* ===== END ===== */



/* ===== WHATSAPP PREMIUM GLOW ===== */

.btn:has(.fa-whatsapp),
button:has(.fa-whatsapp){
  position:relative;
  overflow:hidden;
}

/* Glow effect */
.btn:has(.fa-whatsapp)::before,
button:has(.fa-whatsapp)::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(37,211,102,0.25) 0%, transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
}

.btn:has(.fa-whatsapp):hover::before,
button:has(.fa-whatsapp):hover::before{
  opacity:1;
}

/* Icon animation */
.btn:has(.fa-whatsapp):hover i,
button:has(.fa-whatsapp):hover i{
  transform:scale(1.2);
  color:#25D366 !important;
}

/* Subtle pulse */
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.3)}
  70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

.btn:has(.fa-whatsapp),
button:has(.fa-whatsapp){
  animation:waPulse 2.5s infinite;
}

/* ===== END ===== */