/*
 * darkmode.css — Tiger Go (Premium v2)
 * Regras globais de modo escuro para TODO o site.
 * Inclua em TODAS as páginas: <link rel="stylesheet" href="darkmode.css">
 */

/* ═══════════════════════════════════════════════════════════
   BASE — corpo e backgrounds
═══════════════════════════════════════════════════════════ */
.dark body                          { background-color: #0D0D14 !important; color: #e8e8f4 !important; }
.dark body.bg-white                 { background-color: #0D0D14 !important; }
.dark body.bg-tiger-bg              { background-color: #0D0D14 !important; }

/* ═══════════════════════════════════════════════════════════
   CARDS & CONTAINERS
═══════════════════════════════════════════════════════════ */
.dark .bg-white                     { background-color: #1a1a26 !important; }
.dark .bg-gray-50                   { background-color: #20202e !important; }
.dark .bg-gray-100                  { background-color: #20202e !important; }
.dark .bg-gray-200                  { background-color: #282838 !important; }
.dark .bg-tiger-bg                  { background-color: #0D0D14 !important; }
.dark .bg-tiger-cream               { background-color: rgba(249,136,37,0.08) !important; }
.dark .bg-gray-900                  { background-color: #08080f !important; }
.dark .bg-gray-800                  { background-color: #12121c !important; }
.dark .bg-gray-950                  { background-color: #050509 !important; }

/* Accent backgrounds (softer in dark) */
.dark .bg-orange-50                 { background-color: rgba(249,136,37,0.1) !important; }
.dark .bg-orange-100                { background-color: rgba(249,136,37,0.12) !important; }
.dark .bg-blue-50                   { background-color: rgba(28,176,246,0.1) !important; }
.dark .bg-green-50                  { background-color: rgba(88,204,2,0.1) !important; }
.dark .bg-purple-50                 { background-color: rgba(206,130,255,0.1) !important; }
.dark .bg-amber-50                  { background-color: rgba(255,184,0,0.1) !important; }
.dark .bg-red-50                    { background-color: rgba(255,75,75,0.1) !important; }

/* ═══════════════════════════════════════════════════════════
   TEXTO
═══════════════════════════════════════════════════════════ */
.dark .text-gray-800                { color: #e8e8f4 !important; }
.dark .text-gray-700                { color: #ccccdd !important; }
.dark .text-gray-600                { color: #aaaacc !important; }
.dark .text-gray-500                { color: #8888aa !important; }
.dark .text-gray-400                { color: #666688 !important; }
.dark .text-gray-300                { color: #9999bb !important; }
.dark .text-tiger-brown             { color: #f0c090 !important; }

/* ═══════════════════════════════════════════════════════════
   BORDAS
═══════════════════════════════════════════════════════════ */
.dark .border-tiger-border          { border-color: #282838 !important; }
.dark .border-tiger-border\/60      { border-color: rgba(40,40,56,0.6) !important; }
.dark .border-tiger-border\/30      { border-color: rgba(40,40,56,0.3) !important; }
.dark .border-tiger-border\/80      { border-color: rgba(40,40,56,0.8) !important; }
.dark .border-gray-100              { border-color: #282838 !important; }
.dark .border-gray-200              { border-color: #282838 !important; }
.dark .border-gray-700              { border-color: #3a3a50 !important; }
.dark .border-gray-800              { border-color: #22222f !important; }
.dark .border-orange-200            { border-color: rgba(249,136,37,0.25) !important; }
.dark .border-orange-200\/60        { border-color: rgba(249,136,37,0.15) !important; }
.dark .border-orange-200\/80        { border-color: rgba(249,136,37,0.2) !important; }
.dark .border-blue-100              { border-color: rgba(28,176,246,0.2) !important; }
.dark .border-blue-200\/60          { border-color: rgba(28,176,246,0.15) !important; }
.dark .border-green-200\/60         { border-color: rgba(88,204,2,0.15) !important; }
.dark .border-purple-200\/60        { border-color: rgba(206,130,255,0.15) !important; }

/* ═══════════════════════════════════════════════════════════
   SOMBRAS 3D
═══════════════════════════════════════════════════════════ */
.dark .shadow-\[0_3px_0_\#E8E4DF\]  { box-shadow: 0 3px 0 #0a0a12 !important; }
.dark .shadow-\[0_4px_0_\#E8E4DF\]  { box-shadow: 0 4px 0 #0a0a12 !important; }
.dark .shadow-\[0_5px_0_\#E8E4DF\]  { box-shadow: 0 5px 0 #0a0a12 !important; }
.dark .shadow-\[0_6px_0_\#E8E4DF\]  { box-shadow: 0 6px 0 #0a0a12 !important; }
.dark .shadow-\[0_8px_0_\#E8E4DF\]  { box-shadow: 0 8px 0 #0a0a12 !important; }
.dark .shadow-\[0_10px_0_\#E8E4DF\] { box-shadow: 0 10px 0 #0a0a12 !important; }
.dark .shadow-\[0_14px_0_\#E8E4DF\] { box-shadow: 0 14px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_5px_0_\#E8E4DF\]:hover  { box-shadow: 0 5px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_6px_0_\#E8E4DF\]:hover  { box-shadow: 0 6px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_7px_0_\#E8E4DF\]:hover  { box-shadow: 0 7px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_8px_0_\#E8E4DF\]:hover  { box-shadow: 0 8px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_14px_0_\#E8E4DF\]:hover { box-shadow: 0 14px 0 #0a0a12 !important; }
.dark .active\:shadow-\[0_0_0_\#E8E4DF\]:active  { box-shadow: 0 0 0 #0a0a12 !important; }

/* Orange button shadows */
.dark .shadow-\[0_3px_0_\#C45E0A\]  { box-shadow: 0 3px 0 #7a3500 !important; }
.dark .shadow-\[0_4px_0_\#C45E0A\]  { box-shadow: 0 4px 0 #7a3500 !important; }
.dark .shadow-\[0_5px_0_\#C45E0A\]:hover { box-shadow: 0 5px 0 #7a3500 !important; }
.dark .shadow-\[0_6px_0_\#C45E0A\]:hover { box-shadow: 0 6px 0 #7a3500 !important; }
.dark .hover\:shadow-\[0_5px_0_\#C45E0A\]:hover { box-shadow: 0 5px 0 #7a3500 !important; }
.dark .hover\:shadow-\[0_6px_0_\#C45E0A\]:hover { box-shadow: 0 6px 0 #7a3500 !important; }
.dark .active\:shadow-\[0_0_0_\#C45E0A\]:active { box-shadow: 0 0 0 #7a3500 !important; }
.dark .shadow-\[0_10px_0_\#C45E0A\] { box-shadow: 0 10px 0 #7a3500 !important; }

/* CTA section shadows */
.dark .shadow-\[0_5px_0_\#f4e3c5\]  { box-shadow: 0 5px 0 #5a3010 !important; }
.dark .shadow-\[0_7px_0_\#f4e3c5\]:hover { box-shadow: 0 7px 0 #5a3010 !important; }
.dark .hover\:shadow-\[0_7px_0_\#f4e3c5\]:hover { box-shadow: 0 7px 0 #5a3010 !important; }
.dark .active\:shadow-\[0_0_0_\#f4e3c5\]:active { box-shadow: 0 0 0 #5a3010 !important; }

/* Legacy shadows (other pages) */
.dark .shadow-\[0_4px_0_\#e5e5e5\]  { box-shadow: 0 4px 0 #0a0a12 !important; }
.dark .shadow-\[0_6px_0_\#e5e5e5\]  { box-shadow: 0 6px 0 #0a0a12 !important; }
.dark .shadow-\[0_8px_0_\#e5e5e5\]  { box-shadow: 0 8px 0 #0a0a12 !important; }
.dark .shadow-\[0_10px_0_\#e5e5e5\] { box-shadow: 0 10px 0 #0a0a12 !important; }
.dark .shadow-\[0_12px_0_\#e5e5e5\] { box-shadow: 0 12px 0 #0a0a12 !important; }
.dark .shadow-\[0_18px_0_\#e5e5e5\] { box-shadow: 0 18px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_6px_0_\#e5e5e5\]:hover  { box-shadow: 0 6px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_8px_0_\#e5e5e5\]:hover  { box-shadow: 0 8px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_10px_0_\#e5e5e5\]:hover { box-shadow: 0 10px 0 #0a0a12 !important; }
.dark .hover\:shadow-\[0_18px_0_\#e5e5e5\]:hover { box-shadow: 0 18px 0 #0a0a12 !important; }
.dark .active\:shadow-\[0_0_0_\#e5e5e5\]:active  { box-shadow: 0 0 0 #0a0a12 !important; }
.dark .shadow-\[0_4px_0_\#D9731B\]  { box-shadow: 0 4px 0 #7a3500 !important; }
.dark .shadow-\[0_6px_0_\#D9731B\]:hover { box-shadow: 0 6px 0 #7a3500 !important; }
.dark .shadow-\[0_3px_0_\#D9731B\]  { box-shadow: 0 3px 0 #7a3500 !important; }
.dark .shadow-\[0_4px_0_\#ffcaca\]  { box-shadow: 0 4px 0 #7f1d1d !important; }
.dark .shadow-\[0_8px_0_\#f4e3c5\]  { box-shadow: 0 8px 0 #5a3010 !important; }
.dark .hover\:shadow-\[0_8px_0_\#f4e3c5\]:hover { box-shadow: 0 8px 0 #5a3010 !important; }
.dark .active\:shadow-\[0_0_0_\#f4e3c5\]:active { box-shadow: 0 0 0 #5a3010 !important; }

/* Wrong answer shadow */
.dark .shadow-\[0_3px_0_\#b91c1c\]  { box-shadow: 0 3px 0 #5a0a0a !important; }
.dark .shadow-\[0_3px_0_\#46A302\]  { box-shadow: 0 3px 0 #1a4a00 !important; }

/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
.dark nav                           { background-color: rgba(13,13,20,0.85) !important; border-color: #282838 !important; }
.dark nav.bg-white\/60              { background-color: rgba(13,13,20,0.6) !important; }
.dark nav.bg-white\/85              { background-color: rgba(13,13,20,0.9) !important; }
.dark nav.bg-white\/90              { background-color: rgba(13,13,20,0.95) !important; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR / ASIDE
═══════════════════════════════════════════════════════════ */
.dark aside                         { background-color: #1a1a26 !important; border-color: #282838 !important; }
.dark aside a.hover\:bg-gray-50:hover { background-color: #20202e !important; }

/* ═══════════════════════════════════════════════════════════
   HOVER STATES
═══════════════════════════════════════════════════════════ */
.dark .hover\:bg-gray-50:hover      { background-color: #20202e !important; }
.dark .hover\:bg-gray-100:hover     { background-color: #20202e !important; }
.dark .hover\:bg-tiger-cream:hover  { background-color: rgba(249,136,37,0.1) !important; }
.dark .hover\:bg-red-50:hover       { background-color: rgba(255,75,75,0.1) !important; }
.dark .hover\:bg-amber-100:hover    { background-color: rgba(249,136,37,0.15) !important; }

/* ═══════════════════════════════════════════════════════════
   INPUTS & FORMS
═══════════════════════════════════════════════════════════ */
.dark input,
.dark textarea,
.dark select                        { background-color: #20202e !important; color: #e8e8f4 !important; border-color: #282838 !important; }
.dark input::placeholder,
.dark textarea::placeholder         { color: #666688 !important; }
.dark input:focus,
.dark textarea:focus                { background-color: #282838 !important; border-color: #1CB0F6 !important; }

/* ═══════════════════════════════════════════════════════════
   MODAL BACKGROUNDS
═══════════════════════════════════════════════════════════ */
.dark .modal-overlay ~ div,
.dark [class*="rounded-3xl"].bg-white { background-color: #1a1a26 !important; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.dark footer                        { background-color: #1a1a26 !important; border-color: #282838 !important; }

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE - Tiger identity in dark mode
═══════════════════════════════════════════════════════════ */
.dark .tiger-stripes                { background-image: none !important; }
.dark .gradient-line                { background: linear-gradient(90deg, transparent, #F98825, #FF6B35, #F98825, transparent) !important; opacity: 0.4; }

/* Glow border in dark is more pronounced */
.dark .glow-border::before          { opacity: 0.15; }
.dark .glow-border:hover::before    { opacity: 0.7; }

/* Mascot glow stronger in dark */
.dark .mascot-glow                  { filter: drop-shadow(0 0 35px rgba(249,136,37,0.4)) !important; }

/* Mobile menu in dark */
.dark #mobile-menu                  { background-color: rgba(13,13,20,0.96) !important; }

/* ═══════════════════════════════════════════════════════════
   BOTÃO DE TOGGLE FLUTUANTE (fixo no canto)
═══════════════════════════════════════════════════════════ */
#dm-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F98825, #FF6B35);
    border: none;
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 0 #C45E0A, 0 8px 24px rgba(249,136,37,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
#dm-fab:hover  { transform: translateY(-3px); box-shadow: 0 8px 0 #C45E0A, 0 12px 28px rgba(249,136,37,0.45); }
#dm-fab:active { transform: translateY(3px);  box-shadow: 0 2px 0 #C45E0A; }

/* Esconde o FAB em páginas que já têm toggle na sidebar */
body.has-sidebar #dm-fab { display: none; }

/* ═══════════════════════════════════════════════════════════
   TRANSITION SMOOTHING
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease !important; }
/* Don't apply flashy transition on interactive elements */
button, a, input, textarea, svg, img, video, canvas { transition-duration: 0.1s !important; }

/* Scrollbar utility classes */
.scrollbar-none::-webkit-scrollbar { display: none !important; }
.scrollbar-none { -ms-overflow-style: none !important; scrollbar-width: none !important; }

/* Premium thin scrollbar for sidebars and scrollable areas */
.premium-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}
.dark .premium-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.premium-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.premium-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.premium-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-radius: 9999px;
}
.dark .premium-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.12) !important;
}
.premium-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.18) !important;
}
.dark .premium-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Fallbacks para navegadores antigos (Internet Explorer, Samsung Internet) que não suportam sintaxe rgb(R G B / A) */
.bg-tiger-bg { background-color: #FAFAF8 !important; }
.bg-tiger-cream { background-color: #FFF8F0 !important; }
.text-tiger-orange { color: #F98825 !important; }
.bg-tiger-orange { background-color: #F98825 !important; }
.border-tiger-border { border-color: #E8E4DF !important; }
.bg-tiger-orange\/5 { background-color: rgba(249, 136, 37, 0.05) !important; }