/* B2BPlatform - uygulamaya ait ozel stiller (MaterialPro vendor dosyalarina dokunulmaz).
 *
 * Bu dosyadaki kurallarin tek amaci "ilk boyama" (first paint) kararliligidir:
 * MaterialPro'nun app.min.js dosyasi body sonunda calisir ve logo/tema ikonlarinin
 * gorunurlugunu ancak o anda inline style ile ayarlar. Bu kurallar olmadan sayfa
 * once her iki logoyu (dark-logo + light-logo) yan yana ve her iki tema ikonunu
 * birlikte cizer, script calisinca biri gizlenir; kullanici bunu "logo buyuyup
 * kuculuyor" seklinde bir titreme olarak gorur.
 *
 * app.min.js daha sonra inline style yazdigi icin (inline > stylesheet) tema
 * degistirme davranisi bozulmaz; buradaki kurallar yalnizca script calisana
 * kadar gecerlidir.
 */

/* ---- Topbar logosu: temaya uygun tek logo bastan gorunur ---- */
html[data-bs-theme="light"] .logo-img .light-logo,
html[data-bs-theme="dark"] .logo-img .dark-logo {
    display: none;
}

html[data-bs-theme="light"] .logo-img .dark-logo,
html[data-bs-theme="dark"] .logo-img .light-logo {
    display: flex;
}

/* ---- Topbar tema degistirici: ay/gunes ikonlarindan yalnizca biri ---- */
html[data-bs-theme="light"] .topbar .sun,
html[data-bs-theme="dark"] .topbar .moon {
    display: none;
}

html[data-bs-theme="light"] .topbar .moon,
html[data-bs-theme="dark"] .topbar .sun {
    display: flex;
}

/* ---- Iconify: bilesen tanimlanana kadar yer ayrilir ----
 * iconify-icon bir web component ve iconify-icon.min.js body sonunda yuklenir.
 * Tanimsiz custom element 0x0 boyutundadir; bu yuzden ikonlar sonradan "acilirken"
 * topbar ve sidebar icerigi kayar. Asagidaki kural ikon kadar yer ayirir
 * (font-size degeri tema CSS'inden gelir).
 */
iconify-icon:not(:defined) {
    display: inline-block;
    width: 1em;
    height: 1em;
}

/* ---- Ortak filtre paneli: Goster/Gizle butonunun metni ----
 * Bootstrap collapse toggler'i kapaliyken .collapsed sinifini ekler. Metni
 * JavaScript ile degistirmek yerine hangi etiketin gorunecegi burada secilir;
 * boylece sayfa acilirken dogru metin ilk boyamada yazilir.
 */
.filter-panel-toggle .filter-panel-toggle-show,
.filter-panel-toggle.collapsed .filter-panel-toggle-hide {
    display: none;
}

.filter-panel-toggle.collapsed .filter-panel-toggle-show,
.filter-panel-toggle .filter-panel-toggle-hide {
    display: inline;
}

/* ---- Ortak filtre paneli: tarih araligi alani ----
 * Alan readonly'dir: deger yalnizca takvimden secilerek olusur, elle yazilan bir metin
 * filtreye donusmez. Bootstrap readonly alanlari soluk bir zeminle cizdigi icin alan
 * devre disi gibi gorunurdu; zemin geri alinir ve imlec tiklanabilir oldugunu gosterir.
 */
.filter-panel-daterange[readonly] {
    background-color: var(--bs-body-bg);
    cursor: pointer;
}

/* ---- Anasayfa: uretici satis ozeti tablosu ----
 * Gorsel dilde her hucre ayri bir kutu olarak durur. Bootstrap tablosu hucreleri
 * bitisik cizdigi icin border-collapse ayrilir ve hucrelere kendi cercevesi verilir.
 * Renkler kasitli olarak burada tanimlanmaz: satirlar .table-warning / .table-active
 * gibi Bootstrap yardimci siniflarini kullanir, boylece acik ve karanlik temada dogru
 * kalir (bkz. Views/Home/Index.cshtml).
 */
.dashboard-sales-table {
    border-collapse: separate;
    border-spacing: 0.375rem;
}

