/* ══════════════════════════════════════════════════════════════
   ILE PORTAL UI — shared design system for the student, parent
   and admin dashboards (dashboard-student.html, dashboard-parent.html,
   dashboard-admin.html). Not used by the marketing site, which keeps
   its own dark theme in ile.css.
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --ile-ink:          #1C1730;
  --ile-purple:       #4B2E83;
  --ile-purple-mid:   #7A5FD6;
  --ile-purple-deep:  #372163;
  --ile-lavender:     #F6F4FC;
  --ile-lavender2:    #EFEBFA;
  --ile-white:        #FFFFFF;
  --ile-success:      #2F7D5A;
  --ile-success-bg:   #E7F3ED;
  --ile-amber:        #B8842E;
  --ile-amber-bg:     #FBF1E1;
  --ile-red:          #B23B2E;
  --ile-red-bg:       #FBEAE7;
  --ile-border:       #E4DFF3;
  --ile-text-muted:   #756E93;
  --ile-font-display: 'Fraunces', Georgia, serif;
  --ile-font-body:    'Inter', sans-serif;
  --ile-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --ile-grad-purple:  linear-gradient(135deg, #4B2E83 0%, #7A5FD6 100%);
  --ile-shadow-card:  0 1px 2px rgba(28,23,48,.05), 0 10px 28px -14px rgba(75,46,131,.18);
  --ile-shadow-card-hover: 0 2px 6px rgba(28,23,48,.07), 0 16px 36px -14px rgba(75,46,131,.28);
  --ile-shadow-btn:   0 2px 10px rgba(75,46,131,.25);
}

.ile-portal, .ile-portal * , .ile-portal *::before, .ile-portal *::after { box-sizing: border-box; }
.ile-portal { font-family: var(--ile-font-body); color: var(--ile-ink); }

/* Soft blurred background accents — shared by all three dashboards, sits behind the shell/sidebar */
body {
  position: relative;
}
body::before, body::after {
  content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(70px);
}
body::before { width: 460px; height: 460px; top: -140px; right: -120px; background: radial-gradient(circle, rgba(122,95,214,.28), transparent 70%); }
body::after  { width: 420px; height: 420px; bottom: -160px; left: -140px;  background: radial-gradient(circle, rgba(75,46,131,.22), transparent 70%); }
.shell-wrap, .shell { position: relative; z-index: 1; }
/* .shell-wrap (student/parent) gets the full slide+fade entrance. .shell (admin)
   only fades — a transform here would give its position:fixed sidebar a new
   containing block for the animation's duration and could make it jump. */
.shell-wrap { animation: ileFadeUp .5s ease both; }
.shell { animation: ileFadeIn .4s ease both; }
@keyframes ileFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ileFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── CARD ── */
.ile-card {
  background: var(--ile-white); border: 1px solid var(--ile-border); border-radius: 14px;
  padding: 16px 16px; box-shadow: var(--ile-shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ile-card:hover { box-shadow: var(--ile-shadow-card-hover); transform: translateY(-2px); }

/* ── SECTION TITLE ── */
.ile-section-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 10px; font-family: var(--ile-font-display); font-size: 15px;
  font-weight: 600; color: var(--ile-ink); position: relative; padding-left: 14px;
}
.ile-section-title::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px;
  background: var(--ile-grad-purple);
}
.ile-section-title .action { font-family: var(--ile-font-body); font-size: 12.5px; font-weight: 600; color: var(--ile-purple); cursor: pointer; }

/* ── STATUS PILL ── */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--ile-font-body); font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.paid, .status-pill.active, .status-pill.confirmed { background: var(--ile-success-bg); color: var(--ile-success); }
.status-pill.pending { background: var(--ile-amber-bg); color: var(--ile-amber); }
.status-pill.overdue, .status-pill.cancelled { background: var(--ile-red-bg); color: var(--ile-red); }
.status-pill.paused { background: var(--ile-lavender2); color: var(--ile-text-muted); }

/* ── GRADE RING / MARK — colored by grade tier, not a numeric score ── */
.grade-ring {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ile-text-muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--ile-font-mono); font-size: 13px; font-weight: 600; color: var(--ile-text-muted);
  background: var(--ile-lavender2); box-shadow: 0 2px 6px rgba(28,23,48,.06); transition: transform .2s ease;
}
.grade-ring:hover { transform: scale(1.06); }
.grade-ring.small { width: 40px; height: 40px; font-size: 11px; }
.grade-ring.tier-success { border-color: var(--ile-success); color: var(--ile-success); background: var(--ile-success-bg); }
.grade-ring.tier-amber   { border-color: var(--ile-amber);   color: var(--ile-amber);   background: var(--ile-amber-bg); }
.grade-ring.tier-red     { border-color: var(--ile-red);     color: var(--ile-red);     background: var(--ile-red-bg); }

/* ── EMPTY STATE ── */
.ile-empty { font-family: var(--ile-font-body); font-size: 13px; color: var(--ile-text-muted); text-align: center; padding: 24px; }

/* ── BUTTONS ── */
.ile-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--ile-font-body); font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 8px; border: none; padding: 10px 20px; transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .15s;
  text-decoration: none;
}
.ile-btn.primary { background: var(--ile-grad-purple); color: var(--ile-white); box-shadow: var(--ile-shadow-btn); }
.ile-btn.primary:hover { box-shadow: 0 4px 18px rgba(75,46,131,.38); transform: translateY(-1px); }
.ile-btn.primary:active { transform: translateY(0); }
.ile-btn.outline { background: var(--ile-white); color: var(--ile-purple); border: 1px solid var(--ile-purple); }
.ile-btn.outline:hover { background: var(--ile-lavender); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(75,46,131,.12); }
.ile-btn.danger { background: none; border: 1px solid rgba(178,59,46,.35); color: var(--ile-red); }
.ile-btn.danger:hover { background: var(--ile-red-bg); transform: translateY(-1px); }
.ile-btn.block { width: 100%; }

/* ── FORM FIELDS (admin) ── */
.ile-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.ile-field label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ile-text-muted); margin-bottom: 7px; font-weight: 600; }
.ile-field input, .ile-field select, .ile-field textarea {
  padding: 12px 14px; background: var(--ile-white); border: 1px solid var(--ile-border);
  color: var(--ile-ink); font-family: var(--ile-font-body); font-size: 13.5px; outline: none;
  border-radius: 8px; transition: border-color .2s; width: 100%;
}
.ile-field input:focus, .ile-field select:focus, .ile-field textarea:focus { border-color: var(--ile-purple-mid); }
.ile-field textarea { resize: vertical; min-height: 80px; }
.ile-field-hint { font-size: 11px; color: var(--ile-text-muted); margin-top: 5px; }

/* ── TOAST ── */
.ile-toast { display: none; padding: 12px 16px; background: var(--ile-success-bg); border: 1px solid rgba(47,125,90,.25); color: var(--ile-success); font-size: 13px; border-radius: 8px; }
.ile-toast.show { display: block; }