/* ============================================================
   QCUians Schedule — soft-ui.css
   Design system overlay for the QCU Student Portal.

   Ports the approved mockup (docs/design/mockups/app-responsive.html)
   onto the existing vanilla-CSS app WITHOUT rewriting legacy
   rules: loaded AFTER styles.css/student.css so these win.

   Tokens:
     bg #F4F7FC · primary #4A3AFF · navy #1A1B41 · grey #8E92AD
     peach #FFE8D6 · mint #E0F7F6 · lavender #EDEAFF
     radius 28px cards / 22px sub-cards · soft float shadows
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --soft-bg: #F4F7FC;
  --soft-primary: #4A3AFF;
  --soft-primary-soft: #ECEBFF;
  --soft-navy: #1A1B41;
  --soft-grey: #8E92AD;
  --soft-peach: #FFE8D6;
  --soft-peach-icon: #FF9F6E;
  --soft-mint: #E0F7F6;
  --soft-mint-icon: #35C4C8;
  --soft-lavender: #EDEAFF;
  --soft-lav-icon: #7B6CF6;
  --soft-sky: #DCEBFF;
  --soft-sky-icon: #3D7FE0;
  --soft-butter: #FFF2CE;
  --soft-butter-icon: #C99022;
  --soft-blush: #FFE3EC;
  --soft-blush-icon: #DE5F8C;
  --soft-radius: 28px;
  --soft-radius-sm: 22px;
  --soft-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  --soft-shadow-primary: 0 14px 28px -6px rgba(74, 58, 255, 0.5);
  --soft-font: 'Plus Jakarta Sans', 'Poppins', -apple-system, 'Segoe UI', sans-serif;
}

/* ── Base ──────────────────────────────────────────────── */
.student-shell,
.app-shell {
  background: var(--soft-bg);
  font-family: var(--soft-font);
}

.student-shell h1, .student-shell h2, .student-shell h3,
.app-shell h1, .app-shell h2, .app-shell h3 {
  color: var(--soft-navy);
  letter-spacing: -0.02em;
}

/* ── Floating cards ────────────────────────────────────── */
.portal-card,
.home-status-card,
.modal-card {
  border-radius: var(--soft-radius) !important;
  box-shadow: var(--soft-shadow) !important;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* ════════════════════════════════════════════════════════
   HOME HERO: greeting + purple weather widget
   ════════════════════════════════════════════════════════ */
.home-hero {
  background: transparent;
  padding: 8px 0 4px;
}

.home-hero-title { display: none; }  /* mockup has no second title; greeting is the hero */
.home-hero-sub { display: none; }

.home-hero-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}
.home-hero-eyebrow .home-hero-rule { display: none; }
#home-greeting {
  font-size: 14px;
  font-weight: 500;
  color: var(--soft-grey);
  letter-spacing: 0;
  text-transform: none;
}

/* Big name under the greeting */
.home-hero-main::after {
  content: attr(data-student-name);
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--soft-navy);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 2px;
}

.home-hero-stats { display: none !important; }
.home-hero-skeleton { display: none !important; }

/* Purple weather chip in the hero (fed by status.js) */
/* Weather chip: stretches FULL-WIDTH on mobile (visual appeal), auto on md+ */
.home-weather-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* icon left, temp right on a wide chip */
  gap: 12px;
  background: var(--soft-primary);
  color: #fff;
  border-radius: var(--soft-radius);
  padding: 16px 22px;               /* taller, roomier */
  box-shadow: var(--soft-shadow-primary);
  text-decoration: none;
  flex-shrink: 0;
  width: 100%;                       /* stretch the full row on mobile */
}
@media (min-width: 768px) {
  .home-weather-chip {
    width: auto;                     /* compact chip again on desktop */
    justify-content: flex-start;
    padding: 14px 18px;
  }
}
.home-weather-chip svg { width: 38px; height: 38px; }   /* bigger cloud on the stretched chip */
/* Temp / condition / location stack vertically inside the chip's text block
   (as inline spans they collided on one line: "27° THUNDERSTORM"). */
.home-weather-chip > span { text-align: right; }        /* mobile banner: meta block hugs the right edge */
.home-weather-chip-temp { display: block; font-size: 24px; font-weight: 800; line-height: 1; }
.home-weather-chip-cond { display: block; font-size: 12px; opacity: 0.85; margin-top: 4px; }
.home-weather-chip-loc {
  display: block;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}
@media (min-width: 768px) {
  .home-weather-chip > span { text-align: left; }       /* compact chip: meta reads after the icon */
}

/* Hero becomes greeting left / weather right */
.home-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* ════════════════════════════════════════════════════════
   WEEKLY DATE STRIP: purple pill today
   ════════════════════════════════════════════════════════ */
.home-week .home-week-table { display: none; }

.week-pill-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.week-pill-strip::-webkit-scrollbar { display: none; }

.week-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 52px;
  padding: 8px 0;
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.week-pill-day {
  font-size: 12px;
  font-weight: 600;
  color: var(--soft-grey);
}
.week-pill-date {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--soft-navy);
  background: #fff;
  box-shadow: var(--soft-shadow);
  transition: transform .15s ease;
}
.week-pill:hover .week-pill-date { transform: translateY(-2px); }
.week-pill.is-today .week-pill-day { color: var(--soft-primary); font-weight: 700; }
.week-pill.is-today .week-pill-date {
  background: var(--soft-primary);
  color: #fff;
  box-shadow: var(--soft-shadow-primary);
}
.week-pill-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--soft-grey);
}
.week-pill-count.has-classes { color: var(--soft-primary); }

/* ════════════════════════════════════════════════════════
   TODAY TASK: horizontal pastel cards
   ════════════════════════════════════════════════════════ */
.student-shell .home-today-grid {
  display: flex !important;
  flex-direction: column !important;   /* long edge-to-edge boxes, stacked */
  gap: 12px !important;
  overflow: visible !important;
  padding: 4px 2px 2px !important;
  grid-template-columns: none !important;
}
.student-shell .home-today-grid > * { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; }

/* class box → long full-width row: time rail | details */
.student-shell .home-today-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 18px 20px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: var(--soft-radius) !important;
  box-shadow: var(--soft-shadow) !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  overflow: hidden;
  --tile-accent: var(--soft-navy);
}
.student-shell .home-today-card:hover,
.student-shell .home-today-card:active {
  box-shadow: var(--soft-shadow) !important;
  transform: none !important;
  border-color: transparent !important;
}

/* left time rail: start big, accent rule, end under it */
.student-shell .home-today-card .home-today-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  width: 86px !important;
  padding: 0 14px 0 0 !important;
  border-right: 1px solid rgba(26, 27, 65, 0.10) !important;
}
.student-shell .home-today-card .home-today-rail-time {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--soft-navy) !important;
  font-variant-numeric: tabular-nums;
}
.student-shell .home-today-card .home-today-rail-end {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--soft-grey) !important;
  font-variant-numeric: tabular-nums;
}
.student-shell .home-today-card .home-today-rail-rule {
  display: block !important;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--tile-accent);
  opacity: .6;
  margin: 2px 0;
}
.student-shell .home-today-card .home-today-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 0 0 16px !important;
}

/* Deterministic pastels — the tint comes from the subject, so a box keeps its
   colour on every re-render (the home tick redraws this list every second). */
.student-shell .home-today-card.pastel-peach,
.student-shell .home-today-done-row.pastel-peach       { background: var(--soft-peach) !important;    --tile-accent: #E07A3E; }
.student-shell .home-today-card.pastel-mint,
.student-shell .home-today-done-row.pastel-mint        { background: var(--soft-mint) !important;     --tile-accent: #17A8AE; }
.student-shell .home-today-card.pastel-lavender,
.student-shell .home-today-done-row.pastel-lavender    { background: var(--soft-lavender) !important; --tile-accent: #7B6CF6; }
.student-shell .home-today-card.pastel-sky,
.student-shell .home-today-done-row.pastel-sky         { background: var(--soft-sky) !important;      --tile-accent: #3D7FE0; }
.student-shell .home-today-card.pastel-butter,
.student-shell .home-today-done-row.pastel-butter      { background: var(--soft-butter) !important;   --tile-accent: #C99022; }
.student-shell .home-today-card.pastel-blush,
.student-shell .home-today-done-row.pastel-blush       { background: var(--soft-blush) !important;    --tile-accent: #DE5F8C; }

/* the class in session now (or the next one up) → solid purple */
.student-shell .home-today-card.current-tile,
.student-shell .home-today-card.home-today-card--feature {
  background: var(--soft-primary) !important;
  color: #fff !important;
  box-shadow: var(--soft-shadow-primary) !important;
  --tile-accent: #fff;
}

.student-shell .home-today-card .home-today-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}
.student-shell .home-today-card .home-today-status {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, .8) !important;
  color: var(--soft-navy) !important;
  white-space: nowrap;
}
.student-shell .home-today-card .home-today-course {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--soft-grey) !important;
  margin-left: auto !important;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.student-shell .home-today-card .home-today-subject {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--soft-navy) !important;
  overflow-wrap: anywhere;
}
.student-shell .home-today-card .home-today-building {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5C6079 !important;
}
.student-shell .home-today-card .home-today-building svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke-width: 2.2;
  color: var(--tile-accent);
}
.student-shell .home-today-card .home-today-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
}
.student-shell .home-today-card .home-today-duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--tile-accent);
  background: rgba(255, 255, 255, .78);
  border-radius: 9999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.student-shell .home-today-card .home-today-duration svg { width: 12px; height: 12px; stroke-width: 2.2; }
.student-shell .home-today-card .home-today-live { font-size: 11.5px; font-weight: 700; color: #6C7089; }
.student-shell .home-today-card .home-today-progress {
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .55);
  margin-top: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.student-shell .home-today-card .home-today-progress span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--tile-accent);
}

/* feature card (in session / next up): white type on solid purple */
.student-shell .home-today-card:is(.current-tile, .home-today-card--feature) :is(
  .home-today-subject, .home-today-building, .home-today-live,
  .home-today-duration, .home-today-course, .home-today-rail-time, .home-today-rail-end
) { color: #fff !important; }
.student-shell .home-today-card:is(.current-tile, .home-today-card--feature) .home-today-status {
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}
.student-shell .home-today-card:is(.current-tile, .home-today-card--feature) .home-today-rail {
  border-right-color: rgba(255, 255, 255, .3) !important;
}
.student-shell .home-today-card:is(.current-tile, .home-today-card--feature) .home-today-rail-rule { opacity: .85; }
.student-shell .home-today-card:is(.current-tile, .home-today-card--feature) .home-today-progress { background: rgba(255, 255, 255, .3); }
.student-shell .home-today-card:is(.current-tile, .home-today-card--feature) .home-today-duration {
  background: rgba(255, 255, 255, .18);
}

/* finished classes → one compact muted line: subject · time · duration */
.student-shell .home-today-done-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
  opacity: .78;
}
.student-shell .home-today-done-check {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .92);
  color: var(--tile-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.student-shell .home-today-done-check svg { width: 14px; height: 14px; stroke-width: 2.6; }
.student-shell .home-today-done-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.student-shell .home-today-done-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.student-shell .home-today-done-subject {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #3A3C58;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.student-shell .home-today-done-time {
  font-size: 11.5px;
  font-weight: 700;
  color: #6C7089;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.student-shell .home-today-done-duration {
  font-size: 11px;
  font-weight: 800;
  color: var(--tile-accent);
  background: rgba(255, 255, 255, .85);
  border-radius: 9999px;
  padding: 3px 9px;
  white-space: nowrap;
}
/* Phones: subject on its own line so nothing has to be truncated. */
@media (max-width: 479px) {
  .student-shell .home-today-done-row { align-items: flex-start; }
  .student-shell .home-today-done-main { flex-direction: column; align-items: flex-start; gap: 3px; }
  .student-shell .home-today-done-subject { white-space: normal; overflow: visible; }
}

/* "now" marker that splits the past from the rest of the day */
.student-shell .home-today-now { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.student-shell .home-today-now-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: var(--soft-primary);
  box-shadow: 0 0 0 4px rgba(74, 58, 255, .16);
  flex-shrink: 0;
}
.student-shell .home-today-now-line {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(74, 58, 255, .35), rgba(74, 58, 255, .05));
}
.student-shell .home-today-now-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--soft-primary);
  white-space: nowrap;
}

/* every class already finished */
.student-shell .home-today-all-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  color: var(--soft-grey);
  font-size: 12.5px;
  font-weight: 700;
}
.student-shell .home-today-all-done svg { width: 16px; height: 16px; }

