/* assets/css/app.css — small supplements to the Tailwind utility classes */

/* ---------------------------------------------------------------------
 * EduLink UI Modernization Blueprint — Phase 2.2 / Phase 4
 * Semantic design tokens as CSS custom properties. tailwind.config.js
 * maps colors like `primary`, `app-body`, `surface`, `heading`, `body`,
 * `muted`, `sidebar`, `success`/`warning`/`danger`/`info` straight to
 * these variables, so a page written with e.g. bg-surface text-heading
 * automatically repaints correctly in dark mode — no dark: variant
 * needed on that page. Dark values live under html.dark (Tailwind
 * darkMode:'class', toggled by the theme control in includes/header.php
 * and persisted to localStorage under "edulink_theme").
 * ------------------------------------------------------------------- */
:root {
  --ed-primary:        #465FFF; /* "Analytics TailAdmin Visual Update" pass, extended site-wide */
  --ed-primary-hover:  #3641F5;
  --ed-body-bg:        #F9FAFB;
  --ed-sidebar-bg:     #FFFFFF;
  --ed-sidebar-active: #EBEFFF;
  --ed-card-bg:        #FFFFFF;
  --ed-border:         #E4E7EC;
  --ed-heading:        #1D2939;
  --ed-body-text:      #475467;
  --ed-muted-text:     #667085;
  --ed-success:        #12B76A;
  --ed-success-bg:     #ECFDF3;
  --ed-warning:        #F79009;
  --ed-warning-bg:     #FFFAEB;
  --ed-danger:         #F04438;
  --ed-danger-bg:      #FEF3F2;
  --ed-info:           #0BA5EC;
  --ed-info-bg:        #F0F9FF;
  /* "Analytics Button Colors and Skill Analysis Removal" blueprint —
     Phase 1. Certificate reuses --ed-success but that token has no
     hover shade yet (only a light --ed-success-bg tint, meant for
     badges/backgrounds, not a solid-button hover state) — added here
     rather than repurposing --ed-success-bg for it. Plan Analytics
     needed an entirely new semantic color (purple) — none of the
     existing tokens are unclaimed, and reusing e.g. --ed-info would
     collide with its existing meaning elsewhere. */
  --ed-success-hover:  #039855;
  --ed-purple:         #7C3AED;
  --ed-purple-hover:   #6D28D9;
}

html.dark {
  --ed-primary:        #6E85FF;
  --ed-primary-hover:  #8998FF;
  --ed-body-bg:        #101828;
  --ed-sidebar-bg:     #111827;
  --ed-sidebar-active: rgba(70, 95, 255, 0.14);
  --ed-card-bg:        #1D2939;
  --ed-border:         #2D3748;
  --ed-heading:        rgba(255, 255, 255, 0.92);
  --ed-body-text:      #98A2B3;
  --ed-muted-text:     #667085;
  --ed-success:        #12B76A;
  --ed-success-bg:     rgba(18, 183, 106, 0.15);
  --ed-warning:        #F79009;
  --ed-warning-bg:     rgba(247, 144, 9, 0.15);
  --ed-danger:         #F04438;
  --ed-danger-bg:      rgba(240, 68, 56, 0.15);
  --ed-info:           #36BFFA;
  --ed-info-bg:        rgba(54, 191, 250, 0.15);
  --ed-success-hover:  #027A48;
  --ed-purple:         #A78BFA;
  --ed-purple-hover:   #8B5CF6;
}

html.dark body { color-scheme: dark; }

/* ---------------------------------------------------------------------
 * Phase 1 — shared "ed-" component classes (EduLink visual system)
 * Plain CSS (not @apply): app.css is loaded as-is via <link>, with no
 * PostCSS/Tailwind build step processing it today, so these mirror the
 * equivalent Tailwind utilities in raw CSS. The same class names are
 * also defined with @apply in assets/css/src/tailwind.css for the
 * production Tailwind CLI build (see package.json) — keep both in sync
 * if you change one.
 * ------------------------------------------------------------------- */

.ed-page-shell {
  max-width: 80rem;      /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .ed-page-shell { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .ed-page-shell { padding-left: 2rem; padding-right: 2rem; }
}

.ed-section-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ed-heading);
  letter-spacing: -0.01em;
}

