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

@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --color-text-primary: #334155;
  --color-bg-primary: #ffffff;
  --color-border-primary: #e2e8f0;
  --color-bg-accent: #22c55e;
  --color-border-accent: #22c55e;
  color-scheme: light dark;
}

.dark {
  --color-text-primary: #f7fafc;
  --color-bg-primary: #111827;
  --color-border-primary: #374151;
  --color-bg-accent: #22c55e;
  --color-border-accent: #22c55e;
}

body {
  min-height: 100vh;
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary);
  /* padding: 0px 64px 0px 64px; */
  @apply px-4 md:px-8 lg:px-16 !important;
  /* margin: 0px auto; */
  min-width: 300px;
  max-width: 1400px;
  height: 100%;
  /* border: 2px solid green;  */
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
}

.bg-primary {
  background-color: var(--color-bg-primary);
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-primary);
}

/* Ant Design overrides */
.ant-btn {
  color: var(--color-text-primary) !important;
  background-color: var(--color-bg-primary) !important;
}

.ant-btn-primary {
  background-color: var(--color-bg-accent) !important;
  border-color: var(--color-border-accent) !important;
  color: white !important;
}

.ant-btn-primary:hover {
  background-color: #1ea352 !important;
  border-color: #1ea352 !important;
  color: white !important;
}

.ant-btn-default {
  background-color: transparent !important;
  border-color: var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
}

.ant-btn-default:hover {
  border-color: var(--color-border-accent) !important;
  color: var(--color-border-accent) !important;
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--color-bg-accent) !important;
}

.ant-tabs-tab:hover {
  @apply text-accent !important;
}

.ant-tabs-tab {
  @apply text-primary !important;
}

.ant-tabs-ink-bar {
  @apply bg-accent !important;
}

.element.style {
  left: 0%;
  width: 100%;
}
.ant-slider-track {
  /* background: #6366f1 !important; */
  @apply bg-accent !important;
}
.ant-slider-rail {
  /* background: #d1d5db !important; */
  @apply bg-secondary !important;
}
.ant-slider-handle {
  /* border: solid 2px #6366f1 !important; */
  @apply border-accent !important;
}
.ant-slider-handle:hover {
  /* border: solid 2px #4f46e5 !important; */
  @apply border-accent brightness-75 !important;
}

.ant-switch-checked {
  @apply bg-accent !important;
  border: indigo;
}
.ant-switch {
  background-color: #d1d5db;
  border: grey;
}

.ant-modal-content {
  @apply dark:bg-primary dark:text-primary;
}
.ant-modal-footer {
  @apply border-secondary;
}
.ant-modal-header,
.ant-modal-close {
  @apply bg-secondary text-primary hover:text-primary    transition duration-200;
}
.ant-modal-title,
.ant-modal-header {
  @apply bg-primary text-primary;
}
a:hover {
  @apply text-accent;
}
/* .iiz__img,
iiz__zoom-img {
  @apply w-full;
} */

.ant-radio-checked .ant-radio-inner {
  @apply border-accent !important;
}

.ant-radio-checked .ant-radio-inner:after {
  @apply bg-accent !important;
}

.ant-radio:hover .ant-radio-inner {
  @apply border-accent !important;
}

.loadbar:after {
  content: "";
  /* width: 40px; */
  height: 3px;
  /* background: red; */

  position: absolute;
  animation: loader 2s;
  -webkit-animation: loader 2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  bottom: 0px;
  @apply rounded-b bg-accent;

  margin-left: 0;
}

@keyframes loader {
  0% {
    width: 0%;
    left: 0;
    right: 0;
  }
  50% {
    width: 100%;
    left: 0;
    right: 0;
  }
  99% {
    width: 0%;
    left: 100%;
    right: 0;
  }
}

@-webkit-keyframes loader {
  0% {
    width: 0%;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
    right: 0;
  }
  99% {
    width: 0%;
    left: 100%;
    right: 0;
  }
}
.scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  opacity: 0; /* Make scrollbar fully transparent by default */
  transition: opacity 0.25s ease; /* Transition for the opacity */
}