/* break tile → slim full-width row between class boxes */
.student-shell .home-break-tile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: var(--soft-shadow) !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  grid-template-columns: none !important;
}
.student-shell .home-break-rail {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--soft-grey) !important;
  font-variant-numeric: tabular-nums;
}
.student-shell .home-break-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
}
.student-shell .home-break-label {
  background: var(--soft-lavender);
  color: var(--soft-lav-icon);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  width: fit-content;
  flex-shrink: 0;
}
.student-shell .home-break-label svg { width: 12px; height: 12px; }
.student-shell .home-break-title { font-size: 12.5px !important; font-weight: 800 !important; margin: 0 !important; color: var(--soft-navy) !important; }
.student-shell .home-break-sub { display: none; }

/* ════════════════════════════════════════════════════════
   CLASS TRACKER + COUNTDOWN (purple feature card)
   ════════════════════════════════════════════════════════ */
.home-nownext {
  background: #fff;
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  padding: 20px;
}
.home-tracker-cell {
  background: var(--soft-primary-soft) !important;
  border-radius: var(--soft-radius-sm) !important;
  border: 0 !important;
}
.home-tracker-cell--now { background: var(--soft-primary) !important; }
.home-tracker-cell--now .home-tracker-label,
.home-tracker-cell--now .home-tracker-subject,
.home-tracker-cell--now .home-tracker-time,
.home-tracker-cell--now .home-tracker-meta { color: #fff !important; }
.home-tracker-label { color: var(--soft-primary); font-weight: 700; font-size: 11px; }
.home-tracker-subject { color: var(--soft-navy); font-weight: 800; }
.home-tracker-time, .home-tracker-meta { color: var(--soft-grey); }
.home-countdown-value { color: var(--soft-primary); font-weight: 800; }
.home-countdown-track { background: var(--soft-primary-soft); border-radius: 9999px; }
.home-countdown-fill { background: var(--soft-primary); border-radius: 9999px; }

/* ════════════════════════════════════════════════════════
   GOAL-LIST QUICK LINKS (bus route + buildings)
   ════════════════════════════════════════════════════════ */
.student-tools {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.student-tools a {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--soft-radius-sm);
  padding: 14px 18px;
  text-decoration: none;
  box-shadow: var(--soft-shadow);
  border: 0;
  transition: transform .15s ease;
}
.student-tools a:hover { transform: translateY(-2px); }
.student-tools a:first-child { background: var(--soft-peach); }
.student-tools a:nth-child(2) { background: var(--soft-mint); }
.student-tools a > i:first-child,
.student-tools a .tool-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  flex-shrink: 0;
}
.student-tools a:first-child > i:first-child { color: var(--soft-peach-icon); }
.student-tools a:nth-child(2) > i:first-child { color: var(--soft-mint-icon); }
.student-tools a span strong { color: var(--soft-navy); font-size: 14px; }
.student-tools a span small { color: var(--soft-grey); font-size: 12px; }
.student-tools a > i:last-child { color: rgba(26,27,65,.35); margin-left: auto; }

/* Bus schedule mini-card on Home: icon left, text flows right (no harsh wraps) */
.home-bus-card {
  background: var(--soft-lavender);
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;      /* items-start: icon top-aligned with multi-line text */
  gap: 16px;
  text-align: left;
}
.home-bus-card .home-bus-body { flex: 1; min-width: 0; }
.home-bus-card .home-bus-title { font-weight: 800; color: var(--soft-navy); font-size: 14px; white-space: nowrap; }
.home-bus-card .home-bus-sub { font-size: 12px; color: var(--soft-grey); margin-top: 2px; overflow-wrap: anywhere; }
.home-bus-card .home-bus-link { color: var(--soft-primary); font-weight: 700; font-size: 12px; text-decoration: none; white-space: nowrap; align-self: center; }
.home-bus-card .home-bus-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  color: var(--soft-lav-icon);
  flex-shrink: 0;
}

/* Floating student navigation: one layout at every viewport width. */
.student-shell .bottom-nav {
  --nav-bg: #4435ee;
  --nav-active: #e9e5ff;
  --nav-muted: #c5bdff;
  position: fixed;
  inset: auto auto calc(14px + env(safe-area-inset-bottom, 0px)) 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  max-width: none;
  z-index: 50;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--nav-bg);
  box-shadow: 0 12px 28px -8px rgba(49, 35, 140, .32);
}
.student-shell .bottom-nav > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  gap: 4px;
  padding: 0;
  margin: 0;
}
.student-shell .bottom-nav .nav-item {
  display: flex;
  flex: 1 1 44px;
  flex-direction: row;
  min-width: 44px;
  min-height: 48px;
  height: 48px;
  padding: 0 6px;
  gap: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nav-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  transition: flex-grow 300ms cubic-bezier(.22, 1, .36, 1), flex-basis 300ms cubic-bezier(.22, 1, .36, 1),
    background-color 300ms ease, color 300ms ease, gap 300ms ease;
}
.student-shell .bottom-nav .nav-item :is(svg, i) {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke-width: 1.9;
}
.student-shell .bottom-nav .nav-item .nav-label {
  display: block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  text-overflow: clip;
  line-height: 1.2;
  transition: max-width 300ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease;
}
.student-shell .bottom-nav .nav-item.active {
  flex-grow: 2.3;
  flex-basis: 96px;
  flex-shrink: 0;
  gap: 6px;
  background: var(--nav-active);
  color: #3424c5;
}
.student-shell .bottom-nav .nav-item.active .nav-label { max-width: 70px; opacity: 1; }
.student-shell .bottom-nav .nav-item::before,
.student-shell .bottom-nav .nav-item::after { display: none; }
.student-shell .bottom-nav .nav-item:hover:not(.active) { color: #eeeaff; background: #5a4bf2; }
.student-shell .bottom-nav .nav-item.active:hover { background: #f2efff; color: #3424c5; }
.student-shell .bottom-nav .nav-add {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #8174fa;
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}
.student-shell .bottom-nav .nav-add svg { width: 25px; height: 25px; stroke-width: 1.5; }
.student-shell .bottom-nav .nav-add:hover { background: #9589ff; }
.student-shell .bottom-nav .nav-google { background: #fff; }
.student-shell .bottom-nav .nav-google:hover { background: #f2efff; }
.student-shell .bottom-nav .nav-add:active { transform: scale(.94); }
.student-shell .bottom-nav :is(.nav-item, .nav-add):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.student-shell .page-container { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
.student-shell .page-container .fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 389px) {
  .student-shell .bottom-nav > div { gap: 0; }
  .student-shell .bottom-nav .nav-add { flex-basis: 44px; width: 44px; height: 44px; }
}
@media (max-width: 359px) {
  .student-shell .bottom-nav > div { gap: 0; }
  .student-shell .bottom-nav .nav-item { flex-basis: 34px; min-width: 34px; padding-inline: 4px; }
  .student-shell .bottom-nav .nav-item { min-height: 44px; height: 44px; }
  .student-shell .bottom-nav .nav-item.active { flex-basis: 96px; }
}

/* ════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════ */
.page-header { background: var(--soft-bg); box-shadow: none; }
.header-inner { background: transparent; box-shadow: none; }
.brand-name { color: var(--soft-navy) !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.brand-sub { color: var(--soft-grey) !important; }
.signout-btn {
  background: var(--soft-primary) !important;
  color: #fff !important;              /* white text on purple */
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: var(--soft-shadow-primary);
  font-weight: 700;
}
.signout-btn:hover { background: #3D2EE0 !important; color: #fff !important; }
.clock-time { color: var(--soft-navy) !important; font-weight: 800; }

/* Mobile header: hide clock + logo, keep brand + sign out. Full header ≥768px. */
@media (max-width: 767px) {
  .student-shell .header-clock,
  .student-shell .qc-logo { display: none !important; }
}

/* ── Hero: grouped greeting left / weather right ──────────
   Mobile: stacked. md+: one row pushed to opposite ends.
   pb-8 keeps the weather chip clear of the divider below. */
.student-shell .home-hero {
  display: flex;
  flex-direction: column;        /* mobile: stack */
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 4px 0 32px !important; /* pb-8: beats student.css's 24px */
  border-bottom: 0 !important;    /* the .soft-divider draws the line now */
  border-radius: 0;
}
/* styles.css (max-width:720px) sets .home-hero-main { flex:1 1 0; overflow:hidden },
   which collapses this block to 0px tall in a column flex parent — the greeting and
   the student name were invisible on phones. */
.student-shell .home-hero .home-hero-main {
  flex: 0 0 auto !important;
  overflow: visible !important;
}
.home-hero-greeting {
  /* Greeting + name = ONE left-aligned block (flex-col items-start). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.home-hero-side {
  display: flex;
  justify-content: flex-end;     /* weather hugs the right edge when stacked */
  width: 100%;
}
@media (min-width: 768px) {
  /* Must out-specify the base `.student-shell .home-hero { flex-direction: column }`
     above, otherwise the hero stays stacked at every width (it did: the chip sat
     under the greeting, left-hugging, instead of greeting-left / weather-right). */
  .student-shell .home-hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .student-shell .home-hero-side { width: auto; justify-content: flex-end; }
}

/* Divider between hero and the grid, with mt-8 breathing room below. */
.soft-divider {
  height: 1px;
  background: rgba(26, 27, 65, 0.08);
  width: 100%;
  margin-bottom: 32px;           /* mt-8 for the grid content below the line */
}

/* ════════════════════════════════════════════════════════
   3-COLUMN SOFT GRID (mockup app-responsive.html layout)
   ════════════════════════════════════════════════════════ */
.student-shell .page-container.soft-home {
  /* Fixed bottom nav: keep the lowest cards readable on every screen.
     (double-class selector beats .student-shell .page-container's 36px) */
  padding-bottom: 120px;
}

/* Desktop: use the FULL width — the squished 1200px student.css cap and the
   .soft-home 1240px cap made the 3 columns narrow and text wrap badly.
   Applies from 768px: student.css turns .home-layout itself into a 2-col grid
   (`minmax(0,1.45fr) minmax(0,1fr)`) at ≥768, which dropped the .soft-grid into
   ONE narrow cell (~126px on a 768px tablet) and overflowed the calendar.
   Flattening only at ≥1024 left every tablet width broken. */
@media (min-width: 768px) {
  .student-shell .page-container.home-layout.soft-home {
    display: block;
    max-width: none !important;      /* w-full — span the screen */
    width: 100%;
    padding-inline: 32px;            /* px-8 equivalent */
    padding-bottom: 160px;           /* pb-40: clears the fixed nav on desktop */
  }
}
@media (min-width: 1536px) {
  .student-shell .page-container.home-layout.soft-home { padding-inline: 40px; }
}

.soft-grid {
  display: grid;
  grid-template-columns: 1fr;      /* mobile: single column stack */
  gap: 20px;
  align-items: start;
  width: 100%;                     /* grid fills the container */
}

/* Tablet: two columns */
@media (min-width: 768px) {
  .soft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* Desktop: three columns, equal fractions so nothing is narrow */
@media (min-width: 1024px) {
  .soft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .soft-col .home-today-grid { flex-wrap: nowrap; }
}
.soft-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Cards fill their column width — no hardcoded widths inside columns.
   Only the horizontal task-card scroller keeps fixed-width children. */
.soft-col > * { width: 100%; }

.soft-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}
.soft-col-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--soft-navy);
  letter-spacing: -0.02em;
  margin: 0;
}
.soft-col-sub { font-size: 13px; font-weight: 600; color: var(--soft-grey); margin: 0; }
.soft-col-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--soft-primary);
  text-decoration: none;
}
.soft-col-link:hover { text-decoration: underline; }

/* Left column: the line-up stacks vertically at every width */
.soft-col .home-today-grid {
  display: flex;
  flex-direction: column;
  overflow: visible;
  gap: 12px;
  padding: 4px 2px 2px;
}
.soft-col .home-today-card { min-height: 0; }

.soft-empty-tile {
  width: 100%;
  min-height: 132px;
  flex-shrink: 0;
  background: #fff;
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 20px;
  text-align: center;
  color: var(--soft-grey);
  font-weight: 600;
  font-size: 13px;
}
.soft-empty-tile svg { width: 30px; height: 30px; stroke-width: 1.6; }
.soft-empty-title { font-size: 14px; font-weight: 800; color: var(--soft-navy); }
.soft-empty-sub { font-size: 12px; font-weight: 600; color: var(--soft-grey); max-width: 320px; }

/* Semester progress (bottom-left) */
.soft-progress {
  background: #fff;
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  padding: 20px;
}
.soft-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.soft-progress-title { font-weight: 800; color: var(--soft-navy); font-size: 15px; margin: 0; }
.soft-progress-pct { font-weight: 800; color: var(--soft-primary); font-size: 14px; }
.soft-progress-track {
  height: 12px;
  background: var(--soft-bg);
  border-radius: 9999px;
  overflow: hidden;
}
.soft-progress-fill {
  height: 100%;
  background: var(--soft-primary);
  border-radius: 9999px;
  width: 0;
  transition: width .6s ease;
}
.soft-progress-sub { font-size: 13px; color: var(--soft-grey); margin: 10px 0 0; }

/* (weather chip location line lives with the chip rules above) */

/* Weekly Schedule Progress (compact day grid + bar) */
.soft-week-progress {
  background: #fff;
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  padding: 20px;
}
.soft-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.soft-week-day {
  border: 0;
  background: var(--soft-bg);
  border-radius: 14px;
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s ease;
}
.soft-week-day:hover { transform: translateY(-2px); }
.soft-week-day-label { font-size: 10px; font-weight: 800; color: var(--soft-grey); text-transform: uppercase; }
.soft-week-day-count { font-size: 15px; font-weight: 800; color: var(--soft-navy); }
.soft-week-day.is-today { background: var(--soft-primary-soft); }
.soft-week-day.is-today .soft-week-day-label,
.soft-week-day.is-today .soft-week-day-count { color: var(--soft-primary); }
.soft-week-day.is-done { opacity: .65; }
.soft-week-day.is-done .soft-week-day-count { position: relative; }
.soft-week-day.is-done .soft-week-day-count::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2335C4C8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Tasks & Notes list (right column) */
.soft-notes { display: flex; flex-direction: column; gap: 10px; }
.soft-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--soft-shadow);
}
.soft-note.pastel-mint     { background: var(--soft-mint); }
.soft-note.pastel-peach    { background: var(--soft-peach); }
.soft-note.pastel-lavender { background: var(--soft-lavender); }
.soft-note-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border-radius: 12px;
  flex-shrink: 0;
  color: var(--soft-navy);
}
.soft-note-icon svg { width: 17px; height: 17px; }
.soft-note-body { min-width: 0; flex: 1; }
.soft-note-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--soft-navy);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soft-note-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--soft-grey);
  margin: 3px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.soft-note-stamp { font-size: 11px; font-weight: 700; color: rgba(26,27,65,.45); margin: 5px 0 0; }

