/* --- BASE & LANDING PAGE STYLES --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f4f8;
}
.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-primary {
    background-color: #14a3a3;
    color: white;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #0d7d7d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-secondary {
    background-color: transparent;
    border: 2px solid #fff;
    color: white;
     transition: all 0.3s ease;
}
 .btn-secondary:hover {
    background-color: white;
    color: #14a3a3;
}
.card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.dashboard-card {
    transition: all 0.3s ease;
}
.dashboard-card:hover {
     transform: scale(1.03);
     box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* --- NEW DASHBOARD STYLES --- */
#sidebar {
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    margin: 0.25rem 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-link:hover { background-color: #4a5568; }
.nav-link.active { background-color: #14a3a3; color: white; font-weight: 600; }
#dashboard-content { 
    background-color: #f0f4f8; 
    min-height: 100vh;
}

#dashboard-content .page {
    padding-top: 2rem; /* This is equivalent to pt-20 */
}

body.sidebar-open #sidebar { transform: translateX(0); }
@media (min-width: 1024px) { #hamburger-btn { display: none; } }
@media (max-width: 1023px) { #dashboard-content { margin-left: 0; } }

/* Project Grid */
.project-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    cursor: pointer;
    transition: all 0.3s ease;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.project-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.project-card-title {
    padding: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* Voice Search Button */
#mic-btn.listening {
    animation: pulse 1.5s infinite;
    background-color: #ef4444; /* red-500 */
    color: white;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* For embedded videos */
.aspect-w-16 { position: relative; padding-bottom: 56.25%; }
.aspect-h-9 { height: 0; }
.aspect-w-16 > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Certificate */
.font-cursive {
    font-family: 'Cedarville Cursive', cursive;
}


/* --- Custom Scrollbar for Sidebar --- */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1f2937; /* A dark color to match the sidebar background */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* A slightly lighter gray for the handle */
  border-radius: 4px;      /* Rounded corners for the handle */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* An even lighter gray for when you hover over it */
}

/* Styles for Firefox browser */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #1f2937;
}

.project-card.gemini-idea {
    position: relative;
    border: 2px solid #e91e63; /* Pink accent to match the CurioKids brand */
}

.gemini-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #e91e63;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.project-card {
    position: relative;
    overflow: hidden; /* Ensures the badge corners look nice */
}

.project-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 9999px; /* pill shape */
    color: white;
    font-size: 0.75rem; /* 12px */
    font-weight: bold;
    z-index: 10;
}

/* Styles for Collapsible Sidebar */
body.sidebar-collapsed #sidebar {
    width: 80px;
}

body.sidebar-collapsed #sidebar .sidebar-text,
body.sidebar-collapsed #sidebar .text-xs,
body.sidebar-collapsed #sidebar .nav-link span:last-child {
    display: none;
}

body.sidebar-collapsed #dashboard-content {
    margin-left: 80px;
}

/* Smooth transitions */
#sidebar, #dashboard-content {
    transition: all 0.3s ease-in-out;
}

.modal-scroll-area {
    max-height: 80vh; /* Limits height to 80% of the screen height */
    overflow-y: auto;  /* Adds a vertical scrollbar only if content is too long */
    padding-right: 10px; /* Prevents the scrollbar from overlapping text */
}

.modal-content-wrapper {
    max-height: 90vh; /* Limits height to 90% of the viewport */
    overflow-y: auto;  /* Enables vertical scrolling */
    scrollbar-width: thin; /* For Firefox */
}

/* Optional: Custom scrollbar for a cleaner look in Chrome/Safari */
.modal-content-wrapper::-webkit-scrollbar {
    width: 6px;
}
.modal-content-wrapper::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 10px;
}

/* style.css */

.hero-gradient {
    /* Teal-to-dark-teal, matching the CurioKids logo. Solid fallback + gradient. */
    background-color: #14a3a3;
    background: linear-gradient(135deg, #14a3a3 0%, #0f5757 100%) !important;
    min-height: 400px;
}

/* Ensure the text inside the hero is always white */
#landing-page-content section.hero-gradient h1,
#landing-page-content section.hero-gradient p {
    color: white !important;
}


/* =====================================================================
   CurioKids Brand Palette Overrides
   =====================================================================
   Redefines Tailwind's indigo/purple utilities so the site theme aligns
   with the CurioKids logo (teal primary, pink accent, yellow highlight).
   Kept at the END of style.css so these rules win by cascade order.

   Palette:
     Teal   #14a3a3  (primary — buttons, links, active states)
     Teal dk #0d7d7d (hover)
     Pink   #e91e63  (secondary CTAs, badges, destructive)
     Pink dk #c2185b (hover)
     Yellow #F5C518  (highlights only — badges, streaks)
     ===================================================================== */

