/*
 * Plugin Name: Property Book
 * Plugin URI: https://londonky.gov
 * Description: Styles for the Property Book plugin.
 * Version: 1
 * Author: Bryan K Johnson
 * Author URI: https://londonky.gov
 */

/*
START SECTION --- Base Modal Styles ---
Provides base styling for all modals used in the plugin (.pb-modal).
Includes backdrop, positioning, sizing, and content box styling.
*/

.pb-modal {
    display: none; /* Hidden by default, shown via JS */
    position: fixed; /* Stay in place */
    z-index: 9999999 !important; /* Ensure modal is on top of other elements, including potential theme headers */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scrolling for modal content if it exceeds viewport height */
    background-color: rgba(0, 0, 0, 0.65); /* Dark semi-transparent backdrop */
    -webkit-backdrop-filter: blur(3px); /* Apply background blur effect (WebKit) */
    backdrop-filter: blur(3px); /* Standard backdrop blur effect */
}

.pb-modal-content {
    background-color: #fefefe; /* Standard white background */
    margin: 5% auto; /* Center vertically (approx) and horizontally */
    padding: 20px;
    border: 1px solid #888; /* Basic border */
    width: 80%; /* Default width */
    max-width: 1200px; /* Limit maximum width on large screens */
    position: relative; /* Needed for absolute positioning of close button */
    display: flex; /* Use flexbox for basic content alignment */
    flex-direction: column; /* Stack content vertically by default */
    border-radius: 5px; /* Slightly rounded corners */
}

/* START Close Button Styling */
.pb-modal-close {
    color: #aaa; /* Light grey color */
    position: absolute; /* Position relative to .pb-modal-content */
    top: 0px;   /* Align to top */
    right: 5px; /* Align to right */
    font-size: 28px;
    font-weight: bold;
    padding: 5px 10px;
    line-height: 1; /* Prevent extra vertical space */
    cursor: pointer;
    text-decoration: none; /* Remove underline */
}

.pb-modal-close:hover,
.pb-modal-close:focus {
    color: red; /* Darken on hover/focus */
    text-decoration: none;
}
/* END Close Button Styling */

/*
* No explicit return value. Styles applied by the browser.
END SECTION --- Base Modal Styles ---
*/


/*
START SECTION --- Add/Edit Form Styles (#pb-inventory-form) ---
Specific styling applied to the Add/Edit form and its elements.
Includes base form layout, fieldset, legend, form row, and input element styles.
*/

/* Base Form Layout (Grid applied within media query) */
#pb-inventory-form {
    display: grid; /* Use grid for layout */
    grid-template-columns: 1fr; /* Single column by default */
    gap: 0px; /* No gap between fieldsets by default */
    margin-bottom: 20px; /* Space below the form container */
}

/* START Fieldset Styling */
#pb-inventory-form fieldset {
    border: 1px solid #ccc;
    padding: 25px 15px 15px 15px; /* Padding inside: top has extra space for legend */
    margin-bottom: 20px; /* Space between fieldsets */
    border-radius: 4px;
    background-color: #fdfdfd; /* Slightly off-white background */
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1); /* Subtle shadow */
    display: grid; /* Use grid for rows within the fieldset */
    grid-template-columns: 1fr; /* Single column for rows by default */
    gap: 15px; /* Gap between rows inside the fieldset */
    position: relative; /* Needed for absolute positioning of the legend */
}
/* END Fieldset Styling */

/* START Legend Styling */
#pb-inventory-form legend {
    font-weight: bold;
    padding: 2px 8px;
    margin-left: 10px; /* Indent from the left edge of fieldset */
    background-color: #fdfdfd; /* Match fieldset background */
    border: 1px solid #ccc; /* Match fieldset border */
    border-radius: 4px;
    position: absolute; /* Position relative to fieldset */
    top: -0.7em; /* Position slightly overlapping the top border */
    left: 10px;
    font-size: 0.9em; /* Slightly smaller font size */
}
/* END Legend Styling */

/* START Form Row Alignment (Grid inside Fieldset) */
.pb-form-row {
    display: grid;
    /* Define two columns: fixed width for label, flexible width for input */
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px; /* Gap between label and input */
    align-items: center; /* Vertically align label and input */
}
/* END Form Row Alignment */

/* START Label Styling */
.pb-form-row label {
    text-align: right; /* Align label text to the right */
    grid-column: 1; /* Place label in the first grid column */
    padding-right: 5px; /* Space between label text and input column */
    margin-bottom: 0; /* Override default WP label margins */
    font-weight: normal; /* Standard font weight */
}
/* END Label Styling */

