/* ============================================================
   LearnHub theme: "Material" — Creative Tim dashboard style
   Light-gray canvas · white floating sidebar with dark active
   pill · white cards with dark icon tiles · green data accents.
   CSS-only: targets existing markup, changes no functionality.
   ============================================================ */

/* ---------- canvas & frame ---------- */
body.lh-app {
  background: #f0f2f5 !important;
}
body.lh-app main.lh-main {
  max-width: 1320px !important;
}

/* ---------- sidebar: white floating card ---------- */
body.lh-app .lh-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e6eaf0 !important;
  box-shadow: 6px 0 22px -14px rgba(15, 23, 42, .18) !important;
}
.lh-sidebar .lh-side-head {
  border-bottom: 1px solid #eef1f5 !important;
}
.lh-sidebar .lh-side-head img[src*="logo.png"] {
  background: #0f172a;
  border-radius: 10px;
  padding: 3px;
}
.lh-side-sec {
  color: #8a94a6 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.lh-side-link {
  color: #4b5563 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  transition: background .18s ease, color .18s ease !important;
}
.lh-side-link:hover {
  background: #f1f4f8 !important;
  color: #1e293b !important;
}
.lh-side-link.active {
  background: #2b3547 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px -6px rgba(30, 41, 59, .55) !important;
}
.lh-side-link.active:hover {
  background: #232c3b !important;
  color: #ffffff !important;
}
.lh-side-foot {
  border-top: 1px solid #eef1f5 !important;
}

