/*
  ======================================================================
  SENKRO EDİTÖR ÇEKİRDEK STİLLERİ (editor-style.css)
  Geliştirici Notu: Bu dosya sadece A4 kağıdı, ProseMirror (Tiptap) metin
  düzenlemeleri, araç çubuğu (toolbar) ve açılır menüleri izole eder. 
  Dış arayüz (sidebar, dosya aktarımı vb.) senkro-style.css içindedir.
  ======================================================================
*/

/* =========================================================
   1. A4 KAĞIT GÖRÜNÜMÜ VE SARMALAYICISI
   Not: Editörün her ekranda gerçek bir Word belgesi gibi durmasını sağlar.
   ========================================================= */
.a4-editor-wrapper {
    background-color: #f1f5f9;
    padding: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    height: 75vh;
    min-height: 600px;
}

.a4-paper {
    background: #ffffff !important;
    width: 740px !important; /* 21cm standardı ekrana göre uyarlandı */
    max-width: calc(100% - 20px) !important;
    min-height: 29.7cm !important;
    height: max-content !important; 
    flex-shrink: 0 !important; 
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0,0,0,0.03) !important;
    padding: 1.5cm !important;
    box-sizing: border-box !important;
    transform-origin: top center !important;
    transition: transform 0.2s ease-out !important;
    margin-top: 16px !important; 
}

/* Mobil için A4 kenar boşluklarını sıfırlama */
@media screen and (max-width: 768px) {
    .a4-editor-wrapper { padding: 0 0 20px 0 !important; max-height: 65vh; }
    .a4-paper { 
        width: calc(100% - 20px) !important; 
        margin: 16px auto 0 auto !important; 
        min-height: 50vh; 
        padding: 24px 16px !important; 
        border-radius: 8px; 
    }
}

/* =========================================================
   2. TAM İZOLASYON (NÜKLEER KALKAN) - METİN VE SEÇİM (HIGHLIGHT)
   ========================================================= */

/* Gündüz Modu Seçim (Mavi Arkaplan, Orijinal Yazı Rengi) */
#senkro-editor-area .ProseMirror ::selection, 
#senkro-editor-area .ProseMirror *::selection { 
    background-color: #b3d4fc !important; 
    color: unset !important; /* Tema kurallarını ezer, kırmızı yazıyı siyah yapmaz! */
    -webkit-text-fill-color: unset !important; 
    text-shadow: none !important; 
}

/* Gece Modu Seçim */
html.dark-mode #senkro-editor-area .ProseMirror ::selection, 
html.dark-mode #senkro-editor-area .ProseMirror *::selection { 
    background-color: rgba(59, 130, 246, 0.4) !important; 
    color: unset !important; 
    -webkit-text-fill-color: unset !important;
    text-shadow: none !important; 
}

/* Editör İçi Varsayılan Metin Sıfırlamaları */
#senkro-editor-area .ProseMirror {
    font-family: 'Times New Roman', Times, serif !important;
    font-size: 12pt !important;
    line-height: 1.15 !important;
    color: #000000 !important;
    flex: 1;
    outline: none !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
}

#senkro-editor-area .ProseMirror p, 
#senkro-editor-area .ProseMirror h1, 
#senkro-editor-area .ProseMirror h2, 
#senkro-editor-area .ProseMirror h3, 
#senkro-editor-area .ProseMirror h4, 
#senkro-editor-area .ProseMirror h5, 
#senkro-editor-area .ProseMirror h6 {
    font-family: 'Times New Roman', Times, serif !important;
    font-size: 12pt !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    word-wrap: break-word !important;
    background-color: transparent !important;
}

/* Liste Sıfırlamaları */
#senkro-editor-area .ProseMirror ul,
#senkro-editor-area .ProseMirror ol {
    padding-left: 24px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    list-style-position: outside !important;
}
#senkro-editor-area .ProseMirror ul { list-style-type: disc !important; }
#senkro-editor-area .ProseMirror ol { list-style-type: decimal !important; }
#senkro-editor-area .ProseMirror ul[data-type="bulletList"] li { list-style-type: disc !important; }

#senkro-editor-area .ProseMirror li {
    display: list-item !important;
    font-size: 12pt !important;
    line-height: 1.15 !important;
    margin: 0 0 0 16px !important;
    padding: 0 !important;
}