/* Classroom update rows (two-line: course + what's new) */
.soft-goal-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.soft-goal-course {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--soft-grey);
}

/* ── Calendar (middle column) ─────────────────────────── */
.soft-calendar {
  background: #fff;
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  padding: 18px;
}
.soft-cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 6px;
}
.soft-cal-head span {
  font-size: 11px;
  font-weight: 800;
  color: var(--soft-grey);
  padding: 6px 0;
}
.soft-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.soft-cal-cell {
  aspect-ratio: 1;
  max-height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft-navy);
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease;
}
.soft-cal-cell:hover { transform: scale(1.08); }
.soft-cal-cell.has-classes { background: var(--soft-primary-soft); color: var(--soft-primary); font-weight: 700; }
.soft-cal-cell.is-today {
  background: var(--soft-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--soft-shadow-primary);
}

/* ── Monthly Goals (middle column) ────────────────────── */
.soft-goals { display: flex; flex-direction: column; gap: 10px; }
.soft-goal {
  display: flex;
  align-items: flex-start;      /* icon top-left beside multi-line text */
  gap: 12px;
  border-radius: var(--soft-radius-sm);
  padding: 13px 16px;
  box-shadow: var(--soft-shadow);
  text-align: left;
  text-decoration: none;
}
.soft-goal--peach    { background: var(--soft-peach); }
.soft-goal--mint     { background: var(--soft-mint); }
.soft-goal--lavender { background: var(--soft-lavender); }
.soft-goal-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border-radius: 13px;
  flex-shrink: 0;
}
.soft-goal--peach .soft-goal-icon    { color: var(--soft-peach-icon); }
.soft-goal--mint .soft-goal-icon     { color: var(--soft-mint-icon); }
.soft-goal--lavender .soft-goal-icon { color: var(--soft-lav-icon); }
.soft-goal-icon svg { width: 18px; height: 18px; }
.soft-goal-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--soft-navy); margin: 0; }
.soft-goal-more { color: rgba(26,27,65,.35); display: grid; place-items: center; }
.soft-goal-more:hover { color: var(--soft-navy); }
.soft-goal-more svg { width: 18px; height: 18px; }

/* ── Timeline (right column) ──────────────────────────── */
.soft-timeline-wrap {
  background: #fff;
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  padding: 6px 14px 14px;
  max-height: 560px;
  overflow-y: auto;
}
.soft-timeline { position: relative; }
.soft-tl-canvas { position: relative; }
.soft-tl-hour {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 0;
}
.soft-tl-hour-label {
  width: 44px;
  font-size: 11px;
  font-weight: 800;
  color: var(--soft-grey);
  flex-shrink: 0;
  transform: translateY(-6px);
}
.soft-tl-hour-rule {
  flex: 1;
  border-top: 1px dashed rgba(26,27,65,.10);
}
.soft-tl-block {
  position: absolute;
  left: 56px; right: 4px;
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--soft-shadow);
}
.soft-tl-block.pastel-mint     { background: var(--soft-mint); }
.soft-tl-block.pastel-peach    { background: var(--soft-peach); }
.soft-tl-block.pastel-lavender { background: var(--soft-lavender); }
.soft-tl-block.is-featured {
  background: var(--soft-primary);
  box-shadow: var(--soft-shadow-primary);
}
.soft-tl-title { font-size: 13px; font-weight: 800; color: var(--soft-navy); margin: 0; line-height: 1.2; }
.soft-tl-meta { font-size: 11px; font-weight: 600; color: var(--soft-grey); margin: 3px 0 0; }
.soft-tl-block.is-featured .soft-tl-title { color: #fff; }
.soft-tl-block.is-featured .soft-tl-meta { color: rgba(255,255,255,.75); }

/* Current-time indicator */
.soft-tl-now {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}
.soft-tl-now-dot {
  width: 12px; height: 12px;
  background: var(--soft-primary);
  border-radius: 9999px;
  box-shadow: 0 0 0 4px rgba(74,58,255,.18);
  flex-shrink: 0;
  margin-left: 42px;
  transform: translateX(-50%);
}
.soft-tl-now-line {
  flex: 1;
  height: 3px;
  background: var(--soft-primary);
  border-radius: 9999px;
  opacity: .85;
}
.soft-tl-now-time {
  position: absolute;
  right: 0;
  top: -22px;
  font-size: 11px;
  font-weight: 800;
  color: var(--soft-primary);
  background: var(--soft-primary-soft);
  padding: 2px 8px;
  border-radius: 9999px;
}

.soft-timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 20px;
  color: var(--soft-grey);
  font-weight: 600;
  font-size: 13px;
}
.soft-timeline-empty svg { width: 30px; height: 30px; stroke-width: 1.5; }
.soft-timeline-empty a { color: var(--soft-primary); font-weight: 700; text-decoration: none; font-size: 13px; }

/* ════════════════════════════════════════════════════════
   WORKSPACE (Tasks & Notes) — soft-UI theme, matches Home
   ════════════════════════════════════════════════════════ */

/* Page spacing: clear the fixed bottom nav */
.student-shell .page-container.workspace-page { gap: 18px; padding-bottom: 140px; }

/* Heading row */
.workspace-intro { align-items: center; gap: 16px; }

