/* ==========================================================================
   HomeworkHero - Kid-Friendly Monthly Themes System
   Scoped to student & parent views via body.theme-<theme_id>
   Preserves the teacher/admin console workspace intact.
   ========================================================================== */

/* ----------------- Holiday / Winter Animations ----------------- */
@keyframes twinkle-glow {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ----------------- Admin Settings Theme Picker Styles ----------------- */
.theme-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.theme-card:hover {
    border-color: #c084fc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.08);
}
.theme-card.active {
    border-color: #9333ea;
    background: #faf5ff;
    box-shadow: 0 0 0 1px #9333ea;
}
.theme-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1);
}

/* ----------------- Seasonal Subtle Accent Floating Badges ----------------- */
.theme-edition-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: var(--theme-badge-bg, rgba(255, 255, 255, 0.9));
    color: var(--theme-badge-text, var(--primary));
    border: 1.5px solid var(--primary-light, #e0e7ff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}
.theme-edition-pill:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.theme-edition-pill .theme-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Base portal body transitions */
body.theme-portal {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ==========================================================================
   1. JANUARY - WINTER WONDERLAND (❄️ Frosty Ice & Cool Blues)
   ========================================================================== */
body.theme-winter {
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-light: #e0f2fe;
    --secondary: #38bdf8;
    --bg-main: #f0f9ff;
    --bg-card: #ffffff;
    --text-main: #0c4a6e;
    --theme-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
    --theme-badge-bg: #e0f2fe;
    --theme-badge-text: #0369a1;
}
body.theme-winter .app-header {
    border-bottom: 2px solid #bae6fd;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-winter .kd {
    --purple: #0284c7;
    --pink: #38bdf8;
    --ink: #0c4a6e;
    --paper: #ffffff;
}
body.theme-winter .pp {
    --pp-green: #0284c7;
    --pp-green-dark: #0369a1;
    --pp-teal: #0284c7;
    --pp-soft: #f0f9ff;
}

/* ==========================================================================
   2. FEBRUARY - SWEET KINDNESS (💖 Candy Rose, Berry Pink & Hearts)
   ========================================================================== */
body.theme-kindness {
    --primary: #db2777;
    --primary-hover: #be185d;
    --primary-light: #fce7f3;
    --secondary: #f43f5e;
    --bg-main: #fff1f2;
    --bg-card: #ffffff;
    --text-main: #831843;
    --theme-gradient: linear-gradient(135deg, #f472b6 0%, #fb7185 100%);
    --theme-badge-bg: #fce7f3;
    --theme-badge-text: #be185d;
}
body.theme-kindness .app-header {
    border-bottom: 2px solid #fbcfe8;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-kindness .kd {
    --purple: #db2777;
    --pink: #f43f5e;
    --ink: #831843;
    --paper: #ffffff;
}
body.theme-kindness .pp {
    --pp-green: #db2777;
    --pp-green-dark: #9d174d;
    --pp-teal: #f43f5e;
    --pp-soft: #fff1f2;
}

/* ==========================================================================
   3. MARCH - LUCKY SPROUTS (🍀 Meadow Green & Sunshine Yellow)
   ========================================================================== */
body.theme-spring {
    --primary: #16a34a;
    --primary-hover: #15803d;
    --primary-light: #dcfce7;
    --secondary: #eab308;
    --bg-main: #f0fdf4;
    --bg-card: #ffffff;
    --text-main: #14532d;
    --theme-gradient: linear-gradient(135deg, #4ade80 0%, #facc15 100%);
    --theme-badge-bg: #dcfce7;
    --theme-badge-text: #15803d;
}
body.theme-spring .app-header {
    border-bottom: 2px solid #bbf7d0;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-spring .kd {
    --purple: #16a34a;
    --pink: #eab308;
    --ink: #14532d;
    --paper: #ffffff;
}
body.theme-spring .pp {
    --pp-green: #16a34a;
    --pp-green-dark: #14532d;
    --pp-teal: #059669;
    --pp-soft: #f0fdf4;
}

/* ==========================================================================
   4. APRIL - SPRING BLOSSOM (🌸 Lilac, Raindrops & Cherry Blossoms)
   ========================================================================== */
body.theme-blossom {
    --primary: #9333ea;
    --primary-hover: #7e22ce;
    --primary-light: #f3e8ff;
    --secondary: #ec4899;
    --bg-main: #faf5ff;
    --bg-card: #ffffff;
    --text-main: #581c87;
    --theme-gradient: linear-gradient(135deg, #c084fc 0%, #f472b6 100%);
    --theme-badge-bg: #f3e8ff;
    --theme-badge-text: #7e22ce;
}
body.theme-blossom .app-header {
    border-bottom: 2px solid #e9d5ff;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-blossom .kd {
    --purple: #9333ea;
    --pink: #ec4899;
    --ink: #581c87;
    --paper: #ffffff;
}
body.theme-blossom .pp {
    --pp-green: #9333ea;
    --pp-green-dark: #6b21a8;
    --pp-teal: #a855f7;
    --pp-soft: #faf5ff;
}

/* ==========================================================================
   5. MAY - SUNNY SAFARI (🌻 Sunflower Amber & Wild Explorers)
   ========================================================================== */
body.theme-safari {
    --primary: #d97706;
    --primary-hover: #b45309;
    --primary-light: #fef3c7;
    --secondary: #84cc16;
    --bg-main: #fffbeb;
    --bg-card: #ffffff;
    --text-main: #78350f;
    --theme-gradient: linear-gradient(135deg, #fbbf24 0%, #a3e635 100%);
    --theme-badge-bg: #fef3c7;
    --theme-badge-text: #b45309;
}
body.theme-safari .app-header {
    border-bottom: 2px solid #fde68a;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-safari .kd {
    --purple: #d97706;
    --pink: #84cc16;
    --ink: #78350f;
    --paper: #ffffff;
}
body.theme-safari .pp {
    --pp-green: #d97706;
    --pp-green-dark: #92400e;
    --pp-teal: #65a30d;
    --pp-soft: #fffbeb;
}

/* ==========================================================================
   6. JUNE - OCEAN EXPLORER (🌊 Aquamarine, Coral Reef & Sea Adventure)
   ========================================================================== */
body.theme-ocean {
    --primary: #0891b2;
    --primary-hover: #0e7490;
    --primary-light: #cffafe;
    --secondary: #f43f5e;
    --bg-main: #ecfeff;
    --bg-card: #ffffff;
    --text-main: #164e63;
    --theme-gradient: linear-gradient(135deg, #06b6d4 0%, #38bdf8 100%);
    --theme-badge-bg: #cffafe;
    --theme-badge-text: #0e7490;
}
body.theme-ocean .app-header {
    border-bottom: 2px solid #a5f3fc;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-ocean .kd {
    --purple: #0891b2;
    --pink: #f43f5e;
    --ink: #164e63;
    --paper: #ffffff;
}
body.theme-ocean .pp {
    --pp-green: #0891b2;
    --pp-green-dark: #155e75;
    --pp-teal: #06b6d4;
    --pp-soft: #ecfeff;
}

/* ==========================================================================
   7. JULY - SUMMER SUNSHINE (☀️ Radiant Golden Sun & Beach Wave)
   ========================================================================== */
body.theme-sunshine {
    --primary: #ea580c;
    --primary-hover: #c2410c;
    --primary-light: #ffedd5;
    --secondary: #eab308;
    --bg-main: #fff7ed;
    --bg-card: #ffffff;
    --text-main: #7c2d12;
    --theme-gradient: linear-gradient(135deg, #fb923c 0%, #facc15 100%);
    --theme-badge-bg: #ffedd5;
    --theme-badge-text: #c2410c;
}
body.theme-sunshine .app-header {
    border-bottom: 2px solid #fed7aa;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-sunshine .kd {
    --purple: #ea580c;
    --pink: #eab308;
    --ink: #7c2d12;
    --paper: #ffffff;
}
body.theme-sunshine .pp {
    --pp-green: #ea580c;
    --pp-green-dark: #9a3412;
    --pp-teal: #f97316;
    --pp-soft: #fff7ed;
}

/* ==========================================================================
   8. AUGUST - JUNGLE QUEST (🏕️ Rainforest Emerald & Campfire Gold)
   ========================================================================== */
body.theme-camping {
    --primary: #0f766e;
    --primary-hover: #115e59;
    --primary-light: #ccfbf1;
    --secondary: #f59e0b;
    --bg-main: #f0fdfa;
    --bg-card: #ffffff;
    --text-main: #134e4a;
    --theme-gradient: linear-gradient(135deg, #14b8a6 0%, #f59e0b 100%);
    --theme-badge-bg: #ccfbf1;
    --theme-badge-text: #0f766e;
}
body.theme-camping .app-header {
    border-bottom: 2px solid #99f6e4;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-camping .kd {
    --purple: #0f766e;
    --pink: #f59e0b;
    --ink: #134e4a;
    --paper: #ffffff;
}
body.theme-camping .pp {
    --pp-green: #0f766e;
    --pp-green-dark: #134e4a;
    --pp-teal: #0d9488;
    --pp-soft: #f0fdfa;
}

/* ==========================================================================
   9. SEPTEMBER - COSMIC SPACE (🚀 Cosmic Indigo, Starlight & Neon Cyan)
   ========================================================================== */
body.theme-space {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #e0e7ff;
    --secondary: #06b6d4;
    --bg-main: #f5f3ff;
    --bg-card: #ffffff;
    --text-main: #312e81;
    --theme-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --theme-badge-bg: #e0e7ff;
    --theme-badge-text: #4338ca;
}
body.theme-space .app-header {
    border-bottom: 2px solid #c7d2fe;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-space .kd {
    --purple: #4f46e5;
    --pink: #06b6d4;
    --ink: #312e81;
    --paper: #ffffff;
}
body.theme-space .pp {
    --pp-green: #4f46e5;
    --pp-green-dark: #3730a3;
    --pp-teal: #6366f1;
    --pp-soft: #f5f3ff;
}

/* ==========================================================================
   10. OCTOBER - AUTUMN MAGIC (🎃 Pumpkin Patch, Harvest Gold & Maple)
   ========================================================================== */
body.theme-autumn {
    --primary: #c2410c;
    --primary-hover: #9a3412;
    --primary-light: #ffedd5;
    --secondary: #d97706;
    --bg-main: #fffaf0;
    --bg-card: #ffffff;
    --text-main: #7c2d12;
    --theme-gradient: linear-gradient(135deg, #f97316 0%, #d97706 100%);
    --theme-badge-bg: #ffedd5;
    --theme-badge-text: #9a3412;
}
body.theme-autumn .app-header {
    border-bottom: 2px solid #fed7aa;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-autumn .kd {
    --purple: #c2410c;
    --pink: #d97706;
    --ink: #7c2d12;
    --paper: #ffffff;
}
body.theme-autumn .pp {
    --pp-green: #c2410c;
    --pp-green-dark: #7c2d12;
    --pp-teal: #ea580c;
    --pp-soft: #fffaf0;
}

/* ==========================================================================
   11. NOVEMBER - STARRY CONSTELLATIONS (🌌 Twilight Navy & Stardust)
   ========================================================================== */
body.theme-constellation {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: #e0e7ff;
    --secondary: #ec4899;
    --bg-main: #f8f9ff;
    --bg-card: #ffffff;
    --text-main: #1e1b4b;
    --theme-gradient: linear-gradient(135deg, #818cf8 0%, #ec4899 100%);
    --theme-badge-bg: #e0e7ff;
    --theme-badge-text: #4338ca;
}
body.theme-constellation .app-header {
    border-bottom: 2px solid #c7d2fe;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-constellation .kd {
    --purple: #6366f1;
    --pink: #ec4899;
    --ink: #1e1b4b;
    --paper: #ffffff;
}
body.theme-constellation .pp {
    --pp-green: #6366f1;
    --pp-green-dark: #4338ca;
    --pp-teal: #818cf8;
    --pp-soft: #f8f9ff;
}

/* ==========================================================================
   12. DECEMBER - HOLIDAY CHEER (🎁 Holiday Pine, Merry Crimson & Gold)
   ========================================================================== */
body.theme-holiday {
    --primary: #dc2626;
    --primary-hover: #b91c1c;
    --primary-light: #fee2e2;
    --secondary: #16a34a;
    --bg-main: #fef2f2;
    --bg-card: #ffffff;
    --text-main: #7f1d1d;
    --theme-gradient: linear-gradient(135deg, #ef4444 0%, #22c55e 100%);
    --theme-badge-bg: #fee2e2;
    --theme-badge-text: #b91c1c;
}
body.theme-holiday .app-header {
    border-bottom: 2px solid #fecaca;
    background: rgba(255, 255, 255, 0.95);
}
body.theme-holiday .kd {
    --purple: #dc2626;
    --pink: #16a34a;
    --ink: #7f1d1d;
    --paper: #ffffff;
}
body.theme-holiday .pp {
    --pp-green: #16a34a;
    --pp-green-dark: #15803d;
    --pp-teal: #dc2626;
    --pp-soft: #fef2f2;
}

/* ----------------- Common Theme Accents for Student & Parent ----------------- */
body.theme-portal .btn-primary,
body.theme-portal button.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}
body.theme-portal .btn-primary:hover,
body.theme-portal button.btn-primary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Themed subtle card glow & playful hover */
body.theme-portal .homework-card:hover,
body.theme-portal .stat-card:hover,
body.theme-portal .pp-kpi:hover {
    box-shadow: 0 10px 24px var(--primary-light) !important;
}

/* Themed active tab underline */
body.theme-portal .nav-item.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}