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

/* Global loading feedback. body.loading is toggled by app/javascript/application.js
   when any Turbo fetch has been in flight for >200ms. */
body.loading,
body.loading * { cursor: progress; }

#global-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
  background: transparent;
}

body.loading #global-progress-bar {
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-pri-menu-bg, #2563eb) 30%,
    var(--color-pri-menu-bg, #2563eb) 70%,
    transparent 100%
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: facs-progress-slide 1200ms linear infinite;
}

@keyframes facs-progress-slide {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* Drag-and-drop sortable lists (report wizard). Class state is toggled by
   app/javascript/controllers/sortable_lists_controller.js. */
[data-controller="sortable-lists"] li.sortable-dragging {
  opacity: 0.4;
}
[data-controller="sortable-lists"] ul.sortable-drop-zone {
  outline: 2px dashed var(--color-pri-menu-bg, #2563eb);
  outline-offset: -4px;
}
[data-controller="sortable-lists"] li.sortable-drop-before {
  box-shadow: 0 -2px 0 var(--color-pri-menu-bg, #2563eb);
}
[data-controller="sortable-lists"] li.sortable-drop-after {
  box-shadow: 0 2px 0 var(--color-pri-menu-bg, #2563eb);
}

/* Validation / error messages on the Contratti (tariffe) screens.
   These containers receive errors via `turbo_stream.update "err-mess"`, which
   only replaces the container's INNER html — it never touches its class. The
   old markup used class="hidden", so injected errors stayed display:none and
   actions like "Inserisci" looked like they did nothing. `.err-box` instead
   drives visibility from content: collapsed when empty, a red box when filled. */
.err-box:empty { display: none; }
.err-box {
  margin: 0.75rem 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid #fecaca;        /* red-200 */
  border-radius: 0.375rem;
  background-color: #fef2f2;        /* red-50  */
  color: #b91c1c;                   /* red-700 */
  font-size: 0.875rem;
}
.err-box ul { list-style: disc; margin: 0; padding-left: 1.25rem; }
.err-box li { margin: 0.125rem 0; }

/* Brief flash when errors (re)appear — the turbo_stream templates already do
   classList.add('highlight-flash'); this is its (previously missing) definition. */
@keyframes facs-err-flash {
  0%, 100% { background-color: #fef2f2; }
  35%      { background-color: #fbd5d5; }
}
.highlight-flash { animation: facs-err-flash 0.7s ease-in-out 2; }