/* ═══════════════════════════════════════════════════════════════
   CHEER ACADEMY — Brand Theme
   Works in BOTH light and dark mode with proper contrast.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --cheer-primary: var(--cheer-user-primary, #6C63FF);
  --cheer-primary-dark: var(--cheer-user-primary-dark, #5A52E0);
  --cheer-primary-light: var(--cheer-user-primary-light, #8B83FF);
  --cheer-primary-glow: rgba(108, 99, 255, 0.18);
  --cheer-accent: var(--cheer-user-accent, #FF6584);
  --cheer-radius: 14px;
}


/* ═══════════════════════════════════════════
   TYPOGRAPHY — Outfit everywhere
   ═══════════════════════════════════════════ */

body,
#app,
.frappe-control,
button,
input,
select,
textarea {
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════
   SIDEBAR — Purple active pill, readable text
   ═══════════════════════════════════════════ */

/* Active sidebar link — gradient purple pill */
.bg-surface-selected {
  background: linear-gradient(135deg, var(--cheer-primary), var(--cheer-primary-light)) !important;
  box-shadow: 0 2px 10px var(--cheer-primary-glow);
}

/* White text on active pill */
.bg-surface-selected,
.bg-surface-selected span,
.bg-surface-selected svg,
.bg-surface-selected .text-ink-gray-8,
.bg-surface-selected .text-ink-gray-9 {
  color: #FFFFFF !important;
}

/* Sidebar link hover — subtle tint */
.hover\:bg-surface-gray-2:hover {
  background-color: rgba(108, 99, 255, 0.08) !important;
  border-radius: 8px;
}


/* ═══════════════════════════════════════════
   COURSE CARDS — Lifted, rounded, alive
   ═══════════════════════════════════════════ */

/* Card container */
.flex.flex-col.h-full.rounded-md.overflow-auto {
  border-radius: var(--cheer-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden !important;
}

.flex.flex-col.h-full.rounded-md.overflow-auto:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(108, 99, 255, 0.15);
}

/* Card image — larger radius */
.h-\[168px\].bg-cover {
  border-radius: var(--cheer-radius) var(--cheer-radius) 0 0 !important;
  border: none !important;
}

/* Card body — clean borders */
.border-x-2.border-b-2.rounded-b-md,
.border-x.border-b.rounded-b-md {
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 0 var(--cheer-radius) var(--cheer-radius) !important;
}

/* Progress bars — gradient */
.progress-bar,
[role="progressbar"] > div,
div[style*="background-color: var(--primary-color)"] {
  background: linear-gradient(90deg, var(--cheer-primary), var(--cheer-accent)) !important;
  border-radius: 20px !important;
}


/* ═══════════════════════════════════════════
   BUTTONS — Gradient primary
   ═══════════════════════════════════════════ */

.btn-primary,
.btn-primary-dark {
  background: linear-gradient(135deg, var(--cheer-primary), var(--cheer-primary-light)) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px var(--cheer-primary-glow);
  transition: all 0.25s ease;
  color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.35) !important;
}

.btn-primary:active {
  transform: translateY(0);
}


/* ═══════════════════════════════════════════
   SECTION HEADERS — Accent bar
   ═══════════════════════════════════════════ */

.font-semibold.text-lg {
  font-weight: 700 !important;
  position: relative;
  padding-left: 14px;
}

.font-semibold.text-lg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--cheer-primary), var(--cheer-accent));
}


/* ═══════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════ */

a:not(.btn):not([class*="bg-"]) {
  color: var(--cheer-primary);
}

a:not(.btn):not([class*="bg-"]):hover {
  color: var(--cheer-primary-dark);
}


/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.frappe-control input:focus {
  border-color: var(--cheer-primary) !important;
  box-shadow: 0 0 0 3px var(--cheer-primary-glow) !important;
}

input[type="checkbox"]:checked {
  accent-color: var(--cheer-primary);
}


/* ═══════════════════════════════════════════
   BATCH / LIVE CLASS CARDS
   ═══════════════════════════════════════════ */

