/* PEADS */
/*--------------------------*/

.cursor-grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px 0px;
    background: #94c3f563; /* Light blue background for the container */
    padding: 15px 30px;
    border-radius: 20px;
    overflow: auto; /* Important for table scrolling if content overflows */
    box-shadow: 0px 0px 10px 2px #c2c2c2; /* Subtle shadow for depth */
    position: relative; /* For potential absolute positioned elements like popups or loading overlays */
}

    .cursor-grid-container .temp-row td[data-field="delNo"] {
        visibility: hidden;
        pointer-events: none;
    }

    .cursor-grid-container .grid-actions {
        display: flex;
        justify-content: center; /* Center the 'Create New Record' button */
        margin: 10px 20px; /* Spacing around the actions area */
    }

        .cursor-grid-container .grid-actions button { /* e.g., Create New Record button */
            padding: 10px 30px;
            border: none;
            background: #132834; /* Dark blue background */
            color: white;
            border-radius: 10px;
            width: auto;
            min-width: 150px; /* Ensure button has a decent minimum width */
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

            .cursor-grid-container .grid-actions button:hover {
                background: #1f3c4d; /* Slightly lighter on hover */
            }

.cursor-grid-table-wrapper {
    flex-grow: 1; /* Allows the wrapper to fill available space */
    overflow-y: auto; /* Makes the wrapper, not the table, scrollable */
    position: relative; /* Required for sticky positioning to work within */
}

    .cursor-grid-container table {
        width: 100%; /* Ensure table takes full width of container */
        border-collapse: separate; /* Use separate for border-spacing */
        border-spacing: 0px 10px; /* Vertical spacing between rows */
    }

    .cursor-grid-container th {
        text-align: left;
        vertical-align: bottom !important;
        padding: 5px 10px 10px 10px;
        position: sticky; /* Make headers sticky */
        top: 0;
        z-index: 2; /* Header above tbody content */
        background: #94c3f563;
    }

        /* Removed .cursor-grid-container tr.filter-row th as filter row is gone */


        .cursor-grid-container th .header-content-wrapper { /* Wrapper for text, sort icon, and filter icon */
            display: flex;
            align-items: center;
            justify-content: space-between; /* Pushes filter icon to the right */
        }

        .cursor-grid-container th .header-text-sort-container {
            display: flex;
            align-items: center;
            flex-grow: 1; /* Allows text to take available space */
        }


        .cursor-grid-container th span { /* Applies to header text */
            font-weight: 700;
            color: #132834;
            font-size: 11pt;
        }

        .cursor-grid-container th .sort-indicator {
            margin-left: 8px;
            font-size: 0.8em;
        }

        /* Filter Icon Button Styles */
        .cursor-grid-container th .filter-icon-btn {
            background: transparent;
            border: none;
            color: #333; /* Default color for filter icon */
            cursor: pointer;
            padding: 3px 5px;
            margin-left: 0; /* Space from header text or sort indicator */
            border-radius: 4px;
            line-height: 1; /* Ensure icon is vertically centered if it has height */
        }

            .cursor-grid-container th .filter-icon-btn:hover {
                background-color: rgba(0,0,0,0.1); /* Slight background on hover */
            }

            .cursor-grid-container th .filter-icon-btn.filter-active i { /* Style when filter is active for this column */
                color: #007bff; /* Blue color for active filter */
                font-weight: bold; /* Make icon bolder */
            }


    .cursor-grid-container tbody {
        color: #132834;
        font-weight: 500;
    }

        .cursor-grid-container tbody td {
            padding: 8px 10px;
            background: #fff; /* White background for cells */
            border-bottom: 1px solid #e0e0e0; /* Separator line */
            /* vertical-align: top; */ /* Keep for consistency if needed */
        }

        /* First and last cell in a row can have rounded corners if desired, matching table row style */
        .cursor-grid-container tbody tr td:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .cursor-grid-container tbody tr td:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }


        .cursor-grid-container tbody tr:hover td {
            background-color: #f0f8ff; /* Light blue hover effect on rows */
        }


    /* Styling for inline editing inputs in temp-row or editable cells */
    .cursor-grid-container .temp-row td input,
    .cursor-grid-container .temp-row td select,
    .cursor-grid-container td.editable-active input,
    .cursor-grid-container td.editable-active select {
        padding: 5px 10px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: inherit;
        font-family: inherit;
        min-width: 0;
        border: 1px solid #d5e8fb;
        background: #d5e8fb7d;
        height: 40px;
        margin: 10px 5px;
    }

    .cursor-grid-container .temp-row td input[type=checkbox]{
        height: 20px;
    }

    .cursor-grid-container td.editable-active .tree-node-content-wrapper input.tree-node-label-input {
        /* Specific styling for input within tree wrapper if needed */
        flex-grow: 1; /* Allow input to take space next to toggle */
    }


    .cursor-grid-container .temp-row td,
    .cursor-grid-container td.editable-active { /* Cell containing active input */
        padding: 2px; /* Reduce padding when input is active to make input fit well */
    }


    .cursor-grid-container td.actions-cell {
        white-space: nowrap; /* Prevent action buttons from wrapping */
    }

        .cursor-grid-container td.actions-cell button {
            padding: 4px 10px; /* Slightly larger padding for action buttons */
            margin-right: 5px;
            font-size: 0.85em;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s ease, opacity 0.2s ease;
        }

            .cursor-grid-container td.actions-cell button:last-child {
                margin-right: 0;
            }


    .cursor-grid-container button.save-record-btn {
        background-color: #4CAF50; /* Green */
        color: white;
        border: none;
    }

        .cursor-grid-container button.save-record-btn:hover {
            background-color: #45a049;
        }

    .cursor-grid-container button.cancel-record-btn {
        background-color: #f44336; /* Red */
        color: white;
        border: none;
    }

        .cursor-grid-container button.cancel-record-btn:hover {
            background-color: #e03024;
        }

    .cursor-grid-container button.delete-record-btn {
        background-color: #e0756e; /* Softer Red */
        color: white;
        border: none;
    }

        .cursor-grid-container button.delete-record-btn:hover {
            background-color: #d9635b;
        }

    /*--------------------------*/
    /* --- Tree View Specific Styles --- */
    /*--------------------------*/

    .cursor-grid-container tbody td .tree-node-content-wrapper {
        display: flex;
        align-items: center;
        height: 100%; /* Ensure wrapper takes full cell height for alignment */
    }

    .cursor-grid-container .tree-toggle {
        display: inline-block; /* Or flex-shrink: 0 */
        cursor: pointer;
        width: 20px; /* Fixed width for the toggle icon */
        height: 20px; /* Fixed height */
        line-height: 20px; /* Center text vertically */
        text-align: center;
        margin-right: 5px;
        font-weight: bold;
        color: #132834; /* Dark blue for toggle icon */
        user-select: none; /* Prevent text selection on toggle */
        flex-shrink: 0; /* Prevent shrinking if label is long */
    }

    .cursor-grid-container .tree-node-label {
        flex-grow: 1; /* Allow label to take remaining space */
        white-space: nowrap; /* Prevent label text from wrapping */
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Show ellipsis for overflowed text */
    }

    .cursor-grid-container tbody tr.has-children > td .tree-node-label { /* If you add 'has-children' class for styling parent nodes */
        font-weight: bold;
    }


    /*-----------------------------------*/
    /* --- PAGINATION CONTROLS STYLES --- */
    /*-----------------------------------*/

    .cursor-grid-container .pagination-controls {
        width: 100%; /* Span the full width */
        box-sizing: border-box;
        padding: 10px 0; /* Reduced padding for a slimmer bar */
        text-align: center;
        border-top: 1px solid #dde2e7;
        /* Apply border radius to bottom corners if container itself has it and this is the visual bottom */
        border-bottom-left-radius: 20px; /* Matches container's border-radius */
        border-bottom-right-radius: 20px; /* Matches container's border-radius */
        flex-shrink: 0;
    }

        .cursor-grid-container .pagination-controls .page-info {
            margin: 0 12px;
            font-size: 0.95em;
            color: #132834;
            vertical-align: middle;
        }

        .cursor-grid-container .pagination-controls .public-grid-button.page-nav-btn {
            padding: 6px 12px;
            background: #132834; /* Dark blue for pagination buttons */
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            margin: 0 2px; /* Small margin between buttons */
            min-width: auto; /* Allow buttons to size naturally */
            vertical-align: middle;
            line-height: 1.5; /* Standard line height for button text */
            transition: background-color 0.2s ease, opacity 0.2s ease;
        }

            .cursor-grid-container .pagination-controls .public-grid-button.page-nav-btn:hover:not(:disabled) {
                background: #1f3c4d; /* Slightly lighter on hover */
            }

            .cursor-grid-container .pagination-controls .public-grid-button.page-nav-btn:disabled {
                background: #505a60; /* Darker, muted for disabled state */
                color: #a0a0a0;
                cursor: not-allowed;
                opacity: 0.7;
            }

