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

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.variant-saving-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: variant-spin 0.7s linear infinite;
}

@keyframes variant-spin {
  to { transform: rotate(360deg); }
}

@keyframes just-saved-check {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

[data-just-saved] [data-variant-inline-edit-target="save"] {
  animation: just-saved-check 1.2s ease-out forwards;
  pointer-events: none;
}

/*
 * Spreadsheet-style column highlight: hovering a header tints its whole column,
 * clicking it pins the tint (see column_highlight_controller.js).
 * Translucent so it composites over the row hover instead of hiding it.
 * supercorto: one rule per column index — CSS can't correlate positions generically.
 * Ceiling: 14 columns; add rules here if a table grows wider.
 */
.column-hover-table th { cursor: pointer; }
.column-hover-table th.column-selected { background-color: rgba(99, 102, 241, 0.18); }
.column-hover-table td.column-selected { background-color: rgba(99, 102, 241, 0.10); }

@media (hover: hover) {
  .column-hover-table th:hover:not(.column-selected) { background-color: rgba(99, 102, 241, 0.12); }

  .column-hover-table:has(th:nth-child(1):hover)  td:nth-child(1):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(2):hover)  td:nth-child(2):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(3):hover)  td:nth-child(3):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(4):hover)  td:nth-child(4):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(5):hover)  td:nth-child(5):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(6):hover)  td:nth-child(6):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(7):hover)  td:nth-child(7):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(8):hover)  td:nth-child(8):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(9):hover)  td:nth-child(9):not(.column-selected)  { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(10):hover) td:nth-child(10):not(.column-selected) { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(11):hover) td:nth-child(11):not(.column-selected) { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(12):hover) td:nth-child(12):not(.column-selected) { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(13):hover) td:nth-child(13):not(.column-selected) { background-color: rgba(99, 102, 241, 0.06); }
  .column-hover-table:has(th:nth-child(14):hover) td:nth-child(14):not(.column-selected) { background-color: rgba(99, 102, 241, 0.06); }
}