.border.rounded-md {
  border-radius: var(--cheer-radius) !important;
  transition: all 0.3s ease;
}

.border.rounded-md:hover {
  box-shadow: 0 4px 20px rgba(108, 99, 255, 0.1);
}


/* ═══════════════════════════════════════════
   LOGIN PAGE — Full brand overhaul
   ═══════════════════════════════════════════ */

/* Hide the generic "Home" breadcrumb/navbar on auth pages */
body:has(.for-login) .navbar,
body:has(.for-login) header,
body:has(.for-login) .web-footer,
body:has(.for-login) footer {
  display: none !important;
}

/* Page background */
.for-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* Light mode background */
body:not(.dark) .for-login {
  background: linear-gradient(160deg, #F0EEFF 0%, #FFF0F3 50%, #FFFBF0 100%) !important;
}

/* Decorative blobs */
.for-login::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,99,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.for-login::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,101,132,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Hide the default Frappe logo */
.for-login .page-card-head .app-logo {
  display: none !important;
}

/* Add our brand icon before the heading */
.for-login .page-card-head {
  text-align: center;
  padding: 40px 32px 20px !important;
  position: relative;
}

.for-login .page-card-head::before {
  content: '';
  display: block;
  width: 160px;
  height: 120px;
  margin: 0 auto 16px;
  background: url('/files/elevate-cheer-logo.png') center/contain no-repeat;
}

.for-login .page-card-head h4 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: #1a1a2e !important;
  margin: 0;
}

/* Card styling */
.for-login .page-card {
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
  overflow: visible !important;
  max-width: 420px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Gradient accent line at top */
.for-login .page-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cheer-primary), var(--cheer-accent));
  border-radius: 24px 24px 0 0;
}

/* Form body */
.for-login .page-card-body {
  padding: 8px 32px 16px !important;
}

/* Input wrappers with icon */
.for-login .email-field,
.for-login .password-field {
  position: relative;
}

/* Input fields — leave room for the icon on the left */
.for-login .form-control {
  border-radius: 12px !important;
  border: 2px solid #E5E7EB !important;
  padding: 12px 16px 12px 44px !important;
  font-size: 15px !important;
  font-family: 'Outfit', sans-serif !important;
  background: #FAFBFC !important;
  transition: all 0.2s ease;
  height: auto !important;
  width: 100%;
}

/* Position the field icon properly inside the input */
.for-login .field-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  pointer-events: none;
  margin: 0 !important;
}

.for-login .field-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Show/hide password toggle — align right */
.for-login .password-field .toggle-password {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%);
  font-size: 13px !important;
  color: var(--cheer-primary) !important;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  padding: 4px 8px;
  border-radius: 6px;
}

.for-login .password-field .toggle-password:hover {
  background: rgba(108,99,255,0.08);
}

.for-login .form-control:focus {
  border-color: var(--cheer-primary) !important;
  box-shadow: 0 0 0 3px rgba(108,99,255,0.12) !important;
  background: white !important;
}

.for-login .form-control::placeholder {
  color: #B0B0C0;
}

/* Form labels */
.for-login .form-group {
  margin-bottom: 16px !important;
}

/* Field icons */
.for-login .field-icon {
  top: 14px !important;
}

/* Forgot password link */
.for-login .forgot-password-message {
  margin-top: -4px !important;
  margin-bottom: 8px !important;
}

.for-login .forgot-password-message a {
  color: var(--cheer-primary) !important;
  font-weight: 500;
  font-size: 13px;
}

/* Action buttons area */
.for-login .page-card-actions {
  padding: 8px 32px 32px !important;
}

/* Login / Signup button */
.for-login .btn-login,
.for-login .btn-register {
  border-radius: 12px !important;
  padding: 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, var(--cheer-primary), var(--cheer-primary-light, #8B83FF)) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(108,99,255,0.3);
  transition: all 0.25s ease;
}

.for-login .btn-login:hover,
.for-login .btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(108,99,255,0.4) !important;
}

