/* ============================================
   SitePulse — App Styles
   ============================================ */

/* Base resets */
*, *::before, *::after { box-sizing: border-box; }

/* Glassmorphism card */
.sp-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
}

/* Form inputs — large, touch-friendly */
.sp-input {
  width: 100%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #e2e8f0;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.sp-input:focus {
  outline: none;
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}
.sp-input::placeholder { color: #4a5568; }

select.sp-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

/* Labels */
.sp-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 0.375rem;
}

/* Gold button */
.sp-btn-gold {
  background: linear-gradient(135deg, #c9a84c, #e2c97e);
  color: #06080f;
  font-weight: 600;
  border-radius: 0.75rem;
  transition: all 0.2s;
  white-space: nowrap;
}
.sp-btn-gold:hover {
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.25);
}
.sp-btn-gold:active {
  transform: scale(0.97);
}

/* Work item card */
.work-item-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s;
}
.work-item-card:focus-within {
  border-color: rgba(201, 168, 76, 0.3);
}

/* Collapsible sections */
.collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.collapse-content.open {
  max-height: 5000px;
}

/* Animations */
@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.animate-slide-in { animation: slide-in 0.3s ease-out; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.3s ease-out; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Chart.js dark background */
canvas { border-radius: 0.5rem; }

/* Table row hover */
#detailTableBody tr:hover { background: rgba(201, 168, 76, 0.05); }

/* Progress bar */
.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #c9a84c, #e2c97e);
  transition: width 0.4s ease;
}

/* Responsive helpers */
@media (max-width: 640px) {
  .sp-input { font-size: 16px; /* prevent iOS zoom */ }
}