/* NurHub Custom Styles */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #2D6A4F; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1B4332; }

/* Dark mode scrollbar */
body.dark ::-webkit-scrollbar-track { background: #1e293b; }
body.dark ::-webkit-scrollbar-thumb { background: #40916C; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #2D6A4F; }

/* Card hover effect */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
body.dark .card-hover:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

/* Arabic text styling */
.arabic-text {
    font-family: 'Amiri', serif;
    direction: rtl;
    line-height: 2;
}

/* Safe area for mobile bottom bar */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Audio player animation */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(45, 106, 79, 0); }
}
.pulse-green { animation: pulse-green 2s infinite; }

/* Celebration animation for kids */
@keyframes celebrate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1); }
}
.celebrate { animation: celebrate 0.5s ease-in-out; }

/* Streak fire animation */
@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; transform: scale(1.05); }
}
.streak-fire { animation: flicker 1s infinite; }

/* =============================================
   DARK MODE OVERRIDES
   ============================================= */

/* --- Base --- */
body.dark,
html.dark body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* --- Backgrounds --- */
.dark .bg-cream   { background-color: #0f172a !important; }
.dark .bg-white   { background-color: #1e293b !important; }
.dark .bg-white\/80 { background-color: rgba(30,41,59,0.85) !important; }
.dark .bg-white\/50 { background-color: rgba(30,41,59,0.6) !important; }
.dark .bg-gray-50  { background-color: #1e293b !important; }
.dark .bg-gray-100 { background-color: #1e293b !important; }
.dark .bg-green-50 { background-color: rgba(45,106,79,0.15) !important; }
.dark .bg-red-50   { background-color: rgba(220,38,38,0.12) !important; }
.dark .bg-yellow-50 { background-color: rgba(212,175,55,0.12) !important; }
.dark .bg-blue-50  { background-color: rgba(59,130,246,0.12) !important; }

/* --- Text --- */
.dark .text-gray-800 { color: #f1f5f9 !important; }
.dark .text-gray-700 { color: #e2e8f0 !important; }
.dark .text-gray-600 { color: #cbd5e1 !important; }
.dark .text-gray-500 { color: #cbd5e1 !important; }
.dark .text-gray-400 { color: #94a3b8 !important; }
.dark .text-gray-300 { color: #cbd5e1 !important; }
.dark .text-green-800 { color: #86efac !important; }
.dark .text-green-700 { color: #86efac !important; }
.dark .text-green-600 { color: #6ee7b7 !important; }
.dark .text-green-500 { color: #6ee7b7 !important; }
.dark .text-red-800  { color: #fca5a5 !important; }
.dark .text-red-700  { color: #fca5a5 !important; }
.dark .text-red-600  { color: #fca5a5 !important; }
.dark .text-red-500  { color: #fca5a5 !important; }
.dark .text-blue-700 { color: #93c5fd !important; }
.dark .text-blue-600 { color: #93c5fd !important; }
.dark .text-blue-500 { color: #7dd3fc !important; }
.dark .text-orange-700 { color: #fdba74 !important; }
.dark .text-violet-700 { color: #c4b5fd !important; }
.dark .text-primary { color: #6ee7b7 !important; }
.dark .text-primary-dark { color: #34d399 !important; }

/* --- Labels / section headers (e.g. "ADMIN PANEL") --- */
.dark aside .uppercase,
.dark aside .tracking-wider {
    color: #fcd34d !important;
    opacity: 0.9;
}

/* --- Borders --- */
.dark .border-gray-200 { border-color: #334155 !important; }
.dark .border-gray-300 { border-color: #475569 !important; }
.dark .border-gray-100 { border-color: #1e293b !important; }
.dark .border-green-200 { border-color: rgba(45,106,79,0.4) !important; }
.dark .border-red-200   { border-color: rgba(220,38,38,0.3) !important; }

/* --- Inputs & Forms --- */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b !important;
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #2D6A4F !important;
}

/* --- Dividers / Ring --- */
.dark .divide-gray-200 > * + * { border-color: #334155 !important; }
.dark .ring-gray-200 { --tw-ring-color: #334155 !important; }

/* --- Shadows --- */
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-md,
.dark .shadow-sm,
.dark .shadow {
    --tw-shadow-color: rgba(0,0,0,0.35) !important;
}

/* --- Header / Top bar --- */
.dark header {
    background-color: rgba(15,23,42,0.85) !important;
    border-color: #334155 !important;
}

/* --- Footer --- */
.dark footer {
    background-color: rgba(15,23,42,0.6) !important;
    border-color: #334155 !important;
}

/* --- Mobile bottom nav --- */
.dark nav.fixed.bottom-0 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* --- Audio player bar --- */
.dark #audio-player-bar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* --- Tables --- */
.dark table th {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}
.dark table td {
    border-color: #334155 !important;
}
.dark table tr:hover td {
    background-color: rgba(45,106,79,0.18) !important;
}
.dark .hover\:bg-gray-50:hover {
    background-color: rgba(45,106,79,0.18) !important;
}
.dark .bg-blue-50\/50,
.dark .bg-blue-50 {
    background-color: rgba(59,130,246,0.12) !important;
}

/* --- Specific utility combos --- */
.dark .bg-primary\/5  { background-color: rgba(45,106,79,0.1) !important; }
.dark .bg-primary\/10 { background-color: rgba(45,106,79,0.15) !important; }
.dark .bg-gold\/10    { background-color: rgba(212,175,55,0.1) !important; }

/* --- Progress bars / misc --- */
.dark .bg-gray-200 { background-color: #334155 !important; }
.dark .bg-gray-300 { background-color: #475569 !important; }

/* --- Backdrop blur support --- */
.dark .backdrop-blur-sm {
    backdrop-filter: blur(8px);
}

/* --- File input button --- */
.dark input[type="file"]::-webkit-file-upload-button,
.dark input[type="file"]::file-selector-button {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border: 1px solid #475569 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    cursor: pointer;
}
.dark input[type="file"] { color: #cbd5e1 !important; }

/* --- Secondary / cancel buttons that use bg-gray-100 --- */
.dark .bg-gray-100.text-gray-700,
.dark .bg-gray-100.hover\:bg-gray-200 {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}
.dark .bg-gray-100.hover\:bg-gray-200:hover {
    background-color: #475569 !important;
}

/* --- Status pills: Active / Inactive text on dark bg --- */
.dark .bg-green-100 { background-color: rgba(45,106,79,0.25) !important; }
.dark .bg-green-100.text-green-700,
.dark .bg-green-100.text-green-800 { color: #86efac !important; }
.dark .bg-red-100 { background-color: rgba(220,38,38,0.18) !important; }
.dark .bg-red-100.text-red-700,
.dark .bg-red-100.text-red-800 { color: #fca5a5 !important; }
.dark .bg-blue-100 { background-color: rgba(59,130,246,0.18) !important; }
.dark .bg-blue-100.text-blue-700 { color: #93c5fd !important; }
.dark .bg-violet-100 { background-color: rgba(139,92,246,0.18) !important; }
.dark .bg-violet-100.text-violet-700 { color: #c4b5fd !important; }
.dark .bg-orange-100 { background-color: rgba(249,115,22,0.18) !important; }
.dark .bg-orange-100.text-orange-700 { color: #fdba74 !important; }
.dark .bg-yellow-100 { background-color: rgba(234,179,8,0.18) !important; }

/* --- Edit/Delete row buttons (make borders visible) --- */
.dark .border-blue-200 { border-color: rgba(59,130,246,0.45) !important; }
.dark .border-red-200  { border-color: rgba(220,38,38,0.45) !important; }

/* --- Placeholder emphasis --- */
.dark ::placeholder { color: #64748b !important; opacity: 1; }