/* ============================================================================
   Admin console shell
   ----------------------------------------------------------------------------
   A dark fixed sidebar, a light top bar, and the section content beside them.

   This replaces a single row of nineteen underline tabs. Nineteen never fitted:
   the row wrapped onto three lines at desktop width, so the "tabs" were really a
   paragraph of links, and which one was current was the least visible thing on
   the screen. A vertical rail gives every entry the same width and one obvious
   highlight, and it has room for the two groups the list always had - the things
   an admin edits, and the things the system records.

   What did NOT change: every section is still a Bootstrap tab pane with the same
   id, and every link still carries data-bs-toggle="tab" and its original
   id="link-*". The console's JavaScript selects on those - lazy-loading the
   embedded dashboards, refreshing a pane when it opens, and resolving deep links
   like admin.html#tab-credit. Re-skinning the chrome while keeping that contract
   is what lets 3,000 lines of console behaviour carry over untouched.
   ========================================================================= */

.acon {
  /* The rail is dark in both themes. It is chrome, not content: the tables and
     forms beside it follow the theme, and a rail that inverted with them would
     make the whole screen change character rather than the part being read. */
  --ac-rail: #171b38;
  --ac-rail-2: #1f2447;
  --ac-rail-line: rgba(255, 255, 255, .08);
  --ac-rail-ink: #cdd3f0;
  --ac-rail-muted: #7c85b4;
  --ac-brand: #4f46e5;
  --ac-brand-2: #7c3aed;

  --ac-ink: #1e2337;
  --ac-muted: #626b8c;
  --ac-line: #e4e7f2;
  --ac-card: #fff;
  --ac-bg: #f6f7fb;
  --ac-rail-w: 19rem;
}

[data-bs-theme="dark"] .acon {
  --ac-ink: #e6e9f5;
  --ac-muted: #99a1c4;
  --ac-line: #2b3157;
  --ac-card: #171b2f;
  --ac-bg: #10131f;
}

.acon { background: var(--ac-bg); color: var(--ac-ink); min-height: 100vh; }

/* ---------- the rail ------------------------------------------------------ */

.ac-rail {
  position: fixed; inset-block: 0; left: 0; width: var(--ac-rail-w); z-index: 1040;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--ac-rail), var(--ac-rail-2));
  border-right: 1px solid var(--ac-rail-line);
  overflow-y: auto; overscroll-behavior: contain;
}
/* A thin, low-contrast scrollbar. The default light one cut a bright stripe down
   the dark rail whenever the list overflowed. */
