/* Optimized font loading - NO render blocking imports */
/* Font loaded asynchronously via JavaScript only */

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

@layer base {
  :root {
    /* Shadcn Style new-york - slate */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --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%;
    --radius: 0.5rem;

    /* Docusaurus color */
    --prism-background-color: #edefff;
    --ifm-color-primary: #193ae6;
    --ifm-color-primary-lightest: #c8c7ff;
    --ifm-footer-background-color: #242526;
    --ifm-footer-link-color: #374151;
    --ifm-footer-title-color: #333333;
    --ifm-code-font-size: 95%;
    --ifm-h1-font-size: 2.5rem;
    --docusaurus-highlighted-code-line-bg: #0000001a;
    --ifm-global-shadow-tl: 2px 3px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    --ifm-font-family-base:
      'Space Grotesk', 
      /* System fonts for instant fallback */
      -apple-system, BlinkMacSystemFont, 
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Helvetica Neue', Helvetica, Arial, 
      /* Generic fallbacks */
      system-ui, sans-serif, 
      /* Emoji fonts */
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --menu-link-active: rgba(0, 0, 0, 0.1);
    --ifm-menu-link-padding-vertical: 0.5rem;
    --docs-fg-base: #030712;
    --ifm-menu-color-active: var(--docs-fg-base);

    /* Docsearch color */
    --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    --docsearch-key-shadow:
      inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px #1e235a66;
    --docsearch-muted-color: #6b7280;

    --ifm-table-background: transparent;
    --ifm-table-stripe-background: transparent;
    --ifm-table-head-background: rgb(20, 18, 18);
    --ifm-table-head-color: white;
    --ifm-table-border-color: rgb(246, 246, 246);
    --color-white: hsl(0, 0%, 100%);
    --color-blue-30: hsl(240, 100%, 98%);
    --color-grey-40: hsl(240, 25%, 98%);
    --doc-sidebar-width: 200px;
  }

  html[data-theme='dark'] {
    /* Shadcn Style new-york - slate */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    /* Docusaurus color */
    --prism-background-color: #000000;
    --ifm-background-color: #060606;
    --ifm-background-surface-color: black;
    --ifm-footer-link-color: #dadde1;
    --ifm-footer-title-color: #ffffff;
    --ifm-color-primary: #607bff;
    --ifm-color-primary-darker: #0d48f9;
    --ifm-navbar-background-color: black;
    --ifm-menu-color-background-active: #0000001a;
    --menu-link-active: rgba(255, 255, 255, 0.1);
    --ifm-menu-color-active: var(--ifm-color-primary);

    /* Docsearch color */
    --table-of-contents-color: #e8e8e8;
    --docusaurus-highlighted-code-line-bg: #0000004d;
    --docsearch-muted-color: #7f8497;
    --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
    --docsearch-key-shadow:
      inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 #0304094d;
    --color-white: hsl(0, 0%, 16%);
    --color-grey-40: hsl(240, 14%, 14%);
    --color-blue-30: hsl(252, 25%, 18%);
    --ifm-table-border-color: rgb(73, 73, 73);
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
    border-color: hsl(var(--border));
  }

  html {
    font: var(--ifm-font-size-base) / var(--ifm-line-height-base) var(--ifm-font-family-base);
    /* Optimize font rendering for better performance */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
  }

  a {
    @apply hover:no-underline;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--ifm-heading-font-weight);
  }

  h1 {
    font-size: var(--ifm-h1-font-size);
  }

  h2 {
    font-size: var(--ifm-h2-font-size);
  }

  h3 {
    font-size: var(--ifm-h3-font-size);
  }

  h4 {
    font-size: var(--ifm-h4-font-size);
  }

  h5 {
    font-size: var(--ifm-h5-font-size);
  }

  h6 {
    font-size: var(--ifm-h6-font-size);
  }
}

@layer utilities {
  div[class^='docMainContainer_'] a,
  .markdown a {
    color: var(--ifm-link-color);
  }

  .markdown ul {
    margin: 0 0 var(--ifm-list-margin);
    padding-left: var(--ifm-list-left-padding);
    list-style-type: disc;
  }

  .theme-doc-sidebar-container svg,
  .markdown svg,
  .theme-doc-breadcrumbs svg,
  .theme-doc-footer svg,
  article svg {
    display: unset;
  }

  .markdown h1:first-child {
    --ifm-h1-font-size: 2rem;
  }

  /* Screen reader utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .markdown a,
    div[class^='docMainContainer_'] a {
      text-decoration: underline;
    }

    button,
    .button {
      border: 2px solid currentColor;
    }
  }

  /* Mobile accessibility - minimum touch target size */
  @media (max-width: 768px) {
    button,
    .button,
    input[type='button'],
    input[type='submit'],
    a[role='button'],
    [role='button'] {
      min-height: 44px;
      min-width: 44px;
    }

    input[type='text'],
    input[type='email'],
    input[type='password'],
    textarea,
    select {
      min-height: 44px;
    }
  }
}

a[class^='footerLogoLink_'] {
  opacity: 1;
}

/* Custom CSS that should always be included */
.navbar__item svg,
.menu__link svg,
.footer__link-item svg {
  display: none;
}