.ed-card {
  background: var(--ed-card-bg);
  border: 1px solid var(--ed-border);
  border-radius: 14px;       /* Phase 2.1: card radius 12-16px */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 1.25rem;          /* p-5 */
  color: var(--ed-body-text);
}

/* "Two-Tab Plan Page" blueprint — Section 5/11. Reusable two-tab (or
   more) navigation component: .ed-tabs is the row, .ed-tab each link,
   .ed-tab-active the current one, .ed-tab-count an optional trailing
   badge. Uses semantic tokens (not fixed colors) so it stays correct
   in light/dark mode. Both tabs remain visible and equal-width on
   mobile (Section 5 "Mobile behavior") — no dropdown collapse. */
.ed-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--ed-border);
}
.ed-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ed-muted-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.ed-tab:hover { color: var(--ed-heading); background: var(--ed-body-bg); }
.ed-tab-active,
.ed-tab-active:hover {
  color: var(--ed-primary);
  border-bottom-color: var(--ed-primary);
  background: transparent;
}
.ed-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--ed-body-bg);
  color: var(--ed-muted-text);
}
.ed-tab-active .ed-tab-count { background: color-mix(in srgb, var(--ed-primary) 15%, var(--ed-card-bg)); color: var(--ed-primary); }
@media (max-width: 640px) {
  .ed-tab { padding: 0.75rem 0.5rem; font-size: 0.8125rem; }
}

.ed-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.875rem;
  margin-bottom: 0.875rem;
  border-bottom: 1px solid var(--ed-border);
}
.ed-card-header h3 { font-size: 0.9375rem; font-weight: 700; color: var(--ed-heading); }
.ed-card-header p { font-size: 0.8125rem; color: var(--ed-muted-text); margin-top: 2px; }

.ed-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: var(--ed-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1rem;
  border-radius: 9px;       /* Phase 2.1: button radius 8-10px */
  border: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ed-btn-primary:hover { background: var(--ed-primary-hover); }
.ed-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.ed-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: var(--ed-card-bg);
  color: var(--ed-body-text);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--ed-border);
  cursor: pointer;
  transition: background-color .15s ease;
}
.ed-btn-secondary:hover { background: var(--ed-body-bg); }
.ed-btn-secondary:disabled { opacity: .6; cursor: not-allowed; }

.ed-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: #fff;
  color: var(--ed-danger);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--ed-danger-bg);
  cursor: pointer;
  transition: background-color .15s ease;
}
.ed-btn-danger:hover { background: var(--ed-danger-bg); }

/* ---------------------------------------------------------------------
 * "Analytics Button Colors and Skill Analysis Removal" blueprint —
 * Phase 1. Three action-specific button colors for the row-level
 * analytics links added by the "Clickable Student Analytics Rows"
 * blueprint (§0.12 of the codebase summary) — Plan/Roadmap, Plan
 * Analytics, and Certificate previously all shared the generic
 * .ed-btn-secondary class (white/card-colored background), which
 * made three different destinations visually indistinguishable and
 * used a white background the blueprint explicitly disallows for
 * these three. Same shape/sizing as .ed-btn-primary (solid color,
 * white text, no white background anywhere) — only the color+token
 * differs per action, and the same class is used on both
 * includes/analytics-dashboard-view.php and
 * includes/quiz-history-table-view.php so the same action is always
 * the same color everywhere it appears, desktop and mobile alike.
 * ------------------------------------------------------------------- */
.ed-btn-roadmap,
.ed-btn-plan-analytics,
.ed-btn-certificate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: #fff;
  font-weight: 600;
  padding: 0.625rem 1rem;
  border-radius: 9px;       /* Phase 2.1: button radius 8-10px, same as every other .ed-btn-* */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ed-btn-roadmap:disabled,
.ed-btn-plan-analytics:disabled,
.ed-btn-certificate:disabled { opacity: .6; cursor: not-allowed; }
/* Phase 1's "visible focus ring" — none of the other .ed-btn-* classes
   define one of their own (they rely on the browser default), but
   these three are new enough, and used densely enough in a table/card
   list, to make it explicit rather than assume the default outline is
   enough against a solid color background. */
