@layer workflow, loader, toolbar, Footer, badge, budget-remain, fileviewer, fileupload, mainframe, header, cell, grid, gridwebforms, dialog, popup-size, popup, combofix, formfix, gridfix, comboinsidepopupfix, comboboxfix, notifyfix, zoom, tab, toppanel, toppanelmenu, inputPanel, main-menu, headerpanel;


/*@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; }*/


/* ==========================================================
   🖥️ DESKTOP FIRST GLOBAL LAYOUT LOCK
   ========================================================== */
html, body {
    min-width: 1200px;
}

/* 📱 Mobile override – sadece gerçekten küçük ekranlarda */
@media (max-width: 768px) {
    html, body {
        min-width: unset;
    }
}

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

.audit-group {
    opacity: 0.85;
}

.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;
        width: 30px;
        margin: -15px 0 0 -15px;
        opacity: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        animation: pulsate 1s ease-out 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: #f1f3f5 !important; /* 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 */
        /* 🔥 STICKY KISIM */
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* Toolbar container'ı için */
    #headerToolbar {
        background-color: #f1f3f5 !important; /* 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;
        /* 🔥 STICKY KISIM */
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .toolbar-button {
        margin-left: 10px; /* Butonlar arasında mesafe */
    }
    .toolbar-title {
        font-size: 16px;
        font-weight: 600;
        color: #495057;
        opacity: 0.85;
        margin-right: 12px;
    }

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

@layer layout {

    .page-body #gridContainer {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }
}


