:root {
  --primary: #1B4F72;
  --primary-light: #2471A3;
  --primary-dark: #0D2B3E;
  --accent: #C9932A;
  --accent-light: #E8B84B;
  --accent-dark: #9A6E1A;
  --success: #1A7A4A;
  --danger: #C0392B;
  --warning: #E67E22;
  --info: #2980B9;
  --bg: #F4F6F8;
  --bg2: #EBF0F5;
  --surface: #FFFFFF;
  --surface2: #F8FAFC;
  --border: #D0DBE8;
  --text: #1A2533;
  --text2: #4A5B6E;
  --text3: #7A8FA4;
  --shadow: 0 2px 12px rgba(27,79,114,0.10);
  --shadow-lg: 0 6px 30px rgba(27,79,114,0.14);
  --radius: 10px;
  --radius-lg: 16px;
  --font-ar: 'Tajawal', 'Cairo', sans-serif;
  --font-en: 'Outfit', sans-serif;
  --sidebar-w: 260px;
  --header-h: 64px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-ar); background: var(--bg); color: var(--text); direction: rtl; min-height: 100vh; }
body.en { font-family: var(--font-en); direction: ltr; }

/* SCROLLBAR */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:3px; }

/* LAYOUT */
#app { display:flex; flex-direction:column; min-height:100vh; }
.main-layout { display:flex; flex:1; }
.sidebar {
  width: var(--sidebar-w); min-height: calc(100vh - var(--header-h));
  background: var(--primary-dark); color:#fff; position:sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); overflow-y:auto; display:flex; flex-direction:column;
  transition: width 0.3s; z-index:100;
}
.content-area { flex:1; padding:28px; min-width:0; }