/* START Required Field Indicator */
/* Adds a red asterisk after the label for the Department field */
.pb-form-row label[for="department_id"]::after {
    content: " *"; /* The asterisk */
    color: red; /* Red color for indicator */
}
/* END Required Field Indicator */
/* START Input/Select/Textarea Styling */
/* General styling for form input elements */
.pb-form-row input[type=text],
.pb-form-row input[type=date],
.pb-form-row input[type=number],
.pb-form-row select,
.pb-form-row textarea {
    width: 100%; /* Take up available width in grid column */
    padding: 8px 10px;
    margin-bottom: 0; /* Reset default margins */
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
    grid-column: 2; /* Place element in the second grid column */
    height: auto; /* Allow height to adjust based on content/padding */
    line-height: normal;
    max-width: 400px; /* Limit width of standard inputs */
    border-radius: 3px; /* Optional: slight rounding */
}

/* Override max-width specifically for textareas */
.pb-form-row textarea {
    min-height: 100px; /* Ensure textareas have a decent minimum height */
    max-width: 100%; /* Allow textareas to use full width of the grid column */
}
/* END Input/Select/Textarea Styling */

/* START Full-Width Row Styling */
/* Adjust grid alignment for rows containing full-width elements like textareas */
.pb-form-row.pb-full-width {
    /* Keep same column definition as standard rows */
    grid-template-columns: 150px minmax(0, 1fr);
    /* Align label and element to the top of the row */
    align-items: start;
}

.pb-form-row.pb-full-width label {
    padding-top: 8px; /* Add some padding to align better with textarea */
}

/* Ensure the textarea within a full-width row spans its column */
.pb-form-row.pb-full-width textarea {
    grid-column: 2; /* Ensure it's in the second column */
    max-width: none; /* Remove max-width constraint */
}
/* END Full-Width Row Styling */

/* START Checkbox Row Styling */
/* Special grid layout for the 'Donated' checkbox row */
.pb-form-row.pb-checkbox-row {
    /* 3 columns: Label area (empty), Checkbox, Text Label */
    grid-template-columns: 150px auto 1fr;
    align-items: center; /* Vertically center items */
}

.pb-form-row.pb-checkbox-row input[type=checkbox] {
    grid-column: 2; /* Place checkbox in the middle column */
    width: auto; /* Use default checkbox width */
    justify-self: start; /* Align checkbox to the start of its grid area */
    margin: 0; /* Reset margins */
    padding: 0;
    height: auto;
}

/* Styling for the text label associated with the checkbox */
.pb-form-row.pb-checkbox-row .pb-checkbox-label {
    grid-column: 3; /* Place text label in the third column */
    text-align: left; /* Align text left */
    font-weight: normal;
    padding-left: 5px; /* Space between checkbox and text */
}
/* END Checkbox Row Styling */

/* START Form Button Styling */
/* Container for the form action buttons (Save, Clear) */
.pb-form-buttons {
    display: flex; /* Use flexbox for alignment */
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Space between buttons */
    margin-top: 15px; /* Space above buttons */
    /* Spanning handled within media query */
    /* grid-column: 1 / -1; */
}

/* Styling for individual buttons within the Add/Edit form */
#pb-inventory-form button {
    width: auto; /* Default width */
    max-width: fit-content; /* Prevent button from stretching excessively */
    padding: 8px 20px;
    height: auto;
    align-self: center; /* Vertical alignment within flex container */
    font-size: 0.9rem; /* Slightly smaller font */
    margin: 0; /* Reset margins */
}
/* END Form Button Styling */

/* START Responsive Form Layout (Add/Edit Form) */
/* Apply 2-column layout to Add/Edit form on wider screens */
@media (min-width: 992px) { /* Matches typical 'medium' or 'large' breakpoints */
    /* Make the form element itself the grid container */
    #pb-inventory-form {
        grid-template-columns: repeat(2, 1fr); /* Two equal columns */
        gap: 20px; /* Gap between the fieldset columns */
    }

    /* Make the 'Details' fieldset span both columns */
    #pb-inventory-form fieldset.pb-fieldset-details {
        grid-column: 1 / -1; /* Span from first column line to last */
    }

    /* Make the button container span both columns */
    /* Note: Ensure this selector targets the specific button container if nested */
     #pb-inventory-form > .pb-form-buttons { /* Targeting direct child for specificity */
        grid-column: 1 / -1; /* Span from first column line to last */
     }
}
/* END Responsive Form Layout (Add/Edit Form) */

