/* ─────────────────────────────────────────────────────────────────────
   skill.re · /demo/corp · corporate role views
   Loads the full /demo/app stylesheet first so we inherit fonts, color
   tokens, and modern visual language, then layers corporate-specific
   layout (sidebar shell, tables, message board, notes).
   ─────────────────────────────────────────────────────────────────── */
@import url("../app-shared/style.css?v=11");

:root {
  /* a couple of corp-only helpers */
  --soft-2: #E8E2D2;
  --green: #0f7a55;
  --green-bg: rgba(15,122,85,.10);
  --yellow: #8a6300;
  --yellow-bg: rgba(255,213,107,.35);
  --red: #a3201d;
  --red-bg: rgba(255,107,107,.14);
  --plum-ink: #5B3FBF;
  --sky-ink: #2a5b8e;
}

/* Hard-reset body coming from app's style.css - it uses .stage/.phone
   mobile shell. We want a desktop sidebar shell here. */
body.corp { background: var(--bg); min-height:100dvh; color:var(--ink); font-family:var(--font-sans); overflow-x:hidden }
body.corp *, body.corp *::before, body.corp *::after { box-sizing:border-box }

.shell { display:grid; grid-template-columns: 240px 1fr; min-height:100dvh }
@media(max-width:900px){ .shell { grid-template-columns: 1fr } }

/* ── Sidebar (Modern theme: cream cards, editorial touches, lime active) ── */
.side {
  background:#fff; border-right:1px solid var(--line); padding:1.1rem .8rem;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100dvh; overflow-y:auto;
}
@media(max-width:900px){ .side { position:relative; height:auto; min-height:0 } }

.side .brand {
  display:flex; align-items:center; gap:.6rem; padding:.4rem .55rem .9rem;
  font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:-.01em;
  border-bottom:1px solid var(--line); margin-bottom:.85rem;
}
/* Brand mark is locked to fixed colors so the per-page palette swap doesn't
   pick a yellow/cream "vibe" that fights the dark logo box. */
.side .brand .mark {
  width:30px; height:30px; border-radius:8px;
  background:#0b0b0b; color:#A8DD2F;
  display:grid; place-items:center; font-weight:800; font-size:1.05rem;
  line-height:1; padding-bottom:1px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
.side .brand .lbl { color:#0b0b0b }
.side .brand .role {
  margin-left:auto; font-family:var(--font-mono); font-size:.6rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:var(--m);
  background:var(--soft); padding:.18rem .5rem; border-radius:99px;
}

.side .group { margin-bottom:.7rem }
.side .group h6 {
  font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--m); font-weight:800;
  padding:.6rem .55rem .25rem;
}
.side .item {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .6rem; border-radius:10px;
  font-size:.88rem; color:var(--ink-soft); font-weight:600;
  margin-bottom:.1rem; transition:background .12s, color .12s;
}
.side .item:hover { background:var(--soft); color:var(--ink) }
.side .item.on { background:var(--ink); color:var(--vibe) }
.side .item .em { width:18px; text-align:center; opacity:.85; flex-shrink:0 }
.side .item .badge {
  margin-left:auto; background:var(--vibe); color:var(--vibe-text);
  font-size:.62rem; font-weight:800; padding:.05rem .42rem; border-radius:99px;
}

.side .foot {
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:.55rem;
}
.side .foot .avatar {
  width:32px; height:32px; border-radius:50%; background:var(--vibe); color:var(--vibe-text);
  display:grid; place-items:center; font-weight:800; font-size:.78rem; flex-shrink:0;
}
.side .foot .meta { line-height:1.2; flex:1; min-width:0 }
.side .foot .meta .nm { font-weight:700; font-size:.86rem; color:var(--ink) }
.side .foot .meta .role-mini { font-size:.66rem; color:var(--m); font-weight:600; text-transform:uppercase; letter-spacing:.06em }
.side .foot .switch {
  font-size:.7rem; font-weight:800; color:var(--m); background:transparent;
  border:1px solid var(--line2); padding:.32rem .55rem; border-radius:99px;
  text-decoration:none;
}
.side .foot .switch:hover { background:var(--soft); color:var(--ink) }

/* ── Main column ── */
.main { padding: 1.5rem clamp(1rem, 3.4vw, 2.2rem) 4rem; max-width: 1400px; width:100% }

.crumb {
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--m); font-weight:800;
  display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem;
}
.crumb a { color:var(--m); text-decoration:none }
.crumb a:hover { color:var(--ink) }
.crumb .sep { opacity:.5 }