/* ---------- top bar ---------- */
body.lh-app .glass.lh-topbar {
  background: rgba(240, 242, 245, .88) !important;
  border-bottom: 1px solid #e3e8ee !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}
.lh-ico {
  background: #ffffff !important;
  border: 1px solid #e3e8ee !important;
  border-radius: 10px !important;
}
.lh-ico:hover {
  border-color: #cbd5e1 !important;
}

/* ---------- hero: flat page header, no paper/tape ---------- */
.lh-hero {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.lh-hero-paper {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.lh-tape {
  display: none !important;
}
.lh-kicker {
  color: #7c8798 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
.lh-hero h1 {
  color: #2b3547 !important;
  font-weight: 800 !important;
}

/* ---------- buttons: dark slate primary ---------- */
main .bg-emerald-600,
main .bg-emerald-700,
main .bg-indigo-600,
main .lh-hero-cta {
  background: #2b3547 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 14px -6px rgba(30, 41, 59, .5) !important;
  transition: background .18s ease, box-shadow .18s ease !important;
}
main .bg-emerald-600:hover,
main .bg-emerald-700:hover,
main .bg-indigo-600:hover,
main .lh-hero-cta:hover {
  background: #1d2534 !important;
  box-shadow: 0 8px 18px -8px rgba(30, 41, 59, .55) !important;
}
main a[class*="bg-emerald-"],
main a[class*="bg-indigo-"] {
  border-radius: 10px !important;
}
main button[class*="border-slate-200"],
main a[class*="border-slate-300"] {
  background: #ffffff !important;
  border: 1px solid #e3e8ee !important;
  border-radius: 10px !important;
  color: #475569 !important;
}
main button[class*="border-slate-200"]:hover,
main a[class*="border-slate-300"]:hover {
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* ---------- cards: white, floating, subtle hover ---------- */
body.lh-app main .rounded-2xl.bg-white,
body.lh-app main .rounded-3xl.bg-white {
  border-radius: 16px !important;
  border: 1px solid #eef0f4 !important;
  box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .1) !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
body.lh-app main .rounded-2xl.bg-white:hover,
body.lh-app main .rounded-3xl.bg-white:hover {
  box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .16) !important;
  transform: translateY(-2px) !important;
}

/* ---------- stat tiles: dark rounded-square icon chips ---------- */
main .rounded-2xl.bg-white .grid.h-9,
main .rounded-2xl.bg-white .grid.h-10,
main .rounded-2xl.bg-white .grid.h-11 {
  background: #2b3547 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 12px -6px rgba(30, 41, 59, .5) !important;
}
main [data-live-stat],
main .lh-num {
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
}
main .rounded-2xl.bg-white p[class*="uppercase"] {
  color: #7c8798 !important;
  letter-spacing: .08em !important;
}

/* ---------- headings ---------- */
main h1, main h2, main h3 {
  color: #2b3547 !important;
}
main h2 {
  font-weight: 800 !important;
}

/* ---------- tabs ---------- */
main button[data-tab-btn] {
  border-radius: 10px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}
main button[data-tab-btn][aria-selected="true"] {
  background: #2b3547 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px -4px rgba(30, 41, 59, .45) !important;
}

/* ---------- tables ---------- */
main table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}
main table thead th {
  background: #f7f9fb !important;
  color: #7c8798 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #eef0f4 !important;
}
main table tbody td {
  border-bottom: 1px solid #f1f3f7 !important;
  color: #475569 !important;
}
main table tbody tr {
  transition: background .16s ease !important;
}
main table tbody tr:hover {
  background: #f7fafc !important;
}

/* ---------- forms ---------- */
main input,
main select,
main textarea {
  background: #ffffff !important;
  border: 1px solid #dfe4ec !important;
  border-radius: 10px !important;
}
main input:focus,
main select:focus,
main textarea:focus {
  border-color: #10b981 !important;
}

/* ---------- notifications dropdown ---------- */
.lh-panel {
  border-radius: 14px !important;
  border: 1px solid #eef0f4 !important;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .28) !important;
}

/* ---------- charts ---------- */
main [data-live-svg] svg {
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- focus rings (WCAG) ---------- */
main a:focus-visible,
main button:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible,
.lh-side-link:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.lh-app main * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- mobile polish ---------- */
@media (max-width: 640px) {
  body.lh-app main.lh-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .lh-sidebar {
    border-right: none !important;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35) !important;
  }
}

/* ---------- floating sidebar (Creative Tim style) ----------
   Detaches the rail from the screen edge on desktop: inset all
   around, rounded corners, deep soft shadow. Specificity is
   raised (html body.lh-app / html body.lh-rail) so it wins over
   the density layer's !important geometry on any theme. */
@media (min-width:1024px) {
  html body.lh-app .lh-sidebar {
    top: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    width: 232px !important;
    height: auto !important;
    border-radius: 18px !important;
    border: 1px solid #e6eaf0 !important;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .22) !important;
  }

  html body.lh-app {
    padding-left: 256px !important; /* 12 + 232 + 12 */
  }

  /* collapsed rail keeps floating too */
  html body.lh-rail .lh-sidebar {
    width: 76px !important;
  }

  html body.lh-rail {
    padding-left: 100px !important; /* 12 + 76 + 12 */
  }
}

@media (max-width:1023.98px) {
  /* mobile drawer floats with a rounded inner edge */
  .lh-sidebar {
    top: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    border-radius: 0 16px 16px 0 !important;
    border: 1px solid #e6eaf0 !important;
    transform: translateX(-115%) !important;
  }
  .lh-sidebar.open {
    transform: none !important;
  }
}

/* ---------- full-viewport app frame ----------
   Everything fits 100% of the browser window: the top bar and
   sidebar are pinned, only <main> scrolls (internally, with its
   own styled scrollbar). Falls back to normal document scroll
   on short screens and mobile. */
@media (min-width:1024px) {
  html body.lh-app {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding-left: 256px !important;
  }

  html body.lh-app .glass.lh-topbar {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    background: #ffffff !important;
    border-bottom: 1px solid #e6eaf0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  }

  /* keep the topbar height fixed at 52px (matches the compact
     density layer) so the frame math below always lines up */
  html body.lh-app .lh-topbar .lh-top-inner {
    height: 52px !important;
  }

  html body.lh-app main.lh-main {
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px);
    overflow-y: auto;
    padding-top: 24px !important;
    padding-bottom: 28px !important;
    background: #f0f2f5 !important;
    border: none !important;
    box-shadow: none !important;
    scroll-behavior: smooth;
  }

  /* slim scrollbar for the inner scroll area */
  main.lh-main::-webkit-scrollbar {
    width: 8px;
  }
  main.lh-main::-webkit-scrollbar-thumb {
    background: #cdd4de;
    border-radius: 999px;
  }
  main.lh-main::-webkit-scrollbar-track {
    background: transparent;
  }
  main.lh-main {
    scrollbar-width: thin;
    scrollbar-color: #cdd4de transparent;
  }

  /* collapsed rail offsets (Material's own rail width) */
  html body.lh-rail {
    padding-left: 100px !important;
  }
}

/* short screens: let the whole page scroll instead of squeezing */
@media (min-width:1024px) and (max-height:560px) {
  html body.lh-app {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }
  html body.lh-app main.lh-main {
    height: auto;
    overflow: visible;
  }
}

/* ---------- content surfaces: crisp borders + soft depth ---------- */
body.lh-app main .rounded-2xl.bg-white,
body.lh-app main .rounded-3xl.bg-white,
body.lh-app main .rounded-xl.bg-white {
  border: 1px solid #e3e8ee !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 20px -12px rgba(15, 23, 42, .1) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
body.lh-app main .rounded-2xl.bg-white:hover,
body.lh-app main .rounded-3xl.bg-white:hover,
body.lh-app main .rounded-xl.bg-white:hover {
  border-color: #d7dee8 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 32px -14px rgba(15, 23, 42, .16) !important;
}

/* inner panels (e.g. lesson lists, code panels) get a lighter line */
body.lh-app main .rounded-2xl.bg-white .rounded-xl,
body.lh-app main .rounded-2xl.bg-white .rounded-2xl {
  border: 1px solid #eef1f5 !important;
  box-shadow: none !important;
}

/* ---------- built-in compact fit (always on for Material) ----------
   Shrinks components so everything fits the 100% viewport frame.
   Baked into the theme on purpose: works even if the separate
   density stylesheet was never uploaded to the host. */

/* type scale */
body.lh-app main .text-4xl { font-size: 1.55rem !important; line-height: 1.9rem !important }
body.lh-app main .text-3xl { font-size: 1.3rem !important; line-height: 1.6rem !important }
body.lh-app main .text-2xl { font-size: 1.15rem !important; line-height: 1.45rem !important }
body.lh-app main .text-xl { font-size: 1.02rem !important; line-height: 1.35rem !important }
body.lh-app main .text-lg { font-size: .95rem !important; line-height: 1.3rem !important }
body.lh-app main .text-base { font-size: .875rem !important; line-height: 1.25rem !important }
body.lh-app main .text-sm { font-size: .8125rem !important; line-height: 1.15rem !important }

/* rhythm */
body.lh-app main .mt-6 { margin-top: 1rem !important }
body.lh-app main .mt-5 { margin-top: .85rem !important }
body.lh-app main .mt-4 { margin-top: .7rem !important }
body.lh-app main .mt-3 { margin-top: .55rem !important }
body.lh-app main .mt-2 { margin-top: .4rem !important }
body.lh-app main .mt-1 { margin-top: .3rem !important }
body.lh-app main [class*='space-y-6'] > * + * { margin-top: .85rem !important }
body.lh-app main [class*='space-y-5'] > * + * { margin-top: .7rem !important }
body.lh-app main [class*='space-y-4'] > * + * { margin-top: .6rem !important }
body.lh-app main [class*='space-y-3'] > * + * { margin-top: .5rem !important }
body.lh-app main [class*='space-y-2'] > * + * { margin-top: .4rem !important }

/* card & section padding */
body.lh-app main .p-6 { padding: 1rem !important }
body.lh-app main .p-5 { padding: .85rem !important }
body.lh-app main .p-4 { padding: .7rem !important }
body.lh-app main .px-6 { padding-left: 1rem !important; padding-right: 1rem !important }
body.lh-app main .py-8 { padding-top: .8rem !important; padding-bottom: .8rem !important }
body.lh-app main .py-6 { padding-top: .6rem !important; padding-bottom: .6rem !important }
body.lh-app main .py-5 { padding-top: .5rem !important; padding-bottom: .5rem !important }
body.lh-app main .py-4 { padding-top: .45rem !important; padding-bottom: .45rem !important }
body.lh-app main .gap-4 { gap: .7rem !important }
body.lh-app main .gap-6 { gap: .9rem !important }

/* hero header strip */
body.lh-app main .lh-hero-paper { padding: .55rem .35rem !important }
body.lh-app main .lh-hero-paper h1 { font-size: 1.3rem !important }

/* stat tiles + numbers */
body.lh-app main [data-live-scope] .grid.h-9 { width: 1.85rem !important; height: 1.85rem !important; font-size: .95rem !important }
body.lh-app main [data-live-scope] .grid.h-10 { width: 2.05rem !important; height: 2.05rem !important; font-size: 1.05rem !important }
body.lh-app main [data-live-scope] .grid.h-11 { width: 2.2rem !important; height: 2.2rem !important; font-size: 1.1rem !important }
body.lh-app main [data-live-scope] .lh-num { font-size: 1.5rem !important; line-height: 1.8rem !important }
body.lh-app main [data-live-scope] .h-16 { height: 2.7rem !important }

/* live-region cards */
body.lh-app main [data-live-scope] .rounded-2xl { padding: .68rem !important }

/* charts */
body.lh-app main [data-live-svg] { height: 122px !important }
body.lh-app main [data-live-svg] svg { height: 122px !important }

/* hero sparkline containment (Students enrolled card)
   Below 1024px the dense KPI pass doesn't run, so nothing pins the hero
   zigzag's svg while the density layer (.h-16 → 2.6rem) and this theme
   shrink the WRAPPER — the 122px svg then painted ~80px outside the card
   (and its end dot smeared into a blob). Lock wrapper + svg to the same
   44px strip at every width, matching the ≥1024px dense pass. */
body.lh-app main [data-live-scope] .lh-stat-hero [data-live-svg="students"],
body.lh-app main [data-live-scope] .lh-stat-hero [data-live-svg="students"] svg {
  height: 44px !important;
}
body.lh-app main [data-live-scope] .lh-stat-hero [data-live-svg="students"] {
  overflow: hidden !important;
  margin-top: .3rem !important;
}

/* tables & forms */
body.lh-app main table thead th { padding: .35rem .55rem !important }
body.lh-app main table tbody td { padding: .4rem .55rem !important; font-size: .8125rem !important }
body.lh-app main input,
body.lh-app main select,
body.lh-app main textarea { padding-top: .4rem !important; padding-bottom: .4rem !important }
body.lh-app main button { padding-top: .4rem !important; padding-bottom: .4rem !important }

/* long panels: more rows before inner scroll.
   Scoped like the markup's `lg:` prefix: the paired `lg:overflow-y-auto` only
   applies from 1024px up, and on phones the un-scoped cap made rows spill out
   of the card (overflow stays visible there). */
@media (min-width:1024px) {
  body.lh-app main [class*='max-h-72'] { max-height: 14rem !important }
}

/* logos: fix the oversized header marks */
html body.lh-app .lh-topbar img[src*="logo"] {
  height: 34px !important;
  width: auto !important;
}
.lh-side-head img[src*="logo.png"] {
  height: 38px !important;
  width: auto !important;
  margin-bottom: .35rem !important;
}
.lh-side-head .lh-side-wordmark {
  width: 7.75rem !important;
}

/* footer: compact card */
body.lh-app footer .rounded-2xl,
body.lh-app footer .rounded-3xl {
  padding: .9rem 1.2rem !important;
}
body.lh-app footer img[src*="logo"] {
  height: 46px !important;
  width: auto !important;
}

/* sidebar nav text */
.lh-side-link { font-size: .845rem !important }
.lh-side-link { padding: .5rem .65rem !important }

/* ---------- dense analytics pass ----------
   Arranges the dashboard like a compact analytics board:
   several small KPIs across one row, hairline cards, tiny type,
   dense tables — so a full board fits the 100% viewport. */
@media (min-width:1024px) {

  /* stat row: 3–4 KPI tiles per row instead of hero + wide stack */
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
    gap: .55rem !important;
  }
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* KPI tiles: compact hairline cards (layout left intact) */
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] > div {
    gap: .45rem !important;
    padding: .5rem .6rem !important;
    border-radius: 10px !important;
    border: 1px solid #e8eaee !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  }
  /* tighter internals so nothing crowds */
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] .mt-3 { margin-top: .28rem !important }
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] .mt-4 { margin-top: .32rem !important }
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] .mt-2 { margin-top: .2rem !important }
  /* hero tile's sparkline: slim strip under the number */
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] > div > [data-live-svg] {
    height: 44px !important;
    margin-top: .3rem !important;
  }
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] > div > [data-live-svg] svg {
    height: 44px !important;
  }

  /* KPI numbers + labels */
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] .lh-num {
    font-size: 1.3rem !important;
    line-height: 1.55rem !important;
  }
  body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] p[class*='uppercase'] {
    font-size: 9.5px !important;
    letter-spacing: .07em !important;
  }

  /* panel rows: tighter gutters, tighter headings */
  body.lh-app main [class*='lg:grid-cols-3'] {
    gap: .55rem !important;
  }
  body.lh-app main [data-live-scope] h2 {
    font-size: .875rem !important;
    line-height: 1.15rem !important;
  }
  body.lh-app main [data-live-scope] > section {
    margin-top: .55rem !important;
  }

  /* charts: analytics-height */
  body.lh-app main [data-live-svg] {
    height: 104px !important;
  }
  body.lh-app main [data-live-svg] svg {
    height: 104px !important;
  }

  /* lists: more rows before inner scroll */
  body.lh-app main [class*='max-h-72'] {
    max-height: 158px !important;
  }
  body.lh-app main [class*='space-y-2\\.5'] > * + * {
    margin-top: .3rem !important;
  }

  /* tables: 12px dense rows, hairline */
  body.lh-app main table thead th {
    font-size: 10px !important;
    padding: .28rem .45rem !important;
  }
  body.lh-app main table tbody td {
    font-size: .75rem !important;
    padding: .3rem .45rem !important;
  }

  /* page header strip: slim */
  body.lh-app main .lh-hero-paper {
    padding: .35rem .2rem !important;
  }
  body.lh-app main .lh-kicker {
    font-size: 9.5px !important;
  }
  body.lh-app main .lh-hero-paper h1 {
    font-size: 1.15rem !important;
    line-height: 1.4rem !important;
  }
  body.lh-app main .lh-hero-paper p {
    font-size: .75rem !important;
    margin-top: .15rem !important;
  }

  /* buttons in the header strip: small */
  body.lh-app main .lh-hero-cta {
    padding: .35rem .6rem !important;
    font-size: .75rem !important;
  }
}

