@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@custom-variant dark {
  @media not print {
      &:where(.dark, .dark *) {
          @slot
      }
  }
}

@source inline("aspect-square group-hover:block self-start font-bold bg-white/[.06] border-white/40 h-[64px] w-[65px]! left-[65px] {dark:,}text-white/{0..100..10} {dark:,}bg-white/{0..100..10} {dark:,}text-{base,primary}-{50,{100..900},950} dark:hover:bg-white/[.06] {-,}translate-{x,y}-{1/2}");
@source inline("{-,}{top,bottom,left,right}-{1/2,{0..8}} {!,}leading-[38px] {lg:,}leading-{6..16} {md:,lg:,}text-{default,base,link,icon,subtle,important,lg,xl,2xl,3xl,4xl}");
@source inline("bg-linear-to-{{t,r,b,l,tl,tr,bl,br}} {dark:,}{from,to}-{{{base,primary}-{50,{100..900..100},950}},white}");
@source inline("rounded rounded-none rounded-[1px] rounded-{t,r,b,l} rounded-{t,r,b,l}-default rounded-{xs,sm,md,lg,xl,2xl,3xl,full,none}");
@source inline("{md:,lg:,xl:,2xl:,}{absolute,flex,relative,block,sticky}");
@source inline("{!,}{-,}{lg:,}m{t,r,b,l,x,y,}-{0..24} {!,}{-,}{lg:,}p{t,r,b,l,x,y,}-{0..24}");
@source inline("{md:,lg:,}border-{0,2} {md:,lg:,}border-{t,r,b,l} {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,red,green,blue,orange}-{50,{100..900..100},950}");
@source inline("{md:,lg:,}{min-h,h,min-w,w}-{1..10} {md:,lg:,}h-{1..10} {md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7,1..10,96}");
@source inline("{md:,lg:,xl:,}gap-{0.5,{1..16}}");
@source inline("{md:,lg:,xl:,}grid-cols-{1..16}");
@source inline("{md:,lg:,xl:,}col-span-{1..16}");
@source inline("max-w-xl max-w-{1..7}xl");


@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-base-200, currentColor);
  }
}

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

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

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

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

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

@utility bg-striped {
  background-image: repeating-linear-gradient(45deg, var(--color-base-100), 0px, var(--color-base-100) 1px, transparent 2px, transparent 10px);

  @variant dark {
    background-image: repeating-linear-gradient(45deg, var(--color-base-800) 0px, var(--color-base-800) 1px, transparent 2px, transparent 10px);
  }
}

@utility text-important {
 @apply text-font-important-light dark:text-font-important-dark;
}

@utility text-default {
  @apply text-font-default-light dark:text-font-default-dark;
}

@utility text-subtle {
  @apply text-font-subtle-light dark:text-font-subtle-dark;
}

@utility text-icon {
  @apply text-base-400 dark:text-base-500;
}

@utility text-link {
  @apply text-primary-600 dark:text-primary-500;
}

@utility data-row {
  @apply hover:bg-base-100 dark:hover:bg-base-50/4;
}

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

.errorlist {
  @apply *:before:align-bottom *:before:content-['warning'] *:before:material-symbols-outlined *:before:mr-1;
}

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

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

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

.empty-form {
  @apply hidden;
}

/*******************************************************
 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 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-px text-[0px] top-px;
}

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

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

.datetimeshortcuts a:first-child:after {
  @apply content-['update'] flex h-9 items-center justify-center leading-none material-symbols-outlined px-3 py-2 text-center hover:text-base-700 dark:border-base-700 dark:hover:text-base-700;
}

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

.clock-icon,
.date-icon {
  @apply block text-base-400 transition-all hover:text-base-700 dark:text-base-500 dark:hover:text-base-200;
  @apply after:border-base-200 after:material-symbols-outlined after:px-3 dark:after:border-base-700;
}

.date-icon:after {
  content: "calendar_today";
}

.clock-icon:after {
  content: "schedule";
}

.timezonewarning {
  @apply absolute block items-center right-11 top-2 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 max-w-5xl 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 cursor-pointer py-2 text-center text-sm text-default 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;
}

/*******************************************************
 Autocomplete
 *******************************************************/
