/* Import a kid-friendly, rounded font */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root { 
    /* Vibrant, playful color palette */
    --primary: #8b5cf6;         /* Playful Purple */
    --primary-hover: #7c3aed;
    --primary-shadow: #5b21b6;  /* For 3D buttons */
    --secondary: #0ea5e9;       /* Sky Blue */
    --tangerine: #fb923c;       /* Light Vibrant Orange! */
    --tangerine-light: #ffedd5; /* Soft Peach */
    --bg: #f0f9ff;              /* Very light, cheerful blue background */
    --sidebar: #1e1b4b;         /* Deep night-sky blue */
    --sidebar-hover: #312e81;
    --white: #ffffff; 
    --text-dark: #334155; 
    --text-muted: #64748b;
    --border: #e2e8f0; 
    --success: #10b981;         /* Mint Green */
    --danger: #ef4444;          /* Bright Red */
    --warning: #facc15;         /* Sunny Yellow */
    
    /* Softer, more colorful shadows */
    --shadow-sm: 0 4px 6px rgba(139, 92, 246, 0.08);
    --shadow-md: 0 8px 15px rgba(251, 146, 60, 0.15); /* Warmed up the shadow */
    --shadow-lg: 0 15px 25px rgba(14, 165, 233, 0.15);
}

body { 
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; 
    background: var(--bg); 
    color: var(--text-dark); 
    margin: 0; padding: 0; 
    display: flex; flex-direction: column; min-height: 100vh;
    -webkit-font-smoothing: antialiased; 
    background-image: radial-gradient(#e0f2fe 3px, transparent 3px);
    background-size: 35px 35px; /* Fun subtle polka-dot background */
}

h2, h3, h4 { 
    letter-spacing: -0.01em; 
    color: var(--text-dark); 
    font-weight: 900; 
}

/* Wiggle Animation for fun interactions */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg) scale(1.1); }
    75% { transform: rotate(12deg) scale(1.1); }
}

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tangerine-light); border-radius: 20px; border: 4px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--tangerine); }

.login-wrapper { display: flex; height: 100vh; width: 100%; background: var(--bg); }
.login-branding { 
    flex: 1; 
    /* Updated gradient to include the tangerine orange */
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.85) 0%, rgba(251, 146, 60, 0.85) 100%), 
                url('school-bg.jpg') center/cover no-repeat;
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    color: white; padding: 40px; text-align: center; 
}
.login-branding h1 { color: white; font-size: 3.5rem; margin-bottom: 10px; font-weight: 900; text-shadow: 3px 5px 0px rgba(0,0,0,0.2); }
.login-branding p { color: #fff; font-size: 1.25rem; max-width: 400px; font-weight: 700; text-shadow: 1px 2px 0px rgba(0,0,0,0.1); }
.login-form-container { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: 40px 0 0 40px; box-shadow: -10px 0 30px rgba(0,0,0,0.05); z-index: 2; }
.login-card { width: 100%; max-width: 400px; padding: 40px; text-align: center; }
.login-card img { height: 140px; margin-bottom: 30px; animation: float 3s ease-in-out infinite; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

@media (max-width: 900px) { 
    .login-branding { display: none; } 
    .login-form-container { border-radius: 0; }
}

.app-container { display: flex; width: 100%; min-height: 100vh; position: relative; }
.sidebar { width: 270px; background: var(--sidebar); color: white; display: flex; flex-direction: column; padding: 25px; flex-shrink: 0; position: fixed; height: 96%; top: 2%; left: 1%; border-radius: 30px; z-index: 1000; overflow-y: auto; transition: transform 0.3s ease-in-out; box-shadow: var(--shadow-lg); }
.sidebar-header { font-size: 1.5rem; font-weight: 900; display: flex; align-items: center; gap: 12px; margin-bottom: 40px; color: #f8fafc; }
.sidebar-header img { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; background: white; border: 4px solid var(--tangerine); }
.menu-item { padding: 14px 20px; border-radius: 16px; color: #cbd5e1; cursor: pointer; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-weight: 700; font-size: 1.05rem; }
.menu-item:hover { background: rgba(255,255,255,0.1); color: white; transform: translateX(8px); }
/* Active menu item is now a juicy gradient with orange */
.menu-item.active { background: linear-gradient(135deg, var(--primary), var(--tangerine)); color: white; box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4); }

.main-area { flex: 1; padding: 40px; margin-left: 310px; width: calc(100% - 310px); box-sizing: border-box; overflow-y: auto; height: 100vh; }
.mobile-header { display: none; padding: 15px 20px; background: var(--sidebar); color: white; align-items: center; justify-content: space-between; z-index: 2000; position: sticky; top: 0; border-radius: 0 0 20px 20px; }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(30, 27, 75, 0.6); backdrop-filter: blur(3px); z-index: 900; }

@media (max-width: 900px) {
    .app-container { flex-direction: column; }
    .mobile-header { display: flex; }
    .sidebar { transform: translateX(-120%); width: 280px; top: 0; left: 0; height: 100%; border-radius: 0 30px 30px 0; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }
    .main-area { margin-left: 0; width: 100%; padding: 20px; }
    .sidebar-header { margin-top: 40px !important; }
}

/* Added Dashed Sticker border on hover */
.card { background: var(--white); padding: 30px; border-radius: 24px; border: 3px dashed transparent; box-shadow: var(--shadow-md); margin-bottom: 25px; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--tangerine-light); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 25px; }

.stat-icon { width: 65px; height: 65px; border-radius: 20px; background: var(--tangerine-light); color: var(--tangerine); display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.05); transition: 0.3s; }
.card:hover .stat-icon { animation: wiggle 0.6s ease-in-out; background: var(--tangerine); color: white; }

