/* =====================================================================
   KonkoorCoach v9 — Modern UI/UX layer
   Persona-aware theming (مشاور ۲۰-۵۰ / دانش‌آموز ۱۵-۱۷ / اولیا ۳۰-۷۰)
   + scroll & micro-interaction motion + performance hardening
   Purely additive: no existing selector is removed, only extended.
   ===================================================================== */

:root{
  --kc-dur-reveal:520ms;
  --kc-ease-out:cubic-bezier(.16,1,.3,1);
  --kc-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --kc-stagger:38ms;
}

/* ---------- Reduced motion: hard kill-switch, always wins ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .kc-reveal{opacity:1 !important;transform:none !important}
}

html{scroll-behavior:smooth}

/* ---------- Perf: don't paint/layout offscreen chrome ----------
   Scoped to the sidebar student list ONLY. Charts and tables measure
   their own container size via JS (getBoundingClientRect) right after
   render — content-visibility:auto would report a 0/placeholder size
   for anything below the fold and break that measurement, plus cause
   a jarring placeholder->real-size layout jump on every re-render.
   The student list is append-only and rarely re-measured, so it's safe. */
.sidebar #studentList{
  content-visibility:auto;
  contain-intrinsic-size:1px 600px;
}

/* ---------- Custom scrollbar (kept subtle, still native for a11y) ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--primary-500)}

/* =====================================================================
   Scroll-reveal system (driven by kc-v9-ui-js MutationObserver)
   ===================================================================== */
.kc-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--kc-dur-reveal) var(--kc-ease-out),
             transform var(--kc-dur-reveal) var(--kc-ease-out);
  transition-delay:var(--kc-delay,0ms);
  will-change:opacity,transform;
}
.kc-reveal.kc-in{opacity:1;transform:translateY(0);will-change:auto}

/* ---------- Sticky header: glass blur once page scrolls ---------- */
header{transition:box-shadow var(--dur-base) var(--kc-ease-out),backdrop-filter var(--dur-base)}
header.kc-scrolled{
  backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 10px 28px rgba(10,30,60,.22);
}

/* ---------- Buttons: lift + ripple host + confident press ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform 160ms var(--kc-ease-spring),
             box-shadow 200ms var(--kc-ease-out),
             filter 160ms var(--kc-ease-out),background 160ms var(--kc-ease-out);
}
.btn:hover{transform:translateY(-1.5px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px) scale(.98)}
.kc-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%);
  transform:scale(0);animation:kc-ripple-anim 600ms var(--kc-ease-out);z-index:0;
}
@keyframes kc-ripple-anim{to{transform:scale(1);opacity:0}}

/* ---------- Cards: lift-on-hover, gentle border glow ---------- */
.card,.ui-section-card,.chart-panel,.finding{
  transition:transform 220ms var(--kc-ease-out),
             box-shadow 220ms var(--kc-ease-out),
             border-color 220ms var(--kc-ease-out);
}
.card:hover,.ui-section-card:hover,.chart-panel:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--primary-200);
}

/* ---------- Tabs: sliding underline indicator ---------- */
.tabs,.angle5-toc{position:relative}
.kc-tab-indicator{
  position:absolute;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary-500),var(--gold));
  transition:transform 280ms var(--kc-ease-spring),width 280ms var(--kc-ease-spring);
  pointer-events:none;opacity:0;
}
.kc-tab-indicator.kc-show{opacity:1}
.tab{transition:color 160ms,background 160ms,transform 160ms var(--kc-ease-spring)}

/* ---------- Score pills / stat numbers: pop-in + count-up target ---------- */
.score-pill,.stat-box,.parent-stat{transition:transform 180ms var(--kc-ease-spring)}
.score-pill:hover,.stat-box:hover{transform:translateY(-2px) scale(1.02)}
.num,.sc-val{font-variant-numeric:tabular-nums}

/* ---------- Progress / capacity bars, if present, animate fill ---------- */
.kc-bar-fill{transition:width 700ms var(--kc-ease-out)}

/* ---------- Skeleton loading shimmer (opt-in via .kc-skeleton) ---------- */
.kc-skeleton{
  position:relative;overflow:hidden;background:var(--surface-2);
  border-radius:var(--radius-sm);color:transparent !important;
}
.kc-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:kc-shimmer 1.3s infinite;
}
@keyframes kc-shimmer{100%{transform:translateX(100%)}}

