/*
 * Corrective CSS for the OJS Search Page with Material Theme (Tailwind based)
 *
 * This CSS is designed to override conflicting styles and ensure the Material
 * theme's intended Tailwind classes are effective on the search page.
 *
 * Place this CSS in a location that loads AFTER your theme's main stylesheet
 * (e.g., a custom.css file or theme options custom CSS area).
 *
 * IMPORTANT: You may need to adjust values (colors, spacing) based on your
 * theme's specific configuration and what you find using browser developer tools.
 *
 * Updates based on screenshot analysis:
 * - Added .query class to main search input selector for increased specificity.
 * - Reviewed other selectors to potentially include relevant OJS core classes
 * or container classes like .cmp_form or .search_advanced.
 */

/* Target the main search page container for specificity */
.page_search {
    /* Add any overall page padding or background adjustments if needed */
    /* padding: 2rem; */
    /* background-color: var(--material-theme-background, #f5f5f5); */
}

/* Style the main form container */
.page_search .cmp_form {
    /* Ensure basic form styling if needed */
    /* Add spacing between form elements if the 'space-y-4' class isn't sufficient */
    /* gap: 1rem; */
    /* display: flex; */
    /* flex-direction: column; */
}

/* Style the main search input container */
.page_search .cmp_form .search_input { /* Added .cmp_form for specificity */
    margin-bottom: 1.5rem; /* Add space below the main search input */
}