#senkro-editor-area .ProseMirror li p, 
#senkro-editor-area .ProseMirror li span {
    font-size: 12pt !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media screen and (max-width: 768px) {
    #senkro-editor-area .ProseMirror ul, #senkro-editor-area .ProseMirror ol { padding-left: 16px !important; }
}

/* =========================================================
   3. ARAÇ ÇUBUĞU (TOOLBAR) VE YAPIŞKAN MENÜ
   ========================================================= */
.snk-action-bar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    background-color: #f8fafc; border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    padding: 12px 16px; position: relative !important; z-index: 105 !important; 
}

/* Ghost Butonlar (İndir, Dikte vb.) */
.snk-action-bar .tt-btn-text {
    background-color: #ffffff !important; border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important; color: #0f172a !important;
    width: auto !important; height: auto !important; 
    padding: 6px 12px !important; font-family: 'Inter', sans-serif;
    font-size: 11px !important; font-weight: 500 !important;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important; cursor: pointer;
}
.snk-action-bar .tt-btn-text svg { flex-shrink: 0; }
.snk-action-bar .tt-btn-text:hover { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }

/* Yapışkan Format Barı */
.snk-sticky-format-bar {
    width: 100%; position: sticky; top: 0; z-index: 100;
    display: flex; flex-wrap: wrap !important; overflow: visible !important; 
    justify-content: center; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--snk-border); padding: 6px 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.snk-toolbar-group { 
    display: flex; align-items: center; gap: 2px; 
    padding-right: 6px; margin-right: 2px; position: relative; flex-shrink: 0; 
}
.snk-toolbar-group:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background-color: #cbd5e1; 
}
.snk-toolbar-group:last-child { padding-right: 0; margin-right: 0; }

/* Standart Kare Butonlar (B, I, U) */
.tt-btn {
    width: 28px; height: 28px; padding: 0; border-radius: 4px; 
    border: 1px solid transparent; background: transparent; color: #475569;
    cursor: pointer; transition: 0.2s; display: inline-flex; 
    align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box;
}
.tt-btn svg { width: 16px !important; height: 16px !important; display: block; }

/* Menü Açıcı Butonlar (Yazı Tipi, Punto) */
.snk-custom-select-btn {
    width: 100%; height: 28px; border: 1px solid transparent; border-radius: 4px; 
    padding: 0 4px 0 6px !important; font-family: 'Inter', sans-serif; 
    font-size: 12px; font-weight: 600; color: #475569; background-color: transparent;
    outline: none; transition: 0.2s; cursor: pointer; display: inline-flex; 
    align-items: center; justify-content: center; gap: 2px !important; box-sizing: border-box;
}
.snk-custom-select-btn > svg:last-child { width: 10px !important; height: 10px !important; }

/* Hover ve Aktif (Seçili) Durumları */
.tt-btn:hover, .snk-custom-select-btn:hover, .menu-open .snk-custom-select-btn { 
    background-color: #f1f5f9 !important; color: #0f172a !important; border-color: transparent !important;
}
.tt-btn.ql-active, .snk-custom-select-btn.ql-active { 
    background-color: #e2e8f0 !important; color: var(--snk-primary) !important; 
}
.tt-btn.ql-active:hover, .snk-custom-select-btn.ql-active:hover {
    background-color: #cbd5e1 !important; color: var(--snk-primary) !important;
}

/* Dikte ve Takip Modu Yeşillenmesi */
.tt-btn-text.ql-active, .tt-btn-text.active, #senkro-btn-dictate.active, #senkro-btn-follow.ql-active {
    background-color: #ecfdf5 !important; color: #059669 !important; border-color: #a7f3d0 !important;
}
#senkro-btn-dictate.active svg, #senkro-btn-follow.ql-active svg {
    animation: snk-icon-heartbeat 1.2s infinite ease-in-out;
}
@keyframes snk-icon-heartbeat {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* =========================================================
   4. AÇILIR MENÜLER, DROPDOWN VE RENK PALETİ
   ========================================================= */
.snk-custom-select-wrapper, .snk-color-picker-wrapper, .snk-icon-picker-wrapper { 
    position: relative; display: inline-block; 
}

/* Açılır Liste Ana Kutusu (Dropdown) */
.snk-custom-select-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; 
    min-width: 60px; /* Punto listesi için ferah alan */
    max-height: 220px; overflow-y: auto; overflow-x: hidden;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; flex-direction: column; 
    z-index: 1000; padding: 4px 0; padding-right: 4px; /* Scrollbar payı */
}
.snk-custom-select-dropdown.show { display: flex; }

