/* ===========================
   KRM Quill Editor (PRO)
   =========================== */

.krm-quill-wrap {
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface, #fff);
}

    /* Toolbar */
    .krm-quill-wrap .ql-toolbar.ql-snow {
        border: none;
        border-bottom: 1px solid rgba(0,0,0,0.12);
        padding: 8px 10px;
        background: rgba(0,0,0,0.02);
    }

    /* Container */
    .krm-quill-wrap .ql-container.ql-snow {
        border: none;
    }

/* Editor area */
.krm-quill-editor {
    min-height: 260px;
    max-height: 420px;
    overflow: auto;
}

/* Actual editable content */
.krm-quill-wrap .ql-editor {
    min-height: 240px;
    font-size: 0.95rem;
    line-height: 1.45;
    padding: 14px;
}

    /* Placeholder */
    .krm-quill-wrap .ql-editor.ql-blank::before {
        color: rgba(0,0,0,0.45);
        font-style: normal;
    }

/* Preview box (MudPaper içindeki HTML) */
.krm-html-preview {
    border-radius: 10px;
    min-height: 260px;
}

    /* Preview içinde yazıların düzgün görünmesi */
    .krm-html-preview p {
        margin: 0 0 0.75rem 0;
    }

    .krm-html-preview ul, .krm-html-preview ol {
        margin: 0.25rem 0 0.75rem 1.25rem;
    }

    .krm-html-preview blockquote {
        margin: 0.5rem 0;
        padding: 0.5rem 0.75rem;
        border-left: 4px solid rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.03);
        border-radius: 6px;
    }
/* Mutlaka %100 genişlik al */
.krm-quill-wrap,
.krm-quill-editor,
.krm-quill-wrap .ql-container,
.krm-quill-wrap .ql-toolbar {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

    /* Quill container height hesapları için */
    .krm-quill-wrap .ql-container.ql-snow {
        height: auto; /* Quill bazen height:100% gibi davranır */
    }

/* Editor taşma/daralma olmasın */
.krm-quill-editor {
    width: 100%;
}

/* Toolbar satır taşmalarını düzgün yönet */
.krm-quill-wrap .ql-toolbar.ql-snow {
    flex-wrap: wrap;
    gap: 6px;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* =======================================================
   MENÜ HİZALAMA VE TİTREME DÜZELTMELERİ (V5 - FINAL)
   ======================================================= */

/* 1. Scrollbar Titremesini Önle */
html, body, .mud-main-content {
    scrollbar-gutter: stable; /* Scrollbar yerini rezerve et */
    overflow-y: auto;
}

/* =======================================================
   A. DİKEY MENÜ (SOL PANEL) İÇİN KURALLAR
   Sadece .custom-nav-menu veya .mud-nav-menu içindeki linkleri etkiler
   ======================================================= */

.custom-nav-menu .mud-nav-link,
.mud-drawer .mud-nav-link {
    white-space: nowrap;
    transition: none !important;
    border-left: 4px solid transparent !important; /* Görünmez sınır */
}

    /* Dikey Menüde Aktif Link */
    .custom-nav-menu .mud-nav-link.active,
    .mud-drawer .mud-nav-link.active {
        font-weight: 400 !important;
        border-left: 4px solid var(--mud-palette-primary) !important;
        background-color: transparent !important;
    }

/* Dikey Menü Girintileri (İç İçe) */
.custom-nav-menu .mud-nav-link, .mud-drawer .mud-nav-link {
    padding-left: 12px !important;
}

.custom-nav-menu .mud-nav-group .mud-nav-link {
    padding-left: 28px !important;
}

.custom-nav-menu .mud-nav-group .mud-nav-group .mud-nav-link {
    padding-left: 44px !important;
}
/* Sorunlu 3. seviye */


/* =======================================================
   B. YATAY MENÜ (ÜST PANEL) İÇİN KURALLAR
   Horizontal modda border-left (sol çizgi) kullanmayız, alt çizgi veya renk değişimi olur.
   ======================================================= */

/* Yatay menü kapsayıcısını hedefle (NavMenu.razor'daki div class'ı) */
.d-flex.gap-1.align-center.px-2 .mud-nav-link {
    border-left: none !important; /* Sol çizgiyi kaldır */
    padding-left: 8px !important; /* Standart boşluk */
    padding-right: 8px !important;
    white-space: nowrap;
}

    /* Yatay Menüde Aktif Link */
    /* Kaymayı önlemek için border yerine sadece renk değiştiriyoruz */
    .d-flex.gap-1.align-center.px-2 .mud-nav-link.active {
        font-weight: 600 !important; /* Yatay menüde hafif kalınlaşma kabul edilebilir */
        color: var(--mud-palette-primary) !important;
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important; /* Hafif arka plan */
        border-radius: 4px; /* Köşeleri yuvarla */
    }

/* Yatay menüdeki butonlar ve ikonlar için titreme önleyici */
.d-flex.gap-1.align-center.px-2 .mud-icon-button {
    width: 40px; /* Sabit genişlik */
    height: 40px;
}


/* =======================================================
   MUD BLAZOR POPOVER MOUSE İZOLASYON (GÖRÜNMEZ CAM) ÇÖZÜMÜ
   (Combobox, Select, Autocomplete tıklanamama sorununu çözer)
   ======================================================= */

/* MudBlazor v6 ve v7 desteği için hem host hem provider hedeflenir */
.mud-popover-host,
.mud-popover-provider,
.mud-popover-cascade {
    z-index: 2147483647 !important; /* Tarayıcının izin verdiği maksimum sınır */
    display: block !important;
}

/* Popover'ın bizzat kendisine fare olaylarını (mouse events) zorunlu kıl */
.mud-popover {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

    /* Listeyi barındıran kağıt (paper) elemanının etkileşimini aç */
    .mud-popover .mud-paper {
        pointer-events: auto !important;
    }

/* Dialog/Modal içindeki açılır menüler için ekstra garanti */
.mud-dialog-container .mud-popover-host,
.mud-dialog-container .mud-popover {
    z-index: 2147483647 !important;
}