/* Sign up / login toggle message */
.for-login .sign-up-message {
  text-align: center;
  padding: 20px 0 0;
  font-size: 15px;
  color: #6b6b80;
  position: relative;
  z-index: 1;
}

.for-login .sign-up-message a {
  color: var(--cheer-primary) !important;
  font-weight: 700;
}

/* Social login divider */
.for-login .login-divider {
  color: #B0B0C0 !important;
  font-size: 13px;
  margin: 16px 0 !important;
}

/* Social login buttons */
.for-login .btn-login-option {
  border-radius: 12px !important;
  border: 2px solid #E5E7EB !important;
  padding: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

.for-login .btn-login-option:hover {
  border-color: var(--cheer-primary) !important;
  color: var(--cheer-primary) !important;
}

/* Password toggle */
.for-login .toggle-password {
  font-size: 13px !important;
  color: var(--cheer-primary) !important;
  font-weight: 500;
}

/* Dark mode login */
html.dark .for-login,
[data-theme="dark"] .for-login {
  background: linear-gradient(160deg, #0F0F18 0%, #1A1024 50%, #15130F 100%) !important;
}

html.dark .for-login .page-card,
[data-theme="dark"] .for-login .page-card {
  background: #1A1A28 !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.4) !important;
}

html.dark .for-login .page-card-head h4,
[data-theme="dark"] .for-login .page-card-head h4 {
  color: #F3F4F6 !important;
}

html.dark .for-login .form-control,
[data-theme="dark"] .for-login .form-control {
  background: #222235 !important;
  border-color: #333348 !important;
  color: #E5E7EB !important;
}

html.dark .for-login .sign-up-message,
[data-theme="dark"] .for-login .sign-up-message {
  color: #9CA3AF !important;
}

html.dark .for-login .forgot-password-message a,
[data-theme="dark"] .for-login .forgot-password-message a {
  color: #A8A2FF !important;
}


/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(108, 99, 255, 0.2);
  border-radius: 10px;
}


/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */

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

.grid > * {
  animation: fadeInUp 0.35s ease-out both;
}
.grid > *:nth-child(1) { animation-delay: 0s; }
.grid > *:nth-child(2) { animation-delay: 0.06s; }
.grid > *:nth-child(3) { animation-delay: 0.12s; }
.grid > *:nth-child(4) { animation-delay: 0.18s; }


/* ═══════════════════════════════════════════
   TIER BADGES
   ═══════════════════════════════════════════ */

.tier-basic {
  background: linear-gradient(135deg, #DCFCE7, #D1FAE5);
  color: #065F46;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}

.tier-pro {
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
  color: #5B21B6;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}

.tier-elite {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}


/* ═══════════════════════════════════════════
   DARK MODE — Proper contrast fixes
   ═══════════════════════════════════════════ */

/* (dark mode login styles are in the login section above) */

/* Dark mode via Frappe's class-based system */
html.dark .bg-surface-menu-bar,
html[data-theme="dark"] .bg-surface-menu-bar {
  border-right-color: rgba(108, 99, 255, 0.1) !important;
}

/* Keep card text readable in dark mode */
html.dark .flex.flex-col.h-full.rounded-md.overflow-auto,
html[data-theme="dark"] .flex.flex-col.h-full.rounded-md.overflow-auto {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.15);
}

html.dark .flex.flex-col.h-full.rounded-md.overflow-auto:hover,
html[data-theme="dark"] .flex.flex-col.h-full.rounded-md.overflow-auto:hover {
  box-shadow: 0 8px 30px rgba(108, 99, 255, 0.2);
}


/* ═══════════════════════════════════════════
   FOCUS / A11Y
   ═══════════════════════════════════════════ */

*:focus-visible {
  outline: 2px solid var(--cheer-primary);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════
   SMOOTH TRANSITIONS
   ═══════════════════════════════════════════ */

.btn, a, button, input, .badge {
  transition: all 0.2s ease;
}