.formset .select2 {
  @apply min-w-[240px];
}

.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--open {
  @apply border-b-0 border-primary-600 relative outline-2 -outline-offset-2 outline-primary-600;
}

.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] after:text-base-400 hover:after:text-base-700 dark:hover:after:text-base-200 dark:after:text-base-500;
}

.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 transition-all content-['close\_small'] text-[18px] ;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
  @apply flex h-9 items-center mr-2 -mt-px;
  @apply after:left-0 after:leading-none after:m-0 after:material-symbols-outlined after:text-base-400 after:text-lg dark:after:text-base-500;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow:after {
  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 border-b border-base-200 py-1.5 px-1 relative dark:border-base-700 before:absolute before:content-['search'] before:material-symbols-outlined before:left-4 before:top-2.5 before:text-base-400 before:text-lg dark:before:text-base-500;
}

.select2-container.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
  @apply bg-base-100 border-0 border-base-200 border-solid grow font-medium mx-0 outline-hidden px-3 py-2 pl-9 rounded-default text-font-default-light text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-font-default-dark;
}

.select2-container .select2-results__options {
  @apply py-1;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
    @apply !bg-base-100 dark:!bg-base-800;
}

.select2-container.select2-container--open .select2-dropdown {
  @apply bg-white border border-base-200 rounded-default shadow-xs dark:border-base-700 dark:bg-base-900;
}

.select2-container.select2-container--open .select2-dropdown--below {
  @apply mt-1;
}

.select2-container.select2-container--open .select2-dropdown--above {
  @apply mb-1;
}

.select2-container.select2-container--admin-autocomplete .select2-results__option {
  @apply block mb-0.5 mx-1 px-2 py-2 rounded-default text-font-default-light transition-all hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-800 dark:hover:text-base-200 dark:text-font-default-dark last:mb-0;
}
.select2-container.select2-container--admin-autocomplete .select2-results__option[aria-selected="true"] {
  @apply text-primary-600 dark:text-primary-500 flex items-center text-primary-600 dark:text-primary-500 after:content-['check'] after:material-symbols-outlined after:ml-auto;
}

.select2-container.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear {
  @apply m-0 mr-3 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 content-['close\_small'] h-7 leading-7! material-symbols-outlined;

  font-size: 14px;
}

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

/*******************************************************
 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 cursor-pointer right-3 top-2.5;
  content: "expand_more";
}

fieldset details[open] > summary {
  @apply mb-4;
}

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

/*******************************************************
 Calendar
 *******************************************************/
.calendarbox .calendar {
  @apply min-h-[320px];
}

.calendarbox,
.clockbox {
  @apply bg-white border border-base-200 rounded-default shadow-xs w-80 !z-70 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-semibold mb-3 py-3 text-important;
}

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

.calendar table th {
  @apply font-semibold text-center text-important text-xs;
}

.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 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 w-1/3 dark:border-base-700 dark:text-base-300 ;
}

.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,
.calendarnav-previous {
  @apply after:border after:border-base-200 after:flex after:h-7 after:items-center after:justify-center after:material-symbols-outlined after:rounded-full after:transition-all after:w-7 dark:after:bg-base-800 dark:after:border-base-700;
}

.calendarnav-previous:after {
  content: "navigate_before";
  display: flex;
}

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

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

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

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

/*******************************************************
 DjangoQL
 *******************************************************/
textarea#searchbar {
  @apply font-medium placeholder-base-400 leading-[35px] max-h-[35px] min-h-[35px] whitespace-nowrap !w-full focus:outline-none;
}

div.djangoql-completion {
  @apply border border-base-200 rounded-default shadow-xs bg-white dark:border-base-700 dark:bg-base-800 -ml-[39px] mt-[6px] w-[384px] z-40;
}

div.djangoql-completion ul {
  @apply py-1;
}

div.djangoql-completion li {
  @apply flex items-center leading-none mx-1 px-3 h-[30px] rounded-default text-sm hover:bg-base-100 hover:text-important hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200;
}

div.djangoql-completion li.active {
  @apply bg-base-100 text-important dark:bg-base-700;
}