.ed-btn-roadmap:focus-visible,
.ed-btn-plan-analytics:focus-visible,
.ed-btn-certificate:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.ed-btn-roadmap {
  background: var(--ed-primary);
  border-color: var(--ed-primary);
}
.ed-btn-roadmap:hover { background: var(--ed-primary-hover); border-color: var(--ed-primary-hover); }

.ed-btn-plan-analytics {
  background: var(--ed-purple);
  border-color: var(--ed-purple);
}
.ed-btn-plan-analytics:hover { background: var(--ed-purple-hover); border-color: var(--ed-purple-hover); }

.ed-btn-certificate {
  background: var(--ed-success);
  border-color: var(--ed-success);
}
.ed-btn-certificate:hover { background: var(--ed-success-hover); border-color: var(--ed-success-hover); }

.ed-input, .ed-select {
  width: 100%;
  border: 1px solid var(--ed-border);
  border-radius: 9px;       /* Phase 2.1: input radius 8-10px */
  padding: 0.625rem 1rem;
  background: var(--ed-body-bg);
  font-size: 0.875rem;
  color: var(--ed-heading);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ed-input:focus, .ed-select:focus {
  border-color: var(--ed-primary);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.10);
  background: var(--ed-card-bg);
}
.ed-input:disabled, .ed-select:disabled { opacity: .6; cursor: not-allowed; }

.ed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  letter-spacing: .01em;
}
.ed-badge-brand    { background: var(--ed-info-bg); color: var(--ed-info); }
.ed-badge-success  { background: var(--ed-success-bg); color: var(--ed-success); }
.ed-badge-warning  { background: var(--ed-warning-bg); color: var(--ed-warning); }
.ed-badge-danger   { background: var(--ed-danger-bg); color: var(--ed-danger); }
.ed-badge-neutral  { background: var(--ed-body-bg); color: var(--ed-muted-text); border: 1px solid var(--ed-border); }

/* "Analytics TailAdmin Visual Update" pass — icon-chip KPI card +
 * trend badge, extended site-wide to any stat-card row that wants it
 * (see student/dashboard.php, teacher/dashboard.php,
 * includes/analytics-overview-view.php). */
.ed-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--ed-body-bg);
  color: var(--ed-primary);
  font-size: 1.05rem;
}
.ed-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.ed-change-up   { background: var(--ed-success-bg); color: var(--ed-success); }
.ed-change-down { background: var(--ed-danger-bg);  color: var(--ed-danger); }

/* Phase 7.5 — empty states */
.ed-empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--ed-muted-text);
}
.ed-empty-state .ed-empty-icon {
  width: 48px; height: 48px; margin: 0 auto 0.75rem;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ed-body-bg);
  color: var(--ed-muted-text);
  font-size: 1.25rem;
}
.ed-empty-state h4 { font-size: 0.9375rem; font-weight: 700; color: var(--ed-heading); margin-bottom: 0.25rem; }
.ed-empty-state p { font-size: 0.8125rem; max-width: 26rem; margin: 0 auto 1rem; }

/* Phase 7.3 — directory tables */
.ed-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ed-table thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ed-muted-text);
  background: var(--ed-body-bg);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--ed-border);
}
.ed-table thead th:first-child { border-top-left-radius: 10px; }
.ed-table thead th:last-child { border-top-right-radius: 10px; }
.ed-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ed-border);
  color: var(--ed-body-text);
  vertical-align: middle;
}
.ed-table tbody tr:last-child td { border-bottom: none; }
.ed-table tbody tr:hover td { background: var(--ed-body-bg); }

/* Journey TailAdmin-Table Visual Update — card wrapper + header bar for
   a table grouped under a date-section heading (e.g. "This Week"),
   built on the existing .ed-table above rather than a new table style.
   Zero-padding card (unlike the default .ed-card) since the header bar
   and table supply their own padding, edge to edge. */
.ed-table-card { background: var(--ed-card-bg); border: 1px solid var(--ed-border); border-radius: 14px; overflow: hidden; }
.ed-table-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ed-border);
}

/* Phase 6.1 — metric/stat card */
.ed-stat-card { display: flex; align-items: center; gap: 1rem; }
.ed-avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem;
  background: var(--ed-sidebar-active); color: var(--ed-primary);
  flex-shrink: 0;
}