/*
* No explicit return value. Styles applied by the browser.
END SECTION --- Add/Edit Form Styles (#pb-inventory-form) ---
*/
/*
START SECTION --- Feedback Message Styling ---
Styles the success/error/warning messages displayed after form submissions.
Uses bold text and specific colors, overriding default WordPress notice colors if necessary.
Hides the default dismiss ('X') button visually.
*/

/* Style the paragraph text within the feedback message div */
/* Success messages */
#pb-feedback-message.notice-success p,
#pb-feedback-message.notice-success p strong {
    color: darkgreen !important; /* Use !important to ensure override */
    font-weight: bold;
}

/* Error and Warning messages */
#pb-feedback-message.notice-error p,
#pb-feedback-message.notice-warning p, /* Apply same style to warnings */
#pb-feedback-message.notice-error p strong,
#pb-feedback-message.notice-warning p strong {
    color: darkred !important; /* Use !important to ensure override */
    font-weight: bold;
}

/* Hide the default WordPress dismiss button icon visually */
/* Note: The notice remains dismissible via WP core JS if '.is-dismissible' class is present */
.pb-feedback.is-dismissible .notice-dismiss {
    display: none;
}

/*
* No explicit return value. Styles applied by the browser.
END SECTION --- Feedback Message Styling ---
*/


/*
START SECTION --- Inventory Table Overflow Control ---
Styles the container around the main inventory table to handle horizontal overflow on smaller screens.
Forces table headers to a single line.
*/

/* Container div that wraps the main table */
.pb-table-container {
    width: 100%; /* Take full available width */
    overflow-x: auto; /* Add horizontal scrollbar ONLY when table content exceeds container width */
    -webkit-overflow-scrolling: touch; /* Improve scrolling momentum on touch devices */
    margin-bottom: 1em; /* Space below the table container */
    /* border: 1px solid #e0e0e0; */ /* Optional: light border for visual debugging */
}

/* Style table headers within the main inventory table */
.pb-inventory-table thead th {
    white-space: nowrap; /* Prevent header text from wrapping */
    text-align: left; /* Standard left alignment */
    vertical-align: bottom; /* Align text to bottom */
    padding-right: 15px; /* Ensure space for DataTables sort icons */
}

/* Style table body cells */
.pb-inventory-table tbody td {
    white-space: normal; /* Allow cell content to wrap */
    /* Reset potential inherited text overflow styles */
    overflow: visible;
    text-overflow: clip;
    text-align: left; /* Standard left alignment */
    vertical-align: top; /* Align content to the top of the cell */
}

/* Ensure the table itself doesn't interfere with the container's overflow control */
.pb-inventory-table {
    /* No overflow rules should be applied directly to the table element */
    width: 100%; /* Ensure table tries to fill container */
}
.no-export {
    min-width:130px;
    text-align: center !important;
}
/*
* No explicit return value. Styles applied by the browser.
END SECTION --- Inventory Table Overflow Control ---
*/


/*
START SECTION --- Inventory Table Responsive Hiding ---
Defines CSS rules to hide specific table columns based on classes applied via PHP/JS.
Used in conjunction with the $column_map in PHP and columnDefs in JS.
*/

/* Rule to always hide columns marked with this class */
/* Applied to both <th> and corresponding <td> elements via JS columnDefs */
.pb-inventory-table .pb-col-always-hidden {
    display: none !important; /* Force hiding */
    visibility: hidden !important; /* Reinforce hiding for accessibility/layout */
}

/* Rule to hide specific columns only on smaller screens (mobile breakpoint) */
@media (max-width: 767px) { /* Adjust breakpoint as needed */
    /* Target elements (<th> and <td>) with the desktop-only class */
    .pb-inventory-table .pb-col-desktop-only {
        display: none !important; /* Hide on screens narrower than 768px */
        visibility: hidden !important;
    }
}

/*
* No explicit return value. Styles applied by the browser.
END SECTION --- Inventory Table Responsive Hiding ---
*/
/*
START SECTION --- Details Modal Styling ---
Styles for the read-only Details Modal (#pb-details-modal).
Aims to mimic the layout and appearance of the Add/Edit form (#pb-inventory-form).
Includes base element styling and responsive grid layout for fieldsets.
*/

/* Override base flex display inherited from generic .pb-modal-content */
/* This allows the grid display inside the media query to work correctly */
#pb-details-modal .pb-modal-content {
    display: block;
    /* Note: Other base .pb-modal-content styles like padding, margin, bg-color still apply */
}

