/* ══════════════════════════════════════════════════
   MCV CAO PREDICTOR — page-specific styles
   Scope: .mcv-cao-pred (used alongside .mcv-page)
   Load:  functions.php — wp_enqueue_style on is_page
   FTP:   /wp-content/themes/flavor/css/mcv-cao-pred.css
   ══════════════════════════════════════════════════ */


/* ─── Direction dots ─────────────────────────────── */
.mcv-cao-pred .mcv-cao-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.mcv-cao-pred .mcv-cao-dot-up   { background: #22C55E; }
.mcv-cao-pred .mcv-cao-dot-flat { background: #94A3B8; }
.mcv-cao-pred .mcv-cao-dot-down { background: #F97316; }


/* ─── Field demand table ─────────────────────────── */
.mcv-cao-pred .mcv-cao-field-header {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) 1fr minmax(200px, 3fr) 60px;
  gap: 16px;
  padding: 12px 20px;
  background: #F8F7FC;
  border-bottom: 2px solid #E2E8F0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.mcv-cao-pred .mcv-cao-field-row {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) 1fr minmax(200px, 3fr) 60px;
  gap: 16px;
  padding: 14px 20px;
  align-items: center;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.9rem;
}
.mcv-cao-pred .mcv-cao-field-row:last-child { border-bottom: 0; }
.mcv-cao-pred .mcv-cao-field-name {
  font-weight: 600;
  color: #1E1B4B;
}
.mcv-cao-pred .mcv-cao-field-fp {
  font-size: 0.82rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.mcv-cao-pred .mcv-cao-field-bar-wrap {
  position: relative;
  height: 8px;
  background: #F1F5F9;
  border-radius: 4px;
}
.mcv-cao-pred .mcv-cao-field-bar-zero {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: #94A3B8;
}
.mcv-cao-pred .mcv-cao-field-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.mcv-cao-pred .mcv-cao-field-bar.up   { background: #22C55E; }
.mcv-cao-pred .mcv-cao-field-bar.down { background: #F97316; }
.mcv-cao-pred .mcv-cao-field-bar.flat { background: #94A3B8; }
.mcv-cao-pred .mcv-cao-field-delta {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mcv-cao-pred .mcv-cao-field-delta.up   { color: #15803D; }
.mcv-cao-pred .mcv-cao-field-delta.down { color: #C2410C; }
.mcv-cao-pred .mcv-cao-field-delta.flat { color: #64748b; }

@media (max-width: 767.98px) {
  .mcv-cao-pred .mcv-cao-field-row {
    grid-template-columns: 1fr 60px;
    gap: 10px;
    padding: 12px 14px;
  }
  .mcv-cao-pred .mcv-cao-field-fp,
  .mcv-cao-pred .mcv-cao-field-bar-wrap {
    display: none;
  }
}


/* ─── Course list ────────────────────────────────── */
.mcv-cao-pred .mcv-cao-course-header {
  grid-template-columns: 72px minmax(0, 2.2fr) minmax(150px, 1.5fr) 58px minmax(180px, 1.8fr) 72px 30px;
  gap: 14px;
  padding: 11px 20px;
  background: #F8F7FC;
  border-bottom: 2px solid #E2E8F0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.mcv-cao-pred .mcv-cao-course-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 2.2fr) minmax(150px, 1.5fr) 58px minmax(180px, 1.8fr) 72px 30px;
  gap: 14px;
  padding: 14px 20px;
  align-items: center;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.mcv-cao-pred .mcv-cao-course-row:last-child { border-bottom: 0; }
.mcv-cao-pred .mcv-cao-course-row:hover { background: #F8F7FC; }
.mcv-cao-pred .mcv-cao-course-row.expanded {
  background: #F0ECFA;
  border-bottom-color: #E2E8F0;
}
.mcv-cao-pred .mcv-cao-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563EB;
  letter-spacing: 0.5px;
}
.mcv-cao-pred .mcv-cao-name-cell { min-width: 0; }
.mcv-cao-pred .mcv-cao-name {
  font-weight: 700;
  color: #1E1B4B;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcv-cao-pred .mcv-cao-field-label {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 2px;
}
.mcv-cao-pred .mcv-cao-inst {
  font-size: 0.82rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcv-cao-pred .mcv-cao-pts-2025 {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E1B4B;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ─── Prediction band viz ────────────────────────── */
.mcv-cao-pred .mcv-cao-pred-cell { min-width: 0; }
.mcv-cao-pred .mcv-cao-pred-band {
  position: relative;
  height: 22px;
}
.mcv-cao-pred .mcv-cao-pred-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 1px;
  background: #E2E8F0;
}
.mcv-cao-pred .mcv-cao-pred-range {
  position: absolute;
  top: 6px;
  height: 11px;
  border-radius: 3px;
  opacity: 0.85;
}
.mcv-cao-pred .mcv-cao-pred-range.up   { background: #22C55E; }
.mcv-cao-pred .mcv-cao-pred-range.down { background: #F97316; }
.mcv-cao-pred .mcv-cao-pred-range.flat { background: #94A3B8; }
.mcv-cao-pred .mcv-cao-pred-baseline {
  position: absolute;
  top: 3px;
  width: 2px;
  height: 17px;
  background: #1E1B4B;
}
.mcv-cao-pred .mcv-cao-pred-text {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}
.mcv-cao-pred .mcv-cao-pred-text strong {
  color: #1E1B4B;
  font-weight: 700;
}


/* ─── Confidence tag ─────────────────────────────── */
.mcv-cao-pred .mcv-cao-conf {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 50px;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
}
.mcv-cao-pred .mcv-cao-conf.medium-high { background: #DCFCE7; color: #15803D; }
.mcv-cao-pred .mcv-cao-conf.medium      { background: #FEF3C7; color: #92400E; }
.mcv-cao-pred .mcv-cao-conf.low         { background: #FFEDD5; color: #9A3412; }


/* ─── Expand chevron ─────────────────────────────── */
.mcv-cao-pred .mcv-cao-expand {
  color: #94A3B8;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
  transition: transform 0.2s;
}
.mcv-cao-pred .mcv-cao-course-row.expanded .mcv-cao-expand {
  transform: rotate(180deg);
  color: #6C3FA0;
}


/* ─── Detail panel ───────────────────────────────── */
.mcv-cao-pred .mcv-cao-detail {
  background: linear-gradient(180deg, #F0ECFA 0%, #F8F7FC 100%);
  padding: 24px 20px 28px;
  border-bottom: 1px solid #F1F5F9;
}
.mcv-cao-pred .mcv-cao-detail h4 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6C3FA0;
  margin-bottom: 12px;
}
.mcv-cao-pred .mcv-cao-calc {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.mcv-cao-pred .mcv-cao-calc td {
  padding: 7px 0;
  border-bottom: 1px solid #E2E8F0;
  color: #475569;
}
.mcv-cao-pred .mcv-cao-calc td:last-child {
  text-align: right;
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 600;
}
.mcv-cao-pred .mcv-cao-calc .mcv-cao-total td {
  border-top: 2px solid #1E1B4B;
  border-bottom: 0;
  font-weight: 700;
  color: #1E1B4B;
  padding-top: 10px;
  font-size: 0.92rem;
}
.mcv-cao-pred .mcv-cao-calc .up   { color: #15803D; }
.mcv-cao-pred .mcv-cao-calc .down { color: #C2410C; }
.mcv-cao-pred .mcv-cao-calc .flat { color: #64748b; }

.mcv-cao-pred .mcv-cao-narrative {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
}
.mcv-cao-pred .mcv-cao-narrative strong {
  color: #1E1B4B;
  font-weight: 700;
}
.mcv-cao-pred .mcv-cao-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #92400E;
  background: #FEF3C7;
  padding: 5px 12px;
  border-radius: 50px;
  margin-top: 10px;
  font-weight: 600;
}


/* ─── Empty state ────────────────────────────────── */
.mcv-cao-pred .mcv-cao-empty {
  padding: 56px 20px;
  text-align: center;
  color: #64748b;
}
.mcv-cao-pred .mcv-cao-empty i {
  font-size: 2rem;
  color: #94A3B8;
  margin-bottom: 10px;
  display: block;
}


/* ─── Mobile adjustments ─────────────────────────── */
@media (max-width: 767.98px) {
  .mcv-cao-pred .mcv-cao-course-header,
  .mcv-cao-pred .mcv-cao-course-row {
    grid-template-columns: 58px minmax(0, 1.6fr) 50px minmax(120px, 1.4fr) 30px;
    gap: 10px;
    padding: 12px 14px;
  }
  .mcv-cao-pred .mcv-cao-course-header > *:nth-child(3),
  .mcv-cao-pred .mcv-cao-course-row > *:nth-child(3) { display: none; } /* institution */
  .mcv-cao-pred .mcv-cao-course-header > *:nth-child(6),
  .mcv-cao-pred .mcv-cao-course-row > *:nth-child(6) { display: none; } /* confidence */
  .mcv-cao-pred .mcv-cao-detail {
    padding: 18px 14px 22px;
  }
}