@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --wbd-navy:   #0B2545;
  --wbd-blue:   #1F5C8B;
  --wbd-teal:   #13B8A0;
  --wbd-gold:   #F5A623;
  --wbd-red:    #E74C3C;
  --wbd-green:  #27AE60;
  --wbd-bg:     #F0F4F9;
  --wbd-card:   #FFFFFF;
  --wbd-border: #E2E8F2;
  --wbd-text:   #1A2B4A;
  --wbd-muted:  #7A8BA8;
}

.wbd-wrap * { box-sizing: border-box; font-family: 'Tajawal', sans-serif !important; }
.wbd-wrap { direction: rtl; color: var(--wbd-text); }

/* Topbar */
.wbd-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.wbd-title  { font-size:1.5rem; font-weight:800; color:var(--wbd-navy); }
.wbd-title span { color:var(--wbd-blue); }
.wbd-topbar-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wbd-date-badge { background:#fff; border:1px solid var(--wbd-border); padding:6px 14px; border-radius:20px; font-size:0.8rem; color:var(--wbd-muted); }
.wbd-live { display:flex; align-items:center; gap:6px; background:rgba(39,174,96,0.1); border:1px solid rgba(39,174,96,0.3); padding:6px 12px; border-radius:20px; font-size:0.78rem; color:var(--wbd-green); font-weight:600; }
.wbd-dot-g { width:7px; height:7px; background:var(--wbd-green); border-radius:50%; animation:wbd-pulse 1.5s infinite; }
@keyframes wbd-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* KPI Grid */
.wbd-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.wbd-kpi-card { background:#fff; border:1px solid var(--wbd-border); border-radius:14px; padding:20px; position:relative; overflow:hidden; animation:wbd-up 0.4s ease both; transition:transform 0.2s,box-shadow 0.2s; }
.wbd-kpi-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.wbd-kpi-card:nth-child(2){animation-delay:.08s}
.wbd-kpi-card:nth-child(3){animation-delay:.16s}
.wbd-kpi-card:nth-child(4){animation-delay:.24s}
@keyframes wbd-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.wbd-kpi-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:12px; }
.wbd-kpi-val  { font-size:2rem; font-weight:900; line-height:1; margin-bottom:4px; }
.wbd-kpi-lbl  { font-size:0.78rem; color:var(--wbd-muted); font-weight:500; }
.wbd-kpi-strip{ position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:0 0 14px 14px; }

/* Cards */
.wbd-main-grid   { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; margin-bottom:20px; }
.wbd-bottom-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:20px; }
.wbd-card { background:#fff; border:1px solid var(--wbd-border); border-radius:14px; overflow:hidden; animation:wbd-up 0.5s ease both; }
.wbd-card-hdr  { padding:14px 18px; border-bottom:1px solid var(--wbd-border); display:flex; align-items:center; justify-content:space-between; }
.wbd-card-title{ font-size:0.88rem; font-weight:700; color:var(--wbd-navy); display:flex; align-items:center; gap:6px; }
.wbd-card-body { padding:18px; }
.wbd-alert-card { border-color:rgba(231,76,60,0.25); }

/* Badges */
.wbd-badge-g { font-size:0.7rem; background:rgba(39,174,96,0.1); color:var(--wbd-green); padding:3px 9px; border-radius:10px; font-weight:700; }
.wbd-badge-r { font-size:0.7rem; background:rgba(231,76,60,0.1); color:var(--wbd-red); padding:3px 9px; border-radius:10px; font-weight:700; }

/* List items */
.wbd-list { display:flex; flex-direction:column; }
.wbd-list-item { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--wbd-border); transition:background 0.15s; }
.wbd-list-item:last-child { border-bottom:none; }
.wbd-list-item:hover { background:#f8fafc; }
.wbd-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:#fff; flex-shrink:0; }
.wbd-medal  { font-size:0.8rem; }
.wbd-info   { flex:1; min-width:0; }
.wbd-name   { font-size:0.83rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wbd-sub    { font-size:0.7rem; color:var(--wbd-muted); margin-top:1px; }
.wbd-status { font-size:0.7rem; font-weight:700; padding:3px 9px; border-radius:10px; flex-shrink:0; }
.wbd-status-present { background:rgba(39,174,96,0.1); color:var(--wbd-green); }
.wbd-status-absent  { background:rgba(231,76,60,0.1); color:var(--wbd-red); }
.wbd-time   { font-size:0.7rem; color:var(--wbd-muted); flex-shrink:0; }
.wbd-alert-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wbd-alert-pct  { font-size:0.8rem; font-weight:800; color:var(--wbd-red); flex-shrink:0; }
.wbd-mini-bar   { width:70px; background:var(--wbd-border); border-radius:3px; height:6px; flex-shrink:0; }
.wbd-empty      { padding:28px; text-align:center; color:var(--wbd-muted); font-size:0.82rem; }

/* Course progress */
.wbd-course-item { padding:12px 18px; border-bottom:1px solid var(--wbd-border); }
.wbd-course-item:last-child { border-bottom:none; }
.wbd-course-hdr  { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.wbd-course-name { font-size:0.82rem; font-weight:700; }
.wbd-course-pct  { font-size:0.78rem; font-weight:700; }
.wbd-progress    { height:6px; background:var(--wbd-border); border-radius:3px; overflow:hidden; }
.wbd-progress-fill { height:100%; border-radius:3px; transition:width 1s ease; }

/* Calendar */
.wbd-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.wbd-cal-hdr  { text-align:center; font-size:0.65rem; color:var(--wbd-muted); font-weight:600; padding:4px 0; }
.wbd-cal-day  { aspect-ratio:1; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:0.72rem; font-weight:600; position:relative; cursor:default; transition:transform 0.15s; }
.wbd-cal-day:hover { transform:scale(1.1); }
.wbd-cal-present { background:rgba(39,174,96,0.15); color:var(--wbd-green); }
.wbd-cal-absent  { background:rgba(231,76,60,0.08); color:var(--wbd-red); }
.wbd-cal-future  { background:var(--wbd-border); color:var(--wbd-muted); }
.wbd-cal-today   { background:var(--wbd-navy); color:#fff; }
.wbd-cal-check   { font-size:0.5rem; line-height:1; }
.wbd-motivate    { margin:14px 18px; padding:10px 14px; border-radius:8px; border:1px solid; font-size:0.82rem; font-weight:600; }

/* Responsive */
@media(max-width:900px) {
  .wbd-kpi-grid    { grid-template-columns:repeat(2,1fr); }
  .wbd-main-grid   { grid-template-columns:1fr; }
  .wbd-bottom-grid { grid-template-columns:1fr; }
}
@media(max-width:500px) {
  .wbd-kpi-grid { grid-template-columns:1fr 1fr; }
}