@layer tailwind-base, antd;

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

:root {
  --neutral-900: #0a0d14;
  --neutral-800: #161922;
  --neutral-700: #20232d;
  --neutral-600: #31353f;
  --neutral-500: #525866;
  --neutral-400: #868c98;
  --neutral-300: #cdd0d5;
  --neutral-200: #e2e4e9;
  --neutral-100: #f6f8fa;
  --neutral-0: #ffffff;

  --blue-darker: #162664;
  --blue-dark: #253ea7;
  --blue-base: #375dfb;
  --blue-light: #c2d6ff;
  --blue-lighter: #ebf1ff;

  --orange-darker: #6e330c;
  --orange-dark: #c2540a;
  --orange-base: #f17b2c;
  --orange-light: #ffdac2;
  --orange-lighter: #fef3eb;

  --yellow-darker: #693d11;
  --yellow-dark: #b47818;
  --yellow-base: #f2ae40;
  --yellow-light: #fbdfb1;
  --yellow-lighter: #fef7ec;

  --red-darker: #710e21;
  --red-dark: #af1d38;
  --red-base: #df1c41;
  --red-light: #f8c9d2;
  --red-lighter: #fdedf0;

  --green-darker: #176448;
  --green-dark: #2d9f75;
  --green-base: #38c793;
  --green-light: #cbf5e5;
  --green-lighter: #effaf6;

  --purple-darker: #2b1664;
  --purple-dark: #5a36bf;
  --purple-base: #6e3ff3;
  --purple-light: #cac2ff;
  --purple-lighter: #eeebff;

  --pink-darker: #620f6c;
  --pink-dark: #9c23a9;
  --pink-base: #e255f2;
  --pink-light: #f9c2ff;
  --pink-lighter: #fdebff;

  --teal-darker: #164564;
  --teal-dark: #1f87ad;
  --teal-base: #35b9e9;
  --teal-light: #c2efff;
  --teal-lighter: #ebfaff;

  --primary-darker: var(--blue-darker);
  --primary-dark: var(--blue-dark);
  --primary-base: var(--blue-base);
  --primary-light: var(--blue-light);
  --primary-lighter: var(--blue-lighter);

  --bg-strong: var(--neutral-900);
  --bg-surface: var(--neutral-700);
  --bg-soft: var(--neutral-200);
  --bg-weak: var(--neutral-100);
  --bg-white: var(--neutral-0);

  --text-main: var(--neutral-900);
  --text-sub: var(--neutral-500);
  --text-soft: var(--neutral-400);
  --text-disabled: var(--neutral-300);
  --text-white: var(--neutral-0);

  --stroke-strong: var(--neutral-900);
  --stroke-sub: var(--neutral-300);
  --stroke-soft: var(--neutral-200);
  --stroke-disabled: var(--neutral-100);
  --stroke-white: var(--neutral-0);

  --icon-strong: var(--neutral-900);
  --icon-sub: var(--neutral-500);
  --icon-soft: var(--neutral-400);
  --icon-disabled: var(--neutral-300);
  --icon-white: var(--neutral-0);

  --state-success: var(--green-base);
  --state-warning: var(--orange-base);
  --state-error: var(--red-base);
  --state-information: var(--blue-base);
  --state-away: var(--yellow-base);
  --state-feature: var(--purple-base);
  --state-neutral: var(--neutral-400);
  --state-verified: var(--teal-base);

  --cursor-pointer-url: url("/cursors/pointer.png") 2 2, pointer;

  --focus-ring-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--stroke-soft),
    0 0 #0000;
}

*,
*::before,
*::after {
  font-family: "Inter" !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-base);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: var(--bg-weak);
  border-radius: 3px;
}

::-webkit-scrollbar-track:hover {
  background: var(--bg-soft);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--primary-darker);
}

.finanta-form-item .ant-form-item-explain.ant-form-item-explain-connected,
.finanta-form-item .ant-form-item-explain-error,
.ant-form-item-control-input + div {
  display: none !important;
}

#root form.rjsf {
  width: 100% !important;
}

.ant-message-notice-content {
  padding: 0 !important;
}

.minimal-scrollbar::-webkit-scrollbar {
    width: 4px; /* Width of the scrollbar */
    height: 4px; /* Height of the scrollbar */
}

.minimal-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Track color */
    border-radius: 10px; /* Rounded corners for the track */
}

.minimal-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3); /* Scrollbar thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
}

.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5); /* Thumb color on hover */
}

.ql-toolbar {
  background-color: var(--bg-soft);
  border: none;
  border-radius: 8px 8px 0 0;
}

.ant-table-content {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-base) transparent;
  scrollbar-gutter: stable;
}

.ant-table-column-sorter .anticon.active {
	color: var(--primary-base);
}

.editor-container .ck.ck-toolbar {
  background-color: var(--bg-soft);
  border: none;
}

.ck-powered-by {
  display: none!important;
}