:root {
  --patrowl-color-orange: #f96d29;
  --patrowl-color-orange-light: #fee5d8;
  --patrowl-color-light-1: #f9f9f9;
  --patrowl-color-light-2: #e8e9ef;
  --patrowl-color-light-3: #f9f9f9;
  --patrowl-color-dark-1: #050c1a;
  --patrowl-color-dark-2: #141a28;
  --patrowl-color-dark-3: #340e05;

  --scalar-font-family: "Urbanist", sans-serif;
  --scalar-color-1: var(--patrowl-color-orange);
  --scalar-color-2: var(--patrowl-color-orange);
  --scalar-color-accent: var(--patrowl-color-orange);
  --scalar-radius: 4px;
  --scalar-radius-lg: 8px;
  --scalar-radius-xl: 16px;
}

.light-mode {
  --scalar-background-1: var(--patrowl-color-light-1);
  --scalar-background-2: var(--patrowl-color-light-2);
  --scalar-sidebar-item-hover-background: var(--patrowl-color-orange-light);
  --scalar-sidebar-item-hover-color: var(--patrowl-color-orange);
  --scalar-sidebar-item-active-background: var(--patrowl-color-orange-light);
  --scalar-sidebar-color-active: var(--patrowl-color-orange);
}

.dark-mode {
  --scalar-background-1: var(--patrowl-color-dark-1);
  --scalar-background-2: var(--patrowl-color-dark-2);
  --scalar-sidebar-item-hover-background: var(--patrowl-color-dark-3);
  --scalar-sidebar-item-hover-color: var(--scalar-color-1);
  --scalar-sidebar-item-active-background: var(--patrowl-color-dark-3);
  --scalar-sidebar-color-active: var(--scalar-color-1);
}

body {
  margin: 0;
  padding: 0;
}

.scalar-custom-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
  padding: 10px 16px;
  background: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
}

.scalar-custom-header--hidden {
  display: none;
}

.dark-mode .scalar-custom-header {
  background: #050c1a;
  border-bottom: 1px solid #333244;
}

.scalar-custom-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #050c1a;
}

.scalar-custom-header-logo {
  height: 32px;
  width: auto;
  display: block;
}

.scalar-custom-header-title {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* By default, hide the dark logo */
.scalar-logo-dark {
  display: none;
}

/* When Scalar switches to dark mode, swap them */
.dark-mode .scalar-logo-light {
  display: none;
}

.dark-mode .scalar-logo-dark {
  display: inline-block; /* or 'block' depending on layout */
}

.scalar-theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  width: 38px;
  height: 24px;
  padding: 6px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.scalar-theme-toggle:focus-visible {
  outline: 1px solid var(--scalar-color-accent, var(--patrowl-color-orange));
  outline-offset: 1px;
  border-radius: 9999px;
}

.scalar-theme-toggle-track {
  width: 100%;
  height: 12px;
  margin: 0 1px;
  border-radius: 9999px;
  background: var(--scalar-border-color, #e0e0e0);
}

.scalar-theme-toggle-thumb {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--scalar-border-color, #e0e0e0);
  border-radius: 50%;
  background: var(--scalar-background-1, #fff);
  transition: transform 0.3s ease-in-out;
}

.scalar-theme-toggle[aria-pressed="true"] .scalar-theme-toggle-thumb {
  transform: translateX(14px);
}

.scalar-theme-toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
  color: var(--scalar-color-1, #050c1a);
}

.scalar-theme-toggle-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  margin-top: -0.5px;
  margin-left: -6px;
  border-radius: 8px;
  background: currentColor;
  transition: transform 0.3s ease-in-out;
}

.scalar-theme-toggle-ray:nth-of-type(2) {
  transform: rotate(90deg);
}

.scalar-theme-toggle-ray:nth-of-type(3) {
  transform: rotate(45deg);
}

.scalar-theme-toggle-ray:nth-of-type(4) {
  transform: rotate(-45deg);
}

.scalar-theme-toggle-ellipse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  margin-left: -3.5px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--scalar-background-1, #fff);
  box-shadow: inset 0 0 0 1px currentColor;
  transition:
    width 0.3s ease-in-out,
    height 0.3s ease-in-out;
}

.scalar-theme-toggle-moon-mask {
  position: absolute;
  bottom: 2.5px;
  left: 2.5px;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--scalar-background-1, #fff);
  transform: translate(4px, -4px);
  transition: transform 0.3s ease-in-out;
}

.scalar-theme-toggle[aria-pressed="true"] .scalar-theme-toggle-ellipse {
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  -webkit-mask-image: radial-gradient(
    circle at 0 100%,
    #000 10px,
    transparent 12px
  );
  mask-image: radial-gradient(circle at 0 100%, #000 10px, transparent 12px);
}

.scalar-theme-toggle[aria-pressed="true"] .scalar-theme-toggle-ray {
  transform: scale(0);
}

.scalar-theme-toggle[aria-pressed="true"]
  .scalar-theme-toggle-ray:nth-of-type(2),
.scalar-theme-toggle[aria-pressed="true"]
  .scalar-theme-toggle-ray:nth-of-type(3),
.scalar-theme-toggle[aria-pressed="true"]
  .scalar-theme-toggle-ray:nth-of-type(4) {
  transform: scale(0);
}

.scalar-theme-toggle[aria-pressed="true"] .scalar-theme-toggle-moon-mask {
  transform: translate(0);
}

/* Hide "Powered by Scalar" in sidebar footer (no official config option) */
a.no-underline[href="https://www.scalar.com"][target="_blank"] {
  display: none !important;
}

/* x-tagGroups headings in the sidebar (e.g. Assets, Attack surface) */
body
  .scalar-app
  .sidebar
  button[data-sidebar-id*="/tag-group/"]:not([data-sidebar-id*="/tag/"]) {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--scalar-sidebar-color-1, var(--scalar-color-1)) !important;
  letter-spacing: 0.01em;
  margin-top: 0.75rem;
}

body
  .scalar-app
  .sidebar
  li:first-child
  > div
  > button[data-sidebar-id*="/tag-group/"]:not([data-sidebar-id*="/tag/"]) {
  margin-top: 0;
}

/* Classic layout: tag group titles in the main content navigation */
body .scalar-app .tag-name.tag-group-name {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
}