/* Custom styles augmenting Tailwind */

.nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s;
    color: #4b5563; /* text-gray-600 */
}

.dark .nav-btn {
    color: #9ca3af; /* text-gray-400 */
}

.nav-btn:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #111827; /* text-gray-900 */
}

.dark .nav-btn:hover {
    background-color: #1f2937; /* bg-gray-800 */
    color: #f3f4f6; /* text-gray-100 */
}

.nav-btn.active {
    background-color: #eef2ff; /* bg-indigo-50 */
    color: #4f46e5; /* text-indigo-600 */
}

.dark .nav-btn.active {
    background-color: rgba(79, 70, 229, 0.1); 
    color: #818cf8; /* text-indigo-400 */
}

.value-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

/* Custom scrollbar for better look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #475569;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

/* Toast Animation overrides */
#toast.show {
    transform: translateY(0);
    opacity: 1;
}