/* HEADER */
.header {
  height: var(--header-h); background: var(--primary);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px; position:sticky; top:0; z-index:200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.header-logo { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.header-logo .logo-icon { width:40px; height:40px; background: var(--accent); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.logo-text { font-size:17px; font-weight:700; line-height:1.2; }
.logo-sub { font-size:11px; opacity:0.75; font-weight:400; }
.header-actions { display:flex; align-items:center; gap:12px; }
.header-btn { background:rgba(255,255,255,0.12); border:none; color:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-family:inherit; display:flex; align-items:center; gap:6px; transition:background 0.2s; }
.header-btn:hover { background:rgba(255,255,255,0.22); }
.avatar-circle { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; cursor:pointer; }

/* SIDEBAR NAV */
.sidebar-section { padding:18px 12px 6px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; opacity:0.45; font-weight:600; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px; margin:2px 8px;
  border-radius:8px; cursor:pointer; transition:all 0.2s; font-size:14px; color:rgba(255,255,255,0.7);
  text-decoration:none; user-select:none;
}
.nav-item:hover { background:rgba(255,255,255,0.10); color:#fff; }
.nav-item.active { background: var(--accent); color:#fff; font-weight:600; }
.nav-item .nav-icon { font-size:18px; flex-shrink:0; }
.nav-badge { background:var(--danger); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; margin-right:auto; margin-left:4px; }
body.en .nav-badge { margin-left:auto; margin-right:4px; }

/* PAGES */
.page { display:none; }
.page.active { display:block; }

/* CARDS */
.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding:24px; }
.card-sm { padding:16px; border-radius: var(--radius); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-title { font-size:17px; font-weight:700; color: var(--text); }
.card-sub { font-size:13px; color: var(--text3); margin-top:3px; }

/* STATS GRID */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card { background:var(--surface); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; }
.stat-icon { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.stat-info .stat-val { font-size:26px; font-weight:800; line-height:1; }
.stat-info .stat-lbl { font-size:12px; color:var(--text3); margin-top:4px; }

/* TABLES */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { background:var(--bg); color:var(--text2); font-weight:600; padding:12px 16px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
body.en th { text-align:left; }
td { padding:12px 16px; border-bottom:1px solid var(--bg2); color:var(--text); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg2); }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }
.badge-green { background:#D5F0E2; color:#1A7A4A; }
.badge-red { background:#FDDEDD; color:#C0392B; }
.badge-blue { background:#D6EAF8; color:#1A5276; }
.badge-yellow { background:#FEF9E7; color:#9A6E1A; border:1px solid #F0C060; }
.badge-gray { background:#EAECEE; color:#5D6D7E; }
.badge-orange { background:#FDEBD0; color:#884400; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:all 0.2s; text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-light); }
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--accent-dark); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#A93226; }
.btn-outline { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
.btn-outline:hover { background:var(--bg2); }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-xs { padding:4px 9px; font-size:11px; border-radius:6px; }

/* FORMS */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--text2); margin-bottom:6px; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:8px;
  font-size:14px; font-family:inherit; color:var(--text); background:var(--surface);
  transition:border-color 0.2s; outline:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(36,113,163,0.12); }
.form-textarea { resize:vertical; min-height:90px; }

/* MODAL */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.50); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border-radius:var(--radius-lg); padding:28px; width:100%; max-width:560px; max-height:85vh; overflow-y:auto; position:relative; }
.modal-title { font-size:18px; font-weight:700; margin-bottom:20px; }
.modal-close { position:absolute; top:16px; left:16px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text3); }
body.en .modal-close { left:auto; right:16px; }

/* TABS */
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; }
.tab { padding:10px 18px; cursor:pointer; font-size:14px; font-weight:500; color:var(--text3); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; border-radius:8px 8px 0 0; }
.tab:hover { color:var(--primary); background:var(--bg2); }
.tab.active { color:var(--primary); font-weight:700; border-bottom-color:var(--primary); }

/* GRID */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* CLASS CARD */
.class-card {
  background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); transition:transform 0.2s, box-shadow 0.2s; cursor:pointer;
}
.class-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.class-card-banner { height:110px; display:flex; align-items:center; justify-content:center; font-size:36px; position:relative; }
.class-card-body { padding:16px; }
.class-card-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.class-card-meta { font-size:12px; color:var(--text3); display:flex; gap:12px; flex-wrap:wrap; }
.class-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--bg2); }

/* ANNOUNCEMENT */
.announce-card { background:var(--surface); border-radius:var(--radius); padding:18px 20px; border-right:4px solid var(--primary); margin-bottom:14px; box-shadow:var(--shadow); }
body.en .announce-card { border-right:none; border-left:4px solid var(--primary); }
.announce-card.important { border-color:var(--danger); }
.announce-card.award { border-color:var(--accent); }
.announce-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.announce-meta { font-size:12px; color:var(--text3); }
.announce-text { font-size:13.5px; color:var(--text2); margin-top:8px; line-height:1.6; }

/* VIDEO CARD */
.video-card { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.video-thumb { height:140px; background:var(--primary-dark); display:flex; align-items:center; justify-content:center; position:relative; }
.play-btn { width:50px; height:50px; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--primary); }
.video-info { padding:12px; }
.video-title { font-size:13.5px; font-weight:600; margin-bottom:4px; }
.video-meta { font-size:11.5px; color:var(--text3); }

/* FORUM */
.thread-item { padding:14px 16px; border-bottom:1px solid var(--bg2); transition:background 0.15s; cursor:pointer; }
.thread-item:hover { background:var(--bg2); }
.thread-title { font-size:14px; font-weight:600; margin-bottom:4px; }
.thread-meta { font-size:11.5px; color:var(--text3); display:flex; gap:12px; }

/* WHITEBOARD */
#whiteboard-canvas { border-radius:12px; background:#fff; cursor:crosshair; touch-action:none; border:2px solid var(--border); }
.wb-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.wb-tool { padding:7px 12px; border-radius:7px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; font-size:13px; font-family:inherit; font-weight:500; }
.wb-tool.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.color-dot { width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.color-dot.selected { border-color:var(--text); }

/* QUIZ BUILDER */
.quiz-question { background:var(--bg2); border-radius:var(--radius); padding:16px; margin-bottom:14px; border:1.5px solid var(--border); }
.quiz-option { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px; margin-bottom:6px; background:var(--surface); border:1px solid var(--border); }
.quiz-option input[type=radio], .quiz-option input[type=checkbox] { width:16px; height:16px; cursor:pointer; }

/* PROFILE CARD */
.profile-card { background:var(--surface); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow); text-align:center; }
.profile-avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; margin:0 auto 12px; }
.profile-name { font-size:16px; font-weight:700; }
.profile-role { font-size:12px; color:var(--text3); margin-top:3px; }
.profile-bio { font-size:13px; color:var(--text2); margin-top:10px; line-height:1.65; }

/* PAYMENT */
.plan-card { border:2px solid var(--border); border-radius:var(--radius-lg); padding:22px; transition:border-color 0.2s; cursor:pointer; }
.plan-card:hover, .plan-card.selected { border-color:var(--primary); }
.plan-card.featured { border-color:var(--accent); background:linear-gradient(135deg,#FEF9F0,#FFF); }
.plan-price { font-size:30px; font-weight:800; color:var(--primary); }
.plan-price span { font-size:14px; font-weight:400; color:var(--text3); }

/* LIVE CLASS */
.live-badge { display:inline-flex; align-items:center; gap:5px; background:#FDDEDD; color:var(--danger); font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--danger); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* NOTIFICATION */
.notif { position:fixed; top:80px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; padding:12px 24px; border-radius:10px; font-size:14px; font-weight:600; z-index:9999; opacity:0; transition:opacity 0.3s; box-shadow:var(--shadow-lg); pointer-events:none; }
.notif.show { opacity:1; }

/* SEARCH BAR */
.search-bar { display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:10px 16px; margin-bottom:20px; }
.search-bar input { border:none; outline:none; flex:1; font-size:14px; font-family:inherit; background:transparent; color:var(--text); }
.search-icon { color:var(--text3); font-size:18px; }

/* LANDING */
.hero { background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%); color:#fff; padding:80px 40px; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-title { font-size:42px; font-weight:800; margin-bottom:14px; position:relative; }
.hero-sub { font-size:17px; opacity:0.85; margin-bottom:32px; position:relative; }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:40px 0; }
.feature-item { background:var(--surface); padding:24px; border-radius:var(--radius-lg); box-shadow:var(--shadow); text-align:center; }
.feature-icon { font-size:34px; margin-bottom:12px; }
.feature-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.feature-desc { font-size:13px; color:var(--text2); line-height:1.65; }

/* AUTH */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); padding:24px; }
.auth-box { background:var(--surface); border-radius:var(--radius-lg); padding:36px 32px; width:100%; max-width:420px; box-shadow:var(--shadow-lg); }
.auth-logo { text-align:center; margin-bottom:24px; }
.auth-title { font-size:22px; font-weight:800; color:var(--primary); margin-bottom:4px; }
.auth-sub { font-size:13px; color:var(--text3); }
.auth-title-wrap { text-align:center; margin-bottom:24px; }
.role-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px; }
.role-tab { padding:10px; text-align:center; border:2px solid var(--border); border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text2); transition:all 0.2s; }
.role-tab.active { border-color:var(--primary); background:var(--primary); color:#fff; }

/* COMMENT */
.comment { display:flex; gap:12px; margin-bottom:16px; }
.comment-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.comment-body { flex:1; }
.comment-header { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.comment-name { font-size:13px; font-weight:600; }
.comment-time { font-size:11px; color:var(--text3); }
.comment-text { font-size:13.5px; color:var(--text2); line-height:1.6; }

/* ENROLLMENT REQUEST */
.enroll-request { background:var(--bg2); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; border:1.5px solid var(--border); }
.enroll-request.pending { border-color:var(--warning); }
.enroll-info { flex:1; min-width:0; }
.enroll-name { font-size:14px; font-weight:600; }
.enroll-class { font-size:12px; color:var(--text3); }
.enroll-actions { display:flex; gap:8px; flex-shrink:0; }

/* PROGRESS */
.progress-bar { background:var(--bg2); border-radius:20px; height:8px; overflow:hidden; }
.progress-fill { height:100%; border-radius:20px; background:var(--primary); transition:width 0.5s; }

/* SECTION HEADER */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.section-title { font-size:20px; font-weight:800; color:var(--text); }
.section-title span { color:var(--primary); }

/* COMPONENT STATE FEEDBACK */
.loading,
.updating
 {
  position: relative;
  opacity: 0.82;
  pointer-events: none;
  border-radius: 10px;
  min-height: 60px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.loading {
  color: var(--info);
  border: 1px solid rgba(41, 128, 185, 0.7);
  background: rgba(41, 128, 185, 0.05);
}

.updating {
  color: var(--accent);
  border: 1px solid rgba(201, 147, 42, 0.7);
  background: rgba(201, 147, 42, 0.05);
}

.error {
  color: var(--danger);
  border: 1px solid rgba(192, 57, 43, 0.7);
  background: rgba(192, 57, 43, 0.05);
}

.success {
  color: var(--success);
  border: 1px solid rgba(26, 122, 74, 0.7);
  background: rgba(26, 122, 74, 0.05);
}

.loading::before,
.updating::before
 {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading::after,
.updating::after
 {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: component-shimmer 1s linear infinite;
}

.loading-text,
.updating-text,
.error-text,
.success-text {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding-left: 32px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text2);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes component-shimmer {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* TABLE SHELL LOADING
Better pattern for a table
Usually you do not spin the table content itself while it is being reloaded. Better is:
put the spinner on a wrapper around the table
or add a “loading-row” overlay
<div class="table-shell loading">
  <table>...</table>
</div>
*/

.table-shell {
  position: relative;
}

.table-shell.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  display: block;
}

.table-shell.loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #ddd;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 2;
}
/* END OF my additional styles */

/* RESPONSIVE */
@media(max-width:900px) {
  .sidebar { position:fixed; right:-var(--sidebar-w); transition:right 0.3s; }
  body.en .sidebar { left:-var(--sidebar-w); right:auto; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .content-area { padding:16px; }
  .hero { padding:50px 20px; }
  .hero-title { font-size:28px; }
}

/* PRINT */
@media print {
  .sidebar,
  .header {
    display: none;
  }

  .content-area {
    padding: 0;
  }
}