/* ═══════════════════════════════════════════════════════════════════
   ClassCloud — Admin Styles  v2.0
   تصميم احترافي مناسب للمدارس الثانوية
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --smu-primary:       #2f6fed;
  --smu-primary-dark:  #1d4fc4;
  --smu-primary-light: #eff6ff;
  --smu-secondary:     #4f46e5;
  --smu-success:       #059669;
  --smu-success-bg:    #ecfdf5;
  --smu-warning:       #d97706;
  --smu-warning-bg:    #fffbeb;
  --smu-danger:        #dc2626;
  --smu-danger-bg:     #fef2f2;
  --smu-info-bg:       #eff6ff;
  --smu-surface:       #ffffff;
  --smu-bg:            #f0f4ff;
  --smu-border:        #e2e8f0;
  --smu-text:          #1e293b;
  --smu-text-muted:    #64748b;
  --smu-radius:        18px;
  --smu-radius-sm:     10px;
  --smu-shadow:        0 1px 3px rgba(16,25,46,.04), 0 8px 24px rgba(16,25,46,.06);
  --smu-shadow-md:     0 12px 32px rgba(16,25,46,.12);

  /* Pastel stat-card backgrounds (Octavia-style) */
  --pastel-blue:   #eaf1ff; --pastel-green:  #e9f9f1; --pastel-purple: #f2edff;
  --pastel-orange: #fff4e6; --pastel-teal:   #e6fbf8; --pastel-red:    #fdeeee;

  /* Badge colors */
  --badge-blue:   #2f6fed; --badge-blue-bg:   #eff6ff;
  --badge-green:  #059669; --badge-green-bg:  #ecfdf5;
  --badge-red:    #dc2626; --badge-red-bg:    #fef2f2;
  --badge-purple: #7c3aed; --badge-purple-bg: #f5f3ff;
  --badge-orange: #d97706; --badge-orange-bg: #fffbeb;
  --badge-teal:   #0d9488; --badge-teal-bg:   #f0fdfa;
  --badge-grey:   #64748b; --badge-grey-bg:   #f1f5f9;
}

/* ── Reset & Base ────────────────────────────────────────────────── */
.smu-wrap *, .smu-modal * { box-sizing: border-box; }
.smu-wrap { direction: rtl; font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif; color: var(--smu-text); }
.smu-wrap input, .smu-wrap select, .smu-wrap textarea, .smu-wrap button {
  font-family: inherit; font-size: 14px;
}

/* ── Page Header ─────────────────────────────────────────────────── */
.smu-header {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  padding: 4px 4px 22px; margin-bottom: 0;
}
.smu-header-title {
  font-size: 26px; font-weight: 800; color: var(--smu-text);
  display: flex; align-items: center; gap: 12px;
}
.smu-header-title i {
  font-size: 18px; width:42px; height:42px; border-radius:14px;
  background: var(--pastel-blue); color: var(--smu-primary);
  display:flex; align-items:center; justify-content:center;
}
.smu-header-meta { color: var(--smu-text-muted); font-size: 13px; }

.smu-body {
  background: transparent;
  padding: 0; min-height: 60vh;
  border-radius: 0;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.smu-card {
  background: var(--smu-surface); border-radius: var(--smu-radius);
  box-shadow: var(--smu-shadow); margin-bottom: 20px; overflow: hidden;
}
.smu-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px; border-bottom: 1px solid var(--smu-border);
  font-weight: 600; font-size: 15px; color: var(--smu-text);
  background: #fafbff;
}
.smu-card-header i { color: var(--smu-primary); }
.smu-card-body { padding: 20px; }

/* ── Stats Grid ──────────────────────────────────────────────────── */
.smu-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.smu-stat-card {
  background: var(--smu-surface);
  border-radius: var(--smu-radius);
  padding: 20px; display: flex; align-items: center; gap: 16px;
  box-shadow: var(--smu-shadow); text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--smu-border);
}
.smu-stat-card:hover { transform: translateY(-3px); box-shadow: var(--smu-shadow-md); color: inherit; }
.smu-stat-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; background: rgba(255,255,255,.7);
}
.smu-stat-value { font-size: 26px; font-weight: 800; line-height: 1; color: var(--smu-text); }
.smu-stat-label { font-size: 13px; color: var(--smu-text-muted); margin-top: 4px; }

