/* Shared header/toolbar for all three track dashboards (igcse/as/a) — was
   triplicated (near byte-for-byte) across dashboard-{igcse,as,a}.css; the
   only rule that differed between them was a decorative border-radius on
   the old "Parent View" badge, which this redesign's own .parent-view-btn
   replaces outright. One file now, loaded by track.php before the
   per-track dashboard-{track}.css. */

.dashboard-header {
  --dh-navy: #1b254b;
  --dh-navy-soft: #4a5578;
  --dh-teal: #00bdb6;
  --dh-border: #d8ebf6;
  /* Status-badge colours copied verbatim from report.css's --status-* custom
     properties (the parent report's badge) so the two never visually drift
     apart — this file can't reference report.css's variables directly since
     the two stylesheets never load on the same page. */
  --dh-status-danger: #c0392b;
  --dh-status-behind: #a35400;
  --dh-status-on-target: #0b7d63;
  --dh-status-ahead: #1d6fa8;

  position: relative;
  margin: 15px;
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* ---- top row: 2 groups only -- left (Home, heading, Parent view) and
   right (auth block) -- so it stays predictable as it wraps at narrow
   widths instead of several independent items reflowing separately. ---- */

.dashboard-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.header-left-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.header-left-cluster h1 {
  margin: 0;
  font-size: 1.4em;
  color: var(--dh-navy);
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f3faff;
  border: 1px solid var(--dh-border);
  border-radius: 999px;
  padding: 6px;
}

.nav-pill-btn {
  border: none;
  background: var(--dh-teal);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.nav-pill-btn:hover {
  filter: brightness(1.08);
}

/* Guest Mode: only ever rendered in the pill next to Home when logged out
   (server default + JS-hidden on login, see track-dashboard.js) — never
   alongside the authenticated user block. */
.nav-pill-guest {
  background: transparent;
  border: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--dh-teal);
  padding: 0 14px 0 6px;
  white-space: nowrap;
}

.auth-area {
  display: flex;
  align-items: center;
}

.auth-guest {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.auth-guest-fields {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-guest input {
  padding: 10px 14px;
  min-width: 140px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-guest input:focus {
  outline: none;
  border-color: var(--dh-teal);
  box-shadow: 0 0 0 3px rgba(0, 189, 182, 0.15);
  background: #fff;
}

.auth-guest input::placeholder {
  color: #94a3b8;
}

.auth-btn {
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.auth-btn:hover {
  transform: translateY(-1px);
}

.auth-btn-login {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.auth-btn-logout {
  background: transparent;
  border: 1.5px solid #dc2626;
  color: #dc2626;
}

.auth-btn-logout:hover {
  background: #dc2626;
  color: #fff;
}

/* Logged-in state: avatar + name + divider + Logout. Gated as one block
   (JS toggles #auth-guest / #auth-user together) so Login and Logout can
   never both be visible at once. */
.auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* .auth-guest/.auth-user set display:flex above, which (same origin) beats
   the UA stylesheet's [hidden] { display: none } on specificity alone --
   without this, toggling the `hidden` property from JS wouldn't actually
   hide either block, defeating the one-block-at-a-time auth gating. */
.auth-guest[hidden],
.auth-user[hidden] {
  display: none;
}

.user-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: #e0f5f3;
  color: var(--dh-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar svg {
  width: 20px;
  height: 20px;
}

.user-name {
  font-weight: 700;
  font-size: 1.05em;
  color: var(--dh-navy);
  white-space: nowrap;
}

.auth-divider {
  width: 1px;
  height: 24px;
  background: var(--dh-border);
}

/* ---- Parent view (now in the readiness card's header row, next to its
   label -- sized down again since it's an even smaller supporting element
   there than it was next to the page heading) ---- */

.parent-view-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--dh-teal);
  color: var(--dh-teal);
  font-weight: 600;
  font-size: 0.58rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.parent-view-btn svg {
  width: 11px;
  height: 11px;
  flex: none;
}

.parent-view-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.parent-view-btn:not([aria-disabled="true"]):hover {
  background: var(--dh-teal);
  color: #fff;
}

.parent-view-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -6px);
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(27, 37, 75, 0.95);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.parent-view-btn:hover .parent-view-tooltip,
.parent-view-btn:focus-within .parent-view-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---- 3-card row: readiness (half) / note (quarter) / grade (quarter) ---- */

/* Grid, not flex: with a fixed gap, three flex-basis percentages that sum to
   100% overflow the row by the gap width and force the last card onto its
   own line -- grid track sizing accounts for gaps itself, so 8fr/7fr/5fr
   (40%/35%/25%) fits on one row exactly as intended. */
.dashboard-cards {
  display: grid;
  grid-template-columns: 8fr 7fr 5fr;
  gap: 16px;
  align-items: stretch;
}

.dashboard-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 63, 99, 0.08);
  padding: 18px 20px;
  min-width: 0;
  border: 1px solid #a9c8d9;
  border-left: 4px solid var(--dh-teal);
}

.dashboard-card h2 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--dh-navy);
}

/* Readiness card: label left, Parent view button right, same line. */
.card-readiness-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.card-readiness-header h2 {
  margin: 0;
}

.readiness-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.readiness-percent {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dh-navy);
}

/* Same four statuses/colours as the parent report's progress_status badge
   (report.css .status-badge / .status-badge--*) — kept in sync by eye since
   the stylesheets can't share variables across pages. */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
}

.status-badge[hidden] {
  display: none;
}

.status-badge--significantly_behind {
  background: var(--dh-status-danger);
}

.status-badge--behind {
  background: var(--dh-status-behind);
}

.status-badge--on_target {
  background: var(--dh-status-on-target);
}

.status-badge--ahead {
  background: var(--dh-status-ahead);
}

.readiness-bar-track {
  background: #eef4f6;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.readiness-bar-fill {
  background: var(--dh-teal);
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.teacher-note-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--dh-navy);
  white-space: pre-wrap;
}

.grade-stack {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px solid #eef3f5;
}

.grade-stack:last-child {
  border-bottom: none;
}

.grade-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--dh-navy-soft);
}

.grade-value {
  flex: none;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dh-navy);
}

.grade-value.empty {
  font-size: 0.8rem;
  font-weight: 500;
  font-style: italic;
  color: var(--dh-navy-soft);
}

.contact-info {
  font-size: 0.68rem;
  color: var(--dh-navy-soft);
  text-align: right;
}

.contact-info a {
  color: var(--dh-teal);
}

@media (max-width: 820px) {
  .dashboard-header-top {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .auth-guest {
    align-items: stretch;
  }

  .auth-guest-fields {
    flex-direction: column;
    align-items: stretch;
  }

  .auth-guest input {
    min-width: auto;
    width: 100%;
  }

  .contact-info {
    text-align: left;
  }

  .dashboard-cards {
    grid-template-columns: 1fr;
  }
}