/* stylelint-disable at-rule-no-unknown */
/* stylelint-disable-next-line import-notation */
@import 'tailwindcss';

/*
-------------------------------------------------------------------------------
Theme / animations
-------------------------------------------------------------------------------
*/

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;
  --animate-hue-rotate: hue-rotate 5s infinite linear;
  --animate-slide-in-left: slide-in-left 1s;
  --animate-slide-in-right: slide-in-right 1s;

  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-3deg);
    }

    50% {
      transform: rotate(3deg);
    }
  }

  @keyframes hue-rotate {
    from {
      filter: hue-rotate(0deg);
    }

    to {
      filter: hue-rotate(-360deg);
    }
  }

  @keyframes slide-in-left {
    from {
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }

    to {
      transform: translate3d(0, 0, 0);
    }
  }

  --animate-wui-slide-right: wui-slide-right 2s linear infinite;
  --animate-wui-slide-down: wui-slide-down 2s linear infinite;
  --animate-wui-slide-left: wui-slide-left 2s linear infinite;

  @keyframes wui-slide-right {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(100%);
    }
  }

  @keyframes wui-slide-down {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(100%);
    }
  }

  @keyframes wui-slide-left {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes wui-slide-up {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(-100%);
    }
  }

  --animate-my-orbit: ui-orbit calc(var(--duration) * 1s) linear infinite;

  @keyframes ui-orbit {
    0% {
      transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px))
        rotate(calc(var(--angle) * -1deg));
    }

    100% {
      transform: rotate(calc(var(--angle) * 1deg + 1turn)) translateY(calc(var(--radius) * 1px))
        rotate(calc(var(--angle) * -1deg - 1turn));
    }
  }

  --animate-move-dot: move-dot 6s linear infinite;

  @keyframes move-dot {
    0% {
      top: 10%;
      right: 10%;
    }

    25% {
      top: 10%;
      right: calc(100% - 40px);
    }

    50% {
      top: calc(100% - 23px);
      right: calc(100% - 45px);
    }

    75% {
      top: calc(100% - 23px);
      right: 10%;
    }

    100% {
      top: 10%;
      right: 10%;
    }
  }
}

/*
-------------------------------------------------------------------------------
Utilities
-------------------------------------------------------------------------------
*/

.hue-clip {
  color: var(--color-red-pers);
  background-image: linear-gradient(92deg, var(--color-red-pers), var(--color-yellow-saff));
}

.text-gradient {
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-nowrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-more-line-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*
-------------------------------------------------------------------------------
Tailwind v4 compatibility
-------------------------------------------------------------------------------
*/

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

/*
-------------------------------------------------------------------------------
CSS variables + theme overrides
-------------------------------------------------------------------------------
*/

:root {
  --background: #fff;
  --foreground: #171717;
  --duration: 0.5;
  --color-gray-200: #e5e7eb;
  --color-red-pers: #4b5563;
  --color-yellow-saff: #9ca3af;

  /* Global scrollbar (theme-adaptive via data-theme) */

  /* Prefer a slim modern scrollbar */
  --wui-scrollbar-size: 6px;
  --wui-scrollbar-radius: 999px;
  --wui-scrollbar-track: transparent;

  /* Accent scrollbar colors (no gray). Use widely-supported rgb/alpha (no color-mix). */
  --wui-scrollbar-thumb-start: rgb(75 85 99 / 6%);
  --wui-scrollbar-thumb-end: rgb(156 163 175 / 6%);
  --wui-scrollbar-thumb-hover-start: rgb(75 85 99 / 18%);
  --wui-scrollbar-thumb-hover-end: rgb(156 163 175 / 18%);
  --wui-scrollbar-thumb-active-start: rgb(75 85 99 / 28%);
  --wui-scrollbar-thumb-active-end: rgb(156 163 175 / 28%);

  /* Solid thumb color (for Firefox). */
  --wui-scrollbar-thumb-solid: rgb(203 213 225);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

:root[data-theme='dark'] {
  /* Stronger accent on dark backgrounds */
  --color-red-pers: #e5e7eb;
  --color-yellow-saff: #9ca3af;
  --wui-scrollbar-thumb-start: rgb(229 231 235 / 4%);
  --wui-scrollbar-thumb-end: rgb(156 163 175 / 4%);
  --wui-scrollbar-thumb-hover-start: rgb(229 231 235 / 12%);
  --wui-scrollbar-thumb-hover-end: rgb(156 163 175 / 12%);
  --wui-scrollbar-thumb-active-start: rgb(229 231 235 / 20%);
  --wui-scrollbar-thumb-active-end: rgb(156 163 175 / 20%);
  --wui-scrollbar-thumb-solid: rgb(55 65 81);
}

/* Legacy fallback for older Chromium that doesn't support space-separated rgb()/alpha. */
/* stylelint-disable color-function-notation, color-function-alias-notation, alpha-value-notation */
@supports not (color: rgb(0 0 0)) {
  :root {
    --wui-scrollbar-thumb-start: rgba(75, 85, 99, 0.06);
    --wui-scrollbar-thumb-end: rgba(156, 163, 175, 0.06);
    --wui-scrollbar-thumb-hover-start: rgba(75, 85, 99, 0.18);
    --wui-scrollbar-thumb-hover-end: rgba(156, 163, 175, 0.18);
    --wui-scrollbar-thumb-active-start: rgba(75, 85, 99, 0.28);
    --wui-scrollbar-thumb-active-end: rgba(156, 163, 175, 0.28);
    --wui-scrollbar-thumb-solid: rgb(203, 213, 225);
  }

  :root[data-theme='dark'] {
    --wui-scrollbar-thumb-start: rgba(229, 231, 235, 0.04);
    --wui-scrollbar-thumb-end: rgba(156, 163, 175, 0.04);
    --wui-scrollbar-thumb-hover-start: rgba(229, 231, 235, 0.12);
    --wui-scrollbar-thumb-hover-end: rgba(156, 163, 175, 0.12);
    --wui-scrollbar-thumb-active-start: rgba(229, 231, 235, 0.2);
    --wui-scrollbar-thumb-active-end: rgba(156, 163, 175, 0.2);
    --wui-scrollbar-thumb-solid: rgb(55, 65, 81);
  }
}
/* stylelint-enable color-function-notation, color-function-alias-notation, alpha-value-notation */

/*
-------------------------------------------------------------------------------
Global reset / box sizing
-------------------------------------------------------------------------------
*/

html,
body {
  height: 100%;
  overflow: hidden;
  text-size-adjust: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* Firefox: apply to all actual scroll containers (not only html/body). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--wui-scrollbar-thumb-solid) var(--wui-scrollbar-track);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/*
-------------------------------------------------------------------------------
Global scrollbar styling
-------------------------------------------------------------------------------
*/

*::-webkit-scrollbar {
  width: var(--wui-scrollbar-size);
  height: var(--wui-scrollbar-size);
  background-color: transparent;
}

*::-webkit-scrollbar-track {
  background: var(--wui-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--wui-scrollbar-thumb-solid);
  background-image: linear-gradient(180deg, var(--wui-scrollbar-thumb-start), var(--wui-scrollbar-thumb-end));
  border-radius: var(--wui-scrollbar-radius);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--wui-scrollbar-thumb-solid);
  background-image: linear-gradient(
    180deg,
    var(--wui-scrollbar-thumb-hover-start),
    var(--wui-scrollbar-thumb-hover-end)
  );
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--wui-scrollbar-thumb-solid);
  background-image: linear-gradient(
    180deg,
    var(--wui-scrollbar-thumb-active-start),
    var(--wui-scrollbar-thumb-active-end)
  );
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Remove up/down (and left/right) arrow buttons in WebKit scrollbars */
*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0;
}