/* Style the main search input field - Added .query class */
.page_search .cmp_form .search_input input[type="text"].query {
    /* Re-apply standard Material/Tailwind input styles if overridden */
    /* These classes are expected from smartyMaterialInput */
    display: block; /* Ensure it takes full width if needed */
    width: 100%;
    padding: 0.5rem 0.75rem; /* Adjust padding to match theme */
    border: 1px solid var(--material-theme-border-color, #d1d5db); /* Use CSS variable or specific Tailwind color */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    background-color: var(--material-theme-input-bg, #ffffff); /* White or dark mode equivalent */
    color: var(--material-theme-input-color, #374151); /* Text color */
    box-sizing: border-box; /* Include padding and border in element's total width */
    /* Example of using !important as a last resort if specificity still fails */
    /* border-color: var(--material-theme-border-color, #d1d5db) !important; */
}

/* Style the search input field when focused - Added .query class */
.page_search .cmp_form .search_input input[type="text"].query:focus {
    outline: none; /* Remove default outline */
    border-color: var(--material-theme-primary-focus, #60a5fa); /* Use a focus color, e.g., blue-500 or theme's primary */
    box-shadow: 0 0 0 3px rgba(var(--material-theme-primary-rgb, 96, 165, 250), 0.5); /* Focus ring/shadow */
    /* focus:border-materialBaseColour-300, focus:ring, focus:ring-materialBaseColour-200, focus:ring-opacity-50 */
}


/* Style the advanced filters fieldset - Added .cmp_form for specificity */
.page_search .cmp_form .search_advanced {
    margin-top: 2rem; /* Add space above advanced filters */
    padding-top: 1.5rem; /* Add padding inside fieldset */
    border-top: 1px solid var(--material-theme-border-color, #e5e7eb); /* Add a separator line */
    padding-bottom: 1.5rem; /* Add padding below fieldset content */
    border-bottom: 1px solid var(--material-theme-border-color, #e5e7eb); /* Add a separator line */
}

/* Style the legend for advanced filters - Added .cmp_form for specificity */
.page_search .cmp_form .search_advanced legend {
    /* Ensure legend is styled correctly, potentially centered or offset */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* Space below legend */
    display: block; /* Ensure it takes full width for centering */
    width: 100%;
    text-align: center; /* Center the legend */
}

/* Style the date range container - Added .cmp_form, .search_advanced for specificity */
.page_search .cmp_form .search_advanced .date_range {
    display: flex; /* Arrange date inputs horizontally */
    gap: 1rem; /* Space between year, month, day selects */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin-bottom: 1rem; /* Space below the date range section */
}

/* Style the individual date input containers (from/to) - Added .cmp_form, .search_advanced for specificity */
.page_search .cmp_form .search_advanced .date_range .from,
.page_search .cmp_form .search_advanced .date_range .to {
    flex: 1; /* Allow date sections to take equal space */
    min-width: 250px; /* Prevent them from getting too narrow */
    /* Add margin if the 'mt-2' class on 'to' is not enough */
    /* margin-top: 0.5rem; */
}

/* Style the fieldset within the date range (from/to) - Added .cmp_form, .search_advanced, .date_range for specificity */
.page_search .cmp_form .search_advanced .date_range fieldset {
    border: none; /* Remove default fieldset border */
    padding: 0;
    margin: 0;
}

/* Style the legend within the date range (from/to) - Added .cmp_form, .search_advanced, .date_range for specificity */
.page_search .cmp_form .search_advanced .date_range fieldset legend {
    font-size: 1rem; /* Adjust legend size */
    font-weight: 500; /* Adjust legend weight */
    margin-bottom: 0.5rem; /* Space below date legend */
    text-align: left; /* Align date legends left */
}

/* Style the select dropdowns within the date range - Added .cmp_form, .search_advanced, .date_range for specificity */
.page_search .cmp_form .search_advanced .date_range select {
     /* Re-apply standard Material/Tailwind select styles if overridden */
    /* These classes are expected from smartyMaterialSelectDateA11y */
    padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* Adjust padding for dropdown arrow */
    border: 1px solid var(--material-theme-border-color, #d1d5db);
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    background-color: var(--material-theme-input-bg, #ffffff);
    color: var(--material-theme-input-color, #374151);
    box-sizing: border-box;
    /* Ensure consistent height with inputs */
    height: calc(1.5em + 1rem + 2px); /* Adjust based on padding and border */
    /* Add custom arrow styling if needed - Tailwind forms plugin often handles this */
    /* appearance: none; */
    /* background-image: url('...'); */
    /* background-repeat: no-repeat; */
    /* background-position: right 0.75rem center; */
    /* background-size: 0.65em auto; */
}

/* Style the select dropdowns within the date range when focused - Added .cmp_form, .search_advanced, .date_range for specificity */
.page_search .cmp_form .search_advanced .date_range select:focus {
    outline: none;
    border-color: var(--material-theme-primary-focus, #60a5fa);
    box-shadow: 0 0 0 3px rgba(var(--material-theme-primary-rgb, 96, 165, 250), 0.5);
}

/* Style the author input container - Added .cmp_form, .search_advanced for specificity */
.page_search .cmp_form .search_advanced .author {
    margin-top: 1.5rem; /* Add space above author section */
}

/* Style the author input field - Added .cmp_form, .search_advanced for specificity */
.page_search .cmp_form .search_advanced .author input[type="text"] {
    /* Re-apply standard Material/Tailwind input styles if overridden */
    /* These classes are expected from smartyMaterialInput */
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--material-theme-border-color, #d1d5db);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: var(--material-theme-input-bg, #ffffff);
    color: var(--material-theme-input-color, #374151);
    box-sizing: border-box;
}

/* Style the author input field when focused - Added .cmp_form, .search_advanced for specificity */
.page_search .cmp_form .search_advanced .author input[type="text"]:focus {
    outline: none;
    border-color: var(--material-theme-primary-focus, #60a5fa);
    box-shadow: 0 0 0 3px rgba(var(--material-theme-primary-rgb, 96, 165, 250), 0.5);
}

/* Style the contexts select dropdown - Added .cmp_form, .search_advanced, .author for specificity */
.page_search .cmp_form .search_advanced .author select#searchJournal {
     /* Re-apply standard Material/Tailwind select styles if overridden */
    display: block;
    width: 100%;
    margin-top: 0.5rem; /* Space above the select */
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border: 1px solid var(--material-theme-border-color, #d1d5db);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: var(--material-theme-input-bg, #ffffff);
    color: var(--material-theme-input-color, #374151);
    box-sizing: border-box;
    height: calc(1.5em + 1rem + 2px); /* Ensure consistent height */
    /* Add custom arrow styling if needed */
}

/* Style the contexts select dropdown when focused - Added .cmp_form, .search_advanced, .author for specificity */
.page_search .cmp_form .search_advanced .author select#searchJournal:focus {
    outline: none;
    border-color: var(--material-theme-primary-focus, #60a5fa);
    box-shadow: 0 0 0 3px rgba(var(--material-theme-primary-rgb, 96, 165, 250), 0.5);
}

/* Style the labels - Added .cmp_form for specificity */
.page_search .cmp_form label {
    /* Re-apply standard Material/Tailwind label styles if overridden */
    display: block; /* Ensure labels are on their own line */
    margin-bottom: 0.5rem; /* Space below labels */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: var(--material-theme-label-color, #4b5563); /* gray-700 or similar */
    line-height: 1.5; /* leading-none or similar */
}

/* Exception for screen reader labels if they are hidden visually */
.page_search .cmp_form label.pkp_screen_reader { /* Added .cmp_form for specificity */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* Style the submit button container - Added .cmp_form for specificity */
.page_search .cmp_form .submit {
    margin-top: 2rem; /* Add space above the button */
    text-align: center; /* Center the button if it's an inline element */
}

/* Style the submit button - Added .cmp_form and .submit class for specificity */
.page_search .cmp_form .submit button[type="submit"].submit {
    /* Re-apply standard Material/Tailwind button styles if overridden */
    /* These classes are expected from smartyMaterialButtonPrimary */
    display: inline-flex; /* Use inline-flex for centering and internal alignment */
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    background-color: var(--material-theme-primary, #60a5fa); /* Use theme's primary color */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--material-theme-on-primary, #1f2937); /* Text color on primary background, e.g., slate-900 */
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out; /* Add transition for hover effect */
}

/* Style the submit button on hover - Added .cmp_form and .submit class for specificity */
.page_search .cmp_form .submit button[type="submit"].submit:hover {
    background-color: var(--material-theme-primary-hover, #3b82f6); /* Darker shade on hover */
    /* hover:bg-materialBaseColour-200 */
}

/* Style the submit button on focus - Added .cmp_form and .submit class for specificity */
.page_search .cmp_form .submit button[type="submit"].submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--material-theme-primary-rgb, 96, 165, 250), 0.5); /* Focus ring */
    /* focus:outline-none, focus-visible:outline-2, focus-visible:outline-offset-2, focus-visible:outline-materialBaseColour-300/50 */
}

/* Style the submit button when active/clicked - Added .cmp_form and .submit class for specificity */
.page_search .cmp_form .submit button[type="submit"].submit:active {
     background-color: var(--material-theme-primary-active, #2563eb); /* Even darker shade when active */
     /* active:bg-materialBaseColour-500 */
}


/* Style the search results list */
.page_search .search_results {
    list-style: none; /* Remove default list bullets */
    padding: 0;
    margin-top: 2rem; /* Add space above the results list */
}

/* Style individual search result items */
.page_search .search_results li {
    margin-bottom: 1.5rem; /* Space between results */
    padding-bottom: 1.5rem; /* Padding below result content */
    border-bottom: 1px solid var(--material-theme-border-color, #e5e7eb); /* Separator line */
}

/* Style the notification message (No Results, Error) */
.page_search .cmp_notification {
    margin-top: 1.5rem; /* Space above notification */
    padding: 1rem; /* Padding inside notification box */
    border-radius: 0.375rem; /* rounded-md */
    /* Add specific styles for notice and error types if needed */
}

.page_search .cmp_notification.notice {
    background-color: var(--material-theme-notice-bg, #e0f2f7); /* Light blue background */
    border: 1px solid var(--material-theme-notice-border, #bae6fd); /* Blue border */
    color: var(--material-theme-notice-color, #0c4a6e); /* Dark blue text */
}

.page_search .cmp_notification.error {
    background-color: var(--material-theme-error-bg, #fee2e2); /* Light red background */
    border: 1px solid var(--material-theme-error-border, #fca5a5); /* Red border */
    color: var(--material-theme-error-color, #991b1b); /* Dark red text */
}


/* Style the pagination container */
.page_search .cmp_pagination {
    margin-top: 2rem; /* Space above pagination */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the pagination */
    align-items: center;
    gap: 1rem; /* Space between pagination elements */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Style pagination links and page info */
.page_search .cmp_pagination a,
.page_search .cmp_pagination span {
    /* Add padding, borders, background colors as per theme's pagination style */
    padding: 0.5rem 1rem;
    border: 1px solid var(--material-theme-pagination-border, #d1d5db);
    border-radius: 0.375rem; /* rounded-md */
    color: var(--material-theme-pagination-link-color, #4b5563);
    text-decoration: none; /* Remove underline */
    background-color: var(--material-theme-pagination-bg, #ffffff);
    transition: background-color 0.15s ease-in-out;
}

/* Style pagination links on hover */
.page_search .cmp_pagination a:hover {
    background-color: var(--material-theme-pagination-hover-bg, #f3f4f6); /* Light gray background on hover */
    color: var(--material-theme-pagination-link-hover-color, #1f2937);
}

/* Style the current/active pagination link */
.page_search .cmp_pagination strong {
     /* Apply active state styles */
    padding: 0.5rem 1rem;
    border: 1px solid var(--material-theme-primary, #60a5fa);
    border-radius: 0.375rem;
    background-color: var(--material-theme-primary, #60a5fa);
    color: var(--material-theme-on-primary, #1f2937);
    font-weight: 600; /* font-semibold */
}

/* Style the page info text */
.page_search .cmp_pagination span {
    border: none; /* Remove border for the page info text */
    background-color: transparent; /* Transparent background for page info */
    font-weight: 500;
}