/* ===================== ARMY CAMOUFLAGE PATTERNS ===================== */

/* Camouflage Color Variables */
:root {
  --camo-dark-green: #1a2d14;
  --camo-green: #2d4a22;
  --camo-olive: #3d5a2e;
  --camo-tan: #8b7355;
  --camo-brown: #5a4a3a;
  --camo-light-tan: #a89968;
}

/* Primary Camouflage Pattern (for backgrounds) */
.camo-pattern {
  background-color: #2d4a22;
  background-image: 
    radial-gradient(ellipse at 20% 30%, #1a2d14 0%, transparent 50%),
    radial-gradient(ellipse at 60% 70%, #3d5a2e 0%, transparent 50%),
    radial-gradient(ellipse at 80% 10%, #5a4a3a 0%, transparent 40%),
    radial-gradient(ellipse at 40% 80%, #8b7355 0%, transparent 45%),
    radial-gradient(ellipse at 90% 60%, #1a2d14 0%, transparent 35%),
    radial-gradient(ellipse at 10% 90%, #3d5a2e 0%, transparent 40%),
    radial-gradient(ellipse at 70% 40%, #5a4a3a 0%, transparent 38%),
    radial-gradient(ellipse at 30% 50%, #8b7355 0%, transparent 42%);
  background-size: 
    180px 180px,
    220px 220px,
    160px 160px,
    200px 200px,
    190px 190px,
    170px 170px,
    210px 210px,
    185px 185px;
  background-position:
    0 0,
    40px 60px,
    130px 270px,
    70px 100px,
    150px 50px,
    20px 180px,
    90px 220px,
    110px 140px;
}

/* Subtle Camouflage for Sidebar */
.camo-pattern-subtle {
  background-color: #2d4a22;
  background-image: 
    radial-gradient(ellipse at 25% 35%, rgba(26, 45, 20, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 75%, rgba(61, 90, 46, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(90, 74, 58, 0.4) 0%, transparent 40%),
    radial-gradient(ellipse at 45% 85%, rgba(139, 115, 85, 0.4) 0%, transparent 45%);
  background-size: 
    150px 150px,
    180px 180px,
    140px 140px,
    170px 170px;
}

/* Camouflage Gradient for Headers */
.camo-gradient {
  background: linear-gradient(135deg, 
    #2d4a22 0%, 
    #3d5a2e 25%, 
    #2d4a22 50%, 
    #1a2d14 75%, 
    #2d4a22 100%
  );
  position: relative;
}

.camo-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(ellipse at 30% 40%, rgba(90, 74, 58, 0.3) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 115, 85, 0.2) 0%, transparent 35%);
  background-size: 100px 100px, 120px 120px;
  pointer-events: none;
}

/* Camouflage for Buttons */
.btn-camo {
  background-color: #2d4a22;
  background-image: 
    radial-gradient(ellipse at 20% 30%, #1a2d14 0%, transparent 40%),
    radial-gradient(ellipse at 70% 70%, #3d5a2e 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, #5a4a3a 0%, transparent 35%);
  background-size: 80px 80px, 100px 100px, 90px 90px;
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-camo:hover {
  background-color: #3d5a2e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Camouflage Card Background */
.card-camo {
  background-color: #2d4a22;
  background-image: 
    radial-gradient(ellipse at 15% 25%, rgba(26, 45, 20, 0.7) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 65%, rgba(61, 90, 46, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 20%, rgba(90, 74, 58, 0.5) 0%, transparent 40%);
  background-size: 120px 120px, 140px 140px, 110px 110px;
  color: white;
}

/* Login Page Camouflage Overlay */
.login-camo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2d4a22;
  background-image: 
    radial-gradient(ellipse at 10% 20%, #1a2d14 0%, transparent 50%),
    radial-gradient(ellipse at 50% 60%, #3d5a2e 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, #5a4a3a 0%, transparent 45%),
    radial-gradient(ellipse at 30% 90%, #8b7355 0%, transparent 50%),
    radial-gradient(ellipse at 70% 35%, #1a2d14 0%, transparent 40%),
    radial-gradient(ellipse at 15% 75%, #3d5a2e 0%, transparent 45%),
    radial-gradient(ellipse at 85% 80%, #5a4a3a 0%, transparent 42%),
    radial-gradient(ellipse at 40% 45%, #8b7355 0%, transparent 48%);
  background-size: 
    200px 200px,
    250px 250px,
    180px 180px,
    220px 220px,
    210px 210px,
    190px 190px,
    230px 230px,
    205px 205px;
  background-position:
    0 0,
    50px 80px,
    140px 300px,
    80px 120px,
    160px 60px,
    30px 200px,
    100px 240px,
    120px 160px;
  opacity: 0.95;
}

/* Camouflage Text Shadow */
.camo-text-shadow {
  text-shadow: 
    2px 2px 4px rgba(26, 45, 20, 0.8),
    -1px -1px 2px rgba(61, 90, 46, 0.4);
}

/* Camouflage Border */
.camo-border {
  border: 3px solid;
  border-image: linear-gradient(
    135deg,
    #1a2d14,
    #2d4a22,
    #3d5a2e,
    #5a4a3a,
    #2d4a22
  ) 1;
}

/* Animated Camouflage Background */
@keyframes camo-shift {
  0%, 100% {
    background-position:
      0 0,
      40px 60px,
      130px 270px,
      70px 100px,
      150px 50px,
      20px 180px,
      90px 220px,
      110px 140px;
  }
  50% {
    background-position:
      20px 20px,
      60px 80px,
      150px 290px,
      90px 120px,
      170px 70px,
      40px 200px,
      110px 240px,
      130px 160px;
  }
}

.camo-pattern-animated {
  animation: camo-shift 20s ease-in-out infinite;
}

/* Digital Camouflage (Pixelated) - Alternative Style */
.camo-digital {
  background-color: #2d4a22;
  background-image: 
    repeating-linear-gradient(
      90deg,
      #1a2d14 0px,
      #1a2d14 8px,
      transparent 8px,
      transparent 16px
    ),
    repeating-linear-gradient(
      0deg,
      #3d5a2e 0px,
      #3d5a2e 8px,
      transparent 8px,
      transparent 16px
    ),
    repeating-linear-gradient(
      45deg,
      #5a4a3a 0px,
      #5a4a3a 12px,
      transparent 12px,
      transparent 24px
    );
  background-blend-mode: overlay;
}

/* Woodland Camouflage Pattern */
.camo-woodland {
  background-color: #2d4a22;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.16, 0 0 0 0 0.18, 0 0 0 0 0.08, 0 0 0 1 0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.6'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}