/* START Fieldset Styling (Details Modal) */
/* Mirrors #pb-inventory-form fieldset styles */
#pb-details-modal fieldset {
    border: 1px solid #ccc;
    padding: 25px 15px 15px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #fdfdfd;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
    display: grid; /* Grid for rows within fieldset */
    grid-template-columns: 1fr;
    gap: 15px; /* Gap between rows inside fieldset */
    position: relative; /* For legend positioning */
}
/* END Fieldset Styling (Details Modal) */

/* START Legend Styling (Details Modal) */
/* Mirrors #pb-inventory-form legend styles */
#pb-details-modal legend {
    font-weight: bold;
    padding: 2px 8px;
    margin-left: 10px;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: absolute;
    top: -0.7em;
    left: 10px;
    font-size: 0.9em;
}
/* END Legend Styling (Details Modal) */

/* START Form Row Alignment (Details Modal) */
/* Mirrors .pb-form-row styles */
#pb-details-modal .pb-form-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr); /* Fixed label, flexible data */
    gap: 10px; /* Gap between label and data */
    align-items: center; /* Default vertical alignment */
}
/* END Form Row Alignment (Details Modal) */

/* START Label Styling (Details Modal) */
/* Mirrors .pb-form-row label styles */
#pb-details-modal .pb-form-row label {
    text-align: right;
    grid-column: 1;
    padding-right: 5px;
    margin-bottom: 0;
    font-weight: normal;
    align-self: center; /* Ensure vertical alignment with span */
}
/* END Label Styling (Details Modal) */

/* START Data Display Span Styling */
/* Styles the <span> elements used to display data */
#pb-details-modal .pb-form-row span[id^="pb-detail-"] {
    grid-column: 2; /* Place span in the second column */
    text-align: left;
    padding: 6px 0; /* Vertical padding to roughly match input height */
    word-break: break-word; /* Allow long words/values to break */
    white-space: normal; /* Allow text wrapping */
    min-height: 1.5em; /* Ensure some height even if empty */
    align-self: center; /* Align vertically with label */
    box-sizing: border-box;
}
/* END Data Display Span Styling */

/* START Full-Width Row Styling (Details Modal) */
/* Mirrors .pb-form-row.pb-full-width styles for Description/Comments */
#pb-details-modal .pb-form-row.pb-full-width {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start; /* Align label and span to top */
}

#pb-details-modal .pb-form-row.pb-full-width label {
    padding-top: 8px; /* Align label with first line of text */
    align-self: start;
}

#pb-details-modal .pb-form-row.pb-full-width span[id^="pb-detail-"] {
    grid-column: 2;
    max-width: none; /* Allow full width */
    white-space: pre-wrap; /* Respect line breaks from data */
    align-self: start; /* Align span top */
}
/* END Full-Width Row Styling (Details Modal) */

/* START Checkbox Row Styling (Details Modal) */
/* Mirrors .pb-form-row.pb-checkbox-row styles for 'Donated' display */
#pb-details-modal .pb-form-row.pb-checkbox-row {
    grid-template-columns: 150px auto 1fr; /* Label(empty), Data Span, Text Label */
    align-items: center;
}

/* Span holding 'Yes'/'No' value */
#pb-details-modal .pb-form-row.pb-checkbox-row span#pb-detail-donated {
    grid-column: 2;
    justify-self: start;
    padding: 6px 0; /* Match other spans */
    margin: 0;
}

/* Span containing the text "Donated" */
#pb-details-modal .pb-form-row.pb-checkbox-row span.pb-checkbox-label {
    grid-column: 3;
    text-align: left;
    font-weight: normal;
    padding-left: 5px;
    align-self: center;
}
/* END Checkbox Row Styling (Details Modal) */

/* START Buttons Wrapper / Footer Styling (Details Modal) */
#pb-details-modal .pb-form-buttons {
    display: flex;
    justify-content: space-between; /* Aligns update text left, button right */
    align-items: center; /* Vertically align text and button */
    gap: 10px; /* Space between elements if needed */
    margin-top: 15px; /* Space above footer */
    padding-top: 10px; /* Space below separator */
    border-top: 1px solid #eee; /* Visual separator line */
    /* Spanning handled within media query */
}
/* END Buttons Wrapper / Footer Styling (Details Modal) */