/* ---------- clean sheet pass ----------
   Neutral, flat, hairlines only: the calm analytics-board look. */

body.lh-app,
body.lh-app main.lh-main {
  background: #f5f6f8 !important;
}

/* cards: thin border, almost no shadow (reference style) */
body.lh-app main .rounded-2xl.bg-white,
body.lh-app main .rounded-3xl.bg-white,
body.lh-app main .rounded-xl.bg-white {
  border: 1px solid #e9ecf1 !important;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .03) !important;
}
body.lh-app main .rounded-2xl.bg-white:hover,
body.lh-app main .rounded-3xl.bg-white:hover,
body.lh-app main .rounded-xl.bg-white:hover {
  border-color: #dde3ec !important;
  box-shadow: 0 8px 18px -12px rgba(16, 24, 40, .16) !important;
  transform: translateY(-1px) !important;
}

/* icon chips: light neutral instead of heavy navy */
body.lh-app main .rounded-2xl.bg-white .grid.h-9,
body.lh-app main .rounded-2xl.bg-white .grid.h-10,
body.lh-app main .rounded-2xl.bg-white .grid.h-11,
body.lh-app main [data-live-scope] .grid.h-9,
body.lh-app main [data-live-scope] .grid.h-10,
body.lh-app main [data-live-scope] .grid.h-11 {
  background: #f1f4f8 !important;
  color: #475569 !important;
  box-shadow: none !important;
  border-radius: 9px !important;
}