.thread-list::-webkit-scrollbar,
.message-pane::-webkit-scrollbar {
  width: 8px;
}
.thread-list::-webkit-scrollbar-thumb,
.message-pane::-webkit-scrollbar-thumb {
  background: var(--ed-border);
  border-radius: 999px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.badge-unread   { background: var(--ed-info-bg); color: var(--ed-info); }
.badge-urgent   { background: var(--ed-danger-bg); color: var(--ed-danger); }
.badge-parent   { background: var(--ed-success-bg); color: var(--ed-success); }
.badge-student  { background: var(--ed-info-bg); color: var(--ed-primary); }
.badge-resolved { background: var(--ed-body-bg); color: var(--ed-muted-text); }
.badge-lowscore { background: var(--ed-danger-bg); color: var(--ed-danger); }

.bubble-mine {
  background: var(--ed-primary);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.bubble-theirs {
  background: var(--ed-card-bg);
  border: 1px solid var(--ed-border);
  border-radius: 16px 16px 16px 4px;
  color: var(--ed-body-text);
}
.bubble-system {
  background: var(--ed-warning-bg);
  border: 1px solid var(--ed-border);
  color: var(--ed-warning);
  border-radius: 10px;
}

.thread-row.active {
  background: var(--ed-sidebar-active);
  border-left: 3px solid var(--ed-primary);
}

/* Phase 2/3: Print Conversation — everything else on the page is hidden
   while printing; only #print-area (populated just-in-time by JS with
   the current conversation) is shown. */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
  }
}

/* "EduLink Blueprint: Learning Insights Reports System" — Phase 20
   "Print and Report Formatting". Its own rule rather than reusing
   #print-area above (that mechanism needs JS to copy content into a
   hidden div first) — the report page's real DOM is already exactly
   what should print, it just needs the sidebar/nav/header and every
   interactive control hidden. Scoped to #li-report-print-root so it
   only ever applies on the two Learning Insights report pages. */
@media print {
  #li-report-print-root, #li-report-print-root * { visibility: visible; }
  #li-report-print-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
  }
  .li-report-hide-print,
  .li-report-controls { display: none !important; }
  /* The "Show Details" toggle is a screen-only affordance (Phase 6
     "collapsed by default") — print always shows the full breakdown
     regardless of whether it was expanded on screen (Phase 20 "Show:
     ... All major report sections"). */
  #li-report-print-root #li-sec-details.hidden { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Three-Step Plan Creation Blueprint — Phase 13 "Styling". Reuses the
   existing semantic tokens (--ed-primary, --ed-success, --ed-muted-text,
   --ed-border, --ed-card-bg) rather than introducing new colors — every
   state below is light/dark-mode-aware automatically the same way
   .ed-card/.ed-btn-primary already are (§7 of the codebase summary).
   ═══════════════════════════════════════════════════════════════════ */

.plan-progress-nav .plan-step-connector {
  position: relative;
}
.plan-progress-nav .plan-step-connector::after {
  content: '';
  position: absolute;
  top: 18px; /* vertical center of the 36px step circle */
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  height: 2px;
  background: var(--ed-border);
}

.plan-step-circle {
  border: 2px solid var(--ed-border);
  color: var(--ed-muted-text);
  background: var(--ed-card-bg);
}
.plan-step-desc { color: var(--ed-muted-text); }
.plan-step-state-label { color: var(--ed-muted-text); }

/* Complete: filled success, checkmark, connector segment after it turns solid. */
.plan-step-complete .plan-step-circle {
  background: var(--ed-success);
  border-color: var(--ed-success);
  color: #fff;
}
.plan-step-complete .plan-step-state-label { color: var(--ed-success); }
a.plan-step-complete:hover .plan-step-desc,
a.plan-step-complete:focus-visible .plan-step-desc { color: var(--ed-body-text); }

/* Current: strong primary treatment — the strongest visual element among the three steps. */
.plan-step-current .plan-step-circle {
  background: var(--ed-primary);
  border-color: var(--ed-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--ed-info-bg);
}
.plan-step-current .plan-step-state-label { color: var(--ed-primary); }

