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

@layer base {
  * {
    @apply font-sans tracking-wide;
  }
}

:root {
  --primary-main: theme(colors.primary.main);
  --primary-tint: theme(colors.primary.tint);
  --text-header: theme(colors.text.header);
}

/* spinner */
.custom-spin .ant-spin-dot i {
  color: var(--primary-main);
}

/* //hide scroll */
.hide-scroll::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

/* dropdown overlay menu */
.ant-dropdown .ant-dropdown-menu {
  background-color: white !important;
  padding: 0px !important;
}

/* custom scrollbar global */
body::-webkit-scrollbar {
  width: 5px !important;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--primary-main) !important;
  border-radius: 9999px;
}

/* custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px !important;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--primary-main) !important;
  border-radius: 9999px;
}

/* custom tabs */
.custom-tabs .ant-tabs-tab {
  padding: 8px 0px !important;
  color: var(--text-header) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.custom-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--primary-tint) !important;
}
.custom-tabs .ant-tabs-ink-bar {
  background-color: var(--primary-tint) !important;
}

/* custom select component */
.custom-select .ant-select-selection-item {
  color: var(--primary-tint) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin-right: 16px !important;
}

.custom-select .ant-select-selector {
  outline: 1px solid var(--primary-tint) !important;
  border-radius: 8px !important;
  height: 30px !important;
  margin-top: 1px !important;
}

/* //error helper text */
.ant-form-item-explain-error {
  font-size: 12px !important;
}

/* //table filter button style */
.ant-table-filter-dropdown .ant-btn {
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  font-size: 12px !important;
}

.ant-table-filter-dropdown .ant-btn:hover {
  background-color: white;
  color: black;
  border: 1px solid var(--primary-tint);
  font-size: 12px !important;
  color: var(--primary-tint) !important;
}

.ant-table-filter-dropdown .ant-btn + .ant-btn {
  background-color: var(--primary-tint);
  color: white;
  border: 1px solid var(--primary-tint);
}

/* table sorter and filter */
.custom-filter-position .ant-table-column-sorters {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  height: 100px;
  width: 100%;
}

.custom-filter-position .ant-table-column-sorter.ant-table-column-sorter-full {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-right: 24px;
}

/* Custom CSS to position sort and filter icons */
.custom-filter-position .ant-table-thead > tr > th {
  position: relative;
  /* padding-bottom: 32px; Make room for icons at bottom */
  height: 100px;
}

.custom-filter-position .ant-table-filter-trigger {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(
    calc(-50% + 20px)
  ); /* Adjust based on sort icon width */
  padding-right: 24px;
}

/* antd table filter dropdown*/
.ant-table-filter-dropdown .ant-input {
  font-size: 10px !important;
}

.ant-dropdown-menu-title-content {
  font-size: 12px !important;
}

.ant-dropdown-menu-title-content .ant-checkbox-inner {
  transform: scale(0.8) !important;
  margin-top: 4px !important;
  accent-color: red !important;
}

.ant-dropdown-menu-title-content .ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--primary-tint) !important;
  border-color: var(--primary-tint) !important;
}