/* buttons: flat dark, no glow */
body.lh-app main .bg-emerald-600,
body.lh-app main .bg-emerald-700,
body.lh-app main .bg-indigo-600,
body.lh-app main .lh-hero-cta {
  background: #111827 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .14) !important;
}
body.lh-app main .bg-emerald-600:hover,
body.lh-app main .bg-emerald-700:hover,
body.lh-app main .bg-indigo-600:hover,
body.lh-app main .lh-hero-cta:hover {
  background: #0b1220 !important;
  box-shadow: 0 3px 8px -3px rgba(16, 24, 40, .28) !important;
}

/* panel headers: hairline rule under the first heading */
body.lh-app main [data-live-scope] .rounded-2xl > h2:first-child,
body.lh-app main [data-live-scope] .rounded-2xl > div:first-child > h2:first-child {
  border-bottom: 1px solid #eef1f5 !important;
  padding-bottom: .35rem !important;
  margin-bottom: .5rem !important;
}

/* table headers: white with a hairline (not a gray band) */
body.lh-app main table thead th {
  background: #ffffff !important;
  border-bottom: 1px solid #e6eaf0 !important;
  color: #8a94a6 !important;
}
body.lh-app main table tbody tr:hover {
  background: #fafbfd !important;
}

/* kicker labels: neutral */
body.lh-app main .lh-kicker {
  color: #8a94a6 !important;
}

