/* ==========================================================================
   UMA Publishers — AI Learning Portal
   Design tokens + component layer on top of Bootstrap 5.3
   Mirrors the Figma file "UMA Publishers — AI Learning Portal"
   ========================================================================== */

:root {
  /* Brand */
  --uma-primary-900: #12237A;
  --uma-primary-700: #1F41C4;
  --uma-primary-600: #2D5BFF;
  --uma-primary-300: #9DB4FF;
  --uma-primary-100: #E4EAFF;

  /* Accent */
  --uma-sun-500: #FFC33C;
  --uma-sun-100: #FFF3D6;
  --uma-sun-ink: #8A6100;
  --uma-coral-500: #FF6B6B;
  --uma-coral-100: #FFE5E5;
  --uma-coral-ink: #D63A3A;
  --uma-mint-500: #17C79A;
  --uma-mint-100: #D9F7EE;
  --uma-mint-ink: #0E8F6E;
  --uma-grape-500: #8B5CF6;
  --uma-grape-100: #EDE6FF;
  --uma-grape-ink: #6D3FD4;

  /* Neutral */
  --uma-ink: #16233F;
  --uma-slate: #5A6784;
  --uma-mist: #9AA6BF;
  --uma-line: #E3E8F5;
  --uma-cloud: #F5F7FF;
  --uma-cream: #FFF9F0;
  --uma-white: #FFFFFF;

  /* Radius */
  --uma-r-sm: 8px;
  --uma-r-md: 14px;
  --uma-r-lg: 20px;
  --uma-r-xl: 28px;
  --uma-r-2xl: 40px;
  --uma-r-pill: 999px;

  /* Elevation */
  --uma-e-soft: 0 6px 18px rgba(22, 35, 63, .08);
  --uma-e-card: 0 12px 28px -4px rgba(22, 35, 63, .10);
  --uma-e-lift: 0 14px 30px -6px rgba(45, 91, 255, .28);

  /* Type — Devanagari and emoji fallbacks matter: school machines vary wildly,
     and the Child Zone leans on emoji for subject and badge icons. */
  --uma-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
  --uma-deva: "Noto Sans Devanagari", "Nirmala UI", "Mangal";
  --uma-font-display: "Poppins", var(--uma-deva), system-ui, -apple-system, "Segoe UI", sans-serif, var(--uma-emoji);
  --uma-font-body: "Nunito", var(--uma-deva), system-ui, -apple-system, "Segoe UI", sans-serif, var(--uma-emoji);

  /* Bootstrap overrides */
  --bs-primary: #2D5BFF;
  --bs-body-color: #5A6784;
  --bs-body-font-family: var(--uma-font-body);
  --bs-border-color: var(--uma-line);
}

