
/* Main Responsive Row */
table.dataTable tr.child{
    background:#fff !important;
    border:1px solid #ececec !important;
    border-radius:18px;
    margin:12px;
    padding:18px 22px !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,.06),
        0 3px 10px rgba(0,0,0,.03),
        inset 0 1px 0 rgba(255,255,255,1);
    overflow:hidden;
}

/* Hover */
table.dataTable tr.child:hover{
    background:#fff !important;
    transform:translateY(-2px);
    transition:.25s ease;
    box-shadow:
        0 16px 40px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,1);
}

/* List */
table.dataTable tr.child ul{
    margin:0;
    padding:0;
    list-style:none;
}

/* Item */
table.dataTable tr.child ul li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid #f2f2f2;
    background:#fff !important;
}

table.dataTable tr.child ul li:last-child{
    border-bottom:none;
}

/* Left Title */
table.dataTable tr.child span.dtr-title{
    min-width:140px;
    font-size:13px;
    font-weight:700;
    color:#111;
    letter-spacing:.3px;
}

/* Right Value */
table.dataTable tr.child span.dtr-data{
    color:#555;
    font-size:13px;
    text-align:right;
    word-break:break-word;
}

/* Expand Button */
table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child:before{

    content:"+";

    width:26px;
    height:26px;
    line-height:22px;

    border-radius:50%;
    border:none;

    color:#fff;
    font-weight:700;
    font-size:16px;

    background:linear-gradient(180deg,#36d96d,#17a94d);

    box-shadow:
        0 8px 20px rgba(23,169,77,.30),
        inset 0 2px 3px rgba(255,255,255,.35);

    transition:.25s ease;
}

/* Collapse Button */
table.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before{

    content:"−";

    background:linear-gradient(180deg,#ff6464,#dc2626);

    box-shadow:
        0 8px 20px rgba(220,38,38,.25),
        inset 0 2px 3px rgba(255,255,255,.35);
}

/* Button Hover */
table.dataTable.dtr-inline.collapsed tbody tr:hover td:first-child:before{
    transform:scale(1.08);
}

/* Mobile */
@media(max-width:768px){

table.dataTable tr.child{
    margin:8px;
    padding:14px 16px !important;
    border-radius:14px;
}

table.dataTable tr.child ul li{
    display:block;
    padding:12px 0;
}

table.dataTable tr.child span.dtr-title{
    display:block;
    margin-bottom:5px;
}

table.dataTable tr.child span.dtr-data{
    display:block;
    text-align:left;
}

}