@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 */
    }

    /* 📎 Evrak geldi (yeşil pastel) */
    .badge-doc-ok {
        background-color: #a5d6a7 !important; /* pastel yeşil */
        color: #1b5e20 !important; /* koyu yeşil yazı */
    }

    /* 📎 Evrak yok (pastel kırmızı / pembe ton) */
    .badge-doc-missing {
        background-color: #ffcccb !important; /* pastel kırmızı */
        color: #b71c1c !important; /* koyu kırmızı yazı */
    }

    /* 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: 25px; /* Yükseklik sabit */
        line-height: 25px; /* 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: 25px; /* Yükseklik sabit */
        line-height: 25px; /* 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 budget-remain {

    /* SpinEdit’in wrapper’ına takacağımız class */
    .remain-wrap {
        position: relative;
        border-radius: 8px;
    }

        /* SpinEdit'in gerçek input'u (içeride) */
        .remain-wrap input {
            font-weight: bold !important;
            text-align: center !important;
            border-radius: 8px !important;
        }
    /* ASPxSpinEdit */
    /* DevExtreme dxNumberBox */
    .remain-positive input,
    .remain-positive .dx-texteditor-input {
        background-color: #e6fff2 !important;
        color: #0a7a3c !important;
        border: 1px solid #8fe3b3 !important;
        font-weight: bold !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
    /* ASPxSpinEdit */
    /* DevExtreme dxNumberBox */
    .remain-negative input,
    .remain-negative .dx-texteditor-input {
        background-color: #ffe6e6 !important;
        color: #b30000 !important;
        border: 1px solid #ff9999 !important;
        font-weight: bold !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
    /* ASPxSpinEdit */
    /* DevExtreme dxNumberBox */
    .remain-neutral input,
    .remain-neutral .dx-texteditor-input {
        background-color: #f5f5f5 !important;
        color: #333 !important;
        border: 1px solid #ccc !important;
        font-weight: bold !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
    /* Wrapper (tooltip + shake için) */
    .remain-tooltip {
        position: relative;
    }
        /* Tooltip'u wrapper üstünden üret */
        .remain-tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            background: #333;
            color: #fff;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: normal;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 9999;
        }

        .remain-tooltip:hover::after {
            opacity: 1;
        }

    @keyframes budget-shake {
        0% {
            transform: translateX(0);
        }

        20% {
            transform: translateX(-4px);
        }

        40% {
            transform: translateX(4px);
        }

        60% {
            transform: translateX(-4px);
        }

        80% {
            transform: translateX(4px);
        }

        100% {
            transform: translateX(0);
        }
    }

    /* Shake’i wrapper’a uygula (transform çakışması biter) */
    .remain-shake {
        animation: budget-shake 0.35s ease-in-out;
    }
}

@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 mainframenew {

    /* ==========================================================
       🧾 BÜTÇE ANA FRAME VE ALT FRAME GENEL GÖRÜNÜM
       ========================================================== */

    /* Ana bütçe çerçevesi */
    .budget-frame {
        border: 2px solid #A3C8FF; /* Çerçeve rengi */
        padding: 5px;
        margin-top: 5px;
        border-radius: 8px;
        background-color: white;
        line-height: 1.2;
    }

    /* Alt grup (sub-budget-frame) */
    .sub-budget-frame {
        border: 1px dashed #7BAAF7;
        padding: 10px;
        margin: 0; /* 🔹 Eski: 10px 0 0 0 → kaldırıldı */
        margin: 4px 0; /* 🔹 Çok az dikey boşluk bırakır */
        border-radius: 5px;
        background-color: #f9fbff;
        position: relative;
        overflow: visible !important; /* ✅ dropdown serbest açılsın */
        box-sizing: border-box;
        flex: 1; /* 🔹 hizalama için eklendi */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

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

        /* İç içe alt gruplar */
        .sub-budget-frame .sub-budget-frame {
            border-left: 3px solid #4A90E2;
            background-color: #eef6ff;
            margin-left: 30px;
        }

        /* Dropdown listeleri overflow’dan muaf tut */
        .sub-budget-frame .dxeListBox {
            z-index: 1050;
            max-height: 250px !important;
            min-height: 120px !important;
            overflow-y: auto !important;
        }

        /* Başlık kısmı */
        .sub-budget-frame > caption {
            caption-side: top;
            display: table-caption;
            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%;
            box-sizing: border-box;
        }

            /* Hover efekti */
            .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;
            }

    /* ==========================================================
       ⚖️ YÜKSEKLİK EŞİTLEME (YAN YANA TABLOLAR)
       ========================================================== */
    .overview {
        display: flex;
        flex-wrap: wrap; /* Satır kırılması serbest */
        align-items: stretch; /* 🔹 En yüksek tabloya göre hizalama */
        gap: 1px; /* 🔹 Aralarında boşluk */
    }

        .overview .sub-budget-frame {
            flex: 1; /* Eşit genişlik paylaşımı */
            min-height: 160px; /* Minimum yükseklik */
        }

    /* ==========================================================
       🧱 DİĞER GENEL GÖRÜNÜM
       ========================================================== */
    .budget-title {
        text-align: left;
        color: #A3C8FF;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .dxpcLite {
        z-index: 9999 !important;
    }

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

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

        .overview {
            flex-direction: column; /* Alt alta gelsin */
        }

        .sub-budget-frame {
            margin-left: 0;
            min-height: auto;
        }
    }
}

