/* public/css/vivid-changelog-public.css */

.vivid-cl-container {
    /* Base container styles if needed beyond Tailwind */
}

.vivid-cl-entry {
    transition: all 0.3s ease-in-out; 
}

.vivid-cl-entry-even-shadow {
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.1); 
}

.vivid-cl-entry-header {
    cursor: pointer; 
}

.vivid-cl-entry-header h2.text-2xl { 
    font-size: 1.5rem !important; 
    line-height: 2rem !important; 
    margin-bottom: 0 !important; 
}


.vivid-cl-entry-content {
    overflow: hidden; 
}

.vivid-cl-icon {
    margin-right: 0.25em;
}

.vivid-cl-filters {
    /* Basic styling for the filter area */
}

/* Styling for the Version select dropdown */
.vivid-cl-filter-control { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center; 
    background-size: 1.2em 1.2em; 
}

.vivid-cl-filter-control::-ms-expand {
    display: none;
}

/* Styling for the Type filter buttons container */
.vivid-cl-filter-types {
    flex-wrap: wrap; !important /* Added */
    gap: 10px;       /* Added */
}


/* Styling for the active filter button */
.vivid-cl-type-filter.active { 
    background-color: #4f46e5; 
    color: white !important; 
    border-color: #4f46e5; 
    font-weight: 500; 
}
.vivid-cl-type-filter.active:hover {
    background-color: #4338ca; 
    color: white !important;
}


.vivid-cl-section.hidden-by-type {
    display: none !important; 
}

.vivid-cl-toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.vivid-cl-entry-header.expanded .vivid-cl-toggle-icon {
    transform: rotate(180deg); 
}

.vivid-cl-entry-content ul {
    list-style-type: disc;
    padding-left: 20px; 
}

.vivid-cl-entry-content ul li {
    margin-bottom: 0.25rem; 
}

.vivid-cl-no-results {
    /* Style for the "no results" message */
}

/* Edit Link Styling */
.vivid-cl-edit-link {
    display: inline-block; /* Or inline-flex to align icon better if needed */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out;
    margin-right: 8px; /* Space between edit icon and date */
    color: #4a5568; /* gray-700, adjust as needed */
    vertical-align: middle; /* Align with text */
}

.vivid-cl-edit-link .dashicons {
    font-size: 18px; /* Adjust icon size */
    line-height: 1; /* Ensure proper vertical alignment */
}

.vivid-cl-entry-header:hover .vivid-cl-edit-link {
    opacity: 1; /* Show on hover of the header */
}

.vivid-cl-edit-link:hover {
    color: #2c5282; /* darker blue on hover, adjust as needed */
}

.vivid-cl-search-container {
    position: relative; /* For absolute positioning of input if needed or future elements */
    display: flex;
    align-items: center;
}

.vivid-cl-search-input {
    width: 0;
    padding: 0.375rem 0; /* Adjust py-1.5 from button, remove horizontal padding when collapsed */
    border: 1px solid transparent;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    opacity: 0;
    visibility: hidden;
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s, padding 0.3s ease-in-out;
    transform: translateX(10px); /* Slight initial offset for expansion */
    order: 1; /* Input first visually when expanded */
}

.vivid-cl-search-input.expanded {
    width: 200px; /* Or your desired expanded width */
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    padding: 0.375rem 0.75rem; /* Add horizontal padding back when expanded */
    border-color: #d1d5db; /* border-gray-300 */
    margin-right: -2.25rem; /* Pull button over the input's right padding area */
	border-radius: 0.375rem;
}


.vivid-cl-search-button {
    background-color: transparent;
    border: none;
    padding: 0.375rem 0.75rem; /* Similar to other filter buttons (px-3 py-1.5) */
    cursor: pointer;
    color: #4b5563; /* gray-600 */
    border-radius: 0.375rem; /* rounded-md */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Ensure button is clickable over the input padding */
    order: 2; /* Button visually after input (but LTR expansion makes input appear left) */
    transition: color 0.2s ease-in-out;
}
.vivid-cl-search-button:hover {
    color: white !important;
	background-color: #4f46e5;
}
  
}
.vivid-cl-search-button .dashicons {
    font-size: 20px;
    line-height: 1;
}

/* When search is expanded, button might change appearance or position slightly */
.vivid-cl-search-input.expanded + .vivid-cl-search-button {
	height: 35px;
}

/* Ensure the main filter flex container can accommodate */
.vivid-cl-filters > .flex {
    /* justify-content: space-between; Tailwind class already applied */
}