/* START Individual Buttons Styling (Details Modal) */
/* Mirrors #pb-inventory-form button styles */
#pb-details-modal .pb-form-buttons button {
    width: auto;
    max-width: fit-content;
    padding: 8px 20px;
    height: auto;
    align-self: center;
    font-size: 0.9rem;
    margin: 0;
}
/* END Individual Buttons Styling (Details Modal) */

/* START Footer Text Style */
#pb-detail-update-info {
  font-size: 0.85em;
  color: #555;
  /* No specific positioning needed as parent uses space-between */
}
/* END Footer Text Style */

/* START Responsive Grid Layout (Details Modal) */
@media (min-width: 992px) {
    /* Apply 2-column grid to the dedicated container div, mimicking the form */
    #pb-details-container { /* Targeting the new container */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; /* Gap between fieldset grid items */
    }

    /* Make ONLY the 'Details' fieldset (direct child) span both columns */
    #pb-details-container > fieldset.pb-fieldset-details {
        grid-column: 1 / -1; /* Span across grid columns */
    }
    /* Other fieldsets will automatically flow into the 2 columns */

    /* Make the buttons div (direct child) span both columns */
    #pb-details-container > .pb-form-buttons {
        grid-column: 1 / -1; /* Span across grid columns */
    }
}
/* END Responsive Grid Layout (Details Modal) */

/*
* No explicit return value. Styles applied by the browser.
END SECTION --- Details Modal Styling ---
*/
/* START SECTION --- Filter Row Styles ---
 * Styles the container and elements for the inventory table filter row.
 * Includes layout, spacing, and responsive hiding.
 * Version: 0.5.3 (Fix date range stacking)
 */

#pb-filters-container {
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap; 
    gap: 15px 20px; 
    align-items: flex-end; 
}

/* Style individual filter items (label + input/select) */
/* REMOVED display:flex and flex-direction:column from here */
.pb-filter-item {
    /* Let items stack naturally or control via children's display */
     gap: 3px; /* Keep gap for consistency if needed, but might not be necessary now */
     /* display: inline-block; /* Alternative if needed */
     vertical-align: bottom; /* Helps align with flex-end on main container */
}

/* Label styles - ensure they stack above inputs/selects */
.pb-filter-item label {
    display: block; /* Make label a block element to take its own line */
    font-weight: bold;
    font-size: 0.85em;
    color: #333;
    margin-bottom: 3px; /* Add space below label */
    text-align: left;
}

/* Inputs and Selects */
.pb-filter-item select.pb-filter-select { /* Target ONLY selects now */
 display: block;
 padding: 6px 8px;
 font-size: 0.9em;
 border: 1px solid #ccc;
 border-radius: 3px;
 min-width: 220px; /* <<< Increased minimum width */
 /* max-width: 220px; */ /* <<< Removed maximum width */
 box-sizing: border-box;
 height: auto;
 line-height: normal;
 width: 100%; /* Allow select to use available width within its flex item */
 /* Add some right padding specifically for the dropdown arrow */
 padding-right: 25px; /* Adjust as needed */
}

/* Container for buttons and search box */
.pb-filter-actions {
    margin-left: auto; 
    display: flex;
    gap: 10px; 
    align-items: center; 
}

/* Style the placeholders where DataTables elements will go */
#pb-download-button-container,
#pb-search-box-container {
    display: inline-block; 
}

/* Ensure the DataTables search input fits reasonably */
#pb-search-box-container .dt-search input { 
    margin-left: 5px; 
    padding: 5px 8px;
    font-size: 0.9em;
    border-radius: 3px;
    border: 1px solid #ccc;
    min-width: 150px;
}

/* Responsive Hiding for Small Screens */
@media (max-width: 767px) { 
    #pb-filters-container {
        display: none; 
    }
    /* Optionally hide the separate "Add New Item" button too on small screens if desired */
    /* .pb-action-buttons { display: none; } */
}

/*
 * No explicit return value. Styles applied by the browser.
END SECTION --- Filter Row Styles ---
*/
/*
START SECTION --- DataTables Length Menu Fix ---
* Version: 0.5.8
* Adds padding to the "Show X entries" dropdown to prevent text overlap.
*/

/* Target the select element within the DataTables length wrapper */
.dt-length select {
    background-color: white !important;
    padding: 4px 35px 4px 4px !important; /* Adjust padding: Top/Bottom(4px), Right(25px for arrow), Left(8px) */
    height: 30px !important;             /* Set an explicit height (adjust as needed) */
    line-height: 20px !important;          /* Match line-height approximately to height minus padding (adjust) */
    vertical-align: middle !important;     /* Try to vertically center the element */
    width: auto;                  /* Usually okay, but set explicitly if needed */
    border: 1px solid #ccc !important;   /* Ensure border is consistent */
    border-radius: 3px !important;       /* Match other inputs/selects */
    box-sizing: border-box !important;     /* Include padding/border in height/width */
    appearance: none;  /* Uncomment this and below lines ONLY if using custom arrow */
    -webkit-appearance: none; 
}

