@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');
}

/*******************************************************
 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;
}

/*******************************************************
 Forms
 *******************************************************/
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 .70rem center;
  background-repeat: no-repeat;
  background-size: 1.125rem 1.125rem;
}

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

#page input[type=checkbox] {
  @apply appearance-none bg-white block border border-gray-300 cursor-pointer h-4 relative rounded w-4 dark:bg-gray-700 dark:border-gray-500 hover:border-gray-400;
  @apply focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-primary-500
}

#page input[type=checkbox]:after {
  @apply absolute flex h-4 items-center justify-center leading-none -ml-px -mt-px text-white transition-all text-sm w-4 dark:text-gray-700;

  content: "done";
  font-family: "Material Symbols Outlined";
}

#page input[type=checkbox]:checked {
  @apply bg-primary-600 border-primary-600 transition-all;
}

#page input[type=checkbox]:checked:after {
  @apply text-white;
}

#page input[type=checkbox].hidden {
  display: none;
}

/*******************************************************
 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 .5rem center;
}

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

table tr.selected {
  @apply bg-yellow-50 dark:bg-white/[.06];
}

/*******************************************************
 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 mt-2 text-gray-500 text-xs w-full;
}

/*******************************************************
 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-link {
  @apply order-last;
}

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

.add-row {
  @apply align-middle bg-gray-50 text-left 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;
}

.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 border max-w-2xl relative rounded-md shadow-sm !w-full 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 mr-5 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-auto 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--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;
}