/* Stat colors — pastel full-card backgrounds, Octavia-style */
.smu-stat-blue   { background: var(--pastel-blue);   border-color: transparent; }
.smu-stat-blue   .smu-stat-icon { color: var(--badge-blue); }
.smu-stat-green  { background: var(--pastel-green);  border-color: transparent; }
.smu-stat-green  .smu-stat-icon { color: var(--badge-green); }
.smu-stat-purple { background: var(--pastel-purple); border-color: transparent; }
.smu-stat-purple .smu-stat-icon { color: var(--badge-purple); }
.smu-stat-orange { background: var(--pastel-orange); border-color: transparent; }
.smu-stat-orange .smu-stat-icon { color: var(--badge-orange); }
.smu-stat-teal   { background: var(--pastel-teal);   border-color: transparent; }
.smu-stat-teal   .smu-stat-icon { color: var(--badge-teal); }
.smu-stat-red    { background: var(--pastel-red);    border-color: transparent; }
.smu-stat-red    .smu-stat-icon { color: var(--badge-red); }

/* ── Tables ──────────────────────────────────────────────────────── */
.smu-table-wrap { overflow-x: auto; }
.smu-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.smu-table th {
  background: #f8faff; padding: 12px 16px; text-align: right;
  font-weight: 600; color: var(--smu-text-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 2px solid var(--smu-border);
}
.smu-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--smu-border);
  vertical-align: middle;
}
.smu-table tbody tr:hover { background: #f8faff; }
.smu-table tbody tr:last-child td { border-bottom: none; }

/* ── Badges ──────────────────────────────────────────────────────── */
.smu-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.smu-badge-blue   { color: var(--badge-blue);   background: var(--badge-blue-bg); }
.smu-badge-green  { color: var(--badge-green);  background: var(--badge-green-bg); }
.smu-badge-red    { color: var(--badge-red);    background: var(--badge-red-bg); }
.smu-badge-purple { color: var(--badge-purple); background: var(--badge-purple-bg); }
.smu-badge-orange { color: var(--badge-orange); background: var(--badge-orange-bg); }
.smu-badge-teal   { color: var(--badge-teal);   background: var(--badge-teal-bg); }
.smu-badge-grey   { color: var(--badge-grey);   background: var(--badge-grey-bg); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.smu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--smu-radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 2px solid transparent; transition: all .2s; text-decoration: none;
  white-space: nowrap;
}
.smu-btn-primary  { background: var(--smu-primary); color: #fff; }
.smu-btn-primary:hover { background: var(--smu-primary-dark); color: #fff; }
.smu-btn-secondary { background: #f1f5f9; color: var(--smu-text); border-color: var(--smu-border); }
.smu-btn-secondary:hover { background: var(--smu-border); color: var(--smu-text); }
.smu-btn-outline  { background: transparent; color: var(--smu-primary); border-color: var(--smu-primary); }
.smu-btn-outline:hover { background: var(--smu-primary-light); color: var(--smu-primary); }
.smu-btn-danger   { background: var(--smu-danger-bg); color: var(--smu-danger); border-color: var(--smu-danger); }
.smu-btn-danger:hover { background: var(--smu-danger); color: #fff; }
.smu-btn-sm  { padding: 6px 14px; font-size: 13px; }
.smu-btn-xs  { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.smu-btn-lg  { padding: 12px 28px; font-size: 15px; }

/* ── Toolbar ─────────────────────────────────────────────────────── */
.smu-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.smu-search-form { display: flex; align-items: center; gap: 8px; }
.smu-input-group {
  position: relative; display: flex; align-items: center;
}
.smu-input-group i {
  position: absolute; right: 12px; color: var(--smu-text-muted); font-size: 14px;
}
.smu-input-group input {
  padding: 9px 36px 9px 14px; border: 1.5px solid var(--smu-border);
  border-radius: var(--smu-radius-sm); background: var(--smu-surface);
  color: var(--smu-text); min-width: 240px; transition: border-color .2s;
}
.smu-input-group input:focus { outline: none; border-color: var(--smu-primary); }

/* ── Forms ───────────────────────────────────────────────────────── */
.smu-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.smu-field label { font-size: 13px; font-weight: 600; color: var(--smu-text-muted); }
.smu-field input,
.smu-field select,
.smu-field textarea {
  padding: 10px 14px; border: 1.5px solid var(--smu-border);
  border-radius: var(--smu-radius-sm); background: var(--smu-surface);
  color: var(--smu-text); transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.smu-field input:focus,
.smu-field select:focus,
.smu-field textarea:focus {
  outline: none; border-color: var(--smu-primary);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.smu-field .req { color: var(--smu-danger); }
.smu-hint { font-size: 12px; color: var(--smu-text-muted); margin-top: 4px; }

.smu-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .smu-form-row { grid-template-columns: 1fr; } }

.smu-checkbox-field label { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }

.smu-checklist {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 160px; overflow-y: auto;
    border: 1.5px solid var(--smu-border); border-radius: 8px; padding: 8px 10px;
}
.smu-checklist-item { flex-direction: row !important; align-items: center; gap: 8px; cursor: pointer; font-weight: 400 !important; font-size: 13px; }
.smu-checklist-item input { margin: 0; }

/* ── Class / Session resources panel ─────────────────────────────────────── */
.smu-resources-panel {
    background: var(--smu-bg, #f8fafc); border: 1px solid var(--smu-border);
    border-radius: 10px; padding: 14px; margin-top: 10px;
}
.smu-resources-panel h4 { margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.smu-file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: #fff; border: 1px solid var(--smu-border);
    border-radius: 8px; margin-bottom: 6px; font-size: 13px;
}
.smu-file-item i.smu-file-icon { color: var(--badge-orange); font-size: 16px; }
.smu-file-item .smu-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smu-resources-toggle { cursor: pointer; }
.smu-checkbox-group { display: flex; gap: 20px; flex-wrap: wrap; }
.smu-checkbox-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }

/* ── Modals ──────────────────────────────────────────────────────── */
.smu-modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 99999; display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(4px);
}
.smu-modal-box {
  background: var(--smu-surface); border-radius: var(--smu-radius);
  box-shadow: var(--smu-shadow-md); width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto; animation: smuSlideUp .25s ease;
}
.smu-modal-lg { max-width: 720px; }
.smu-modal-header {
  display: flex; align-items: center; gap: 10px; padding: 20px 24px 0;
  font-size: 16px; font-weight: 700; color: var(--smu-text);
  border-bottom: 1px solid var(--smu-border); padding-bottom: 16px; margin-bottom: 4px;
}
.smu-modal-close {
  margin-right: auto; background: none; border: none; font-size: 22px;
  cursor: pointer; color: var(--smu-text-muted); line-height: 1; padding: 0 4px;
}
.smu-modal-close:hover { color: var(--smu-danger); }
.smu-modal-body  { padding: 20px 24px; }
.smu-modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--smu-border);
  display: flex; gap: 10px; justify-content: flex-start;
}

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

/* ── Notices ─────────────────────────────────────────────────────── */
.smu-notice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--smu-radius-sm); margin-bottom: 16px;
  font-size: 14px; font-weight: 500;
}
.smu-notice-success { background: var(--smu-success-bg); color: var(--smu-success); border-right: 3px solid var(--smu-success); }
.smu-notice-error   { background: var(--smu-danger-bg);  color: var(--smu-danger);  border-right: 3px solid var(--smu-danger); }
.smu-notice-warning { background: var(--smu-warning-bg); color: var(--smu-warning); border-right: 3px solid var(--smu-warning); }
.smu-notice-info    { background: var(--smu-info-bg);    color: var(--smu-primary); border-right: 3px solid var(--smu-primary); }

/* ── Empty State ─────────────────────────────────────────────────── */
.smu-empty {
  text-align: center; padding: 48px 24px; color: var(--smu-text-muted);
}
.smu-empty i { font-size: 48px; opacity: .3; display: block; margin-bottom: 12px; }
.smu-empty p { font-size: 15px; margin: 0; }

/* ── User Cell ───────────────────────────────────────────────────── */
.smu-user-cell { display: flex; align-items: center; gap: 10px; }
.smu-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--smu-primary), var(--smu-secondary));
  color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Actions ─────────────────────────────────────────────────────── */