div.djangoql-completion li i {
  @apply ml-auto text-sm text-default;
}

div.djangoql-completion .syntax-help {
  @apply hidden;
}

.djangoql-toggle {
  @apply appearance-none bg-white block border border-base-300 cursor-pointer h-4 min-w-4 relative rounded-[4px] shadow-xs w-4 hover:border-base-400 dark:bg-base-700 dark:border-base-500 dark:checked:after:text-white focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-primary-500 after:absolute after:content-['check\_small'] after:flex! after:h-4 after:items-center after:justify-center after:leading-none after:material-symbols-outlined after:-ml-px after:-mt-px after:text-white after:transition-all after:w-4 dark:after:text-base-700 checked:bg-primary-600 dark:checked:bg-primary-600 checked:border-primary-600 dark:checked:border-primary-600 checked:transition-all checked:hover:border-primary-600;
  @apply relative -ml-4.5;
}

/*******************************************************
 Django JSON widget
 *******************************************************/
.jsoneditor {
  @apply border !border-base-200 overflow-hidden rounded-default shadow-xs dark:!border-base-700;
}

div.jsoneditor-tree,
.ace-jsoneditor .ace_scroller {
  @apply text-default dark:bg-base-900;
}

.ace-jsoneditor .ace_scrollbar {
  @apply dark:invert;
}

.jsoneditor div.jsoneditor-tree {
  @apply bg-white dark:!bg-transparent;
}

.jsoneditor textarea.jsoneditor-text {
  @apply !bg-transparent leading-relaxed p-3;
}

.jsoneditor .jsoneditor-text,
.jsoneditor .jsoneditor-tree {
  @apply !bg-transparent !text-default dark:!bg-transparent;
}

.jsoneditor .jsoneditor-readonly {
  @apply !text-subtle;
}

.jsoneditor .jsoneditor-field {
  @apply !border-none !text-default hover:!bg-base-100 dark:bg-transparent dark:hover:!bg-base-800;
}

.jsoneditor .jsoneditor-value {
  @apply !border-none text-important hover:!bg-base-100 dark:hover:!bg-base-800;
}

.jsoneditor .jsoneditor-value.jsoneditor-string,
.jsoneditor .ace_string {
  @apply !text-green-600 dark:text-green-500;
}

.jsoneditor .jsoneditor-value.jsoneditor-number,
.jsoneditor .ace_numeric {
  @apply text-blue-600 dark:text-blue-500;
}

.jsoneditor .jsoneditor-value.jsoneditor-boolean,
.jsoneditor .ace_boolean {
  @apply text-red-600 dark:text-red-500;
}

.ace-jsoneditor .ace_gutter {
  @apply border-r border-base-200 bg-base-100 text-subtle dark:bg-base-800 dark:border-base-700;
}

.ace-jsoneditor .ace_gutter-active-line {
  @apply bg-yellow-500/20 text-important dark:bg-yellow-500/20;
}

.ace-jsoneditor .ace_active-line {
  @apply !bg-yellow-500/20 dark:!bg-yellow-500/20;
}

.ace-jsoneditor .ace_variable {
  @apply text-important;
}

.ace-jsoneditor .ace_indent-guide {
  @apply bg-none border-r border-base-200 dark:border-base-700;
}

.ace-jsoneditor .ace_marker-layer .ace_selection {
  @apply bg-base-900/10 dark:bg-white/10;
}

.jsoneditor .jsoneditor-statusbar {
  @apply bg-white border-base-200 leading-[26px] px-2 text-subtle text-xs dark:bg-base-900 dark:border-base-700;
}

.jsoneditor-menu a.jsoneditor-poweredBy {
  @apply text-subtle text-xs opacity-100 font-sans;
}

/* Search */
.jsoneditor .jsoneditor-search .jsoneditor-results {
  @apply font-sans text-xs;
}

.jsoneditor .jsoneditor-search .jsoneditor-frame {
  @apply border border-base-200 rounded-default dark:border-base-700 dark:bg-base-900 dark:border-base-700;
}

.jsoneditor .jsoneditor-search .jsoneditor-frame input[type="text"] {
  @apply !bg-transparent !border-none font-sans text-xs h-[22px] leading-[22px] !text-default;
}

