/* AbotalepTech design system: tokens and reusable components (ds-*). Workspace skins such as teacher-workspace.css
   build on these tokens instead of repeating colours, sizes and shadows. Light theme only (the site has no dark mode). */
:root {
  /* Brand: purple first, with friendly supporting colours for a children's coding academy. */
  --ds-primary-50: #f6f2ff;
  --ds-primary-100: #ede5ff;
  --ds-primary-200: #dccdff;
  --ds-primary-300: #c0a6fb;
  --ds-primary-400: #9d78f2;
  --ds-primary-500: #7f56e6;
  --ds-primary-600: #6a40d8;
  --ds-primary-700: #5731bb;
  --ds-primary-800: #452896;
  --ds-primary-900: #2c1a63;
  --ds-sky-50: #eef6ff; --ds-sky-500: #2f80d1; --ds-sky-700: #1c5e9e;
  --ds-mint-50: #eaf8f2; --ds-mint-500: #17a27a; --ds-mint-700: #0c6e52;
  --ds-sun-50: #fff6e0; --ds-sun-500: #e8a317; --ds-sun-700: #8a5a00;
  --ds-pink-50: #fdeef6; --ds-pink-500: #d9468f; --ds-pink-700: #a02a66;
  --ds-red-50: #fff0f2; --ds-red-500: #d93954; --ds-red-700: #a51f37;

  /* Neutrals with a light purple tint. Text colours meet WCAG AA (4.5:1) on --ds-surface and --ds-bg. */
  --ds-ink: #1d1830;
  --ds-text: #3b3552;
  --ds-text-muted: #645d7a;
  --ds-text-subtle: #716a86;
  --ds-border: #e6e1f0;
  --ds-border-strong: #d3cce3;
  --ds-bg: #f7f5fc;
  --ds-surface: #ffffff;
  --ds-surface-muted: #faf8fe;
  --ds-overlay: rgba(29, 24, 48, .48);

  /* Semantic */
  --ds-success: var(--ds-mint-700); --ds-success-bg: var(--ds-mint-50);
  --ds-warning: var(--ds-sun-700); --ds-warning-bg: var(--ds-sun-50);
  --ds-danger: var(--ds-red-700); --ds-danger-bg: var(--ds-red-50);
  --ds-info: var(--ds-sky-700); --ds-info-bg: var(--ds-sky-50);

  /* Type: IBM Plex Sans Arabic for Arabic, Inter for English and code-like values. */
  --ds-font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --ds-font-en: Inter, 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ds-text-xs: .75rem; --ds-text-sm: .8125rem; --ds-text-md: .9375rem; --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem; --ds-text-xl: 1.375rem; --ds-text-2xl: 1.75rem;
  --ds-leading: 1.6;

  /* Space (4px grid), radius, elevation, motion */
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px;
  --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px;
  --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 22px; --ds-radius-full: 999px;
  --ds-shadow-xs: 0 1px 2px rgba(44, 26, 99, .06);
  --ds-shadow-sm: 0 1px 3px rgba(44, 26, 99, .06), 0 4px 14px rgba(44, 26, 99, .05);
  --ds-shadow-md: 0 10px 30px rgba(44, 26, 99, .10);
  --ds-shadow-lg: 0 24px 60px rgba(44, 26, 99, .18);
  --ds-focus: 0 0 0 3px rgba(127, 86, 230, .38);
  --ds-ease: cubic-bezier(.2, .7, .2, 1);
  --ds-duration: .16s;
  --ds-control-h: 42px;
}

/* ---------- Buttons ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-height: var(--ds-control-h); padding: 0 var(--ds-space-4); border: 1px solid transparent; border-radius: var(--ds-radius-md);
  font: inherit; font-size: var(--ds-text-md); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease), transform var(--ds-duration) var(--ds-ease);
}
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ds-btn--primary { background: var(--ds-primary-600); color: #fff; box-shadow: 0 6px 16px rgba(106, 64, 216, .24); }
.ds-btn--primary:hover:not(:disabled) { background: var(--ds-primary-700); }
.ds-btn--secondary { background: var(--ds-surface); border-color: var(--ds-border-strong); color: var(--ds-primary-700); }
.ds-btn--secondary:hover:not(:disabled) { background: var(--ds-primary-50); border-color: var(--ds-primary-300); }
.ds-btn--ghost { background: transparent; color: var(--ds-primary-700); }
.ds-btn--ghost:hover:not(:disabled) { background: var(--ds-primary-50); }
.ds-btn--danger { background: var(--ds-danger-bg); border-color: #f3c3cc; color: var(--ds-danger); }
.ds-btn--sm { min-height: 36px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-sm); border-radius: var(--ds-radius-sm); }
.ds-btn--icon { width: 36px; min-height: 36px; padding: 0; }
.ds-btn .tw-icon, .ds-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ds-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ds-radius-full); background: var(--ds-primary-600); color: #fff; font-size: var(--ds-text-xs); font-weight: 700; }

/* ---------- Badges ---------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs); font-weight: 700; line-height: 1.4; white-space: nowrap;
  background: var(--ds-primary-50); color: var(--ds-primary-700);
}
.ds-badge svg { width: 14px; height: 14px; }
.ds-badge--primary { background: var(--ds-primary-100); color: var(--ds-primary-700); }
.ds-badge--success { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-badge--warning { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-badge--danger { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ds-badge--neutral { background: #f1eff6; color: var(--ds-text-muted); }

/* ---------- Cards ---------- */
.ds-card { min-width: 0; padding: var(--ds-space-5); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-xs); }
.ds-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); margin: 0 0 var(--ds-space-4); padding: 0; border: 0; background: none; height: auto; }
.ds-card-header h2, .ds-card-header h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); font-weight: 700; line-height: 1.4; }
.ds-card-header p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

