/*
 * Mercury sol gezinme menüsü — MercuryNavGroup + MercuryNavLink ortak stilleri.
 * v4 FluentNavGroup/FluentNavLink görünümünü taklit eder: ikon + metin satırları, açılır gruplar,
 * aktif-route vurgusu. İki bileşen aynı .mnav-* sınıflarını paylaştığı için GLOBAL (scoped değil) —
 * App.razor'da linklenir. Renkler FluentUI design token'larıyla (var(--colorX)) → tema-uyumlu.
 */

.mnav-link,
.mnav-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 12px;
    /* padding-left satır içi (derinliğe göre) bileşende verilir */
    border: none;
    background: transparent;
    color: var(--colorNeutralForeground2);
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--borderRadiusMedium);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.mnav-group-header {
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground1);
}

.mnav-link:hover,
.mnav-group-header:hover {
    background-color: var(--colorNeutralBackground1Hover);
    color: var(--colorNeutralForeground1);
}

.mnav-link:active,
.mnav-group-header:active {
    background-color: var(--colorNeutralBackground1Pressed);
}

/* Aktif link — v4'teki vurguya benzer: marka tonlu zemin + marka metin + sol aksan çubuğu. */
.mnav-link.mnav-active {
    background-color: var(--colorBrandBackground2);
    color: var(--colorBrandForeground1);
    font-weight: var(--fontWeightSemibold);
    box-shadow: inset 3px 0 0 0 var(--colorBrandStroke1);
}

.mnav-link.mnav-active:hover {
    color: var(--colorBrandForeground1);
}

.mnav-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mnav-icon svg {
    width: 20px;
    height: 20px;
}

.mnav-text {
    flex: 1 1 auto;
    /* min-width:0 açıkça yazıldı: flex item'ın otomatik min boyutu overflow:hidden sayesinde
       zaten 0'a düşer, ama overflow bir gün değişirse uzun etiketler 280px rayı taşırıp
       yatay kaydırmayı geri getirir — bu satır o tuzağı kalıcı kapatır. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mnav-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--colorNeutralForeground3);
    transition: transform 0.15s ease;
}

.mnav-chevron svg {
    width: 16px;
    height: 16px;
}

.mnav-chevron-open {
    transform: rotate(90deg);
}

/* Grup gövdesi — kapalıyken gizli (ama DOM'da: içerideki aktif link kendini bildirip grubu açar). */
.mnav-group-body.mnav-collapsed {
    display: none;
}

/* Rol başlığı (v4 GetRoleDisplayName etiketi) ve ayraç. */
.mnav-section-header {
    padding: 10px 14px 4px;
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    letter-spacing: 0.4px;
    color: var(--colorNeutralForeground3);
    text-transform: uppercase;
}

.mnav-divider {
    height: 1px;
    margin: 8px 12px;
    background-color: var(--colorNeutralStroke2);
    border: none;
    /* width:auto ŞART: Chrome'un UA stylesheet'i <hr>'a flex item olarak kap genişliğini
       kenar boşluklarını YOK SAYARAK verir (280px kolonda 263px + 2×12px margin = 283px)
       → navbar'da 4px'lik yatay kaydırma çubuğu. width:auto ile stretch doğru hesaplanır
       (kap − margin). Kanıt + repro: diary 0056 v3. */
    width: auto;
}

.mnav-root {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}