/* Default (Desktop) */
.btn-icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* HP */
@media (max-width: 576px) {
    .btn-icon-text {
        width: auto !important;
        padding: 10px 12px;
    }

    .btn-icon-text .btn-text {
        display: none;
    }
}



/* === GRID CARD =================================================================================== */
.cards tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 10px;
    justify-content: start; /* ini penting */
}


/* === CARD === */
.cards tbody tr {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    padding: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cards tbody tr:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* === HIDE TABLE PART === */
.cards thead,
.cards tfoot {
    display: none;
}

/* === TD RESET === */
.cards tbody td {
    display: block;
    border: none;
    padding: 0;
    margin-bottom: 6px;
    text-align: center;
    word-break: break-word;
}

/* === IMAGE === */
.cards tbody td img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
}

/* === PRODUCT NAME === */
.cards tbody td:nth-child(2) {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
    word-break: break-word;
    white-space: normal;

    height: 40px;  /* Menetapkan tinggi tetap untuk 2 baris */
}

@media (max-width: 575.98px) {
    .cards tbody {
        /* Kita paksa jadi persis 2 kolom */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px; /* Perkecil jarak antar card agar lebih muat */
        padding: 8px;
    }

    .cards tbody td img {
        height: 110px; /* Sesuaikan tinggi gambar agar tidak terlalu panjang di HP */
    }

    .cards tbody td:nth-child(2) {
        font-size: 13px; /* Kecilkan sedikit font nama produk */
    }
}


/* === PRICE === */
.cards tbody td:nth-child(3) {
    font-size: 15px;
    font-weight: 700;
    color: #e53935;
    margin-top: 4px;
}

/* === BUTTON === */
.cards tbody td:last-child a {
    display: block;
    width: 100%;
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 0;
    margin-top: 8px;
}

/* === DATATABLE FIX === */
table.cards {
    width: 100% !important;
}

table.dataTable tbody tr {
    background: transparent;
}

.truncate {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === MODAL LAYER ======================================================================= */
#custom-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* hitam transparan */
    z-index: 1040; /* di bawah modal */
    display: none;
}
.modal {
    z-index: 1050;
}

/* === INVOICE JARAK : === */
.invoice-info {
  border-collapse: collapse;
  font-size: 14px;
}

.invoice-info td {
  padding: 2px 4px;
  vertical-align: top;
}

.invoice-info .label {
  width: 120px;
  white-space: nowrap;
}

.invoice-info .colon {
  width: 10px;
  text-align: center;
}

.invoice-info .value {
  font-weight: 600;
}


/* Menghilangkan garis kedip (caret) dan highlight biru saat diklik */
img, label, span, small, strong, p, td, th, div, a, 
.carousel, .carousel-item, .carousel-inner {
    caret-color: transparent !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none !important;
}

/* 2. PAKSA Input, Textarea, dan Select tetap normal */
input, textarea, select, [contenteditable="true"] {
    caret-color: auto !important; /* Kembalikan garis kedip */
    user-select: text !important;  /* Biarkan teks bisa di-blok/select */
    -webkit-user-select: text !important;
}

/* 3. Tambahan khusus untuk Hope UI agar input tidak kena efek shadow global */
.form-control:focus {
    caret-color: auto !important;
}

/* Khusus untuk elemen tabel agar benar-benar terkunci */
td, th {
    -webkit-user-modify: read-only; 
}

/* Pastikan Link juga tidak memunculkan kotak saat diklik di HP */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Jika gambarnya ada di dalam tabel atau link */
a:focus, 
td:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* Matikan drag pada gambar, link, dan tombol */
img, a, button {
    -webkit-user-drag: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent;
}