/* Optional: Adjust the label text alignment if needed */
.dt-length label {
    vertical-align: middle; /* Align the "Show X entries" text */
    margin-right: 5px; /* Add space between label and select */
}
/*
* No explicit return value. Styles applied by the browser.
END SECTION --- DataTables Length Menu Fix ---
*/
/*
START SECTION --- Separate Table Action Bar Styling (#pb-table-actions) ---
* Styles the container usually holding 'Add New', 'Clear Filters', etc.
* This container is assumed to be SEPARATE FROM the DataTables DOM elements below.
*/

#pb-table-actions {
    display: flex;
    flex-wrap: wrap;           /* Allow wrapping */
    align-items: center;       /* Vertically align items */
    gap: 10px 15px;            /* Row and column gap */
    padding: 10px 0;           /* Vertical spacing */
    margin-bottom: 10px;       /* Space below this bar, before DataTable controls */
    border-bottom: 1px solid #e0e0e0; /* Optional: Add separator */
}

/* Style individual items within this action bar */
/* Assumes items like buttons are wrapped in <div class="pb-action-item"> */
#pb-table-actions .pb-action-item {
    display: flex;             /* Use flex for content within */
    align-items: center;
}

/* Base style for buttons within THIS action bar */
#pb-table-actions .button {
    padding: 5px 12px !important;
    font-size: 0.85em !important;
    line-height: 1.5 !important;
    height: auto;
    margin: 0;                 /* Reset margin */
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    vertical-align: middle;
    white-space: nowrap;       /* Prevent button text wrapping */
}

/* Hover: Add New Item Button (in this bar) */
#pb-table-actions #pb-add-new-item.button-primary:hover {
    background-color: #ddeeff !important; /* Faint blue */
    border-color: #99ccff !important;    /* Slightly darker blue */
}

/* Hover: Clear Filters Button (in this bar) */
#pb-table-actions #pb-clear-filters-button.button-secondary:hover {
    background-color: #ffeeee !important; /* Faint red */
    border-color: red;
}

/*
END SECTION --- Separate Table Action Bar Styling (#pb-table-actions) ---
*/
/*
START SECTION --- DataTable Generated Controls Styling (.pb-dt-wrapper-top) ---
* Styles the container generated by the DataTables 'dom' option.
* Layout: Search & Download Button(s) Left, Info element Right.
*/

/* 1. Main Top Wrapper (Generated by DT dom) */
.pb-dt-wrapper-top {
    display: flex;
    justify-content: space-between; /* Push left group and info apart */
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 15px;                 /* Gap if items wrap */
    padding: 5px 0;                /* Reduced padding compared to action bar above */
    margin-bottom: 15px;           /* Space below controls, before table */
}

/* 2. Container for Left Items (Search, DT Buttons) */
.pb-dt-top-left {
    display: flex;
    align-items: center;
    gap: 15px;                     /* Space BETWEEN Search and DT Buttons */
    flex-wrap: wrap;
}

/* 3. Search Box (within .pb-dt-top-left) */
.pb-dt-top-left #pb-search-box-container .dt-search input {
    margin-left: 0;
    vertical-align: middle;
    /* Add specific width/padding/border styles if needed */
}

/* 4. Download Buttons Container & Button (within .pb-dt-top-left) */
.pb-dt-top-left #pb-download-button-container .dt-button {
    margin: 0 !important;
    vertical-align: middle;
    border-radius: 3px !important;
    padding: 5px 12px !important;   /* Style consistency */
    font-size: 0.85em !important;   /* Style consistency */
    line-height: 1.5 !important;   /* Style consistency */
    height: auto;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* Add hover effects specific to DT buttons if desired */
}

/* 5. Info Element (Right Aligned) */
.pb-dt-wrapper-top .dataTables_info {
    /* Position handled by parent's justify-content */
    margin-left: 15px;             /* Space if wrapping occurs */
    text-align: right;
    font-size: 0.9em;              /* Example: Slightly smaller font */
    color: #555;                   /* Example: Slightly muted color */
}

/*
END SECTION --- DataTable Generated Controls Styling (.pb-dt-wrapper-top) ---
*/