/*
 * 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 input focus styles - nice semitransparent focus ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #c8193c;
  box-shadow: 0 0 0 3px rgba(200, 25, 60, 0.2);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Checkbox and radio focus styles */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(200, 25, 60, 0.3);
}

/* Button focus styles (including links styled as buttons) */
button:focus,
input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 25, 60, 0.3);
}

/* Links styled as buttons - need explicit border-radius */
a.rounded-lg:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 25, 60, 0.3);
  border-radius: 0.5rem;
}

a.rounded-md:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 25, 60, 0.3);
  border-radius: 0.375rem;
}

/* Upload animation styles - rotating gradient border effect */
.upload-container {
  position: relative;
  isolation: isolate;
}

/* The border pseudo-element */
.upload-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  padding: 2px;
  background: #d1d5db;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Uploading state - rotating rainbow border */
.upload-container.uploading::before {
  padding: 3px;
  background: conic-gradient(
    from var(--rotation, 0deg),
    #c8193c 0deg,
    #ff6b6b 60deg,
    #ffd93d 120deg,
    #6bcb77 180deg,
    #4d96ff 240deg,
    #c8193c 360deg
  );
  animation: rotate-gradient 2s linear infinite;
}

/* Upload complete state - green border */
.upload-container.upload-complete::before {
  padding: 3px;
  background: #22c55e;
  animation: success-flash 0.6s ease-out forwards;
}

@keyframes rotate-gradient {
  0% {
    --rotation: 0deg;
  }
  100% {
    --rotation: 360deg;
  }
}

@keyframes success-flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
  }
  100% {
    opacity: 0;
  }
}

/* Shimmer effect on the image during upload */
.upload-container.uploading img {
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Register CSS custom property for smooth rotation */
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}