/* ═══════════════════════════════════════════════════════════════
   Scolara — unified design system
   Single source of truth for the visual language, shared by the
   teacher (admin), student, center and explore surfaces.
   Loaded after style.css (compiled Tailwind utilities).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --th-accent: #6c5ce7;
  --th-accent-strong: #5a4bd8;
  --th-accent-soft: rgba(108, 92, 231, 0.08);
  --th-accent-ring: rgba(108, 92, 231, 0.14);
  /* Surfaces */
  --th-bg: #f6f7fb;
  --th-surface: #ffffff;
  --th-hairline: #e8e9f1;
  --th-hairline-strong: #dcdeee;
  /* Ink */
  --th-ink: #1a1a2e;
  --th-ink-soft: #4b5563;
  --th-ink-faint: #8b8ba3;
  /* Shape */
  --th-radius: 14px;
  --th-radius-sm: 10px;
  /* Elevation */
  --th-shadow-1: 0 1px 2px rgba(23, 25, 60, 0.05), 0 1px 1px rgba(23, 25, 60, 0.03);
  --th-shadow-2: 0 8px 24px -8px rgba(76, 81, 191, 0.14), 0 2px 6px rgba(23, 25, 60, 0.04);
  --th-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.12);
  /* Type */
  --th-font-body: 'Manrope', Inter, system-ui, sans-serif;
  --th-font-head: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  --th-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ─── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { font-family: var(--th-font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--th-font-head); letter-spacing: -0.025em; }
html { overflow-y: scroll; } /* prevent layout shift */
body { background: var(--th-bg); }
::selection { background: rgba(108, 92, 231, 0.18); color: var(--th-ink); }

.th-mono { font-family: var(--th-font-mono); font-variant-numeric: tabular-nums; }

/* Icons (Material Symbols, self-hosted subset) */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
  vertical-align: middle;
}

/* ─── App navigation bar ───────────────────────────────────────── */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 253, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--th-hairline);
  padding: 0 1rem;
}

/* ─── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--th-surface);
  border: 1px solid var(--th-hairline);
  border-radius: var(--th-radius);
  box-shadow: var(--th-shadow-1);
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s;
  position: relative;
}
@media (hover: hover) {
  .card:hover { box-shadow: var(--th-shadow-2); border-color: var(--th-hairline-strong); }
  .card-accent::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--th-accent), #8b5cf6);
    border-radius: var(--th-radius) var(--th-radius) 0 0;
    opacity: 0;
    transition: opacity 0.25s;
  }
  .card-accent:hover::before { opacity: 1; }
}
/* Entrance animation (transform-only: cheap on low-end devices) */
.card { animation: cardIn 0.3s ease-out; }
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 40ms; }
.card:nth-child(3) { animation-delay: 80ms; }
.card:nth-child(4) { animation-delay: 120ms; }
.card:nth-child(5) { animation-delay: 160ms; }
.card:nth-child(n+6) { animation-delay: 200ms; }
@keyframes cardIn { from { transform: translateY(8px); } }

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--th-accent) 0%, #8b5cf6 100%);
  color: #fff;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25); }

/* ─── Forms ────────────────────────────────────────────────────── */
.input {
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 0.6rem 0.875rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
  width: 100%;
  background: var(--th-surface);
}
.input:focus { border-color: var(--th-accent); box-shadow: 0 0 0 3px var(--th-accent-ring); background: #fff; }

.badge { font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 9999px; }
.tab-active { border-bottom: 2px solid var(--th-accent); color: var(--th-accent); font-weight: 600; }

/* Pill segmented tabs with sliding indicator */
.seg-nav { display: inline-flex; position: relative; padding: 4px; background: rgba(0, 0, 0, 0.04); border-radius: 14px; gap: 2px; }
.seg-tab { position: relative; z-index: 1; padding: 8px 20px; border-radius: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--th-ink-faint); background: transparent; transition: color 0.25s; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border: none; }
.seg-tab-active { color: var(--th-ink); }
/* Filled icons in tabs read solid and polished rather than thin outlines. */
.seg-tab .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.seg-indicator { position: absolute; top: 4px; height: calc(100% - 8px); background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; }
@media (hover: hover) { .seg-tab:not(.seg-tab-active):hover { color: var(--th-ink); } }

