/* =====================
   Shared Global Styles
   ===================== */

/* Resets */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== Enhanced liquid glass card ===== */
.card.glass {
  background: rgba(255, 255, 255, 0.005) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px;
  backdrop-filter: blur(12px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(110%) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03),
              0 0 0 1px rgba(255, 255, 255, 0.01) inset !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card.glass:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05),
              0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}

.card.glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* ===== Blur Effect for Reflect Page ===== */
.category-section {
  transition: all 0.5s ease-in-out;
  transform-origin: top;
}

.category-section.blurred {
  filter: grayscale(80%) blur(3px);
  opacity: 0.6;
  transform: scale(0.98);
}

.category-section.focused {
  transform: scale(1.01);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  z-index: 1;
}

/* ===== Summary Card Styling ===== */
.summary-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.summary-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.summary-stat {
  padding: 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
}

.summary-stat:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* ===== Modern input styling ===== */
.input-group.custom-input {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  display: flex;
  overflow: hidden;
}

.input-group.custom-input:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

.input-group.custom-input:focus-within {
  border-color: rgba(34, 139, 87, 0.8);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(34, 139, 87, 0.2);
}

.input-group.custom-input .input-group-text,
.input-group.custom-input .form-control {
  border: none;
  background: transparent;
  color: #fff;
}

.input-group.custom-input .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.input-group-text {
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
}

.input-group.custom-input .form-control:focus {
  box-shadow: none;
  color: #fff;
}

/* ===== Utility colours ===== */
.text-primary { color: #228b57 !important; }
.bg-primary   { background: linear-gradient(135deg, #52b788 0%, #2d6187 100%) !important; }

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}