@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;
        }


    /* 🌐 DevExpres Grid header (tema bağımsız görünüm) */
    .dxgvHeader,
    [class*="dxgvHeader_"] {
        background-color: #e6fff2; /* Açık yeşil arka plan */
        font-weight: bold; /* Kalın yazı */
        color: black; /* Siyah yazı rengi */
        text-align: center; /* Yazıyı ortala */
        background: linear-gradient(180deg, #e8fff4 0%, #d6f7e7 100%) !important; /* pastel yeşil degrade */
        border: 1px solid #b8e0ca !important;
        border-radius: 6px 6px 0 0 !important; /* üst köşeleri yumuşat */
        font-weight: 600 !important;
        color: black !important; /* koyu yeşilimsi yazı */
        text-align: center !important;
        padding: 6px 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* hafif gölge */
        transition: all 0.2s ease;
        color: inherit !important;
        text-decoration: none !important;
    }




    /* 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;
        }
    /* === Bold editor – 12px versiyon === */
    .bold-editor-sm {
        font-weight: bold !important;
        font-size: 12px !important;
        color: #000 !important;
        padding: 6px !important; /* 15px versiyondan biraz daha kompakt */
        border-radius: 0 !important;
    }

    .bold-editor-input {
        font-weight: bold !important;
        font-size: 15px !important;
        color: #000 !important;
    }
    /* Form input'ları için (12px) */
    .bold-editor-sm .dx-texteditor-input {
        font-weight: bold !important;
        font-size: 13px !important;
        color: #000 !important;
        padding: 6px !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;
        color: black !important;
        text-align: center !important;
        font-weight: bold !important;
        font-size: 12px !important;
        font-family: "Arial", "Helvetica", sans-serif !important;
    }*/
    .dx-datagrid .dx-header-row > td {
        background: linear-gradient(180deg, #e8fff4 0%, #d6f7e7 100%) !important; /* pastel yeşil degrade */
        border: 1px solid #b8e0ca !important; /* ince yeşilimsi kenarlık */
        color: black !important;
        text-align: center !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        font-family: "Arial", "Helvetica", sans-serif !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* hafif gölge */
        border-radius: 6px 6px 0 0 !important; /* köşeleri yuvarlat */
        transition: all 0.2s ease;
    }
    /* Header kapsayıcısında taşma engelini kaldır */
    .dx-datagrid-headers {
        border-radius: 6px 6px 0 0 !important;
        overflow: visible !important; /* ❗ radius’u gösterebilmesi için */
        border: 1px solid #b8e0ca !important;
    }

    /* Header hücrelerinin ilk ve sonuna radius uygula */
    .dx-datagrid .dx-header-row > td:first-child {
        border-top-left-radius: 6px !important;
    }

    .dx-datagrid .dx-header-row > td:last-child {
        border-top-right-radius: 6px !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;
    }

    /*🔧 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;
        box-sizing: border-box !important;
        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;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        border: 2px solid #2B96ED !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* 🔥 Mobilde grid dokunmatik kaydırmayı serbest bırak */
    #gridContainer,
    .dx-datagrid-rowsview,
    .dx-scrollable-container {
        touch-action: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-x: auto !important; /* 🔥 sağa sola kaydırma aktif */
        overflow-y: auto !important; /* 🔥 aşağı yukarı kaydırma aktif */
    }

    /* Grid içi action ikonları – tamamen çizgisiz */
    .dx-datagrid .dx-button.dx-button-mode-text {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: auto !important;
    }

        /* FontAwesome ikon boyut & renk */
        .dx-datagrid .dx-button.dx-button-mode-text i {
            font-size: 15px;
            color: #444;
        }

        /* Hover – sadece ikon hafif koyulaşsın */
        .dx-datagrid .dx-button.dx-button-mode-text:hover i {
            color: #000;
        }

        /* Sil biraz kırmızı hissi versin */
        .dx-datagrid .dx-button.dx-button-mode-text i.fa-trash-alt {
            color: #c0392b;
        }

        .dx-datagrid .dx-button.dx-button-mode-text:hover i.fa-trash-alt {
            color: #a93226;
        }
}

@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-datagrid .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;
    }

    /* ==========================================================
   ✅ DIALOG SAYFALAR – ASPxTextBox / SpinEdit RADIUS
   GERÇEK ÇÖZÜM
   ========================================================== */

    body.dialog-page table.dxeTextBoxSys,
    body.dialog-page table.dxeSpinEditSys,
    body.dialog-page table.dxeButtonEditSys {
        border-radius: 8px !important;
        overflow: hidden; /* 🔴 çok kritik */
    }

    /* Focus olunca köşe kaybolmasın */
    body.dialog-page .dxeFocused table.dxeTextBoxSys,
    body.dialog-page .dxeFocused table.dxeSpinEditSys {
        border-radius: 8px !important;
    }

    /* NullText (ASPx fake placeholder) */
    body.dialog-page .dxeNullText {
        color: #9aa0a6 !important;
        font-style: italic;
    }

    /* ==========================================================
   ✨ DIALOG PAGE – MODERN LABEL STYLE
   Scope: SADECE dialog sayfaları
   ========================================================== */

    body.dialog-page .dx-label,
    body.dialog-page .dx-label span {
        font-size: 12px;
        font-weight: 700; /* ✅ BOLD */
        color: #37474f; /* koyu mavi-gri */
        letter-spacing: 0.2px;
        line-height: 1.2;
        text-transform: none; /* büyük harf yok */
    }

    body.dialog-page .dx-label {
        margin-bottom: 2px;
        display: inline-block;
    }

    /* Yardımcı küçük metinler (Max vs) */
    body.dialog-page .filter-hint {
        font-size: 11px;
        font-weight: 500;
        ggbbii color: #8a8a8a;
        margin-left: 4px;
    }

    body.dialog-page .sub-budget-frame td:first-child span,
    body.dialog-page .sub-budget-frame td:first-child label {
        font-weight: 700 !important;
    }
    
}

