/* Takeed Academy — Admin Console
   ----------------------------------------------------------------------------
   The console does NOT build its own layout. It re-skins the site's real shell:

       body.adm-mode  #lx-side   -> admin sidebar
       body.adm-mode  #lx-tabs   -> admin top bar
       body.adm-mode  #lx-view   -> page body

   Everything is gated on body.adm-mode, so not one rule can reach a learner or
   public page. Reuses the tokens from index.html; no new palette. --lime is
   deliberately absent — the hard rule keeps it off light backgrounds.

   The top bar (.lx-bar) is 56px. That number appears below as --adm-top and is
   the anchor for the sticky sidebar; if the bar's height changes, change it here.
   ========================================================================== */

body.adm-mode{ --adm-top:56px; --adm-side:242px; }

/* ---- sidebar ------------------------------------------------------------
   .lx-shell is `display:grid; grid-template-columns:242px 1fr`, so #lx-side is
   a grid item. Grid items stretch to the row height by default, which makes
   `position:sticky` a no-op — the element already spans the whole track, so it
   has nowhere to stick. `align-self:start` collapses it to its own height and
   is what actually makes the sticky work. Removing it silently reverts the
   sidebar to scrolling away, which is what it did before.                    */
body.adm-mode #lx-side{
  position:sticky;
  top:var(--adm-top);
  align-self:start;                          /* REQUIRED — see above */
  height:calc(100vh - var(--adm-top));
  overflow-y:auto;
  overscroll-behavior:contain;               /* don't scroll the page at the ends */
  background:var(--deep);
  border-right:0;
  display:flex; flex-direction:column;
  padding:10px 8px;
  box-sizing:border-box;
  scrollbar-width:thin; scrollbar-color:#ffffff26 transparent;
  z-index:5;
}
body.adm-mode #lx-side::-webkit-scrollbar{width:6px}
body.adm-mode #lx-side::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}

.adm-grp{
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-deep-dim); padding:14px 10px 6px;
}
.adm-nav{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  font-size:13px; color:var(--on-deep); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.adm-nav span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-nav i{font-size:16px;flex:none;opacity:.8}
.adm-nav:hover{background:#ffffff12;color:#fff}
.adm-nav.is-on{background:var(--brand);color:#fff;font-weight:700}
.adm-nav.is-on i{opacity:1}
.adm-nav:focus-visible{outline:2px solid var(--brand-br);outline-offset:1px}
.adm-soon{
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-deep-dim);
  border:1px solid #ffffff2e;border-radius:20px;padding:1px 6px;flex:none;
}
.adm-sidefoot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid #ffffff14}
.adm-envtag{font-size:10px;color:var(--on-deep-dim);display:flex;align-items:center;gap:6px}
.adm-envtag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand-br);flex:none}

/* ---- top bar ------------------------------------------------------------
   Replaces the learner tabs (Enrolled / Completed / Certified), which were
   dead weight on every admin page. Destinations live in the sidebar; this
   says where you are and opens the drawer on mobile.                        */
