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

/* Disabled form controls are greyed out and show the "unavailable" cursor.
   Single source of truth — don't add per-field disabled: utilities. */
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  background-color: #e5e7eb; /* gray-200 */
  color: #6b7280; /* gray-500 */
}

.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;
}

/* While a query is being typed into a single select (ts-searching, toggled
   by tom_select_controller), hide the current selection so the query is
   readable instead of overlapping the old value. Keyed off typed text, not
   focus — a just-selected item must stay visible while the input still has
   focus. display (not visibility) so the item also gives up its space and
   the query starts at the left edge of the control. */
.ts-wrapper.single.ts-searching .item {
  display: none;
}

/* While a morph update is in flight (body.morph-pending, toggled by
   dynamic_form_controller), server-computed values pulse gently to show
   they're being recalculated. The animation-delay keeps typical sub-200ms
   round-trips from flickering — the pulse only becomes visible when the
   server is genuinely slow. Inputs are never dimmed; they're user-owned. */
body.morph-pending [data-morph-dim] {
  animation: morph-dim-pulse 1.2s ease-in-out 0.15s infinite;
}

body.morph-pending form[data-morph-form] {
  cursor: progress;
}

@keyframes morph-dim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 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-wrapper.ts-large .ts-control,
.ts-wrapper.ts-large .ts-control input {
  font-size: 1.75rem;
  line-height: 2rem;
  min-height: 4rem;
  padding: 0.75rem 1rem;
}

.ts-wrapper.ts-large .ts-control {
  display: flex;
  align-items: center;
}

.ts-wrapper.ts-large .ts-dropdown .option {
  font-size: 1.5rem;
  line-height: 1.75rem;
  padding: 1rem;
}

/* ts-large is used in station mode for touch-friendly full-width selects.
   Opt out of the 14rem cap and the native-select width lock applied to
   regular wrappers. */
.ts-wrapper.ts-large {
  max-width: none;
}
.ts-wrapper.ts-large.single:not(.global-search-ts) {
  width: 100%;
}

/* ts-wide is the width-only escape hatch: fill the container without the
   touch-friendly sizing ts-large applies. Use it on regular desktop forms
   where the 14rem cap is too narrow. */
.ts-wrapper.ts-wide {
  max-width: none;
}
.ts-wrapper.ts-wide.single:not(.global-search-ts) {
  width: 100%;
}


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