/*@import url('jquery.msgbox.css');*/


/*body{ background: url("../images/bg_body_.png") repeat-x scroll center top #CED5DB; }*/

/*body{ background: url("../images/bg_body_.png") repeat-x scroll center top #FBFBFB; }*/

.btn-inline-table {
    display: inline-table;
}



.cover2 {
    display: block;
    z-index: 99999;
    position: fixed;
    background-color: White;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.cover {
    display: block;
    z-index: 99999;
    position: fixed;
    background-color: White;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    opacity: 1;
    filter: alpha(opacity=100);
}

.masthead {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 70px; /*background: url("../images/bg_body_.png") repeat-x scroll center top; */
}

.shadeBox {
    -moz-box-shadow: 0 6px 8px -4px #d1d1d1;
    -webkit-box-shadow: 0 6px 8px -4px #d1d1d1;
    box-shadow: 0 6px 8px -4px #d1d1d1;
}

.loginbox {
    border-top: 4px solid #0072c6;
    left: 50%;
    margin-left: -247px;
    margin-top: -138px;
    padding: 15px;
    position: absolute;
    top: 50%;
}

.controlInline {
    display: inline-table;
}

#bodyBackground {
    min-width: 36px;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 30px;
    overflow: auto;
    padding-bottom: 20px;
}

#grd_inv_panel {
    margin: 120px 20px 0px 20px;
    padding: 5px;
    background-color: White;
}

#grd_invdet_panel {
    padding: 5px;
    background-color: White;
    min-width: 1100px;
}


/*devexpress*/
.dxpcContentPaddings_DevEx {
    padding: 1px;
}

.dxmMenu_Office2010Silver, .dxmVerticalMenu_Office2010Silver {
    border: 0px;
}

.passive {
    opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
    cursor: default;
}

@media print {
    .noPrint {
        display: none;
    }
}


.dxgvPagerBottomPanel_MetropolisBlue {
    background-color: #f1f1f1;
    box-shadow: 5px 0 3px 1px #c1c1c1;
}