.smu-actions { display: flex; align-items: center; gap: 6px; }

/* ── Pagination ──────────────────────────────────────────────────── */
.smu-pagination {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 20px; justify-content: center; flex-wrap: wrap;
}
.smu-page-btn {
  width: 34px; height: 34px; border-radius: var(--smu-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--smu-border); color: var(--smu-text);
  transition: all .15s;
}
.smu-page-btn:hover, .smu-page-btn.active {
  background: var(--smu-primary); color: #fff; border-color: var(--smu-primary);
}

/* ── Two-col layout ──────────────────────────────────────────────── */
.smu-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
}
@media (max-width: 900px) { .smu-two-col { grid-template-columns: 1fr; } }

/* ── Courses Grid ────────────────────────────────────────────────── */
.smu-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; margin-bottom: 20px;
}
.smu-course-card {
  background: var(--smu-surface); border-radius: var(--smu-radius);
  box-shadow: var(--smu-shadow); display: flex; flex-direction: column;
  overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.smu-course-card:hover { transform: translateY(-4px); box-shadow: var(--smu-shadow-md); }
.smu-course-card-header {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  padding: 20px; display: flex; align-items: center; justify-content: space-between;
}
.smu-course-icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--smu-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.smu-course-card-body { padding: 16px; flex: 1; }
.smu-course-card-body h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--smu-text); }
.smu-course-card-body p  { font-size: 13px; color: var(--smu-text-muted); margin: 0 0 12px; line-height: 1.6; }
.smu-course-meta { display: flex; gap: 14px; font-size: 12px; color: var(--smu-text-muted); }
.smu-course-meta i { color: var(--smu-primary); margin-left: 3px; }
.smu-course-card-footer {
  padding: 12px 16px; border-top: 1px solid var(--smu-border);
  display: flex; align-items: center; justify-content: space-between;
}
.smu-price { font-size: 18px; font-weight: 700; color: var(--smu-primary); }
.smu-price small { font-size: 12px; font-weight: 400; color: var(--smu-text-muted); }