.page-h {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1rem;
}
.page-h h1 {
  font-family: var(--font-display); font-weight:600; letter-spacing:-.025em;
  font-size: clamp(1.65rem, 2.8vw, 2.2rem); line-height:1.1;
}
.page-h h1 em {
  font-family: var(--font-display); font-style:normal; font-weight:600;
  color:var(--ink);
}
.page-h .sub { font-size:.86rem; color:var(--m); margin-top:.3rem }

/* ucfirst: force the first letter of every heading to uppercase.
   Pierces nested inline tags (e.g. <h3>edit <em>course</em></h3>) so
   dynamic data - lesson titles, course names, board scopes - render
   capitalised even when the source string is lowercase. */
h1::first-letter, h2::first-letter, h3::first-letter,
h4::first-letter, h5::first-letter, h6::first-letter {
  text-transform: uppercase;
}

.actions { display:flex; gap:.4rem; flex-wrap:wrap }
.btn {
  display:inline-flex; align-items:center; gap:.32rem;
  border:1px solid var(--line2); background:#fff;
  font-family:inherit; font-weight:700; font-size:.84rem; color:var(--ink);
  padding:.5rem .9rem; border-radius:99px; cursor:pointer;
  text-decoration:none; transition: background .12s, border-color .12s, transform .1s;
}
.btn:hover { background:var(--soft) }
.btn.primary { background:var(--ink); color:#fff; border-color:var(--ink) }
.btn.primary:hover { background:#1c1c19; color:var(--vibe) }
.btn.lime { background:var(--vibe); color:var(--vibe-text); border-color:var(--vibe) }
.btn.lime:hover { background:var(--vibe-deep); color:#fff; border-color:var(--vibe-deep) }
.btn.sm { font-size:.76rem; padding:.36rem .68rem }

/* ── KPI strip (editorial display in big numbers) ── */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.7rem; margin: 0 0 1.2rem }
.kpi {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:.95rem 1.1rem;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.12);
}
.kpi .l { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--m); font-weight:800 }
.kpi .v { font-family:var(--font-display); font-style:normal; font-size:2rem; font-weight:600; letter-spacing:-.02em; line-height:1; margin-top:.4rem; color:var(--ink) }
.kpi .v small { font-family:var(--font-sans); font-style:normal; font-size:.78rem; color:var(--m); font-weight:700; margin-left:.18em }
.kpi .d { font-size:.74rem; font-weight:700; margin-top:.45rem }
.kpi .d.up { color:var(--green) }
.kpi .d.dn { color:var(--red) }
.kpi .d.flat { color:var(--m) }

/* ── Tabs (underline with lime active) ── */
.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--line); margin-bottom:1.2rem; overflow-x:auto; scrollbar-width:none }
.tabs::-webkit-scrollbar { display:none }
.tabs a, .tabs button {
  background:transparent; border:0; border-bottom:2px solid transparent;
  font-family:inherit; font-weight:700; font-size:.86rem; color:var(--m);
  padding:.7rem .9rem; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.36rem; text-decoration:none;
}
.tabs a:hover, .tabs button:hover { color:var(--ink) }
.tabs a.on, .tabs button.on { color:var(--ink); border-bottom-color:var(--vibe-deep) }
.tabs .ct {
  font-size:.62rem; font-weight:800;
  background:var(--soft); color:var(--m); padding:.08rem .45rem; border-radius:99px;
}
.tabs .on .ct { background:var(--vibe); color:var(--vibe-text) }

/* ── Card ── */
.card {
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.1rem 1.2rem;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.10);
}
.card-h { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem }
.card-h h3 { font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; line-height:1.2 }
.card-h h3 em { font-family:var(--font-display); font-style:normal; font-weight:600; color:var(--ink); font-size:1.15em; vertical-align:-0.04em }
.card-h .meta { margin-left:auto; font-size:.74rem; color:var(--m); font-weight:600 }

/* ── Searchbar ── */
.searchbar {
  display:flex; align-items:center; gap:.45rem; background:#fff;
  border:1px solid var(--line); border-radius:99px; padding:.55rem 1rem;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,.10);
}
.searchbar input {
  flex:1; border:0; outline:none; background:transparent;
  font-family:inherit; font-size:.9rem; color:var(--ink); padding:.05rem 0;
}
.searchbar .em { color:var(--m); font-size:.96rem }
.searchbar .filter {
  font-size:.7rem; font-weight:800; color:var(--ink-soft); padding:.26rem .65rem;
  border-radius:99px; background:var(--soft); border:0; font-family:inherit; cursor:pointer;
}
.searchbar .filter.on { background:var(--ink); color:var(--vibe) }