.scroll:hover::-webkit-scrollbar {
  opacity: 1; /* Make scrollbar fully opaque on hover */
}

.scroll::-webkit-scrollbar-track {
  @apply bg-secondary;
  border-radius: 20px;
}

.scroll::-webkit-scrollbar-thumb {
  @apply bg-accent;
  border-radius: 20px;
  border: 3px solid rgb(214, 214, 214);
}

.dark .scroll-gradient {
  background: linear-gradient(
    to bottom,
    rgba(17, 24, 39, 1),
    rgba(17, 24, 39, 0)
  );
}

.light .scroll-gradient {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

.scroll-gradient {
  position: sticky;
  top: 0;
  height: 15px;
  z-index: 2; /* Above the content but below the scrollbar */
  pointer-events: none; /* So it doesn't block interaction with the content */
}

.vega-embed {
  @apply bg-primary rounded !important;
}

.ant-upload-list,
.ant-upload-hint,
.ant-upload-list-text,
.ant-upload-text,
.ant-upload-text-icon {
  @apply text-primary !important;
}

.ant-upload {
  @apply text-primary px-2  !important;
  border-radius: 4px !important;
}
.ant-upload:hover {
  @apply border-accent !important;
}
.ant-upload-drag-container,
.ant-upload-text,
.ant-upload-hint {
  @apply text-primary !important;
}

.ant-upload-list-item:hover,
.ant-upload-list-item-info:hover {
  @apply bg-secondary text-accent !important;
}
.ant-pagination .ant-pagination-item {
  @apply bg-primary  !important;
}
.ant-pagination .ant-pagination-item-active a {
  @apply text-accent  !important;
}
.ant-pagination .ant-pagination-item-active {
  @apply border-accent text-accent !important;
}
.ant-pagination .ant-pagination-item a,
.ant-pagination-item-link .anticon {
  @apply text-primary !important;
}
.ant-collapse-expand-icon .anticon {
  @apply text-primary !important;
}
.ant-modal-content {
  @apply dark:bg-primary dark:text-primary !important;
}
.ant-modal-footer {
  @apply border-secondary !important;
}
.ant-btn {
  @apply text-primary !important;
}
:where(.ant-btn).ant-btn-compact-item.ant-btn-primary:not([disabled])
  + .ant-btn-compact-item.ant-btn-primary:not([disabled]):before {
  @apply bg-secondary !important;
}
.ant-btn-primary {
  @apply bg-accent text-white !important;
}
.ant-btn-primary:hover {
  @apply bg-accent text-white drop-shadow-md !important;
}
.ant-modal-close {
  @apply text-primary   duration-200   !important;
}
.ant-modal-title,
.ant-modal-header {
  @apply bg-primary text-primary !important;
}
.ant-radio,
.ant-collapse,
.ant-collapse-header-text,
.ant-collapse-content-box,
.ant-collapse-content,
.ant-radio-wrapper {
  @apply text-primary !important;
}
.ant-collapse-borderless > .ant-collapse-item {
  @apply border-secondary !important;
}

.ant-skeleton-paragraph > li {
  @apply bg-secondary !important;
}

.ant-drawer-content,
.ant-drawer-header,
.ant-drawer-header-title,
.ant-drawer-close,
.ant-drawer-title {
  @apply bg-primary text-primary !important;
}

/* .ant-radio-input::before {
  @apply bg-primary !important;
} */

.prose > pre {
  padding: 0px !important;
  margin: 0px !important;
}

.monaco-editor,
.monaco-scrollable-element,
.overflow-guard {
  @apply rounded !important;
}

/* div.chatbox > ul {
  list-style: disc !important;
}
div.chatbox > ul,
div.chatbox > ol {
  padding-left: 20px !important;
  margin: 0px !important;
}
div.chatbox > ol {
  list-style: decimal !important;
} */

#app {
  height: 100%;
  background-color: var(--color-bg-primary) !important;
}

html {
  display: table;
  margin: auto;
  background-color: var(--color-bg-primary) !important;
  min-height: 100vh;
}