/* Tasks/Notes view switch: purple pill selector like the schedule tabs */
.workspace-switch {
  border: 0 !important;
  border-radius: 9999px !important;
  background: #F4F7FC !important;
  padding: 5px !important;
  gap: 4px;
}
.workspace-switch-button {
  min-height: 36px !important;
  padding: 7px 18px !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 700;
  color: #8E92AD;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}
.workspace-switch-button.is-active {
  background: #4A3AFF !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -6px rgba(74, 58, 255, 0.5) !important;
}
.workspace-switch-button:not(.is-active):hover { background: #ECEBFF !important; color: #4A3AFF; }
.workspace-switch-button svg, .workspace-switch-button i { width: 15px; height: 15px; stroke-width: 2.2; }

/* Toolbar card: floating white */
.student-shell .workspace-page .portal-card {
  border-radius: 24px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  padding: 14px !important;
}

/* Search input: soft pill */
.task-search-wrap { border-radius: 9999px !important; }
.task-search-input {
  border: 0 !important;
  background: #F4F7FC;
  font-weight: 600;
  color: #1A1B41;
}
.task-search-input::placeholder { color: #8E92AD; }
.task-search-icon { color: #8E92AD; }
.task-search-clear { color: #8E92AD; }

/* Filter selects: soft pills */
.task-filter-select {
  border: 0 !important;
  border-radius: 9999px !important;
  background: #F4F7FC !important;
  font-weight: 700 !important;
  color: #1A1B41 !important;
  box-shadow: none !important;
}
.task-filter-select:focus { box-shadow: 0 0 0 3px rgba(74, 58, 255, 0.15) !important; }

/* ── Task cards: white floating with pastel priority accents ── */
.task-card {
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-left-width: 5px !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  background: #fff !important;
  padding: 16px 18px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07) !important;
  border-top-color: rgba(0, 0, 0, 0.03) !important;
  border-right-color: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.03) !important;
}
/* Priority accent: pastel left edge instead of harsh 3px line */
.task-card--priority-high   { border-left-color: #FFB59E !important; }
.task-card--priority-medium { border-left-color: #FFD8A8 !important; }
.task-card--priority-low    { border-left-color: #A8E6DE !important; }
.task-card.completed { opacity: 0.55; }

.task-card-title { color: #1A1B41 !important; font-weight: 800 !important; }
.task-card.completed .task-card-title { color: #8E92AD !important; }

/* Checkbox: round, purple when checked */
.task-check-btn {
  border-radius: 9999px !important;
  border: 2px solid #D6D9E8 !important;
  margin-top: 1px;
}
.task-check-btn:hover { border-color: #4A3AFF !important; color: #4A3AFF !important; }
.task-check-btn.checked {
  background: #4A3AFF !important;
  border-color: #4A3AFF !important;
  box-shadow: 0 6px 14px -4px rgba(74, 58, 255, 0.5);
}

/* Meta chips inside cards */
.task-card .task-meta, .note-card .task-meta { color: #8E92AD !important; font-weight: 600; }
.task-card .task-meta i, .note-card .task-meta i { color: #8E92AD !important; }

/* Priority pill (if rendered as text chip) */
.task-card [class*="priority-pill"], .task-card .chip {
  border-radius: 9999px !important;
  border: 0 !important;
  font-weight: 700;
}

/* ── Note cards: pastel (mint/peach/lavender rotation) ── */
.workspace-list .note-card {
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  background: #E0F7F6 !important;
  padding: 2px !important;
  overflow: hidden;
  transition: transform .15s ease;
}
.workspace-list .note-card:hover { transform: translateY(-2px); }
.workspace-list .note-card:nth-child(3n + 1) { background: #FFE8D6 !important; }
.workspace-list .note-card:nth-child(3n + 2) { background: #E0F7F6 !important; }
.workspace-list .note-card:nth-child(3n) { background: #EDEAFF !important; }
.note-card-inner { padding: 15px 17px 13px !important; background: transparent !important; }
.note-card-title { color: #1A1B41 !important; font-weight: 800 !important; }
.note-card-body { color: #4B4F6B !important; }
.note-card-footer .task-meta { color: rgba(26, 27, 65, 0.5) !important; }

/* ── Empty states: soft tile ── */
.empty-state {
  border: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  color: #8E92AD !important;
}
.empty-icon { color: #4A3AFF !important; }
.empty-text { color: #5C607E !important; font-weight: 600; }

/* ── FAB (add task/note): purple circle like the nav Classroom FAB ── */
.fab {
  background: #4A3AFF !important;
  color: #fff !important;
  border: 4px solid #fff !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 25px -5px rgba(74, 58, 255, 0.55) !important;
  width: 56px !important;
  height: 56px !important;
  display: grid;
  place-items: center;
  bottom: 96px !important;
}
.fab svg, .fab i { width: 24px !important; height: 24px !important; stroke-width: 2.4; }

/* ── Modals: soft rounded ── */
.modal-card {
  border-radius: 28px !important;
  box-shadow: 0 25px 60px rgba(26, 27, 65, 0.18) !important;
}

/* ════════════════════════════════════════════════════════
   GOOGLE INTEGRATION — soft-UI theme, matches Home
   ════════════════════════════════════════════════════════ */

/* Page spacing: clear the fixed bottom nav */
.student-shell .page-container.google-page { gap: 18px; padding-bottom: 140px; }

/* Intro icon chip: lavender square with the link icon */
.google-page-intro-icon {
  background: #EDEAFF !important;
  color: #7B6CF6 !important;
  border-radius: 18px !important;
  border: 0 !important;
  width: 48px; height: 48px;
  display: grid; place-items: center;
}
.google-page-intro-icon svg, .google-page-intro-icon i { width: 22px; height: 22px; }
.google-section-kicker, .workspace-kicker {
  color: #4A3AFF !important;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Cards: floating white ── */
.student-shell .google-page .portal-card {
  border-radius: 28px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  padding: 22px !important;
}

/* Status badge: pill */
.google-status-badge {
  border-radius: 9999px !important;
  border: 0 !important;
  font-weight: 700;
  padding: 5px 12px !important;
  font-size: 11px !important;
}
.google-status-badge.is-connected { background: #E0F7F6; color: #0F766E; }
.google-status-badge.is-error { background: #FFE8D6; color: #C2410C; }
.google-status-badge.is-loading { background: #EDEAFF; color: #7B6CF6; }

/* ── Account card: white with soft inner sections ── */
.google-account-card {
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  background: #F8F9FE !important;
  padding: 18px !important;
}
.google-account-card.is-disconnected { background: #F8F9FE !important; }
.google-card-band {
  background: #EDEAFF !important;
  border: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  color: #1A1B41;
}
.google-band-mark .brand-icon { width: 26px; height: 26px; }
.google-band-copy span { color: #7B6CF6 !important; }
.google-band-copy strong { color: #1A1B41 !important; }
.google-card-code {
  background: rgba(255,255,255,.7) !important;
  color: #7B6CF6 !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-weight: 700;
}
.google-card-body { padding: 16px 16px 14px !important; }

/* Card lead + seal */
.google-card-seal {
  background: #fff !important;
  border: 0 !important;
  border-radius: 15px !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.google-card-seal svg, .google-card-seal i { color: #4A3AFF !important; }
.google-card-eyebrow { color: #8E92AD !important; }
.google-card-lead h3, .google-account-identity h3 {
  color: #1A1B41 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
.google-card-lead p:last-child, .google-account-identity p:last-child { color: #5C607E !important; }

/* Permission rows: pastel rows like the Home goal cards */
.google-permissions-list {
  border-top: 0 !important;
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 16px !important;
}
@media (max-width: 640px) {
  .google-permissions-list { grid-template-columns: 1fr !important; }
}
.google-permission-row {
  background: #E0F7F6;
  border-radius: 16px;
  padding: 12px 14px !important;
  gap: 10px !important;
}
.google-permission-row:nth-child(2) { background: #FFE8D6; }
.google-permission-row svg, .google-permission-row i { color: #0F766E !important; }
.google-permission-row:nth-child(2) svg, .google-permission-row:nth-child(2) i { color: #FF9F6E !important; }
.google-permission-row strong { color: #1A1B41 !important; }
.google-permission-row span { color: #5C607E !important; }

/* Connect button: purple rounded with glow */
.google-primary-button {
  background: #4A3AFF !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px -6px rgba(74, 58, 255, 0.5);
  font-weight: 700;
  padding: 12px 18px !important;
  color: #fff !important;
}
.google-primary-button:hover { background: #3D2EE0 !important; }
.google-primary-button.is-disabled {
  background: #EDEAFF !important;
  color: #8E92AD !important;
  box-shadow: none;
}
.google-secondary-button {
  border: 0 !important;
  border-radius: 16px !important;
  background: #F4F7FC !important;
  color: #1A1B41 !important;
  font-weight: 700;
}
.google-danger-button {
  border: 0 !important;
  border-radius: 16px !important;
  background: #FFE8D6 !important;
  color: #C2410C !important;
  font-weight: 700;
}

/* Secure note + inline error */
.google-secure-note { color: #8E92AD !important; }
.google-inline-error {
  border-left: 4px solid #FF9F6E !important;
  background: #FFE8D6 !important;
  color: #C2410C !important;
  border-radius: 12px;
  border-top: 0; border-right: 0; border-bottom: 0;
}

/* ── Updates section ── */
.google-updates-summary { gap: 10px; }
.google-update-count {
  background: #EDEAFF;
  color: #4A3AFF !important;
  border-radius: 9999px;
  padding: 4px 10px;
  font-weight: 800;
}
.google-feed-view-toggle {
  border: 0 !important;
  border-radius: 9999px !important;
  background: #F4F7FC !important;
  padding: 4px !important;
  gap: 4px;
}
.google-feed-view-toggle button {
  border: 0 !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: #8E92AD;
  font-weight: 700;
  box-shadow: none !important;
}
.google-feed-view-toggle button.is-active {
  background: #4A3AFF !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -6px rgba(74, 58, 255, 0.5);
}

/* Filter row: soft pills */
.google-update-filters { gap: 8px; }
.google-filter-search {
  border: 0 !important;
  border-radius: 9999px !important;
  background: #F4F7FC !important;
}
.google-filter-search input { color: #1A1B41; font-weight: 600; }
.google-filter-search input::placeholder { color: #8E92AD; }
.google-filter-search svg, .google-filter-search i { color: #8E92AD; }
.google-update-filters select {
  border: 0 !important;
  border-radius: 9999px !important;
  background: #F4F7FC !important;
  font-weight: 700;
  color: #1A1B41;
  box-shadow: none !important;
}
.google-filter-new { color: #5C607E; font-weight: 700; }
.google-filter-new input { accent-color: #4A3AFF; }
.google-filter-reset {
  border: 0 !important;
  border-radius: 9999px !important;
  background: #EDEAFF !important;
  color: #7B6CF6 !important;
}

/* Update cards: pastel rows (peach=new, white=seen) like Home Classroom rows */
.google-updates-list { gap: 10px !important; }
.google-update-card {
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) !important;
  background: #fff !important;
  padding: 14px 16px !important;
  transition: transform .15s ease;
}
.google-update-card:hover { transform: translateY(-1px); }
.google-update-card.is-new { background: #FFE8D6 !important; }
.google-update-source-tag {
  border: 0 !important;
  border-radius: 9999px !important;
  background: rgba(255,255,255,.75) !important;
  color: #1A1B41 !important;
  font-weight: 700;
  padding: 3px 10px !important;
}
.google-update-card.is-new .google-update-source-tag { background: rgba(255,255,255,.8); }
.google-update-title { color: #1A1B41 !important; font-weight: 700; }
.google-update-meta { color: rgba(26,27,65,.5) !important; }
.google-update-meta-item--due { color: #C2410C !important; }

/* Offline notice */
.google-offline-notice {
  background: #FFE8D6 !important;
  color: #C2410C !important;
  border-radius: 12px;
  border: 0 !important;
}

/* Privacy card: lavender */
.google-privacy {
  background: #EDEAFF !important;
  border: 0 !important;
}
.google-privacy h3 { color: #1A1B41 !important; font-weight: 800; }
.google-privacy p { color: #4B4F6B !important; }
.google-privacy a { color: #4A3AFF !important; font-weight: 700; }

/* Empty state (inherits workspace overlay) */
.google-empty-state {
  border: 0 !important;
  border-radius: 20px !important;
  background: #F8F9FE !important;
}

/* ════════════════════════════════════════════════════════
   SETTINGS — soft-UI theme, matches Home
   ════════════════════════════════════════════════════════ */

/* Page spacing: clear the fixed bottom nav */
.student-shell .page-container.settings-page { gap: 18px; padding-bottom: 140px; }

/* ── Settings rows: pastel cards rotating like the Home goals ── */
.student-shell .settings-page .settings-item {
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  background: #E0F7F6 !important;
  padding: 16px 18px !important;
  gap: 14px !important;
  text-align: left;
  text-decoration: none;
  width: 100%;
  transition: transform .15s ease;
}
.student-shell .settings-page .settings-item:hover { transform: translateY(-2px); }
/* Pastel rotation: mint → peach → lavender down the list.
   The rows are mixed element types (a/label/button/div), so nth-of-type
   restarts per tag — target the parent's children by position instead. */
.student-shell .settings-page section > .settings-item:nth-child(3n + 1) { background: #E0F7F6 !important; }
.student-shell .settings-page section > .settings-item:nth-child(3n + 2) { background: #FFE8D6 !important; }
.student-shell .settings-page section > .settings-item:nth-child(3n)     { background: #EDEAFF !important; }

.settings-label-title { color: #1A1B41 !important; font-weight: 800 !important; }
.settings-label-sub { color: #5C607E !important; }

/* Row trailing icons: navy, sized to the theme */
.student-shell .settings-page .settings-item > i,
.student-shell .settings-page .settings-item > svg {
  width: 20px; height: 20px;
  stroke-width: 2;
  color: #1A1B41;
}
/* Google row keeps its green identity but softened */
.student-shell .settings-page .settings-item-google > i,
.student-shell .settings-page .settings-item-google > svg { color: #0F9D58; }

/* ── Toggle: purple switch ── */
.student-shell .settings-page input[type="checkbox"] {
  accent-color: #4A3AFF;
  width: 20px; height: 20px;
  flex-shrink: 0;
}

/* PWA chip: soft pill */
.student-shell .settings-page .chip {
  border: 0 !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: #1A1B41 !important;
  font-weight: 700;
  padding: 5px 12px !important;
}

/* ── Reset button: white soft secondary ── */
.student-shell .settings-page .action-button.secondary {
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #1A1B41 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  font-weight: 700;
  padding: 12px 18px !important;
}
.student-shell .settings-page .action-button.secondary:hover {
  background: #FFE8D6 !important;
  color: #C2410C !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* Heading */
.student-shell .settings-page .page-title {
  color: #1A1B41 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.student-shell .settings-page .caption { color: #8E92AD !important; }

/* ════════════════════════════════════════════════════════
   BUILDINGS / SCHEDULE / TODAY — soft-UI theme, matches Home
   (Today reuses the home-today-card templates, already themed;
    these rules cover its page shell + the other two pages.)
   ════════════════════════════════════════════════════════ */

/* Page spacing: clear the fixed bottom nav on all three pages */
.student-shell .page-container { padding-bottom: 140px; }

/* ── Buttons: purple rounded ── */
.student-shell .student-button {
  background: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #1A1B41 !important;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  padding: 10px 16px !important;
}
.student-shell .student-button:hover { transform: translateY(-1px); color: #4A3AFF !important; }
.student-shell .student-button--primary {
  background: #4A3AFF !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -6px rgba(74, 58, 255, 0.5);
}
.student-shell .student-button--primary:hover { background: #3D2EE0 !important; color: #fff !important; }

/* ── BUILDINGS: floating white cards with pastel chips ── */
.building-card {
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: 26px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.building-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.03) !important;
}
.building-card-image { background: #F4F7FC !important; }
.building-card-body { padding: 18px 20px !important; gap: 6px; }
.building-card-body h3, .building-card-body .building-name { color: #1A1B41 !important; font-weight: 800 !important; }
.building-card-body p, .building-card-body .building-meta { color: #8E92AD !important; font-weight: 600; }

/* Building modal content inherits .modal-card soft rounding */

/* ── SCHEDULE: day pills + soft table ── */
.schedule-controls { gap: 12px; }
.schedule-days { gap: 8px !important; }
.schedule-days button {
  border: 0 !important;
  border-radius: 9999px !important;
  background: #fff !important;
  color: #8E92AD !important;
  font-weight: 700;
  padding: 8px 14px !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
  transition: background .15s ease, color .15s ease;
}
.schedule-days button:hover { color: #4A3AFF !important; background: #ECEBFF !important; }
.schedule-days button[aria-pressed="true"] {
  background: #4A3AFF !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -6px rgba(74, 58, 255, 0.5);
}
.schedule-result { color: #8E92AD !important; font-weight: 600; }

/* Table: floating white card with soft rows */
.table-wrap, .student-shell .table-wrap {
  border-radius: 26px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  background: #fff !important;
  overflow: hidden;
}
.student-shell .schedule-table th {
  color: #8E92AD !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(26, 27, 65, 0.08) !important;
}
.student-shell .schedule-table td { border-bottom: 1px solid rgba(26, 27, 65, 0.06) !important; }
.student-shell .schedule-table tr:last-child td { border-bottom: 0 !important; }
.student-shell .schedule-table tr:hover td { background: #F8F9FE !important; }

/* Status pills in the table */
.student-shell .schedule-table .status-pill,
.student-shell .schedule-table .chip {
  border: 0 !important;
  border-radius: 9999px !important;
  font-weight: 700;
}

/* Schedule table skeleton cells: pills */
.skel-schedule-table .skel-cell,
.skel-schedule-table .skel-cell-sm {
  border-radius: 9999px !important;
}

/* ── TODAY page shell (cards already themed via home-today-card) ── */
.student-shell .page-container .page-title {
  color: #1A1B41 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.student-shell .caption { color: #8E92AD !important; }

/* Today page loading skeleton: pastel card strip like Home */
#today-cards .loading-cards { display: flex; gap: 14px; overflow-x: auto; }
#today-cards .loading-cards .loading-card {
  flex-shrink: 0;
  width: 200px;
  min-height: 160px;
}

/* Buildings skeleton: pastel cards in the grid */
#building-grid .loading-cards { gap: 14px; }
#building-grid .loading-cards .loading-card { min-height: 240px; }

/* ── TODAY page: .class-card template soft-UI ── */
.student-shell .class-card {
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-left: 5px solid #A8E6DE !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  background: #fff !important;
  transition: transform .15s ease;
}
.student-shell .class-card:hover { transform: translateY(-2px); }
/* Status accent edges: pastels */
.student-shell .class-card.current-card { border-left-color: #4A3AFF !important; }
.student-shell .class-card.next-card { border-left-color: #FFD8A8 !important; }
.student-shell .class-card.finished-card { border-left-color: #E8EBF5 !important; opacity: .8; }
.student-shell .class-card-subject { color: #1A1B41 !important; font-weight: 800 !important; }
.student-shell .class-card-time { color: #4A3AFF !important; font-weight: 700 !important; }

/* Status pills on Today */
.student-shell .status-pill { border: 0 !important; border-radius: 9999px !important; font-weight: 700; }
.student-shell .status-current { background: #4A3AFF !important; color: #fff !important; }
.student-shell .status-next { background: #FFE8D6 !important; color: #C2410C !important; }
.student-shell .status-finished { background: #EDEAFF !important; color: #7B6CF6 !important; }

/* Building code badge: purple pill on the image */
.building-code-badge {
  background: #4A3AFF !important;
  color: #fff !important;
  border-radius: 9999px !important;
  font-weight: 800;
  border: 0 !important;
}

/* ════════════════════════════════════════════════════════
   FORM ELEMENTS — soft-UI inputs, selects, textareas
   (Add Task / Add Note / schedule CRUD / all modals)
   ════════════════════════════════════════════════════════ */
.task-form input[type="text"],
.task-form textarea,
.task-form select,
.task-form input[type="date"],
.note-form input[type="text"],
.note-form textarea,
.note-form select,
.note-form input[type="date"],
.crud-form input[type="text"],
.crud-form select,
.crud-form input[type="time"],
.crud-form input[type="date"],
.modal-card input[type="text"],
.modal-card textarea,
.modal-card select,
.modal-card input[type="date"],
.modal-card input[type="time"] {
  background: #F8FAFC !important;              /* slate-50 */
  border: 1px solid #E2E8F0 !important;        /* slate-200 */
  border-radius: 12px !important;              /* rounded-xl */
  padding: 12px 16px !important;               /* px-4 py-3 */
  font-size: 13px !important;
  font-weight: 600;
  color: #1A1B41 !important;
  font-family: inherit;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
/* placeholders */
.task-form input::placeholder, .task-form textarea::placeholder,
.note-form input::placeholder, .note-form textarea::placeholder,
.crud-form input::placeholder, .modal-card input::placeholder,
.modal-card textarea::placeholder {
  color: #94A3B8;
  font-weight: 500;
}
/* focus: indigo ring (focus:border-indigo-500 focus:ring-2 focus:ring-indigo-100) */
.task-form input:focus, .task-form textarea:focus, .task-form select:focus,
.task-form input[type="date"]:focus,
.note-form input:focus, .note-form textarea:focus, .note-form select:focus,
.note-form input[type="date"]:focus,
.crud-form input:focus, .crud-form select:focus,
.crud-form input[type="time"]:focus, .crud-form input[type="date"]:focus,
.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus,
.modal-card input[type="date"]:focus, .modal-card input[type="time"]:focus {
  border-color: #4A3AFF !important;
  box-shadow: 0 0 0 3px rgba(74, 58, 255, 0.12) !important;
  background: #fff !important;
  outline: none !important;
}
/* select dropdown arrow (appearance:none removes the native one) */
.task-form select, .note-form select, .crud-form select, .modal-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E92AD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}
/* date/time inputs: same soft treatment, calendar icon stays native */
.task-form input[type="date"], .crud-form input[type="date"],
.modal-card input[type="date"] { color-scheme: light; }

/* form labels */
.form-label {
  color: #8E92AD !important;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* submit buttons inside modals */
.modal-card .action-button {
  background: #4A3AFF !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 10px 22px -6px rgba(74, 58, 255, 0.5);
  padding: 12px 18px !important;
}

/* Day modal (weekly table): classes whose time never made it into the database
   say so instead of rendering a bare "—" and a 0-hours stat. */
.student-shell .day-modal-notime {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--soft-grey);
  white-space: nowrap;
}
.student-shell .day-modal-note {
  margin: 12px 2px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--soft-grey);
}

/* ════════════════════════════════════════════════════════
   DAY MODAL (Home calendar → "Monday's classes")
   Speaks the same card language as the Today Schedule line-up:
   pastel stat tiles, floating white rows with a time rail, navy
   titles and a pastel course pill. Overrides styles.css's blue
   civic modal via double-class selectors (soft-ui loads last).
   ════════════════════════════════════════════════════════ */
.student-shell #day-modal .modal-drag-handle { background: rgba(26, 27, 65, 0.12); }
.student-shell #day-modal .modal-inner { padding: 18px 20px 24px; }
.student-shell #day-modal .modal-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--soft-navy);
}
.student-shell #day-modal .chip-blue {
  background: var(--soft-primary-soft);
  color: var(--soft-primary);
  border: 0;
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.student-shell #day-modal .modal-close-btn {
  background: var(--soft-bg);
  border: 0;
  border-radius: 9999px;
  color: var(--soft-navy);
}
.student-shell #day-modal .modal-close-btn:hover { background: var(--soft-primary-soft); color: var(--soft-primary); }

/* Stats → pastel tiles like the dashboard cards */
.student-shell #day-modal .day-modal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.student-shell #day-modal .day-modal-stat {
  background: var(--soft-mint);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--soft-shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.student-shell #day-modal .day-modal-stat:nth-child(2n) { background: var(--soft-peach); }
.student-shell #day-modal .day-modal-stat-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft-grey);
}
.student-shell #day-modal .day-modal-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--soft-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Rows → floating white cards with the same left time rail as the line-up */
.student-shell #day-modal .day-modal-rows { display: grid; gap: 12px; }
.student-shell #day-modal .day-modal-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--soft-shadow);
  padding: 14px 16px;
}
.student-shell #day-modal .day-modal-time {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 12px;
  border-right: 1px solid rgba(26, 27, 65, 0.10);
}
.student-shell #day-modal .day-modal-start {
  font-size: 15px;
  font-weight: 800;
  color: var(--soft-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.student-shell #day-modal .day-modal-end {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--soft-grey);
  font-variant-numeric: tabular-nums;
}
/* the arrow is redundant once the rail stacks start over end */
.student-shell #day-modal .day-modal-to { display: none; }
.student-shell #day-modal .day-modal-main { min-width: 0; }
.student-shell #day-modal .day-modal-subject {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--soft-navy);
  overflow-wrap: anywhere;
}
.student-shell #day-modal .day-modal-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--soft-grey);
  overflow-wrap: anywhere;
}
.student-shell #day-modal .day-modal-meta svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke-width: 2.2;
  color: var(--soft-primary);
}
.student-shell #day-modal .day-modal-course {
  background: var(--soft-lavender);
  color: var(--soft-lav-icon);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.student-shell #day-modal .day-modal-state {
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--soft-shadow);
  padding: 22px 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft-grey);
}
/* Phones: keep the rail, move the course pill under the subject. */
@media (max-width: 767px) {
  .student-shell #day-modal .day-modal-row { grid-template-columns: 76px minmax(0, 1fr); }
  .student-shell #day-modal .day-modal-course { grid-column: 2; justify-self: start; }
  .student-shell #day-modal .day-modal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Workspace "Tasks & Notes": the Home dashboard's chip language ──
   Priority + subject + deadline read as pastel pills like every other card on
   the dashboard, the priority accent comes from the JS palette via
   --task-accent, and dates are pre-formatted (no raw ISO strings). */
.student-shell .task-card {
  border-left-color: var(--task-accent, rgba(26, 27, 65, 0.08)) !important;
}
.student-shell .task-card-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.student-shell .priority-badge {
  border-radius: 9999px !important;
  border: 1px solid transparent;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  padding: 4px 10px !important;
}
.student-shell .subject-chip {
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}
.student-shell .task-card .task-meta,
.student-shell .note-card .task-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #6C7089 !important;
}
.student-shell .note-card-footer { flex-wrap: wrap; gap: 8px; }
/* Notes keep the exact card language of the Home "Tasks & Notes" rows. */
.student-shell .workspace-list .note-card { border-radius: 20px !important; }
.student-shell .workspace-list .note-card .task-card-actions .icon-btn {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 9999px;
}

/* Sign out moved out of the header and into Settings. It stays a white card with
   a blush icon so it reads as the closing action rather than another preference.
   The selector mirrors `section > .settings-item:nth-child(...)` so it also
   out-specifies the pastel rotation above. */
.student-shell .settings-page section > .settings-item.settings-item--signout {
  background: #fff !important;
  cursor: pointer;
  font: inherit;
}
.student-shell .settings-page section > .settings-item.settings-item--signout .settings-label-title { color: #1A1B41 !important; }
.student-shell .settings-page section > .settings-item.settings-item--signout > i,
.student-shell .settings-page section > .settings-item.settings-item--signout > svg { color: #DE5F8C !important; }

/* ════════════════════════════════════════════════════════
   FULL SCHEDULE (schedule.html) — page header, week table and
   the class editor modal, all in the Home dashboard's language:
   white floating cards, pastel pills, purple actions.
   ════════════════════════════════════════════════════════ */

.student-shell .schedule-page { gap: 18px; padding-bottom: 150px; }

/* Page heading + actions */
.student-shell .schedule-page .student-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 0;
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
  padding: 18px 20px;
  margin-bottom: 0;
}
.student-shell .schedule-page .student-heading .page-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--soft-navy);
  margin: 0;
}
.student-shell .schedule-page .student-heading p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft-grey);
}
.student-shell .schedule-page .student-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Week table: floating card, soft header, comfortable rows */
.student-shell .schedule-page .table-wrap {
  border-radius: var(--soft-radius) !important;
  box-shadow: var(--soft-shadow) !important;
  border: 0 !important;
  background: #fff !important;
}
.student-shell .schedule-page .schedule-table { border-collapse: separate; border-spacing: 0; }
.student-shell .schedule-page .schedule-table th {
  padding: 10px 16px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft-grey);
  background: transparent;
  border-bottom: 1px solid rgba(26, 27, 65, 0.07) !important;
}
.student-shell .schedule-page .schedule-table td {
  padding: 16px;
  vertical-align: middle;
  font-size: 14px;
  color: var(--soft-navy);
  border-bottom: 1px solid rgba(26, 27, 65, 0.05) !important;
}
.student-shell .schedule-page .schedule-table tr:last-child td { border-bottom: 0 !important; }
.student-shell .schedule-page .schedule-table tr { transition: background .15s ease; }
.student-shell .schedule-page .schedule-table tbody tr:hover td { background: #F8F9FE !important; }

/* Today's row reads as the active one without shouting */
.student-shell .schedule-page .schedule-table tr.today-row td { background: #FBFAFF; }
.student-shell .schedule-page .schedule-table tr.today-row td:first-child { box-shadow: inset 3px 0 0 var(--soft-primary); }

/* Time cell: purple day pill over the time range */
.student-shell .schedule-page .day-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--soft-lavender);
  color: #6A58E8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.student-shell .schedule-page .time-range {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--soft-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Subject / code / location */
.student-shell .schedule-page .subject-cell { font-weight: 700; color: var(--soft-navy); }
.student-shell .schedule-page .code-cell {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--soft-bg);
  color: #4A3AFF;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.student-shell .schedule-page .location-cell { color: #5C608A; font-weight: 600; font-size: 13px; }
.student-shell .schedule-page .units-chip {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--soft-sky);
  color: #2F6BC4;
  font-size: 11.5px;
  font-weight: 800;
}

/* Status pill instead of a dot + loose label */
.student-shell .schedule-page .schedule-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 9999px;
  background: var(--soft-bg);
  color: var(--soft-grey);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.student-shell .schedule-page .schedule-status .status-dot { width: 7px; height: 7px; }
.student-shell .schedule-page tr.current-row .schedule-status { background: var(--soft-mint); color: #1F9C9C; }
.student-shell .schedule-page tr.upcoming-row .schedule-status { background: var(--soft-lavender); color: #6A58E8; }
.student-shell .schedule-page tr.finished-row .schedule-status { background: var(--soft-bg); color: var(--soft-grey); }
.student-shell .schedule-page tr.finished-row .subject-cell,
.student-shell .schedule-page tr.finished-row .time-range { color: #9A9DB8; }

/* Edit affordance: soft circular icon button */
.student-shell .schedule-page .icon-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  border-radius: 9999px !important;
  border: 0 !important;
  background: var(--soft-bg) !important;
  color: #6C7095 !important;
  display: inline-grid;
  place-items: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.student-shell .schedule-page .icon-btn:hover {
  background: var(--soft-primary-soft) !important;
  color: var(--soft-primary) !important;
  transform: translateY(-1px);
}
.student-shell .schedule-page .icon-btn svg { width: 16px; height: 16px; }

/* Break rows as a soft divider tile */
.student-shell .schedule-page .break-row td { padding: 10px 16px; border-bottom: 0 !important; }
.student-shell .schedule-page .break-free-label {
  display: inline-flex;
  padding: 3px 10px;
  margin-right: 6px;
  border-radius: 9999px;
  background: var(--soft-mint);
  color: #1F9C9C;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.student-shell .schedule-page .break-duration { color: var(--soft-grey); font-weight: 700; font-size: 12px; }

/* Empty / error state */
.student-shell .schedule-page .schedule-state { text-align: center; padding: 38px 20px !important; }
.student-shell .schedule-page .schedule-state strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--soft-navy);
}
.student-shell .schedule-page .schedule-state p { margin: 6px 0 0; color: var(--soft-grey); font-weight: 600; font-size: 13px; }
.student-shell .schedule-page .schedule-result { color: var(--soft-grey); font-weight: 700; font-size: 12.5px; }

/* ── Class editor modal (#crud-modal) ── */
.student-shell #crud-modal .modal-drag-handle { background: rgba(26, 27, 65, 0.12); }
.student-shell #crud-modal .modal-inner { padding: 18px 20px 24px; }
.student-shell #crud-modal .modal-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--soft-navy);
}
.student-shell #crud-modal .chip-blue {
  background: var(--soft-primary-soft);
  color: var(--soft-primary);
  border: 0;
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.student-shell #crud-modal .modal-close-btn {
  background: var(--soft-bg);
  border: 0;
  border-radius: 9999px;
  color: var(--soft-navy);
}
.student-shell #crud-modal .modal-close-btn:hover { background: var(--soft-primary-soft); color: var(--soft-primary); }

.student-shell #crud-modal .crud-form { display: grid; gap: 14px; margin-top: 16px; }
.student-shell #crud-modal .crud-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.student-shell #crud-modal .crud-field { display: grid; gap: 6px; min-width: 0; }
.student-shell #crud-modal .crud-field label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft-grey);
}
.student-shell #crud-modal .crud-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 27, 65, 0.06);
}
.student-shell #crud-modal .crud-actions-right { display: flex; gap: 8px; margin-left: auto; }
.student-shell #crud-modal .crud-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--soft-blush);
  color: #A63A63;
  font-size: 13px;
  font-weight: 700;
}
.student-shell #crud-modal [aria-invalid="true"] {
  border-color: #E8879F !important;
  box-shadow: 0 0 0 4px rgba(222, 95, 140, 0.16) !important;
}
.student-shell #crud-modal .btn-danger {
  background: #fff !important;
  color: #C2416B !important;
  border: 1px solid rgba(222, 95, 140, 0.35) !important;
  border-radius: 9999px !important;
  padding: 10px 16px !important;
  font-weight: 700;
}
.student-shell #crud-modal .btn-danger:hover { background: var(--soft-blush) !important; }

/* Phones: single column, actions stack full width */
@media (max-width: 767px) {
  .student-shell #crud-modal .crud-row { grid-template-columns: minmax(0, 1fr); }
  .student-shell #crud-modal .crud-actions { flex-direction: column-reverse; align-items: stretch; }
  .student-shell #crud-modal .crud-actions-right { margin-left: 0; }
  .student-shell #crud-modal .crud-actions .btn { width: 100%; justify-content: center; }
  .student-shell .schedule-page .student-heading { padding: 16px; }
  .student-shell .schedule-page .student-heading .page-title { font-size: 20px; }
  .student-shell .schedule-page .student-actions { width: 100%; }
  .student-shell .schedule-page .student-actions .student-button { flex: 1 1 auto; justify-content: center; }
}

/* ════════════════════════════════════════════════════════
   FULL SCHEDULE — the week as cards up to 1023px, the table beyond.
   The old split showed the stacked layout only up to 720px (student.css) while
   the theme's own overrides ran to 767, so 721-1023 rendered a six-column table
   with a 98px-wide location column, and below that the time text was clipped by
   a nowrap rule inside a 66px grid cell. One breakpoint now: cards to 1023,
   table from 1024 — the same line the nav dock uses.
   ════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Cards float on the page background instead of inside a second white card */
  .student-shell .schedule-page .table-wrap {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .student-shell .schedule-page .schedule-table,
  .student-shell .schedule-page .schedule-table tbody { display: block; min-width: 0; }
  .student-shell .schedule-page .schedule-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .student-shell .schedule-page .schedule-table caption { display: none; }
  .student-shell .schedule-page .schedule-table tbody { display: grid; gap: 12px; }

  .student-shell .schedule-page .schedule-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--soft-radius-sm);
    background: #fff;
    box-shadow: var(--soft-shadow);
  }
  .student-shell .schedule-page .schedule-table tr:hover td { background: transparent !important; }
  .student-shell .schedule-page .schedule-table tr.today-row td { background: transparent !important; }
  .student-shell .schedule-page .schedule-table tr.today-row td:first-child { box-shadow: none !important; }
  .student-shell .schedule-page .schedule-table tr.today-row { box-shadow: var(--soft-shadow), inset 3px 0 0 var(--soft-primary); }

  /* Cells carry no padding of their own — the card owns the rhythm */
  .student-shell .schedule-page .schedule-table td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Row 2: day pill + time on the left, status pill and edit on the right */
  .student-shell .schedule-page .schedule-table .time-cell {
    grid-column: 1; grid-row: 2;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .student-shell .schedule-page .day-abbr { min-width: 30px; padding: 3px 8px; font-size: 10.5px; }
  .student-shell .schedule-page .time-range {
    display: inline-block; margin-top: 0;
    font-size: 12.5px; font-weight: 700; white-space: normal;
  }
  .student-shell .schedule-page td[data-label="Status"] {
    grid-column: 2; grid-row: 2;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  }
  .student-shell .schedule-page .schedule-status { font-size: 11px; padding: 5px 10px; }
  .student-shell .schedule-page .schedule-table .icon-btn { width: 40px !important; height: 40px !important; min-width: 40px; }
  .student-shell .schedule-page .schedule-table .icon-btn svg { width: 17px; height: 17px; }

  /* Row 1: the class name leads, both columns wide */
  .student-shell .schedule-page .schedule-table .subject-cell {
    grid-column: 1 / -1; grid-row: 1;
    font-size: 15px; font-weight: 800; line-height: 1.4;
  }
  .student-shell .schedule-page .schedule-table .location-cell {
    grid-column: 1 / -1; grid-row: 3;
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; line-height: 1.45;
  }
  .student-shell .schedule-page .schedule-table td[data-label="Code"] { grid-column: 1; grid-row: 4; }
  .student-shell .schedule-page .schedule-table td[data-label="Units"] {
    grid-column: 2; grid-row: 4; text-align: right; justify-self: end;
  }
  .student-shell .schedule-page .units-chip::before { content: "Units "; font-size: 10.5px; font-weight: 700; opacity: .75; }

  /* Free periods and the empty state read as soft tiles, not table rows */
  .student-shell .schedule-page .schedule-table tr.break-row {
    display: block; padding: 10px 16px; border: 1px dashed rgba(26, 27, 65, 0.14);
    box-shadow: none; background: rgba(255, 255, 255, 0.6);
  }
  .student-shell .schedule-page .schedule-table tr.break-row td { display: block; text-align: center; }
  .student-shell .schedule-page .schedule-table tr.schedule-empty-row {
    display: block; padding: 30px 20px; text-align: center;
  }
  .student-shell .schedule-page .schedule-table tr.schedule-empty-row td { display: block; }
  .student-shell .schedule-page .schedule-state { padding: 0 !important; }
}


/* Home: "Full schedule" access — a link in the Today Schedule and Calendar column
   headers, plus one at the foot of the day modal, so the full week is always one
   tap away from the dashboard. */
.student-shell .soft-col-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.student-shell .soft-col-link {
  align-self: center;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--soft-primary-soft);
  color: var(--soft-primary) !important;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.student-shell .soft-col-link:hover { background: #E0DCFF; transform: translateY(-1px); }

.student-shell #day-modal .day-modal-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 13px 18px;
  border-radius: 18px;
  background: var(--soft-primary);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--soft-shadow-primary);
}
.student-shell #day-modal .day-modal-full svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════
   TASK & NOTE MODALS + CARDS (workspace.html)
   Same shell as the day modal and the class editor: navy title,
   uppercase field labels, soft rounded inputs and one full-width
   purple action. The cards keep the dashboard's chip language.
   ════════════════════════════════════════════════════════ */
.student-shell #task-modal .modal-drag-handle,
.student-shell #note-modal .modal-drag-handle { background: rgba(26, 27, 65, 0.12); }
.student-shell #task-modal .modal-inner,
.student-shell #note-modal .modal-inner { padding: 18px 20px 24px; }
.student-shell #task-modal .modal-title,
.student-shell #note-modal .modal-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--soft-navy);
}
.student-shell #task-modal .chip-blue,
.student-shell #note-modal .chip-blue {
  background: var(--soft-primary-soft);
  color: var(--soft-primary);
  border: 0;
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.student-shell #task-modal .modal-close-btn,
.student-shell #note-modal .modal-close-btn {
  background: var(--soft-bg);
  border: 0;
  border-radius: 9999px;
  color: var(--soft-navy);
}
.student-shell #task-modal .modal-close-btn:hover,
.student-shell #note-modal .modal-close-btn:hover { background: var(--soft-primary-soft); color: var(--soft-primary); }

/* Field rhythm: title, description, then a two-up row that stacks on phones */
.student-shell #task-modal .task-form,
.student-shell #note-modal .task-form { display: grid; gap: 14px; margin-top: 16px; }
.student-shell #task-modal .form-field,
.student-shell #note-modal .form-field { display: grid; gap: 6px; min-width: 0; }
.student-shell #task-modal .form-row,
.student-shell #note-modal .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.student-shell #task-modal .form-field--half,
.student-shell #note-modal .form-field--half { width: auto; }
.student-shell #task-modal .form-label,
.student-shell #note-modal .form-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft-grey);
}
.student-shell #task-modal .task-form textarea,
.student-shell #note-modal .task-form textarea { resize: vertical; min-height: 84px; line-height: 1.6; }

/* One full-width purple action, matching the day modal's CTA */
.student-shell #task-modal .action-button,
.student-shell #note-modal .action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 13px 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--soft-primary) !important;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: var(--soft-shadow-primary);
}
.student-shell #task-modal .action-button:hover,
.student-shell #note-modal .action-button:hover { background: #3D2EE0 !important; }
.student-shell #task-modal .action-button svg,
.student-shell #note-modal .action-button svg { width: 16px; height: 16px; }

/* Cards: one radius, one padding rhythm, chips on a single baseline */
.student-shell .workspace-list .task-card,
.student-shell .workspace-list .note-card {
  border-radius: var(--soft-radius-sm) !important;
  box-shadow: var(--soft-shadow);
}
.student-shell .workspace-list .task-card { padding: 16px 18px !important; }
.student-shell .workspace-list .note-card .note-card-inner { padding: 16px 18px !important; }
.student-shell .task-card-title,
.student-shell .note-card-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.student-shell .task-card-desc,
.student-shell .note-card-body {
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.55;
  color: #5C608A !important;
}
.student-shell .task-card-footer,
.student-shell .note-card-footer {
  margin-top: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.student-shell .workspace-list .task-card .task-card-actions .icon-btn,
.student-shell .workspace-list .note-card .task-card-actions .icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 9999px !important;
  background: rgba(26, 27, 65, 0.04) !important;
  border: 0 !important;
  color: #6C7095 !important;
}
.student-shell .workspace-list .task-card .task-card-actions .icon-btn:hover,
.student-shell .workspace-list .note-card .task-card-actions .icon-btn:hover {
  background: var(--soft-primary-soft) !important;
  color: var(--soft-primary) !important;
}
.student-shell .workspace-list .task-card .task-card-actions .icon-btn--danger:hover {
  background: var(--soft-blush) !important;
  color: #C2416B !important;
}
.student-shell .workspace-list .task-card .task-card-actions .icon-btn svg,
.student-shell .workspace-list .note-card .task-card-actions .icon-btn svg { width: 15px; height: 15px; }

@media (max-width: 767px) {
  .student-shell #task-modal .form-row,
  .student-shell #note-modal .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* The save error can carry a fix (delete the duplicate that blocks the edit) */
.student-shell #crud-modal .crud-error-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #A63A63;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(166, 58, 99, 0.14);
}
.student-shell #crud-modal .crud-error-action:hover { background: #FFF0F4; }

/* ════════════════════════════════════════════════════════
   NARROW-SCREEN CONTAINMENT
   `.section-stack` is a grid with no explicit columns, so its single implicit
   track was sized by the widest item's content: on the Google page at 320px the
   track became 328px inside a 288px content box, pushing cards 24px past the
   right edge (clipped by body overflow-x). One explicit shrinking track plus
   min-width:0 on the children fixes that class of overflow everywhere.
   ════════════════════════════════════════════════════════ */
.student-shell .page-container.section-stack {
  grid-template-columns: minmax(0, 1fr);
}
.student-shell .page-container.section-stack > * { min-width: 0; max-width: 100%; }
.student-shell .page-container.section-stack .portal-card,
.student-shell .page-container.section-stack .home-status-card { overflow-wrap: anywhere; }

/* Session-expired / retry banner: its buttons were 27px tall (below the 40px
   touch-target floor) on every page. */
.student-shell .load-notice { flex-wrap: wrap; }
.student-shell .load-notice .btn,
.student-shell .load-notice .btn-secondary,
.student-shell .load-notice button {
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 9999px;
  font-weight: 700;
}

/* Dashboard palette and layout. Scope tokens to its content so the shared
   navigation and other student screens retain their established styles. */
body[data-page="home"] { background: #F4F5FB; }
#auth-dashboard { background: #F4F5FB; --soft-font: 'Public Sans', -apple-system, 'Segoe UI', sans-serif; }
#auth-dashboard .soft-home {
  --soft-bg: #F4F5FB;
  --soft-primary: #4A3AFF;
  --soft-navy: #1B1E39;
  --soft-grey: #646A83;
  --soft-muted: #646A83;
  --soft-peach: #FFE8D6;
  --soft-peach-icon: #FF9F6E;
  --soft-mint: #DCF4F7;
  --soft-mint-icon: #4FC8DD;
  --soft-lavender: #EAE6FF;
  --soft-lav-icon: #8B7CF6;
  --soft-radius: 26px;
  --soft-radius-sm: 22px;
  --soft-shadow: 0 12px 32px -12px rgba(27,30,57,0.12);
  --soft-shadow-primary: 0 12px 24px -6px rgba(74,58,255,0.35);
  --soft-font: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  display: block;
  min-width: 0;
  font-family: var(--soft-font);
}
#auth-dashboard .home-hero { padding: 8px 0 20px !important; gap: 18px; }
#auth-dashboard .home-hero-main::after { content: none; }
#auth-dashboard #home-greeting {
  margin: 0;
  color: var(--soft-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
#auth-dashboard .home-summary { margin: 8px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; color: var(--soft-navy); max-width: 560px; text-wrap: balance; }
#auth-dashboard .home-summary strong { color: var(--soft-primary); font-weight: inherit; }
#auth-dashboard .home-hero-side { align-items: center; gap: 14px; }
#auth-dashboard .home-weather-chip { width: auto; flex: 1; justify-content: flex-start; padding: 14px 18px; border-radius: 22px; gap: 14px; transition: background-color 180ms ease; }
#auth-dashboard .home-weather-chip:hover { background: #3C2CDF; }
#auth-dashboard .home-weather-chip:active { background: #3324CA; }
#auth-dashboard .home-weather-chip svg { width: 28px; height: 28px; flex-shrink: 0; }
#auth-dashboard .home-weather-chip > span { text-align: left; min-width: 0; }
#auth-dashboard .home-weather-chip-temp { font-size: 21px; }
#auth-dashboard .home-weather-chip-cond { font-size: 12px; font-weight: 500; opacity: 1; overflow-wrap: anywhere; }
#auth-dashboard .home-weather-chip-loc { color: #F0EEFF; opacity: 1; font-size: 11px; font-weight: 400; }
#auth-dashboard .home-avatar {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: 0 0 48px;
  border: 3px solid #fff; border-radius: 50%;
  background: #4A3AFF; color: #fff; transition: background-color 180ms ease;
  box-shadow: 0 10px 30px -8px rgba(27,30,57,0.10); text-decoration: none;
  overflow: hidden; font-size: 15px; font-weight: 800;
}
#auth-dashboard .home-avatar img { width: 100%; height: 100%; object-fit: cover; }
#auth-dashboard .home-avatar svg { width: 22px; height: 22px; }
#auth-dashboard .home-avatar:hover { background: #3C2CDF; }
#app-header .qc-pride-avatar {
  display: grid; place-items: center; flex: 0 0 48px;
  width: 48px; height: 48px; padding: 3px; border: 0;
  border-radius: 50%; overflow: hidden;
  background: #c5d8ff;
  color: #fff; text-decoration: none; font-size: 15px; font-weight: 800;
  box-shadow: 0 5px 16px rgba(27,30,57,.12);
}
:root { --google-avatar-ring: conic-gradient(#4285f4 0deg 90deg, #ea4335 90deg 180deg, #fbbc05 180deg 270deg, #34a853 270deg 360deg); }
#app-header .qc-pride-avatar.google-verified-avatar { background: var(--google-avatar-ring); }
#app-header .qc-pride-avatar .avatar-face {
  display: grid; place-items: center; width: 100%; height: 100%;
  border: 2px solid #fff; border-radius: 50%; overflow: hidden;
  background: #4435EE;
}
#app-header .qc-pride-avatar img { width: 100%; height: 100%; object-fit: cover; }
#app-header .qc-pride-avatar svg { width: 22px; height: 22px; }
#app-header .qc-pride-avatar:hover .avatar-face { background: #3628CB; }
#app-header .qc-pride-avatar:focus-visible { outline: 3px solid #1B1E39; outline-offset: 4px; }
#auth-dashboard :is(.home-avatar, .home-weather-chip):focus-visible { outline: 3px solid #1B1E39; outline-offset: 3px; }
#auth-dashboard .soft-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
#auth-dashboard .home-today-card { flex-direction: column !important; padding: 20px !important; gap: 14px !important; }
#auth-dashboard .home-today-card .home-today-rail {
  flex-direction: row !important; align-items: center !important;
  width: auto !important; padding: 0 !important; border: 0 !important; gap: 8px !important;
}
#auth-dashboard .home-today-card .home-today-rail-time { font-size: 13px !important; }
#auth-dashboard .home-today-card .home-today-rail-end { font-size: 13px !important; color: var(--soft-muted) !important; }
#auth-dashboard .home-today-card .home-today-rail-rule { width: 12px; height: 1px; margin: 0; }
#auth-dashboard .home-today-card .home-today-body { padding: 0 !important; }
#auth-dashboard .home-today-card .home-today-head { flex-wrap: wrap !important; }
#auth-dashboard .home-today-card .home-today-course, #auth-dashboard .home-today-done-row .home-today-course {
  background: rgba(255,255,255,.6); padding: 5px 10px; border-radius: 9999px;
  color: var(--soft-navy) !important; white-space: normal; overflow-wrap: anywhere;
  font-size: 11px; font-weight: 800; overflow: visible; text-align: left;
}
#auth-dashboard .home-today-card .home-today-subject { font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; }
#auth-dashboard .home-today-card--feature { padding: 24px !important; }
#auth-dashboard .home-today-card .home-today-professor {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
  color: var(--soft-muted); font-size: 12px; font-weight: 500; overflow-wrap: anywhere;
}
#auth-dashboard .home-today-professor svg { width: 16px; height: 16px; flex-shrink: 0; }
#auth-dashboard .home-today-card :is(.home-today-building, .home-today-live) { color: var(--soft-muted) !important; overflow-wrap: anywhere; }
#auth-dashboard .home-today-card .home-today-duration { color: var(--soft-navy); }
#auth-dashboard .home-today-card.pastel-peach { --tile-accent: var(--soft-peach-icon); }
#auth-dashboard .home-today-card.pastel-mint { --tile-accent: var(--soft-mint-icon); }
#auth-dashboard .home-today-card.pastel-lavender { --tile-accent: var(--soft-lav-icon); }
#auth-dashboard .home-today-card:is(.current-tile, .home-today-card--feature) { --tile-accent: #fff; }
#auth-dashboard .home-today-card:is(.current-tile, .home-today-card--feature) :is(.home-today-course, .home-today-rail-end, .home-today-building, .home-today-live, .home-today-professor) { color: #fff !important; }
#auth-dashboard .home-today-card:is(.current-tile, .home-today-card--feature) :is(.home-today-course, .home-today-duration) { background: rgba(0,0,0,.14); }
#auth-dashboard .home-today-done-main { flex-wrap: wrap; gap: 6px; }
#auth-dashboard .home-today-done-meta { flex-wrap: wrap; }
#auth-dashboard .home-today-done-details { display: flex; align-items: center; gap: 5px; flex-basis: 100%; color: var(--soft-muted); font-size: 11px; overflow-wrap: anywhere; }
#auth-dashboard .home-today-done-details svg { width: 14px; height: 14px; flex-shrink: 0; }
#auth-dashboard .home-today-done-time { color: var(--soft-muted); }
#auth-dashboard .home-today-done-check { width: 36px; height: 36px; border-radius: 12px; }
#auth-dashboard .home-break-tile { border-radius: 22px !important; flex-wrap: wrap; }
#auth-dashboard .home-break-rail { color: var(--soft-muted) !important; }
#auth-dashboard .home-break-label { color: #6557BC; }
#auth-dashboard :is(.soft-note, .soft-goal) { border-radius: 20px; }
#auth-dashboard :is(.soft-note-icon, .soft-goal-icon) { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.6); }
#auth-dashboard :is(.soft-note-stamp, .soft-note-meta, .soft-goal-course, .soft-col-sub, .soft-progress-sub, .soft-week-day-label) { color: var(--soft-muted); }
@media (min-width: 768px) {
  #auth-dashboard .home-summary { font-size: 32px; }
  #auth-dashboard .home-hero-side { width: auto; flex-shrink: 0; }
  #auth-dashboard .home-weather-chip { flex: 0 1 auto; }
}
@media (min-width: 1024px) {
  #auth-dashboard .soft-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}

/* The reference's white surfaces, compact dates and connected color blocks. */
#auth-dashboard .home-hero { align-items: flex-start; padding-bottom: 28px !important; }
#auth-dashboard .home-schedule-panel {
  background: #fff; padding: 20px 16px; border-radius: 28px;
  box-shadow: var(--soft-shadow); gap: 16px;
}
#auth-dashboard .home-support { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0; }
#auth-dashboard .home-support-panel { width: 100%; background: #fff; border-radius: 28px; padding: 22px 18px; box-shadow: var(--soft-shadow); }
#auth-dashboard .home-support-panel:has(> [hidden]:only-child) { display: none; }
#auth-dashboard .soft-col-head { align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 0; }
#auth-dashboard .soft-col-title { font-size: 18px; font-weight: 700; }
#auth-dashboard .soft-col-link { display: inline-flex; align-items: center; min-height: 44px; background: transparent; color: var(--soft-primary); padding: 8px 0; font-size: 12px; font-weight: 600; box-shadow: none; white-space: normal; text-underline-offset: 4px; }
#auth-dashboard .soft-col-link:hover { background: transparent; color: #3324CA !important; text-decoration: underline; transform: none; }
#auth-dashboard .home-day-picker { min-width: 0; }
#auth-dashboard .home-day-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
#auth-dashboard .home-day-picker-head p { margin: 0; color: var(--soft-navy); font-size: 12px; font-weight: 700; }
#auth-dashboard #calendar-label { display: block; margin-top: 4px; color: var(--soft-muted); font-size: 12px; font-weight: 400; }
#auth-dashboard .home-picker-hint { font-size: 11px; color: var(--soft-muted); }
#auth-dashboard .home-date-strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 3px 10px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
#auth-dashboard .home-date-tab {
  appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 0 44px; min-height: 68px; gap: 6px; padding: 9px 4px;
  border: 0; border-radius: 16px; color: var(--soft-muted); background: transparent;
  font-family: inherit; cursor: pointer; scroll-snap-align: center;
  transition: background-color 180ms ease, color 180ms ease;
}
#auth-dashboard .home-date-day { font-size: 11px; font-weight: 600; }
#auth-dashboard .home-date-number { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
#auth-dashboard .home-date-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
#auth-dashboard .home-date-dot.has-classes { background: #AAA2D9; }
#auth-dashboard .home-date-tab:hover { background: #F5F3FF; }
#auth-dashboard .home-date-tab:active { background: #EAE6FF; }
#auth-dashboard .home-date-tab.is-today { color: var(--soft-primary); }
#auth-dashboard .home-date-tab.is-selected { background: var(--soft-primary); color: #fff; box-shadow: 0 6px 12px -4px rgba(74,58,255,.3); }
#auth-dashboard .home-date-tab.is-selected .home-date-dot { background: #fff; }
#auth-dashboard .home-date-tab:focus-visible { outline: 2px solid var(--soft-navy); outline-offset: 1px; }
#auth-dashboard #today-grid { position: relative; padding: 2px 0 2px 22px !important; gap: 14px !important; }
#auth-dashboard #today-grid:has(> article)::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 18px; width: 1px; background: #DED9ED; }
#auth-dashboard #today-grid > article { position: relative; overflow: visible; }
#auth-dashboard #today-grid > article::before {
  content: ''; position: absolute; width: 8px; height: 8px; left: -21px; top: 27px;
  border-radius: 50%; border: 2px solid #D65880; background: #fff; box-shadow: 0 0 0 4px #fff;
}
#auth-dashboard #today-grid > article.current-tile::before { border-color: var(--soft-primary); background: var(--soft-primary); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--soft-primary); }
#auth-dashboard .home-today-card { padding: 18px !important; border-radius: 22px !important; gap: 10px !important; box-shadow: none !important; }
#auth-dashboard .home-today-card .home-today-rail { gap: 6px !important; }
#auth-dashboard .home-today-card .home-today-rail-time,
#auth-dashboard .home-today-card .home-today-rail-end { font-size: 12px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
#auth-dashboard .home-today-card .home-today-head { margin-bottom: 8px !important; }
#auth-dashboard .home-today-card .home-today-course { margin-left: 0 !important; }
#auth-dashboard .home-today-card .home-today-subject { font-size: 17px !important; }
#auth-dashboard .home-today-card .home-today-status { background: transparent !important; padding: 0 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; }
#auth-dashboard .home-today-card :is(.home-today-building, .home-today-professor) { font-size: 13px !important; line-height: 1.5; font-weight: 400; }
#auth-dashboard .home-today-card .home-today-foot { padding-top: 12px !important; }
#auth-dashboard .home-today-card .home-today-live { font-weight: 500; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
#auth-dashboard .home-today-card.home-today-card--feature { box-shadow: 0 10px 22px -9px rgba(74,58,255,.38) !important; }
#auth-dashboard .home-today-card.next-tile:not(.home-today-card--feature) { background: #CB3762 !important; color: #fff; --tile-accent: #fff; }
#auth-dashboard .home-today-card.next-tile:not(.home-today-card--feature) :is(.home-today-status, .home-today-subject, .home-today-rail-time, .home-today-rail-end, .home-today-course, .home-today-professor, .home-today-building, .home-today-live) { color: #fff !important; }
#auth-dashboard .home-today-card.next-tile:not(.home-today-card--feature) .home-today-course { background: rgba(0,0,0,.14); }
#auth-dashboard .home-today-card.next-tile:not(.home-today-card--feature) .home-today-duration { color: #fff; background: rgba(0,0,0,.14); }
#auth-dashboard .home-today-done-row { padding: 16px; border-radius: 24px; box-shadow: none; opacity: 1; }
#auth-dashboard .home-break-tile { padding: 14px !important; background: #FAF8FF !important; box-shadow: none !important; }
#auth-dashboard .home-today-now { padding: 0; }
#auth-dashboard .home-today-now-label { font-size: 11px; }
#auth-dashboard :is(.soft-goal, .soft-note) { box-shadow: none; }
#auth-dashboard .soft-week-progress { padding: 0; background: transparent; box-shadow: none; }
#auth-dashboard .soft-progress-track { margin-top: 16px; }
#auth-dashboard .home-bus-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 4px 12px; margin: 0; padding: 16px; border-radius: 20px; box-shadow: none; }
#auth-dashboard .home-bus-card .home-bus-icon { grid-row: 1 / 3; width: 40px; height: 40px; color: #6557BC; }
#auth-dashboard .home-bus-card .home-bus-title { display: block; white-space: normal; font-size: 14px; font-weight: 700; }
#auth-dashboard .home-bus-card .home-bus-sub { display: block; color: #655C8F; font-size: 12px; line-height: 1.6; margin-top: 4px; }
#auth-dashboard .home-bus-card .home-bus-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
#auth-dashboard .home-bus-link:hover { text-decoration: underline; }
#auth-dashboard :is(.soft-empty-tile, .soft-timeline-empty) { min-height: 124px; padding: 24px 16px; border-radius: 20px; background: #F7F6FC; box-shadow: none; color: var(--soft-muted); }
#auth-dashboard .soft-empty-sub { color: var(--soft-muted); font-weight: 400; line-height: 1.6; }
#auth-dashboard .soft-empty-tile a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
#auth-dashboard .soft-empty-tile a:hover { text-decoration: underline; }
#auth-dashboard .soft-goal-title { font-weight: 600; line-height: 1.5; }
#auth-dashboard .soft-goal-more { color: var(--soft-muted); }
#auth-dashboard .soft-timeline-wrap { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
#auth-dashboard .home-today-done-duration { color: var(--soft-navy); }
#auth-dashboard .home-today-done-details { font-size: 12px; line-height: 1.5; }
#auth-dashboard :is(.clock-day, .clock-date) { font-size: 11px !important; }
#auth-dashboard .soft-timeline-empty a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
#auth-dashboard .soft-timeline-empty a:hover { text-decoration: underline; }
#auth-dashboard ::selection { background: #EAE6FF; color: #1B1E39; }
#auth-dashboard :is(a, button, [tabindex]) { scroll-margin-block: 100px 140px; }
#auth-dashboard .page-container.home-layout.soft-home { max-width: 1440px !important; margin-inline: auto; }
#auth-dashboard .header-inner { width: 100%; max-width: 1440px; padding-inline: 16px; }
@media (prefers-reduced-motion: reduce) {
  #auth-dashboard :is(.home-date-tab, .home-weather-chip, .home-avatar) { transition: none; }
}
@media (min-width: 600px) {
  #auth-dashboard .home-schedule-panel { padding: 28px; }
  #auth-dashboard .home-support-panel { padding: 24px; }
  #auth-dashboard .home-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #auth-dashboard .home-support-panel:last-child { grid-column: 1 / -1; }
  #auth-dashboard .home-today-card { padding: 22px !important; }
  #auth-dashboard .home-today-card .home-today-subject { font-size: 19px !important; }
  #auth-dashboard .home-date-tab { flex-basis: 52px; }
}
@media (min-width: 1024px) {
  #auth-dashboard .home-support { display: flex; align-items: stretch; }
  #auth-dashboard .home-summary { max-width: 650px; }
}
@media (min-width: 768px) {
  #auth-dashboard .home-hero { align-items: center; }
  #auth-dashboard .header-inner { padding-inline: 32px; }
}
@media (min-width: 1536px) {
  #auth-dashboard .header-inner { padding-inline: 40px; }
}

/* Monthly overview shares the selected date with the schedule timeline. */
#auth-dashboard .home-month-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#auth-dashboard .home-month-heading h2 { margin: 0; }
#auth-dashboard .home-month-today { padding: 8px 12px; min-height: 44px; border: 0; border-radius: 12px; background: #F0EDFF; color: #4934D1; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#auth-dashboard .home-month-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 12px; }
#auth-dashboard #home-month-label { margin: 0; color: var(--soft-navy); font-size: 15px; font-weight: 600; }
#auth-dashboard .home-month-nav { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #646A83; cursor: pointer; }
#auth-dashboard .home-month-nav svg { width: 20px; height: 20px; }
#auth-dashboard .home-month-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
#auth-dashboard .home-month-weekdays { margin-bottom: 4px; color: #646A83; text-align: center; font-size: 11px; font-weight: 600; }
#auth-dashboard .home-month-weekdays span { padding-block: 8px; }
#auth-dashboard .home-month-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 44px; padding: 5px 0; background: transparent; color: var(--soft-navy); border: 0; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
#auth-dashboard .home-month-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
#auth-dashboard .home-month-dot.has-classes { background: #AAA2D9; }
#auth-dashboard .home-month-date.is-today { color: #4934D1; font-weight: 700; background: #F0EDFF; }
#auth-dashboard .home-month-date:hover, #auth-dashboard .home-month-nav:hover, #auth-dashboard .home-month-today:hover { background: #EAE6FF; }
#auth-dashboard .home-month-date.is-selected { background: var(--soft-primary); color: #fff; }
#auth-dashboard .home-month-date.is-selected .home-month-dot.has-classes { background: #fff; }
#auth-dashboard .home-month-panel :is(button):focus-visible { outline: 2px solid var(--soft-navy); outline-offset: 1px; }
#auth-dashboard .home-month-hint { margin: 12px 0 0; color: #646A83; font-size: 12px; line-height: 1.5; }
.crud-field-hint { margin: 6px 0 0; color: #646A83; font-size: 12px; line-height: 1.5; }
.crud-optional { color: #646A83; font-weight: 400; }
.schedule-professor { display: block; margin-top: 5px; color: #646A83; font-size: 12px; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; }

/* Reference dialogs: white body, tinted top bar, outlined status icon. */
.modal-backdrop { align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(26, 27, 65, .38); }
.modal-backdrop.open { animation: feedback-fade-in 220ms ease-out; }
.modal-backdrop.is-closing { display: flex; pointer-events: none; animation: feedback-fade-out 180ms ease-in forwards; }
.modal-backdrop .modal-card.feedback-editor { width: min(640px, 100%); max-width: 640px; max-height: calc(100dvh - 48px); border: 0; background: #fff; animation: feedback-in 220ms cubic-bezier(.16, 1, .3, 1); box-shadow: 0 24px 64px -16px rgba(26, 27, 65, .3) !important; }
.modal-backdrop.is-closing .modal-card { animation: feedback-out 180ms ease-in forwards; }
.modal-card.feedback-editor > .feedback-header { position: sticky; top: 0; z-index: 2; }
.student-shell .modal-card.feedback-editor .modal-inner { padding: 0 24px 24px; }
.modal-card.feedback-editor .feedback-intro { padding: 28px 0 24px; }
.modal-card.feedback-editor .feedback-title { color: var(--feedback-text); }
.student-shell #crud-modal .feedback-editor .modal-inner { padding: 0 24px 24px; }
.student-shell #crud-modal .feedback-editor .crud-form { margin-top: 0; }
.student-shell #crud-modal .feedback-editor .crud-field label, .feedback-editor .form-label { color: #53566F !important; }
.feedback-editor input::placeholder, .feedback-editor textarea::placeholder { color: #646A83 !important; }
.feedback-editor .feedback-actions { margin: 8px -24px -24px; padding: 18px 24px; }
.student-shell :is(#task-modal, #note-modal) .feedback-editor .feedback-actions .action-button { width: auto; min-height: 44px; margin: 0; border-radius: 12px !important; box-shadow: 0 4px 10px -4px rgba(26, 27, 65, .3); }
.student-shell #crud-modal .feedback-editor .crud-actions { flex-direction: row; align-items: center; justify-content: flex-end; margin-top: 8px; padding-top: 18px; }
.student-shell #crud-modal .feedback-editor .crud-actions .btn { width: auto; min-height: 44px; border-radius: 12px !important; }
.student-shell #crud-modal .feedback-editor .crud-actions-right { margin-left: auto; }
.student-shell #crud-modal .feedback-editor .btn-danger { color: var(--feedback-error-text) !important; border-color: #E7B7BF !important; }
.student-shell #crud-modal .feedback-editor .crud-error { background: var(--feedback-error-soft); color: var(--feedback-error-text); }
@media (max-width: 480px) {
  .student-shell .modal-card.feedback-editor .modal-inner, .student-shell #crud-modal .feedback-editor .modal-inner { padding: 0 20px 20px; }
  .modal-card.feedback-editor .feedback-intro { padding: 24px 0 20px; }
  .feedback-editor .feedback-actions { margin: 8px -20px -20px; padding: 16px 20px; }
  .student-shell #crud-modal .feedback-editor .crud-actions-right { width: auto; flex-wrap: wrap; justify-content: flex-end; }
  .student-shell #crud-modal .feedback-editor .crud-actions-right .btn { flex: none; }
}