/*
 * TutorCruncher-branded Scalar theme for the API reference at /api/docs/.
 *
 * Applies the v2 palette (dark blue #1D344B, purple #362E83, blue #3CA2F5, light blue
 * #D5F3FE, cream #fffefb — see static/scss/mixins/_variables.scss) via Scalar's --scalar-*
 * CSS variables. The logo is injected at the top of the sidebar via a ::before on Scalar's
 * sidebar element; .t-doc__sidebar is Scalar-internal, so if a Scalar upgrade renames it the
 * logo simply stops showing (no breakage).
 */

.t-doc__sidebar::before {
  content: '';
  display: block;
  /* The sidebar is a column flexbox, so this pseudo-element is a flex item — without
     flex-shrink: 0 it gets squashed once the nav list overflows, clipping the logo. */
  flex-shrink: 0;
  height: 36px;
  margin: 22px 18px 16px;
  background: url("tutorcruncher-logo-new.6ac872f5e577.svg") no-repeat left center;
  background-size: auto 36px;
}

:root {
  --scalar-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --scalar-radius: 8px;
}

.light-mode {
  --scalar-color-1: #1d344b;
  --scalar-color-2: #46586c;
  --scalar-color-3: #6f7d8d;
  --scalar-color-accent: #362e83;
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f6f9fc;
  --scalar-background-3: #e8eef4;
  --scalar-background-accent: #d5f3fe;
  --scalar-border-color: #e2e9f0;
  --scalar-button-1: #362e83;
  --scalar-button-1-color: #ffffff;
  --scalar-button-1-hover: #4a41a3;
  --scalar-sidebar-background-1: #f6f9fc;
  --scalar-sidebar-color-1: #1d344b;
  --scalar-sidebar-color-2: #6f7d8d;
  --scalar-sidebar-border-color: #e2e9f0;
  --scalar-sidebar-item-hover-background: #e8eef4;
  --scalar-sidebar-item-hover-color: #1d344b;
  --scalar-sidebar-item-active-background: #d5f3fe;
  --scalar-sidebar-color-active: #1d344b;
  --scalar-sidebar-search-background: #ffffff;
  --scalar-sidebar-search-border-color: #e2e9f0;
}

.dark-mode {
  --scalar-color-1: #f6f9fc;
  --scalar-color-2: #c3cdd8;
  --scalar-color-3: #93a1b1;
  --scalar-color-accent: #3ca2f5;
  --scalar-background-1: #1d344b;
  --scalar-background-2: #24405b;
  --scalar-background-3: #2e4d6c;
  --scalar-background-accent: #2e4d6c;
  --scalar-border-color: #2e4d6c;
  --scalar-button-1: #3ca2f5;
  --scalar-button-1-color: #1d344b;
  --scalar-button-1-hover: #63b6f7;
  --scalar-sidebar-background-1: #16293c;
  --scalar-sidebar-color-1: #f6f9fc;
  --scalar-sidebar-color-2: #93a1b1;
  --scalar-sidebar-border-color: #24405b;
  --scalar-sidebar-item-hover-background: #24405b;
  --scalar-sidebar-item-active-background: #24405b;
  --scalar-sidebar-color-active: #3ca2f5;
}

/* The logo asset is dark blue; render it white on the dark sidebar. */
.dark-mode .t-doc__sidebar::before {
  filter: brightness(0) invert(1);
}

/* Breathing room above each sidebar section heading (General / CRM / Scheduling / ...). The
   section <li> is display:contents, so the gap goes on its inner row; group/sidebar-section is
   Scalar-internal — if an upgrade renames it the sections just lose the extra gap. */
.t-doc__sidebar li.group\/item + li.group\/sidebar-section > div:first-child {
  margin-top: 20px;
}