@tailwind base;

@tailwind components;

@tailwind utilities;

html {
  --color-primary-50: theme("colors.purple.50");
  --color-primary-100: theme("colors.purple.100");
  --color-primary-200: theme("colors.purple.200");
  --color-primary-300: theme("colors.purple.300");
  --color-primary-400: theme("colors.purple.400");
  --color-primary-500: theme("colors.purple.500");
  --color-primary-600: theme("colors.purple.600");
  --color-primary-700: theme("colors.purple.700");
  --color-primary-800: theme("colors.purple.800");
  --color-primary-900: theme("colors.purple.900");
  --color-primary-950: theme("colors.purple.950");
}

/*******************************************************
 Classes
 *******************************************************/
.column-fill-auto {
  column-fill: auto;
}

[x-cloak] {
  @apply !hidden;
}

@layer utilities {
  .border-spacing-none {
    border-spacing: 0;
  }

  .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
  }

  .scrollable-top:after {
    @apply absolute bg-gradient-to-t from-gray-100 h-4 left-0 right-0 -top-4 dark:bg-none;
    content: "";
  }
}

.asteriskField {
  @apply text-red-600;
}

/*******************************************************
 Icons
 *******************************************************/
.md-16 {
  font-size: 16px;
}

.md-18 {
  font-size: 18px;
}

/*******************************************************
 Select
 *******************************************************/
select:not([class*="bg-none"]):not([multiple]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3e%3cpath fill='#6B7280' d='M24 31.4 11.3 18.7l2.85-2.8L24 25.8l9.85-9.85 2.85 2.8Z'/%3e%3c/svg%3e");
  background-position: right 0.7rem center;
  background-repeat: no-repeat;
  background-size: 1.125rem 1.125rem;
}

select:after {
  content: "";
  display: block;
}

/*******************************************************
 Table
 *******************************************************/
table select {
  @apply appearance-none bg-no-repeat border block cursor-pointer font-medium px-3 py-2 pr-5 rounded-md shadow-sm text-gray-500;

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(156, 163, 175)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>');
  background-size: 1.125rem 1.125rem;
  background-position: right 0.5rem center;
}

table select:focus {
  @apply border-primary-600;
}

table tr.selected td,
table tr.selected th {
  @apply bg-yellow-200/[.10] dark:bg-white/[.03];
}

/*******************************************************
 Datetime
 *******************************************************/
.datetimeshortcuts {
  @apply absolute flex flex-row-reverse items-center right-0 text-0 top-px;
}

.datetimeshortcuts a {
  @apply text-0 text-gray-400 transition hover:text-gray-700;
}

.datetimeshortcuts a:first-child {
  @apply hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200;
}

.datetimeshortcuts a:first-child:after {
  @apply border-l flex h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700 dark:hover:text-white;
  content: "timer";
}

.datetimeshortcuts a:first-child:after {
  @apply flex;
}

.date-icon {
  @apply block h-9 text-gray-400 transition-all w-9 hover:text-gray-700 dark:text-gray-500 dark:hover:text-white;
}

.date-icon:after {
  @apply border-l h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700;
  content: "edit";
}

.date-icon:after {
  @apply flex dark:hover:text-white;
}

.clock-icon {
  @apply block h-9 ml-2 w-9 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200;
}

.clock-icon:after {
  @apply border-l h-9 items-center justify-center material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700 dark:hover:text-white;
  content: "edit";
}

.clock-icon:after {
  @apply flex;
}

.timezonewarning {
  @apply absolute block items-center right-20 top-2.5 text-gray-500 truncate;
  font-size: 0;
}

.timezonewarning:hover {
  @apply bg-white bottom-px leading-9 left-px right-px px-3 rounded-md text-xs top-px dark:bg-gray-900;
}

.timezonewarning:hover:before {
  @apply hidden mr-2;
}

.timezonewarning:before {
  @apply block cursor-pointer items-center justify-center material-symbols-outlined text-base text-center text-red-600 dark:border-gray-700;
  content: "warning";
}

/*******************************************************
 Selector
 *******************************************************/
.selector {
  @apply flex flex-col flex-grow items-center max-w-2xl md:flex-row;
}

.selector select {
  @apply bg-none flex-grow w-full dark:bg-gray-900;
}

.selector option {
  @apply px-3 text-gray-500 text-sm truncate dark:text-gray-400;
}

