@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    /* Moose Accents */
    --accent-moo-green: 148 100% 59%;
    --accent-moo-green-foreground: 0 0% 100%;
    --accent-moo-indigo: 241 100% 61%;
    --accent-moo-indigo-foreground: 0 0% 3.9%;
    --accent-moo-purple: 271 94% 75%;
    --accent-moo-purple-foreground: 0 0% 3.9%;
    --accent-moo-pink: 288 100% 58%;
    --accent-moo-pink-foreground: 0 0% 3.9%;
    --accent-moo-yellow: 65 100% 50%;
    --accent-moo-yellow-foreground: 0 0% 100%;

    /* Boreal Accents */
    --accent-bor-tea: 158 100% 77%;
    --accent-bor-tea-foreground: 0 0% 100%;
    --accent-bor-yellow: 65 100% 50%;
    --accent-bor-yellow-foreground: 0 0% 100%;
    --accent-bor-green: 133 100% 66%;
    --accent-bor-green-foreground: 0 0% 100%;

    --moose-gradient: linear-gradient(
      150.33deg,
      #641bff -2.98%,
      #d52bff 106.53%
    );
    --moose-gradient-dark: linear-gradient(
      219.61deg,
      #373fff -34.79%,
      #000000 100.32%
    );
    --moose-gradient-dark-pink: linear-gradient(
      212.17deg,
      #d429ff -62.69%,
      #000000 75.08%
    );

    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 10.9%;
    --muted-foreground: 0 0% 53.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

/* Nextra overrides */
h2 {
  margin-bottom: 0;
}

.nextra-focus._font-semibold {
  font-weight: 400;
}

.nextra-breadcrumb a {
  color: inherit;
}

/* Remove the footer shadow */

.nextra-toc-footer,
.nextra-sidebar-footer {
  box-shadow: none;
  --tw-shadow: none;
  --tw-shadow-colored: none;
}

.nextra-nav-container-blur,
.nextra-sidebar-footer {
  background-color: transparent;
}

/* Make nav link text larger */
/* nav a {
  font-size: 1rem !important;
} */

main > p {
  line-height: 1.5rem;
}

/* :is(html[class~="dark"] .dark\:_bg-dark) {
  background-color: hsl(var(--background)) !important;
} */

/* :is(html[class~="dark"] body) {
  background-color: hsl(var(--background)) !important;
} */

._shadow-\[0_12px_16px_rgb\(var\(--nextra-bg\)\)\] {
  box-shadow: none;
}

:is(
  html[class~="dark"].dark\:_shadow-\[0_-1px_0_rgba\(255\,255\,255\,\.1\)_inset\]
) {
  box-shadow: none;
}

.nextra-nav-container-blur {
  background-color: hsl(var(--background)) !important;
}

:is(html[class~="dark"] .nextra-nav-container-blur) {
  background-color: hsl(var(--background)) !important;
}

.nextra-nav-container {
  z-index: 40 !important;
}

.nextra-nav-container-content {
  z-index: 41 !important;
}

:is(html[class~="dark"] .dark\:_shadow-\[0_-12px_16px_\#111\]) {
  box-shadow: none;
}

[data-theme="dark"]#logo-path {
  color: white;
}

/* Make the text gray */
:is(html[class~="dark"]) .dark\:_text-gray-400,
html.dark .dark\:_text-gray-400,
.nextra-toc .dark\:_text-gray-400 {
  color: hsl(var(--muted-foreground)) !important;
}

:is(html[class~="dark"]) .dark\:_text-neutral-400,
html.dark .dark\:_text-neutral-400,
.nextra-toc .dark\:_text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

th,
td {
  border: none;
}

th {
  text-align: left;
}

tr:nth-child(2n) {
  background-color: inherit !important;
}

table {
  table-layout: auto;
}

thead > tr {
  border-top: none;
}

table,
thead,
tbody {
  display: table;
  width: 100%;
}

:is(html[class~="dark"] tr) {
  border-color: rgba(38, 38, 38, var(--tw-bg-opacity));
}

li.active > a {
  color: var(--primary-foreground) !important;
  background-color: hsl(var(--muted)) !important;
  border-radius: 10px;
}

li.active > a > p {
  color: var(--primary-foreground) !important;
  background-color: hsl(var(--muted)) !important;
  border-radius: 10px;
}

.callout p {
  display: inline;
}

nav.nextra-toc {
  width: 20rem;
}

aside.md\:nx-w-64 {
  width: 20rem;
}

.nextra-steps h3 {
  font-size: 1rem;
}

li.my-2 {
  list-style: none;
}

/* custom-nextra-styles.css */
/* .nx-mb-8.nx-flex.nx-items-center.nx-border-t.nx-pt-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  margin-bottom: 2rem;
} */

/* Style for both previous and next links
.nx-mb-8.nx-flex.nx-items-center.nx-border-t.nx-pt-8 a {
  display: flex !important;
  align-items: center !important;
  padding: 1rem !important;
  border-radius: 0.5rem !important;
  transition: background-color 0.3s ease !important;
  width: 50% !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  border: 1px solid hsl(var(--border));
} */

/* .nx-mb-8.nx-flex.nx-items-center.nx-border-t.nx-pt-8 a:hover {
  background-color: hsl(var(--muted)) !important;
} */

