/* Custom Line Numbers */
#line-numbers {
    line-height: 1.5rem;
    font-size: 0.875rem;
    overflow: hidden;
}

#user-input {
    line-height: 1.5rem;
}

/* Hide Horizontal Scrollbars in Tab Bar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Interactive Tree View Nodes */
.tree-node {
    margin-left: 1rem;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
    padding-left: 0.5rem;
}

.tree-key {
    color: #0284c7;
    font-weight: 600;
}
.dark .tree-key { color: #38bdf8; }

.tree-string { color: #16a34a; }
.dark .tree-string { color: #4ade80; }

.tree-number { color: #d97706; }
.dark .tree-number { color: #facc15; }

.tree-boolean { color: #db2777; }
.dark .tree-boolean { color: #f472b6; }

/* Toast Notifications */
.toast {
    animation: slideIn 0.25s ease-out forwards;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

textarea {
    resize: none !important;
    max-height: 100% !important;
}

/* Custom Adaptive Scrollbar for Sidebar and Textareas */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Light Mode Scrollbar */
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Dark Mode Scrollbar */
.dark ::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569; /* slate-600 */
}

footer {
    margin-top: 5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Smooth Professional Theme Transition */
body, div, header, footer, button, input, select, textarea, nav, aside {
    transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

/* Optimized Smooth Theme Transition */
html {
    color-scheme: dark light;
}

body, header, footer, .bg-white, .dark\:bg-slate-800, .dark\:bg-slate-900, .dark\:bg-slate-950, .border-slate-200, .dark\:border-slate-700, .dark\:border-slate-800 {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   MULTI-ACCENT THEME PALETTES (LAVA UI)
   ========================================== */

/* Default / Emerald Theme (Root variables) */
:root {
    --accent-bg: #059669;
    --accent-hover: #047857;
    --accent-light-bg: #ecfdf5;
    --accent-text: #059669;
    --accent-ring: rgba(5, 150, 105, 0.4);
}

.dark {
    --accent-text-dark: #34d399;
}

/* Lava Orange Theme */
html.theme-lava {
    --accent-bg: #ea580c;
    --accent-hover: #c2410c;
    --accent-light-bg: #fff7ed;
    --accent-text: #ea580c;
    --accent-ring: rgba(234, 88, 12, 0.4);
}
html.theme-lava.dark {
    --accent-text-dark: #fb923c;
}

/* Cyber Indigo Theme */
html.theme-indigo {
    --accent-bg: #4f46e5;
    --accent-hover: #4338ca;
    --accent-light-bg: #eef2ff;
    --accent-text: #4f46e5;
    --accent-ring: rgba(79, 70, 229, 0.4);
}
html.theme-indigo.dark {
    --accent-text-dark: #818cf8;
}

/* Ruby Rose Theme */
html.theme-rose {
    --accent-bg: #e11d48;
    --accent-hover: #be123c;
    --accent-light-bg: #fff1f2;
    --accent-text: #e11d48;
    --accent-ring: rgba(225, 29, 72, 0.4);
}
html.theme-rose.dark {
    --accent-text-dark: #fb7185;
}

/* Dynamic Accent Utilities */
.accent-bg { background-color: var(--accent-bg) !important; }
.accent-bg:hover { background-color: var(--accent-hover) !important; }
.accent-text { color: var(--accent-text) !important; }
.dark .accent-dark-text { color: var(--accent-text-dark) !important; }

/* Dynamic Hover Text Utility */
.accent-hover-text:hover { color: var(--accent-text) !important; }
.dark .accent-hover-text:hover { color: var(--accent-text-dark) !important; }

/* Automatically hides the ad card entirely until Google fills an ad */
.ad-section:not(:has(.adsbygoogle[data-ad-status="filled"])) {
    display: none !important;
}