/* ---------- Stat tiles ---------- */
.ds-stat {
  display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; padding: var(--ds-space-4); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-ink); text-align: start; font: inherit; box-shadow: var(--ds-shadow-xs);
  transition: border-color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease), transform var(--ds-duration) var(--ds-ease);
}
button.ds-stat { cursor: pointer; }
button.ds-stat:hover { border-color: var(--ds-primary-200); box-shadow: var(--ds-shadow-sm); transform: translateY(-1px); }
.ds-stat:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-stat-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--ds-radius-md); background: var(--ds-primary-50); color: var(--ds-primary-600); }
.ds-stat-icon svg { width: 22px; height: 22px; }
.ds-stat-body { display: grid; min-width: 0; flex: 1; }
.ds-stat-body b { font-size: var(--ds-text-2xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-stat-body small { margin-top: 4px; color: var(--ds-text-muted); font-size: var(--ds-text-sm); line-height: 1.4; }
.ds-stat-go { width: 18px; height: 18px; color: var(--ds-text-subtle); flex: 0 0 auto; }
[dir="rtl"] .ds-stat-go, [dir="rtl"] .tw-flip { transform: scaleX(-1); }
.ds-stat--sky .ds-stat-icon { background: var(--ds-sky-50); color: var(--ds-sky-500); }
.ds-stat--mint .ds-stat-icon { background: var(--ds-mint-50); color: var(--ds-mint-500); }
.ds-stat--sun .ds-stat-icon { background: var(--ds-sun-50); color: #c98a06; }
.ds-stat--pink .ds-stat-icon { background: var(--ds-pink-50); color: var(--ds-pink-500); }

/* ---------- Forms ---------- */
.ds-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.ds-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; }
.ds-search > svg { position: absolute; inset-inline-start: 13px; width: 18px; height: 18px; color: var(--ds-text-subtle); pointer-events: none; }
.ds-search input, .ds-select select, .ds-input {
  box-sizing: border-box; width: 100%; min-height: var(--ds-control-h); padding: 0 var(--ds-space-3); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-md);
  transition: border-color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-search input { padding-inline-start: 40px; }
.ds-select { flex: 0 1 220px; min-width: 160px; }
.ds-search input:focus, .ds-select select:focus, .ds-input:focus { outline: none; border-color: var(--ds-primary-400); box-shadow: var(--ds-focus); }

/* ---------- Tables ---------- */
.ds-table-wrap { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-md); }
.ds-table th, .ds-table td { padding: 12px var(--ds-space-4); border-bottom: 1px solid var(--ds-border); text-align: start; vertical-align: middle; }
.ds-table thead th { position: sticky; top: 0; background: var(--ds-surface-muted); color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ds-table tbody th { font-weight: 600; color: var(--ds-ink); }
.ds-table tbody tr:last-child > * { border-bottom: 0; }
.ds-table tbody tr:hover { background: var(--ds-surface-muted); }

/* ---------- Empty, loading, alerts ---------- */
.ds-empty { display: grid; justify-items: center; gap: var(--ds-space-2); padding: var(--ds-space-10) var(--ds-space-5); text-align: center; color: var(--ds-text-muted); }
.ds-empty--compact { padding: var(--ds-space-6) var(--ds-space-4); }
.ds-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ds-primary-50); color: var(--ds-primary-500); }
.ds-empty-icon svg { width: 26px; height: 26px; }
.ds-empty b { color: var(--ds-ink); font-size: var(--ds-text-base); }
.ds-empty p { max-width: 380px; margin: 0; font-size: var(--ds-text-sm); line-height: var(--ds-leading); }
.ds-skeleton { display: block; height: 12px; margin: 10px 0; border-radius: var(--ds-radius-full); background: linear-gradient(90deg, #eeeaf6 0%, #f8f6fc 40%, #eeeaf6 80%); background-size: 300% 100%; animation: ds-shimmer 1.4s ease-in-out infinite; }
.ds-skeleton-card { padding: var(--ds-space-5); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.ds-skeleton-card .ds-skeleton:first-child { height: 16px; }
@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.ds-alert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid; border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); line-height: var(--ds-leading); }
.ds-alert--danger { border-color: #f3c3cc; background: var(--ds-danger-bg); color: var(--ds-danger); }
.ds-alert--success { border-color: #bfe6d6; background: var(--ds-success-bg); color: var(--ds-success); }
.ds-alert--info { border-color: #cbe0f6; background: var(--ds-info-bg); color: var(--ds-info); }

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-stat, .ds-search input, .ds-select select { transition: none; }
  .ds-skeleton { animation: none; }
  button.ds-stat:hover { transform: none; }
}