/*
 * theme.css — Sims Class's design-system values.
 * Pastel-soft mood: washed lavender / pink / butter-yellow grounds, white
 * floating cards, warm plum ink. Opens light; dark keeps the same pink pop
 * accent on a deep plum ground.
 */

:root {
  --canvas: #fffdf8;
  --surface: #fffefc;
  --surface-2: #f7f0fb;
  --border: #ece1f4;
  --border-strong: #dac7ea;
  --ink: #3a3352;
  --muted: #6b6673;

  --accent: #ff6fa5;
  --accent-hover: #f0568f;
  --accent-ink: #3a3352;
  --accent-text: #6356c2;
  --accent-strong: #a8496d;
  --accent-soft: #ffe4ef;
  --accent-border: #ffc4da;

  --success: #3fae7c;
  --success-ink: #ffffff;
  --success-soft: #e2f6ec;
  --success-strong: #227a52;
  --warning: #dea223;
  --warning-ink: #40300a;
  --warning-soft: #fbf0d4;
  --warning-strong: #8a6a12;
  --danger: #e5607a;
  --danger-ink: #ffffff;
  --danger-soft: #fde2e8;
  --danger-strong: #b23652;

  --chart-1: #ff6fa5;
  --chart-2: #8f7fd9;
  --chart-3: #4fae86;
  --chart-4: #e8b93a;
  --chart-5: #6356c2;
  --chart-6: #ef8b6c;

  /* App-owned washes for role cards, subject dots and the hero card. */
  --x-lavender-wash: #ece4fb;
  --x-lavender-strong: #8f7fd9;
  --x-pink-wash: #ffe4ef;
  --x-pink-strong: #ff6fa5;
  --x-yellow-wash: #fdf0cf;
  --x-yellow-strong: #d9a520;
  --x-mint-wash: #dff5ea;
  --x-mint-strong: #379a6f;
  --gradient-hero: linear-gradient(135deg, #e7dbfb 0%, #ffd2e6 62%, #fdedc4 100%);
  --gradient-blob: radial-gradient(circle at 30% 30%, #f3e6fd 0%, transparent 60%),
    radial-gradient(circle at 75% 25%, #ffe1ee 0%, transparent 55%),
    radial-gradient(circle at 55% 80%, #fdf0cc 0%, transparent 55%);

  --font-display: "Baloo 2", ui-rounded, "Segoe UI Rounded", sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 999px;
  --radius-card: 1.5rem;
  --radius-input: 0.9rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --card-pad: 1.5rem;
  --measure: 62ch;
  --shadow-card: 0 16px 32px -20px color-mix(in srgb, var(--ink) 40%, transparent), 0 2px 10px -4px color-mix(in srgb, var(--ink) 12%, transparent);
  --shadow-raised: 0 26px 50px -22px color-mix(in srgb, var(--ink) 45%, transparent);
  --shadow-btn: 0 10px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

html[data-theme="dark"] {
  --canvas: #241f33;
  --surface: #2f2843;
  --surface-2: #382e4e;
  --border: #473c60;
  --border-strong: #5c4d78;
  --ink: #f6f0fb;
  --muted: #bcaed2;

  --accent: #ff6fa5;
  --accent-hover: #ff85b4;
  --accent-ink: #2c1220;
  --accent-text: #c6b8f4;
  --accent-strong: #ffb0cd;
  --accent-soft: #3c2b45;
  --accent-border: #5a3a4c;

  --success: #4bc190;
  --success-ink: #0f2519;
  --success-soft: #1f3a2c;
  --success-strong: #82e2b8;
  --warning: #e0ab35;
  --warning-ink: #2b2007;
  --warning-soft: #3a2d13;
  --warning-strong: #f0c667;
  --danger: #ec7188;
  --danger-ink: #2b1016;
  --danger-soft: #3d2129;
  --danger-strong: #ff9fb4;

  --chart-1: #ff8ab3;
  --chart-2: #ac9ef2;
  --chart-3: #5fd6a4;
  --chart-4: #f0c667;
  --chart-5: #9c90ef;
  --chart-6: #f2a186;

  --x-lavender-wash: #3a3355;
  --x-lavender-strong: #b0a3f2;
  --x-pink-wash: #402c3c;
  --x-pink-strong: #ff9dc0;
  --x-yellow-wash: #3d331f;
  --x-yellow-strong: #f0c667;
  --x-mint-wash: #233b32;
  --x-mint-strong: #6fdcae;
  --gradient-hero: linear-gradient(135deg, #453a68 0%, #6b3f5b 62%, #6e5730 100%);
  --gradient-blob: radial-gradient(circle at 30% 30%, #3a2f52 0%, transparent 60%),
    radial-gradient(circle at 75% 25%, #442f3f 0%, transparent 55%),
    radial-gradient(circle at 55% 80%, #453a26 0%, transparent 55%);

  --shadow-card: 0 18px 36px -18px rgba(0, 0, 0, 0.55), 0 2px 10px -4px rgba(0, 0, 0, 0.35);
  --shadow-raised: 0 28px 54px -20px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 10px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}

/*
 * public/app.css — Sims Class's own stylesheet. The ground, the bottom tab bar,
 * the hero class card, the role-select blob, the calendar strip and every
 * other bit of chrome no primitive covers. Compiled: @apply/@utility work
 * here exactly as in tailwind/components.css.
 */

/* ---- Greeting icon (replaces an emoji glyph next to "Hello, Alex" /
   "Good morning, Teacher" — some renderers show emoji as a broken box) --- */
.greeting-wave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
}
.greeting-wave .icon { width: 1.1rem; height: 1.1rem; }

/* ---- Ground ---------------------------------------------------------- */
.app-ground {
  background:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--x-lavender-wash) 70%, transparent), transparent 60%),
    radial-gradient(50rem 26rem at 110% 10%, color-mix(in srgb, var(--x-pink-wash) 65%, transparent), transparent 55%),
    var(--canvas);
  background-attachment: fixed;
}

/* ---- Bottom tab bar: thumb-height on a phone, a slim floating strip on
   top from md up. ------------------------------------------------------ */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.25rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-raised);
}
@media (min-width: 768px) {
  .tabbar {
    position: sticky;
    top: 0.75rem;
    bottom: auto;
    margin: 0 auto 1rem;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid var(--border);
    padding: 0.35rem;
    gap: 0.15rem;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px);
  }
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 3.25rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.tabbar-item:hover { color: var(--ink); text-decoration: none; }
.tabbar-item .icon { width: 1.2rem; height: 1.2rem; }
.tabbar-item.is-active { color: var(--accent-strong); background: var(--accent-soft); }
@media (min-width: 768px) {
  .tabbar-item { flex-direction: row; font-size: 0.85rem; padding: 0.45rem 0.9rem; gap: 0.4rem; }
}

/* ---- Hero class card --------------------------------------------------- */
.hero-card {
  margin-top: 0.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--gradient-hero);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(16rem 10rem at 105% -15%, color-mix(in srgb, var(--surface) 65%, transparent), transparent 60%);
  pointer-events: none;
}
.hero-card-eyebrow { font-size: 0.85rem; font-weight: 600; opacity: 0.75; }
.hero-card-subject {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.hero-card-subject .icon { width: 1.4rem; height: 1.4rem; }
.hero-card-topic {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.15;
}
.hero-card-meta { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.hero-card-time { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; opacity: 0.85; }
.hero-card-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  font-size: 0.82rem;
  font-weight: 700;
}
.hero-card-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
}

/* A short page (e.g. Progress with just two subjects) used to dump all its
   slack below the content, in front of the fixed mobile tab bar. Rather than
   guess the header's height, the column itself is exactly one viewport tall
   and the header keeps its own natural size; .app-main is the flexible
   remainder, so centering inside it always matches the real space between
   the header and the tab bar — a page with enough content to fill that
   space overflows it normally and is unaffected.
   The tab-bar clearance lives on .app-shell-col, AFTER .app-main, not as
   padding inside it — padding inside the centered box ate into one side
   only, so the block sat noticeably closer to the header than to the tab
   bar. Kept outside, both halves split evenly. */
@media (max-width: 767px) {
  .app-shell-col {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 6rem;
  }
  .app-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* The student's Progress screen usually holds only one or two subjects, far
   short of a phone screen's height. Centering it inside whatever .app-main
   has left (the trick above) still leaves a huge gap when the page itself
   is this short, so the block is given a real, guaranteed floor of its own
   to sit inside and center within — independent of the parent's flex math. */
.progress-page-roomy .progress-row > .flex { font-size: 1.05rem; }
@media (max-width: 767px) {
  .progress-page-roomy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 15rem);
    min-height: calc(100dvh - 15rem);
  }
}

/* ---- Stat tiles / pills ------------------------------------------------ */
.stat-tile {
  padding: 1rem;
  border-radius: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.stat-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.stat-tile-value { margin-top: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); }
.stat-tile-label { margin-top: 0.1rem; font-size: 0.78rem; color: var(--muted); }

.stat-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.stat-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}
.stat-pill-value { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.stat-pill-label { font-size: 0.74rem; color: var(--muted); }

/* ---- Class row / homework row -------------------------------------------- */
.class-row, .hw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.9rem;
  background: var(--surface-2);
  line-height: 1.1;
}
.date-badge span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.date-badge span:last-child { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }

