/* =========================================================================
   KOMPAKT (muhasebe yazılımı tipi) MudBlazor görünüm ayarları
   =========================================================================
   Amaç: Tablo, buton ve form (editör) bileşenlerini varsayılan MudBlazor
   boyutlarından daha küçük/yoğun (dense) hale getirmek ve mobil ekranlarda
   daha kullanışlı bir görünüm sağlamak.

   Yaklaşım: Her .razor dosyasını tek tek değiştirmek yerine, MudBlazor'un
   ürettiği standart CSS sınıfları global olarak override ediliyor. Bu sayede
   yeni eklenen sayfalar/bileşenler de otomatik olarak kompakt görünümü alır.

   Bu dosya index.html içinde MudBlazor.min.css'ten SONRA yüklenmelidir ki
   override'lar geçerli olsun.
   ========================================================================= */

:root {
    --mud-default-borderradius: 4px;
}

/* MudBlazor'un çoğu ölçüsü rem birimine dayanır; kök font boyutunu
   küçültmek tüm boşluk/yazı boyutlarını orantılı olarak küçültür. */
html {
    font-size: 14px;
}

/* ---------- Butonlar ---------- */
.mud-button-root {
    font-size: .8125rem;
    line-height: 1.4;
}

.mud-button-filled,
.mud-button-outlined,
.mud-button-text {
    padding: 4px 12px;
    min-height: 32px;
}

.mud-icon-button {
    padding: 6px;
}

.mud-icon-root,
.mud-svg-icon {
    font-size: 1.25rem;
}

/* ---------- Inputlar / Form Editörleri ---------- */
.mud-input-control,
.mud-input-label,
.mud-select-input,
.mud-input-slot {
    font-size: .8125rem;
}

.mud-input-helper-text {
    font-size: .6875rem;
}

.mud-input-slot {
    min-height: 17px;
}

/* ---------- Tablolar ---------- */
.mud-table-cell {
    padding: 6px 10px !important;
    font-size: .8125rem !important;
}

.mud-table-toolbar {
    min-height: 40px !important;
    padding: 4px 8px !important;
}

.mud-table-pagination-caption,
.mud-table-pagination-select {
    font-size: .75rem;
}

/* ---------- Chip ---------- */
.mud-chip {
    height: 24px;
    font-size: .75rem;
}

/* ---------- Kartlar ---------- */
.mud-card-header {
    padding: 8px 12px;
}

.mud-card-content {
    padding: 8px 12px;
}

.mud-card-actions {
    padding: 4px 8px;
}

/* ---------- Dialoglar ---------- */
.mud-dialog-title {
    padding: 10px 16px;
}

.mud-dialog-content {
    padding: 8px 16px;
}

.mud-dialog-actions {
    padding: 8px 16px;
}

/* ---------- Toolbar / AppBar / Menü / Nav ---------- */
/* Not: AppBar'ın kendi iç toolbar'ı ".mud-toolbar-appbar" sınıfını da taşır ve
   yüksekliğini "--mud-appbar-height" üzerinden ayrıca hesaplar; bu yüzden
   burada bilinçli olarak hariç tutuluyor (aksi halde başlık/hamburger menü
   alanı bozuluyor). */
.mud-toolbar:not(.mud-toolbar-appbar) {
    --mud-internal-toolbar-height: 48px;
}

.mud-toolbar-gutters {
    padding-left: 8px;
    padding-right: 8px;
}

/* AppBar: hamburger + logo tek satırda dikey ortalı */
.appbar-main .mud-toolbar-appbar {
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.appbar-hamburger {
    flex-shrink: 0;
}

.appbar-hamburger-left {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.appbar-hamburger-right {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.company-logo-link {
    display: inline-flex;
    align-items: center;
    align-self: center;
    cursor: pointer;
    line-height: 0;
    text-decoration: none;
}

.appbar-logo {
    width: 40px !important;
    height: 40px !important;
    margin: 0 8px !important;
    align-self: center !important;
    object-fit: contain;
    display: block;
}

.mud-list-item {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 36px;
}

.mud-nav-link {
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 36px;
}

/* ---------- Sekmeler ---------- */
.mud-tab {
    min-height: 36px;
    padding: 6px 12px;
    font-size: .8125rem;
}

/* =========================================================================
   MOBİL UYUMLULUK
   ========================================================================= */
@media (max-width: 960px) {
    html {
        font-size: 13.5px;
    }

    .mud-toolbar-gutters {
        padding-left: 6px;
        padding-right: 6px;
    }

    .mud-table-cell {
        padding: 5px 6px !important;
        font-size: .75rem !important;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 13px;
    }

    .mud-card-header,
    .mud-card-content {
        padding: 6px 8px;
    }

    .mud-card-actions {
        padding: 4px 6px;
    }

    .mud-dialog-title,
    .mud-dialog-content,
    .mud-dialog-actions {
        padding: 6px 10px;
    }

    /* Sayfa/tablo araç çubukları dar ekranda taşarsa alt satıra sarsın,
       tek satıra sıkıştırıp butonları görünmez kılmasın.
       AppBar'ın kendi toolbar'ı (".mud-toolbar-appbar") burada BİLEREK hariç
       tutuluyor: sarma/otomatik yükseklik uygulanırsa üst başlık çubuğu ve
       içindeki hamburger menü ikonu bozuluyor/görünmez oluyor. */
    .mud-toolbar:not(.mud-toolbar-appbar),
    .mud-table-toolbar {
        flex-wrap: wrap;
        height: auto !important;
        min-height: unset !important;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* AppBar tek satırda, dikey ortalı kalsın; hamburger kenara yapışmasın. */
    .mud-toolbar-appbar {
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding-left: 8px;
        padding-right: 8px;
        gap: 4px;
    }

    .appbar-hamburger-left {
        margin-left: 4px !important;
        margin-right: 8px !important;
    }

    .appbar-hamburger-right {
        margin-left: 8px !important;
        margin-right: 4px !important;
    }

    .appbar-logo {
        width: 36px !important;
        height: 36px !important;
        margin: 0 8px !important;
        align-self: center !important;
        object-fit: contain;
    }

    .mud-button-filled,
    .mud-button-outlined,
    .mud-button-text {
        padding: 4px 8px;
    }

    /* Diyaloglar küçük ekranda tam genişlik/yükseklik kaplasın */
    .mud-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px;
    }
}