/* Hide the default chevron icons */
/* .nx-mb-8.nx-flex.nx-items-center.nx-border-t.nx-pt-8 a svg {
  width: 24px;
  height: 24px;
  background-color: hsl(var(--muted));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  color: hsl(var(--primary));
  margin: 0.25rem;
} */

/* .nx-mb-8.nx-flex.justify-between.nx-items-center.nx-border-t.nx-pt-8
  a:only-child {
  margin-left: auto !important;
  justify-self: flex-end;
} */

/* Style for the previous link */
/* .nx-mb-8.nx-flex.nx-items-center.nx-border-t.nx-pt-8 a:first-child {
  justify-content: flex-start;
  margin-right: 0.5rem;
} */

/* Style for the next link */
/* .nx-mb-8.nx-flex.nx-items-center.nx-border-t.nx-pt-8 a:last-child {
  justify-content: flex-end;
  flex-grow: 1;
  margin-left: 0.5rem;
} */

/* Style for the text */
/* .nx-mb-8.nx-flex.justify-between.nx-items-center.nx-border-t.nx-pt-8 a span {
  font-size: 1rem !important;
  font-weight: 500 !important;
} */

/* Style for the icons */
/* .nx-mb-8.nx-flex.nx-items-center.nx-border-t.nx-pt-8 a svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
} */

/* .nx-truncate {
  background-color: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
} */

.nextra-steps h3:before {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .nextra-nav-container p {
  font-size: 16px !important;
  line-height: 22px !important;
} */

footer {
  background-color: transparent !important;
}

/* :is(html[class~="dark"] .nextra-sidebar-container) {
  background-color: hsl(var(--background)) !important;
}

:is(html[class~="dark"] .dark\:nx-text-orange-300)
  :is([dir="ltr"] .ltr\:nx-pl-3) {
  display: none;
}

:is(html[class~="dark"] .dark\:nx-text-orange-300) {
  background-color: transparent !important;
  color: var(--primary-foreground) !important;
  border-color: rgba(38, 38, 38, var(--tw-bg-opacity));
  padding: 0 20px;
} */

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

html,
body {
  scroll-padding-top: 72px; /* 64px sticky bar + 8px extra for spacing */
}

/* Override Nextra code block base styles */
.nextra-code {
  border: 0 !important;
  background: transparent !important;
  --tw-ring-offset-width: 0px !important;
  --tw-ring-width: 0px !important;
}

/* Remove ring from pre element */
pre.nextra-focus {
  background-color: hsl(var(--muted)) !important;
  --tw-ring-width: 0 !important;
  --tw-ring-offset-width: 0 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-color: transparent !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  width: auto !important;
  max-width: 100% !important;
  padding-top: 0.5rem !important;
}

div.nextra-code {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

code.nextra-code {
  background-color: hsl(var(--muted)) !important;
}

/* Target the filename bar above code blocks */
.nextra-code > div._flex._items-center._h-12 {
  /* Example overrides: */
  border: 0px !important;
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  --tw-ring-width: 0 !important;
  --tw-ring-offset-width: 0 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-color: transparent !important;
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo,
    monospace !important;
  font-size: 0.875rem !important;
}

/* Add border to main nextra code container */
.nextra-code._relative {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.75rem !important;
  width: auto !important;
  overflow: hidden !important;
}

li:not(:first-child) {
  margin-top: 0 !important;
}

/* Mobile Safari Border Fixes */
/* Fix navigation bottom border on mobile Safari */
@supports (-webkit-touch-callout: none) {
  /* Navigation container borders */
  .nextra-nav-container {
    border-bottom: 1px solid hsl(var(--border)) !important;
  }
  
  /* Language switcher border */
  .sticky.top-\[64px\] {
    border-bottom: 1px solid hsl(var(--border)) !important;
  }
  
  /* Fix any elements with safe area inset padding that have white borders */
  [class*="pr-[max(env(safe-area-inset-right)"] {
    border-color: hsl(var(--border)) !important;
  }
  
  /* General border fixes for mobile Safari */
  .border,
  .border-b,
  .border-t {
    border-color: hsl(var(--border)) !important;
  }
  
  /* Divider fixes */
  hr,
  .divide-y > * + *,
  [class*="divide-"] {
    border-color: hsl(var(--border)) !important;
  }
  
  /* Navigation specific border fixes */
  nav[class*="border"],
  .nextra-nav-container-blur {
    border-color: hsl(var(--border)) !important;
  }
  
  /* Dark mode adjustments */
  :is(html[class~="dark"]) .nextra-nav-container {
    border-bottom: 1px solid hsl(var(--border)) !important;
  }
  
  :is(html[class~="dark"]) .sticky.top-\[64px\] {
    border-bottom: 1px solid hsl(var(--border)) !important;
  }
  
  :is(html[class~="dark"]) .border,
  :is(html[class~="dark"]) .border-b,
  :is(html[class~="dark"]) .border-t {
    border-color: hsl(var(--border)) !important;
  }
}

/* WebKit specific fixes for any remaining border issues */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
  .nextra-nav-container,
  .nextra-nav-container-blur,
  .sticky[class*="border"] {
    border-color: hsl(var(--border)) !important;
  }
}