/* ── Table ── */
.tbl {
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,.10);
}
.tbl th {
  background:var(--soft); font-family:var(--font-mono); font-size:.62rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--m); font-weight:800;
  text-align:left; padding:.7rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td {
  padding:.78rem 1rem; border-bottom:1px solid var(--line); font-size:.88rem;
  vertical-align:middle;
}
.tbl tr:last-child td { border-bottom:0 }
.tbl tbody tr:hover td { background:var(--bg) }
.tbl .who { display:inline-flex; align-items:center; gap:.55rem }
.tbl .who .av {
  width:30px; height:30px; border-radius:50%; background:var(--vibe);
  color:var(--vibe-text); font-weight:800; font-size:.72rem;
  display:grid; place-items:center; flex-shrink:0;
}
.tbl .who .nm { font-weight:700; color:var(--ink) }
.tbl .who .sub { font-size:.72rem; color:var(--m); font-weight:600 }
.tbl a.row-link { color:var(--ink); font-weight:700; text-decoration:none }
.tbl a.row-link:hover { color:var(--vibe-deep); text-decoration:underline }

/* ── Pills (color cues) ── */
.pill {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.66rem; font-weight:800; padding:.18rem .58rem; border-radius:99px;
  background:var(--soft); color:var(--ink-soft); white-space:nowrap;
  text-transform:uppercase; letter-spacing:.03em;
}
.pill.green  { background:var(--green-bg); color:var(--green) }
.pill.yellow { background:var(--yellow-bg); color:var(--yellow) }
.pill.red    { background:var(--red-bg); color:var(--red) }
.pill.plum   { background:rgba(124,92,230,.15); color:var(--plum-ink) }
.pill.sky    { background:rgba(122,183,255,.20); color:var(--sky-ink) }
.pill.lime   { background:var(--vibe); color:var(--vibe-text) }
.pill.outline{ background:transparent; border:1px solid var(--line2); color:var(--ink-soft) }

/* ── Message board ── */
.thread {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:1rem 1.1rem; margin-bottom:.55rem;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,.10);
}
.thread .head { display:flex; align-items:center; gap:.55rem; margin-bottom:.4rem; flex-wrap:wrap }
.thread .av {
  width:32px; height:32px; border-radius:50%; background:var(--soft);
  color:var(--ink); display:grid; place-items:center; font-weight:800; font-size:.74rem;
}
.thread .nm { font-weight:800; font-size:.86rem }
.thread .when { font-size:.7rem; color:var(--m); margin-left:auto }
.thread .body { font-size:.9rem; line-height:1.55; color:var(--ink-soft); margin-bottom:.5rem }
.thread .replies { font-size:.74rem; color:var(--m); display:flex; gap:.5rem; align-items:center }
.thread .replies button {
  background:transparent; border:0; font-size:.74rem; color:var(--ink); font-weight:800;
  padding:0; cursor:pointer; font-family:inherit;
}
.thread .replies button:hover { color:var(--vibe-deep); text-decoration:underline }

/* ── Notes ── */
.notes { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:.7rem }
.note {
  background: linear-gradient(135deg, rgba(168,221,47,.05) 0%, #fffef7 70%);
  border:1px solid #f0e6c5; border-radius:14px;
  padding:.95rem 1.05rem; box-shadow: 0 8px 18px -12px rgba(0,0,0,.18);
}
.note .h { display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem }
.note .h .tag {
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--vibe-deep); background:var(--vibe-soft); padding:.1rem .45rem; border-radius:99px;
}
.note .h .when { font-size:.66rem; color:var(--m2); margin-left:auto; font-family:var(--font-mono) }
.note .body { font-size:.88rem; line-height:1.55; color:var(--ink-soft); white-space:pre-wrap }

/* ── Activity feed ── */
.activity {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:.45rem 0;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,.10);
}
.activity .row {
  display:grid; grid-template-columns: 60px 110px 1fr auto; gap:.7rem; padding:.6rem 1.1rem;
  font-size:.86rem; border-top:1px solid var(--line); align-items:center;
}
.activity .row:first-child { border-top:0 }
.activity .ts { font-family:var(--font-mono); font-size:.7rem; color:var(--m); font-weight:700 }
.activity .ev {
  font-family:var(--font-mono); font-size:.66rem; color:var(--vibe-deep); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
}
.activity .txt { color:var(--ink-soft); line-height:1.5 }
.activity .who { font-weight:800; color:var(--ink) }

