/* ============================================================
   Global Dark Mode Styles
   ============================================================ */

html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

/* Sections & Cards */
html.dark section,
html.dark .bg-white,
html.dark [class*="bg-white"] {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark .bg-\[\#F5F7FF\],
html.dark .bg-\[\#F8F9FF\],
html.dark .bg-\[\#FAFAFC\],
html.dark .bg-\[\#f4f6ff\],
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: #0f172a !important;
}

/* Text */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
    color: #f1f5f9 !important;
}

html.dark p, html.dark span, html.dark li,
html.dark a:not([class*="bg-"]):not([class*="text-white"]) {
    color: #cbd5e1;
}

html.dark .text-\[\#000000\],
html.dark .text-\[\#1A1A2E\],
html.dark .text-dark-1,
html.dark .text-dark-2 {
    color: #e2e8f0 !important;
}

/* Navbar pill */
html.dark .hidden.lg\:flex.items-center.gap-12 {
    background-color: #1e293b !important;
}

html.dark nav {
    /* background-color: #0f172a !important; */
}

/* Borders */
html.dark .border-\[\#CCCCCC\],
html.dark .border-light-1,
html.dark .border-gray-200 {
    border-color: #334155 !important;
}

/* Cards / feature boxes */
html.dark .rounded-2xl:not(.no-dark-bg),
html.dark .rounded-xl:not(.no-dark-bg),
html.dark .rounded-3xl:not(.no-dark-bg) {
    background-color: #1e293b;
}

/* Preserve original background in dark mode */
html.dark .no-dark-bg {
    background-color: unset !important;
}

/* Inputs */
html.dark input, html.dark textarea, html.dark select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* Top info bar stays dark-blue */
html.dark .bg-\[\#0F1F5C\] {
    background-color: #0a0f1e !important;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar { background: #1e293b; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* Corner border decoration */
html.dark .dark-corner-border {
    border-color: #1e293b !important;
}

/* Carousel dots — white outline in dark mode */
html.dark .carousel-dot {
    background-color: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
}
html.dark .carousel-dot.bg-\[#F2702C\],
html.dark .carousel-dot[class*="bg-[#F2702C]"] {
    background-color: white !important;
    border: 1.5px solid white !important;
}

/* ============================================================
   Home Page — single gradient background in dark mode
   ============================================================ */

/* The gradient lives on the <main> wrapper */
html.dark .home-main {
    background: linear-gradient(160deg, #080d24 0%, #16063a 35%, #0e1f3d 65%, #080d24 100%);
}

/* All direct-child sections become transparent so gradient shows through */
html.dark .home-main > section {
    background-color: transparent !important;
}

/* Remove background images on non-hero sections */
html.dark .home-main > section:not(.hero-banner) {
    background-image: none !important;
}

/* ============================================================
   Student Pages — same gradient background (light + dark)
   ============================================================ */

/* Light mode gradient */
.student-main {
    background: linear-gradient(160deg, #eef2ff 0%, #f5f0ff 35%, #edf5ff 65%, #eef2ff 100%);
}

/* Dark mode — identical to home page */
html.dark .student-main {
    background: linear-gradient(160deg, #080d24 0%, #16063a 35%, #0e1f3d 65%, #080d24 100%);
}

/* All sections transparent so gradient shows through */
.student-main > section,
html.dark .student-main > section {
    background-color: transparent !important;
}

/* dark-hide-gradient: already handled above; neutralise any leftover ::before */
html.dark .home-main > section.dark-hide-gradient::before {
    display: none;
}

/* Hero banner keeps its overlay on top of the background image */
html.dark .hero-banner {
    position: relative;
}
html.dark .hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 15, 40, 0.75) 0%, rgba(75, 32, 128, 0.5) 50%, rgba(10, 15, 40, 0.75) 100%);
    z-index: 1;
    pointer-events: none;
}
html.dark .hero-banner > * {
    position: relative;
    z-index: 2;
}

/* Glass card — transparent bg + white border in dark mode */
html.dark .dark-glass-card {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
}

/* Icon circles — white icon in dark mode */
html.dark .bg-\[\#3355FF33\] img {
    filter: brightness(0) invert(1);
}

/* Badge/pill sections */
html.dark .border-\[\#24306D33\] {
    border-color: rgba(255, 255, 255, 0.5) !important;
}
html.dark .bg-\[\#24316C1A\] {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .border-\[\#24306D33\] *,
html.dark .border-\[\#24306D33\] {
    color: #ffffff !important;
}
html.dark .border-\[\#24306D33\] img {
    filter: brightness(0) invert(1);
}

/* Feature card icons — white in dark mode */
html.dark .feature-icon img {
    filter: brightness(0) invert(1);
}

/* Preserve coloured label/tag text in dark mode */
html.dark .text-\[\#DB2777\] { color: #DB2777 !important; }
html.dark .text-\[\#D97706\] { color: #D97706 !important; }
html.dark .text-\[\#0D9488\] { color: #0D9488 !important; }
html.dark .text-\[\#2350B2\] { color: #2350B2 !important; }
html.dark .text-dark-2    { color: #6B7588  !important; }

/* My Goals card — transparent in dark mode */
html.dark .bg-\[\#3355FF0D\] {
    background-color: transparent !important;
}

/* Pending task icons — light white in dark mode */
html.dark .task-pending svg path {
    fill: rgba(255, 255, 255, 0.5) !important;
}
html.dark .task-pending svg {
    opacity: 0.6;
}

/* ============================================================
   Soft Mode — Warm, easy-on-eyes palette
   ============================================================ */

html.soft body {
    background-color: #FAF7F2;
    color: #3D2C1E;
}

html.soft section,
html.soft .bg-white,
html.soft [class*="bg-white"] {
    background-color: #fffdfb !important;
    color: #3D2C1E !important;
}

html.soft .bg-\[\#F5F7FF\],
html.soft .bg-\[\#F8F9FF\],
html.soft .bg-\[\#FAFAFC\],
html.soft .bg-\[\#f4f6ff\],
html.soft .bg-gray-50,
html.soft .bg-gray-100 {
    background-color: #F5EEE5 !important;
}

html.soft h1, html.soft h2, html.soft h3,
html.soft h4, html.soft h5, html.soft h6 {
    color: #1E1408 !important;
}

html.soft p, html.soft span, html.soft li,
html.soft a:not([class*="bg-"]):not([class*="text-white"]) {
    color: #4A3B2A;
}

html.soft nav {
    background-color: #fffdfb !important;
}

html.soft .border-\[\#CCCCCC\],
html.soft .border-light-1,
html.soft .border-gray-200,
html.soft .border-\[\#DDE5E9\] {
    border-color: #E8DDD0 !important;
}

html.soft .rounded-2xl:not(.no-dark-bg),
html.soft .rounded-xl:not(.no-dark-bg),
html.soft .rounded-3xl:not(.no-dark-bg) {
    background-color: #fffdfb;
}

html.soft .no-dark-bg {
    background-color: unset !important;
}

html.soft input, html.soft textarea, html.soft select {
    background-color: #fffdfb !important;
    color: #3D2C1E !important;
    border-color: #E8DDD0 !important;
}

/* Top info bar stays brand-coloured */
html.soft .bg-\[\#0F1F5C\] {
    background-color: #1a2456 !important;
}

/* Scrollbar */
html.soft ::-webkit-scrollbar { background: #FAF7F2; }
html.soft ::-webkit-scrollbar-thumb { background: #D9CBB8; border-radius: 4px; }

/* Student pages gradient — warm cream */
html.soft .student-main {
    background: linear-gradient(160deg, #fef9f2 0%, #fdf4e8 35%, #faf0e0 65%, #fef9f2 100%);
}

html.soft .student-main > section {
    background-color: transparent !important;
}

/* Footer — preserve white text in soft mode */
html.soft footer,
html.soft footer h4,
html.soft footer p,
html.soft footer span,
html.soft footer li,
html.soft footer a {
    color: #ffffff !important;
}
html.soft footer .text-\[\#CCCCCC\] {
    color: rgba(255,255,255,0.7) !important;
}
html.soft .bg-\[\#0A133F\] p,
html.soft .bg-\[\#0A133F\] strong {
    color: #ffffff !important;
}

/* Home page soft mode */
html.soft .home-main {
    background: linear-gradient(160deg, #fef9f2 0%, #fdf4e8 35%, #faf0e0 65%, #fef9f2 100%);
}

html.soft .home-main > section {
    background-color: transparent !important;
}