/* Liste Öğeleri (12pt, Arial vb.) */
.snk-select-option { 
    padding: 4px 6px; font-size: 13px; font-weight: 600; cursor: pointer; color: #475569; 
    transition: 0.1s; display: flex; align-items: center; justify-content: center; 
    margin: 2px 10px; /* Kenarlardan içeri çektik, zarif durur */
}
.snk-select-option:hover { background: #f1f5f9; color: #0f172a; border-radius: 6px; }
.snk-select-option.ql-active { background: #e2e8f0; color: var(--snk-primary); border-radius: 6px; }

/* İkonlu/Yazılı Menüler (Hizalama, Liste, Büyük/Küçük harf) */
.snk-dropdown-palette {
    position: absolute; top: calc(100% + 4px); left: 0; background: #fff;
    border: 1px solid var(--snk-border); border-radius: 8px; padding: 6px;
    display: none; gap: 4px; z-index: 100; box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    flex-direction: row; white-space: nowrap;
}
.snk-dropdown-palette.show { display: flex; }

.tt-btn-list-item {
    width: 100%; border-radius: 4px; padding: 6px 8px; font-size: 13px; color: #475569;
    background: transparent; border: none; cursor: pointer; display: flex; align-items: center;
    justify-content: flex-start; gap: 8px; transition: 0.1s; text-align: left; font-family: 'Inter', sans-serif;
}
.tt-btn-list-item:hover { background: #f1f5f9; color: #0f172a; }
.tt-btn-list-item.ql-active { background: #e2e8f0; color: var(--snk-primary); font-weight: 600; }
.snk-list-icon-box { width: 20px; font-weight: 700; font-size: 13px; text-align: center; color: inherit; display: inline-block; flex-shrink: 0; }
.tt-btn-list-item[data-type="bullet"] .snk-list-icon-box { font-size: 18px; line-height: 0.8; }

#tt-font-size-display, #tt-zoom-display { font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; }

/* Renk Paleti */
.snk-color-palette {
    position: absolute; top: calc(100% + 4px); left: 0; background: #fff;
    border: 1px solid var(--snk-border); border-radius: 8px; padding: 8px;
    display: none; gap: 6px; z-index: 100; box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    width: 154px; flex-wrap: wrap;
}
.snk-color-palette.show { display: flex; }
.snk-color-dot { 
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 1px solid transparent; 
    background: transparent; display: flex; align-items: center; justify-content: center; 
    transition: 0.2s; padding: 0; outline: none; 
}
.snk-color-dot svg { width: 20px; height: 20px; pointer-events: none; }
.snk-color-dot:hover { background: #f1f5f9; transform: scale(1.1); }
.snk-color-dot.ql-active { background: #f1f5f9; border-color: #cbd5e1; }

.snk-color-reset { 
    width: 100%; padding: 6px 0; font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif; 
    color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; transition: 0.2s; 
}
.snk-color-reset:hover { background: #e2e8f0; color: #0f172a; }

/* Zarif Dropdown Scrollbar (Gündüz) */
.snk-custom-select-dropdown::-webkit-scrollbar { width: 6px; }
.snk-custom-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.snk-custom-select-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.snk-custom-select-dropdown:hover::-webkit-scrollbar-thumb { background: #94a3b8; }
.a4-editor-wrapper::-webkit-scrollbar, .snk-sticky-format-bar::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; }
.a4-editor-wrapper::-webkit-scrollbar-track, .snk-sticky-format-bar::-webkit-scrollbar-track { background-color: transparent; }
.a4-editor-wrapper::-webkit-scrollbar-thumb, .snk-sticky-format-bar::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 10px; }
.a4-editor-wrapper:hover::-webkit-scrollbar-thumb, .snk-sticky-format-bar:hover::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.4); }

/* =========================================================
   5. YJS ORTAK İMLECİ & TOOLTİPLER
   ========================================================= */
.collaboration-cursor__caret {
    border-left: 1px solid #000; border-right: 1px solid #000; margin-left: -1px; margin-right: -1px;
    position: relative; word-break: normal; pointer-events: auto; z-index: 2147483647 !important; transform: translateZ(0);
}
.collaboration-cursor__label {
    border-radius: 4px 4px 4px 0; color: #fff; font-size: 10px; font-family: 'Inter', sans-serif;
    font-weight: 600; left: -1px; line-height: normal; padding: 2px 6px; position: absolute;
    top: -1.5em; user-select: none; white-space: nowrap; z-index: 2147483647 !important;
    animation: snkFadeOutLabel 2.5s forwards; display: block !important; overflow: visible !important;
}
.collaboration-cursor__caret:hover .collaboration-cursor__label { animation: none; opacity: 1 !important; visibility: visible !important; }
@keyframes snkFadeOutLabel { 0% { opacity: 1; visibility: visible; } 70% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); bottom: auto; left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 500;
    font-family: 'Inter', sans-serif; white-space: nowrap; opacity: 0; visibility: hidden; transition: 0.2s; pointer-events: none; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }
.snk-hide-tooltip::after, .menu-open::after { display: none !important; opacity: 0 !important; visibility: hidden !important; }
[data-tooltip].snk-tooltip-right::after { left: auto !important; right: 0 !important; transform: none !important; }
[data-tooltip].snk-tooltip-left::after { left: 0 !important; right: auto !important; transform: none !important; }

/* =========================================================
   6. YAZDIRMA (PRINT) İZOLASYONU
   ========================================================= */
@media print {
    body { background: #fff; }
    .snk-active-header-flex, .snk-hub-card, .tiptap-toolbar, .snk-editor-footer, #senkro-file-list { display: none !important; }
    .a4-editor-wrapper { padding: 0; background: transparent; overflow: visible; max-height: none; display: block; }
    .a4-paper { box-shadow: none; margin: 0; width: 21cm; min-height: 29.7cm; height: auto !important; padding: 1.5cm !important; transform: scale(1) !important; page-break-after: auto; }
    .snk-editor-card .a4-paper .ProseMirror p, .snk-editor-card .a4-paper .ProseMirror h1, .snk-editor-card .a4-paper .ProseMirror h2, .snk-editor-card .a4-paper .ProseMirror li { page-break-inside: avoid; }
}

/* =========================================================
   7. KARANLIK MOD (SADECE EDİTÖR İÇERİKLERİ)
   Geliştirici Notu: Koyu mod aktifken açılır menülerde 
   yaşanan "hover" hataları burada izole edilmiştir.
   ========================================================= */
html.dark-mode .a4-editor-wrapper { background-color: #111827 !important; }
html.dark-mode .a4-paper { background-color: #1f2937 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; }
html.dark-mode .snk-action-bar, html.dark-mode .snk-sticky-format-bar { background-color: #1f2937 !important; border-color: #374151 !important; }
html.dark-mode .snk-toolbar-group:not(:last-child)::after { background-color: #4b5563 !important; }

/* Ana Buton Hover ve Açık (Menu-Open) Durumları */
html.dark-mode .tt-btn, 
html.dark-mode .snk-custom-select-btn,
html.dark-mode .snk-sticky-format-bar .tt-btn svg,
html.dark-mode .snk-sticky-format-bar .snk-custom-select-btn svg,
html.dark-mode .snk-sticky-format-bar .snk-custom-select-btn span { 
    color: #f9fafb !important; 
}

html.dark-mode .tt-btn:hover, 
html.dark-mode .snk-custom-select-btn:hover, 
html.dark-mode .menu-open .snk-custom-select-btn { 
    background-color: #374151 !important; 
    color: #ffffff !important; 
}
html.dark-mode .tt-btn.ql-active, html.dark-mode .snk-custom-select-btn.ql-active, html.dark-mode .tt-btn-list-item.ql-active, html.dark-mode .snk-dropdown-palette .tt-btn.ql-active {
    background-color: rgba(185, 28, 28, 0.15) !important; color: #fca5a5 !important; border: 1px solid rgba(185, 28, 28, 0.2) !important;
}
html.dark-mode .tt-btn.ql-active:hover, html.dark-mode .snk-custom-select-btn.ql-active:hover, html.dark-mode .tt-btn-list-item.ql-active:hover {
    background-color: rgba(185, 28, 28, 0.25) !important; color: #fca5a5 !important;
}

html.dark-mode .tt-btn-text { background-color: #111827 !important; border-color: #374151 !important; color: #f9fafb !important; }
html.dark-mode .tt-btn-text:hover { background-color: #1f2937 !important; border-color: #4b5563 !important; color: #ffffff !important; }

/* Açılır Menüler ve Dropdown İçi Elemanları */
html.dark-mode .snk-custom-select-dropdown, html.dark-mode .snk-dropdown-palette, html.dark-mode .snk-color-palette {
    background-color: #1f2937 !important; border: 1px solid #374151 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .snk-select-option, 
html.dark-mode .tt-btn-list-item,
html.dark-mode .snk-dropdown-palette .tt-btn,
html.dark-mode .tt-case-option { 
    color: #d1d5db !important; 
    background-color: transparent !important; 
}
html.dark-mode .snk-select-option:hover, 
html.dark-mode .tt-btn-list-item:hover, 
html.dark-mode .snk-dropdown-palette .tt-btn:hover, 
html.dark-mode .tt-case-option:hover { 
    background-color: #374151 !important; 
    color: #f9fafb !important; 
    border-radius: 6px !important; 
}
html.dark-mode .snk-select-option.ql-active { background-color: rgba(185, 28, 28, 0.2) !important; color: #fca5a5 !important; border-radius: 6px !important;}
html.dark-mode .snk-custom-select-dropdown { padding-right: 4px !important; overflow-x: hidden !important; }
html.dark-mode .snk-custom-select-dropdown::-webkit-scrollbar { width: 6px !important; }
html.dark-mode .snk-custom-select-dropdown::-webkit-scrollbar-track { background: transparent !important; }
html.dark-mode .snk-custom-select-dropdown::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3) !important; border-radius: 10px !important; }
html.dark-mode .snk-custom-select-dropdown:hover::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5) !important; }

/* Kaba Kuvvet: Renk Paleti Noktaları Orijinal Renklere Zorlanır */
html.dark-mode .snk-color-palette > div[style*="border-top"] { border-top-color: #374151 !important; }
html.dark-mode .snk-color-reset { background-color: #111827 !important; border-color: #374151 !important; color: #d1d5db !important; }
html.dark-mode .snk-color-reset:hover { background-color: #374151 !important; border-color: #4b5563 !important; color: #f9fafb !important; }
html.dark-mode .snk-color-dot { background-color: transparent !important; border-color: transparent !important; }
html.dark-mode .snk-color-dot svg { stroke: currentColor !important; }
html.dark-mode .snk-color-dot[data-color="#000000"] { color: #f9fafb !important; } /* Siyahı beyaza çevir */
html.dark-mode .snk-color-dot[data-color="#475569"] { color: #94a3b8 !important; }
html.dark-mode .snk-color-dot[data-color="#dc2626"] { color: #dc2626 !important; }
html.dark-mode .snk-color-dot[data-color="#ea580c"] { color: #ea580c !important; }
html.dark-mode .snk-color-dot[data-color="#16a34a"] { color: #16a34a !important; }
html.dark-mode .snk-color-dot[data-color="#2563eb"] { color: #2563eb !important; }
html.dark-mode .snk-color-dot[data-color="#9333ea"] { color: #9333ea !important; }
html.dark-mode .snk-color-dot[data-color="#db2777"] { color: #db2777 !important; }
html.dark-mode .snk-color-dot:hover, html.dark-mode .snk-color-dot.ql-active { background-color: #374151 !important; border-color: #4b5563 !important; }

/* Editör İçi Metin Rengi (Beyaz okuma modu) */
html.dark-mode #senkro-editor-area .ProseMirror, 
html.dark-mode #senkro-editor-area .ProseMirror p, 
html.dark-mode #senkro-editor-area .ProseMirror h1, 
html.dark-mode #senkro-editor-area .ProseMirror h2, 
html.dark-mode #senkro-editor-area .ProseMirror h3, 
html.dark-mode #senkro-editor-area .ProseMirror li {
    color: #f9fafb !important; 
}