.selector .list-footer-display {
  @apply border-t py-2 text-center text-sm dark:border-gray-700;
}

.selector-chosen,
.selector-available {
  @apply border flex flex-col flex-grow rounded-md self-stretch shadow-sm md:w-72 lg:w-96 dark:border-gray-700;
}

.selector-chosen h2,
.selector-available h2 {
  @apply border-b mb-3 py-2 px-3 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-200;
}

.selector-filter {
  @apply flex;
}
.selector-filter input {
  @apply bg-gray-100 block flex-grow font-medium mb-3 mx-3 px-3 py-2 rounded-md text-gray-500 text-sm focus:outline-none dark:bg-gray-800 dark:text-gray-400;
}

.selector-chooseall,
.selector-clearall {
  @apply block border-t py-2 text-center text-sm text-primary-500 underline dark:border-gray-700;
}

.selector-clearall {
  @apply text-red-600 dark:text-red-500;
}

.selector-chooser {
  @apply flex flex-col my-4 text-0 w-14;
}

.selector-chooser li {
  @apply py-1 text-center;
}

.selector-add:after,
.selector-remove:after {
  @apply inline-block material-symbols-outlined text-gray-400 w-5;
}

.selector-add:after {
  content: "arrow_forward";
}

.selector-remove:after {
  content: "arrow_back";
}

.related-widget-wrapper {
  @apply !flex-nowrap;
}

.related-widget-wrapper-link {
  @apply order-last;
}

/*******************************************************
 Inlines
 *******************************************************/
.empty-form {
  @apply hidden;
}

.add-row {
  @apply align-middle bg-gray-50 px-3 py-5 font-normal text-right text-sm dark:bg-gray-900;
}

[data-inline-type="stacked"] .add-row {
  @apply border-t border-gray-200 overflow-hidden dark:border-gray-800;
}

.add-row td {
  @apply px-3 py-4;
}

.add-row a {
  @apply bg-white border block font-medium px-3 py-2 rounded-md text-center text-gray-500 text-sm transition-all lg:float-right dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200;
}

h3 .delete label {
  @apply text-gray-500 dark:text-gray-200;
}

.inline-deletelink {
  @apply block leading-none text-red-600 text-sm underline dark:text-red-500;
}

td .inline-deletelink {
  @apply block lg:mt-2.5;
}

h3 span:nth-child(3) {
  @apply ml-auto;
}

/*******************************************************
 Autocomplete
 *******************************************************/
.select2.select2-container {
  @apply bg-white border max-w-2xl relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
}