.adm-topnav{align-items:center;gap:10px}
.adm-burger{
  display:none;                      /* desktop: the sidebar is always visible */
  background:none;border:1px solid rgba(255,255,255,.22);border-radius:8px;
  color:var(--on-deep);cursor:pointer;
  width:32px;height:32px;align-items:center;justify-content:center;font-size:17px;
}
.adm-burger:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.adm-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--on-deep)}
.adm-crumb b{color:#fff;font-weight:800}
.adm-crumb i{font-size:13px;opacity:.5}
.adm-crumb span{font-weight:600}

/* ---- page body ----------------------------------------------------------- */
body.adm-mode #lx-view{background:var(--canvas)}
.adm-body{padding:22px;min-width:0}

.adm-ph{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.adm-ph h1{font-size:22px;font-weight:800;margin:0 0 3px;color:var(--deep2)}
.adm-ph p{margin:0;font-size:13px;color:var(--muted)}
.adm-phr{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.adm-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:14px;
}
.adm-cardhead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.adm-cardhead h3{font-size:13.5px;font-weight:800;margin:0;color:var(--deep2)}
.adm-cardhead > *:last-child{margin-left:auto}

.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.adm-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px;position:relative;
}
.adm-stat i{font-size:17px;color:var(--brand);margin-bottom:4px}
.adm-stat b{font-size:25px;font-weight:800;color:var(--deep2);line-height:1.1}
.adm-stat span{font-size:12px;color:var(--muted)}
.adm-stat em{font-style:normal;font-size:10.5px;color:var(--muted);opacity:.85;margin-top:3px}
/* No value = no number. Visibly inert, never a zero that reads as fact. */
.adm-stat.is-dead b{color:var(--line)}
.adm-stat.is-dead i{color:var(--muted);opacity:.5}

.adm-empty{text-align:center;padding:44px 20px}
.adm-empty i{font-size:34px;color:var(--muted);opacity:.4;display:block;margin-bottom:12px}
.adm-empty h3{font-size:15px;margin:0 0 8px;color:var(--deep2)}
.adm-empty p{font-size:12.5px;color:var(--muted);max-width:460px;margin:0 auto 14px;line-height:1.6}
.adm-empty code{background:var(--canvas);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:11.5px}

/* ---- tabs --------------------------------------------------------------- */
.adm-tabs{
  display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none;
}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tab{
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:9px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
}
.adm-tab:hover{color:var(--ink)}
.adm-tab.is-on{color:var(--brand);border-bottom-color:var(--brand);font-weight:800}
.adm-tab b{background:var(--canvas);border-radius:20px;padding:1px 6px;font-size:10.5px;font-weight:800;color:var(--muted)}
.adm-tab.is-on b{background:var(--brand-tint);color:var(--brand-dk)}

/* ---- tables ------------------------------------------------------------- */
.adm-tw{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.adm-t{width:100%;border-collapse:collapse;font-size:12.5px}
.adm-t th{
  text-align:left;padding:9px 12px;background:var(--canvas);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;
}
.adm-t td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-t tbody tr:last-child td{border-bottom:0}
.adm-t tbody tr[data-row]{cursor:pointer}
.adm-t tbody tr[data-row]:hover{background:var(--brand-tint)}
.adm-t tbody tr[data-row]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.adm-pill{
  display:inline-block;border-radius:20px;padding:2px 8px;
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.adm-pill.ok    {background:var(--brand-tint);color:var(--brand-deep);border-color:#16A89644}
.adm-pill.warn  {background:#FFF4E0;color:#8A5A00;border-color:#E0A94044}
.adm-pill.bad   {background:#FDECEC;color:#8C2020;border-color:#C7404044}
.adm-pill.grey  {background:var(--canvas);color:var(--muted);border-color:var(--line)}
.adm-pill.hidden{background:#EEF0F4;color:#5C6674;border-color:var(--line)}

.adm-note{
  background:var(--brand-tint);border:1px solid #16A89633;border-left:3px solid var(--brand);
  border-radius:8px;padding:10px 12px;font-size:12px;color:var(--deep2);
  margin-bottom:14px;line-height:1.6;
}
.adm-note.warn{background:#FFF8EC;border-color:#E0A94040;border-left-color:#E0A940}
.adm-note.bad {background:#FDECEC;border-color:#C7404040;border-left-color:#C74040}

.adm-src{font-size:11px;color:var(--muted);margin-bottom:10px}
.adm-src code{background:var(--canvas);border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* ---- settings switches --------------------------------------------------- */
.adm-sw{padding:12px 0;border-bottom:1px solid var(--line)}
.adm-sw:first-child{padding-top:0}
.adm-sw:last-child{border-bottom:0;padding-bottom:0}
.adm-sw-main{display:flex;align-items:center;gap:10px;cursor:pointer}
.adm-sw-main input{width:16px;height:16px;flex:none;accent-color:var(--brand);cursor:pointer}
.adm-sw-main input:disabled{cursor:wait;opacity:.5}
.adm-sw-t{font-size:13px;font-weight:700;color:var(--deep2)}
.adm-sw-h{margin:4px 0 0 26px;font-size:12px;color:var(--muted);line-height:1.5}
.adm-sw-st{margin:6px 0 0 26px;font-size:12px;color:var(--muted);line-height:1.5}
.adm-sw-st b.is-on {color:var(--brand-dk)}
.adm-sw-st b.is-off{color:#8A5A00}
.adm-sw-n{
  margin:8px 0 0 26px;font-size:11px;color:var(--muted);line-height:1.5;
  border-left:2px solid var(--line);padding-left:8px;
}
@media (max-width:640px){
  .adm-sw-h,.adm-sw-st,.adm-sw-n{margin-left:0}
}

/* ---- responsive ---------------------------------------------------------
   The site's own rule at index.html:288 turns .lx-shell into a single column
   under 820px and reflows .lx-side into a horizontal strip. That would splay
   six admin groups across the top, so the console overrides it: below 900px
   the sidebar becomes an off-canvas drawer opened by the top-bar burger.
   These selectors are more specific (body.adm-mode #lx-side) AND this file
   loads after the inline <style>, so they win on both counts.               */
@media (max-width:900px){
  .adm-burger{display:inline-flex}
  body.adm-mode .lx-shell{grid-template-columns:1fr}
  body.adm-mode #lx-side{
    position:fixed; left:0; top:var(--adm-top);
    width:min(84vw,var(--adm-side));
    height:calc(100vh - var(--adm-top));
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:60;
    /* the site's 820px rule tries to make this a wrap-around row */
    flex-direction:column; border-bottom:0;
  }
  body.adm-mode.adm-nav-open #lx-side{transform:translateX(0)}
  #adm-scrim{
    position:fixed; inset:var(--adm-top) 0 0 0;
    background:#03192Baa; z-index:55;
  }
  /* The drawer must not sit under the top bar when it is open. */
  body.adm-mode.adm-nav-open{overflow:hidden}
}
@media (max-width:640px){
  .adm-body{padding:14px}
  .adm-ph h1{font-size:19px}
  .adm-crumb span{display:none}          /* keep just "Admin" — the bar is tight */
  .adm-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  .adm-stat{padding:12px}
  .adm-stat b{font-size:21px}

  /* Cards, not a table squeezed to nothing. Each cell carries its own label
     via data-h, so no header row is needed and nothing runs off-screen.
     Do NOT put an inline min-width on these tables — an inline style outranks
     this block and the columns overflow again. */
  .adm-tw{border:0;background:none;overflow:visible}
  .adm-t{border-collapse:separate;border-spacing:0 8px}
  .adm-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .adm-t tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 10px}
  .adm-t td{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:6px 0;border-bottom:1px solid var(--line);text-align:right;
  }
  .adm-t tr td:last-child{border-bottom:0}
  .adm-t td::before{
    content:attr(data-h);flex:none;text-align:left;
    font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted);
  }
  .adm-t td:empty{display:none}
}