/* ====================================
   1. DESAIN ADMIN (BACKEND)
==================================== */
.tha-shortcode-wrap { display: inline-flex; align-items: center; gap: 10px; background: #f0f0f1; padding: 6px 12px; border: 1px solid #ccd0d4; border-radius: 4px; }
.tha-shortcode-wrap code { font-size: 13px; padding: 0; background: transparent; color: #d63638; font-weight: bold; }
.tha-copy-btn { position: relative; color: #2271b1; text-decoration: none; display: flex; align-items: center; cursor: pointer; }
.tha-copy-btn .dashicons { font-size: 20px; width: 20px; height: 20px; transition: transform 0.2s; }
.tha-copy-btn:hover .dashicons { color: #135e96; transform: scale(1.1); }

.tha-tooltip { visibility: hidden; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 4px 10px; position: absolute; z-index: 10; bottom: 130%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 11px; font-weight: bold; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.tha-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border-width: 4px; border-style: solid; border-color: #333 transparent transparent transparent; }
.tha-copy-btn:hover .tha-tooltip { visibility: visible; opacity: 1; }
.tha-tooltip.show-success { background-color: #46b450; }
.tha-tooltip.show-success::after { border-color: #46b450 transparent transparent transparent; }

.tha-actions-wrap { display: flex; justify-content: left; gap: 12px; }
.tha-actions-wrap a { text-decoration: none; transition: transform 0.2s; }
.tha-actions-wrap .dashicons { font-size: 18px; width: 18px; height: 18px; }
.tha-actions-wrap a:hover { transform: scale(1.2); }
.tha-icon-edit, .tha-icon-export { color: #2271b1; }
.tha-icon-delete { color: #d63638; }

/* ====================================
   2. DESAIN FRONTEND (WPBAKERY HP & PC)
==================================== */
.tha-container { width: 100%; margin: 20px 0; font-family: inherit; }
.tha-scroll-hint { display: none; font-size: 12px; color: #666; margin-bottom: 8px; font-style: italic; text-align: right; animation: tha-pulse 2s infinite; }
.tha-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }

.tha-table { width: 100%; border-collapse: collapse; background-color: #ffffff; }
.tha-table caption { display: table-caption; text-align: left; font-weight: bold; font-size: 1.2em; padding: 10px 0; color: #333; }

/* Teks sejajar, tidak turun ke bawah */
.tha-table th, .tha-table td { 
    padding: 12px 16px; 
    text-align: left; 
    border-bottom: 1px solid #e2e8f0; 
    font-size: 14px; 
    color: #4a5568; 
    white-space: nowrap; 
}

/* Mengunci ukuran 2 kolom pertama agar sempurna di HP */
.tha-table th:nth-child(1), .tha-table td:nth-child(1) { min-width: 140px; }
.tha-table td:nth-child(1) { font-weight: 500; } /* Perbaikan: Hanya teks baris (TD) pertama yang tebal sedang, Header (TH) jangan diganggu! */

.tha-table th:nth-child(2), .tha-table td:nth-child(2) { min-width: 110px; }

/* Header Tabel Wajib BOLD Semua (700) */
.tha-table th { background-color: #f7fafc; font-weight: 700 !important; text-transform: uppercase; font-size: 13px; color: #2d3748; }

.tha-table tbody tr:nth-child(even) { background-color: #f8fafc; }
.tha-table tbody tr:hover { background-color: #edf2f7; }

@keyframes tha-pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

/* Responsivitas Khusus Mobile */
@media (max-width: 768px) { 
    .tha-scroll-hint { display: block; }
    .tha-table th, .tha-table td { padding: 10px 12px; }
}