﻿/* =================================================================== */
/* === Genel ve Uygulama Çapında Stil Ayarlamaları === */
/* =================================================================== */

/* Blazor uygulamasının tüm pencereyi kaplamasını ve dikey taşmayı önlemesini sağla */
html, body, #app, .mud-layout {
    height: 100%;
}

/* Ana içerik alanının kalan boşluğu doldurmasını ve kendi içinde kaydırılabilir olmasını sağla */
.mud-main-content {
    flex: 1;
    overflow-y: auto;
}

/* Sayfa içinde kullanılan kartlar arasına standart bir boşluk ekle */
.mud-card {
    margin-bottom: 20px !important;
}

/* Navigasyon menüsündeki linklerin metinlerinin alt satıra kaymasına izin ver */
.mud-nav-link {
    white-space: normal !important;
}

    /* Navigasyon menüsündeki aktif linki belirginleştir */
    .mud-nav-link.active:not(.mud-nav-link-disabled) {
        border-right: 3px solid var(--mud-palette-primary);
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    }

/* Dialog pencerelerinin içeriğinin taşmasını ve kaydırılabilir olmasını sağla */
.mud-dialog-content {
    max-height: 75vh !important;
    overflow-y: auto !important;
}

/* Genel kaydırma çubuğu stilini incelt */
::-webkit-scrollbar {
    width: 6px !important; /* Dikey kaydırma çubuğu genişliği */
    height: 6px !important; /* Yatay kaydırma çubuğu yüksekliği */
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: var(--mud-palette-scrollbar-track);
}


/* =================================================================== */
/* === EntityTable için Gelişmiş Stil Kuralları === */
/* =================================================================== */

/* Tablonun kendisi ile diğer elementler arasına boşluk koy */
.mud-table {
    margin-bottom: 20px !important;
}

/* Tabloyu saran ana konteynerin yatayda kaydırılabilir olmasını sağla */
.mud-table-container {
    overflow-x: auto;
}

/* --- TOOLBAR DÜZENLEMELERİ --- */

.mud-table-toolbar {
    display: flex;
    flex-wrap: wrap; /* Dar ekranlarda elemanların alt satıra inmesini sağla */
    align-items: center; /* Dikeyde ortala */
    gap: 16px; /* Buton grubu ve arama kutusu gibi ana elemanlar arasına boşluk koy */
    padding: 16px;
    justify-content: flex-start !important; /* Her şeyi sola yasla */
}

    /* Arama kutusunun esneyerek kalan boşluğu doldurmasını sağla */
    .mud-table-toolbar .mud-input-control {
        flex-grow: 1;
        min-width: 200px;
    }

/* --- MASAÜSTÜ GÖRÜNÜMÜ İÇİN ÖZEL KURALLAR (960px ve üzeri) --- */
@media (min-width: 960px) {

    /* Tüm tablo hücrelerindeki metinlerin tek satırda kalmasını sağla */
    .mud-table-body .mud-table-cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Actions sütununun başlığını sabitle */
    .sticky-actions-header {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: var(--mud-palette-surface);
        text-align: right !important; /* Başlığı sağa hizala */
        box-shadow: -2px 0 5px -2px rgba(0, 0, 0, 0.1);
    }

    /* Actions sütununun hücresini sabitle */
    .sticky-actions-cell {
        position: sticky;
        right: 0;
        z-index: 1;
        background-color: var(--mud-palette-surface);
        box-shadow: -2px 0 5px -2px rgba(0, 0, 0, 0.1);
        /* Actions sütununun genişliğini 3 ikon butonu sığacak şekilde ayarla */
        min-width: 140px;
        width: 140px;
    }
}

/* --- MOBİL GÖRÜNÜM İÇİN ÖZEL KURALLAR (960px altı) --- */
@media (max-width: 959.95px) {

    /* Dar ekranlarda Actions sütununun sabit kalmasını engelle */
    .sticky-actions-header,
    .sticky-actions-cell {
        position: static;
        right: auto;
        box-shadow: none;
    }
}

/* MudTable'ın 'FixedHeader' özelliği ile uyumluluk için */
.mud-table-head .sticky-actions-header {
    z-index: 4;
}



/* =================================================================== */
/* === YENİ EKLENECEK KURAL: Konteyner Boşluklarını Ayarlama === */
/* =================================================================== */

/* MudContainer'ın varsayılan sol ve sağ iç boşluklarını azaltıyoruz. 
   MudBlazor genellikle 24px kullanır, biz bunu 16px veya 12px gibi bir değere indirebiliriz. */
.mud-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* --- Mobil Görünüm İçin Daha da Dar Boşluklar (Opsiyonel) --- */
/* Ekran 600px'den darsa, boşlukları daha da azaltalım. */
@media (max-width: 599.95px) {
    .mud-container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}