/* Base link or icon container */
.header-github-link::before {
  content: '';
  width: 28px;
  height: 28px;
  margin-right: 12px;
  display: flex;
  background-image: url('/img/logo/github-light.svg');
  background-size: cover;
  transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

/* Override for dark theme */
:root[data-theme='dark'] .header-github-link::before {
  background-image: url('/img/logo/github-dark.svg');
}

/* Optional hover effect */
.header-github-link:hover {
  opacity: 0.8;
}

.header-slack-link::before {
  content: '';
  width: 28px;
  height: 28px;
  margin-right: 12px;
  display: flex;
  background-image: url('/img/icon/slack.svg');
  background-size: cover;
  transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

/* Footer custom styles */
.footer {
  --ifm-footer-background-color: transparent;
  padding: 0;
  background: linear-gradient(to right, rgba(191, 219, 254, 0.15), rgba(199, 210, 254, 0.15));
}

html[data-theme='dark'] .footer {
  --ifm-footer-background-color: transparent;
  background: linear-gradient(to right, rgba(30, 58, 138, 0.2), rgba(79, 70, 229, 0.15));
}

.footer .footer__title {
  color: var(--ifm-footer-title-color);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.footer__link-item {
  color: var(--ifm-footer-link-color);
  opacity: 0.8;
  transition: opacity 0.2s;
}

.footer__link-item:hover {
  color: var(--ifm-footer-link-color);
  opacity: 1;
  text-decoration: none;
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 996px) {
  .footer {
    padding: 0;
  }
}

/*  Keyboard search keys */
kbd {
  &[class^='searchHint_'] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--docsearch-key-gradient);
    border: 0;
    border-radius: 3px;
    box-shadow: var(--docsearch-key-shadow);
    color: var(--docsearch-muted-color);
    height: 20px;
    margin-right: 0.4em;
    padding: 0 7px 2px;
  }

  &.searchHint_btn {
    display: inline-block;
    align-items: unset;
    justify-content: unset;
    height: unset;
    margin-left: 0.4rem;
    padding: 4px 10px;
  }
}

/* Search navbar (local search) */
.navbar__search-input {
  padding: 0 2rem 0 2.25rem;
  width: 13.5rem;
}

code[class^='codeBlockLines_'] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

div[class^='docItemContainer_'] article img {
  display: block;
  margin: auto;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

[class^='title_'] {
  font-size: 2.3rem !important;
}

#__blog-post-container img[class^='img_'] {
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

/* Tablet */
@media screen and (max-width: 991px) {
  /* Search navbar local */
  .navbar__search-input {
    width: 14rem;
    padding: 0 0.5rem 0 2.25rem;
  }
}

/* nabvar button css start */
.dev-portal-link {
  background-color: #193ae6;
  border-radius: 4px;
  transition-property: all;
  padding: 0.25rem 0.75rem !important;
  margin: 0 0.5rem;
}

.dev-portal-link:last-child {
  margin-right: 0;
}

.dev-portal-link svg {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.dev-portal-signup {
  --ifm-link-hover-color: #fff;
  --ifm-navbar-link-hover-color: #fff;
  color: #fff;
}

.dev-portal-signup svg {
  display: none;
}

.dev-portal-signup:hover {
  background-color: rgb(0, 0, 168);
}

.dev-portal-login {
  background-color: transparent;
}

.navbar-sidebar .dev-portal-link {
  padding: 0.75rem;
  margin-top: 1rem;
}

/* nabvar button css end */

.navbar__category {
  font-weight: 700;
  font-size: 0.7em;
  padding: 0.4em 0 0.4em 0.4em;
  color: var(--docsearch-text-color);
  /* background-color: #fafafa; */
  border-radius: 3px;
}

.navbar__category:not(:first-child) {
  margin-top: 1.1em;
}

table {
  border-spacing: 0;
  border-collapse: separate;
  overflow-x: auto;
  border: none;
}

table td {
  border-color: var(--ifm-table-border-color);
}

table th:first-child {
  border-top-left-radius: 10px;
}

table th:last-child {
  border-top-right-radius: 10px;
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

table th code {
  color: var(--ifm-color-content);
}

table td code {
  background-color: var(--color-blue-30);
  font-family: monospace;
  border-radius: 4px;
}

table tr:hover {
  background-color: var(--color-grey-40);
  transition: background-color 0.2s ease;
}
table thead tr:hover {
  background-color: transparent;
}

.footer .footer__copyright,
.footer .footerCopyright {
  color: var(--ifm-footer-link-color);
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
  /* Reduce font sizes for mobile */
  h1 {
    font-size: 1.8rem !important;
    line-height: 1.2;
  }
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }
  h3 {
    font-size: 1.3rem !important;
    line-height: 1.4;
  }

  /* Optimize images for mobile */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Reduce container padding */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Reduce margins and padding */
  .py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Optimize text spacing */
  .text-3xl {
    font-size: 1.5rem !important;
  }
  .text-4xl {
    font-size: 1.75rem !important;
  }
  .text-5xl {
    font-size: 2rem !important;
  }
}
