/* ============================================================
   Custom toggle buttons integrated into Just-the-Docs's .main-header
   via _includes/header_custom.html. The buttons render natively as
   children of .main-header (no JS-injection / no absolute positioning).
   ============================================================ */

/* ─── Button base ─── */
.doc-toggle-btn {
  appearance: none;
  background: #f4f6f8;
  border: 1px solid #d0d7de;
  border-radius: 0.375rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: #2C3338;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.doc-toggle-btn:hover {
  background: #e5e7eb;
  border-color: #b6bdc4;
}

.doc-toggle-btn:focus-visible {
  outline: 2px solid #2E8FCB;
  outline-offset: 2px;
}

/* ─── Position within the main-header ─── */

/* Sidebar toggle: pushed to the very start of main-header (before search).
   `order: -1` works because Just-the-Docs uses flex for the header. */
.main-header .doc-toggle-sidebar {
  order: -1;
  margin-left: 1rem;     /* ~5mm air between sidebar edge and hamburger */
  margin-right: 0.75rem;
}

/* Theme toggle: pushed to the end (after aux-nav). */
.main-header .doc-toggle-theme {
  order: 100;
  margin-left: 0.75rem;
  margin-right: 1rem;    /* ~5mm air to the right edge, symmetric with hamburger */
}

/* Force the header to be a normal left-to-right flex container so our
   ordering takes precedence over Just-the-Docs's space-between layout. */
.main-header {
  justify-content: flex-start !important;
  gap: 0.25rem;
  align-items: center;
}

/* Push the aux-nav to the right edge so theme button sits after it. */
.main-header .aux-nav {
  margin-left: auto;
}

/* ─── Sidebar collapsed state ─── */
body.sidebar-collapsed .side-bar {
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

body.sidebar-collapsed .main {
  margin-left: 0 !important;
  transition: margin-left 0.25s ease;
}

.side-bar {
  transition: transform 0.25s ease;
}
.main {
  transition: margin-left 0.25s ease;
}

/* ─── Dark-mode adjustments for the toggle buttons themselves ─── */
body.dark-mode .doc-toggle-btn {
  background: #2d3338;
  border-color: #3a4046;
  color: #e5e7eb;
}
body.dark-mode .doc-toggle-btn:hover {
  background: #3d4348;
  border-color: #4d5460;
}

@media print {
  .doc-toggle-btn { display: none !important; }
}

/* ============================================================
   Layout overrides — full viewport width, no auto-centering.
   ============================================================ */

html, body, .page-wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sidebar — narrower than Just-the-Docs default. SCSS sets $nav-width to
   14rem, but on some renders the variable doesn't propagate; force-override
   the rendered width here for reliability. 11rem is tight but still fits
   "Deutsche Dokumentation" without wrap at the default font size. */
.side-bar {
  margin-left: 0 !important;
  width: 11rem !important;
  flex-basis: 11rem !important;
  min-width: 11rem !important;
}

.main {
  max-width: none !important;
  margin-left: 11rem !important;  /* match the new sidebar width */
  margin-right: 0 !important;
}

body.sidebar-collapsed .main {
  margin-left: 0 !important;
}

/* Main content fills the entire main area with only a small symmetric
   padding on left and right (no max-width cap). On very wide monitors
   this means long lines, but the user explicitly wants more space. */
#main-content {
  max-width: none !important;
  margin-left: 2rem;
  margin-right: 2rem;
}

body.sidebar-collapsed #main-content {
  margin-left: 4rem;
  margin-right: 4rem;
}

/* Update the hamburger left-position to match the new sidebar width */
.main-header .doc-toggle-sidebar {
  /* the order/margin rules above already handle horizontal placement;
     no absolute coords to update here since the button is flex-positioned */
}

/* Sidebar nav highlight — falls back to Just-the-Docs defaults in both
   light and dark modes. The previous dark-mode "white-on-white" issue
   was caused by the dark color-scheme CSS not loading (404). Now that
   the dark CSS is properly built via assets/css/just-the-docs-itsbusiness_dark.scss,
   the theme's built-in active/hover styling handles both modes correctly. */