@layer popup-size {

    /* =========================
       🟦 SMALL POPUP
       ========================= */
    .popup-sm .dxpc-mainDiv {
        width: 480px !important;
        max-width: 90vw !important;
        height: auto !important;
        max-height: 70vh !important;
        border-radius: 10px !important;
    }

    .popup-sm .dxpc-contentWrapper {
        max-height: calc(70vh - 56px) !important;
        overflow-y: auto !important;
    }

    /* =========================
       🟦 MEDIUM POPUP (FORM / GRID)
       ========================= */
    .popup-md .dxpc-mainDiv {
        width: 900px !important;
        max-width: 95vw !important;
        height: auto !important;
        max-height: 90vh !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column;
    }

    .popup-md .dxpc-contentWrapper {
        max-height: calc(85vh - 60px) !important;
        overflow-y: auto !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column;
        overflow: hidden !important;
    }

    /* Header + filtre alanı */
    .popup-md .popup-header-fixed {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }
    /* Grid alanı */
    .popup-md .dx-datagrid,
    .popup-md .dxgvControl {
        flex: 1 1 auto !important;
        min-height: 200px;
        max-height: 100%;
        overflow: auto !important; /* 👈 scroll burada */
    }
    /* =========================
       🟦 FULLSCREEN POPUP
       ========================= */
    .popup-full .dxpc-mainDiv {
        width: 96vw !important;
        height: 94vh !important;
        max-width: 96vw !important;
        max-height: 94vh !important;
        border-radius: 14px !important;
    }

    .popup-full .dxpc-contentWrapper {
        height: calc(94vh - 64px) !important;
        max-height: calc(94vh - 64px) !important;
        overflow: auto !important;
    }
}

