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

@media (prefers-reduced-motion: reduce) {
  .activity-entry--highlight {
    animation: none;
  }
}

/* Platform-aware visibility utilities.
   `.native-only` is hidden by default and shown only inside the native shell
   (body.platform-native). `.web-only` is the inverse. Use these instead of
   inline `hidden`-class conditionals when gating a single element on platform.
   `!important` is required so these win over Tailwind display utilities
   (e.g. `.btn` / `inline-flex`). On native, `revert !important` falls back to
   the element's non-important display (flex/inline-flex/block). */
.native-only { display: none !important; }
.platform-native .native-only { display: revert !important; }
.web-only { display: revert !important; }
.platform-native .web-only { display: none !important; }

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

.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(12px); }
  75% { transform: translateX(0px); }
}

.pointer-nudge {
  animation: pointer-nudge 1.0s 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;
  }
}

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

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}