/* KPI Solutions Base Styling Module */
/* Google Fonts import for Exo */
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

/* Apply Exo font to all text elements */
* {
  font-family: 'Exo', sans-serif !important;
}

/* KPI Solutions gradient background */
body {
  background: linear-gradient(135deg, #86cccc 0%, #74a5ff 20%, #1c3b91 60%);
  background-size: 100% 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Add logo as pseudo-element on body */
body::before {
  content: '';
  position: fixed;
  top: -80px;
  left: 10px;
  width: 300px;
  height: 300px;
  background-image: url('../images/kpi-solutions-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

/* Custom submit button styling */
.custom-submit-button {
  background-color: #1c3b91 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.custom-submit-button:hover {
  background-color: #15316b !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.custom-submit-button:disabled {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
  color: #000000 !important;
  opacity: 0.6;
}

/* General KPI Solutions styling */
.dropdown-item input[type="checkbox"] {
  margin-right: 8px;
}

/* Title styling */
.title.is-3 {
  color: #1c3b91 !important;
}

/* Form container with transparency to show gradient */
.box {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 10;
}

/* Mobile Responsive Styles */
/* Ensure proper box sizing for all elements */
* {
  box-sizing: border-box;
}

/* Mobile-specific container adjustments */
@media (max-width: 768px) {
  /* Reduce logo size on mobile */
  body::before {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
  }
  
  /* Add padding to prevent content from touching edges */
  .full-height {
    padding: 10px !important;
  }
  
  /* Ensure box doesn't exceed screen width */
  .box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
  }
  
  /* Stack grouped fields vertically on mobile */
  .field.is-grouped {
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  .field.is-grouped .control {
    margin-bottom: 0.75rem !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .field.is-grouped .control:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Ensure all inputs take full width */
  .field.is-grouped .input,
  .field.is-grouped .select,
  .field.is-grouped .select select {
    width: 100% !important;
  }
  
  /* Adjust title sizes for mobile */
  .title.is-3 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Adjust content text for mobile */
  .content {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Ensure submit button is full width on mobile */
  .custom-submit-button {
    width: 100% !important;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  .box {
    padding: 0.75rem !important;
  }
  
  .title.is-3 {
    font-size: 1.1rem !important;
  }
  
  .content {
    font-size: 0.85rem !important;
  }
  
  /* Reduce input padding on very small screens */
  .input, .select select {
    font-size: 0.9rem !important;
  }
}

/* Loading overlay - full page coverage with circle in center */
.loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 99999 !important;
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: auto !important;
}

.loading-overlay.show {
  display: flex !important;
}

.loading-container {
  background-color: white;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 100000 !important;
  position: relative;
}

/* Loading bars styling inside circle - original colors with increased amplitude */
.loading-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 40px;
}

.loading-bar {
  width: 8px;
  height: 10px;
  border-radius: 4px;
  animation: loading-animation 1.2s infinite ease-in-out;
}

/* Original colors for each bar */
.loading-bar:nth-child(1) { 
  background-color: #e74c3c;
  animation-delay: -1.1s; 
}
.loading-bar:nth-child(2) { 
  background-color: #fec901;
  animation-delay: -1.0s; 
}
.loading-bar:nth-child(3) { 
  background-color: #86cccc;
  animation-delay: -0.9s; 
}
.loading-bar:nth-child(4) { 
  background-color: #1c3b91;
  animation-delay: -0.8s; 
}

/* Increased amplitude animation - bars now scale from 0.2 to 2.5 */
@keyframes loading-animation {
  0%, 40%, 100% {
    transform: scaleY(0.2);
  }
  20% {
    transform: scaleY(2.5);
  }
}

/* Loading text */
.loading-text {
  margin-top: 15px;
  font-size: 14px;
  color: #1c3b91;
  font-weight: 600;
}