.ac-rail::-webkit-scrollbar { width: 6px; }
.ac-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }
.ac-rail { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

.ac-brand {
  display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.25rem 1.05rem;
  text-decoration: none; color: #fff; flex: 0 0 auto;
}
/* The brand is a link home. The console has no site navbar - the top bar here
   replaces it - so without this there is no way back out of the admin area. */
.ac-brand:hover { color: #fff; }
.ac-brand-mark {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .8rem;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--ac-brand), var(--ac-brand-2));
  box-shadow: 0 .4rem .9rem rgba(79, 70, 229, .4);
}
.ac-brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-brand-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ac-brand-name { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.ac-brand-name em { font-style: normal; color: #a5b4fc; }
.ac-brand-sub { font-size: .64rem; color: var(--ac-rail-muted); letter-spacing: .01em; }

/* A disclosure, not a label. Both groups start open, so every section is one click away;
   the headings are there to fold away the half you are not working in. */
.ac-lists { padding-bottom: .5rem; }
.ac-sec + .ac-sec { border-top: 1px solid var(--ac-rail-line); }
.ac-group {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .95rem 1.25rem .9rem; border: 0; background: none; cursor: pointer;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ac-rail-muted); text-align: left;
}
.ac-group:hover { color: #fff; }
.ac-group-txt { flex: 1 1 auto; }
/* Points right when closed and down when open, so the state is legible without reading the
   list. Sized explicitly: Font Awesome swaps the span for an <svg height:1em>, and the
   heading font-size would otherwise decide the glyph. */
.ac-group-caret {
  flex: 0 0 auto; width: .7rem; font-size: .62rem; line-height: 1;
  transition: transform .16s ease;
}
.ac-sec.open .ac-group-caret { transform: rotate(90deg); }
/* How many sections are inside, so a closed group still says how much it holds. */
.ac-group-n {
  flex: 0 0 auto; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--ac-rail-muted);
  font-size: .62rem; line-height: 1.3rem; text-align: center; letter-spacing: 0;
}
.ac-sec.open .ac-group-n { background: rgba(165, 180, 252, .18); color: #c7d2fe; }

/* display rather than max-height: the lists are different lengths and an animated height
   would need a magic number per group that goes stale the moment a section is added. */
.ac-nav { list-style: none; margin: 0; padding: 0 .75rem .6rem; display: none; }
.ac-sec.open .ac-nav { display: block; }

.ac-link {
  display: flex; align-items: center; gap: .8rem; padding: .62rem .75rem;
  margin-bottom: .15rem; border-radius: .7rem; text-decoration: none;
  color: var(--ac-rail-ink); font-size: .88rem; font-weight: 600;
  transition: background-color .14s ease, color .14s ease;
}
/* Rounded on purpose, unlike the site's buttons. These are navigation rows, not
   things you press to act - the same call already made for the lesson menu and
   the other disclosures. */
.ac-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ac-link.active {
  background: linear-gradient(135deg, var(--ac-brand), #6d5ae6); color: #fff;
  box-shadow: 0 .45rem 1rem rgba(79, 70, 229, .45);
}
.ac-link-ico {
  flex: 0 0 auto; width: 1.35rem; font-size: .95rem; line-height: 1; text-align: center;
  color: var(--ac-rail-muted);
}
/* Explicit, not inherited. Font Awesome's SVG build swaps the span for an
   <svg height:1em>, so an inherited size would let the row's font-size decide the
   glyph and the icons would drift out of their column. */
.ac-link:hover .ac-link-ico, .ac-link.active .ac-link-ico { color: inherit; }
.ac-link-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Count badges. Hidden while empty rather than rendered as a "0" pip - an admin
   scanning the rail should see a mark only where something is waiting. */
.ac-badge {
  flex: 0 0 auto; min-width: 1.25rem; padding: 0 .4rem; border-radius: 999px;
  background: #e5484d; color: #fff; font-size: .68rem; font-weight: 800;
  line-height: 1.45rem; text-align: center;
}
.ac-badge:empty, .ac-badge.d-none { display: none; }
.ac-badge.info { background: var(--ac-brand); }

.ac-rail-foot {
  margin-top: auto; padding: 1rem 1.25rem 1.2rem; font-size: .7rem;
  color: var(--ac-rail-muted); border-top: 1px solid var(--ac-rail-line);
}
.ac-rail-foot a { color: #a5b4fc; text-decoration: none; }
.ac-rail-foot a:hover { text-decoration: underline; }

/* ---------- the top bar --------------------------------------------------- */

.ac-main { margin-left: var(--ac-rail-w); min-width: 0; }

.ac-top {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.5rem; background: var(--ac-card);
  border-bottom: 1px solid var(--ac-line);
}
.ac-burger {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: 0; background: none; color: var(--ac-muted); font-size: 1.1rem; cursor: pointer;
  border-radius: .5rem;
}
.ac-burger:hover { background: var(--ac-bg); color: var(--ac-ink); }

.ac-search { position: relative; flex: 1 1 26rem; max-width: 30rem; }
.ac-search input {
  width: 100%; padding: .55rem 3.6rem .55rem 2.4rem; border-radius: .7rem;
  border: 1px solid var(--ac-line); background: var(--ac-bg); color: var(--ac-ink);
  font-size: .86rem;
}
.ac-search input:focus { outline: 2px solid var(--ac-brand); outline-offset: -1px; border-color: transparent; }
.ac-search .ico {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--ac-muted); font-size: .85rem; pointer-events: none;
}
.ac-search kbd {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  padding: .1rem .4rem; border-radius: .35rem; border: 1px solid var(--ac-line);
  background: var(--ac-card); color: var(--ac-muted); font-size: .68rem; font-weight: 600;
}
.ac-top-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.ac-pro {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .3rem .7rem; border-radius: .7rem; text-decoration: none;
  background: linear-gradient(135deg, #ede9fe, #e0e7ff); color: #4338ca;
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
}
.ac-pro .fa-crown { font-size: .95rem; }
[data-bs-theme="dark"] .ac-pro { background: rgba(99, 102, 241, .2); color: #c7d2fe; }

.ac-bell {
  position: relative; width: 2.4rem; height: 2.4rem; border-radius: .7rem;
  display: grid; place-items: center; border: 0; background: none;
  color: var(--ac-muted); font-size: 1rem; cursor: pointer; text-decoration: none;
}
.ac-bell:hover { background: var(--ac-bg); color: var(--ac-ink); }
.ac-bell .n {
  position: absolute; top: .15rem; right: .1rem; min-width: 1.05rem; padding: 0 .25rem;
  border-radius: 999px; background: #e5484d; color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 1.05rem;
}
.ac-bell .n:empty { display: none; }

.ac-acct {
  display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem;
  border-radius: .7rem; border: 0; background: none; color: var(--ac-ink);
  font-size: .88rem; font-weight: 650; cursor: pointer;
}
.ac-acct:hover { background: var(--ac-bg); }
.ac-avatar {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .9rem; font-weight: 800; line-height: 1;
  color: #fff; background: linear-gradient(135deg, var(--ac-brand), var(--ac-brand-2));
}
.ac-acct .caret { font-size: .6rem; color: var(--ac-muted); }

/* ---------- page head and section cards ----------------------------------- */

.ac-body { padding: 1.5rem; }
.ac-h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .2rem; }
.ac-sub { color: var(--ac-muted); font-size: .88rem; margin: 0 0 1.25rem; }

/* ---------- content ------------------------------------------------------- */

/* The panes were written against Bootstrap cards on a plain page. They keep
   working; these only soften the borders so a table does not sit in a hard box
   inside another hard box. */
.acon .card { border-color: var(--ac-line); border-radius: .9rem; }
.acon .card-header { background: transparent; border-bottom-color: var(--ac-line); }
.acon .table > :not(caption) > * > * { padding-block: .7rem; }
.acon .admin-embed { width: 100%; border: 0; min-height: 78vh; display: block; }

/* Collapsing the rail on a wide screen. The tables in here are the widest thing on the site,
   and this hands them back 19rem without leaving the page. The burger is the same control that
   opens the overlay on a narrow screen - see wireChrome in js/admin-shell.js. */
.acon.rail-off { --ac-rail-w: 0rem; }
.acon.rail-off .ac-rail { transform: translateX(-100%); }
.ac-rail { transition: transform .2s ease; }
.ac-main { transition: margin-left .2s ease; }

/* ---------- responsive ---------------------------------------------------- */

.ac-scrim { display: none; }

@media (max-width: 1199.98px) {
  /* The rail slides over the content rather than squeezing it: the tables inside
     are already the widest thing on the page and cannot give up 19rem. */
  .ac-rail { transform: translateX(-100%); transition: transform .2s ease; }
  .acon.nav-open .ac-rail { transform: none; }
  .ac-main { margin-left: 0; }
  .acon.nav-open .ac-scrim {
    display: block; position: fixed; inset: 0; z-index: 1035;
    background: rgba(9, 12, 24, .5);
  }
}
@media (max-width: 767.98px) {
  .ac-body { padding: 1rem; }
  .ac-search kbd, .ac-pro { display: none; }
  .ac-acct .nm { display: none; }
  .ac-h1 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-rail, .ac-card, .ac-link { transition: none; }
  .ac-card:hover { transform: none; }
}

/* ---------- nested tabs inside a section ---------------------------------- */

/* Site Settings splits into Settings / Learn courses / Project downloads. An underline strip,
   deliberately not the rail's filled-pill treatment: these are a level below the section, and
   giving them the same weight would make the page look like it had two rails. */
.acon .stab-nav { border-bottom: 1px solid var(--ac-line); gap: .25rem; }
.acon .stab-nav .nav-link {
  padding: .55rem .9rem; border: 0; border-bottom: 2px solid transparent;
  color: var(--ac-muted); font-size: .86rem; font-weight: 650;
}
.acon .stab-nav .nav-link:hover { color: var(--ac-ink); }
.acon .stab-nav .nav-link.active {
  color: var(--ac-brand); border-bottom-color: var(--ac-brand); background: none;
}
[data-bs-theme="dark"] .acon .stab-nav .nav-link.active { color: #a5b4fc; border-bottom-color: #a5b4fc; }