/* Prose styling for panel content - Shared across all detail pages */
.prose {
    color: rgb(51 65 85);
}

.dark .prose {
    color: rgb(226 232 240);
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: rgb(15 23 42);
    font-weight: 700;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.prose h1{
    font-size: 2.5rem;
}
.prose h2{
    font-size: 2rem;
}
.prose h3{
    font-size: 1.5rem;
}
.prose h4{
    font-size: 1.25rem;
}
.prose h5{
    font-size: 1rem;
}
.prose h6{
    font-size: 0.875rem;
}
.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4, .dark .prose h5, .dark .prose h6 {
    color: rgb(226 232 240);
}
.ql-font-monospace{
    font-family: monospace;
}
.ql-font-serif{
    font-family: serif;
}
.ql-font-sans-serif{
    font-family: sans-serif;
}
.ql-size-small{
    font-size: 0.875rem;
}
.ql-size-large{
    font-size: 1.5rem;
}
.ql-size-huge{
    font-size: 2rem;
}


.prose ul, .prose ol {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    padding-left: 1.625em;
    list-style-position: outside;
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-top: 0.125em;
    margin-bottom: 0.125em;
    display: list-item;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Quill indentasyon stilleri - Liste elemanları için indentasyon */
/* margin-left kullanarak hem nokta işareti hem de içerik birlikte kayar */
.prose li.ql-indent-1 {
    margin-left: 3em;
    padding-left: 0;
}

.prose li.ql-indent-2 {
    margin-left: 6em;
    padding-left: 0;
}

.prose li.ql-indent-3 {
    margin-left: 9em;
    padding-left: 0;
}

.prose li.ql-indent-4 {
    margin-left: 12em;
    padding-left: 0;
}

.prose li.ql-indent-5 {
    margin-left: 15em;
    padding-left: 0;
}

.prose li.ql-indent-6 {
    margin-left: 18em;
    padding-left: 0;
}

.prose li.ql-indent-7 {
    margin-left: 21em;
    padding-left: 0;
}

.prose li.ql-indent-8 {
    margin-left: 24em;
    padding-left: 0;
}

/* Paragraf ve diğer elemanlar için de indentasyon desteği */
.prose p.ql-indent-1,
.prose div.ql-indent-1 {
    padding-left: 3em;
}

.prose p.ql-indent-2,
.prose div.ql-indent-2 {
    padding-left: 6em;
}

.prose p.ql-indent-3,
.prose div.ql-indent-3 {
    padding-left: 9em;
}

.prose p.ql-indent-4,
.prose div.ql-indent-4 {
    padding-left: 12em;
}

.prose p.ql-indent-5,
.prose div.ql-indent-5 {
    padding-left: 15em;
}

.prose p.ql-indent-6,
.prose div.ql-indent-6 {
    padding-left: 18em;
}

.prose p.ql-indent-7,
.prose div.ql-indent-7 {
    padding-left: 21em;
}

.prose p.ql-indent-8,
.prose div.ql-indent-8 {
    padding-left: 24em;
}

/* Quill editor internal elements - hide them */
.prose span.ql-ui {
    display: none !important;
}

.prose a {
    color: #137fec;
    text-decoration: underline;
    font-weight: 500;
}

.prose a:hover {
    color: #0f6bc7;
}

/* Code blocks */
.prose code {
    background-color: rgb(241 245 249);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    white-space: pre; /* Inline code should preserve spaces */
}

.dark .prose code {
    background-color: rgb(30 41 59);
}

.prose pre {
    background-color: rgb(241 245 249);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    white-space: pre; /* Pre blocks should use pre, not pre-wrap */
}

.dark .prose pre {
    background-color: rgb(30 41 59);
}

.prose blockquote {
    border-left: 4px solid #137fec;
    padding-left: 1rem;
    margin-left: 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-style: italic;
    white-space: pre-wrap; /* Preserve whitespace in blockquotes */
}

/* Code block containers should preserve formatting */
.prose .ql-code-block-container,
.prose .ql-code-block {
    white-space: pre;
}

/* Text overflow prevention */
.prose, .prose * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.prose p, .prose li, .prose td, .prose th {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

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

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

/* Mission/Vision page specific - card text overflow */
.rounded-2xl {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* Group elements text overflow */
.group {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}
.ql-align-center{
    text-align: center;
}
.group h2 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.ql-code-block{
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px; /* isteğe bağlı */
    background-color: #f5f5f5; /* isteğe bağlı arka plan */
    padding: 2px 4px; /* küçük boşluk */
    border-radius: 4px; /* köşeleri yuvarlatmak için */
    color: #c7254e; /* metin rengi */
}

/* Content Button Styles - Panel'den eklenen butonlar için */
.prose .content-button {
    display: inline-block !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    margin: 0.25rem 0.25rem;
    white-space: nowrap;
}

.prose .content-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.prose .content-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive butonlar */
@media (max-width: 640px) {
    .prose .content-button {
        display: block !important;
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* Float edilmiş resimler için clearfix - Resimlerin container dışına taşmasını önler */
.prose::after {
    content: "";
    display: table;
    clear: both;
}

/* Float edilmiş resimler için container'ın yüksekliğini koru */
.prose img[style*="float"] {
    margin-right: 1rem;
    margin-bottom: 1rem;
}

/* Float edilmiş resimden sonra gelen elementlerin float'ı temizlememesini sağla */
/* Resim doğrudan prose içindeyse */
.prose img[style*="float: left"] ~ *,
.prose img[style*="float:left"] ~ *,
.prose img[style*="float: left"] ~ *,
.prose img[style*="float:left"] ~ * {
    clear: none !important;
}

/* Resim bir p içindeyse, o p'den sonra gelen elementler */
.prose p:has(img[style*="float: left"]) ~ *,
.prose p:has(img[style*="float:left"]) ~ *,
.prose p:has(img[style*="float: left"]) ~ *,
.prose p:has(img[style*="float:left"]) ~ * {
    clear: none !important;
}

/* Float edilmiş resimden sonra gelen listeler için ekstra padding - noktaların resmin üzerine binmemesi için */
/* list-style-position: outside olduğu için noktalar padding-left'in dışında, resmin üzerine biniyor */
.prose img[style*="float: left"] ~ ul,
.prose img[style*="float:left"] ~ ul,
.prose img[style*="float: left"] ~ ol,
.prose img[style*="float:left"] ~ ol,
.prose p:has(img[style*="float: left"]) ~ ul,
.prose p:has(img[style*="float:left"]) ~ ul,
.prose p:has(img[style*="float: left"]) ~ ol,
.prose p:has(img[style*="float:left"]) ~ ol {
    /* Resmin genişliği (300px) + margin-right (1rem) + ekstra boşluk (1rem) */
    padding-left: calc(300px + 2rem) !important;
    margin-left: 0 !important;
}

/* Daha küçük resimler için (200px) */
.prose p:has(img[style*="float: left"][width="200"]) ~ ul,
.prose p:has(img[style*="float:left"][width="200"]) ~ ul,
.prose p:has(img[style*="float: left"][width="200"]) ~ ol,
.prose p:has(img[style*="float:left"][width="200"]) ~ ol,
.prose p:has(img[style*="float: left"][style*="width: 200px"]) ~ ul,
.prose p:has(img[style*="float:left"][style*="width: 200px"]) ~ ul,
.prose p:has(img[style*="float: left"][style*="width: 200px"]) ~ ol,
.prose p:has(img[style*="float:left"][style*="width: 200px"]) ~ ol {
    padding-left: calc(200px + 2rem) !important;
}

/* Daha büyük resimler için (400px) */
.prose p:has(img[style*="float: left"][width="400"]) ~ ul,
.prose p:has(img[style*="float:left"][width="400"]) ~ ul,
.prose p:has(img[style*="float: left"][width="400"]) ~ ol,
.prose p:has(img[style*="float:left"][width="400"]) ~ ol,
.prose p:has(img[style*="float: left"][style*="width: 400px"]) ~ ul,
.prose p:has(img[style*="float:left"][style*="width: 400px"]) ~ ul,
.prose p:has(img[style*="float: left"][style*="width: 400px"]) ~ ol,
.prose p:has(img[style*="float:left"][style*="width: 400px"]) ~ ol {
    padding-left: calc(400px + 2rem) !important;
}

/* Belirli elementlerden önce float'ı temizle - böylece resmin altına geçerler */
.prose p:has(span[style*="background-color"]),
.prose p:has(span[style*="background"]),
.prose p:has(span[style*="font-size"]),
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose blockquote,
.prose pre {
    clear: both;
}





/* Fallback: Eğer :has() desteklenmiyorsa */
@supports not selector(:has(*)) {
    .prose p {
        overflow: hidden;
    }
    
    /* Tüm büyük stilize edilmiş içerikler için clear */
    .prose p span[style*="font-size"],
    .prose p span[style*="background-color"],
    .prose p span[style*="background"] {
        display: block;
        clear: both;
    }
}