/* =========================================================
   MAWARTOTO TABLE STYLE
   Disamakan dengan tema global merah-kuning-hitam
========================================================= */

/* =========================
   TABLE CONTAINER
========================= */
.table-container{
    width:100%;
    max-width:520px;
    overflow:hidden;

    background:#111 !important;
    border:4px solid #000 !important;
    border-radius:0 !important;

    box-shadow:
        0 0 0 1px #2a2a2a,
        0 5px 15px rgba(0,0,0,.5) !important;

    animation:fadeSlideUp .4s ease-out;
}

/* hover container: jangan modern/glow, cukup ubah warna garis */
.table-container:hover{
    border-color:#ff1717 !important;
    box-shadow:
        0 0 0 1px #2a2a2a,
        0 5px 15px rgba(0,0,0,.5) !important;
}

/* =========================
   TABLE
========================= */
.elegant-table{
    width:100%;
    border-collapse:collapse !important;
    font-size:.9rem;
    background:#111 !important;
}

/* =========================
   HEADER TABLE
========================= */
.elegant-table thead tr{
    background:#120000 !important;
    border-bottom:4px solid #000 !important;
}

.elegant-table th{
    padding:14px 16px;
    text-align:left;
    font-weight:900 !important;
    font-size:.85rem;
    letter-spacing:.5px;
    text-transform:uppercase !important;

    background:#ff1717 !important;
    color:#fff !important;

    border:3px solid #000 !important;
    border-radius:0 !important;
}

/* matikan radius header lama */
.elegant-table th:first-child,
.elegant-table th:last-child{
    border-radius:0 !important;
}

/* =========================
   BODY ROWS
========================= */
.elegant-table tbody tr{
    border-bottom:none !important;
    transition:none !important;
}

.elegant-table tbody tr:last-child{
    border-bottom:none !important;
}

.elegant-table tbody tr:hover{
    background:transparent !important;
    transform:none !important;
}

/* =========================
   CELLS
========================= */
.elegant-table td{
    padding:14px 16px;
    color:#fff !important;
    font-weight:400;
    letter-spacing:.2px;

    background:#1a1a1a !important;
    border:3px solid #000 !important;
    vertical-align:top;
}

/* kolom pertama */
.elegant-table td:first-child{
    width:40%;
    font-weight:900 !important;
    color:#fff !important;
    background:#120000 !important;
    border-right:3px solid #000 !important;
}

/* kolom kedua */
.elegant-table td:last-child{
    font-weight:500;
    color:#fff !important;
    word-break:break-word;
}

/* =========================
   VERIFIED BADGE
========================= */
.verified-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff !important;
    font-weight:900;
    text-transform:uppercase;
}

/* ubah badge bulat modern jadi badge kotak Mawartoto */
.verified-badge::before{
    content:"✓";
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;

    background:#ff1717 !important;
    color:#fff !important;

    border:3px solid #000 !important;
    border-radius:0 !important;

    font-size:12px;
    font-weight:900;

    box-shadow:2px 2px 0 #000;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:480px){

    .table-container{
        max-width:100%;
    }

    .elegant-table th,
    .elegant-table td{
        padding:10px 12px;
        font-size:.75rem;
    }

    .elegant-table td:first-child{
        width:45%;
    }

    .verified-badge::before{
        width:18px;
        height:18px;
        font-size:10px;
        border-width:2px !important;
    }
}

/* =========================
   ANIMASI MASUK
========================= */
@keyframes fadeSlideUp{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}