@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@custom-variant dark (&:where(.dark, .dark *));
@source inline("h-3 w-3 h-[64px] w-[65px]! left-[65px] dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
@source inline("{-,}{top,bottom,left,right}-{0..4}");
@source inline("rounded-{t,r,b,l}-default");
@source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
@source inline("{-,}m{t,r,b,l,x,y,}-{0..4} {-,}p{t,r,b,l,x,y,}-{0..4}");
@source inline("{md:,lg:,}border-{0,2} {md:,lg:,}border-{t,r,b,l}-{0,2}");
@source inline("{hover:,dark:,}bg-primary-{50,{100..900..100},950}");
@source inline("{hover:,dark:,}border-base-{50,{100..900..100},950} {hover:,dark:,}border-transparent");
@source inline("{hover:,dark:,}bg-base-{50,{100..900..100},950}");
@source inline("{md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5}");
@source inline("{md:,lg:,}gap-{0.5,{1..12}}");
@source inline("{md:,lg:,}grid-cols-{1..12}");
@source inline("{md:,lg:,}col-span-{1..12}");

@theme {
  --font-sans: 'Inter', sans-serif;
}

@theme inline{
  --radius-default: var(--border-radius, 6px);

  --color-primary-50: rgb(var(--color-primary-50));
  --color-primary-100: rgb(var(--color-primary-100));
  --color-primary-200: rgb(var(--color-primary-200));
  --color-primary-300: rgb(var(--color-primary-300));
  --color-primary-400: rgb(var(--color-primary-400));
  --color-primary-500: rgb(var(--color-primary-500));
  --color-primary-600: rgb(var(--color-primary-600));
  --color-primary-700: rgb(var(--color-primary-700));
  --color-primary-800: rgb(var(--color-primary-800));
  --color-primary-900: rgb(var(--color-primary-900));
  --color-primary-950: rgb(var(--color-primary-950));

  --color-base-50: rgb(var(--color-base-50));
  --color-base-100: rgb(var(--color-base-100));
  --color-base-200: rgb(var(--color-base-200));
  --color-base-300: rgb(var(--color-base-300));
  --color-base-400: rgb(var(--color-base-400));
  --color-base-500: rgb(var(--color-base-500));
  --color-base-600: rgb(var(--color-base-600));
  --color-base-700: rgb(var(--color-base-700));
  --color-base-800: rgb(var(--color-base-800));
  --color-base-900: rgb(var(--color-base-900));
  --color-base-950: rgb(var(--color-base-950));

  --color-font-subtle-light: rgb(var(--color-font-subtle-light));
  --color-font-subtle-dark: rgb(var(--color-font-subtle-dark));
  --color-font-default-light: rgb(var(--color-font-default-light));
  --color-font-default-dark: rgb(var(--color-font-default-dark));
  --color-font-important-light: rgb(var(--color-font-important-light));
  --color-font-important-dark: rgb(var(--color-font-important-dark));
}

@utility field-sizing-content {
  field-sizing: content;
}

@utility border-spacing-none {
  border-spacing: 0;
}

@utility 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;
}

@utility scrollable-top {
  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-gray-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
}

@utility md-16 {
  font-size: 16px;
}

@utility md-18 {
  font-size: 18px;
}

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

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

.sortable-ghost {
  @apply opacity-50;
}

/*******************************************************
 Search
 *******************************************************/
input[type="search"]::-webkit-search-cancel-button {
  @apply z-10 dark:invert;
}

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

#changelist-actions 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='#ffffff' d='M24 31.4 11.3 18.7l2.85-2.8L24 25.8l9.85-9.85 2.85 2.8Z'/%3e%3c/svg%3e");
}

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

/*******************************************************
 Table
 *******************************************************/
table select {
  @apply appearance-none bg-no-repeat border border-base-200 block cursor-pointer font-medium px-3 py-2 pr-5 rounded-default shadow-xs text-base-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-[0px] top-px;
}