@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;
    }

    /* ===============================
       🔒 DEVEXTREME CONFIRM (POPUP)
       =============================== */

    /* Sadece confirm popup */
    .dx-popup[aria-label="Onay"] {
        border-radius: 6px !important;
        border: 1px solid #d6dbe3 !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
        background-color: #ffffff !important;
        min-width: 420px;
    }

        /* Başlık */
        .dx-popup[aria-label="Onay"] .dx-popup-title {
            background-color: #f5f7fa !important;
            color: #1f3a5f !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            padding: 10px 14px !important;
            border-bottom: 1px solid #e1e5ea !important;
            text-align: left !important;
        }

        /* İçerik */
        .dx-popup[aria-label="Onay"] .dx-popup-content {
            font-size: 13px !important;
            color: #333 !important;
            padding: 14px 16px !important;
            line-height: 1.5;
        }

        /* Alt aksiyon alanı */
        .dx-popup[aria-label="Onay"] .dx-popup-bottom {
            padding: 10px 14px !important;
            border-top: 1px solid #e1e5ea !important;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        /* Ortak buton */
        .dx-popup[aria-label="Onay"] .dx-button {
            min-width: 90px;
            font-size: 13px !important;
            font-weight: 500 !important;
            border-radius: 4px !important;
            padding: 6px 14px !important;
        }

            /* Vazgeç / Hayır */
            .dx-popup[aria-label="Onay"] .dx-button.dx-button-default {
                background-color: #f3f4f6 !important;
                color: #333 !important;
                border: 1px solid #cfd6de !important;
            }

            /* Onay / Evet */
            .dx-popup[aria-label="Onay"]
            .dx-button.dx-button-success,
            .dx-popup[aria-label="Onay"]
            .dx-button.dx-button-mode-contained:not(.dx-button-default) {
                background-color: #2b96ed !important;
                color: #ffffff !important;
                border: none !important;
            }

                .dx-popup[aria-label="Onay"]
                .dx-button.dx-button-success:hover {
                    background-color: #1f7fd0 !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;
        }

        /* Mobilde popup kaydırma düzeltmesi */
        /*.popup-fix .dx-popup-content {
            max-height: 90vh !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }*/
        .popup-scroll-lock {
            overflow: hidden !important;
            touch-action: none !important;
            position: fixed;
            width: 100%;
        }


        /* 📱 Mobil popup tam ekran */
        .popup-fix .dx-overlay-content {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            margin: 0 !important;
            border-radius: 0 !important;
            max-width: 100vw !important;
            max-height: 100vh !important;
            background-color: #fff !important;
        }

        /* 📜 Popup içeriği kaydırılabilir olsun */
        .popup-fix .dx-popup-content {
            height: 100% !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important; /* 🔥 iOS/Android kaydırma etkin */
            touch-action: auto !important; /* 🔥 dokunmatik olaylara izin ver */
            padding-bottom: 80px !important;
        }
    }
}
/* === 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: 30px !important;
        vertical-align: middle !important;
        padding: 0px !important;
    }

    .dx-data-row .dx-button {
        height: 30px !important;
        min-height: 30px !important;
        line-height: 30px !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 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 {

    /* === DevExtreme dx-toast temel reset (güvenli) === */
    .dx-toast,
    .dx-toast-content {
        box-sizing: border-box !important;
        border-radius: 8px !important;
        padding: 10px 18px !important;
        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #fff !important;
        background-clip: padding-box !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        animation: toast-fade-in 0.25s ease, toast-fade-out 0.25s ease 2.7s !important;
    }

    .dx-toast {
        pointer-events: auto !important;
    }

        .dx-toast * {
            pointer-events: auto !important;
        }

    /* === Toast mesaj metni === */
    .dx-toast-message {
        color: inherit !important;
        line-height: 1.4;
    }

    /* === Türlere göre renkler === */
    .dx-toast-error {
        background-color: #f44336 !important;
    }

    .dx-toast-success {
        background-color: #4caf50 !important;
    }

    .dx-toast-warning {
        background-color: #ffc107 !important;
        color: #000 !important;
    }

    .dx-toast-info {
        background-color: #2196f3 !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 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: #ffffff !important; /* 👈 artık beyaz */
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        padding: 3px 10px;
        height: 40px; /* 🔹 Masaüstüde sabit yükseklik */
        display: flex; /* 🔹 İçeriği hizalamak için */
        align-items: center; /* 🔹 Dikey ortalama */
        justify-content: space-between; /* 🔹 Başlık solda, menü sağda */
        box-sizing: border-box; /* Padding yüksekliği bozmasın */
    }

        /* 🔹 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;
            white-space: nowrap; /* Tek satırda tut */
        }

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

            .topPanel .title span {
                font-size: 14px;
                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 için konum ve hizalama */
    #checkboxContainer {
        position: absolute;
        left: 330px;
        top: 1px; /* ⬅️ Önceden 20px idi, 10px yaparak biraz yukarı aldık */
        z-index: 1000;
        display: flex;
        align-items: center;
    }

        /* Checkbox yazı stili */
        #checkboxContainer label {
            margin-left: 5px;
            font-size: 14px;
            color: #333;
            font-weight: 500;
        }

        /* common.css ile çakışmayı engellemek için */
        #checkboxContainer input[type="checkbox"] {
            accent-color: #2b96ed;
            transform: scale(1.2);
        }


    /* ============================================================
   🔸 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);
            color: #E6F4FF !important; /* 🔹 Yazı rengi açık maviye döner */
        }

        /* 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 */
        margin: 0 0 10px;
    }

        #inputPanel .viewport {
            width: 1300px;
            height: 150px;
            overflow: visible;
            position: relative;
        }

        #inputPanel .overview {
            list-style: none;
            width: 2500px;
            padding: 0;
            margin: 0;
            position: absolute;
            left: 0;
            top: 0;
        }

            #inputPanel .overview img {
                float: left;
            }

        #inputPanel .scrollbar {
            /*background-color: black;*/
            position: relative;
            margin: 0 0 1px;
            clear: both;
            height: 0px;
        }

        #inputPanel .track {
            background-color: #d1d1d1;
            width: 100%;
            height: 4px;
            position: relative;
        }

        #inputPanel .thumb {
            background-color: #0072C6;
            height: 4px;
            cursor: pointer;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0px;
        }

            #inputPanel .thumb .end {
                background-color: #0072C6;
                overflow: hidden;
                height: 4px;
                width: 5px;
            }

        #inputPanel .disable {
            display: none;
        }

    .dxsplLCC {
        overflow: unset !important;
    }
}