/* ---------- Chart points: subtle entrance pop ---------- */
.kc-chart-point{transition:transform 160ms var(--kc-ease-spring),filter 160ms}
.kc-chart-point:hover{transform:scale(1.35);filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}

/* ---------- Empty states: soft breathing icon ---------- */
.empty-state{animation:kc-fade-in 420ms var(--kc-ease-out)}
@keyframes kc-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* =====================================================================
   PERSONA THEMING
   ===================================================================== */

/* ---------------------------------------------------------------------
   مشاور (Consultant) — 20 to 50, monitoring/analyzing many students.
   Denser, faster, cooler, data-forward. Snappy motion, tighter radii.
   --------------------------------------------------------------------- */
body.role-consultant{
  --kc-dur-reveal:340ms;
  --radius-md:10px;--radius-lg:13px;
}
body.role-consultant .main{max-width:1360px}
body.role-consultant .card,body.role-consultant .ui-section-card{padding:16px}
body.role-consultant .student-item{
  transition:transform 140ms var(--kc-ease-spring),box-shadow 140ms;
}
body.role-consultant .student-item:hover{transform:translateX(-2px);box-shadow:var(--shadow-sm)}
/* live-monitoring pulse for the active student card */
body.role-consultant .student-item.active::before{
  content:"";position:absolute;inset-inline-start:6px;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:#5be27a;
  box-shadow:0 0 0 0 rgba(91,226,122,.6);animation:kc-pulse-dot 1.8s infinite;
}
body.role-consultant .student-item{position:relative;padding-inline-start:20px}
@keyframes kc-pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(91,226,122,.55)}
  70%{box-shadow:0 0 0 8px rgba(91,226,122,0)}
  100%{box-shadow:0 0 0 0 rgba(91,226,122,0)}
}
body.role-consultant table{font-size:.86rem}
body.role-consultant .num,body.role-consultant .sc-val{font-weight:800}

/* ---------------------------------------------------------------------
   دانش‌آموز (Student) — 15 to 17. Bigger touch targets, warmer/energetic
   accents, bouncier motivating motion, celebratory feedback on good scores.
   --------------------------------------------------------------------- */
body.role-student{
  --kc-dur-reveal:560ms;
  font-size:calc(var(--text-sm) + .5px);
}
body.role-student .btn{
  padding:11px 18px;border-radius:12px;font-weight:700;
}
body.role-student .btn:not(.outline):not(.danger){
  background:linear-gradient(120deg,var(--primary-500),#57b6ff 60%,var(--gold) 160%);
}
body.role-student .card,body.role-student .ui-section-card{
  border-radius:var(--radius-lg);padding:20px;
}
body.role-student .tab{padding:10px 16px;font-weight:700}
/* celebratory pop for strong scores (data-good attribute set by JS, or high numeric text) */
body.role-student .score-pill.kc-good,body.role-student .stat-box.kc-good{
  animation:kc-celebrate 620ms var(--kc-ease-spring);
}
@keyframes kc-celebrate{
  0%{transform:scale(1)}35%{transform:scale(1.14) rotate(-2deg)}
  65%{transform:scale(.97) rotate(1deg)}100%{transform:scale(1)}
}
body.role-student .coach-hub-icon{cursor:pointer}

/* ---------------------------------------------------------------------
   اولیا (Parent) — 30 to 70. Calmer, larger, higher-contrast, no jargon
   visual noise: slower motion, bigger text, generous spacing.
   --------------------------------------------------------------------- */
body.role-parent{
  --kc-dur-reveal:640ms;
  font-size:calc(var(--text-md) + 1px);
  --text-muted:#3f5670; /* higher-contrast muted text for readability */
}
body.role-parent .card,body.role-parent .ui-section-card,body.role-parent .parent-stat{
  padding:22px;border-radius:var(--radius-lg);border-width:1.5px;
}
body.role-parent .btn{padding:12px 20px;font-size:var(--text-md);border-radius:12px}
body.role-parent h1,body.role-parent h2,body.role-parent h3{letter-spacing:0}
body.role-parent .small-note{font-size:calc(var(--text-xs) + 1px)}
body.role-parent .card:hover,body.role-parent .ui-section-card:hover{transform:translateY(-2px)}

/* =====================================================================
   Responsive polish
   ===================================================================== */
@media (max-width:720px){
  .kc-reveal{transform:translateY(8px)}
  body.role-student .btn,body.role-parent .btn{padding:12px 16px}
}