.datetimeshortcuts a {
  @apply text-[0px] text-base-400 transition hover:text-base-700;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.selector .selector-available-title label,
.selector .selector-chosen-title label {
  @apply block border-b border-base-200 font-semibold mb-3 py-2 px-4 text-sm text-font-important-light dark:border-base-700 dark:text-font-important-dark;
}

.selector .helptext {
  @apply border-b border-base-200 mb-3 px-4 pb-3 dark:border-base-700;
}

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

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

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

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

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

.selector-filter {
  @apply flex;
}

.selector-filter input {
  @apply bg-base-100 block grow font-medium mb-3 mx-3 px-3 py-2 rounded-default text-base-500 text-sm focus:outline-hidden dark:bg-base-800 dark:text-base-300;
}

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

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

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

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

.selector-add:after,
.selector-remove:after {
  @apply inline-block material-symbols-outlined text-base-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;
}

.tabular-table tbody.has_original,
.tabular-table .template tr {
  @apply border-t border-base-200 dark:border-base-800;
}

.tabular-table tbody.has_original:first-of-type {
  @apply border-t-0;
}

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

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

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

.add-row a {
  @apply bg-white border border-base-200 block font-medium px-3 py-2 rounded-default text-center hover:text-base-700 lg:float-right dark:bg-base-900 dark:border-base-700 dark:hover:text-base-200;
}

.inline-deletelink {
  @apply block leading-none text-red-600 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 border-base-200 max-w-2xl min-h-[38px]! relative rounded-default shadow-xs w-full! dark:bg-base-900 dark:border-base-700;
}

.select2-selection {
  @apply outline-none;
}

.select2.select2-container.select2-container--focus{
  @apply outline-2 outline-primary-600 -outline-offset-2;
}

.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-font-default-light text-sm dark:text-font-default-dark;
}

.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-[0px];
}

.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-base-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-base-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-base-50 border border-base-200 border-solid grow font-medium mx-0 outline-hidden px-3 py-2 rounded-default shadow-xs text-font-default-light text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-font-default-dark;
}

.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 border-transparent outline-2 -outline-offset-2 outline-primary-600 pb-2 shadow-xs dark:bg-base-900;
}

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

.select2-container.select2-container--open .select2-dropdown--above {
  @apply rounded-b-none rounded-default -bottom-0.5;
}

.select2-container.select2-container--admin-autocomplete
  .select2-results__option {
  @apply block px-3 py-2 text-font-default-light text-sm transition-all dark:text-font-default-dark;
}

.select2-container.select2-container--admin-autocomplete
  .select2-results__option[aria-selected="true"] {
  @apply text-primary-600 dark:text-primary-500;
}

.select2-container.select2-container--admin-autocomplete
  .select2-results__option--highlighted[aria-selected="true"] {
  @apply text-primary-600 dark: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-base-100 block font-medium h-7 leading-7 m-0 mr-1 mb-1 px-2 shadow-inner text-sm text-base-600 hover:text-base-700 truncate dark:bg-base-800 dark:text-base-300 dark:hover:text-base-200;
}

.select2-container--admin-autocomplete
  .select2-selection--multiple
  li.select2-selection__choice
  .select2-selection__choice__remove {
  @apply align-top text-[0px] hover:text-base-600 dark:hover:text-base-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-base-500 text-sm;
}

.select2.select2-container--open {
  @apply border-b-0 border-primary-600 relative outline-2 -outline-offset-2 outline-primary-600;
}

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

fieldset.collapse {
  @apply visible;
}

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

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

fieldset details > summary {
  @apply list-none
}

fieldset details > summary:after {
  @apply material-symbols-outlined absolute right-3 top-3.5;
  content: "expand_more";
}

fieldset details[open] > summary:after {
  @apply rotate-180;
}

/*******************************************************
 Calendar
 *******************************************************/
.calendarbox,
.clockbox {
  @apply bg-white border border-base-200 rounded-default shadow-xs text-base-500 text-sm w-80 z-50 dark:bg-base-800 dark:border-base-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-base-700 dark:text-base-200;
}

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

.calendar table th {
  @apply font-medium text-center text-base-700 text-xs dark:text-base-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-base-300;
}

.calendar table td a:hover {
  @apply bg-base-100 text-base-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 text-[0px];
}

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

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

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

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

  content: "navigate_before";
  display: flex;
}

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

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

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

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

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

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

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

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

/*******************************************************
 Filters
 *******************************************************/
#changelist-filter .admin-numeric-filter-slider .noUi-handle {
  @apply bg-white border border-base-200 cursor-pointer h-4 -right-4 rounded-full shadow-xs w-4 dark:bg-base-200 dark:border-base-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-base-200 border-0 h-1 shadow-none dark:bg-base-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-base-500 text-sm;
}

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

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

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

.ui-tabs.ui-widget .ui-tabs-nav {
  @apply bg-base-100 border-0 flex gap-2 m-0 ml-3 mb-0 mt-3 mr-auto p-1 rounded-default 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-default text-base-400 text-sm hover:bg-base-700/[.04] hover:text-base-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-default  bg-white shadow-xs text-base-700 hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-white;
}

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

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