*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:increment,
*::-webkit-scrollbar-button:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:horizontal:increment,
*::-webkit-scrollbar-button:horizontal:decrement {
  width: 0;
  height: 0;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0;
}

*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none !important;
  width: 0;
  height: 0;
  background: transparent !important;
  border: 0;
}

/* Some classic scrollbars paint arrow areas as track pieces; keep them transparent. */
*::-webkit-scrollbar-track-piece:start,
*::-webkit-scrollbar-track-piece:end {
  background: transparent;
}

/*
-------------------------------------------------------------------------------
Autofill
-------------------------------------------------------------------------------
*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  transition:
    background-color 600000s ease-in-out 0s,
    color 600000s ease-in-out 0s;
}

/*
-------------------------------------------------------------------------------
App root / layout scaffolding
-------------------------------------------------------------------------------
*/

#root {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.ant-app {
  width: 100%;
  height: 100%;
}

/*
-------------------------------------------------------------------------------
Loader
-------------------------------------------------------------------------------
*/

.loader:empty {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem !important;
  height: 1.5rem !important;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  animation: loading 1.1s infinite linear;
  border: 2px solid #0003;
  border-left: 2px solid #1890ff;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*
-------------------------------------------------------------------------------
Layout / component styles
-------------------------------------------------------------------------------
*/

.layout-footer {
  text-align: center;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 !important;
}

.wui-ant-layout-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wui-ant-breadcrumb-separator {
  line-height: 56px;
}

.layout-header {
  padding-left: 20px !important;
}

.layout-content {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.layout-container {
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.layout-container > .wui-ant-tabs-nav {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.layout-container > .wui-ant-tabs-content-holder {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.layout-container > .wui-ant-tabs-content-holder > .wui-ant-tabs-content {
  height: 100%;
}

.layout-container > .wui-ant-tabs-content-holder > .wui-ant-tabs-content > .wui-ant-tabs-tabpane {
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.layout-container .pro-tabs {
  z-index: 10;
  margin-bottom: 0;
}

.layout-container .layout-tabpanel {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Fill mode for FixTabPanel - overrides flex centering */
.layout-container .layout-tabpanel .fix-tab-panel-fill {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.rounded-tab {
  --r: 12px;

  padding-inline: 0.8em;
  border-inline: var(--r) solid #0000;
  border-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0 / var(--r);
  mask:
    radial-gradient(var(--r) at var(--r) 0, #0000 98%, #000 101%) calc(-1 * var(--r)) 100% / 100% var(--r) repeat-x,
    conic-gradient(#000 0 0) padding-box;
  background: #e1e1e1 border-box;
  width: fit-content;
}
