/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css";
@import "https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.default.css";
@import "https://cdn.jsdelivr.net/npm/trix@2.1.16/dist/trix.css";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

/* Trix editor styling */
trix-editor {
  min-height: 12rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.75rem;
}

trix-editor:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

/* Hide file attachment button - not needed for email templates */
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: none;
  color: red;
}

/* Cap width so long option names don't blow out layout */
.ts-wrapper:not(.global-search-ts) {
  max-width: 14rem;
}

/* Lock select width to the native select's width so it doesn't shift */
.ts-wrapper.single:not(.global-search-ts) {
  width: var(--ts-min-width);
}

.ts-wrapper.multi {
  min-width: var(--ts-min-width);
}

/* Truncate long option text in the dropdown */
.ts-dropdown .option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Allow the dropdown panel to grow wider than the (narrow) control so
   long option names are fully visible. The dropdown is absolutely
   positioned, so it overlays adjacent content without shifting layout. */
.ts-wrapper:not(.global-search-ts) .ts-dropdown {
  width: max-content;
  min-width: 100%;
  max-width: 32rem;
}

.print-color-adjust {
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}

.ts-large .ts-control,
.ts-large .ts-control input,
.ts-large .ts-dropdown .option,
.ts-large .ts-dropdown .option:hover,
.ts-large .ts-dropdown .option:focus,
.ts-large .ts-dropdown .option:active,
.ts-large .ts-dropdown .option:hover,
.ts-large .ts-dropdown .option:focus,
.ts-large .ts-dropdown .option:active,
.ts-large .ts-dropdown .option,
.ts-large .ts-dropdown .option:hover {
  font-size: 2rem;
  line-height: 2rem;
}


@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

[busy] {
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  &::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.5);
    border-top-color: white;
    animation: spin 1s linear infinite;
    z-index: 1001;
  }
}