/* =========================================================
   Friends & Family Evening Meet - Stylesheet
   Theme: Blue / Purple / White / Light Gray
   Glassmorphism + Soft Gradient + Smooth Animations
   ========================================================= */

:root{
  --clr-blue: #4361ee;
  --clr-blue-dark: #3140c9;
  --clr-purple: #7209b7;
  --clr-purple-light: #9d4edd;
  --clr-white: #ffffff;
  --clr-light-gray: #f1f3f9;
  --clr-text: #22223b;
  --clr-text-muted: #6c7086;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 8px 32px rgba(67, 97, 238, 0.15);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --gradient-main: linear-gradient(135deg, #dbe4ff 0%, #eef0ff 30%, #f3e8ff 65%, #e0d4ff 100%);
  --gradient-btn: linear-gradient(135deg, var(--clr-blue) 0%, var(--clr-purple) 100%);
  --transition-fast: 0.2s ease;
  --transition-med: 0.4s cubic-bezier(.25,.8,.25,1);
}

[data-theme="dark"]{
  --clr-text: #eef0f7;
  --clr-text-muted: #b3b8d4;
  --glass-bg: rgba(30, 30, 50, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
  --gradient-main: linear-gradient(135deg, #1a1a2e 0%, #232946 30%, #2d1b4e 65%, #1c1436 100%);
  --clr-light-gray: #1e1e32;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: 'Poppins', sans-serif;
  background: var(--gradient-main);
  background-attachment: fixed;
  color: var(--clr-text);
  min-height: 100vh;
  margin: 0;
  transition: background var(--transition-med), color var(--transition-med);
  overflow-x: hidden;
}

.text-muted-custom{ color: var(--clr-text-muted); }

/* ============ NAVBAR ============ */
.glass-nav{
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition-med);
  padding: 0.75rem 0;
}
.navbar-brand{
  color: var(--clr-blue-dark) !important;
  font-size: 1.25rem;
}
[data-theme="dark"] .navbar-brand{ color: #a9baff !important; }
.nav-link{
  color: var(--clr-text) !important;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem !important;
  transition: all var(--transition-fast);
}
.nav-link:hover{
  background: rgba(114, 9, 183, 0.1);
  color: var(--clr-purple) !important;
}
.theme-toggle-btn{
  background: var(--gradient-btn);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}
.theme-toggle-btn:hover{ transform: rotate(20deg) scale(1.1); }

/* ============ LAYOUT ============ */
.app-container{ min-height: calc(100vh - 140px); }

.screen{
  display: none;
  animation: fadeSlideIn 0.5s ease;
}
.screen.active-screen{ display: block; }

@keyframes fadeSlideIn{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ============ GLASSMORPHISM CARD ============ */
.glass-card{
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.glass-card:hover{
  box-shadow: 0 12px 40px rgba(67, 97, 238, 0.22);
}

/* ============ HERO ============ */
.hero-block{ padding-top: 1rem; }
.hero-icon{
  font-size: 3.2rem;
  background: var(--gradient-btn);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: floatY 3s ease-in-out infinite;
}
@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.hero-title{
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  background: var(--gradient-btn);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0.5rem 0;
}
.hero-subtitle{
  font-size: 1.15rem;
  color: var(--clr-text-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* Countdown */
.countdown-wrap{
  max-width: 480px;
  padding: 1.5rem;
}
.countdown-label{ font-weight: 600; margin-bottom: 0.75rem; }
.countdown-timer{
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cd-box{
  background: var(--gradient-btn);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  min-width: 64px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(67,97,238,0.3);
}
.cd-box span{ display:block; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.cd-box small{ font-size: 0.65rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }
.event-date-text{ margin-top: 0.85rem; margin-bottom: 0; font-size: 0.9rem; color: var(--clr-text-muted); }

/* Feature cards */
.feature-card{ padding: 2rem 1.25rem; }
.feature-icon{
  font-size: 2rem;
  color: var(--clr-purple);
  margin-bottom: 0.75rem;
  display: block;
}

/* ============ BUTTONS ============ */
.btn-primary-gradient{
  background: var(--gradient-btn);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  transition: all var(--transition-fast);
  box-shadow: 0 6px 18px rgba(67,97,238,0.28);
}
.btn-primary-gradient:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(67,97,238,0.4);
  color: #fff;
}
.btn-primary-gradient:active{ transform: translateY(0); }

.btn-outline-custom{
  background: transparent;
  border: 2px solid var(--clr-blue);
  color: var(--clr-blue-dark);
  border-radius: var(--radius-md);
  font-weight: 600;
  padding: 0.68rem 1.6rem;
  transition: all var(--transition-fast);
}
[data-theme="dark"] .btn-outline-custom{ color: #a9baff; border-color: #a9baff; }
.btn-outline-custom:hover{
  background: var(--clr-blue);
  color: #fff;
  transform: translateY(-2px);
}

.btn-danger-custom{
  background: linear-gradient(135deg, #ef476f, #d90429);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--transition-fast);
}
.btn-danger-custom:hover{ transform: translateY(-2px); color: #fff; box-shadow: 0 8px 20px rgba(217,4,41,0.35); }

.btn-link-custom{
  background: none;
  border: none;
  color: var(--clr-purple);
  font-weight: 600;
  text-decoration: underline;
  transition: color var(--transition-fast);
}
.btn-link-custom:hover{ color: var(--clr-blue-dark); }

.btn-lg-custom{ font-size: 1.05rem; padding: 0.8rem 1.9rem; }

/* ============ FORMS ============ */
.form-card{ max-width: 680px; padding: 2.25rem; }
.login-card{ max-width: 420px; padding: 2.5rem; }
.form-header-icon{
  font-size: 2.4rem;
  color: var(--clr-purple);
  margin-bottom: 0.5rem;
  display: block;
}
.form-title{ font-weight: 700; }

.form-label{ font-weight: 600; margin-bottom: 0.4rem; }

.custom-input{
  background: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(114,9,183,0.15);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  color: var(--clr-text);
  transition: all var(--transition-fast);
}
[data-theme="dark"] .custom-input{ background: rgba(255,255,255,0.06); color: var(--clr-text); }
.custom-input:focus{
  background: #fff;
  border-color: var(--clr-blue);
  box-shadow: 0 0 0 4px rgba(67,97,238,0.15);
  color: var(--clr-text);
}
[data-theme="dark"] .custom-input:focus{ background: rgba(255,255,255,0.1); }
.custom-input-group-text{
  background: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(114,9,183,0.15);
  color: var(--clr-purple);
}

.availability-options{
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.radio-pill{
  position: relative;
  cursor: pointer;
  flex: 1 1 200px;
}
.radio-pill input{
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.radio-pill span{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(114,9,183,0.2);
  border-radius: var(--radius-md);
  font-weight: 600;
  background: rgba(255,255,255,0.5);
  transition: all var(--transition-fast);
  text-align: center;
}
[data-theme="dark"] .radio-pill span{ background: rgba(255,255,255,0.05); }
.radio-pill input:checked + span{
  background: var(--gradient-btn);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(67,97,238,0.3);
  transform: scale(1.02);
}
.radio-pill:hover span{ border-color: var(--clr-blue); }

/* Validation */
.was-validated .form-control:invalid, .custom-input.is-invalid{
  border-color: #d90429;
}
.invalid-feedback{ display: none; font-size: 0.82rem; }
.custom-input.is-invalid ~ .invalid-feedback,
.form-control.is-invalid + .invalid-feedback{ display: block; }

/* ============ CONFIRMATION ============ */
.confirmation-card{ max-width: 520px; padding: 2.5rem; }
.success-check{
  font-size: 4.5rem;
  color: #06d6a0;
  margin-bottom: 0.5rem;
  animation: popIn 0.5s cubic-bezier(.36,1.5,.64,1);
}
@keyframes popIn{
  0%{ transform: scale(0); opacity: 0; }
  70%{ transform: scale(1.15); }
  100%{ transform: scale(1); opacity: 1; }
}
.confirmation-details{
  background: rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  max-width: 420px;
}
[data-theme="dark"] .confirmation-details{ background: rgba(255,255,255,0.05); }
.cd-row{
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(114,9,183,0.2);
  font-size: 0.95rem;
}
.cd-row:last-child{ border-bottom: none; }
#qrCode{ display: inline-block; padding: 10px; background: #fff; border-radius: var(--radius-sm); }

/* ============ ADMIN DASHBOARD ============ */
.dash-title{ font-weight: 700; }

.badge-cloud-status{
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-cloud-on{ background: #06d6a0; color: #fff; }
.badge-cloud-off{ background: #ffd166; color: #22223b; }
.badge-cloud-warn{ background: #ef476f; color: #fff; }

.stat-card{
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.stat-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  background: var(--gradient-btn);
  flex-shrink: 0;
}
.stat-value{ font-size: 1.5rem; font-weight: 700; line-height: 1; }
.stat-label{ font-size: 0.8rem; color: var(--clr-text-muted); font-weight: 500; }

.custom-progress{
  height: 22px;
  border-radius: 20px;
  background: rgba(114,9,183,0.1);
  overflow: hidden;
}
.custom-progress-bar{
  background: var(--gradient-btn);
  border-radius: 20px;
  transition: width 1s ease;
}

.custom-table{ font-size: 0.88rem; }
.custom-table thead{
  background: rgba(114,9,183,0.08);
}
.custom-table th{ font-weight: 600; white-space: nowrap; }
.sortable{ cursor: pointer; user-select: none; }
.sortable:hover{ color: var(--clr-purple); }
.badge-attend{
  background: #06d6a0; color: #fff; padding: 0.3rem 0.6rem; border-radius: 20px; font-size: 0.75rem;
}
.badge-not-attend{
  background: #ef476f; color: #fff; padding: 0.3rem 0.6rem; border-radius: 20px; font-size: 0.75rem;
}
.table-action-btn{
  border: none;
  background: rgba(67,97,238,0.1);
  color: var(--clr-blue-dark);
  width: 32px; height: 32px;
  border-radius: 8px;
  margin-right: 4px;
  transition: all var(--transition-fast);
}
.table-action-btn:hover{ background: var(--clr-blue); color: #fff; }
.table-action-btn.danger{ background: rgba(217,4,41,0.1); color: #d90429; }
.table-action-btn.danger:hover{ background: #d90429; color: #fff; }

/* ============ TOASTS ============ */
.toast{
  border-radius: var(--radius-sm);
  border: none;
  backdrop-filter: blur(10px);
}

/* ============ LOADING OVERLAY ============ */
.loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-ring{
  width: 56px; height: 56px;
  border: 5px solid rgba(67,97,238,0.2);
  border-top-color: var(--clr-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ============ CONFETTI ============ */
#confettiCanvas{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* ============ FOOTER ============ */
.app-footer{
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--glass-border);
  color: var(--clr-text-muted);
  font-size: 0.9rem;
}

.glass-modal{
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 767px){
  .form-card, .login-card, .confirmation-card{ padding: 1.5rem; }
  .stat-value{ font-size: 1.25rem; }
  .cd-box{ min-width: 54px; padding: 0.5rem 0.6rem; }
  .hero-title{ font-size: 1.9rem; }
}

@media (min-width: 768px) and (max-width: 1024px){
  .form-card{ max-width: 90%; }
}

@media (min-width: 1200px){
  .col-xl-2-4{
    flex: 0 0 auto;
    width: 20%;
  }
}

@media print{
  .glass-nav, .app-footer, #confettiCanvas, .btn, #loadingOverlay, .toast-container{ display: none !important; }
  body{ background: #fff !important; }
}