/* (footer styling lives in the "footer at the end of the content" block) */

/* top bar: blend into the page canvas (no separate white strip) */
body.lh-app .glass.lh-topbar {
  background: #f5f6f8 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.lh-app .glass.lh-topbar .lh-ico {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
}
/* ---------- footer: bottom bar, revealed only at the end ----------
   footer.php moves the app footer into <main>'s scroll flow and feeds its
   height to --lh-foot-gap, which reserves exactly that much room at the end
   of the content. The bar waits parked below the fold and glides up only
   once the reader reaches the bottom, so it never covers a card. Its
   background is the same canvas tone as the header (#f5f6f8), so it blends
   into the body instead of sitting on it as a white strip.
   Public pages keep the full footer. */
@media (min-width:1024px) {
  body.lh-app .lh-footer.lh-footer-inline {
    position: fixed !important;
    left: 230px !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    /* parked out of sight until the bottom is reached */
    transform: translateY(102%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    /* header / body canvas tone: blended, no separate strip */
    background: #f5f6f8 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    padding: .5rem 1.6rem .45rem !important;
    z-index: 28 !important;
    transition:
      transform .44s cubic-bezier(.2, 1.06, .3, 1),
      opacity .3s ease,
      visibility 0s linear .44s !important;
  }
  /* bottom reached → glide up into the space reserved for it */
  body.lh-app.lh-at-bottom .lh-footer.lh-footer-inline {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform .44s cubic-bezier(.2, 1.06, .3, 1),
      opacity .3s ease,
      visibility 0s !important;
  }
  body.lh-rail .lh-footer.lh-footer-inline {
    left: 88px !important;
  }

  body.lh-app .lh-footer.lh-footer-inline > div {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* the card is only a wrapper now: no white slab, one tidy row */
  body.lh-app .lh-footer.lh-footer-inline .rounded-2xl {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important; /* let the canvas tone show through */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: .5rem 2rem !important;
  }

  /* mark + blurb | explore | account — each hugging its own content */
  body.lh-app .lh-footer.lh-footer-inline .rounded-2xl > .grid {
    flex: 1 1 26rem !important;
    display: grid !important;
    grid-template-columns: minmax(11rem, 15rem) auto auto !important;
    justify-content: start !important;
    gap: .35rem 2.25rem !important;
    align-items: center !important;
  }

  /* the mark sits beside its blurb, so the bar stays one line tall */
  body.lh-app .lh-footer.lh-footer-inline .grid > div:first-child {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: .7rem !important;
  }
  body.lh-app .lh-footer.lh-footer-inline .grid > div:first-child > .flex {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* marketing blurb: two tight lines, never a four-line column */
  body.lh-app .lh-footer.lh-footer-inline .grid > div:first-child > p {
    margin-top: 0 !important;
    font-size: .68rem !important;
    line-height: 1.05rem !important;
    color: #8a94a6 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.lh-app .lh-footer.lh-footer-inline .mt-3 {
    margin-top: .2rem !important;
  }
  body.lh-app .lh-footer.lh-footer-inline ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .1rem .95rem !important;
  }
  body.lh-app .lh-footer.lh-footer-inline ul > * + * {
    margin-top: 0 !important;
  }
  body.lh-app .lh-footer.lh-footer-inline p,
  body.lh-app .lh-footer.lh-footer-inline a,
  body.lh-app .lh-footer.lh-footer-inline li,
  body.lh-app .lh-footer.lh-footer-inline span {
    font-size: .72rem !important;
    line-height: 1.1rem !important;
  }
  body.lh-app .lh-footer.lh-footer-inline .lh-kicker {
    font-size: .6rem !important;
    color: #8a94a6 !important;
  }
  body.lh-app .lh-footer.lh-footer-inline a:hover {
    color: #111827 !important;
  }
  /* copyright: one line at the right edge, no rule above it */
  body.lh-app .lh-footer.lh-footer-inline .rounded-2xl > p {
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border-top: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    color: #9aa3b2 !important;
  }
}

/* ---------- slim sidebar + smooth open motion ---------- */

/* narrower rail, smaller type and icons to match the rest */
@media (min-width:1024px) {
  html body.lh-app .lh-sidebar {
    width: 206px !important;
    border-radius: 14px !important;
  }
  html body.lh-app {
    padding-left: 230px !important; /* 12 + 206 + 12 */
  }
  html body.lh-rail .lh-sidebar {
    width: 64px !important;
  }
  html body.lh-rail {
    padding-left: 88px !important; /* 12 + 64 + 12 */
  }
}

.lh-sidebar .lh-side-head {
  padding: .5rem .65rem .45rem !important;
}
.lh-sidebar .lh-side-head img[src*="logo.png"] {
  height: 30px !important;
  width: auto !important;
  margin-bottom: .15rem !important;
}
.lh-sidebar .lh-side-head .lh-side-wordmark {
  width: 6.25rem !important;
}
.lh-side-sec {
  font-size: 8.5px !important;
  letter-spacing: .14em !important;
  padding: .55rem .7rem .15rem !important;
}
.lh-side-link {
  font-size: .775rem !important;
  padding: .4rem .5rem !important;
  gap: .45rem !important;
  margin: 1px 5px !important;
  border-radius: 8px !important;
}
.lh-side-link svg,
.lh-side-ico svg {
  width: 15px !important;
  height: 15px !important;
}
.lh-side-foot {
  padding: .5rem .65rem !important;
}
.lh-side-foot a {
  padding: .35rem .5rem !important;
  font-size: .75rem !important;
}
.lh-side-foot .rounded-full {
  width: 28px !important;
  height: 28px !important;
  font-size: .75rem !important;
}
.lh-side-foot .lh-ico {
  width: 26px !important;
  height: 26px !important;
}
.lh-side-foot .lh-ico svg {
  width: 14px !important;
  height: 14px !important;
}

/* smooth, springy motion for open / close / collapse */
.lh-sidebar {
  transition:
    width .32s cubic-bezier(.22, 1.02, .36, 1),
    transform .44s cubic-bezier(.2, 1.14, .32, 1),
    box-shadow .3s ease !important;
}
html body.lh-app {
  transition: padding-left .32s cubic-bezier(.22, 1.02, .36, 1) !important;
}
main.lh-main {
  transition: padding-left .32s cubic-bezier(.22, 1.02, .36, 1) !important;
}

/* the drawer's backdrop breathes in rather than snapping */
@keyframes lhFadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}
body.lh-side-open .lh-backdrop {
  animation: lhFadeIn .26s ease both;
}

/* nav rows glide in one after another as the drawer opens */
@keyframes lhNavIn {
  from { opacity: 0; transform: translateX(-10px) }
  to { opacity: 1; transform: none }
}
@media (max-width:1023.98px) {
  .lh-sidebar.open .lh-side-head {
    animation: lhNavIn .28s cubic-bezier(.22, 1.02, .36, 1) both;
  }
  .lh-sidebar.open .lh-side-link {
    animation: lhNavIn .34s cubic-bezier(.22, 1.02, .36, 1) both;
  }
  .lh-sidebar.open .lh-side-link:nth-child(1) { animation-delay: .04s }
  .lh-sidebar.open .lh-side-link:nth-child(2) { animation-delay: .07s }
  .lh-sidebar.open .lh-side-link:nth-child(3) { animation-delay: .1s }
  .lh-sidebar.open .lh-side-link:nth-child(4) { animation-delay: .13s }
  .lh-sidebar.open .lh-side-link:nth-child(5) { animation-delay: .16s }
  .lh-sidebar.open .lh-side-link:nth-child(6) { animation-delay: .19s }
  .lh-sidebar.open .lh-side-link:nth-child(7) { animation-delay: .22s }
  .lh-sidebar.open .lh-side-link:nth-child(8) { animation-delay: .25s }
  .lh-sidebar.open .lh-side-foot {
    animation: lhNavIn .34s cubic-bezier(.22, 1.02, .36, 1) both;
    animation-delay: .16s;
  }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lh-sidebar,
  html body.lh-app,
  main.lh-main {
    transition: none !important;
  }
  .lh-sidebar.open .lh-side-head,
  .lh-sidebar.open .lh-side-link,
  .lh-sidebar.open .lh-side-foot,
  body.lh-side-open .lh-backdrop {
    animation: none !important;
  }
}

/* ---------- end slim sidebar ---------- */

/* ---------- footer polish: bigger mark, breathing room on the left ---------- */
@media (min-width:1024px) {
  body.lh-app .lh-footer.lh-footer-inline {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
    margin-left: 0 !important;
  }
  body.lh-app .lh-footer.lh-footer-inline img[src*="logo"] {
    height: 46px !important;
    width: auto !important;
  }
  /* (the bar's inner layout lives in the footer-bar block above) */
}

/* ---------- room reserved for the bottom bar ----------
   The bar is fixed, so it takes no space in the flow; JS measures its real
   height and writes it to --lh-foot-gap. This rule has to live here (and use
   the variable) rather than an inline style on <main>, because the earlier
   `padding-bottom: 28px !important` beats inline styles — which is precisely
   why the bar used to sit on top of the last card. */
html body.lh-app main.lh-main {
  padding-bottom: var(--lh-foot-gap, 28px) !important;
}

/* no motion if the visitor asked for none */
@media (prefers-reduced-motion: reduce) {
  body.lh-app .lh-footer.lh-footer-inline {
    transition: none !important;
  }
}

/* ---------- end reserved room ---------- */

/* ---------- end clean sheet pass ---------- */

/* ---------- end full-viewport frame ---------- */

/* ---------- header blends with the body canvas ----------
   Measured on the live dashboard: the frame rule
   `html body.lh-app .glass.lh-topbar` (0,3,2) was beating the later
   `body.lh-app .glass.lh-topbar` blend rule (0,3,1), so the bar stayed
   white with a hairline + shadow over the #f5f6f8 canvas. Matching that
   specificity and coming last lets the header read as part of the body,
   exactly like the bottom bar. The icon chips keep their own white so
   they stay visible on the flat surface. */
html body.lh-app .glass.lh-topbar {
  background: #f5f6f8 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The content canvas carried a stale `background: #f0f2f5` from the frame pass
   (same specificity problem: `html body.lh-app main.lh-main` beat the later
   clean-sheet rule), so the header still met a slightly darker surface. One
   canvas tone for body, header, content and the bottom bar now. */
html body.lh-app main.lh-main {
  background: #f5f6f8 !important;
}

/* ---------- end blended header ---------- */

/* ---------- content borders: clear and visible ----------
   The flat-sheet pass had drifted down to hairlines (#eef1f5 … #e9ecf1) that
   disappear against the #f5f6f8 canvas. Everything inside <main> now draws one
   legible line — slate-300 (#cbd5e1) — with a darker tone on hover. Only
   neutral lines are touched: rose/emerald/amber alert borders and the emerald
   focus ring keep their meaning. */

/* cards and inner panels */
body.lh-app main .rounded-lg.bg-white,
body.lh-app main .rounded-xl.bg-white,
body.lh-app main .rounded-2xl.bg-white,
body.lh-app main .rounded-3xl.bg-white,
body.lh-app main .rounded-2xl.bg-white .rounded-xl,
body.lh-app main .rounded-2xl.bg-white .rounded-2xl {
  border: 1px solid #cbd5e1 !important;
}
body.lh-app main .rounded-xl.bg-white:hover,
body.lh-app main .rounded-2xl.bg-white:hover,
body.lh-app main .rounded-3xl.bg-white:hover {
  border-color: #aeb9c9 !important;
}

/* KPI tiles in the dense analytics row */
body.lh-app main [data-live-scope] [class*='sm:grid-cols-3'] > div {
  border: 1px solid #cbd5e1 !important;
}

/* Tailwind's neutral border utilities (leading space keeps hover:/focus:
   and responsive variants on their own colours) */
body.lh-app main [class*=" border-slate-100"],
body.lh-app main [class*=" border-slate-200"],
body.lh-app main [class*=" border-slate-300"] {
  border-color: #cbd5e1 !important;
}
body.lh-app main [class*=" border-slate-100"]:hover,
body.lh-app main [class*=" border-slate-200"]:hover,
body.lh-app main [class*=" border-slate-300"]:hover {
  border-color: #aeb9c9 !important;
}

/* the theme's own button/link lines (declared as a full border shorthand) */
body.lh-app main a[class*="border-slate-300"],
body.lh-app main button[class*="border-slate-200"],
body.lh-app main button[class*="border-slate-300"] {
  border-color: #cbd5e1 !important;
}

/* form fields: a touch darker so they read as fields, emerald on focus */
body.lh-app main input,
body.lh-app main select,
body.lh-app main textarea {
  border: 1px solid #b9c4d3 !important;
}
body.lh-app main input:focus,
body.lh-app main select:focus,
body.lh-app main textarea:focus {
  border-color: #10b981 !important;
}

/* tables, panel header rules, dividers and rules inside the content */
body.lh-app main table thead th {
  border-bottom: 1px solid #b9c4d3 !important;
}
body.lh-app main table tbody td {
  border-bottom: 1px solid #d5dce6 !important;
}
body.lh-app main [data-live-scope] .rounded-2xl > h2:first-child,
body.lh-app main [data-live-scope] .rounded-2xl > div:first-child > h2:first-child {
  border-bottom: 1px solid #d5dce6 !important;
}
body.lh-app main [class*=" divide-slate-100"] > :not([hidden]) ~ :not([hidden]),
body.lh-app main [class*=" divide-slate-200"] > :not([hidden]) ~ :not([hidden]) {
  border-color: #d5dce6 !important;
}
body.lh-app main hr {
  border-color: #d5dce6 !important;
}

/* ---------- end content borders ---------- */