@layer buttonPanel {
    #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: 45px;
        display: block !important; /* 🧩 Flex hizalama etkisini sıfırla */
    }
}

@layer main-menu {
    .main-menu {
        background-color: #E6F4FF; /* Hafif açık mavi arka plan */
        border-radius: 6px;
        padding: 5px 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

        .main-menu .dxm-item {
            font-weight: bold;
            color: #004B8D;
        }

        .main-menu .dxm-hovered {
            background-color: #CCE5FF !important;
        }
}

@layer headerpanel {
    /* ============================================================
       🔷 HEADER PANEL (Splitter Pane – PageCaption)
       Uyumlu: MetropolisBlue, Office365, MaterialCompact
       Kullanım: <dx:SplitterPane CssClass="header-pane">
    ============================================================ */

    .header-pane {
        background-color: #ffffff !important; /* 👈 artık beyaz */
        border-bottom: 1px solid #cfe7ff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        height: 20px; /* SplitterPane Size ile uyumlu */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 12px;
        box-sizing: border-box;
        font-family: "Segoe UI", Roboto, sans-serif;
    }

        /* 🔹 Sol taraftaki başlık (txt_ref, lbl_nolu, combolar) */
        .header-pane .left-header {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        /* 🔹 Sağ taraftaki menü ve ikon alanı */
        .header-pane .right-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 🔹 Label ve numara alanı */
        .header-pane .dx-label,
        .header-pane .dx-label span {
            font-weight: 600;
            color: #004b8d;
        }

        /* 🔹 Combobox ve SpinEdit ortak görünüm */
        .header-pane .dxeEditArea,
        .header-pane .dxeTextBox,
        .header-pane .dxeButtonEdit {
            background-color: #ffffff !important;
            border: 1px solid #b3d7ff !important;
            border-radius: 6px !important;
            transition: all 0.2s ease-in-out;
        }

            .header-pane .dxeFocused,
            .header-pane .dxeEditArea:focus {
                border-color: #2b96ed !important;
                box-shadow: 0 0 0 2px rgba(43,150,237,0.25);
            }

        /* 🔹 Sağdaki menü */
        .header-pane .dxmLite .dxm-item {
            background: linear-gradient(145deg, #2b96ed, #1a75cf);
            border-radius: 8px;
            padding: 4px 10px;
            color: #fff !important;
            font-weight: 500;
            font-size: 13px;
            transition: all 0.2s ease-in-out;
        }

            .header-pane .dxmLite .dxm-item:hover {
                background: linear-gradient(145deg, #1a75cf, #2b96ed);
                transform: translateY(-1px);
                box-shadow: 0 2px 4px rgba(0,0,0,0.15);
            }

        /* 🔹 Sağ üst köşedeki uyarı balonları */
        .header-pane .badge {
            background-color: red;
            color: white;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            padding: 2px 6px;
            min-width: 20px;
            text-align: center;
        }

    .page-caption {
        /* 🎨 Zemin – pastel sky blue */
        background-color: #f0f7ff !important;
        border-bottom: 1px solid #c7dcf3 !important;
        /* Panel hissi */
        box-shadow: 0 1px 2px rgba(30, 90, 160, 0.08) !important;
        /* Boyut */
        min-height: 38px;
        padding: 8px 16px;
        box-sizing: border-box;
        width: calc(100% - 3px);
        /* Yerleşim */
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        /* Yazı */
        font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #1f3a5f;
        padding-left: 48px !important; /* 🔴 MENÜ BUTONU PAYI */
    }

        /* Sol – breadcrumb */
        .page-caption .caption-left {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            color: #163a63;
        }

        /* Sağ – aktif sayfa */
        .page-caption .caption-right {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            font-weight: 700;
            color: #0d6efd; /* kurumsal mavi */
        }

        /* İkonlar */
        .page-caption .icon {
            font-size: 14px;
            color: #4a84c4;
        }

    .page-body {
        width: calc(100% - 3px);
        height: calc(100% - 35px);
        box-sizing: border-box;
    }

    /* 🔹 Responsive uyum */
    @media (max-width: 800px) {
        .header-pane {
            flex-direction: column;
            height: auto;
            align-items: flex-start;
            gap: 6px;
            padding: 6px 10px;
        }

            .header-pane .left-header,
            .header-pane .right-header {
                flex-wrap: wrap;
                justify-content: flex-start;
            }
    }
}

@layer filterpanel {

    .filter-panel {
        background: #fafafa;
        border-bottom: 1px solid #dcdcdc;
        padding: 6px 10px;
    }

        .filter-panel table {
            width: 100%;
            border-collapse: collapse;
        }

        .filter-panel td {
            padding: 4px 6px;
            vertical-align: middle;
        }

        /* Input yükseklikleri */
        .filter-panel .dxeTextBoxSys,
        .filter-panel .dxeSpinEditSys {
            height: 24px;
        }

    /* Filtre */
    .btn-filter-primary {
        background-color: #2f80ed !important;
        color: #fff !important;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 4px;
        margin-right: 6px;
    }

    /* Temizle */
    .btn-filter-reset {
        background: #eeeeee !important;
        color: #333 !important;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 4px;
    }
}

@layer radiobutton {

    /* ===============================
       RADIO → BUTON (AYRI, ARALIKLI)
       =============================== */

    .segment-radio {
        display: inline-flex;
        gap: 25px; /* Butonlar arası boşluk */
        /*margin-top: 6px;*/
        margin-top: 0 !important;
        border: 1px solid #cfcfcf;
        border-radius: 8px;
        overflow: hidden; /* 👈 iç köşeleri radius’la hizalar */
        background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }


        /* DevExpress radio iconunu tamamen gizle */
        .segment-radio input[type="radio"] {
            display: none !important;
        }

        .segment-radio .dxrb {
            margin: 0 !important;
        }

            .segment-radio .dxrb td {
                padding: 0 !important;
                border: none !important;
            }

        /* Asıl buton görünümü */
        .segment-radio label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 18px;
            border: 1px solid #cfcfcf;
            background: #f5f5f5;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            color: #444;
            border-radius: 6px;
            transition: all 0.2s ease;
            line-height: 1;
            gap: 6px; /* ikon – yazı arası */
            white-space: nowrap;
        }


            /* Hover */
            .segment-radio label:hover {
                background: #eaeaea;
            }

        /* Seçili (DevExpress işaretli) */
        .segment-radio .dxrbChecked label {
            background: #2f80ed;
            color: #fff;
            border-color: #2f80ed;
        }
}