/* Custom Status Badges (using .zwh-badge base) */
.zwh-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 9999px; /* Pill shape */
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    margin: 2px 0; /* Add a little vertical spacing */
}

.zwh-badge-success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
}

.zwh-badge-warn { /* New badge for warnings/pending */
    background-color: #fff3cd; /* Light yellow */
    color: #856404; /* Dark yellow text */
}

.zwh-badge-error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
}

/* Styles for the expandable Payload column */
.zwh-details {
    background-color: #f9f9f9;
    border: 1px solid #e9e9e9;
    border-radius: 5px;    
    overflow: hidden; /* Contains pre scrollbar */
}

.zwh-summary {
    padding: 8px 12px;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.85em;
    cursor: pointer;
    background-color: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    color: #444 !important;
    display: block; /* Ensure it takes full width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Truncate text if too long */
    user-select: none; /* Prevent text selection on summary itself */
}

.zwh-summary:hover {
    background-color: #e8e8e8;
}

/* Arrow icon for summary - basic styling */
.zwh-summary::marker,
.zwh-summary::-webkit-details-marker {
    color: #666; /* Match text color */
    margin-right: 5px;
}

.zwh-pre {
    background-color: #fff; /* White background for code block */
    padding: 10px 15px;
    margin: 0; /* Remove default pre margins */
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.8em;
    white-space: pre-wrap; /* Wrap long lines */
    word-wrap: break-word; /* Break long words */
    max-height: 200px; /* Max height for scrollability */
    overflow: auto; /* Add scrollbar if content overflows */
    color: #333;
    border-top: 1px dashed #e0e0e0; /* Dotted line above actual payload */
}

/* N/A Text for empty fields */
.zwh-na-text {
    color: #999;
    font-style: italic;
    font-size: 0.9em;
}

/* No Items Found Message */
.zwh-no-items {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 1.2em;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

/* --- Select2 Custom Styles --- */

/* Main container: Adjusts the overall height of the dropdown */
.select2-container .select2-selection--single {
    height: 45px !important;
    padding: 0 !important;
    border-radius: 0.375rem !important; /* Tailwind's rounded-md */
    border: none !important; /* Remove the border */
	margin-top: 0.25rem !important; /* Equivalent to Tailwind's mt-1 */
}

/* Selected item text: Adjusts padding and vertical alignment */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 43px !important; /* Vertically centers the text */
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Dropdown arrow: Vertically centers the arrow icon */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 5px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	right: 8px !important;
}

.bg-normal-gray .select2-container .select2-selection--single {
	background-color: #f9fafb !important;
}

/* Improved Loading Overlay CSS */
.wzsm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 24, 39, 0.6); /* Semi-transparent dark background */
    -webkit-backdrop-filter: blur(4px); /* Safari */
    backdrop-filter: blur(4px); /* Glassmorphism effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}