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

@layer utilities {
    .shadow-xs {
        box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.05);
    }
    .outline-hidden {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }
}

@layer components {
    /* Scrollbar utilities */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Clipboard */
    .clipboard-tooltip-visible {
        @apply visible opacity-100;
    }

    .clipboard-tooltip-hidden {
        @apply invisible opacity-0;
    }

    .clipboard-success {
        @apply bg-green-600;
    }

    .clipboard-error {
        @apply bg-red-600;
    }

    .clipboard-copying {
        @apply bg-blue-600;
    }

    /* Titulos */
    .section-heading {
        @apply text-lg font-semibold text-content-primary;
    }

    /* Titulos - Fin */
    /* Botones - Fin */
    /* Formulario */
    .form-label {
        @apply block text-sm font-medium text-content-primary;
    }

    .form-label .required {
        @apply text-danger-600 font-normal;
    }


    .form-input {
        @apply mt-1 block w-full rounded-lg border-surface-elevated shadow-sm focus:border-primary focus:ring-primary sm:text-sm disabled:bg-surface-bg disabled:text-content-muted disabled:cursor-not-allowed;
    }

    .form-submit {
        @apply bg-primary text-content-onPrimary py-2 px-4 rounded-lg text-sm font-medium hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors duration-200 disabled:bg-surface-bg disabled:text-content-muted disabled:cursor-not-allowed disabled:hover:bg-surface-bg;
    }

    .form-cancel {
        @apply bg-white text-content-primary border border-surface-elevated py-2 px-4 rounded-lg text-sm font-medium hover:bg-surface-bg focus:outline-none focus:ring-2 focus:ring-content-secondary focus:ring-offset-2 transition-colors duration-200 disabled:bg-surface-bg disabled:text-content-muted disabled:cursor-not-allowed disabled:hover:bg-surface-bg;
    }

    /* Formulario Fin */
    /* Tabs */
    .active-tab {
        @apply relative px-4 py-2 text-primary font-medium border-b-2 border-primary;
    }

    .inactive-tab {
        @apply relative px-4 py-2 text-content-secondary hover:text-primary font-medium border-b-2 border-transparent hover:border-surface-elevated;
    }

    /* Tabs Fin */
    /* Paginación */
    .pagy {
        @apply flex space-x-1 font-medium text-sm;

        a:not(.gap) {
            @apply block rounded-lg px-3 py-1 transition-colors;
            @apply text-sm bg-surface-bg;

            &:hover {
                @apply bg-surface-elevated;
            }

            &:not([href]) {
                @apply text-sm bg-white cursor-default;
            }

            &.current {
                @apply text-content-onPrimary bg-primary hover:bg-primary-dark;
            }
        }

        label {
            @apply inline-block whitespace-nowrap bg-surface-bg rounded-lg px-3 py-0.5;

            input {
                @apply bg-white border-none rounded-md text-sm;
            }
        }
    }

    /* Paginación Fin */
    /* Date picker */
    /* air-datepicker */
    .air-datepicker {
        --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --adp-font-size: 14px;
        --adp-width: 246px;
        --adp-z-index: 40;
        --adp-padding: 4px;
        --adp-grid-areas: "nav" "body" "timepicker" "buttons";
        --adp-transition-duration: 0.3s;
        --adp-transition-ease: ease-out;
        --adp-transition-offset: 8px;
        --adp-background-color: #fff;
        --adp-background-color-hover: #f0f0f0;
        --adp-background-color-active: #eaeaea;
        --adp-background-color-in-range: rgba(16, 16, 16, 0.1);
        --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2);
        --adp-background-color-selected-other-month-focused: #f1f1f1;
        --adp-background-color-selected-other-month: #e6e6e6;
        --adp-color: #4a4a4a;
        --adp-color-secondary: #9c9c9c;
        --adp-accent-color: #0a0a0a;
        --adp-color-current-date: var(--adp-accent-color);
        --adp-color-other-month: #dedede;
        --adp-color-disabled: #aeaeae;
        --adp-color-disabled-in-range: #939393;
        --adp-color-other-month-hover: #c5c5c5;
        --adp-border-color: rgba(0, 0, 0, 0.1);
        --adp-border-color-inner: #efefef;
        --adp-border-radius: 8px;
        --adp-border-color-inline: #d7d7d7;
        --adp-nav-height: 32px;
        --adp-nav-arrow-color: var(--adp-color-secondary);
        --adp-nav-action-size: 32px;
        --adp-nav-color-secondary: var(--adp-color-secondary);
        --adp-day-name-color: #464646;
        --adp-day-name-color-hover: #f1f1f1;
        --adp-day-cell-width: 1fr;
        --adp-day-cell-height: 32px;
        --adp-month-cell-height: 42px;
        --adp-year-cell-height: 56px;
        --adp-pointer-size: 10px;
        --adp-poiner-border-radius: 2px;
        --adp-pointer-offset: 14px;
        --adp-cell-border-radius: 4px;
        --adp-cell-background-color-hover: var(--adp-background-color-hover);
        --adp-cell-background-color-selected: #1d1d1d;
        --adp-cell-background-color-selected-hover: #303030;
        --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1);
        --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2);
        --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
        --adp-btn-height: 32px;
        --adp-btn-color: var(--adp-accent-color);
        --adp-btn-color-hover: var(--adp-color);
        --adp-btn-border-radius: var(--adp-border-radius);
        --adp-btn-background-color-hover: var(--adp-background-color-hover);
        --adp-btn-background-color-active: var(--adp-background-color-active);
        --adp-time-track-height: 1px;
        --adp-time-track-color: #dedede;
        --adp-time-track-color-hover: #b1b1b1;
        --adp-time-thumb-size: 12px;
        --adp-time-padding-inner: 10px;
        --adp-time-day-period-color: var(--adp-color-secondary);
        --adp-mobile-font-size: 16px;
        --adp-mobile-nav-height: 40px;
        --adp-mobile-width: 320px;
        --adp-mobile-day-cell-height: 38px;
        --adp-mobile-month-cell-height: 48px;
        --adp-mobile-year-cell-height: 64px;
    }

    .air-datepicker-overlay {
        --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
        --adp-overlay-transition-duration: 0.3s;
        --adp-overlay-transition-ease: ease-out;
        --adp-overlay-z-index: 99;
    }

    .air-datepicker-cell.-selected-.-day- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-selected-.-year- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-selected-.-month- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-selected- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: red;
    }

    .air-datepicker-cell.-selected-.-current- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-current- {
        border: 1px solid #bdbdbd !important;
    }

    .air-datepicker-cell.-selected-.-day-.-other-month- {
        color: #cccccc; /* Ensure selected cell text is also light in dark mode */
        background: #7e7e7e;
    }

    .dark {
        .air-datepicker {
            --adp-background-color: #2d2d2d; /* Dark background */
            --adp-background-color-hover: #3a3a3a;
            --adp-background-color-active: #4a4a4a;
            --adp-background-color-in-range: rgba(196, 196, 196, 0.2);
            --adp-background-color-in-range-focused: rgba(196, 196, 196, 0.3);
            --adp-background-color-selected-other-month-focused: #333;
            --adp-background-color-selected-other-month: #444;
            --adp-color: #e0e0e0; /* Light text color */
            --adp-color-secondary: #a0a0a0;
            --adp-accent-color: #ffffff; /* A light accent color for dark mode */
            --adp-color-other-month: #555;
            --adp-color-disabled: #777;
            --adp-color-disabled-in-range: #888;
            --adp-color-other-month-hover: #666;
            --adp-border-color: #ffffff1a; /* Lighter border for dark mode */
            --adp-border-color-inner: #444;
            --adp-border-color-inline: #444444;
            --adp-nav-arrow-color: var(--adp-color-secondary);
            --adp-day-name-color: #c0c0c0;
            --adp-day-name-color-hover: #3a3a3a;
            --adp-cell-background-color-hover: var(--adp-background-color-hover);
            --adp-cell-background-color-selected: #ffffff;
            --adp-cell-background-color-selected-hover: #e9e9e9;
            --adp-cell-background-color-in-range: rgba(175, 175, 175, 0.2);
            --adp-cell-background-color-in-range-hover: rgba(169, 169, 169, 0.3);
            --adp-btn-color: var(--adp-accent-color);
            --adp-btn-color-hover: var(--adp-color);
            --adp-btn-background-color-hover: var(--adp-background-color-hover);
            --adp-btn-background-color-active: var(--adp-background-color-active);
            --adp-time-track-color: #555;
            --adp-time-track-color-hover: #777;
            --adp-time-day-period-color: var(--adp-color-secondary);
        }

        .air-datepicker-overlay {
            --adp-overlay-background-color: rgba(255, 255, 255, 0.1); /* Lighter overlay for dark mode */
        }

        .air-datepicker-cell.-selected-.-day- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected-.-year- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected-.-month- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected-.-current- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-current- {
            border: 1px solid #505050 !important;
        }

        .air-datepicker-cell.-selected-.-day-.-other-month- {
            color: #cccccc; /* Ensure selected cell text is also light in dark mode */
            background: #7e7e7e;
        }
    }

    .air-datepicker--navigation {
        width: 100%;
    }

    .air-datepicker--pointer {
        opacity: 0;
    }

    .air-datepicker {
        background: var(--adp-background-color);
        border: 1px solid var(--adp-border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: var(--adp-border-radius);
        box-sizing: content-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, max-content);
        grid-template-areas: var(--adp-grid-areas);
        font-family: var(--adp-font-family), sans-serif;
        font-size: var(--adp-font-size);
        color: var(--adp-color);
        width: var(--adp-width);
        position: absolute;
        transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),
        transform var(--adp-transition-duration) var(--adp-transition-ease);
        z-index: var(--adp-z-index);
    }

    .air-datepicker-cell.-selected- {
        color: #1d1d1d;
        border: none;
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-disabled- {
        cursor: not-allowed;
    }

    /* Add a new rule for dark mode selected cells if needed, or adjust the general .air-datepicker-cell.-selected- inside the dark mode media query */
    .dark {
        .air-datepicker-cell.-selected- {
            color: #e0e0e0; /* Example: light text for selected cells in dark mode */
            /* background: var(--adp-cell-background-color-selected); Is already set within .air-datepicker dark vars */
        }
    }

    /* Time-only picker styles */
    .air-datepicker.only-timepicker .air-datepicker--navigation {
        display: none;
    }

    .air-datepicker.only-timepicker .air-datepicker--content {
        display: none;
    }

    .air-datepicker.only-timepicker .air-datepicker--time {
        border-top: none;
    }


}
  /* Tom Select - Customized for app design system */                                                                                                                      
                                                                                                                                                                           
  select[multiple][data-controller="select"] {                                                                                                                             
  @apply invisible;                                                                                                                                                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .dropdown-input {                                                                                                                                                        
  @apply !border-neutral-300 !bg-white text-base !px-3 !py-2.5 placeholder:!text-neutral-500 dark:!border-neutral-600 dark:!bg-neutral-800                                 
  dark:placeholder:!text-neutral-400;                                                                                                                                      
  }                                                                                                                                                                        
                                                                                                                                                                           
  @media (min-width: 640px) {                                                                                                                                              
  .plugin-dropdown_input .dropdown-input {                                                                                                                                 
  font-size: 0.875rem;                                                                                                                                                     
  }                                                                                                                                                                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .plugin-dropdown_input.focus.dropdown-active .ts-control {                                                                                                               
  @apply !border-none;                                                                                                                                                     
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown-content {                                                                                                                                                   
  @apply py-1.5;                                                                                                                                                           
  max-height: 240px;                                                                                                                                                       
  scroll-behavior: auto;                                                                                                                                                   
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown-content {                                                                                                                                                   
  scrollbar-width: thin;                                                                                                                                                   
  scrollbar-color: theme('colors.neutral.400') theme('colors.neutral.100');                                                                                                
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown-content::-webkit-scrollbar {                                                                                                                                
  width: 6px;                                                                                                                                                              
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown-content::-webkit-scrollbar-track {                                                                                                                          
  background: theme('colors.neutral.100');                                                                                                                                 
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown-content::-webkit-scrollbar-thumb {                                                                                                                          
  background-color: theme('colors.neutral.400');                                                                                                                           
  border-radius: 3px;                                                                                                                                                      
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-control {                                                                                                                                                            
  @apply flex min-h-10 w-full px-3 py-2 cursor-default rounded-lg border-0 text-base/6 text-content-primary shadow-xs ring-1 placeholder:text-neutral-500                  
  ring-neutral-300 outline-hidden ring-inset focus:ring-primary-600 dark:bg-neutral-800 dark:ring-neutral-600 dark:text-neutral-100;                                       
                                                                                                                                                                           
  &[disabled] {                                                                                                                                                            
  @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-700;                                                                                                            
  }                                                                                                                                                                        
                                                                                                                                                                           
  &.error {                                                                                                                                                                
  @apply border-danger-400 outline-danger-300 focus:outline-danger-500;                                                                                                    
  }                                                                                                                                                                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .plugin-dropdown_input .dropdown-input {                                                                                                                                 
  @apply outline-hidden;                                                                                                                                                   
  }                                                                                                                                                                        
                                                                                                                                                                           
  .plugin-dropdown_input .items-placeholder {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;                                                                                                                                               
  }                                                                                                                                                                        
                                                                                                                                                                           
  .plugin-dropdown_input.has-items .items-placeholder {                                                                                                                    
  display: none !important;                                                                                                                                                
  }                                                                                                                                                                        
                                                                                                                                                                           
  .plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;                                                                                                                                               
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown .active.create {                                                                                                                                            
  @apply cursor-pointer bg-surface-bg text-content-primary;                                                                                                                
  }                                                                                                                                                                        
                                                                                                                                                                           
  .loading-more-results {                                                                                                                                                  
  @apply !cursor-default;                                                                                                                                                  
  }                                                                                                                                                                        
                                                                                                                                                                           
  .disabled .ts-control {                                                                                                                                                  
  cursor: not-allowed !important;                                                                                                                                          
  }                                                                                                                                                                        
                                                                                                                                                                           
  @media (min-width: 640px) {                                                                                                                                              
  .ts-control {                                                                                                                                                            
  font-size: 0.875rem;                                                                                                                                                     
  }                                                                                                                                                                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.single .ts-control,                                                                                                                                          
  .ts-wrapper.single .ts-control input,                                                                                                                                    
  .ts-control,                                                                                                                                                             
  .ts-wrapper.single.input-active .ts-control {                                                                                                                            
  @apply cursor-text;                                                                                                                                                      
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown [data-selectable] .highlight {                                                                                                                              
  @apply bg-primary-100 dark:bg-primary-900/20;                                                                                                                            
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-control,                                                                                                                                                             
  .ts-wrapper.single.input-active .ts-control {                                                                                                                            
  @apply bg-white dark:bg-neutral-800;                                                                                                                                     
  }                                                                                                                                                                        
                                                                                                                                                                           
  .input-active {                                                                                                                                                          
  @apply shadow rounded-lg ring-2 ring-inset ring-primary-600;                                                                                                             
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper {                                                                                                                                                            
  @apply bg-white dark:bg-neutral-800 rounded-lg;                                                                                                                          
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-control,                                                                                                                                                             
  .ts-wrapper.single.input-active .ts-control {                                                                                                                            
  @apply bg-transparent;                                                                                                                                                   
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-control input {
  @apply !m-0 bg-white dark:bg-neutral-800 text-base placeholder:text-neutral-500 dark:placeholder:text-neutral-400 read-only:!cursor-pointer;
  }

  /* Fix placeholder truncation in multi-select and external-tags mode */
  .ts-wrapper.multi .ts-control input,
  .ts-control.external-tags-active input {
  min-width: 100% !important;
  width: 100% !important;
  }                                                                                                                                                                        
                                                                                                                                                                           
  @media (min-width: 640px) {                                                                                                                                              
  .ts-control input {                                                                                                                                                      
  font-size: 0.875rem;                                                                                                                                                     
  }                                                                                                                                                                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control {                                                                                 
  @apply !pr-8;                                                                                                                                                            
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button .item {                                                                                                                                 
  @apply rounded-md;                                                                                                                                                       
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button .item .remove::before {                                                                                                                 
  content: "";                                                                                                                                                             
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23737373'%3E%3Cpath         
  d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z'/%3E%3C     
  path d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z'/%3E     
  %3C/g%3E%3C/svg%3E");                                                                                                                                                    
  @apply block size-4 bg-center bg-no-repeat;                                                                                                                              
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before {                                                                                               
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='%23991B1B'%3E%3Cpath         
  d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z'/%3E%3C     
  path d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z'/%3E     
  %3C/g%3E%3C/svg%3E");                                                                                                                                                    
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button .item .remove {                                                                                                                         
  font-size: 0 !important;                                                                                                                                                 
  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded !border-0 !p-1 !leading-none text-neutral-500 hover:bg-neutral-200                       
  dark:text-neutral-400 dark:hover:bg-neutral-700;                                                                                                                         
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove {                                                                                                       
  @apply text-danger-700 hover:bg-danger-200 dark:text-danger-400 dark:hover:bg-danger-900/20;                                                                             
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button .item .flag-toggle {                                                                                                                    
  @apply text-neutral-400 dark:text-neutral-500;                                                                                                                           
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle {                                                                                                  
  @apply flex size-[18px] items-center justify-center rounded hover:bg-danger-200 text-danger-800 dark:hover:bg-danger-900/20 dark:text-danger-400;                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown {                                                                                                                                                           
  @apply z-40 m-0 overflow-hidden rounded-lg border border-t border-solid border-surface-elevated shadow-xs bg-white dark:bg-neutral-800;                                  
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown .create {                                                                                                                                                   
  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm;                                                                                                             
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown [data-selectable].option,                                                                                                                                   
  .ts-dropdown .no-results {                                                                                                                                               
  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm;                                                                                                             
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown .option,                                                                                                                                                    
  .ts-dropdown [data-disabled],                                                                                                                                            
  .ts-dropdown [data-disabled] [data-selectable].option {                                                                                                                  
  @apply mx-1.5 cursor-not-allowed rounded-md px-2.5 py-2 text-sm;                                                                                                         
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown [data-selectable].option,                                                                                                                                   
  .ts-dropdown .ts-dropdown .create {                                                                                                                                      
  @apply cursor-pointer;                                                                                                                                                   
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown .active {                                                                                                                                                   
  @apply bg-surface-bg text-content-primary;                                                                                                                               
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {                                                                                                    
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373'                         
  stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");                                                                      
  background-position: right 0.5rem center;                                                                                                                                
  background-repeat: no-repeat;                                                                                                                                            
  background-size: 1.5em 1.5em;                                                                                                                                            
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {                                                                                                     
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373'                         
  stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");                                                         
  background-position: right 0.6rem center;                                                                                                                                
  background-repeat: no-repeat;                                                                                                                                            
  background-size: 1.25em 1.25em;                                                                                                                                          
  padding-right: 2rem !important;                                                                                                                                          
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.multi .ts-control > div {                                                                                                                                    
  @apply mr-1 inline-flex items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-700 px-2 text-xs leading-none font-medium text-content-primary;            
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.multi.has-items .ts-control {                                                                                                                                
  @apply !pt-[7px] !pr-8 !pb-[4px];                                                                                                                                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.plugin-remove_button:not(.rtl) .item {                                                                                                                       
  @apply cursor-grab;                                                                                                                                                      
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown .optgroup-header {                                                                                                                                          
  @apply border-t border-surface-elevated bg-white dark:bg-neutral-800 font-semibold text-content-primary;                                                                 
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.multi.has-items .ts-control > input {                                                                                                                        
  @apply !mb-[3px];                                                                                                                                                        
  }                                                                                                                                                                        
                                                                                                                                                                           
  .tomselect-checkbox {                                                                                                                                                    
  @apply !mr-0;                                                                                                                                                            
  }                                                                                                                                                                        
                                                                                                                                                                           
  .input-hidden.focus {                                                                                                                                                    
  @apply !rounded-lg border border-surface-elevated;                                                                                                                       
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-dropdown-content.is-loading-more .option {                                                                                                                           
  pointer-events: none !important;                                                                                                                                         
  }                                                                                                                                                                        
                                                                                                                                                                           
  /* External tags styles */                                                                                                                                               
  .ts-control.external-tags-active .item {                                                                                                                                 
  display: none !important;                                                                                                                                                
  visibility: hidden !important;                                                                                                                                           
  width: 0 !important;                                                                                                                                                     
  height: 0 !important;                                                                                                                                                    
  margin: 0 !important;                                                                                                                                                    
  padding: 0 !important;                                                                                                                                                   
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.multi.has-items .ts-control.external-tags-active {                                                                                                           
  @apply !py-2;                                                                                                                                                            
  }                                                                                                                                                                        
                                                                                                                                                                           
  .plugin-dropdown_input.has-items .ts-control.external-tags-active .items-placeholder {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;                                                                                                                                               
  }                                                                                                                                                                        
                                                                                                                                                                           
  .ts-wrapper.multi.has-items .ts-control.external-tags-active > input {
  margin: 0 !important;
  }

  /* TomSelect input alignment with app form styles */
  .ts-control {
  @apply block w-full rounded-lg border border-surface-elevated shadow-sm sm:text-sm;
  }

  .ts-wrapper.focus .ts-control,
  .ts-wrapper.input-active .ts-control,
  .ts-control.focus {
  @apply border-primary ring-1 ring-primary;
  }

  .ts-wrapper.disabled .ts-control {
  @apply bg-surface-bg text-content-muted cursor-not-allowed;
  }

  /* Multi-select with external tags - make input look consistent */
  .ts-wrapper.multi .ts-control.external-tags-active {
  @apply min-h-[42px] items-center;
  }

  .ts-wrapper.multi .ts-control.external-tags-active input {
  @apply text-content-primary placeholder:text-content-muted;
  }

  /* Ensure multi-select matches single select height when empty */
  .ts-wrapper.multi:not(.has-items) .ts-control {
  @apply min-h-[42px];
  }

  /* Improve multi-select dropdown arrow visibility */
  .ts-wrapper.multi .ts-control.external-tags-active {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  }