/* In progress: highlighted but not as strong as "current" — a distinct third visual state, not a re-skin of complete or current. */
.plan-step-in-progress .plan-step-circle {
  background: var(--ed-warning-bg);
  border-color: var(--ed-warning);
  color: var(--ed-warning);
}
.plan-step-in-progress .plan-step-state-label { color: var(--ed-warning); }

/* Locked/not-started: muted, never styled to look clickable (it isn't — rendered as <span>, not <a>). */
.plan-step-locked { opacity: 0.55; cursor: default; }
.plan-step-locked .plan-step-circle { background: var(--ed-card-bg); }

a.plan-step-complete,
a.plan-step-current,
a.plan-step-in-progress {
  border-radius: 10px;
  padding: 2px;
  margin: -2px;
  transition: background-color 150ms ease;
}
a.plan-step-complete:hover,
a.plan-step-current:hover,
a.plan-step-in-progress:hover {
  background: var(--ed-body-bg);
}
a.plan-step-complete:focus-visible,
a.plan-step-current:focus-visible,
a.plan-step-in-progress:focus-visible {
  outline: 2px solid var(--ed-primary);
  outline-offset: 2px;
}

/* Mobile vertical list: same state classes, no connector line needed. */
.plan-step-mobile .plan-step-circle { width: 1.75rem; height: 1.75rem; }

/* ═══════════════════════════════════════════════════════════════════
   Plans Page Visual Refresh Blueprint — Phase 1 "Design tokens".
   Student-only (student/plans.php + includes/plan-directory-result-view.php's
   student branch) — reuses existing --ed-* custom properties, no new
   color system. The blueprint's Phase 4b referenced a --ed-border-strong
   token that doesn't exist anywhere else in this file; the draft-card
   border below uses the existing --ed-border instead.
   ═══════════════════════════════════════════════════════════════════ */

.ed-stat-pill {
  background: var(--ed-card-bg);
  border: 1px solid var(--ed-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  flex: 1;
  min-width: 110px;
}
.ed-stat-pill .value { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.2; }
.ed-stat-pill .label { font-size: 12px; color: var(--ed-muted-text); margin: 0 0 4px; }

.ed-stepper-track { flex: 1; height: 1px; background: var(--ed-border); margin: 0 12px; min-width: 24px; }
.ed-stepper-track.done { background: var(--ed-primary); }

/* ═══════════════════════════════════════════════════════════════════
   Plans Directory Flex-Reflow, Row-Action Sizing & Stepper Redesign
   Blueprint — Phase 4a. Redesigned "Create a Learning Plan" stepper
   card (student/plans.php only). Reuses existing --ed-* tokens only.
   ═══════════════════════════════════════════════════════════════════ */
.ed-create-plan-steps { display: flex; align-items: stretch; gap: 0; }
.ed-create-plan-step { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.6rem; min-width: 150px; }
.ed-create-plan-step-top { display: flex; align-items: center; gap: 0; }
.ed-create-plan-step-circle {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; flex-shrink: 0;
  border: 2px solid var(--ed-border);
  background: var(--ed-card-bg);
  color: var(--ed-muted-text);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ed-create-plan-step.is-done .ed-create-plan-step-circle { background: var(--ed-primary); border-color: var(--ed-primary); color: #fff; }
.ed-create-plan-step.is-current .ed-create-plan-step-circle { border-color: var(--ed-primary); color: var(--ed-primary); background: color-mix(in srgb, var(--ed-primary) 10%, var(--ed-card-bg)); }
.ed-create-plan-step-line { flex: 1 1 auto; height: 2px; background: var(--ed-border); margin: 0 4px; min-width: 16px; }
.ed-create-plan-step.is-done .ed-create-plan-step-line { background: var(--ed-primary); }
.ed-create-plan-step-eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ed-muted-text); }
.ed-create-plan-step.is-current .ed-create-plan-step-eyebrow { color: var(--ed-primary); }
.ed-create-plan-step-title { font-size: 0.9375rem; font-weight: 700; color: var(--ed-heading); line-height: 1.3; }
.ed-create-plan-step-desc { font-size: 0.8125rem; color: var(--ed-muted-text); line-height: 1.4; }
@media (max-width: 700px) {
  .ed-create-plan-steps { flex-direction: column; gap: 1.1rem; }
  .ed-create-plan-step { flex-direction: row; align-items: center; gap: 0.9rem; }
  .ed-create-plan-step-top { flex-direction: column; }
  .ed-create-plan-step-line { display: none; }
}

.ed-progress-track { height: 6px; background: var(--ed-body-bg); border-radius: 20px; overflow: hidden; }
.ed-progress-fill  { height: 100%; border-radius: 20px; background: var(--ed-success); transition: width 200ms ease; }

/* Phase 4 card variants. */
.ed-plan-card-active { border-left: 3px solid var(--ed-success); }
.ed-plan-card-draft  { border: 1px dashed var(--ed-border); }
.ed-plan-icon-chip {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ed-info-bg);
  color: var(--ed-primary);
}
.ed-plan-icon-chip.muted { background: var(--ed-body-bg); color: var(--ed-muted-text); }