.errors .select2.select2-container {
  @apply border-red-600;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--single {
  @apply h-auto;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__rendered {
  @apply font-medium h-9 px-3 py-2 text-gray-500 text-sm dark:text-gray-400;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--multiple
  .select2-selection__clear,
.select2-container.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__clear {
  @apply flex items-center h-9 -mt-2 text-0;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--multiple
  .select2-selection__clear:after,
.select2-container.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__clear:after {
  @apply material-symbols-outlined text-gray-500;
  content: "close";
  font-size: 14px;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__arrow {
  @apply flex h-9 items-center mr-2 -mt-px;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__arrow:after {
  @apply left-0 leading-none m-0 material-symbols-outlined text-gray-500 text-lg;
  content: "expand_more";
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__arrow
  b {
  @apply hidden;
}

.select2-container.select2-container--admin-autocomplete
  .select2-search--dropdown {
  @apply flex px-3 py-2;
}

.select2-container.select2-container--admin-autocomplete
  .select2-search--dropdown
  .select2-search__field {
  @apply bg-gray-50 border border-gray-200 border-solid flex-grow font-medium mx-0 outline-none px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm w-full dark:bg-gray-800 dark:border-gray-800 dark:text-gray-400;
}

.select2-container.select2-container--admin-autocomplete.select2-container--open.select2-container--above {
  @apply rounded-t-none;
}

.select2-container.select2-container--admin-autocomplete.select2-container--open.select2-container--below {
  @apply rounded-b-none;
}

.select2-container.select2-container--open .select2-dropdown {
  @apply border-primary-600 ring ring-primary-300 pb-2 shadow-sm dark:bg-gray-900 dark:border-primary-700 after:block after:bg-white after:absolute after:border-l after:border-l-primary-600 after:border-r after:border-r-primary-600 after:h-1 after:-left-px after:-right-px after:-mt-1 after:top-0 dark:after:bg-gray-900 dark:after:border-l-primary-700 dark:after:border-r-primary-700 dark:ring-primary-700 dark:ring-opacity-50;
}

.select2-container.select2-container--open .select2-dropdown--below {
  @apply rounded-t-none rounded-b-md;
}

.select2-container.select2-container--open .select2-dropdown--above {
  @apply rounded-b-none rounded-t-md after:bottom-0 after:-mb-1 after:mt-0 after:top-auto;
}

.select2-container.select2-container--admin-autocomplete
  .select2-results__option {
  @apply block px-3 py-2 text-gray-500 text-sm transition-all dark:text-gray-400;
}

.select2-container.select2-container--admin-autocomplete
  .select2-results__option--highlighted[aria-selected] {
  @apply text-primary-500;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--multiple
  .select2-selection__clear {
  @apply m-0 mr-2 top-0;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--multiple
  .select2-selection__rendered {
  @apply pl-1 pr-6 py-0 pt-1;
}

.select2-container.select2-container--admin-autocomplete
  .select2-selection--single
  .select2-selection__rendered {
  @apply pr-8;
}

.select2-container--admin-autocomplete
  .select2-selection--multiple
  li.select2-selection__choice {
  @apply bg-gray-100 block font-medium h-7 leading-7 m-0 mr-1 mb-1 px-2 shadow-inner text-sm text-gray-500 truncate dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
}

.select2-container--admin-autocomplete
  .select2-selection--multiple
  li.select2-selection__choice
  .select2-selection__choice__remove {
  @apply align-top text-0 hover:text-gray-600 dark:hover:text-gray-200;
}

.select2-container--admin-autocomplete
  .select2-selection--multiple
  li.select2-selection__choice
  .select2-selection__choice__remove:after {
  @apply h-7 !leading-7 material-symbols-outlined;

  content: "close";
  font-size: 14px;
}

.select2-container--admin-autocomplete
  .select2-selection--multiple
  li.select2-search--inline
  .select2-search__field {
  @apply m-0 h-7 text-gray-500 text-sm;
}

.select2.select2-container--open {
  @apply border-b-0 border-primary-600 relative ring ring-primary-300 dark:border-primary-700 dark:ring-primary-700 dark:ring-opacity-50;
}

/*******************************************************
 Collapsed
 *******************************************************/
fieldset.collapsed > div {
  display: none;
}

fieldset.collapse {
  @apply visible;
}

fieldset.collapsed h2,
fieldset.collapsed {
  @apply block;
}

fieldset.collapsed .collapse-toggle {
  @apply inline;
}

/*******************************************************
 Calendar
 *******************************************************/
.calendarbox,
.clockbox {
  @apply bg-white border rounded-md shadow-sm text-gray-500 text-sm w-80 z-50 dark:bg-gray-800 dark:border-gray-700 !fixed !left-1/2 !top-1/2 -translate-x-1/2 -translate-y-1/2;
}

.calendar caption {
  @apply font-medium mb-3 py-3 text-gray-700 dark:text-gray-200;
}

.calendar table {
  @apply mb-3 w-full;
}

.calendar table th {
  @apply font-medium text-center text-gray-700 text-xs dark:text-gray-200;
}

.calendar table td {
  @apply h-10 p-1 text-center w-10;
}

.calendar table td a {
  @apply block flex h-8 items-center justify-center rounded-full transition-all w-8 dark:text-gray-400;
}

.calendar table td a:hover {
  @apply bg-gray-100 text-gray-700;
}

.calendar table td.today a {
  @apply bg-primary-600 font-medium  text-white;
}

.calendar-shortcuts {
  @apply flex flex-row justify-center mb-3 px-1 rounded-b-md text-0;
}

.calendar-shortcuts a {
  @apply border font-medium leading-none mx-1 px-2 py-2 rounded-md shadow-sm text-center text-gray-500 text-xs transition-all w-1/3 dark:border-gray-700 dark:hover:border-gray-600 dark:text-gray-400 dark:hover:text-gray-200;
}

.calendar-cancel {
  @apply block border-t py-2 text-center text-xs text-red-600 underline dark:border-gray-700 dark:text-red-500;
}

.calendarnav-previous {
  @apply absolute block ml-2 mt-2 left-0 text-0 top-0;
}

.calendarnav-next:after,
.calendarnav-previous:after {
  @apply border flex h-7 items-center justify-center material-symbols-outlined rounded-full text-gray-400 transition-all w-7 hover:border-primary-600 hover:text-primary-500 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-800;

  content: "navigate_before";
  display: flex;
}

.calendarnav-next:hover:after,
.calendarnav-previous:hover:after {
  @apply dark:border-gray-600 dark:text-gray-200;
}

.calendarnav-next {
  @apply absolute block mr-2 mt-2 right-0 text-0 top-0;
}

.calendarnav-next:after {
  content: "navigate_next";
  display: flex;
}

/*******************************************************
 Timepicker
 *******************************************************/
.clockbox {
  @apply bg-white border rounded-md shadow-sm text-sm dark:bg-gray-800 dark:border-gray-700 z-50;
}

.clockbox h2 {
  @apply font-medium px-3 py-2 text-gray-700 dark:text-gray-200;
}
.clockbox .timelist {
  @apply pb-2 px-3 text-gray-500 dark:text-gray-400;
}

.clockbox .timelist li {
  @apply block pb-1 transition-all;
}
.clockbox .timelist li:hover {
  @apply text-primary-500;
}

/*******************************************************
 Htmx
 *******************************************************/
.htmx-swapping:before {
  @apply absolute bg-white bottom-0 left-0 opacity-80 transition-all right-0 top-0;
  content: "";
}

.htmx-swapping:after {
  @apply absolute animate-spin h-4 inset-1/2 material-symbols-outlined md-16 text-gray-400 w-4;
  content: "sync";
}

/*******************************************************
 Filters
 *******************************************************/
#changelist-filter .admin-numeric-filter-slider .noUi-handle {
  @apply bg-white border border-gray-200 cursor-pointer h-4 -right-4 rounded-full shadow-sm w-4 dark:bg-gray-200 dark:border-gray-200;
}

#changelist-filter .admin-numeric-filter-slider .noUi-handle-upper {
  @apply right-0;
}

#changelist-filter .admin-numeric-filter-slider .noUi-handle:after {
  content: none;
}

#changelist-filter .admin-numeric-filter-slider .noUi-handle:before {
  content: none;
}

#changelist-filter .admin-numeric-filter-slider.noUi-target {
  @apply bg-gray-200 border-0 h-1 shadow-none dark:bg-gray-600;
}

#changelist-filter .admin-numeric-filter-slider .noUi-connect {
  @apply bg-primary-600 border-0 h-1;
}

#changelist-filter .admin-numeric-filter-slider-tooltips {
  @apply flex flex-row font-medium mb-5 space-x-4 text-gray-500 text-sm;
}

/*******************************************************
 Trix
 *******************************************************/
trix-toolbar[id^="trix-toolbar-"] {
  @apply sticky top-0 dark:bg-gray-900;
}

.trix-active {
  @apply text-primary-600;
}

/*******************************************************
 django-modeltranslation
 *******************************************************/
.ui-tabs {
  @apply flex flex-col;
}

.ui-tabs.ui-widget .ui-tabs-nav {
  @apply bg-gray-100 border-0 flex gap-2 m-0 mb-4 mr-auto p-1 rounded text-sm dark:bg-white/[.04] after:hidden;
}

.ui-tabs.ui-widget .ui-tabs-nav li {
  @apply border-0 top-0;
}

.ui-tabs.ui-widget .ui-tabs-nav li a {
  @apply bg-transparent border-0 flex flex-row font-medium items-center m-0 px-2.5 py-1 rounded text-gray-400 text-sm hover:bg-gray-700/[.04] hover:text-gray-700 dark:hover:bg-white/[.04] dark:hover:text-white;
}

.ui-tabs.ui-widget .ui-tabs-nav li.ui-tabs-active a {
  @apply flex flex-row font-medium items-center px-2.5 py-1 rounded  bg-white shadow-sm text-gray-700 hover:bg-white dark:bg-gray-900 dark:hover:bg-gray-900 dark:text-white;
}

/*******************************************************
 Simplebar
 *******************************************************/
.simplebar-track .simplebar-scrollbar::before {
  @apply bg-gray-900/80  dark:bg-gray-400/80;
}

.simplebar-horizontal-scrollbar-top .simplebar-track.simplebar-horizontal {
  @apply top-9
}
