/* Стили для таблиц в чейнджлоге (как в форуме) */
.prose table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0 !important;
    table-layout: auto !important;
    background-color: #ffffff !important;
    border-radius: 0.125rem !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    min-width: 600px !important; /* Минимальная ширина таблицы */
}

.dark .prose table {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* Дополнительные стили для темной темы - более специфичные селекторы */
html.dark .prose table {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark .prose table {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.prose table th,
.prose table td {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    vertical-align: top !important;
}

.prose table th {
    background-color: #f9fafb !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
}

.prose table td {
    background-color: transparent !important;
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
}

.prose table tr:last-child td {
    border-bottom: none !important;
}

.prose table tr:hover td {
    background-color: rgba(243, 244, 246, 0.5) !important;
}

/* Стили таблиц для темной темы */
.dark .prose table th {
    background-color: rgba(55, 65, 81, 0.2) !important;
    color: #9ca3af !important;
    border-top-color: rgba(55, 65, 81, 0.5) !important;
    border-bottom-color: rgba(55, 65, 81, 0.5) !important;
    border-left-color: rgba(55, 65, 81, 0.3) !important;
    border-right-color: rgba(55, 65, 81, 0.3) !important;
}

/* Дополнительные стили для темной темы - более специфичные селекторы */
html.dark .prose table th {
    background-color: rgba(55, 65, 81, 0.2) !important;
    color: #9ca3af !important;
    border-top-color: rgba(55, 65, 81, 0.5) !important;
    border-bottom-color: rgba(55, 65, 81, 0.5) !important;
    border-left-color: rgba(55, 65, 81, 0.3) !important;
    border-right-color: rgba(55, 65, 81, 0.3) !important;
}

body.dark .prose table th {
    background-color: rgba(55, 65, 81, 0.2) !important;
    color: #9ca3af !important;
    border-top-color: rgba(55, 65, 81, 0.5) !important;
    border-bottom-color: rgba(55, 65, 81, 0.5) !important;
    border-left-color: rgba(55, 65, 81, 0.3) !important;
    border-right-color: rgba(55, 65, 81, 0.3) !important;
}

/* Максимально специфичные селекторы для темной темы */
html.dark .prose table th,
html.dark .prose table th[style*="background-color"],
html.dark .prose table th[style*="color"] {
    background-color: rgba(55, 65, 81, 0.2) !important;
    color: #9ca3af !important;
    border-top-color: rgba(55, 65, 81, 0.5) !important;
    border-bottom-color: rgba(55, 65, 81, 0.5) !important;
    border-left-color: rgba(55, 65, 81, 0.3) !important;
    border-right-color: rgba(55, 65, 81, 0.3) !important;
}

/* Принудительное переопределение inline стилей */
html.dark .prose table th[style] {
    background-color: rgba(55, 65, 81, 0.2) !important;
    color: #9ca3af !important;
    border-top-color: rgba(55, 65, 81, 0.5) !important;
    border-bottom-color: rgba(55, 65, 81, 0.5) !important;
    border-left-color: rgba(55, 65, 81, 0.3) !important;
    border-right-color: rgba(55, 65, 81, 0.3) !important;
}

.dark .prose table td {
    background-color: transparent !important;
    color: #f9fafb !important;
    border-bottom-color: rgba(55, 65, 81, 0.3) !important;
    border-left-color: rgba(55, 65, 81, 0.2) !important;
    border-right-color: rgba(55, 65, 81, 0.2) !important;
}

.dark .prose table tr:hover td {
    background-color: rgba(75, 85, 99, 0.3) !important;
}

/* Дополнительные стили для темной темы - более специфичные селекторы */
html.dark .prose table td {
    background-color: transparent !important;
    color: #f9fafb !important;
    border-bottom-color: rgba(55, 65, 81, 0.3) !important;
    border-left-color: rgba(55, 65, 81, 0.2) !important;
    border-right-color: rgba(55, 65, 81, 0.2) !important;
}

body.dark .prose table td {
    background-color: transparent !important;
    color: #f9fafb !important;
    border-bottom-color: rgba(55, 65, 81, 0.3) !important;
    border-left-color: rgba(55, 65, 81, 0.2) !important;
    border-right-color: rgba(55, 65, 81, 0.2) !important;
}

html.dark .prose table tr:hover td {
    background-color: rgba(75, 85, 99, 0.3) !important;
}

body.dark .prose table tr:hover td {
    background-color: rgba(75, 85, 99, 0.3) !important;
}

/* Обеспечиваем горизонтальный скролл для контейнеров таблиц */
.prose .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db #f3f4f6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dark .prose .overflow-x-auto {
    scrollbar-color: #4b5563 #374151 !important;
}

/* Стили для скроллбара в WebKit браузерах */
.prose .overflow-x-auto::-webkit-scrollbar {
    height: 8px !important;
}

.prose .overflow-x-auto::-webkit-scrollbar-track {
    background: #f3f4f6 !important;
    border-radius: 4px !important;
}

.dark .prose .overflow-x-auto::-webkit-scrollbar-track {
    background: #374151 !important;
}

.prose .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 4px !important;
}

.dark .prose .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
}

.prose .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

.dark .prose .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

/* Дополнительные стили для обеспечения горизонтального скролла */
.prose div[class*="overflow-x-auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

.prose div[class*="overflow-x-auto"] table {
    min-width: 600px !important;
    width: auto !important;
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .prose .overflow-x-auto {
        margin: 0 -1rem !important;
        padding: 0 1rem !important;
    }
    
    .prose div[class*="overflow-x-auto"] {
        margin: 0 -1rem !important;
        padding: 0 1rem !important;
    }
}