/* Upskill portal theme override — loaded AFTER student.css on /upskill-portal
   ONLY. Remaps the student portal's indigo/violet palette to the AI-Upskill
   TRICOLOUR theme (saffron primary + India-green success), to match the
   /upskill landing page. The shared student.css and the live /student portal
   are NOT touched — this file simply cascades over them on this one route. */

/* 1) Brand variables → saffron. Covers every var(--brand) usage: primary
      buttons, active module states, focus rings, progress fill, dots.
      --success is already green (#10B981) — the tricolour green stays. */
:root {
  --brand: #EA6A0A;
  --brand-light: #FFF3E6;
  --brand-mid: #FDBA74;
}

/* 2) Hardcoded indigo/blue accents that don't read the variable. */
.av,
.msg-av.user-av { background: linear-gradient(135deg, #FB923C, #EA6A0A); }

/* Dashboard welcome banner → tricolour (saffron → India green). */
.wb { background: linear-gradient(120deg, #F97316 0%, #EA580C 46%, #138808 100%); }

/* Active / hover module borders were indigo-200. */
.mod-btn:not(.locked):not(.active):hover,
.mod-btn.active { border-color: #FED7AA; }

/* Primary-button hover was dark indigo (#4338CA). */
.btn-p:hover,
.ext-btn:hover,
.ab-cta:hover,
.sub-btn:hover { background: #C2410C; }

/* Button glows were indigo (rgba(79,70,229,…)) → saffron. */
.btn-p, .ext-btn, .ab-cta { box-shadow: 0 2px 8px rgba(234, 88, 12, .25); }
.btn-p:hover, .ext-btn:hover, .ab-cta:hover { box-shadow: 0 4px 14px rgba(234, 88, 12, .32); }

/* Progress ring stroke is an inline SVG attribute in the markup — CSS wins. */
#progressRing { stroke: #EA6A0A; }

/* Login submit button → saffron (in case it isn't purely var-driven). */
.auth-submit { background: linear-gradient(90deg, #FF9933, #FB7A18); }

/* ── TEACHING TOOLKIT (AI-Teacher students only) ──────────────────────
   Sits between the welcome banner and the stat grid on the dashboard. */
#teachingToolkit { margin: 22px 0 28px; }
.tk-head { margin-bottom: 16px; }
.tk-eye {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #EA6A0A;
}
.tk-eye svg { width: 15px; height: 15px; }
.tk-title { font-size: 1.35rem; font-weight: 800; color: #0f172a; margin: 6px 0 4px; }
.tk-sub { font-size: .92rem; color: #64748B; line-height: 1.5; max-width: 640px; margin: 0; }
.tk-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.tk-card {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid #F1E3D3; border-radius: 14px;
  padding: 16px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tk-card:hover { border-color: #FED7AA; box-shadow: 0 4px 14px rgba(234,88,12,.10); transform: translateY(-2px); }
.tk-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #FFF3E6; color: #EA6A0A; border: 1px solid #FDE4CB;
}
.tk-ico svg { width: 20px; height: 20px; }
.tk-body { flex: 1; min-width: 0; }
.tk-name {
  font-size: 1rem; font-weight: 700; color: #0f172a;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tk-bonus {
  font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #138808; background: #E9F6EA; border: 1px solid #C6E9C7;
  padding: 2px 7px; border-radius: 999px;
}
/* Capstone chip (Putting It All Together) — navy, distinct from the green Bonus. */
.tk-cap { color: #fff; background: #0b1533; border-color: #0b1533; }
.tk-desc { font-size: .86rem; color: #64748B; line-height: 1.45; margin: 5px 0 12px; }
.tk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tk-view, .tk-dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 9px;
  font-size: .87rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.tk-view { background: #EA6A0A; color: #fff; }
.tk-view:hover { background: #C2410C; }
.tk-view svg { width: 15px; height: 15px; }
.tk-dl { background: #FFF3E6; color: #C2410C; border: 1px solid #FDE4CB; }
.tk-dl:hover { background: #FDE4CB; }

@media (max-width: 700px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-title { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .tk-card { padding: 14px; }
  .tk-actions { gap: 8px; }
  .tk-view, .tk-dl { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   TEACHER SKIN — applied when body.teacher is set (plan==='ai-teacher').
   Same /upskill-portal route, but an adult-educator look: professional
   green + navy (not the student saffron), teacher copy (set in JS), and
   the student gamification (XP, badges, Daily Challenge) removed. Every
   rule here is scoped under .teacher, so the B2C upskill student is
   untouched. This block sits AFTER the saffron rules so it wins the cascade.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Palette → professional green (flag-green lineage, calmer than saffron). */
.teacher {
  --brand: #0E7A3B;
  --brand-light: #E7F4EC;
  --brand-mid: #86C79B;
}

/* 2) Avatars + welcome banner → green→navy (was saffron / tricolour). */
.teacher .av,
.teacher .msg-av.user-av { background: linear-gradient(135deg, #12924A, #0E7A3B); }
.teacher .wb { background: linear-gradient(120deg, #0E7A3B 0%, #0B5B2E 52%, #0b1533 100%); }

/* 3) Button + accent colours that were hardcoded saffron. */
.teacher .btn-p:hover,
.teacher .ext-btn:hover,
.teacher .ab-cta:hover,
.teacher .sub-btn:hover { background: #0B5B2E; }
.teacher .btn-p, .teacher .ext-btn, .teacher .ab-cta { box-shadow: 0 2px 8px rgba(14, 122, 59, .25); }
.teacher .btn-p:hover, .teacher .ext-btn:hover, .teacher .ab-cta:hover { box-shadow: 0 4px 14px rgba(14, 122, 59, .32); }
.teacher #progressRing { stroke: #0E7A3B; }
.teacher .auth-submit { background: linear-gradient(90deg, #12924A, #0E7A3B); }
.teacher .mod-btn:not(.locked):not(.active):hover,
.teacher .mod-btn.active { border-color: #A7DCBB; }

/* 4) Header strip → solid professional green (drop the tricolour bars). */
.teacher .hdr::after {
  background: #0E7A3B;
}

/* 5) Remove the student gamification.
      - side-cards = Daily Challenge + Recent Badges  → hidden
      - course card goes full width
      - XP stat card hidden; remaining stats reflow to 3-up on desktop
      - XP tile inside the welcome banner hidden (Modules stays) */
.teacher .side-cards { display: none; }
.teacher .cg { grid-template-columns: 1fr; }
.teacher .sg .sc:first-child { display: none; }
.teacher .wb-stats .wb-stat:first-child { display: none; }
@media (min-width: 769px) {
  .teacher .sg { grid-template-columns: repeat(3, 1fr); }
}

/* 6) Slightly more editorial headings — professional feel without a new font. */
.teacher .wb-title { letter-spacing: -.01em; }
.teacher .tk-title { letter-spacing: -.01em; }

/* 7) Teaching Toolkit → green (it only ever renders under .teacher). */
.teacher .tk-eye { color: #0E7A3B; }
.teacher .tk-ico { background: #E7F4EC; color: #0E7A3B; border-color: #C6E9D2; }
.teacher .tk-view { background: #0E7A3B; }
.teacher .tk-view:hover { background: #0B5B2E; }
.teacher .tk-dl { background: #E7F4EC; color: #0B5B2E; border-color: #C6E9D2; }
.teacher .tk-dl:hover { background: #C6E9D2; }
.teacher .tk-card:hover { border-color: #A7DCBB; box-shadow: 0 4px 14px rgba(14,122,59,.10); }
.teacher .tk-bonus { color: #0B5B2E; background: #E7F4EC; border-color: #C6E9D2; }
.teacher .tk-cap { color: #fff; background: #0b1533; border-color: #0b1533; }

/* 3) Tricolour flag strip under the header — ties the portal to the landing. */
.hdr { position: relative; }
.hdr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, #FF9933 0%, #FF9933 33%, #ffffff 33%, #ffffff 66%, #138808 66%, #138808 100%);
}