/* ─── Quill editor overrides ───────────────────────────────────── */
.ql-toolbar.ql-snow { border-radius: 12px 12px 0 0; border-color: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.02); padding: 6px 8px; }
.ql-container.ql-snow { border-radius: 0 0 12px 12px; border-color: rgba(0, 0, 0, 0.08); font-family: var(--th-font-body); font-size: 0.875rem; }
.ql-editor { min-height: 80px; padding: 10px 14px; }
.ql-editor:focus { box-shadow: 0 0 0 3px var(--th-accent-ring); }
.ql-snow .ql-tooltip { z-index: 10001; }
.ql-snow .ql-picker.ql-color .ql-picker-label, .ql-snow .ql-picker.ql-color .ql-picker-item { width: 22px; height: 22px; }
.ql-snow .ql-formats { margin-right: 10px !important; }
.ql-snow .ql-toolbar button.ql-formula::after { content: '𝑓x'; font-family: Georgia, serif; font-size: 13px; font-weight: 700; }
.ql-snow .ql-toolbar button.ql-formula svg { display: none; }
.ql-snow .ql-editor .ql-formula::after { content: none; }

/* Rendered quiz/rich content */
.qc-display p { margin: 0; }
.qc-display .ql-formula { display: inline-block; }
.qc-display .ql-size-small { font-size: 0.75em; }
.qc-display .ql-size-large { font-size: 1.5em; }
.qc-display .ql-size-huge { font-size: 2.5em; }

/* ─── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, 0.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, 0.32); }

/* ─── Page transitions ─────────────────────────────────────────── */
@supports not (view-transition-name: none) {
  main { animation: pageIn 0.2s ease-out; }
  @keyframes pageIn { from { transform: translateY(6px); } }
}
/* Keep nav stable, only crossfade content (names set per layout) */
nav, .student-nav { view-transition-name: app-nav; }
main, .student-main { view-transition-name: app-main; }
::view-transition-old(app-nav), ::view-transition-new(app-nav) { animation: none; mix-blend-mode: normal; }
::view-transition-old(app-main) { animation: vtFadeOut 0.12s ease-out forwards; }
::view-transition-new(app-main) { animation: vtFadeIn 0.15s ease-out 0.05s both; }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; transform: translateY(4px); } }

/* ─── Student layout container ─────────────────────────────────── */
.student-nav { position: sticky; top: 0; z-index: 50; }
.student-main { max-width: 36rem; margin: 0 auto; padding: 1.5rem 1rem; }
@media (min-width: 768px) { .student-main { max-width: 48rem; padding: 2rem 1.5rem; } }
@media (min-width: 1024px) { .student-main { max-width: 56rem; padding: 2.5rem 2rem; } }

