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


/* SIRE previews: animate composited properties, keep wide files inside the dialog. */
.sire-import-dialog {
  width: min(1100px, calc(100vw - 2rem));
  max-height: 90dvh;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.sire-import-dialog[open] { animation: sire-dialog-enter 240ms cubic-bezier(.16, 1, .3, 1) both; }
.sire-import-dialog[open]::backdrop { animation: sire-backdrop-enter 240ms ease-out both; }
.sire-import-dialog[data-closing] { animation: sire-dialog-exit 150ms ease-in both; }
.sire-import-dialog[data-closing]::backdrop { animation: sire-backdrop-exit 150ms ease-in both; }
.sire-columns-scroll { overscroll-behavior-x: contain; }
.sire-columns-table { width: max-content; min-width: 100%; border-collapse: collapse; }
.sire-columns-table th { min-width: 145px; max-width: 235px; vertical-align: top; }
.sire-columns-table td { font-variant-numeric: tabular-nums; }
.sire-columns-button {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid #cbd5e1; border-radius: 10px; color: #0369a1;
  transition: background-color 150ms, opacity 150ms;
}
.sire-columns-button:hover:not(:disabled) { background: #e0f2fe; }
.sire-columns-button:focus-visible { outline: 2px solid #0284c7; outline-offset: 3px; }
.sire-columns-button:disabled { opacity: .35; cursor: default; }
.theme-dark .sire-columns-button { border-color: #475569; color: #7dd3fc; }
.theme-dark .sire-columns-button:hover:not(:disabled) { background: #0c4a6e; }
@keyframes sire-dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sire-dialog-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes sire-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes sire-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sire-import-dialog[open], .sire-import-dialog[open]::backdrop,
  .sire-import-dialog[data-closing], .sire-import-dialog[data-closing]::backdrop { animation: none; }
  .sire-columns-button { transition: none; }
}

/* Shared entry motion for every dialog and custom selector. No persistent transforms:
   fixed menus, previews and print controls retain their normal positioning. */
.app-modal-overlay:not(.hidden) { animation: app-overlay-enter 240ms ease-out; }
.app-modal-overlay:not(.hidden) > :not(.fixed):not(.absolute),
dialog[open]:not(.sire-import-dialog) { animation: app-panel-enter 240ms cubic-bezier(.16, 1, .3, 1); }
dialog[open]:not(.sire-import-dialog)::backdrop { animation: app-overlay-enter 240ms ease-out; }
.app-popover:not(.hidden), .search-select-panel:not(.hidden),
[data-date-picker-target="panel"]:not(.hidden),
[data-time-picker-target="panel"]:not(.hidden),
[data-controller~="multi-search-select"][open] > :not(summary),
.select2-container--open .select2-dropdown {
  animation: app-select-enter 180ms cubic-bezier(.16, 1, .3, 1);
  transform-origin: top center;
}
@keyframes app-overlay-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-panel-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes app-select-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .app-modal-overlay:not(.hidden), .app-modal-overlay:not(.hidden) > :not(.fixed):not(.absolute),
  dialog[open]:not(.sire-import-dialog), dialog[open]:not(.sire-import-dialog)::backdrop,
  .app-popover:not(.hidden), .search-select-panel:not(.hidden), [data-date-picker-target="panel"]:not(.hidden),
  [data-time-picker-target="panel"]:not(.hidden),
  [data-controller~="multi-search-select"][open] > :not(summary),
  .select2-container--open .select2-dropdown { animation: none; }
}

.purchase-import-header { background: linear-gradient(115deg, #15354b, #137e83); }