/*-----------------------------------*/
/* --- FILTER POPUP STYLES --- */
/*-----------------------------------*/
.filter-popup {
    position: absolute; /* Positioned relative to body or a positioned ancestor */
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1050; /* High z-index to be on top of other elements */
    border-radius: 6px;
    padding: 12px;
    min-width: 200px; /* Minimum width for the popup */
}

.filter-popup-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between elements in the popup */
}

    .filter-popup-content select,
    .filter-popup-content input[type="text"],
    .filter-popup-content input[type="number"],
    .filter-popup-content input[type="datetime-local"] {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        border-radius: 4px;
        border: 1px solid #ced4da;
        font-size: 0.9em;
        color: #333;
    }

    .filter-popup-content select {
        appearance: auto; /* Ensure native dropdown arrow shows */
    }


.filter-popup-buttons {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 8px; /* Space between Apply and Clear buttons */
    margin-top: 10px; /* Space above the button row */
}

    .filter-popup-buttons .public-grid-button { /* Use existing button style and customize */
        padding: 6px 12px;
        font-size: 0.85em;
        border-radius: 4px;
        min-width: 70px; /* Min width for popup buttons */
    }

    .filter-popup-buttons .apply-filter-btn {
        background-color: #28a745; /* Green for Apply */
        color: white;
        border: none;
    }

        .filter-popup-buttons .apply-filter-btn:hover {
            background-color: #218838;
        }

    .filter-popup-buttons .clear-filter-btn {
        background-color: #6c757d; /* Grey for Clear */
        color: white;
        border: none;
    }

        .filter-popup-buttons .clear-filter-btn:hover {
            background-color: #5a6268;
        }