/* ─── Print ────────────────────────────────────────────────────── */
@media print {
  .card { box-shadow: none !important; border: 1px solid #d1d5db !important; break-inside: avoid; }
  nav, .btn-primary, [onclick] { display: none !important; }
}

/* ═══ MathLive formula editor modal (shared markup in layouts/shared.html) ═══ */
.ML__keyboard { z-index: 10002 !important; }
.mp-ov { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(15, 23, 42, 0.45); -webkit-tap-highlight-color: transparent; }
.mp-modal { position: fixed; top: 8vh; left: 50%; transform: translateX(-50%); z-index: 9999; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); width: 92%; max-width: 540px; display: none; flex-direction: column; overflow: hidden; }
.mp-modal.open { display: flex; animation: mpIn 0.22s ease; }
@keyframes mpIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 480px) { .mp-modal { top: 3vh; width: 96%; max-width: none; border-radius: 14px; } }
.mp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 6px; }
.mp-hi { flex: 1; min-width: 0; }
.mp-title { font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.mp-sub { font-size: 11px; color: #818cf8; font-weight: 600; margin-top: 2px; }
.mp-x { width: 32px; height: 32px; border-radius: 50%; border: none; background: #f1f5f9; color: #94a3b8; font-size: 14px; cursor: pointer; transition: all 0.12s; flex-shrink: 0; }
.mp-x:hover { background: #e2e8f0; color: #475569; }
.mp-mf { padding: 10px 20px 8px; }
.mp-mf math-field { display: block; width: 100%; min-height: 56px; font-size: 24px; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 14px; background: #f8fafc; --caret-color: #6366f1; --selection-background-color: rgba(99, 102, 241, 0.15); --keyboard-zindex: 10001; --_hue: 239; }
.mp-mf math-field:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); background: #fff; }
.mp-kb-row { padding: 2px 20px 6px; display: flex; align-items: center; gap: 8px; }
.mp-kb-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; color: #64748b; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; touch-action: manipulation; }
.mp-kb-toggle:hover { border-color: #c7d2fe; background: #eef2ff; color: #4f46e5; }
.mp-kb-toggle.active { border-color: #818cf8; background: #eef2ff; color: #4f46e5; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
.mp-kb-toggle svg { width: 16px; height: 16px; }
.mp-kb-hint { font-size: 11px; color: #94a3b8; }
.mp-tabs { padding: 6px 20px 2px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mp-tabs::-webkit-scrollbar { display: none; }
.mp-tab { padding: 4px 12px; border: 1.5px solid transparent; border-radius: 999px; background: transparent; color: #64748b; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.12s; touch-action: manipulation; }
.mp-tab:hover { background: #f1f5f9; color: #475569; }
.mp-tab.active { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.mp-qi { padding: 4px 20px 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.mp-qi[hidden] { display: none; }
.mp-qb { height: 32px; min-width: 32px; padding: 0 7px; border: 1.5px solid #f1f5f9; border-radius: 8px; background: #fafbfc; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all 0.12s; touch-action: manipulation; color: #475569; font-family: KaTeX_Main, Georgia, serif; }
.mp-qb:hover { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.mp-qb:active { transform: scale(0.9); }
.mp-hint { padding: 0 20px 8px; font-size: 11px; color: #94a3b8; line-height: 1.4; }
.mp-hint kbd { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-family: inherit; border: 1px solid #e2e8f0; }
.mp-foot { padding: 10px 20px 16px; display: flex; gap: 8px; border-top: 1px solid #f1f5f9; }
.mp-cancel { flex: 1; padding: 11px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; color: #475569; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.12s; touch-action: manipulation; }
.mp-cancel:hover { background: #f8fafc; }
.mp-ins { flex: 2; padding: 11px; border: none; border-radius: 12px; background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2); transition: all 0.15s; touch-action: manipulation; }
.mp-ins:hover { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3); transform: translateY(-1px); }
.mp-ins:active { transform: scale(0.97); }
.fx-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff; color: #6366f1; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.12s; touch-action: manipulation; font-family: Georgia, serif; }
.fx-btn:hover { background: #eef2ff; border-color: #c7d2fe; }
.mch { display: inline-block; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px; padding: 1px 6px; margin: 0 1px; cursor: default; vertical-align: middle; line-height: 1.4; user-select: all; }
.mch .katex { font-size: 0.9em; }
.me-ed { min-height: 64px; padding: 10px 12px; font-size: 0.875rem; color: #1f2937; outline: none; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.me-ed:empty::before { content: attr(data-ph); color: #9ca3af; pointer-events: none; }

/* ── Student payment ledger ─────────────────────────── */
.pay-grid { border-collapse: collapse; width: 100%; font-size: 13px; }
.pay-grid th { padding: 10px 8px; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #e5e7eb; white-space: nowrap; text-align: center; }
.pay-grid td { border-bottom: 1px solid #f3f4f6; padding: 4px 6px; text-align: center; }
.pay-grid tbody tr:hover td { background: #fafbff; }
.pay-sticky { position: sticky; left: 0; background: #fff; z-index: 2; text-align: left !important; min-width: 160px; max-width: 220px; box-shadow: 2px 0 0 #f3f4f6; }
.pay-grid tbody tr:hover .pay-sticky { background: #fafbff; }
.pay-sname { font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-scount { font-size: 10.5px; color: #9ca3af; }
.pay-cur { background: #eef2ff !important; }
.pay-cell { min-width: 56px; height: 34px; border: 1.5px solid #e5e7eb; border-radius: 8px; background: #fff; color: #d1d5db; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; transition: all 0.12s; touch-action: manipulation; }
.pay-cell:hover { border-color: #a5b4fc; color: #6366f1; }
.pay-cell.pay-paid { background: #d1fae5; border-color: #6ee7b7; color: #047857; }
.pay-cell.pay-paid:hover { border-color: #10b981; }
.pay-cell.pay-exempt { background: #f3f4f6; border-color: #d1d5db; color: #6b7280; }
.pay-amt { font-size: 10.5px; font-weight: 600; }
.pay-total { font-weight: 700; color: #047857; font-size: 12px; padding: 8px 6px !important; border-top: 1px solid #e5e7eb; }
.pay-total-label { font-size: 11px; font-weight: 700; color: #6b7280; border-top: 1px solid #e5e7eb; }
.pay-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid; }
.pay-ov { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, 0.45); }
.pay-modal { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92vw; max-width: 360px; background: #fff; border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,0.25); overflow: hidden; }
.pay-mhead { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid #f3f4f6; }
.pay-mbody { padding: 14px 18px; }
.pay-mfoot { display: flex; gap: 8px; padding: 0 18px 16px; }
.pay-btn { flex: 1; padding: 10px 4px; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.12s; touch-action: manipulation; }
.pay-btn-paid { background: #059669; color: #fff; }
.pay-btn-paid:hover { background: #047857; }
.pay-btn-exempt { background: #f3f4f6; color: #4b5563; }
.pay-btn-exempt:hover { background: #e5e7eb; }
.pay-btn-clear { background: #fef2f2; color: #b91c1c; }
.pay-btn-clear:hover { background: #fee2e2; }
.pay-mlinks { display: flex; justify-content: center; gap: 18px; padding: 0 18px 14px; }
.pay-mlinks a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #059669; text-decoration: none; }
.pay-mlinks a:hover { text-decoration: underline; }

/* ═══ Arabic / RTL layer ════════════════════════════════
   Enabled by dir="rtl" on <html> (lang=ar). Flexbox and text-align
   mirror natively; these rules fix physical-property spots. */
html[dir="rtl"] { --th-font-body: 'Cairo', 'Manrope', system-ui, sans-serif; --th-font-head: 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { letter-spacing: 0; }
/* Numbers, codes, money and Latin identifiers stay LTR inside RTL text */
[dir="rtl"] .th-mono, [dir="rtl"] .pay-amt, [dir="rtl"] .pay-total, [dir="rtl"] input[type="number"] { direction: ltr; }
/* Payment ledger: sticky first column flips to the right edge */
[dir="rtl"] .pay-sticky { left: auto; right: 0; box-shadow: -2px 0 0 #f3f4f6; text-align: right !important; }
[dir="rtl"] .pay-grid th, [dir="rtl"] .pay-grid td { text-align: center; }
/* Segmented tab underline indicator is positioned by JS in px from left;
   in RTL, anchor tabs from the right so labels read naturally */
[dir="rtl"] .seg-nav { direction: rtl; }
/* Toasts sit top-left in RTL instead of top-right */
[dir="rtl"] #toastBox { right: auto; left: 1rem; }
/* Generic: lists/rows with an leading icon keep their gap via flex (auto-mirrors) */

/* Language switcher (ع · FR · EN) */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch a { font-size: 12px; font-weight: 600; color: #9ca3af; text-decoration: none; padding: 2px 6px; border-radius: 6px; line-height: 1.4; transition: all 0.12s; }
.lang-switch a:hover { color: #6c5ce7; background: rgba(108,92,231,0.08); }
.lang-switch a.on { color: #6c5ce7; background: rgba(108,92,231,0.12); }
.lang-switch a[lang="ar"] { font-size: 14px; }

/* Language dropdown */
.lang-dd { position: relative; display: inline-block; }
.lang-dd-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #6b7280; background: transparent; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: all 0.12s; }
.lang-dd-btn:hover { color: #6c5ce7; border-color: rgba(108,92,231,0.35); }
.lang-dd-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 148px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); padding: 5px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all 0.15s; z-index: 200; }
.lang-dd:hover .lang-dd-menu, .lang-dd:focus-within .lang-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dd-menu a { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #374151; text-decoration: none; padding: 8px 10px; border-radius: 7px; transition: background 0.1s; }
.lang-dd-menu a:hover { background: rgba(108,92,231,0.08); }
.lang-dd-menu a.on { color: #6c5ce7; font-weight: 700; background: rgba(108,92,231,0.1); }

/* ── App icon images (icon8 PNG set) used in tabs and nav ───────────── */
.tab-ico { width: 20px; height: 20px; object-fit: contain; display: inline-block; vertical-align: -4px; flex-shrink: 0; }
.nav-ico { width: 18px; height: 18px; object-fit: contain; display: inline-block; vertical-align: -3px; flex-shrink: 0; }