.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh {
  @apply bg-none ml-1;
}

.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh:after {
  @apply material-symbols-outlined text-[16px] !leading-[24px] content-['search'] !text-icon;
}

.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next,
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous {
  @apply bg-none text-icon;
}

.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after,
.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after {
  @apply material-symbols-outlined text-[16px] !leading-[24px]
}

.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after {
  @apply content-['keyboard\_double\_arrow\_down'];
}

.jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after {
  @apply content-['keyboard\_double\_arrow\_up'];
}

/* Navigation bar */
.jsoneditor .jsoneditor-navigation-bar {
  @apply !bg-base-50 !border-b border-base-200 leading-[26px] !px-2 text-xs !text-default dark:!bg-base-800 dark:!border-base-700;
}

.jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator {
  @apply text-[0px];
}

.jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator:after {
   @apply material-symbols-outlined content-['chevron\_right'] !align-[-4px] text-subtle;
}

/* Menu */
.jsoneditor-menu {
  @apply !bg-base-50 !border-base-200 dark:!border-base-700 dark:!bg-base-800;
}

.jsoneditor .jsoneditor-menu > button {
  @apply !bg-none !border !border-base-200 !bg-white !shadow-xs cursor-pointer rounded-default text-important dark:!border-base-700 dark:!bg-base-900;
}

.jsoneditor .jsoneditor-menu > button:after {
  @apply material-symbols-outlined text-[16px] !leading-[24px];
}

.jsoneditor-menu > button.jsoneditor-format {
  @apply after:content-['format\_align\_right']
}

.jsoneditor-menu > button.jsoneditor-compact {
  @apply after:content-['format\_align\_left']
}

.jsoneditor-menu > button.jsoneditor-sort {
  @apply after:content-['sort']
}

.jsoneditor-menu > button.jsoneditor-transform {
  @apply after:content-['transform']
}

.jsoneditor-menu > button.jsoneditor-repair {
  @apply after:content-['handyman']
}

.jsoneditor-menu > button.jsoneditor-undo {
  @apply after:content-['undo']
}

.jsoneditor-menu > button.jsoneditor-redo {
  @apply after:content-['redo']
}

.jsoneditor-menu > button.jsoneditor-expand-all {
  @apply after:content-['expand']
}

.jsoneditor-menu > button.jsoneditor-collapse-all {
  @apply after:content-['compress']
}

.jsoneditor-menu > div.jsoneditor-modes > button {
  @apply !bg-transparent !border-none cursor-pointer !font-sans text-default hover:!bg-none hover:text-important;
}

/* Context menu */
.jsoneditor-contextmenu .jsoneditor-menu {
  @apply !bg-white border border-base-200 overflow-clip rounded-default !py-1 !shadow-xs dark:!bg-base-800 dark:border-base-800;
}

.jsoneditor-contextmenu .jsoneditor-menu li {
  @apply flex flex-col relative;
}

.jsoneditor-contextmenu .jsoneditor-menu button {
  @apply !bg-transparent !flex-grow !mx-1 !px-3 !h-[30px] !rounded-default !w-auto hover:!bg-base-100 hover:!text-base-700 dark:hover:!bg-base-700 dark:hover:!text-base-200;
}

.jsoneditor-contextmenu button .jsoneditor-icon {
  @apply !w-auto;
}

.jsoneditor-contextmenu button .jsoneditor-text {
  @apply !bg-transparent !font-sans p-0 text-default;
}

.jsoneditor-contextmenu .jsoneditor-selected {
  @apply !bg-transparent;
}

.jsoneditor-contextmenu .jsoneditor-selected > button > .jsoneditor-text {
  @apply !text-primary-600 dark:!text-primary-500;
}

.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand {
  @apply !flex !items-center justify-center !m-0 !p-0 !top-0.5 !right-0.5;
}

.jsoneditor .jsoneditor-selected,
.jsoneditor .jsoneditor-highlight {
  @apply !bg-base-50 dark:!bg-base-800;
}

