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

.activity-entry--highlight {
  animation: activity-entry-flash 1.2s ease-out;
}

@keyframes activity-entry-flash {
  from {
    background-color: #fef9c3;
  }
  to {
    background-color: transparent;
  }
}

/* Suppress browser default clear button on search inputs */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Search highlight styling - Wenmar red theme */
mark {
  background-color: #ffc9c9; /* wenmar-200 */
  color: #7d1316;             /* wenmar-900 */
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
}

/* Hide scrollbars on horizontal-scrolling rows (e.g. native labels row) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.dark mark {
  background-color: #450608; /* wenmar-950 */
  color: #ffa0a0;             /* wenmar-300 */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]:not(.input):invalid,
input[type="number"]:not(.input):user-invalid {
  outline: none;
  border: none;
  box-shadow: none;
}

@keyframes pointer-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(8px); }
  75% { transform: translateX(2px); }
}

.pointer-nudge {
  animation: pointer-nudge 1.2s ease-in-out infinite;
}

@keyframes pointer-appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.pointer-appear {
  animation: pointer-appear 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .pointer-nudge,
  .pointer-appear {
    animation: none;
  }
}

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.pin-error {
  animation: pin-shake 0.35s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .pin-error {
    animation: none;
  }
}

/* Multi-select panel layers above modals/drawers */
.multi-select-panel--bottom-sheet {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  margin: 0 !important;
  max-height: 60vh;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.multi-select-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

.multi-select-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Portal in_progress status animation — ambient "work is happening" signal.
   Follows the pointer-nudge / pin-shake convention: keyframes + utility class
   + prefers-reduced-motion guard. Pure CSS, no JS. */
@keyframes wip-wrench-tap {
  0%        { transform: rotate(-18deg) translateY(0); }
  15%       { transform: rotate(14deg) translateY(-2px); }
  25%       { transform: rotate(-8deg) translateY(0); }
  35%, 100% { transform: rotate(0deg) translateY(0); }
}
@keyframes wip-chassis-shake {
  0%, 34%, 100% { transform: translateX(0); }
  16%           { transform: translateX(1.5px); }
  22%           { transform: translateX(-1.5px); }
}
@keyframes wip-spark-pop {
  0%, 10% { opacity: 0; transform: scale(0.3) translateY(0); }
  16%     { opacity: 1; transform: scale(1) translateY(-2px); }
  30%     { opacity: 0; transform: scale(0.6) translateY(-10px); }
  100%    { opacity: 0; }
}
@keyframes wip-dot-blink {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.wip-wrench  { animation: wip-wrench-tap 1.8s ease-in-out infinite; transform-origin: 85% 15%; }
.wip-chassis { animation: wip-chassis-shake 1.8s ease-in-out infinite; }
.wip-spark   { animation: wip-spark-pop 1.8s ease-in-out infinite; }
.wip-dot     { animation: wip-dot-blink 1.4s ease-in-out infinite; }
.wip-dot--2  { animation-delay: 0.2s; }
.wip-dot--3  { animation-delay: 0.4s; }

/* Portal inspection status animation — ambient "being inspected" signal.
   Follows the same convention as the wip animation: keyframes + utility
   class + prefers-reduced-motion guard. Pure CSS, no JS. */
@keyframes inspection-scan {
  0%, 100% { transform: translateX(-2px) rotate(-6deg); }
  50%      { transform: translateX(2px) rotate(6deg); }
}
@keyframes inspection-glass-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.inspection-scan  { animation: inspection-scan 1.8s ease-in-out infinite; }
.inspection-glass { animation: inspection-glass-pulse 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .wip-wrench,
  .wip-chassis,
  .wip-spark,
  .wip-dot,
  .inspection-scan,
  .inspection-glass {
    animation: none;
  }
}