/* ── Chart Bars ──────────────────────────────────────────────────── */
.smu-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.smu-bar-label { width: 130px; font-size: 13px; color: var(--smu-text-muted); text-align: right; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smu-bar-track { flex: 1; height: 10px; background: var(--smu-border); border-radius: 99px; overflow: hidden; }
.smu-bar-fill { height: 100%; background: linear-gradient(90deg, var(--smu-primary), var(--smu-secondary)); border-radius: 99px; transition: width .5s ease; }
.smu-bar-fill.smu-bar-teal { background: linear-gradient(90deg, #0d9488, #06b6d4); }
.smu-bar-count { width: 32px; font-size: 13px; font-weight: 600; color: var(--smu-text); text-align: left; flex-shrink: 0; }

/* ── Status Row ──────────────────────────────────────────────────── */
.smu-status-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--smu-border); font-size: 14px;
}
.smu-status-row:last-child { border-bottom: none; }

/* ── Notification Channels ───────────────────────────────────────── */
.smu-notice-channels { display: flex; gap: 8px; margin-top: 12px; }

/* ── My Courses (Frontend) ───────────────────────────────────────── */
.smu-my-courses { display: flex; flex-direction: column; gap: 12px; }
.smu-my-course-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1.5px solid var(--smu-border);
  border-radius: var(--smu-radius-sm);
}
.smu-my-course-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--smu-primary-light); color: var(--smu-primary);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.smu-my-course-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.smu-my-course-info strong { font-size: 15px; }
.smu-my-course-info small  { font-size: 12px; color: var(--smu-text-muted); }

/* ── WordPress admin overrides ───────────────────────────────────── */
#wpcontent { background: var(--smu-bg); }
.smu-wrap h1, .smu-wrap h2, .smu-wrap h3 { color: var(--smu-text); }

/* Admin menu highlight */
#adminmenu li.toplevel_page_smu_dashboard .wp-menu-image:before { color: #93c5fd !important; }
#adminmenu li.toplevel_page_smu_dashboard.current .wp-menu-image:before,
#adminmenu li.toplevel_page_smu_dashboard:hover .wp-menu-image:before { color: #fff !important; }

/* ══════════════════════════════════════════════════════
   New features: Content, Attendance, Exams, Homework,
   Promotions, Parent Portal — v2.1 additions
   ══════════════════════════════════════════════════════ */

