﻿@media (max-width: 767.98px) {
    /* Tablo başlığını mobilde gizle */
    #TableTeklifList thead {
        display: none;
    }

    #TableTeklifList tbody {
        display: block;
        width: 100%;
    }

        /* Her satırı Bootstrap Card gibi şekillendir */
        #TableTeklifList tbody tr {
            display: block;
            margin-bottom: 1rem;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.125);
            border-radius: 0.25rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            padding: 0.75rem;
        }

        /* Hücreleri satır içine iki yana yaslı (flex) yerleştir */
        #TableTeklifList tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: none;
            border-bottom: 1px dashed #e9ecef;
            padding: 0.4rem 0;
            text-align: right;
            width: 100%;
        }

            #TableTeklifList tbody td:last-child {
                border-bottom: none;
            }

            /* Hücrenin soluna kolon başlığını bas */
            #TableTeklifList tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #495057;
                text-align: left;
                padding-right: 0.5rem;
            }
}

@media (max-width: 767.98px) {
    /* 1. Tablonun inline gelen piksel genişliğini ez */
    #TableTeklifList,
    #TableTeklifList_wrapper,
    .dataTables_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        display: block !important;
    }

        #TableTeklifList thead {
            display: none !important;
        }

        #TableTeklifList tbody {
            display: block !important;
            width: 100% !important;
        }

            /* 2. Kartları kapsayıcıya sabitle */
            #TableTeklifList tbody tr {
                display: block !important;
                width: 100% !important;
                box-sizing: border-box !important; /* Padding taşmasını engeller */
                margin-bottom: 1rem;
                background-color: #fff;
                border: 1px solid rgba(0, 0, 0, 0.125);
                border-radius: 0.25rem;
                padding: 0.75rem;
            }

            /* 3. Hücreleri ve uzun metinleri sınırla */
            #TableTeklifList tbody td {
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                width: 100% !important;
                box-sizing: border-box !important;
                border: none;
                border-bottom: 1px dashed #e9ecef;
                padding: 0.4rem 0;
                text-align: right;
                /* Uzun kelimelerin/linklerin kartı dışarı itmesini önler */
                word-break: break-word;
                overflow-wrap: anywhere;
            }

                #TableTeklifList tbody td:last-child {
                    border-bottom: none;
                }

                #TableTeklifList tbody td::before {
                    content: attr(data-label);
                    font-weight: 600;
                    color: #495057;
                    text-align: left;
                    padding-right: 0.5rem;
                    flex-shrink: 0; /* Başlık alanının büzülmesini engeller */
                    max-width: 40%;
                }
}

