/* client/style.css */

/* Progress Bar - Taller & Sleeker */
.progress-wrap {
  background: white;
  border-radius: 30px;
  padding: 20px 25px;
  margin-bottom: 25px;
  box-shadow: 0 6px 20px rgba(199, 125, 255, 0.15);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.progress-label {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  color: #555;
  white-space: nowrap;
  background: #f8f8f8;
  padding: 5px 12px;
  border-radius: 50px;
}

.bar-bg {
  flex: 1;
  min-width: 150px;
  background: #f0f0f0;
  border-radius: 50px;
  height: 28px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B9D, #C77DFF, #48CAE4);
  border-radius: 50px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
  position: relative;
  overflow: hidden;
}

.bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.3) 0%, 
    rgba(255,255,255,0.1) 50%, 
    transparent 100%);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  20%, 100% { transform: translateX(100%); }
}

.pct {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  color: #C77DFF;
  white-space: nowrap;
  background: #f5eeff;
  padding: 5px 15px;
  border-radius: 50px;
  min-width: 70px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(199, 125, 255, 0.2);
}

/* ============================================================
   TASKIDEE — TARGETED FIXES
   ============================================================ */

/* Input bleeding fix — box-sizing only on form elements */
input,
select,
textarea,
.form-group input,
.form-group select {
  box-sizing: border-box;
  max-width: 100%;
}

/* Auth page centering */
.auth-container {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Modal scroll lock — added/removed by JS when modals open/close */
body.modal-open {
  overflow: hidden;
}

/* Prevent horizontal bleed on mobile.
   IMPORTANT: overflow-x must only be on html, NOT body.
   Setting overflow on body breaks position:sticky on children
   (the progress bar uses sticky and needs body to scroll freely). */
html {
  overflow-x: hidden;
}

/* Modal scroll fix — when modal content is taller than the screen
   (e.g. Add Child with avatar grid on small screens), the overlay
   itself scrolls rather than cutting off content at the bottom.
   Uses align-items: flex-start so the modal content starts at the
   top and the overlay scrolls down to reveal the rest.
   The padding ensures there is breathing room at top and bottom. */
.modal {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start !important;
  padding: 20px 16px;
}
 
.modal-content {
  margin: auto;
  max-height: none;
}