.jsoneditor div.jsoneditor-expand,
.jsoneditor .jsoneditor-button.jsoneditor-collapsed,
.jsoneditor .jsoneditor-button.jsoneditor-expanded,
.jsoneditor .jsoneditor-dragarea,
.jsoneditor .jsoneditor-contextmenu-button {
  @apply !bg-none !bg-transparent !outline-none;
}

.jsoneditor div.jsoneditor-expand:after,
.jsoneditor .jsoneditor-dragarea:after,
.jsoneditor .jsoneditor-contextmenu-button:after,
.jsoneditor .jsoneditor-button.jsoneditor-collapsed:after,
.jsoneditor .jsoneditor-button.jsoneditor-expanded:after {
  @apply material-symbols-outlined text-[16px] !leading-[24px] text-icon;
}

.jsoneditor div.jsoneditor-expand:after {
  @apply content-['arrow\_drop\_down'];
}

.jsoneditor .jsoneditor-contextmenu-button:after {
  @apply content-['toolbar'];
}

.jsoneditor .jsoneditor-dragarea:after {
  @apply content-['drag\_indicator'];
}

.jsoneditor .jsoneditor-button.jsoneditor-collapsed:after {
  @apply content-['keyboard\_arrow\_up'];
}

.jsoneditor .jsoneditor-button.jsoneditor-expanded:after {
  @apply content-['keyboard\_arrow\_down'];
}


.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
  @apply absolute !border-none right-0 top-0 hover:!bg-transparent;
}

.jsoneditor .jsoneditor-separator {
  @apply !border-base-200 dark:!border-base-700;
}

/* Modal */
.jsoneditor-modal.pico-content {
  @apply !border-none !rounded-default !font-sans !text-default !shadow-xs dark:border-base-700 dark:!bg-base-800;
}

.jsoneditor-modal p {
  @apply leading-relaxed;
}

.jsoneditor-modal p a {
  @apply !text-link;
}

.jsoneditor-modal .pico-modal-header {
  @apply !bg-transparent border-b border-base-200 !h-auto text-base !font-semibold !text-important !px-3 !py-1.5 !tracking-tight dark:border-base-700 ;
}

.jsoneditor-modal .pico-modal-contents {
  @apply block !mt-3;
}

.jsoneditor-modal .jsoneditor-jmespath-label {
  @apply !text-sm !text-important;
}

.jsoneditor-modal.pico-content .pico-close {
  @apply !text-[0px] !text-icon -mt-[13px] mr-2 hover:!text-important;
}

.jsoneditor-modal.pico-content .pico-close:after {
  @apply material-symbols-outlined text-[16px] !leading-[24px] content-['close'];
}

.jsoneditor-modal.pico-content select,
.jsoneditor-modal.pico-content #query,
.jsoneditor-modal.pico-content textarea {
  @apply bg-white border border border-base-200 min-h-[38px] min-w-sm shadow-xs px-3 rounded-default text-default dark:bg-base-900 dark:border-base-700 outline-none;
}

.jsoneditor-modal.pico-content #query,
.jsoneditor-modal.pico-content textarea {
  @apply py-2;
}

.jsoneditor-modal.pico-content input[type="submit"] {
  @apply border border-base-200 bg-primary-600 border-transparent text-white cursor-pointer font-medium flex items-center gap-2 px-3 py-2 relative rounded-default justify-center whitespace-nowrap;
}

.jsoneditor-modal.pico-content .jsoneditor-modal-actions {
  @apply m-0;
}

.jsoneditor-modal.pico-content form {
  @apply !font-sans !text-default w-[570px];
}

.jsoneditor-modal.pico-content .jsoneditor-button-group {
  @apply flex flex-row gap-2 justify-end;
}

.jsoneditor-modal-input input[type="button"].jsoneditor-button-asc,
.jsoneditor-modal-input input[type="button"].jsoneditor-button-desc {
  @apply !bg-base-50 !border !border-base-200 cursor-pointer !font-sans !h-[38px] !text-default !rounded-default dark:!bg-base-800 dark:!border-base-700;
}

.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
  @apply !border-primary-600 !bg-primary-600 !text-white;
}

.jsoneditor-modal table td, .jsoneditor-modal table th {
  @apply !font-sans !text-default;
}