/* ═══════════════════════════════════════════════════════════════════
   Plans Directory Flex-Reflow Blueprint — Phase 1. Renamed from
   .ed-table* to .ed-plan-table* (see §0 — the old name collided with
   the pre-existing Phase 7.3 directory-table class). Rows/cells are
   flex boxes instead of native table layout, so as the viewport
   narrows, cells wrap onto new lines and their own text wraps onto
   more lines, instead of clipping or forcing horizontal scroll.
   ═══════════════════════════════════════════════════════════════════ */
.ed-plan-table-card { overflow: hidden; }
.ed-plan-table-wrap { overflow-x: visible; }
.ed-plan-table, .ed-plan-table thead, .ed-plan-table tbody { display: block; width: 100%; }
.ed-plan-table { font-size: 0.875rem; }
.ed-plan-table tr { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.ed-plan-table thead tr { background: var(--ed-body-bg); border-bottom: 1px solid var(--ed-border); }
.ed-plan-table th {
  flex: 1 1 150px;
  min-width: 110px;
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ed-muted-text);
}
.ed-plan-table tbody tr { border-bottom: 1px solid var(--ed-border); }
.ed-plan-table tbody tr:last-child { border-bottom: none; }
.ed-plan-table tbody tr:hover { background: var(--ed-body-bg); }
.ed-plan-table td {
  flex: 1 1 150px;
  min-width: 110px;
  padding: 1rem 1.25rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ed-plan-table th:nth-child(1), .ed-plan-table td:nth-child(1) { flex: 2.2 1 240px; } /* Plan */
.ed-plan-table th:nth-child(2), .ed-plan-table td:nth-child(2) { flex: 1.6 1 200px; } /* Progress */
.ed-plan-table th:nth-child(3), .ed-plan-table td:nth-child(3) { flex: 0.7 1 130px; white-space: nowrap; } /* Created At — "Simplify Plans Tables" Phase 15: compact, nowrap */
.ed-plan-table th:last-child, .ed-plan-table td:last-child { flex: 1.6 1 240px; }     /* Actions */

.ed-plan-table td::before {
  content: attr(data-label);
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ed-muted-text);
  margin-bottom: 0.25rem;
}
@media (max-width: 700px) {
  .ed-plan-table thead { display: none; }
  .ed-plan-table td { flex: 1 1 100%; }
  .ed-plan-table td::before { display: block; }
}

/* ---- Row actions. "Simplify Plans Tables for Teachers and Students"
   blueprint — Phase 15: action labels are now longer and more varied
   ("Build Learning Roadmap", "Review Student Progress") than the old
   fixed 9.25rem/ellipsis sizing (tuned for short labels like "Open
   Plan") could show without clipping — min-width keeps rows visually
   aligned without truncating text; wrapping is allowed if a label
   still doesn't fit. ---- */