/* ---- Homework check ------------------------------------------------------- */
.hw-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  flex-shrink: 0;
}
.hw-check.is-done { background: var(--success-soft); color: var(--success-strong); }

/* ---- Calendar strip -------------------------------------------------------- */
.cal-card { padding: 1.1rem 1.1rem 1.25rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; }
.cal-head { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--muted); padding-bottom: 0.3rem; }
.cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border-radius: 0.65rem;
  font-size: 0.75rem;
  color: var(--ink);
}
.cal-cell-empty { visibility: hidden; }
.cal-cell.is-today { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal-dot { width: 0.28rem; height: 0.28rem; border-radius: 999px; background: var(--accent-strong); }
.cal-cell.is-today .cal-dot { background: var(--accent-ink); }

/* ---- Duration banner (Add Class form) --------------------------------------- */
.duration-banner {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-radius: 1rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}
.duration-banner span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.duration-banner strong { font-family: var(--font-display); font-size: 1.1rem; }

/* ---- Profile links --------------------------------------------------------- */
.profile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0.25rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.profile-link:hover { text-decoration: none; color: var(--accent-text); }
.profile-link + .profile-link { border-top: 1px solid var(--border); }

/* ---- Role-select screen ------------------------------------------------------ */
.login-blob {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--gradient-blob), var(--canvas);
  pointer-events: none;
}
.login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.5rem;
  background: var(--gradient-hero);
  color: var(--accent-strong);
  box-shadow: var(--shadow-raised);
}
.role-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border-radius: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.role-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); text-decoration: none; }
.role-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 1.1rem;
  flex-shrink: 0;
}
.role-card-lavender .role-card-icon { background: var(--x-lavender-wash); color: var(--x-lavender-strong); }
.role-card-pink .role-card-icon { background: var(--x-pink-wash); color: var(--x-pink-strong); }

/* ==== Motion: hero-only. The login screen's mark, wordmark and cards rise
   in once on load; each dashboard's hero card does the same; nothing else
   in the app moves. ============================================================ */
@keyframes bloom-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* Rests fully visible — a JS-less visit sees the finished page. app.js adds
   .is-inview via IntersectionObserver as each element enters, which is what
   actually plays the rise. */
[data-inview] { opacity: 1; }
[data-inview].is-inview { animation: bloom-rise 560ms var(--ease-out) both; }
html.reduced-motion [data-inview].is-inview { animation: none; }