/* Primary indigo → teal */
.bg-indigo-50   { background-color: #e0f5f5 !important; }
.bg-indigo-100  { background-color: #b8e6e6 !important; }
.bg-indigo-200  { background-color: #90d6d6 !important; }
.bg-indigo-500  { background-color: #14a3a3 !important; }
.bg-indigo-600  { background-color: #14a3a3 !important; }
.bg-indigo-700  { background-color: #0d7d7d !important; }
.bg-indigo-800  { background-color: #0f5757 !important; }
.bg-indigo-900  { background-color: #0a3f3f !important; }

.hover\:bg-indigo-500:hover { background-color: #14a3a3 !important; }
.hover\:bg-indigo-600:hover { background-color: #14a3a3 !important; }
.hover\:bg-indigo-700:hover { background-color: #0d7d7d !important; }
.hover\:bg-indigo-800:hover { background-color: #0f5757 !important; }

.text-indigo-100 { color: #b8e6e6 !important; }
.text-indigo-200 { color: #90d6d6 !important; }
.text-indigo-500 { color: #14a3a3 !important; }
.text-indigo-600 { color: #14a3a3 !important; }
.text-indigo-700 { color: #0d7d7d !important; }
.text-indigo-800 { color: #0f5757 !important; }

.hover\:text-indigo-500:hover { color: #14a3a3 !important; }
.hover\:text-indigo-600:hover { color: #14a3a3 !important; }
.hover\:text-indigo-700:hover { color: #0d7d7d !important; }
.hover\:text-indigo-800:hover { color: #0f5757 !important; }

.border-indigo-200 { border-color: #90d6d6 !important; }
.border-indigo-300 { border-color: #5cc4c4 !important; }
.border-indigo-400 { border-color: #2fb3b3 !important; }
.border-indigo-500 { border-color: #14a3a3 !important; }
.border-indigo-600 { border-color: #14a3a3 !important; }

.hover\:border-indigo-400:hover { border-color: #2fb3b3 !important; }
.hover\:border-indigo-500:hover { border-color: #14a3a3 !important; }

.ring-indigo-500 { --tw-ring-color: #14a3a3 !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: #14a3a3 !important; }
.focus\:border-indigo-500:focus { border-color: #14a3a3 !important; }

/* Purple → pink (for AI-generated gradients and accents) */
.bg-purple-100 { background-color: #fce4ec !important; }
.bg-purple-500 { background-color: #e91e63 !important; }
.bg-purple-600 { background-color: #e91e63 !important; }
.bg-purple-700 { background-color: #c2185b !important; }

.text-purple-500 { color: #e91e63 !important; }
.text-purple-600 { color: #e91e63 !important; }
.text-purple-700 { color: #c2185b !important; }

.hover\:bg-purple-600:hover { background-color: #e91e63 !important; }
.hover\:bg-purple-700:hover { background-color: #c2185b !important; }

/* AI-generated gradients: purple→indigo becomes pink→yellow (playful, on-brand).
   Tailwind uses CSS custom properties for gradient stops; overriding them
   here re-colors any element using from-purple-600 / to-indigo-600 etc. */
.from-purple-600 { --tw-gradient-from: #e91e63 !important;
                   --tw-gradient-to: rgba(233, 30, 99, 0) !important;
                   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-indigo-600   { --tw-gradient-to: #F5C518 !important; }
.from-indigo-500 { --tw-gradient-from: #14a3a3 !important;
                   --tw-gradient-to: rgba(20, 163, 163, 0) !important;
                   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-indigo-600 { --tw-gradient-from: #14a3a3 !important;
                   --tw-gradient-to: rgba(20, 163, 163, 0) !important;
                   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-purple-600   { --tw-gradient-to: #e91e63 !important; }

/* Landing page sign-up button (currently uses .bg-indigo-600 utilities) —
   the overrides above cover it. Signature CTA hover shadow adds warmth. */
button.bg-indigo-600:hover,
a.bg-indigo-600:hover {
    box-shadow: 0 4px 12px rgba(20, 163, 163, 0.3);
}

/* -----------------------------------------------------------------
   Teal gradient fixes for static info pages (About, Contact, etc.)
   These pages use Tailwind teal-* utilities that can fade to
   near-white — making overlaid WHITE headings and paragraphs
   unreadable. We darken the "light" end of the teal ramp so any
   teal→light gradient stays contrast-safe for white text.
   ----------------------------------------------------------------- */
.bg-teal-50   { background-color: #ccebeb !important; }
.bg-teal-100  { background-color: #a3d9d9 !important; }
.bg-teal-200  { background-color: #7ac8c8 !important; }
.bg-teal-300  { background-color: #5cc4c4 !important; }
.bg-teal-400  { background-color: #2fb3b3 !important; }
.bg-teal-500  { background-color: #14a3a3 !important; }
.bg-teal-600  { background-color: #0d7d7d !important; }
.bg-teal-700  { background-color: #0f5757 !important; }
.bg-teal-800  { background-color: #0a3f3f !important; }

.text-teal-500 { color: #14a3a3 !important; }
.text-teal-600 { color: #14a3a3 !important; }
.text-teal-700 { color: #0d7d7d !important; }

/* Gradient stops (Tailwind uses CSS custom properties for these).
   Redefine the light end of the teal ramp so no teal gradient fades
   past ~#7ac8c8 — enough contrast for white text on top. */
.from-teal-50    { --tw-gradient-from: #ccebeb !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(204,235,235,0)) !important; }
.from-teal-100   { --tw-gradient-from: #a3d9d9 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(163,217,217,0)) !important; }
.from-teal-200   { --tw-gradient-from: #7ac8c8 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(122,200,200,0)) !important; }
.from-teal-400   { --tw-gradient-from: #2fb3b3 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(47,179,179,0)) !important; }
.from-teal-500   { --tw-gradient-from: #14a3a3 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20,163,163,0)) !important; }
.from-teal-600   { --tw-gradient-from: #0d7d7d !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(13,125,125,0)) !important; }

.via-teal-100   { --tw-gradient-stops: var(--tw-gradient-from), #a3d9d9, var(--tw-gradient-to, rgba(163,217,217,0)) !important; }
.via-teal-200   { --tw-gradient-stops: var(--tw-gradient-from), #7ac8c8, var(--tw-gradient-to, rgba(122,200,200,0)) !important; }
.via-teal-300   { --tw-gradient-stops: var(--tw-gradient-from), #5cc4c4, var(--tw-gradient-to, rgba(92,196,196,0)) !important; }
.via-teal-400   { --tw-gradient-stops: var(--tw-gradient-from), #2fb3b3, var(--tw-gradient-to, rgba(47,179,179,0)) !important; }

/* Keep the "to" stop dark enough for legibility. */
.to-teal-100   { --tw-gradient-to: #7ac8c8 !important; }
.to-teal-200   { --tw-gradient-to: #7ac8c8 !important; }
.to-teal-300   { --tw-gradient-to: #5cc4c4 !important; }
.to-teal-400   { --tw-gradient-to: #2fb3b3 !important; }
.to-teal-500   { --tw-gradient-to: #14a3a3 !important; }
.to-teal-600   { --tw-gradient-to: #0d7d7d !important; }
.to-cyan-100   { --tw-gradient-to: #7ac8c8 !important; }
.to-cyan-200   { --tw-gradient-to: #7ac8c8 !important; }
.to-cyan-300   { --tw-gradient-to: #5cc4c4 !important; }

/* Any element that STARTS with a teal-tinted gradient must NOT end at near-white,
   or white text overlaid on it becomes unreadable. Force the "to" end to a
   medium teal any time from-teal-* is combined with a light "to". This uses
   the presence of both classes on the same element, so unrelated gradients
   (e.g. red→white on some future button) are untouched. */
[class*="from-teal-"].to-white,
[class*="from-teal-"].to-gray-50,
[class*="from-teal-"].to-gray-100,
[class*="from-teal-"].to-gray-200,
[class*="from-teal-"].to-neutral-50,
[class*="from-teal-"].to-neutral-100,
[class*="from-teal-"].to-slate-50,
[class*="from-teal-"].to-slate-100,
[class*="from-teal-"].to-cyan-50,
[class*="from-teal-"].to-cyan-100 {
    --tw-gradient-to: #7ac8c8 !important;
}

/* Also cover the reverse: a light "from" going TO a teal end still needs
   the light end darkened for text on either side. */
.from-white[class*="to-teal-"],
.from-gray-50[class*="to-teal-"],
.from-gray-100[class*="to-teal-"] {
    --tw-gradient-from: #7ac8c8 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(122, 200, 200, 0)) !important;
}

/* Broad safety net: any element that STARTS with a teal gradient AND
   contains white text somewhere inside — force the gradient's "to" end
   to solid medium teal so the white stays legible. This catches static
   pages whose exact class combos I can't inspect. The teal-start scope
   means non-teal gradients (e.g. red→orange) are completely untouched.
   :has() is widely supported in modern browsers 2023+; the earlier
   scoped rules above handle any older browser as a fallback. */
[class*="from-teal-"]:has(.text-white),
[class*="from-teal-"].text-white {
    --tw-gradient-to: #7ac8c8 !important;
}