/* ---------- Base ---------- */
body {
  font-family: var(--uma-font-body);
  color: var(--uma-slate);
  background: var(--uma-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .uma-display {
  font-family: var(--uma-font-display);
  color: var(--uma-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.uma-display-xl { font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.14; font-weight: 700; }
.uma-display-l  { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.18; font-weight: 700; }
h1, .uma-h1     { font-size: clamp(1.65rem, 2.6vw, 2.25rem); line-height: 1.22; }
h2, .uma-h2     { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.28; font-weight: 600; }
h3, .uma-h3     { font-size: 1.375rem; line-height: 1.36; font-weight: 600; }
h4, .uma-h4     { font-size: 1.125rem; line-height: 1.44; font-weight: 600; }

.uma-lead   { font-size: 1.125rem; line-height: 1.68; }
.uma-small  { font-size: .875rem; line-height: 1.57; }
.uma-caption{ font-size: .75rem;  line-height: 1.5; font-weight: 600; }

.uma-eyebrow {
  font-family: var(--uma-font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Colour helpers ---------- */
.text-ink    { color: var(--uma-ink) !important; }
.text-slate  { color: var(--uma-slate) !important; }
.text-mist   { color: var(--uma-mist) !important; }
.text-brand  { color: var(--uma-primary-600) !important; }
.text-mint   { color: var(--uma-mint-ink) !important; }
.text-sun    { color: var(--uma-sun-500) !important; }
.text-coral  { color: var(--uma-coral-500) !important; }
.text-grape  { color: var(--uma-grape-ink) !important; }

.bg-cloud  { background: var(--uma-cloud) !important; }
.bg-cream  { background: var(--uma-cream) !important; }
.bg-ink    { background: var(--uma-ink) !important; }
.bg-brand  { background: var(--uma-primary-600) !important; }

.uma-grad-hero   { background: linear-gradient(135deg, #F5F7FF 0%, #E4EAFF 55%, #EDE6FF 100%); }
.uma-grad-brand  { background: linear-gradient(135deg, #2D5BFF 0%, #8B5CF6 100%); }
/* Deepened from the raw sun/coral ramp so white body copy clears 4.5:1 on it. */
.uma-grad-warm   { background: linear-gradient(135deg, #FF9E29 0%, #FC704D 55%, #F04A61 100%); }
.uma-grad-mint   { background: linear-gradient(135deg, #17C79A 0%, #2D5BFF 100%); }
.uma-grad-coral  { background: linear-gradient(135deg, #FF6B6B 0%, #FFC33C 100%); }
.uma-grad-grape  { background: linear-gradient(135deg, #8B5CF6 0%, #FF6B6B 100%); }
.uma-grad-play   { background: linear-gradient(120deg, #2D5BFF 0%, #8B5CF6 50%, #FF6B6B 100%); }

/* ---------- Buttons ---------- */
.btn { font-family: var(--uma-font-display); font-weight: 600; border-radius: var(--uma-r-pill); }
.btn-lg { padding: .95rem 2rem; font-size: 1rem; }
.btn-uma {
  background: var(--uma-primary-600); color: #fff; border: 2px solid var(--uma-primary-600);
  padding: .8rem 1.6rem; box-shadow: var(--uma-e-lift);
}
.btn-uma:hover { background: var(--uma-primary-700); border-color: var(--uma-primary-700); color: #fff; }
.btn-uma-outline {
  background: #fff; color: var(--uma-primary-600); border: 2px solid var(--uma-primary-600);
  padding: .8rem 1.6rem; box-shadow: var(--uma-e-soft);
}
.btn-uma-outline:hover { background: var(--uma-primary-100); color: var(--uma-primary-700); }
.btn-uma-ghost {
  background: var(--uma-primary-100); color: var(--uma-primary-700); border: 2px solid transparent;
  padding: .8rem 1.6rem;
}
.btn-uma-ghost:hover { background: var(--uma-primary-300); color: var(--uma-primary-900); }
.btn-uma-sun {
  background: var(--uma-sun-500); color: var(--uma-ink); border: 2px solid var(--uma-sun-500);
  padding: .8rem 1.6rem; box-shadow: var(--uma-e-soft);
}
.btn-uma-sun:hover { background: #F5B21F; border-color: #F5B21F; color: var(--uma-ink); }
.btn-uma-dark {
  background: var(--uma-ink); color: #fff; border: 2px solid var(--uma-ink); padding: .8rem 1.6rem;
}
.btn-uma-dark:hover { background: #0E1830; color: #fff; }
.btn-on-dark {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); padding: .8rem 1.6rem;
}
.btn-on-dark:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Chips & pills ---------- */
.uma-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.05rem; border-radius: var(--uma-r-pill);
  font-size: .8125rem; font-weight: 600; line-height: 1;
  background: var(--uma-cloud); color: var(--uma-slate);
  border: 1px solid var(--uma-line); text-decoration: none;
  transition: .16s ease;
}
.uma-chip:hover { border-color: var(--uma-primary-300); color: var(--uma-primary-700); }
.uma-chip.active,
.uma-chip-brand { background: var(--uma-primary-600); border-color: var(--uma-primary-600); color: #fff; }
.uma-chip-mint  { background: var(--uma-mint-100);  border-color: transparent; color: var(--uma-mint-ink); }
.uma-chip-sun   { background: var(--uma-sun-100);   border-color: transparent; color: var(--uma-sun-ink); }
.uma-chip-coral { background: var(--uma-coral-100); border-color: transparent; color: var(--uma-coral-ink); }
.uma-chip-grape { background: var(--uma-grape-100); border-color: transparent; color: var(--uma-grape-ink); }
.uma-chip-light { background: #fff; border-color: transparent; color: var(--uma-ink); }
.uma-chip-sm    { padding: .3rem .65rem; font-size: .7rem; }

/* ---------- Cards ---------- */
.uma-card {
  background: #fff; border: 1px solid var(--uma-line);
  border-radius: var(--uma-r-xl); box-shadow: var(--uma-e-soft);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.uma-card-hover:hover { transform: translateY(-4px); box-shadow: var(--uma-e-card); }
.uma-card-plain { background: #fff; border: 0; border-radius: var(--uma-r-xl); box-shadow: var(--uma-e-card); }
.uma-panel { background: #fff; border-radius: var(--uma-r-xl); box-shadow: var(--uma-e-soft); overflow: hidden; }

/* ---------- Book cover ---------- */
.uma-cover {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--uma-r-lg); padding: 1.4rem; color: #fff; min-height: 240px;
}
.uma-cover--tall { min-height: 486px; border-radius: var(--uma-r-xl); padding: 2rem; }
.uma-cover h3, .uma-cover h2 { color: #fff; }

/* ---------- Icon tiles ---------- */
.uma-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--uma-r-lg);
  font-size: 1.5rem; color: #fff; flex: 0 0 auto;
}
.uma-icon-sm { width: 44px; height: 44px; border-radius: var(--uma-r-md); font-size: 1.05rem; }
.uma-icon-lg { width: 84px; height: 84px; border-radius: 24px; font-size: 2rem; }
.uma-icon-round { border-radius: 50%; }

/* ---------- Play button ---------- */
.uma-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: #fff; color: var(--uma-primary-600);
  font-size: 1.25rem; box-shadow: var(--uma-e-soft); border: 0;
}
.uma-thumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 170px; border-radius: var(--uma-r-lg) var(--uma-r-lg) 0 0;
}

/* ---------- Navbar ---------- */
.uma-navbar { background: #fff; border-bottom: 1px solid var(--uma-line); }
.uma-navbar .nav-link {
  font-family: var(--uma-font-body); font-weight: 600;
  color: var(--uma-slate); padding: .5rem .9rem;
}
.uma-navbar .nav-link:hover, .uma-navbar .nav-link.active { color: var(--uma-primary-600); }
.uma-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.uma-brand-mark {
  width: 44px; height: 44px; border-radius: var(--uma-r-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--uma-font-display); font-weight: 700; font-size: 1.15rem; color: #fff;
}

/* ---------- Progress ---------- */
.uma-track { height: 8px; border-radius: var(--uma-r-pill); background: var(--uma-line); overflow: hidden; }
.uma-track--lg { height: 14px; }
.uma-track--onbrand { background: rgba(255,255,255,.3); }
.uma-track > span { display: block; height: 100%; border-radius: var(--uma-r-pill); background: var(--uma-primary-600); }

/* ---------- Form ---------- */
.uma-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--uma-slate); margin-bottom: .45rem;
}
.uma-input {
  width: 100%; padding: 1rem 1.15rem; border-radius: var(--uma-r-md);
  background: var(--uma-cloud); border: 1.5px solid var(--uma-line);
  color: var(--uma-ink); font-size: 1rem; font-family: var(--uma-font-body);
}
.uma-input::placeholder { color: var(--uma-mist); }
.uma-input:focus {
  outline: none; border-color: var(--uma-primary-600); background: #fff;
  box-shadow: 0 0 0 4px rgba(45,91,255,.12);
}

/* ---------- Sections ---------- */
.uma-section { padding: 5.5rem 0; }
.uma-section-sm { padding: 3.5rem 0; }
.uma-band { border-radius: var(--uma-r-2xl); padding: 3.5rem; color: #fff; }
.uma-band h1, .uma-band h2, .uma-band h3, .uma-band h4 { color: #fff; }

/* ---------- Glass tiles on coloured bands ---------- */
.uma-glass {
  background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.45);
  border-radius: var(--uma-r-xl); padding: 1.4rem; color: #fff;
}
/* Meta text inside a glass tile must stay legible — never fade it below .92 */
.uma-glass .uma-small, .uma-glass .uma-caption { opacity: .92; font-weight: 600; }
.uma-band p { color: #fff; }
.uma-glass-dark {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--uma-r-lg); padding: 1.6rem; color: #fff;
}

/* ---------- Teacher dashboard ---------- */
.uma-shell { display: flex; min-height: 100vh; }
.uma-sidebar {
  width: 276px; flex: 0 0 276px; background: var(--uma-ink); color: #fff;
  padding: 1.75rem 1.35rem; display: flex; flex-direction: column; justify-content: space-between;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.uma-sidebar a {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border-radius: var(--uma-r-md);
  color: var(--uma-mist); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.uma-sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; }
.uma-sidebar a.active { background: var(--uma-primary-600); color: #fff; }
.uma-sidebar .badge-count {
  margin-left: auto; background: #33456E; color: #fff;
  border-radius: var(--uma-r-pill); padding: .18rem .55rem; font-size: .68rem;
}
.uma-main { flex: 1 1 auto; background: var(--uma-cloud); min-width: 0; }
.uma-topbar {
  background: #fff; border-bottom: 1px solid var(--uma-line);
  padding: 1.1rem 2.25rem; display: flex; align-items: center; gap: 1.25rem;
}
.uma-table { width: 100%; border-collapse: collapse; }
.uma-table thead th {
  background: var(--uma-cloud); color: var(--uma-mist);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .85rem 1.5rem; text-align: left; white-space: nowrap;
}
.uma-table tbody td { padding: .95rem 1.5rem; border-top: 1px solid var(--uma-line); vertical-align: middle; }
.uma-table tbody tr:hover { background: #FAFBFF; }
.uma-file-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* ---------- Child zone ---------- */
.uma-kid-header { background: #fff; border-bottom: 2px solid #FFE5CC; padding: 1.35rem 0; }
.uma-kid-nav .uma-chip { padding: .7rem 1.25rem; font-size: .9rem; border-color: transparent; background: var(--uma-cloud); }
.uma-kid-nav .uma-chip.active { background: var(--uma-primary-600); color: #fff; }
.uma-subject-tile {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  background: #fff; border-radius: 30px; padding: 1.6rem 1rem 1.4rem;
  box-shadow: var(--uma-e-card); text-align: center; text-decoration: none;
  transition: transform .18s ease;
}
.uma-subject-tile:hover { transform: translateY(-6px); }
.uma-avatar {
  width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: var(--uma-e-soft);
}
.uma-badge-coin {
  width: 76px; height: 76px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem;
}
.uma-badge-coin.locked { opacity: .35; }

/* ---------- Footer ---------- */
.uma-footer { background: var(--uma-ink); color: #ffffff; padding: 4.5rem 0 2rem; }
.uma-footer p, .uma-footer .uma-small, .uma-footer .uma-caption { color: #ffffff !important; }
.uma-footer h6 {
  color: var(--uma-sun-500); font-family: var(--uma-font-display);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem;
}
.uma-footer a { color: #ffffff !important; text-decoration: none; font-size: .875rem; display: block; padding: .3rem 0; opacity: 0.92; }
.uma-footer a:hover { color: #ffffff !important; opacity: 1; text-decoration: underline; }
.uma-social {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15);
  display: inline-flex !important; align-items: center; justify-content: center; color: #fff !important; font-size: .8rem;
}
.uma-social:hover { background: rgba(255,255,255,.3); }

/* ---------- Utility ---------- */
.uma-stack-sm > * + * { margin-top: .5rem; }
.rounded-uma { border-radius: var(--uma-r-xl) !important; }
.rounded-uma-lg { border-radius: var(--uma-r-2xl) !important; }
.shadow-uma { box-shadow: var(--uma-e-card) !important; }
.uma-divider { height: 1px; background: var(--uma-line); border: 0; opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .uma-section { padding: 3.5rem 0; }
  .uma-band { padding: 2.25rem; border-radius: var(--uma-r-xl); }
  .uma-sidebar { display: none; }
  .uma-topbar { padding: 1rem 1.25rem; }
  .uma-table thead { display: none; }
  .uma-table tbody td { display: block; border-top: 0; padding: .35rem 1.25rem; }
  .uma-table tbody tr { display: block; border-top: 1px solid var(--uma-line); padding: 1rem 0; }
}
@media (max-width: 575.98px) {
  .uma-cover--tall { min-height: 340px; }
  .btn-lg { padding: .8rem 1.4rem; }
  /* g-5 gutters (-1.5rem margins) exceed the container padding at phone widths
     and push the page 12px sideways — tighten them below the sm breakpoint. */
  .row.g-5, .row.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
}

/* Belt-and-braces: nothing should ever scroll the page sideways. */
html, body { overflow-x: clip; }

/* ---------- Print (teacher handouts) ---------- */
@media print {
  .uma-sidebar, .uma-topbar, .uma-navbar, .uma-footer, .btn { display: none !important; }
  body { background: #fff; }
}