/* useapi News - Custom Styles */

/* Line clamp utility */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #111827;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Prose-like styling for article content */
.prose h1, .prose h2, .prose h3 {
    color: #f3f4f6;
    font-weight: 600;
}

.prose a {
    color: #818cf8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: #a5b4fc;
}

.prose strong {
    color: #f3f4f6;
}

.prose ul, .prose ol {
    color: #d1d5db;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose blockquote {
    border-left: 3px solid #4f46e5;
    padding-left: 1rem;
    color: #9ca3af;
    font-style: italic;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

article {
    animation: fadeIn 0.3s ease-out;
}

/* Table styles for admin */
table {
    border-collapse: collapse;
}

/* Select styling */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

/* Smooth transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Selection */
::selection {
    background-color: rgba(99, 102, 241, 0.3);
    color: white;
}