.ed-plan-table-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ed-action-btn-primary { min-width: 9.25rem; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
/* Phase 12: message button is now icon + visible text (was icon-only
   with title/aria-label as the only text) — auto width instead of a
   fixed square, but keeps the same unread-count dot positioning. */
.ed-action-btn-message { display: inline-flex; align-items: center; gap: 0.4rem; position: relative; white-space: nowrap; }
.ed-action-btn-message .ed-unread-dot {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  background: var(--ed-danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
/* Retained for any other/future icon-only square action button. */
.ed-action-btn-icon { position: relative; width: 2.375rem; height: 2.375rem; padding: 0; flex-shrink: 0; }
.ed-action-btn-icon .ed-unread-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  background: var(--ed-danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Plans Directory TailAdmin-Table Blueprint — Phase 3 (optional).
   Icon slot for .ed-stat-pill, matching the reference mockup's
   metric-card pattern. .ed-stat-pill's own layout rules are unchanged
   (assets/css/app.css, Plans Page Visual Refresh Phase 1) — this only
   adds the icon box and switches the pill to a column layout so the
   icon sits above the label/value. */
.ed-stat-pill { display: flex; flex-direction: column; gap: 0.5rem; }
.ed-stat-pill-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ed-body-bg);
  color: var(--ed-primary);
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------------
 * "Roadmap Steps TailAdmin Data Table" pass — the same TailAdmin
 * "Data Tables" pattern (https://demo.tailadmin.com/data-tables) used
 * by student/plan-roadmap.php's Roadmap Steps section. Deliberately a
 * distinct, richer class family from .ed-table/.ed-table-card (Plans
 * Directory pass) rather than extending those — this one adds a
 * search/entries toolbar, sortable-look column headers, and an
 * expandable per-row detail row, none of which the simpler .ed-table*
 * pattern has. Colors are var(--ed-primary)/var(--ed-primary-hover) —
 * the template this was built from used its own separate --ta-brand
 * variable, but that value (#465FFF) is identical to this app's
 * existing --ed-primary post-re-theme, so no new token was introduced.
 * Status/skill badges reuse the existing .ed-badge* classes and
 * render_badge() rather than a parallel .ta-badge* family.
 * ------------------------------------------------------------------- */
.ta-card { border-radius: 1rem; border: 1px solid var(--ed-border); background: var(--ed-card-bg); overflow: hidden; }
.ta-card-header { padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-bottom: 1px solid var(--ed-border); }
.ta-card-title { font-size: 1rem; font-weight: 600; color: var(--ed-heading); }

.ta-dt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; }
.ta-dt-toolbar-left { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ed-muted-text); }
.ta-dt-entries-select {
  height: 2.25rem; border-radius: .5rem; border: 1px solid var(--ed-border); background: var(--ed-card-bg);
  color: var(--ed-heading); padding: 0 .6rem; font-size: .8125rem; appearance: none;
  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='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center; padding-right: 1.75rem;
}
.ta-dt-search-wrap { position: relative; }
.ta-dt-search { height: 2.25rem; border-radius: .5rem; border: 1px solid var(--ed-border); background: var(--ed-card-bg); color: var(--ed-heading); padding: 0 .75rem 0 2.25rem; font-size: .8125rem; min-width: 200px; }
.ta-dt-search::placeholder { color: var(--ed-muted-text); }
.ta-dt-search:focus { outline: 2px solid var(--ed-primary); outline-offset: 1px; border-color: var(--ed-primary); }
.ta-dt-search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--ed-muted-text); font-size: .8rem; pointer-events: none; }

.ta-table-wrap { overflow-x: auto; }
.ta-table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; }
.ta-table thead { border-bottom: 1px solid var(--ed-border); }
.ta-table thead th { padding: .75rem 1rem; text-align: left; font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: var(--ed-muted-text); white-space: normal; overflow-wrap: break-word; vertical-align: bottom; }
/* Sort icons are decorative only on this table — roadmap steps stay in
   roadmap sequence and are never client-sortable (same principle as
   includes/analytics-roadmap-comprehension-view.php's "steps stay in
   roadmap order" rule) — cursor stays default, no click handler. */
.ta-table th.ta-sortable { cursor: default; user-select: none; }
.ta-th-flex { display: flex; align-items: center; gap: .4rem; }
.ta-sort-icons { display: inline-flex; flex-direction: column; gap: 1px; line-height: 0; }
.ta-sort-icons i { font-size: 8px; color: var(--ed-border); }
.ta-sort-icons i.ta-sort-active { color: var(--ed-primary); }
/* "EduLink Roadmap Table and Messaging Fix" blueprint — Phase 2/4/15.
 * Was 6 columns (Step/Unit/Duration/Mastery Target/Status/Actions);
 * Duration, Mastery Target, and Status are no longer shown as
 * standalone columns (their underlying data/behavior is unchanged —
 * see student/plan-roadmap.php and teacher/plan-view.php's docblocks
 * for exactly where each one still lives). New 4-column layout: Step /
 * Unit / Actions / Advanced Features, the last of which is
 * mode-responsive rather than always-visible. Shared by both roles'
 * roadmap tables (`.ta-table`) — no separate CSS system introduced. */