/* 3D Pushable Buttons with Gradients */
.btn { padding: 12px 24px; border: none; border-radius: 50px; font-weight: 900; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; outline: none; }
.btn-primary { background: linear-gradient(to bottom, #a78bfa, var(--primary)); color: white; box-shadow: 0 6px 0 var(--primary-shadow); transform: translateY(0); } 
.btn-primary:hover { filter: brightness(1.1); transform: translateY(2px); box-shadow: 0 4px 0 var(--primary-shadow); }
.btn-primary:active { transform: translateY(6px); box-shadow: 0 0 0 var(--primary-shadow); }

/* Orange specific button */
.btn-orange { background: linear-gradient(to bottom, #fdba74, var(--tangerine)); color: white; box-shadow: 0 6px 0 #c2410c; }
.btn-orange:hover { filter: brightness(1.1); transform: translateY(2px); box-shadow: 0 4px 0 #c2410c; }
.btn-orange:active { transform: translateY(6px); box-shadow: 0 0 0 #c2410c; }

.btn-danger { background: #fee2e2; color: var(--danger); padding: 8px 16px; font-size: 0.85rem; box-shadow: 0 4px 0 #fca5a5; } 
.btn-danger:hover { background: #fecaca; transform: translateY(2px); box-shadow: 0 2px 0 #fca5a5; }
.btn-danger:active { transform: translateY(4px); box-shadow: 0 0 0 #fca5a5; }

.btn-class { background: white; border: 3px solid var(--border); color: var(--text-dark); padding: 15px; border-radius: 20px; font-weight: 800; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); text-align: center; font-size: 1.1rem; } 
.btn-class:hover { border-color: var(--tangerine); color: var(--tangerine); background: var(--tangerine-light); transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-md); }

.btn.loading { position: relative; pointer-events: none; color: transparent !important; }
.btn.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 4px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; top: calc(50% - 10px); left: calc(50% - 10px); }
@keyframes spin { to { transform: rotate(360deg); } }

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { background: white; padding: 18px; text-align: left; font-weight: 800; color: var(--tangerine); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 3px dashed var(--tangerine-light); }
td { padding: 18px; border-bottom: 2px solid #f1f5f9; font-size: 1.05rem; font-weight: 700; vertical-align: middle; }
tbody tr { transition: all 0.2s ease; }
tbody tr:hover { background-color: #fff7ed; transform: scale(1.01); }

input, select, textarea { width: 100%; padding: 14px 20px; border: 3px solid var(--border); border-radius: 16px; margin-bottom: 15px; font-size: 1.05rem; font-weight: 700; font-family: 'Nunito', sans-serif; box-sizing: border-box; background-color: #f8fafc; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tangerine); background-color: var(--white); box-shadow: 0 0 0 5px var(--tangerine-light); transform: translateY(-2px); }

.empty-state-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 20px; text-align: center; color: var(--text-muted); width: 100%; }
.empty-state-icon { font-size: 6rem; color: var(--tangerine-light); margin-bottom: 20px; animation: bounce 2s infinite; }
.empty-state-title { font-size: 1.6rem; font-weight: 900; color: var(--text-dark); margin-bottom: 10px; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-25px); }
    60% { transform: translateY(-12px); }
}

#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 15px; }
.toast { min-width: 260px; background: var(--white); border-left: 8px solid var(--tangerine); box-shadow: var(--shadow-lg); padding: 18px 25px; border-radius: 16px; display: flex; align-items: center; gap: 15px; transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); font-weight: 800; font-size: 1.1rem; }
.toast.show { transform: translateX(0); }
.toast.success { border-color: var(--success); } .toast.success i { color: var(--success); font-size: 1.8rem; }
.toast.error { border-color: var(--danger); } .toast.error i { color: var(--danger); font-size: 1.8rem; }

.student-search-container { position: relative; margin-bottom: 20px; }
.search-input { width: 100%; padding: 16px 50px 16px 25px; border-radius: 50px; border: 3px solid var(--tangerine-light); background: white; font-weight: 800; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.search-input:focus { border-color: var(--tangerine); }
.search-icon { position: absolute; right: 25px; top: 18px; color: var(--tangerine); font-size: 1.4rem; }
.search-results { display: none; position: absolute; width: 100%; background: white; border: 3px solid var(--tangerine-light); border-radius: 24px; max-height: 250px; overflow-y: auto; z-index: 10; top: 110%; box-shadow: var(--shadow-lg); padding: 10px; }
.search-item { padding: 12px 20px; cursor: pointer; border-radius: 16px; display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 5px; }
.search-item:hover { background: var(--tangerine-light); color: var(--tangerine); transform: translateX(5px); transition: 0.2s; }

.chapter-card { background: white; padding: 25px; border-radius: 24px; box-shadow: var(--shadow-sm); border: 3px dashed transparent; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); cursor: pointer; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.chapter-card::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: linear-gradient(to bottom, var(--tangerine), var(--warning)); border-radius: 24px 0 0 24px; }
.chapter-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); border-color: var(--tangerine-light); }
.chapter-icon { width: 65px; height: 65px; background: var(--tangerine-light); color: var(--tangerine); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-right: 20px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.05); transition: 0.3s; }
.chapter-card:hover .chapter-icon { animation: wiggle 0.6s ease-in-out; background: var(--tangerine); color: white; }
.chapter-info h4 { margin: 0; font-size: 1.3rem; color: var(--sidebar); font-weight: 900; }
.chapter-info p { margin: 8px 0 0; font-size: 0.95rem; color: var(--text-muted); font-weight: 700; }
.play-btn-small { width: 50px; height: 50px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: var(--secondary); transition: 0.3s; font-size: 1.4rem; box-shadow: 0 4px 0 #cbd5e1; }
.chapter-card:hover .play-btn-small { background: var(--success); color: white; transform: translateY(-2px); box-shadow: 0 6px 0 #059669; }
.chapter-card:active .play-btn-small { transform: translateY(2px); box-shadow: 0 2px 0 #059669; }

.tree-btn { padding: 6px 12px; font-size: 0.85rem; margin-left: 8px; cursor: pointer; border-radius: 10px; border: none; font-weight: 900; box-shadow: 0 3px 0 rgba(0,0,0,0.1); transition: 0.1s; }
.tree-btn:active { transform: translateY(3px); box-shadow: none; }
.btn-add { background: #dcfce7; color: #166534; } .btn-del { background: #fee2e2; color: #991b1b; } .btn-edit { background: #ffedd5; color: #c2410c; }
.tree-item { padding: 10px; border-radius: 16px; transition: 0.2s; font-weight: 700; margin-bottom: 5px; } 
.tree-item:hover { background: var(--tangerine-light); transform: translateX(5px); }

.messenger-container { display: flex; height: 600px; border: 4px solid var(--tangerine-light); border-radius: 30px; overflow: hidden; background: white; box-shadow: var(--shadow-md); }
.messenger-list { width: 35%; background: #f8fafc; border-right: 4px solid var(--tangerine-light); overflow-y: auto; }
.messenger-content { width: 65%; display: flex; flex-direction: column; background: white; }
.contact-item { padding: 20px; cursor: pointer; border-bottom: 3px dashed var(--border); display: flex; align-items: center; gap: 15px; transition: 0.2s; font-weight: 800; }
.contact-item:hover { background: var(--tangerine-light); color: var(--tangerine); padding-left: 25px; }
.chat-area { flex: 1; padding: 30px; overflow-y: auto; background: #fffcf8; display: flex; flex-direction: column; gap: 20px; }
.chat-input-area { padding: 20px; background: white; border-top: 4px solid var(--tangerine-light); display: none; }
.chat-input-form { display: flex; gap: 15px; }
.msg-bubble { padding: 16px 24px; border-radius: 24px; max-width: 75%; box-shadow: var(--shadow-sm); font-weight: 700; font-size: 1.1rem; line-height: 1.5; }
.msg-bubble.sent { background: linear-gradient(135deg, var(--tangerine), #f97316); color: white; align-self: flex-end; border-bottom-right-radius: 6px; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2); }
.msg-bubble.received { background: white; border: 3px solid var(--tangerine-light); align-self: flex-start; border-bottom-left-radius: 6px; color: var(--text-dark); }
.msg-time { display: block; font-size: 0.8rem; margin-top: 8px; opacity: 0.8; text-align: right; font-weight: 800; }

.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(30, 27, 75, 0.6); align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.modal-content { background: white; width: 90%; max-width: 550px; max-height: 85vh; overflow-y: auto; padding: 40px; border-radius: 40px; position: relative; box-shadow: 0 25px 50px -12px rgba(251, 146, 60, 0.3); animation: modalPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); border: 5px solid var(--tangerine-light); }

@keyframes modalPop {
    0% { transform: scale(0.7) translateY(50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.close-icon { position: absolute; top: 25px; right: 30px; font-size: 1.8rem; cursor: pointer; color: var(--tangerine); transition: 0.3s; background: var(--tangerine-light); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.close-icon:hover { background: var(--danger); color: white; transform: rotate(180deg) scale(1.1); box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); }
.hidden { display: none !important; }

.badge { padding: 8px 14px; border-radius: 12px; font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.8px; box-shadow: 0 2px 0 rgba(0,0,0,0.05); }
.badge-blue { background: #e0f2fe; color: var(--secondary); } 
.badge-orange { background: var(--tangerine); color: white; }

.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; background: var(--sidebar); border-radius: 30px; overflow: hidden; margin-bottom: 25px; box-shadow: var(--shadow-lg); border: 6px solid var(--tangerine-light); }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

#inlineAppContainer.fullscreen-mode { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; z-index: 99999 !important; background: var(--bg) !important; margin: 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; overflow-y: hidden !important; }
#inlineAppContent { flex: 1 1 auto !important; width: 100% !important; height: 100% !important; position: relative !important; box-sizing: border-box; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; }  
#injected-body-wrapper { min-height: 100% !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; padding: 20px !important; box-sizing: border-box !important; }

/* =========================================
   🪄 MAGIC CARTOON CURSORS
   ========================================= */

/* Default cursor: A Magic Wand */
body, .main-area, .sidebar, .login-wrapper {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="24">🪄</text></svg>'), auto !important;
}

/* Hover cursor: A Pointing Hand for anything clickable */
.btn, .menu-item, .card, .contact-item, .chapter-card, .close-icon, .tree-btn, .search-item {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="24">👆</text></svg>'), pointer !important;
}

/* Typing cursor: A Pencil for inputs */
input, textarea, .search-input {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="24">✏️</text></svg>'), text !important;
}