/* ── Sub-tabs ────────────────────────────────────────── */
.smu-subtabs {
  display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap;
}
.smu-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--smu-radius-sm);
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--smu-text-muted); background: var(--smu-surface);
  border: 1.5px solid var(--smu-border); transition: all .15s;
}
.smu-subtab:hover  { color: var(--smu-primary); border-color: var(--smu-primary); }
.smu-subtab.active { background: var(--smu-primary); color: #fff; border-color: var(--smu-primary); }

/* ── Content items ───────────────────────────────────── */
.smu-content-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--smu-radius-sm);
  border: 1.5px solid var(--smu-border); margin-bottom: 8px;
  background: var(--smu-surface); transition: box-shadow .15s;
}
.smu-content-item:hover { box-shadow: var(--smu-shadow); }
.smu-content-drag { color: var(--smu-border); cursor: grab; font-size: 14px; }
.smu-content-icon { width: 32px; text-align: center; font-size: 18px; flex-shrink: 0; }
.smu-content-info { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.smu-content-info strong { font-size: 14px; }
.smu-content-link { color: var(--smu-text-muted); font-size: 12px; margin-right: 4px; }
.smu-content-link:hover { color: var(--smu-primary); }

/* ── Attendance ──────────────────────────────────────── */
.smu-att-stats {
  display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.smu-att-stat {
  flex: 1; min-width: 100px; padding: 14px; border-radius: var(--smu-radius-sm);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 13px; border: 1.5px solid var(--smu-border); background: var(--smu-surface);
}
.smu-att-stat i { font-size: 20px; margin-bottom: 2px; }
.smu-att-stat strong { font-size: 22px; font-weight: 700; }
.smu-att-present { border-color: #6ee7b7; background: #ecfdf5; }
.smu-att-present i { color: #059669; }
.smu-att-absent  { border-color: #fca5a5; background: #fef2f2; }
.smu-att-absent  i { color: #dc2626; }
.smu-att-late    { border-color: #fcd34d; background: #fffbeb; }
.smu-att-late    i { color: #d97706; }
.smu-att-excused { border-color: #93c5fd; background: #eff6ff; }
.smu-att-excused i { color: #2f6fed; }

.smu-att-radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.smu-att-radio {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--smu-border); transition: all .15s;
}
.smu-att-radio input[type=radio] { display: none; }
.smu-att-radio:has(input:checked) { color: #fff; border-color: transparent; }
.smu-att-radio-green:has(input:checked) { background: #059669; }
.smu-att-radio-red:has(input:checked)   { background: #dc2626; }
.smu-att-radio-orange:has(input:checked){ background: #d97706; }
.smu-att-radio-blue:has(input:checked)  { background: #2f6fed; }

/* Classes list sidebar */
.smu-class-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--smu-border); transition: background .1s;
}
.smu-class-row:hover, .smu-class-row.active { background: var(--smu-primary-light); }
.smu-class-row.active { border-right: 3px solid var(--smu-primary); }
.smu-class-row-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.smu-class-row-info strong { font-size: 14px; }
.smu-class-row-info small  { font-size: 12px; color: var(--smu-text-muted); }

/* ── Exam questions ──────────────────────────────────── */
.smu-question-card {
  border: 1.5px solid var(--smu-border); border-radius: var(--smu-radius-sm);
  margin-bottom: 12px; overflow: hidden;
}
.smu-question-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: #fafbff; flex-wrap: wrap;
}
.smu-question-body { padding: 12px 14px; }
.smu-question-body p { margin: 0 0 8px; font-weight: 600; }
.smu-question-body ul { margin: 0; padding-right: 20px; font-size: 14px; }
.smu-question-body li { margin-bottom: 4px; }

/* ── Mini stats (results summary) ───────────────────── */
.smu-mini-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px; border-radius: var(--smu-radius-sm);
  background: #f8faff; min-width: 90px;
}
.smu-mini-stat strong { font-size: 24px; font-weight: 700; }
.smu-mini-stat span   { font-size: 12px; color: var(--smu-text-muted); }
.smu-mini-green  { background: #ecfdf5; }
.smu-mini-green  strong { color: #059669; }
.smu-mini-red    { background: #fef2f2; }
.smu-mini-red    strong { color: #dc2626; }
.smu-mini-blue   { background: #eff6ff; }
.smu-mini-blue   strong { color: #2f6fed; }

/* ══════════════════════════════════════════════════════
   Parent Portal (frontend shortcode)
   ══════════════════════════════════════════════════════ */
.smu-parent-portal {
  font-family: 'Tajawal', 'Segoe UI', sans-serif;
  max-width: 820px; margin: 0 auto; color: #1e293b;
}
.smu-portal-header {
  display: flex; align-items: center; gap: 16px;
  padding: 24px; background: linear-gradient(135deg,#2f6fed,#4f46e5);
  border-radius: 14px; color: #fff; margin-bottom: 20px;
}
.smu-portal-header h2 { margin: 0; font-size: 22px; }
.smu-portal-header p  { margin: 6px 0 0; }
.smu-portal-avatar {
  width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; flex-shrink: 0;
}
.smu-portal-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px;
}
@media (max-width:600px) { .smu-portal-stats { grid-template-columns: repeat(2,1fr); } }
.smu-portal-stat {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: 13px; color: #64748b;
}
.smu-portal-stat strong { font-size: 26px; font-weight: 700; color: #1e293b; }
.smu-portal-stat i { font-size: 22px; }

.smu-portal-section {
  background: #fff; border-radius: 12px; border: 1.5px solid #e2e8f0;
  overflow: hidden; margin-bottom: 20px;
}
.smu-portal-section h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 14px 18px; font-size: 16px;
  border-bottom: 1px solid #e2e8f0; background: #fafbff; color: #1e293b;
}
.smu-portal-section h3 i { color: #2f6fed; }
.smu-portal-table-wrap { overflow-x: auto; }
.smu-portal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.smu-portal-table th {
  background: #f8faff; padding: 10px 14px; text-align: right;
  font-weight: 600; font-size: 12px; color: #64748b;
  border-bottom: 2px solid #e2e8f0;
}
.smu-portal-table td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; }
.smu-portal-table tr:last-child td { border-bottom: none; }
.smu-portal-courses { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.smu-portal-course {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #f8faff; border-radius: 8px; font-size: 14px;
}
.smu-portal-course i { color: #2f6fed; }

.smu-grade-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 20px; font-size: 12px; font-weight: 700;
}
.smu-grade-green  { background: #ecfdf5; color: #059669; }
.smu-grade-teal   { background: #f0fdfa; color: #0d9488; }
.smu-grade-blue   { background: #eff6ff; color: #2f6fed; }
.smu-grade-orange { background: #fffbeb; color: #d97706; }
.smu-grade-red    { background: #fef2f2; color: #dc2626; }
.smu-grade-grey   { background: #f1f5f9; color: #64748b; }

/* ══════════════════════════════════════════════════════
   i18n / Bilingual Support — LTR (English) overrides
   ══════════════════════════════════════════════════════ */

/* When English (LTR) is active, flip directional properties */
.smu-lang-en .smu-table th               { text-align: left; }
.smu-lang-en .smu-card-header            { flex-direction: row; }
.smu-lang-en .smu-input-group i          { right: auto; left: 12px; }
.smu-lang-en .smu-input-group input      { padding: 9px 14px 9px 36px; }
.smu-lang-en .smu-notice                 { border-right: none; border-left: 3px solid; }
.smu-lang-en .smu-notice-success         { border-left-color: var(--smu-success); }
.smu-lang-en .smu-notice-error           { border-left-color: var(--smu-danger); }
.smu-lang-en .smu-notice-warning         { border-left-color: var(--smu-warning); }
.smu-lang-en .smu-notice-info            { border-left-color: var(--smu-primary); }
.smu-lang-en .smu-stat-card              { border-right: none; border-left: 4px solid transparent; }
.smu-lang-en .smu-stat-blue              { border-left-color: var(--smu-primary); }
.smu-lang-en .smu-stat-green             { border-left-color: var(--smu-success); }
.smu-lang-en .smu-stat-purple            { border-left-color: var(--badge-purple); }
.smu-lang-en .smu-stat-orange            { border-left-color: var(--badge-orange); }
.smu-lang-en .smu-stat-teal              { border-left-color: var(--badge-teal); }
.smu-lang-en .smu-stat-red               { border-left-color: var(--badge-red); }
.smu-lang-en .smu-class-row.active       { border-right: none; border-left: 3px solid var(--smu-primary); }
.smu-lang-en .smu-bar-label              { text-align: left; }
.smu-lang-en .smu-header                 { flex-direction: row; }
.smu-lang-en .steps::before             { right: auto; left: 22px; }
.smu-lang-en .step                       { flex-direction: row; }

/* Language switcher widget */
.smu-lang-switcher {
    display: flex; gap: 12px; margin-top: 8px;
}
.smu-lang-option {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 16px 12px; border: 2px solid var(--smu-border); border-radius: 12px;
    cursor: pointer; text-align: center; transition: all .2s; background: var(--smu-surface);
    position: relative;
}
.smu-lang-option input[type=radio] { display: none; }
.smu-lang-option:hover              { border-color: var(--smu-primary); background: var(--smu-primary-light); }
.smu-lang-active,
.smu-lang-option:has(input:checked) {
    border-color: var(--smu-primary) !important;
    background: var(--smu-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}
.smu-lang-active::after,
.smu-lang-option:has(input:checked)::after {
    content: '✓';
    position: absolute; top: 8px; left: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--smu-primary); color: #fff;
    font-size: 11px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.smu-lang-flag  { font-size: 30px; line-height: 1; }
.smu-lang-label { font-size: 15px; font-weight: 700; color: var(--smu-text); }
.smu-lang-note  { font-size: 11px; color: var(--smu-text-muted); }

/* ══════════════════════════════════════════════════════
   Feature Control Panel
   ══════════════════════════════════════════════════════ */
.smu-feature-panel {
    background: #fff;
    border: 1.5px solid var(--smu-border);
    border-radius: 14px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.smu-feature-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: linear-gradient(135deg, #2f6fed 0%, #1e40af 100%);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    user-select: none;
    gap: 10px;
    transition: opacity .15s;
}
.smu-feature-panel-header:hover { opacity: .93; }
.smu-feature-panel-header i { font-size: 16px; }
.smu-feature-panel-toggle { font-size: 13px; opacity: .8; }

.smu-feature-panel-body {
    padding: 20px 22px;
}

.smu-feature-panel-hint {
    font-size: 13px;
    color: var(--smu-text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}

.smu-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.smu-feature-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--smu-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    user-select: none;
    background: var(--smu-surface);
}
.smu-feature-card:hover { border-color: var(--smu-primary); background: var(--smu-primary-light); }

.smu-feature-on  { border-color: #22c55e !important; background: #f0fdf4 !important; }
.smu-feature-off { opacity: .65; }

.smu-feature-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: var(--smu-primary-light);
    color: var(--smu-primary);
    flex-shrink: 0;
    transition: background .2s;
}
.smu-feature-on .smu-feature-card-icon { background: #dcfce7; color: #16a34a; }

.smu-feature-card-body { flex: 1; min-width: 0; }
.smu-feature-card-label { font-size: 13px; font-weight: 700; color: var(--smu-text); }
.smu-feature-card-desc  { font-size: 11px; color: var(--smu-text-muted); margin-top: 2px; line-height: 1.4; }

/* Toggle switch */
.smu-toggle {
    position: relative;
    display: inline-flex;
    width: 40px; height: 22px;
    border-radius: 11px;
    background: #d1d5db;
    transition: background .2s;
    flex-shrink: 0;
}
.smu-toggle-on { background: #22c55e; }
.smu-toggle-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.smu-toggle-on .smu-toggle-knob { transform: translateX(18px); }

.smu-feature-panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--smu-border);
    flex-wrap: wrap;
}

.smu-feature-save-msg {
    font-size: 13px;
    color: #16a34a;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════
   Student & Parent Portals (frontend) — Sidebar App Shell
   ══════════════════════════════════════════════════════ */
.smu-app { display:flex; min-height:100vh; background:var(--smu-bg,#eef1f9); font-family:inherit; margin:-20px -20px 0; }
.smu-app-sidebar {
  width:250px; flex-shrink:0; background:#fff; padding:28px 18px;
  display:flex; flex-direction:column; box-shadow: 2px 0 12px rgba(16,25,46,.04);
  position:sticky; top:0; height:100vh;
}
.smu-app-logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--smu-text,#10192e); margin-bottom:36px; padding:0 10px; }
.smu-app-logo i { color: var(--smu-primary,#2f6fed); font-size:22px; }
.smu-app-nav { display:flex; flex-direction:column; gap:3px; flex:1; }
.smu-app-nav a {
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  font-weight:600; font-size:14px; color:var(--smu-text-muted,#5b6478); transition:.15s ease;
}
.smu-app-nav a i { width:18px; text-align:center; }
.smu-app-nav a:hover { background:var(--pastel-blue,#eaf1ff); color:var(--smu-primary,#2f6fed); }
.smu-app-nav a.smu-app-nav-active { background:var(--pastel-blue,#eaf1ff); color:var(--smu-primary,#2f6fed); }
.smu-app-sidebar-footer { margin-top:auto; padding-top:16px; border-top:1px solid var(--smu-border,#e3e8f3); }
.smu-app-sidebar-footer a { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; font-weight:600; font-size:14px; color:var(--smu-text-muted,#5b6478); }
.smu-app-sidebar-footer a:hover { background:var(--pastel-red,#fdeeee); color:#dc2626; }

.smu-app-main { flex:1; padding:28px 36px 48px; min-width:0; }
.smu-app-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.smu-app-title h1 { font-size:26px; font-weight:800; color:var(--smu-text,#10192e); margin:0; }
.smu-app-title p { margin:4px 0 0; font-size:13px; color:var(--smu-text-muted,#5b6478); }
.smu-app-topbar-actions { display:flex; align-items:center; gap:10px; }
.smu-icon-btn {
  width:40px; height:40px; border-radius:50%; background:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--smu-shadow,0 1px 3px rgba(16,25,46,.04),0 8px 24px rgba(16,25,46,.06));
  color:var(--smu-text-muted,#5b6478); font-size:15px;
}
.smu-user-chip {
  display:flex; align-items:center; gap:10px; background:#fff; padding:6px 16px 6px 6px;
  border-radius:999px; box-shadow:var(--smu-shadow,0 1px 3px rgba(16,25,46,.04),0 8px 24px rgba(16,25,46,.06));
}
.smu-user-chip-avatar {
  width:32px; height:32px; border-radius:50%; background:var(--smu-primary,#2f6fed); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.smu-user-chip-name { font-size:13px; font-weight:700; color:var(--smu-text,#10192e); line-height:1.2; }
.smu-user-chip-role { font-size:11px; color:var(--smu-text-muted,#5b6478); }

.smu-portal-section { background:#fff; border-radius:var(--smu-radius,18px); box-shadow:var(--smu-shadow,0 1px 3px rgba(16,25,46,.04),0 8px 24px rgba(16,25,46,.06)); padding:0; margin-bottom:20px; overflow:hidden; border:none; }
.smu-portal-section-title { margin:0; padding:18px 22px; font-size:16px; font-weight:700; color:var(--smu-text,#10192e); display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--smu-border,#e3e8f3); }
.smu-portal-section-title i { color: var(--smu-primary,#2f6fed); }
.smu-portal-courses { display:flex; flex-direction:column; gap:8px; padding:18px 22px; }
.smu-portal-course { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--pastel-blue,#eaf1ff); border-radius:12px; font-size:14px; }
.smu-portal-course i { color:var(--smu-primary,#2f6fed); }
.smu-portal-login { text-align:center; padding:60px 20px; }
.smu-portal-footer { padding:8px 0 0; }
.smu-child-card { background:#fff; border:none; border-radius:var(--smu-radius,18px); box-shadow:var(--smu-shadow,0 1px 3px rgba(16,25,46,.04),0 8px 24px rgba(16,25,46,.06)); padding:22px; margin-bottom:18px; }
.smu-child-header { display:flex; align-items:center; gap:14px; margin-bottom:4px; flex-wrap:wrap; }
.smu-child-name { font-size:17px; font-weight:700; color:var(--smu-text,#10192e); }
.smu-table-wrap { overflow-x:auto; padding:0 22px 18px; }
.smu-portal-table { width:100%; border-collapse:collapse; font-size:14px; }
.smu-portal-table th { background:transparent; padding:10px 12px; text-align:right; font-weight:600; font-size:12px; color:var(--smu-text-muted,#5b6478); border-bottom:2px solid var(--smu-border,#e3e8f3); }
.smu-portal-table td { padding:12px; border-bottom:1px solid var(--smu-border,#e3e8f3); }
.smu-portal-table tr:last-child td { border-bottom:none; }

@media (max-width: 900px) {
  .smu-app-sidebar { display:none; }
  .smu-app-main { padding:20px; }
}