@layer workflow {

    .wfItem {
        margin-right: 10px;
        /*box-shadow: 0px 3px 4px 0px #c1c1c1;*/
        border-radius: 3px;
        /*BORDER-TOP: 1PX SOLID #E9E9E9;*/
        /*box-shadow: 0px 3px 4px 0px #c1c1c1;*/
    }

    .wfTitle {
        /**/
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-color: #1565c0;
        color: white;
        height: 22px;
        font-weight: bold;
        padding: 0px 3px 0px 3px;
        white-space: nowrap;
        padding-top: 2px;
    }

    .wfStatus {
        min-width: 120px;
        padding: 3px;
        /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
        white-space: nowrap;
    }

    .apprstate0 {
        /*background-color: #FF6666 !important;*/
        /*background-image: -webkit-linear-gradient(top, #fff 0%, #FF6666 100%) !important;*/
        background-image: -webkit-linear-gradient(top, #fff 0%, #FF6666 100%) !important;
    }

    .apprstate1 {
        background-image: -webkit-linear-gradient(top, #ffff00 0%, #ffc208 100%) !important;
    }

    .apprstate2 {
        background-image: -webkit-linear-gradient(top, #4CAF50 0%, #3d7f40 100%) !important;
        /*background-color: #4CAF50 !important;*/
    }

    .apprstate3 {
        background-image: -webkit-linear-gradient(top, lightcyan 0%, #3298dc 100%) !important;
        /*background-color: lightcyan !important;*/
    }

    .wfText {
        min-width: 120px;
        padding: 3px;
        white-space: nowrap;
    }


    /* Gri arka planlı onay çerçevesi */
    .approver-frame {
        background-color: #f3f3f3;
        border-radius: 10px;
        padding: 12px 10px;
        margin: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        width: 170px;
        display: inline-flex;
        flex-direction: column;
        align-items: center; /* ✅ içerikleri yatayda ortalar */
        text-align: center; /* ✅ yazıları da ortalar */
    }


    /* Onaycı isimleri */
    .approver-name {
        font-weight: 600;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 130px; /* ✅ isim taşarsa badge bozulmasın */
    }


    /* "Akışı Taşı" butonu için görsel vurgu */
    .btn-visual-reorder {
        background-color: #1976d2;
        color: white;
        padding: 5px 12px;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

        .btn-visual-reorder:hover {
            background-color: #125ea8;
        }
}

.loadingGif {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
    width: 64px;
    height: 64px;
}

.scrollBody {
    position: relative;
    overflow: auto;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.gradient-down {
    background: linear-gradient(#f1f1f1, #f9f9f9);
}

.gradient-right {
    background: linear-gradient(to right, #f1f1f1, #f9f9f9);
}

@layer loader {
    .loader-spinner2 {
        margin: 50px;
        height: 28px;
        width: 28px;
        animation: rotate 0.8s infinite linear;
        border: 8px solid #3498db;
        border-right-color: transparent;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        position: absolute;
    }

    .loader-spinner1 {
        box-sizing: border-box;
        height: 60px;
        width: 60px;
        margin: -30px;
        border: 0px solid #0072C6;
        border-radius: 50%;
        box-shadow: 0 -20px 0 24px #0072C6 inset;
        animation: rotate 1s infinite linear;
        left: 50%;
        top: 50%;
        position: absolute;
    }

    .loader-signal {
        border: 5px solid #333;
        border-radius: 30px;
        height: 30px;
        margin: -15px 0 0 -15px;
        opacity: 0;
        position: absolute;
        width: 30px;
        left: 50%;
        top: 50%;
        position: absolute;
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes pulsate {
    0% {
        transform: scale(.1);
        opacity: 0.0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.sendicon {
    background: url(../images/Arrow_0.png) 0 0 no-repeat;
}

@layer toolbar {
    .custom-toolbar {
        background-color: #f8f9fa; /* Açık Gri Arkaplan */
        padding: 10px;
        border-bottom: 1px solid #ddd; /* İnce çizgi */
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    }

    /* Toolbar container'ı için */
    #headerToolbar {
        background-color: #f8f9fa; /* Açık gri arka plan */
        border-bottom: 1px solid #ddd; /* Alt kenarda ince çizgi */
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge */
        padding: 10px;
    }

    .toolbar-button {
        margin-left: 10px; /* Butonlar arasında mesafe */
    }
}

@layer Footer {
    .dxgvFooter td,
    .dxgvGroupFooter td {
        font-weight: bold !important;
        font-size: 14px !important; /* İstediğiniz px değerini ayarlayabilirsiniz */
    }
}

@layer badge {
    .button-badge-full {
        color: #fff !important;
        font-weight: bold;
    }

        .button-badge-full .dx-button-text {
            background-color: orangered !important;
            border-radius: 10px;
            padding: 4px 4px;
        }

    .badge {
        display: inline-block;
        padding: 2px 5px; /* Daha küçük padding */
        border-radius: 10px;
        font-size: 10px; /* Yazı boyutu küçültüldü */
        color: white;
        text-align: center;
        min-width: 18px;
        height: 18px; /* Yükseklik */
        line-height: 18px; /* İçeriğin ortalanması */
        vertical-align: middle; /* Dikey hizalama */
    }

    .badge-red {
        background-color: #FF0000; /* Kırmızı */
    }

    .badge-gray {
        background-color: #808080; /* Gri */
    }

    /* Genel Onay badge stiliniz */
    .badge-status {
        display: inline-flex;
        align-items: center; /* Dikey ortalama */
        justify-content: center; /* Yatay ortalama */
        padding: 4px 10px; /* Padding ile dengeyi sağla */
        border-radius: 12px; /* Yuvarlak kenarlar */
        font-size: 12px; /* Yazı boyutunu ayarladık */
        color: white;
        text-align: center;
        min-width: 100px; /* Sabit genişlik */
        max-width: 100px; /* Sabit genişlik */
        height: 30px; /* Yükseklik sabit */
        line-height: 30px; /* Yüksekliğin ortalanması */
        vertical-align: middle; /* Dikey hizalama */
        white-space: nowrap; /* Metin satır kaydırma yapmasın */
    }

    /* Genel Onay badge stiliniz */
    .badge-status-erp {
        display: inline-flex;
        align-items: center; /* Dikey ortalama */
        justify-content: center; /* Yatay ortalama */
        padding: 4px 10px; /* Padding ile dengeyi sağla */
        border-radius: 12px; /* Yuvarlak kenarlar */
        font-size: 12px; /* Yazı boyutunu ayarladık */
        color: white;
        text-align: center;
        min-width: 70px; /* Sabit genişlik */
        max-width: 70px; /* Sabit genişlik */
        height: 30px; /* Yükseklik sabit */
        line-height: 30px; /* Yüksekliğin ortalanması */
        vertical-align: middle; /* Dikey hizalama */
        white-space: nowrap; /* Metin satır kaydırma yapmasın */
    }

    /* Onay işlemi için pastel renkli badge'ler */
    .badge-pre-approved {
        background-color: #ffcc80; /* Pastel sarı */
    }

    .badge-approved {
        background-color: #80e0a7; /* Pastel yeşil */
    }

    .badge-rejected {
        background-color: #ff6f61; /* Pastel kırmızı */
    }

    .badge-completed {
        background-color: #72c7d2; /* Pastel mavi */
    }

    .badge-unknown {
        background-color: #b8b8b8; /* Pastel gri */
    }
}

@layer fileviewer {
    .dx-gallery-indicator-item-active, .dx-gallery-indicator-item-selected, .dx-gallery-indicator-item {
        margin: 1px 8px;
        width: 17px;
        height: 15px;
    }
}

.dx-texteditor.dx-editor-filled {
    background-color: unset !important;
}

    .dx-texteditor.dx-editor-filled.dx-state-disabled, .dx-texteditor.dx-editor-filled.dx-state-readonly, .dx-texteditor.dx-editor-filled.dx-state-readonly.dx-state-hover {
        background-color: unset !important;
    }

@layer fileupload {
    /* upload-frame sınıfına özel stil */
    .upload-frame {
        border: 2px solid #A3C8FF; /* Çerçeve rengi */
        padding: 5px; /* İçerik etrafında boşluk */
        margin-top: 5px; /* Üstten boşluk */
        border-radius: 8px; /* Kenarları yuvarlatmak için */
        background-color: #f9f9f9; /* #f9f9f9 Arka plan rengi */
        line-height: 1.2; /* Satır yüksekliği azaltılır */
    }
}

@layer mainframe {
    /* budget-frame sınıfına özel stil */
    .budget-frame {
        border: 2px solid #A3C8FF; /* Çerçeve rengi */
        padding: 5px; /* İçerik etrafında boşluk */
        margin-top: 5px; /* Üstten boşluk */
        border-radius: 8px; /* Kenarları yuvarlatmak için */
        background-color: white; /* #f9f9f9 Arka plan rengi */
        line-height: 1.2; /* Satır yüksekliği azaltılır */
    }

    /* Alt grup (sub-budget-frame) için stil */
    .sub-budget-frame {
        border: 1px dashed #7BAAF7; /* Alt grup için kesik çizgi */
        padding: 10px; /* İç boşluk */
        margin: 10px 0 0 0; /* Margin left’i sıfırladık */
        border-radius: 5px; /* Köşeleri daha az yuvarlat */
        background-color: #f9fbff; /* Hafif mavi arka plan */
        position: relative; /* İşaret için konumlandırma */
        overflow: visible !important; /* ✅ dropdown serbest açılsın */
    }

        /* Alt grubun başına işaret eklemek için */
        .sub-budget-frame::before {
            content: "↳"; /* Alt grup işareti */
            color: #7BAAF7;
            position: absolute;
            top: -10px;
            left: -15px;
            font-size: 20px;
        }

        /* Alt gruplar içinde de başka alt gruplar varsa */
        .sub-budget-frame .sub-budget-frame {
            border-left: 3px solid #4A90E2; /* Daha koyu bir sol çizgi */
            background-color: #eef6ff; /* Daha açık bir mavi ton */
            margin-left: 30px; /* Daha fazla iç içe girildiğinde sağa kaydır */
        }

        /* Dropdown listeleri overflow’dan muaf tut */
        .sub-budget-frame .dxeListBox {
            z-index: 1050; /* parent’ın üstünde olsun */
            max-height: 250px !important; /* en fazla 8–10 satır gözüksün */
            min-height: 120px !important; /* en az 3–4 satır gözüksün */
            overflow-y: auto !important; /* sadece liste içinde scrollbar */
        }

        .sub-budget-frame > caption {
            caption-side: top;
            display: table-caption; /* tablo genişliğine oturur */
            text-align: left;
            font-weight: 700;
            font-size: 15px;
            color: #1565c0;
            background: linear-gradient(90deg, #eef6ff, #ffffff);
            padding: 6px 10px;
            border-radius: 6px 6px 0 0;
            border-bottom: 2px solid #A3C8FF;
            margin-bottom: 6px;
            letter-spacing: 0.2px;
            width: 100%; /* tabloyu tamamen kapsa */
            box-sizing: border-box; /* padding dışarı taşmasın */
        }

            /* Hover efekti: hafif parlama */
            .sub-budget-frame > caption:hover {
                background: linear-gradient(90deg, #e3f2fd, #ffffff);
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
                cursor: default;
                color: #0d47a1;
            }



    /* Başlık için stil */
    .budget-title {
        text-align: left;
        color: #A3C8FF;
        font-size: 20px;
        margin-bottom: 5px;
    }

    /* DevExpress popup içeriklerini üstte tutar */
    .dxpcLite {
        z-index: 9999 !important;
    }

    .dxComboBox {
        position: relative;
        z-index: 1000;
    }

    /* Responsive görünüm için */
    @media (max-width: 768px) {
        .budget-frame, .sub-budget-frame {
            padding: 5px;
            font-size: 14px;
        }

        .sub-budget-frame {
            margin-left: 10px;
        }
    }
}


@layer header {
    /* Header için stil */
    .header-title {
        font-size: 20px;
        font-weight: bold;
        color: black; /* Pastel Yesil */
        max-width: 500px !important; /* 'max-width' özelliğini zorla uygula */
        width: auto !important; /* Genişliği de auto yaparak sınırlamaları ortadan kaldır */
    }

    /* Header genel stili */
    .header {
        /*background-color: #2B96ED;  Mavi arka plan*/
        color: #2B96ED;
        padding: 5px 0;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        /*  height: 10px;*/
    }

        /* Başlık kısmı */
        .header .title {
            font-size: 28px; /* Başlık font boyutunu arttırdık */
            margin-left: 10px;
            letter-spacing: 0px; /* Daha düzenli görünüm için harf aralığı ekledik */
            font-family: "Arial", "Helvetica", sans-serif; /* Okunaklı bir font ailesi */
            font-weight: bold; /* Kalın yazı */
            color: #2B96ED; /* Vurgulu bir renk */
            /*text-transform: uppercase;*/ /* Tüm harfleri büyük yapar */
            letter-spacing: 1px; /* Harf aralığını artırarak daha estetik görünüm sağlar */
            text-align: center; /* Başlığı ortalar */
            margin-bottom: 15px; /* Başlık ile içerik arasında boşluk bırakır */
            max-width: 500px;
        }

            /* Başlık içerisindeki B etiketi */
            .header .title b {
                font-size: 20px; /* Başlık içerisindeki b etiketi font boyutunu arttırdık */
            }

        /* İkon stili */
        .header .icon {
            font-size: 20px; /* İkonun boyutunu büyüttük */
        }

            /* İkonu başlıkla hizalamak ve daha belirgin hale getirmek için */
            .header .icon i {
                margin-right: 10px; /* İkon ile başlık arasına boşluk ekledik */
            }

        /* Geliştirilmiş hizalama ve stil */
        .header .icon, .header .title {
            display: inline-flex;
            align-items: center;
        }


    /* Mobil uyumluluk için stil iyileştirmeleri */
    @media screen and (max-width: 768px) {
        .header {
            height: auto;
            flex-direction: column;
            padding: 15px;
        }

            .header .title {
                font-size: 24px;
                margin-left: 0;
                text-align: center;
            }

            .header .icon {
                font-size: 30px;
            }
    }

    /* 🎨 Ortak başlık çerçevesi */
    .header-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: linear-gradient(135deg, #d0e7ff, #b3d4fc); /* Belirgin açık mavi geçiş */
        border: 1px solid #a3c9f9;
        border-radius: 10px;
        padding: 10px 18px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        width: fit-content;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
    }

    /* Yazı stilleri */
    .fancy-header {
        background: linear-gradient(90deg, #005fa3, #00aaff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
        letter-spacing: 0.6px;
        font-size: 20px;
        text-align: center;
    }
    /*Hover efekti (isteğe bağlı)*/
    .header-frame:hover {
        background-color: #e9f5ff;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }
    /* Emoji’lerin dikey hizasını eşitle */
    .header-frame span:first-child,
    .header-frame span:last-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    /* 🪶 Mobil Uyum */
    @media (max-width: 768px) {
        .header-frame {
            flex-direction: column;
            gap: 4px;
            padding: 6px 8px;
        }

        .fancy-header {
            font-size: 18px;
            text-align: center;
        }
    }

    /* 🧱 Popup başlığıyla entegre */
    .dx-popup-title .header-frame {
        background: transparent !important;
        box-shadow: none !important;
        padding: 4px;
    }

    .dx-popup-title .fancy-header {
        font-size: 18px !important;
    }


    /* Toolbar içindeki başlıklar için */
    .dx-toolbar .header-frame {
        background: #f4faff !important; /* 🔹 Hafif mavi arka plan */
        border: 1px solid #d0e7f7;
        border-radius: 8px;
        padding: 6px 14px; /* 🔸 Yüksekliği toolbar’a yakınlaştırır */
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 36px; /* Alt sınır */
        max-height: 42px; /* Üst sınır */
        height: 38px; /* 🔸 Ortalama toolbar yüksekliği */
        box-sizing: border-box;
        margin-top: 2px; /* 🔹 Hafif dikey denge */
    }



    .dx-toolbar .fancy-header {
        font-size: 19px;
    }
}

@layer cell {

    /* === Hesaplanan veya önemli alanlar === */

    /* Grid hücreleri için (ekledik) */
    .bold-editor {
        font-weight: bold !important;
        font-size: 15px !important;
        color: #000 !important;
        padding: 8px !important;
        border-radius: 0 !important;
    }

        /* Form input'ları için (devam ediyor) */
        .bold-editor .dx-texteditor-input {
            font-weight: bold !important;
            font-size: 15px !important;
            color: #000 !important;
            padding: 8px !important;
            border-radius: 0 !important;
        }


    /* === 🔒 Readonly alanlar === */
    .dx-texteditor-input[readonly],
    .dx-numberbox-input[readonly],
    .dx-datebox-input[readonly],
    .dx-textarea[readonly] {
        background-color: #f5f5f5 !important;
        color: #666 !important;
        cursor: not-allowed !important;
        transition: background-color 0.25s ease, color 0.25s ease;
    }

    .dx-state-readonly .dx-checkbox-icon,
    .dx-state-readonly .dx-dropdowneditor-icon {
        opacity: 0.5 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease;
    }

    .dx-state-readonly.dx-texteditor {
        border-color: #ddd !important;
        background-color: #fafafa !important;
        transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    /* === ✨ Hover efekti (sadece aktif alanlarda) === */
    .dx-texteditor:not(.dx-state-readonly):hover,
    .dx-numberbox:not(.dx-state-readonly):hover,
    .dx-datebox:not(.dx-state-readonly):hover,
    .dx-textarea:not(.dx-state-readonly):hover {
        background-color: #f0f8ff !important; /* AliceBlue (çok hafif mavi) */
        box-shadow: 0 0 3px rgba(43, 150, 237, 0.25) !important; /* Hafif mavi gölge */
        border-color: #b6daff !important;
        transition: all 0.25s ease;
    }
}



@layer grid {
    /*Başlık hücrelerinin tamamını kapsar*/
    .dx-datagrid .dx-header-row > td {
        background-color: #e6fff2 !important;
        Tüm hücre arka planını yeşil yap color: black !important;
        Yazı rengi siyah text-align: center !important;
        Metin ortalanır font-weight: bold !important;
        Kalın yazı font-size: 12px !important;
        font-family: "Arial", "Helvetica", sans-serif !important;
        Okunaklı bir font ailesi
    }

    /*Filter row hücreleri*/
    .dx-datagrid .dx-filter-row .dx-editor-cell {
        overflow: hidden;
        padding: 0 !important;
    }

    .dx-datagrid .dx-filter-row .dx-texteditor-input {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /*🔧 Filter row focus çizgisini hücre içinde tut*/
    .dx-datagrid .dx-filter-row .dx-editor-cell .dx-texteditor.dx-state-focused {
        border: 1px solid #2B96ED !important;
        mavi çizgi box-sizing: border-box !important;
        çizgi hücre dışına taşmaz width: 100% !important;
        margin: 0 !important;
    }

    /*Belirli kolonlar için genel veri hücresi stilleri*/
    .dx-data-row td[data-field="FIRMNR"],
    .dx-data-row td[data-field="LOCNR"],
    .dx-data-row td[data-field="DEPTNR"],
    .dx-data-row td[data-field="UNITNR"] {
        color: blue !important;
        font-weight: bold !important;
    }

    .dx-datagrid .dx-row .dx-cell[data-field="FIRMNR"],
    .dx-datagrid .dx-row .dx-cell[data-field="LOCNR"],
    .dx-datagrid .dx-row .dx-cell[data-field="DEPTNR"],
    .dx-datagrid .dx-row .dx-cell[data-field="UNITNR"] {
        color: blue !important;
        font-weight: bold !important;
    }

    /*Çift tıklanabilir satırlar için imleç*/
    .dx-data-grid .dx-data-row {
        cursor: pointer;
    }

    @media (max-width: 768px) {
        .dx-datagrid .dx-header-row > td {
            font-size: 12px !important;
            padding: 5px !important;
        }
    }

    .dx-data-row td:hover {
        background-color: #f0f8ff !important;
        cursor: pointer;
    }

    /*===== DevExtreme DataGrid filter row override =====*/
    .dx-datagrid .dx-filter-row .dx-editor-cell .dx-texteditor.dx-state-focused::after {
        left: 0 !important;
        Hücre içinde hizala right: 0 !important;
        Sağdan taşma engellendi top: 0 !important;
        bottom: 0 !important;
        border: 2px solid #2B96ED !important;
        Mavi çerçeve border-radius: 0 !important;
        Kare köşeler box-shadow: none !important;
        Taşan gölgeyi iptal et
    }
}

/* ==========================================================
   🟩 DevExpress ASPxGridView (WebForms) Grid Header Fix
   ========================================================== */
/*@layer gridwebforms {*/
/* Başlık hücreleri */
/*.dxgvHeader_DevEx,
    .dxgvHeader_MetropolisBlue,
    .dxgvHeader_Office2010Silver,
    .dxgvHeader {
        background-color: #e6fff2 !important;*/ /* Açık yeşil */
/*color: black !important;*/ /* Yazı rengi siyah */
/*text-align: center !important;
        font-weight: bold !important;
        font-size: 12px !important;
        font-family: "Arial", "Helvetica", sans-serif !important;
    }*/

/* Hover efekti */
/*.dxgvHeader_DevEx:hover,
        .dxgvHeader_MetropolisBlue:hover,
        .dxgvHeader_Office2010Silver:hover {
            background-color: #d9f5e9 !important;
        }*/

/* Filtre satırı */
/*.dxgvFilterRow_DevEx td,
    .dxgvFilterRow_MetropolisBlue td,
    .dxgvFilterRow_Office2010Silver td {
        background-color: #f9f9f9 !important;
    }*/

/* Toplam satırı (footer) */
/*.dxgvFooter_DevEx td,
    .dxgvFooter_MetropolisBlue td,
    .dxgvFooter_Office2010Silver td {
        font-weight: bold !important;
        background-color: #f5f5f5 !important;
        text-align: right !important;
    }*/

/* Alternatif satır (zebra efekti istersen) */
/*.dxgvDataRow_DevEx:nth-child(even),
    .dxgvDataRow_MetropolisBlue:nth-child(even),
    .dxgvDataRow_Office2010Silver:nth-child(even) {
        background-color: #fcfcfc !important;
    }*/

/* Satır hover */
/*.dxgvDataRow_DevEx:hover,
    .dxgvDataRow_MetropolisBlue:hover,
    .dxgvDataRow_Office2010Silver:hover {
        background-color: #f0f8ff !important;
    }
}*/
@layer gridwebforms {
    /* 🔹 Grid başlıkları */
    .dx-datagrid .dx-header-row > td,
    .dxgvHeader_DevEx,
    .dxgvHeader_Office2010Silver {
        background-color: #e6fff2 !important;
        color: black !important;
        text-align: center !important;
        font-weight: bold !important;
        font-size: 12px !important;
        font-family: "Arial", "Helvetica", sans-serif !important;
    }

    /* 🔹 Filter row hücreleri */
    .dx-datagrid .dx-filter-row .dx-editor-cell {
        overflow: hidden;
        padding: 0 !important;
    }

    .dx-datagrid .dx-filter-row .dx-texteditor-input {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    * 🔹 Focus/aktif satır düzeltmesi (daha belirgin mavi) */
    .dxgvDataRow_DevEx.dxgvFocusedRow,
    .dxgvDataRow_DevEx.dxgvSelectedRow,
    .dxgvDataRow_MetropolisBlue.dxgvFocusedRow,
    .dxgvDataRow_MetropolisBlue.dxgvSelectedRow,
    .dxgvDataRow_Office2010Silver.dxgvFocusedRow,
    .dxgvDataRow_Office2010Silver.dxgvSelectedRow {
        background-color: #cce8ff !important; /* 🔵 Açık mavi: seçili satır belirgin */
        color: #000 !important;
        font-weight: 600 !important;
        transition: background-color 0.2s ease;
    }

    /* 🔹 Hover satır (daha soft yeşil) */
    .dxgvDataRow_DevEx:hover,
    .dxgvDataRow_MetropolisBlue:hover,
    .dxgvDataRow_Office2010Silver:hover {
        background-color: #e6fff2 !important; /* 🟢 Açık yeşil hover */
        color: #000 !important;
        transition: background-color 0.2s ease;
    }

    /* 🔹 Satır imleci */
    .dx-data-grid .dx-data-row {
        cursor: pointer;
    }

    /* 🔹 Mobil font ayarı */
    @media (max-width: 768px) {
        .dx-datagrid .dx-header-row > td {
            font-size: 12px !important;
            padding: 5px !important;
        }
    }
}


@layer dialog {
    /* Ana pencere için otomatik yükseklik */
    .dxpc-mainDiv {
        border-radius: 12px !important; /* Tüm köşeleri yuvarlak yap */
        height: auto !important;
        max-height: 95vh !important; /* Ekranın %95'ını aşmasın */
        min-height: auto !important;
        overflow: visible !important;
    }

    /* Dialog içeriği için otomatik yükseklik */
    .dxpc-contentWrapper {
        border-radius: 12px !important; /* Tüm köşeleri yuvarlak yap */
        max-height: 80vh !important;
        min-height: auto !important;
        overflow: auto !important;
    }

    /* **Dialog Başlığı (Header)** */
    .dxpc-header {
        background-color: #0072C6 !important;
        color: white !important;
        font-weight: bold;
        text-align: center;
        padding: 12px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    /* **Alt Köşeleri de Yuvarlak Yap** */
    .dxpc-contentWrapper, .dxpc-mainDiv {
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    /* Eğer içerik taşarsa köşelerin görünmesi için overflow ayarı */
    .dxpc-contentWrapper {
        overflow: hidden !important;
    }

    /* **Close (X) Butonu** */
    .dxpc-closeBtn {
        color: white !important;
        font-size: 18px;
        padding: 5px 10px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }
}


@layer popup {
    /* ===== POPUP İÇERİKLERİ GENİŞLİK FIXİ SADECE popup-fix sınıfı verilen popuplar için geçerli ===== */

    /* ===== TAM EKRAN POPUP (Genelde doküman viewer için) ===== */
    .dx-popup-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: calc(100% - 60px) !important; /* alt butonlara yer bırak */
        overflow: auto !important;
        box-sizing: border-box !important;
    }

    /* ===== FORM & KONTROLLÜ POPUPLAR İÇİN (Sınıfla hedeflenir: popup-fix) ===== */
    .popup-fix .dx-popup-content,
    .popup-fix .dx-overlay-content {
        width: auto !important;
        min-width: 300px !important;
        max-width: 90vw !important;
        max-height: none !important; /* bu popup’larda kısıtlama gerekmez */
        overflow: visible !important;
        box-sizing: border-box !important;
    }

        .popup-fix .dx-popup-content .dx-form {
            width: 100% !important;
        }

    /* ===== SAYFA ORTASINA SABİTLENEN POPUPLAR İÇİN (Sınıf: popup-center) ===== */
    .popup-center {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        background: white;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        padding: 20px;
        border-radius: 8px;
        max-width: 90vw;
        max-height: 90vh;
        overflow: auto;
        box-sizing: border-box;
    }

    /* === Popup başlığındaki uzun metinlerin kesilmesini önler === */
    .dx-popup-title {
        white-space: normal !important; /* Satır kaydırılabilir hale getir */
        overflow: visible !important; /* Taşan yazılar gösterilsin */
        text-overflow: unset !important; /* '...' yerine tüm metni göster */
        max-width: 100% !important; /* Genişlik sınırlamasını kaldır */
        display: block !important; /* Başlığı blok hale getir, satır sarsın */
        /* Eklenen grid başlığı ile aynı görünüm için stiller */
        /*background-color: #e6f0fa !important;*/ /* Açık mavi: göz yormaz */
        color: black !important; /* Yazı rengi */
        text-align: center !important; /* Ortalı metin */
        font-weight: bold !important; /* Kalın yazı */
        font-size: 12px !important; /* Font boyutu */
        font-family: "Arial", "Helvetica", sans-serif !important; /* Okunaklı font */
    }

        /* Popup başlığı uzun yazıların kesilmesini önler */
        .dx-popup-title .dx-toolbar-item {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: unset !important;
            max-width: 100% !important;
            display: block !important;
        }

        .dx-popup-title .dx-toolbar-before,
        .dx-popup-title .dx-toolbar-center,
        .dx-popup-title .dx-toolbar-after {
            max-width: 100% !important;
            white-space: normal !important;
        }


    /* Tüm dxPopup içindeki buton içerikleri sola hizalanır */
    .dx-popup .dx-button-content {
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 8px !important;
    }

    /* ===== MOBİL UYUMLULUK ===== */
    @media (max-width: 768px) {

        /* Genel popup içerikleri (doküman/preview için) */
        .dx-popup-content {
            width: 100% !important;
            height: auto !important;
            max-width: 100vw !important;
            max-height: calc(100vh - 80px) !important; /* mobilde daha geniş butonlar olabilir */
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding: 10px !important;
        }

        /* Form tipi popuplarda input optimizasyonu */
        .popup-fix .dx-texteditor-input {
            padding-right: 30px !important;
            font-size: 14px !important;
        }

        .popup-fix .dx-popup-content {
            max-width: 100vw !important;
            padding: 10px !important;
        }

        .dx-texteditor-input {
            padding-right: 30px !important;
            font-size: 14px !important;
        }

        /* Ortalanmış popup mobilde de uyumlu olsun */
        .popup-center {
            max-width: 95vw;
            max-height: 95vh;
            padding: 15px;
        }
    }

    /* === Combo ve TextBox Fixleri === */
    @layer combofix {
        /* ComboBox ve TextBox'ın metin alanının genişliğini artır */
        .dx-selectbox .dx-texteditor-input,
        .dx-textbox .dx-texteditor-input {
            padding-right: 0px !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            white-space: nowrap !important;
            width: 100% !important; /* Genişliği %100 yaparak, container'ı doldurmasını sağla */
            box-sizing: border-box !important; /* Taşmalarını engelle */
        }

        /* Dropdown editor butonlarının genişliği */
        .dx-editor-with-buttons .dx-texteditor-input {
            padding-right: 8px !important;
        }

        .dx-button-clear,
        .dx-dropdowneditor-button {
            width: 24px !important;
            min-width: 24px !important;
        }

        /* ComboBox'ın açıldığında genişlemesini sağla */
        .dx-selectbox-popup {
            width: auto !important; /* Otomatik genişlik */
            min-width: 200px !important; /* Minimum genişlik */
            max-width: 100vw !important; /* Ekran genişliğiyle sınırlı olmasın */
            box-sizing: border-box !important; /* Taşmalarını engelle */
            z-index: 1050 !important; /* Popup'ın ComboBox'ın üstünde olmasını sağlar */
        }
    }



    /* === Form Genişlik ve Taşma Ayarları === */
    @layer formfix {

        .dx-texteditor-input-container {
            max-width: 100% !important;
            flex-grow: 1 !important;
            flex-basis: 0 !important;
        }

        .dx-field-item.dx-col-2,
        .dx-field-item.dx-col-3,
        .dx-field-item.dx-col-4 {
            flex-grow: 1 !important;
            max-width: 100% !important;
        }

        /* Giriş alanlarının içerikleri tam genişlesin */
        .dx-texteditor-input {
            min-width: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }



        .dx-field-value {
            flex-grow: 1 !important;
            min-width: 0 !important;
        }
    }

    /* === Grid Satır ve Buton Yükseklik Fix === */
    @layer gridfix {
        .dx-data-row > td {
            height: 42px !important;
            vertical-align: middle !important;
            padding: 0px !important;
        }

        .dx-data-row .dx-button {
            height: 40px !important;
            min-height: 40px !important;
            line-height: 40px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .dx-data-row .dx-icon {
            margin: auto;
            font-size: 16px;
        }
    }

    @layer comboinsidepopupfix {
        /* Popup içindeki dropdown (SelectBox veya DropDownEdit) penceresinin tam görünmesi için */
        .popup-fix .dx-selectbox-popup,
        .popup-fix .dx-dropdowneditor-overlay,
        .dx-popup-content .dx-selectbox-popup {
            position: fixed !important; /* popup sınırını aşabilsin */
            z-index: 999999 !important; /* her şeyin üstünde kalsın */
            left: auto !important;
            right: auto !important;
            top: auto !important;
            bottom: auto !important;
            overflow: visible !important;
            box-sizing: border-box !important;
        }

        /* Dropdown öğe (satır) yüksekliği ve hizalaması */
        .dx-list-item {
            min-height: 32px !important;
            line-height: 32px !important;
            padding: 0 10px !important;
            box-sizing: border-box !important;
        }

        /* İçerik hizalaması (metin ve ikon sabit kalsın) */
        .dx-list-item-content {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }

        /* Hover veya seçili durumda kayma olmasın */
        .dx-list-item.dx-state-hover,
        .dx-list-item.dx-state-focused {
            background-color: #e6f0fa !important;
            transition: background-color 0.15s ease;
        }

        /* Dropdown buton hizalaması ve yükseklik düzeltme */
        .dx-dropdowneditor-button {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 100% !important;
        }

        /* Clear butonu hizalaması (metin üstüne binmesin) */
        .dx-button-clear {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* Popup açılırken overflow gizlemesin */
        .dx-overlay-content {
            z-index: 999999 !important;
            overflow: visible !important;
        }
    }
}

@layer zoom {

    /* %80 Zoom Class – Sadece masaüstü için */
    @media (min-width: 992px) {
        .page-zoom-80-wrapper {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .page-zoom-80 {
            transform: scale(0.8);
            transform-origin: center center;
        }
    }

    /* Küçük ekranlar için (mobil/tablet) zoom'u kaldır */
    @media (max-width: 991px) {
        .page-zoom-80 {
            transform: none !important;
            width: auto !important;
        }
    }
}

@layer tab {
    /* =====================================================
   DevExpress WebForms Tab (ASPxPageControl) Özelleştirmeleri
   ===================================================== */

    /* Genel sekme görünümü (radius, padding, renk) */
    .dxpc-tab {
        background-color: #f2f4f8 !important; /* Arkaplan: açık gri */
        border-radius: 10px 10px 0 0 !important; /* Üst köşeler yuvarlak */
        padding: 6px 12px !important; /* İç boşluk */
        margin-right: 4px !important; /* Sekmeler arası boşluk */
        color: #333 !important; /* Yazı rengi koyu gri */
        font-weight: bold !important; /* Kalın yazı */
        transition: background-color 0.3s ease; /* Hover efekti geçişi */

        white-space: normal !important; /* Taşma durumunda satır sarar */
        overflow: visible !important; /* Taşan yazılar kesilmez */
        text-overflow: unset !important; /* ... görünmez */
        max-width: none !important; /* Genişlik sınırlaması kaldırılır */
    }

        /* Aktif sekme görünümü */
        .dxpc-tab.dxpc-tab-active {
            background-color: #0072C6 !important; /* Mavi arkaplan */
            color: #fff !important; /* Beyaz yazı */
        }

        /* Hover durumundaki sekme görünümü */
        .dxpc-tab:hover {
            background-color: #cce4f7 !important; /* Hover rengi: açık mavi */
            cursor: pointer;
        }
}



@layer comboboxfix {
    /* ASPxComboBox dropdown penceresi fix */
    .dxeDropDownWindow {
        border-radius: 0 !important; /* köşe yuvarlatmayı kaldır */
        padding: 0 !important; /* boşluğu sıfırla */
        margin: 0 !important;
    }

    .dxeListBox {
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: none !important; /* sınırlamayı kaldır */
        min-height: 0 !important;
        overflow-y: auto !important; /* içerik fazlaysa scrollbar */
    }

    .dxeListBoxItem,
    .dxeListBoxItemSelected,
    .dxeListBoxItemHover {
        height: 28px !important; /* satır yüksekliği sabit */
        line-height: 28px !important; /* metin tam ortalansın */
        padding: 0 6px !important; /* sadece sağ/sol boşluk */
        box-sizing: border-box !important;
    }
}

@layer notifyfix {
    /* === 🔧 DevExpress Notify (dx-toast) Görünüm Fixi === */

    .dx-toast,
    .dx-toast-content {
        all: unset;
        display: block;
        border-radius: 8px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
        font-family: "Segoe UI", Arial, sans-serif !important;
        font-weight: 500 !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        position: fixed !important;
        z-index: 999999 !important;
        animation: fadein 0.3s ease, fadeout 0.3s ease 2.7s !important;
    }

    /* 🔴 Hata mesajı */
    .dx-toast-error {
        background-color: #f44336 !important;
    }

    /* 🟢 Başarılı işlem */
    .dx-toast-success {
        background-color: #4caf50 !important;
    }

    /* 🟡 Uyarı */
    .dx-toast-warning {
        background-color: #ffc107 !important;
        color: black !important;
    }

    /* 🔵 Bilgi mesajı */
    .dx-toast-info {
        background-color: #2196f3 !important;
    }

    /* Mesaj içeriği rengi korunsun */
    .dx-toast-message {
        color: inherit !important;
    }

    /* Basit fade efekti */
    @keyframes fadein {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeout {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(10px);
        }
    }
}

@layer toppanel {
    /* ============================================================
   🔷 SECTION: TopPanel (Talep Listesi)
   Target: <dx:ASPxPanel CssClass="topPanel topPanel-custom">
   Purpose: Modern ve ferah bir üst toolbar görünümü sağlar.
   Scope:   Sadece .topPanel-custom altında geçerlidir.
   ============================================================ */
    /* ============================================================
   🔷 TOP PANEL - Talep Listesi (Eski markup uyumlu modern görünüm)
   ============================================================ */

    .topPanel {
        background-color: #f9fafb !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        padding: 6px 12px;
    }

        /* 🔹 Genel hizalama: başlık ve menü aynı satırda */
        .topPanel .title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: "Segoe UI", Roboto, sans-serif;
            color: #333;
        }

            /* 🔹 Başlık ikonu ve yazı */
            .topPanel .title img {
                width: 22px;
                height: 22px;
            }

            .topPanel .title span {
                font-size: 18px;
                font-weight: 600;
            }

        /* 🔹 Menü satırı */
        .topPanel .dxmLite .dxm-item {
            background: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 4px 10px;
            margin: 0 3px;
            transition: all 0.2s ease-in-out;
        }

            .topPanel .dxmLite .dxm-item:hover {
                background: #2b96ed;
                color: #fff !important;
                border-color: #2b96ed;
            }

            .topPanel .dxmLite .dxm-item img {
                vertical-align: middle;
                margin-right: 4px;
            }

        /* 🔹 Firma seçimi alanı */
        .topPanel .title[style*="display: none;"]:has(#cbx_firm) {
            display: flex !important;
            align-items: center;
            gap: 8px;
        }

        .topPanel .dxeButtonEdit,
        .topPanel .dxeEditArea {
            font-weight: 500;
            font-size: 14px;
        }

    /* 🔹 Checkbox alanı */
    #checkboxContainer {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        #checkboxContainer label {
            font-weight: 500;
            color: #444;
        }
    /* ============================================================
   🔸 ALT BAR (Filtre Alanı)
   Eski markup’ta değişiklik yapmadan,
   TopPanel’in altına ek görsel alan sağlar.
   ============================================================ */

    .topPanel .filter-bar {
        margin-top: 8px;
        padding: 6px 12px;
        background-color: #f4faff;
        border-top: 1px solid #d0e7f7;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
    }

        /* 🔹 Filtre label ve input hizalaması */
        .topPanel .filter-bar label {
            font-weight: 500;
            color: #333;
            margin-right: 4px;
        }

        .topPanel .filter-bar .dx-datebox,
        .topPanel .filter-bar .dx-textbox,
        .topPanel .filter-bar .dx-combobox {
            min-width: 160px;
        }

        .topPanel .filter-bar .dx-button {
            height: 32px !important;
            border-radius: 6px;
        }

        /* 🔹 Hover ve focus efektleri */
        .topPanel .filter-bar input:focus,
        .topPanel .filter-bar .dx-texteditor-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(43,150,237,0.25);
            border-color: #2b96ed;
        }

    /* 🔹 Responsive uyum */
    @media (max-width: 580px) {
        .topPanel .filter-bar {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }
    }

    /* ============================================================
   📱 Responsive (mobil uyum)
   ============================================================ */
    @media (max-width: 580px) {
        .topPanel .title {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }

        .topPanel .dxmLite {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 6px;
        }

        #checkboxContainer {
            justify-content: flex-start;
        }

        .topPanel .title span {
            font-size: 16px;
        }
    }

    /* ============================================================
   🎨 MODERN BUTON TASARIMI
   Hedef: ASPxButton, Menü içi butonlar, Export, Filtre bar
   ============================================================ */

    /* Genel buton stili */
    .topPanel .dx-button,
    .topPanel .dxmLite .dxm-item,
    .topPanel .filter-bar .dx-button {
        font-family: "Segoe UI", Roboto, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #fff !important;
        background: linear-gradient(145deg, #2b96ed, #1a75cf);
        border: none !important;
        border-radius: 8px !important;
        padding: 6px 14px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        min-height: 32px;
    }

        /* Hover efekti */
        .topPanel .dx-button:hover,
        .topPanel .dxmLite .dxm-item:hover,
        .topPanel .filter-bar .dx-button:hover {
            background: linear-gradient(145deg, #1a75cf, #2b96ed);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            transform: translateY(-1px);
        }

        /* Aktif tıklama efekti */
        .topPanel .dx-button:active,
        .topPanel .dxmLite .dxm-item:active {
            background: #1a75cf !important;
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

    /* Menü ayraçları (|) için gri sade görünüm */
    .topPanel .dxmLite .dxm-separator {
        color: #bbb !important;
        font-weight: 300 !important;
        margin: 0 4px !important;
    }

    /* Export butonlarını hizala */
    .topPanel .gexporter,
    .topPanel .topbar-right > div {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Checkbox stili */
    .topPanel #checkboxContainer label input[type="checkbox"] {
        accent-color: #2b96ed;
        transform: scale(1.2);
        cursor: pointer;
    }

    /* ============================================================
   📱 Responsive uyum (küçük ekran)
   ============================================================ */
    @media (max-width: 580px) {
        .topPanel .dx-button,
        .topPanel .dxmLite .dxm-item {
            font-size: 13px !important;
            padding: 5px 10px !important;
            border-radius: 6px !important;
        }
    }
}

@layer toppanelmenu {
    /* ============================================================
       🎨 HRWebGate Modern ASPxMenu Override (Fatura Listesi vb.)
       ============================================================ */

    /* 🔹 Menü genel yapısı (satır hizalaması) */
    .topPanel .dxmLite.dxm-horizontal {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 4px 0 !important;
    }

        /* 🔹 Menü item’ları (flat buton görünümü) */
        .topPanel .dxmLite.dxm-horizontal td.dxm-item,
        .topPanel .dxmLite.dxm-horizontal .dxm-item,
        .topPanel .dxmLite.dxm-horizontal .dx-vam {
            background: linear-gradient(145deg, #32ba7c, #239f68) !important; /* Yeşil ton */
            border: none !important;
            border-radius: 8px !important;
            padding: 6px 14px !important;
            margin: 0 5px !important;
            color: #fff !important;
            font-family: "Segoe UI", Roboto, sans-serif !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            text-align: center !important;
            white-space: nowrap !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
            transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

            /* 🔹 Hover efekti */
            .topPanel .dxmLite.dxm-horizontal td.dxm-item:hover {
                background: linear-gradient(145deg, #239f68, #32ba7c) !important;
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
            }

            /* 🔹 Aktif tıklama efekti */
            .topPanel .dxmLite.dxm-horizontal td.dxm-item:active {
                background: #239f68 !important;
                transform: translateY(0);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }

            /* 🔹 Menü ikonları */
            .topPanel .dxmLite.dxm-horizontal td.dxm-item img {
                width: 18px !important;
                height: 18px !important;
                filter: brightness(0) invert(1) !important; /* İkonu beyaz yapar */
                margin-right: 6px !important;
                vertical-align: middle !important;
            }

            /* 🔹 Hover’da ikon parlaklığı */
            .topPanel .dxmLite.dxm-horizontal td.dxm-item:hover img {
                filter: brightness(1.3) !important;
            }

    /* 🔹 Menü separatorlarını gizle */
    .topPanel .dxmLite .dxm-separator {
        display: none !important;
    }

    /* 🔹 Checkbox ve başlık hizalama */
    .topPanel .dxmLite + #checkboxContainer {
        margin-left: auto !important;
    }

    /* 🔹 Responsive uyum (mobil görünüm) */
    @media (max-width: 580px) {
        .topPanel .dxmLite.dxm-horizontal {
            flex-wrap: wrap !important;
            justify-content: flex-start !important;
            gap: 4px !important;
        }

            .topPanel .dxmLite.dxm-horizontal td.dxm-item {
                font-size: 13px !important;
                padding: 5px 10px !important;
                border-radius: 6px !important;
            }
    }
}

@layer inputPanel {
    #inputPanel {
        width: 100%;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 10px;
        box-sizing: border-box;
        position: relative; /* ekle */
    }

    #buttonPanel {
        position: sticky !important; /* sticky yerine relative */
        bottom: auto !important;
        background-color: #fff;
        z-index: 10;
        border-top: 1px solid #d1d1d1;
        padding: 10px 0 8px 0;
        margin-top: 15px;
    }
}