.ta-table th:nth-child(1), .ta-table td:nth-child(1) { width: 9%; }  /* Step */
.ta-table th:nth-child(2), .ta-table td:nth-child(2) { width: 58%; } /* Unit */
.ta-table th:nth-child(3), .ta-table td:nth-child(3) { width: 33%; } /* Actions */
.ta-table th.ta-col-advanced, .ta-table td.ta-col-advanced {
  width: 0; padding: 0; border: none; overflow: hidden; opacity: 0;
  transition: width .15s ease, opacity .1s ease;
}
/* Advanced mode: Advanced Features column takes real width, the other
 * three shrink to make room (percentages are the blueprint's own
 * "starting points, not hard requirements"). */
.ta-table.is-advanced-mode th:nth-child(1), .ta-table.is-advanced-mode td:nth-child(1) { width: 8%; }
.ta-table.is-advanced-mode th:nth-child(2), .ta-table.is-advanced-mode td:nth-child(2) { width: 38%; }
.ta-table.is-advanced-mode th:nth-child(3), .ta-table.is-advanced-mode td:nth-child(3) { width: 25%; }
.ta-table.is-advanced-mode th.ta-col-advanced, .ta-table.is-advanced-mode td.ta-col-advanced {
  width: 29%; padding: .9rem 1rem; opacity: 1; overflow: visible;
}
/* Basic mode: header text itself is hidden (not just narrowed) so an
 * empty "Advanced Features" label never sits over a collapsed column. */
.ta-table:not(.is-advanced-mode) .advanced-features-header,
.ta-table:not(.is-advanced-mode) .advanced-features-cell { display: none; }
.ta-table tbody tr.ta-row { border-bottom: 1px solid var(--ed-border); }
.ta-table tbody tr.ta-row:hover { background: var(--ed-body-bg); }
.ta-table tbody tr:last-child { border-bottom: none; }
.ta-table tbody td { padding: .9rem 1rem; font-size: .875rem; color: var(--ed-body-text); vertical-align: top; overflow-wrap: break-word; word-break: break-word; }
.ta-cell-primary { color: var(--ed-heading); font-weight: 600; font-size: .875rem; }
.ta-cell-sub { color: var(--ed-muted-text); font-size: .8125rem; margin-top: .15rem; }

.ta-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--ed-primary); color: #fff; font-weight: 500; font-size: .8125rem; padding: .45rem .9rem; border-radius: .5rem; border: none; cursor: pointer; transition: background .15s ease; }
.ta-btn-primary:hover { background: var(--ed-primary-hover); }
.ta-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.ta-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--ed-card-bg); color: var(--ed-body-text); font-weight: 500; font-size: .8125rem; padding: .45rem .9rem; border-radius: .5rem; border: 1px solid var(--ed-border); cursor: pointer; transition: background .15s ease; }
.ta-btn-outline:hover { background: var(--ed-body-bg); }

.ta-detail-row td { background: var(--ed-body-bg); padding: 1.25rem 1.5rem !important; }

.ta-dt-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid var(--ed-border); }
.ta-dt-footer-text { font-size: .8125rem; color: var(--ed-muted-text); }
.ta-dt-pagination { display: flex; align-items: center; gap: .375rem; }
.ta-dt-page-btn { min-width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .4rem; font-size: .8125rem; font-weight: 500; border: 1px solid transparent; color: var(--ed-body-text); background: transparent; cursor: pointer; padding: 0 .5rem; }
.ta-dt-page-btn:hover { background: var(--ed-body-bg); }
.ta-dt-page-btn.ta-active { background: var(--ed-primary); color: #fff; }
.ta-dt-page-btn:disabled { color: var(--ed-muted-text); opacity: .5; cursor: not-allowed; }

.ed-row-details-summary { list-style: none; }
.ed-row-details-summary::-webkit-details-marker { display: none; }
.ed-row-details-summary:hover { text-decoration: underline; }