/* ── Two-column layouts ── */
.split { display:grid; grid-template-columns: 1.65fr 1fr; gap:1rem }
@media(max-width:900px){ .split { grid-template-columns:1fr } }

/* ── Empty state ── */
.empty { padding:2.5rem 1.2rem; text-align:center; color:var(--m) }
.empty .em { font-size:1.8rem; margin-bottom:.45rem }
.empty .h { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:.2rem }
.empty .sub { font-size:.84rem }

/* ── Pagination ── */
.pager {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:1rem .1rem .2rem; font-size:.82rem;
}
.pager-info {
  color:var(--m); font-weight:600; margin-right:auto;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em;
}
.pager-info strong { color:var(--ink); font-weight:700 }
.pager-nums { display:inline-flex; align-items:center; gap:.18rem }
.pager-btn {
  background:transparent; border:0; color:var(--ink-soft);
  font-family:inherit; font-weight:700; font-size:.84rem;
  padding:0; cursor:pointer;
  min-width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .12s, color .12s, transform .12s;
}
.pager-btn.nav {
  background:#fff; border:1px solid var(--line2);
  padding:0 .85rem; border-radius:99px; min-width:auto; font-size:.78rem;
  gap:.32rem; display:inline-flex;
}
.pager-btn:hover:not(:disabled):not(.on) { background:var(--soft); color:var(--ink); transform:translateY(-1px) }
.pager-btn.nav:hover:not(:disabled) { border-color:var(--ink) }
.pager-btn.on {
  background:var(--ink); color:var(--vibe);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.35);
}
.pager-btn:disabled { opacity:.35; cursor:not-allowed }
.pager-btn:disabled:hover { background:transparent; transform:none }
.pager-ellipsis { color:var(--m2); font-weight:700; padding:0 .15rem; user-select:none }

/* ── Mobile ── */
@media(max-width:560px){
  .main { padding:1rem .9rem 3rem }
  .tabs a, .tabs button { padding:.6rem .7rem }
  .tbl th, .tbl td { padding:.6rem .7rem }
  .pager-info { width:100%; margin-bottom:.3rem }
}

/* ── Mobile table reflow ───────────────────────────────────────────────
   Narrow screens can't carry a 5-6 column grid without horizontal scroll,
   so we collapse each .tbl row into a stacked card. The label for each
   value comes from data-th, which mount() sets automatically from the
   matching <thead> column - so any corp page that uses <table class=tbl>
   gets the card layout for free without changing its row templates. */
@media(max-width:640px){
  .tbl, .tbl tbody { display:block; background:transparent; border:0; box-shadow:none }
  .tbl thead { display:none }
  .tbl tr {
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:.9rem 1rem;
    margin-bottom:.7rem;
    box-shadow:0 6px 18px -14px rgba(0,0,0,.10);
  }
  .tbl tr:hover td { background:transparent }
  .tbl td {
    display:flex;
    align-items:baseline;
    gap:.55rem;
    padding:.24rem 0;
    border:0;
    font-size:.87rem;
    text-align:left !important;
    min-width:0 !important;
    flex-wrap:wrap;
  }
  .tbl td[data-th]::before {
    content: attr(data-th);
    flex:0 0 auto;
    min-width:96px;
    font-family:var(--font-mono);
    font-size:.58rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--m);
    font-weight:800;
  }
  /* The first cell is the row's title (course / learner / instructor name).
     No label, larger text, soft divider below to separate from meta. */
  .tbl tr > td:first-child:not([colspan]) {
    margin-bottom:.55rem;
    padding-bottom:.6rem;
    border-bottom:1px dashed var(--line);
    font-size:1rem;
  }
  .tbl tr > td:first-child:not([colspan])::before { content:none !important }
  /* Empty-state rows (colspan) take the whole card, no labels. */
  .tbl td[colspan] { padding:0 }
  .tbl td[colspan]::before { content:none !important }
  .tbl td[colspan] .empty { padding:1.2rem .5rem }

  /* Searchbar: search icon + input share the first line; all three filter
     chips drop into a clean strip on the second line. Input basis is sized
     just under 100% so the icon stays beside it but no filter can squeeze
     onto row 1. */
  .searchbar { flex-wrap:wrap; row-gap:.55rem; border-radius:20px; padding:.55rem .95rem }
  .searchbar .em { flex:0 0 auto }
  .searchbar input { flex:1 1 calc(100% - 2rem); min-width:0; padding:.15rem 0 }
  .searchbar .filter { flex:0 0 auto }
}