.dashboard-sales-table > :not(caption) > tr > th,
.dashboard-sales-table > :not(caption) > tr > td {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

/* Donem basligi hucresi yalnizca baglantiyi tasir: cerceve ve dolgu baglantinin
 * kendisindedir, boylece tum hucre tiklanabilir gorunur. */
.dashboard-sales-table > thead > tr > th.dashboard-period-cell {
    border: 0;
    padding: 0;
}

.dashboard-period-link {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-period-link:hover,
.dashboard-period-link:focus {
    text-decoration: none;
    filter: brightness(1.15);
}

/* Uretici adi sutunu: tutar sutunlari daralsa da ad tek satirda kalsin. */
.dashboard-sales-table .dashboard-sales-label {
    min-width: 14rem;
    text-align: start;
    font-weight: 600;
}

/* Tarih kutusu readonly'dir: deger yalnizca takvimden secilerek olusur. Bootstrap
 * readonly alanlari soluk bir zeminle cizdigi icin alan devre disi gibi gorunurdu
 * (bkz. .filter-panel-daterange icindeki ayni duzeltme). */
.dashboard-date-input[readonly] {
    background-color: var(--bs-body-bg);
    cursor: pointer;
}

/* ---- Anasayfa: tiklanabilir satis hucreleri ----
 * Her hucre bir baglantidir; alttaki paneller tiklanan (uretici x donem) cifti ile
 * daralir. Baglanti hucrenin tamamini kaplar ki tiklama alani metinle sinirli kalmasin.
 * Hucrenin dolgusu bu yuzden .dashboard-sales-table kuralindan alinip baglantiya verilir
 * (bkz. Views/Shared/_DashboardSalesRow.cshtml).
 */
.dashboard-sales-cell {
    display: block;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
}

.dashboard-sales-cell:hover,
.dashboard-sales-cell:focus {
    color: inherit;
    text-decoration: none;
    background-color: var(--bs-secondary-bg);
    border-radius: 0.5rem;
}

/* Alt panellerin kaynagi olan satir: secili hucre ayrica .table-primary ile boyanir,
 * bu kural satirin tamamini kenarliktan belli eder. */
.dashboard-sales-table > :not(caption) > tr.dashboard-row-selected > th,
.dashboard-sales-table > :not(caption) > tr.dashboard-row-selected > td {
    border-color: var(--bs-primary);
}

/* ---- Satis kirilimi detayi: "Genel Toplam" bandi ----
 * Listenin ustunde koyu zeminli tek satir. Bootstrap'in koyu yuzey degiskeni kullanilir,
 * boylece acik ve karanlik temada okunur kalir (bkz. Views/SalesBreakdown/Index.cshtml).
 */
.dashboard-grand-total {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
}

/* ---- Durum rozeti zeminleri: .bg-light-* ----
 * Uygulama genelinde durum rozetleri "bg-light-<renk> text-<renk>" ikilisiyle yaziliyor
 * (bkz. products-list.js, Discounts/Index.cshtml, Views/Cart/Index.cshtml). Paketle gelen
 * MaterialPro yapisinda bu siniflar TANIMLI DEGIL; rozetler bu yuzden zeminsiz ciziliyordu.
 * Karsiliklari Bootstrap'in kendi "subtle" degiskenlerinden alinir: acik ve karanlik temada
 * birlikte calisir. Vendor dosyasina dokunulmaz (bkz. CLAUDE.md - MaterialPro kurallari).
 */
.bg-light-primary { background-color: var(--bs-primary-bg-subtle) !important; }
.bg-light-secondary { background-color: var(--bs-secondary-bg-subtle) !important; }
.bg-light-success { background-color: var(--bs-success-bg-subtle) !important; }
.bg-light-info { background-color: var(--bs-info-bg-subtle) !important; }
.bg-light-warning { background-color: var(--bs-warning-bg-subtle) !important; }
.bg-light-danger { background-color: var(--bs-danger-bg-subtle) !important; }

/* ---- Siparis Ver: izgara gorunumu ----
 * Kart duzeni MaterialPro eco-shop sayfasindan alinir ve tema siniflariyla cizilir
 * (card / hover-img / ratio); burada yalnizca o sayfada gorsel olan, bizde olmayan
 * alanin yer tutucusu ve baslik kirpmasi tanimlanir.
 *
 * Urunun gorseli yoktur: ERP sozlesmesinde boyle bir alan bulunmadigi icin gorsel
 * alaninda tema yuzey rengiyle bir yer tutucu durur (bkz. wwwroot/js/order-entry.js).
 */
.order-entry-thumb {
    background-color: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Urun adlari uzundur ve kart yuksekliklerini kaydirirdi: baslik iki satirda kirpilir,
 * tamami baslik (title) ozniteliginde kalir. Min yukseklik, tek satirlik adlarda da
 * fiyat satirinin ayni hizada durmasini saglar. */
.order-entry-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

/* Izgara kartindaki urun resmi. Cerceve 4:3'e sabitlenmistir (Bootstrap .ratio); resim
 * carpitilmadan cerceveye sigdirilir, bu yuzden "cover" degil "contain" kullanilir:
 * kitap kapaklari gibi dikey gorsellerin kenarlari kirpilmaz.
 */
.order-entry-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- Urunler ekrani: duzenleme sayfasindaki resim onizlemesi ----
 * Karttaki cerceve oraninin aynisini kullanir (Bootstrap .ratio ile 4:3) ki yonetici,
 * musterinin izgara gorunumunde gorecegi kirpmayi burada gorsun. Genislik sarmalayan
 * karta birakilir (bkz. Views/Products/Edit.cshtml).
 */
.product-image-preview {
    background-color: var(--bs-secondary-bg);
}

.product-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- Uzun metni iki satirda kirpma ----
 * Cari unvani gibi uzun alanlar tek satirda kaldiginda liste tablolari yatay kaydirmaya
 * dusuyordu. Metin iki satirda kirpilir, tamami title ozniteliginde okunur; satir
 * yuksekligi de boylece sabit kalir (ayni cozum urun kartlarinda: .order-entry-card-title).
 *
 * Kullananlar: cari listesi (wwwroot/js/accounts-list.js), bayi sozlesmeleri ve tahsilat
 * makbuzlari listeleri (Views/DealerContracts/Index.cshtml, Views/CollectionReceipts/Index.cshtml).
 */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Cari listesi: ekrana sigan tablo ----
 * Dokuz sutunla birlikte tablo .text-nowrap ile yatay kaydirmaya dusuyordu. Cozum tek
 * bir sutunu esnek birakmak: unvan sarilir, geri kalan sutunlar JS tarafinda .text-nowrap
 * ile tek satirda tutulur (bkz. wwwroot/js/accounts-list.js).
 *
 * Genislikler yuzde olarak verilir: DataTables autoWidth kapalidir ve sabit piksel
 * degerleri dar ekranlarda tasardi.
 */
.accounts-table .accounts-col-contract {
    width: 1%;
}

.accounts-table .accounts-col-name {
    /* Unvan geri kalan yerin tamamini alir; asil sinir .text-clamp-2 satir kirpmasidir. */
    width: 30%;
    min-width: 12rem;
}

/* ---- Belge listeleri: bayi sozlesmeleri ve tahsilat makbuzlari ----
 * Ikisi de on sutuna yaklasan, sunucuda sayfalanmayan duz Razor tablolaridir. Cari
 * listesindeki yaklasimin aynisi uygulanir: tablodan .text-nowrap kaldirilir, tek satirda
 * kalmasi gereken sutunlar (sezon, tarih, tutarlar, durum, islem) hucre bazinda isaretlenir
 * ve sarilmasina izin verilen tek sutun bayi sutunu olur.
 */
.document-list-table .document-list-account {
    width: 20%;
    min-width: 10rem;
}

/* Yayin gruplari sutunu rozetlerle dolar: kendi genisligiyle sinirlanir ki tutar
 * sutunlarini ezmesin. */
.document-list-table .document-list-tags {
    max-width: 18rem;
}

/* ---- Siparis detayi: yoneticinin durum guncelleme listesi ----
 * Liste 18 durum icerdigi icin kucuk ekranlarda ve laptop yuksekliklerinde acilir menu
 * goruntu alanindan tasar ve alttaki durumlara erisilemez. Bootstrap'in dropdown'i
 * kendiliginden kaydirmadigi icin yukseklik sinirlanip menu kaydirilabilir yapilir.
 */
.order-status-menu {
    max-height: 60vh;
    overflow-y: auto;
}

/* ---- Giris sayfasi: gorsel paneli ve logo ----
 * Duzen MaterialPro'nun auth siniflariyla (auth-max-width, bg-primary-subtle) kurulur;
 * burada panel zeminleri ve illustrasyonun panele sigdirilmasi tanimlanir. Zemin renkleri
 * marka tasarimindan gelir ve tema/karanlik moddan bagimsiz sabittir; form paneli bu
 * yuzden data-bs-theme="light" ile cizilir. Sari zemin temanin birincil rengine (#ffc107)
 * cok yakin oldugu icin "Giris Yap" butonu btn-primary degil btn-dark kullanir. "contain" ile
 * illustrasyonun kenarlari kirpilmaz, yuksekligi ekrani asmaz (bkz. Views/Account/Login.cshtml).
 */
.auth-illustration-panel {
    background-color: #2f3d4a;
}

/* Tema metin rengi (gri tonlu) sari zeminde soluk kaldigi icin panelin baslik, aciklama,
 * etiket ve cerceveli buton renkleri tek bir koyu tona cekilir. */
.auth-form-panel {
    --auth-form-text: #1a1a1a;
    --bs-heading-color: var(--auth-form-text);
    background-color: #ffbe00;
    color: var(--auth-form-text);
}

.auth-form-panel h3,
.auth-form-panel p,
.auth-form-panel .form-label {
    color: var(--auth-form-text);
}

.auth-form-panel .btn-dark {
    --bs-btn-bg: var(--auth-form-text);
    --bs-btn-border-color: var(--auth-form-text);
}

.auth-form-panel .btn-outline-dark {
    --bs-btn-color: var(--auth-form-text);
    --bs-btn-border-color: var(--auth-form-text);
    --bs-btn-hover-bg: var(--auth-form-text);
    --bs-btn-hover-border-color: var(--auth-form-text);
    font-weight: 600;
}

.auth-illustration {
    width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
}

.auth-brand-logo {
    max-width: 260px;
}

/* Bayilik basvurusu formu (bkz. Views/Account/DealerApplication.cshtml). Giris sayfasinin
 * sari panelini tam genislikte kullanir; alanlar iki sutun oldugu icin cok genis ekranda
 * satirlar okunmaz hale gelmesin diye icerik genisligi sinirlanir. */
.dealer-application-container {
    max-width: 1320px;
}

.auth-form-panel .dealer-application-back-link {
    color: var(--auth-form-text);
}

/* ---- Mobil uyumlu tablolar (.table-mobile-cards) ----
 * Dar ekranda cok sutunlu tablolar yatay kaydirmaya dusup okunamaz hale geliyordu.
 * 768px altinda thead gizlenir, her satir MaterialPro kart gorunumunde bir blok olur ve
 * her hucrenin basinda sutun adi (data-label) yazilir. Etiketler responsive-table.js
 * tarafindan thead'den uretilir; DataTables listelerinde sinif otomatik eklenir
 * (bkz. wwwroot/js/datatables-server-side.js). Masaustu gorunumu degismez.
 */
@media (max-width: 767.98px) {
    .table-mobile-cards,
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: block;
        width: 100% !important;
    }

    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards > tbody > tr {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        background-color: var(--bs-body-bg);
    }

    .table-mobile-cards > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-width: 0 !important;
        padding: 0.4rem 0;
        border-bottom: var(--bs-border-width) dashed var(--bs-border-color);
        text-align: end !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .table-mobile-cards > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    .table-mobile-cards > tbody > tr > td::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 45%;
        font-weight: 600;
        text-align: start;
        color: var(--bs-secondary-color);
    }

    /* Etiketsiz hucre (or. bos baslikli sutun) ve "Kayit bulunamadi" gibi colspan
     * satirlari tam genislikte, ortalanmis cizilir. */
    .table-mobile-cards > tbody > tr > td[data-label=""]::before,
    .table-mobile-cards > tbody > tr > td:not([data-label])::before {
        content: none;
    }

    .table-mobile-cards > tbody > tr > td[data-label=""],
    .table-mobile-cards > tbody > tr > td:not([data-label]) {
        justify-content: center;
        text-align: center !important;
    }

    /* Satir kartlari arasindaki bosluk tablo kenarligi gibi gorunmesin. */
    .table-mobile-cards.table > :not(caption) > * > * {
        box-shadow: none;
    }

    /* DataTables alt bilgi ve sayfalama satiri dar ekranda alt alta ortalanir. */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        white-space: normal;
    }

    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center !important;
        flex-wrap: wrap;
    }
}