@media (max-width: 767.98px) {
    /* 1. Kapsayıcı ve Tablo Sıfırlama */
    .table-responsive {
        overflow: visible !important;
    }

    #TableTeklifList_wrapper,
    #TableTeklifList {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        border: none !important;
    }

        #TableTeklifList thead {
            display: none !important;
        }

        #TableTeklifList tbody {
            display: block !important;
            width: 100% !important;
        }

            /* 2. Kart Gövdesi */
            #TableTeklifList tbody tr {
                display: flex !important;
                flex-wrap: wrap !important;
                width: 100% !important;
                box-sizing: border-box !important;
                margin-bottom: 1.25rem !important;
                background-color: #ffffff !important;
                border: 1px solid #e3e6f0 !important;
                border-radius: 0.5rem !important;
                box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1) !important;
                padding: 1rem !important;
                position: relative !important;
            }

                /* Çizgili tablo (striped) arkaplanını mobilde kaldır */
                #TableTeklifList tbody tr:nth-of-type(odd) {
                    background-color: #ffffff !important;
                }

            /* 3. Genel Hücre Davranışı */
            #TableTeklifList tbody td {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                box-sizing: border-box !important;
                padding: 0.45rem 0.25rem !important;
                font-size: 0.875rem !important;
                border: none !important;
                word-break: break-word !important;
                min-height: 40px;
            }

                #TableTeklifList tbody td::before {
                    content: attr(data-label);
                    font-weight: 600;
                    color: #858796;
                    text-align: left;
                    margin-right: 0.5rem;
                    font-size: 0.8rem;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }

                /* ------------------------------------------------------------- */
                /* ÖZEL ALAN YERLEŞİMLERİ (Sütun İndekslerine Göre)               */
                /* ------------------------------------------------------------- */

                /* [1. Sütun: ID / Teklif No] - Sol Üst Badge */
                #TableTeklifList tbody td:nth-child(1) {
                    width: 50% !important;
                    justify-content: flex-start !important;
                                    
                    
                    font-weight: bold;
                    color: #4e73df;
                    order: 1 !important;
                    
                }

                    #TableTeklifList tbody td:nth-child(1)::before {
                        display: none; /* ID başlığını gizle, direkt #123 yazsın */
                    }

                /* [2. Sütun: Tarih] - Sağ Üst Gri Yazı */
                #TableTeklifList tbody td:nth-child(2) {
                    width: 50% !important;
                    justify-content: flex-end !important;
                    color: #b7b9cc;
                    font-size: 0.75rem !important;
                    order: 2 !important;
                }

                    #TableTeklifList tbody td:nth-child(2)::before {
                        display: none;
                    }

                /* [3. Sütun: Firma Adı] - Kartın Ana Başlığı */
                #TableTeklifList tbody td:nth-child(3) {
                    width: 100% !important;
                    font-size: 1.05rem !important;
                    font-weight: 700;
                    color: #2e384d;
                    /*border-bottom: 1px solid #eaecf4 !important;*/
                    padding-bottom: 0.5rem !important;
                    margin-bottom: 0.5rem !important;
                    justify-content: flex-end !important;
                    order: 4 !important;
                }

                    #TableTeklifList tbody td:nth-child(3)::before {
                        display: none;
                    }

                #TableTeklifList tbody td:nth-child(4)::before {
                    display: none;
                }
                /* [4. Sütun: İşin Adı] - Alt Başlık */
                #TableTeklifList tbody td:nth-child(4) {
                    width: 100% !important;
                    color: #5a5c69;
                    font-weight: 900;
                    padding-bottom: 0.4rem !important;
                    border-bottom: 1px solid #eaecf4 !important;
                    order: 3 !important;
                    height:auto;
                }
                /* [5, 6, 7, 8. Sütunlar: Teknik Detaylar] - 2'li Yan Yana Grid */
                #TableTeklifList tbody td:nth-child(5),
                #TableTeklifList tbody td:nth-child(6),
                #TableTeklifList tbody td:nth-child(7),
                #TableTeklifList tbody td:nth-child(8) {
                    width: 50% !important;
                    background: #f8f9fc;
                    padding: 0.4rem 0.5rem !important;
                    border: 1px solid #ffffff !important;
                    border-radius: 4px;
                }

                #TableTeklifList tbody td:nth-child(5) {
                    order: 5 !important;
                }

                #TableTeklifList tbody td:nth-child(6) {
                    order: 6 !important;
                }

                #TableTeklifList tbody td:nth-child(7) {
                    order: 7 !important;
                }

                #TableTeklifList tbody td:nth-child(8) {
                    order: 8 !important;
                }

                #TableTeklifList tbody td:nth-child(11) {
                    order: 11 !important;
                }

                /* [9. Sütun: Birim Fiyat] - Vurgulu Fiyat Alanı */
                #TableTeklifList tbody td:nth-child(9) {
                    width: 100% !important;
                    background-color: #e8fadf !important;
                    color: #1cc88a !important;
                    font-size: 1rem !important;
                    font-weight: 700 !important;
                    border-radius: 0.35rem;
                    padding: 0.5rem 0.75rem !important;
                    margin-top: 0.5rem !important;
                    order: 9 !important;
                }

                    #TableTeklifList tbody td:nth-child(9)::before {
                        color: #1cc88a;
                    }
                /* [10. Sütun: Hazırlayan] - En Alt Not */
                #TableTeklifList tbody td:nth-child(10) {
                    width: 100% !important;
                    font-size: 0.75rem !important;
                    color: #858796;
                    padding-top: 0.5rem !important;
                    justify-content: flex-end !important;
                    order: 10 !important;
                   
                }

                #TableTeklifList tbody td:nth-child(11) {
                    justify-content: flex-end !important;
                }

                #TableTeklifList tbody td:nth-child(11)::before {
                    display:none;
                }

    
}

@media (min-width: 767.98px) {

    .teklifListCommands {
        width:300px;
    }

}

@media (min-width: 767.98px) {

    .teklifListCommands button>span::after {
        display:none;
    }
}