@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* /App.razor.rz.scp.css */
.loading-progress[b-72uudkf6ej] {
    position: relative;
    display: block;
    width: 10rem;
    height: 10rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle[b-72uudkf6ej] {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child[b-72uudkf6ej] {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text[b-72uudkf6ej] {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text[b-72uudkf6ej]:after {
        /*content: var(--blazor-load-percentage-text, "Determining session state...");*/
    }
/* /Components/CustomAssetPermissionsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-y31grfb953] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-y31grfb953] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-y31grfb953] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-y31grfb953] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-y31grfb953] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-y31grfb953] {
            color: white;
        }

    .toolbar-btn .material-icons[b-y31grfb953] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-y31grfb953] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 350px;
    height: 38px;
}

.search-icon[b-y31grfb953] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-y31grfb953] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-y31grfb953]::placeholder {
        color: #999;
    }

.clear-icon[b-y31grfb953] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-y31grfb953] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-y31grfb953] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-y31grfb953] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-y31grfb953] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-y31grfb953] {
        border-right: none;
    }

    .header-cell:hover[b-y31grfb953] {
        background: #e8e8e8;
    }

.sort-icon[b-y31grfb953] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-y31grfb953] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-y31grfb953] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-y31grfb953] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-y31grfb953] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-y31grfb953] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-y31grfb953] {
        background-color: white;
    }

    .data-row.odd-row[b-y31grfb953] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-y31grfb953] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-y31grfb953] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-y31grfb953] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-y31grfb953] {
                color: white !important;
            }

    .data-row.selected[b-y31grfb953] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-y31grfb953] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-y31grfb953] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-y31grfb953] {
                color: white !important;
            }

.custom-grid-cell[b-y31grfb953] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-y31grfb953] {
        border-right: none;
    }

.focusable-cell[b-y31grfb953] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-y31grfb953] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):focus[b-y31grfb953]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):focus[b-y31grfb953]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-y31grfb953]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-y31grfb953]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-y31grfb953]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-y31grfb953]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-y31grfb953]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-y31grfb953]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-y31grfb953]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-y31grfb953]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-y31grfb953] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-y31grfb953] {
    display: flex;
    align-items: center;
}

.role-badge[b-y31grfb953] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-y31grfb953] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-y31grfb953] {
    font-weight: 700 !important;
}

.role-badge:hover[b-y31grfb953]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-badge:hover[b-y31grfb953]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-badge:hover[b-y31grfb953]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-badge:hover[b-y31grfb953]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell[b-y31grfb953] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-y31grfb953] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-y31grfb953] {
        font-size: 16px;
    }

.delete-btn[b-y31grfb953] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-y31grfb953] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-y31grfb953] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-y31grfb953]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-y31grfb953]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-y31grfb953]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-y31grfb953]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-y31grfb953] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-y31grfb953] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-y31grfb953] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-y31grfb953] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-y31grfb953] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-y31grfb953] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-y31grfb953] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-y31grfb953] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-y31grfb953] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-y31grfb953] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-y31grfb953 1s linear infinite;
}

@keyframes spin-b-y31grfb953 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-y31grfb953] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-y31grfb953] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-y31grfb953]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-y31grfb953]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-y31grfb953]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-y31grfb953]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomAssetsGrid.razor.rz.scp.css */
.custom-grid-container[b-bkyn33e2jz] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

.custom-grid-toolbar[b-bkyn33e2jz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-bkyn33e2jz] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-bkyn33e2jz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-bkyn33e2jz] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-bkyn33e2jz] {
            color: white;
        }

    .toolbar-btn .material-icons[b-bkyn33e2jz] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-bkyn33e2jz] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-bkyn33e2jz] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-bkyn33e2jz] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-bkyn33e2jz]::placeholder {
        color: #999;
    }

.clear-icon[b-bkyn33e2jz] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-bkyn33e2jz] {
        color: #E36F26;
    }

.custom-grid-header[b-bkyn33e2jz] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-bkyn33e2jz] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-bkyn33e2jz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-bkyn33e2jz] {
        border-right: none;
    }

    .header-cell:hover[b-bkyn33e2jz] {
        background: #e8e8e8;
    }

    .header-cell.text-right[b-bkyn33e2jz] {
        justify-content: flex-end;
    }

.sort-icon[b-bkyn33e2jz] {
    font-size: 16px;
    color: #E36F26;
}

.custom-grid-body[b-bkyn33e2jz] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-bkyn33e2jz] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.data-row[b-bkyn33e2jz] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-bkyn33e2jz] {
        background-color: white;
    }

    .data-row.odd-row[b-bkyn33e2jz] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-bkyn33e2jz] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-bkyn33e2jz] {
            font-weight: 700 !important;
        }

        .data-row:hover[b-bkyn33e2jz]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
            font-weight: normal;
        }

        .data-row:hover[b-bkyn33e2jz]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

    .data-row:first-of-type:hover[b-bkyn33e2jz]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 5px;
    }

    .data-row:first-of-type:hover[b-bkyn33e2jz]::before {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: -5px;
        border-top-color: transparent;
        border-bottom-color: #333;
    }

    .data-row.focused[b-bkyn33e2jz] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-bkyn33e2jz] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-bkyn33e2jz] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-bkyn33e2jz] {
            padding-left: 4px;
        }

.custom-grid-cell[b-bkyn33e2jz] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-bkyn33e2jz] {
        border-right: none;
    }

    .custom-grid-cell.text-right[b-bkyn33e2jz] {
        justify-content: flex-end;
    }

.cell-content[b-bkyn33e2jz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-grid-footer[b-bkyn33e2jz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-bkyn33e2jz] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-bkyn33e2jz] {
    color: #E36F26;
    font-weight: 600;
}

.loading-overlay[b-bkyn33e2jz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-bkyn33e2jz] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-bkyn33e2jz 1s linear infinite;
}

@keyframes spin-b-bkyn33e2jz {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-data-message[b-bkyn33e2jz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    gap: 12px;
}

    .no-data-message .material-icons[b-bkyn33e2jz] {
        font-size: 48px;
        opacity: 0.5;
    }

    .no-data-message p[b-bkyn33e2jz] {
        margin: 0;
        font-size: 13px;
    }

.custom-grid-totals[b-bkyn33e2jz] {
    background: #f0f0f0;
    border-top: 2px solid #ddd;
    flex-shrink: 0;
}

.totals-row[b-bkyn33e2jz] {
    display: flex;
    background: #f0f0f0;
    height: 30px;
    border-bottom: 1px solid #ddd;
}

.totals-cell[b-bkyn33e2jz] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    font-weight: 700;
    color: #333;
}

    .totals-cell:last-child[b-bkyn33e2jz] {
        border-right: none;
    }

    .totals-cell.text-right[b-bkyn33e2jz] {
        justify-content: flex-end;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-bkyn33e2jz] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-bkyn33e2jz] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-bkyn33e2jz]::after {
            content: 'Click or enter to navigate to asset';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-bkyn33e2jz]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row.first-row .focusable-cell:focus[b-bkyn33e2jz]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-bkyn33e2jz]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomCapitalDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-g600p5f3nb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-g600p5f3nb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-g600p5f3nb] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.toolbar-right[b-g600p5f3nb] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-g600p5f3nb] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

    .toolbar-btn:hover[b-g600p5f3nb] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-g600p5f3nb] {
            color: white;
        }

    .toolbar-btn .material-icons[b-g600p5f3nb] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-g600p5f3nb] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-g600p5f3nb] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.search-box[b-g600p5f3nb] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-g600p5f3nb] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-g600p5f3nb] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-g600p5f3nb]::placeholder {
        color: #999;
    }

.clear-icon[b-g600p5f3nb] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-g600p5f3nb] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-g600p5f3nb] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-g600p5f3nb] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-g600p5f3nb] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-g600p5f3nb] {
        border-right: none;
    }

    .header-cell:hover[b-g600p5f3nb] {
        background: #e8e8e8;
    }

.sort-icon[b-g600p5f3nb] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-g600p5f3nb] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-g600p5f3nb] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-g600p5f3nb] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-g600p5f3nb] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-g600p5f3nb] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-g600p5f3nb] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-g600p5f3nb] {
            background-color: inherit;
        }

    .data-row.odd-row[b-g600p5f3nb] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-g600p5f3nb] {
            background-color: inherit;
        }

    .data-row.focused[b-g600p5f3nb] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-g600p5f3nb] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-g600p5f3nb] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-g600p5f3nb] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-g600p5f3nb] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-g600p5f3nb] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-g600p5f3nb] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-g600p5f3nb] {
                color: white !important;
            }

.custom-grid-cell[b-g600p5f3nb] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-g600p5f3nb] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-g600p5f3nb] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-g600p5f3nb] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-g600p5f3nb]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-g600p5f3nb]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-g600p5f3nb]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-g600p5f3nb]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-g600p5f3nb]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-g600p5f3nb]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-g600p5f3nb]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-g600p5f3nb]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-g600p5f3nb] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-g600p5f3nb] {
    display: flex;
    align-items: center;
}

.role-badge[b-g600p5f3nb] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-g600p5f3nb] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-g600p5f3nb] {
    font-weight: 700 !important;
}

.actions-cell[b-g600p5f3nb] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-g600p5f3nb] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-g600p5f3nb] {
        font-size: 16px;
    }

.delete-btn[b-g600p5f3nb] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-g600p5f3nb] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-g600p5f3nb] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-g600p5f3nb]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-g600p5f3nb]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-g600p5f3nb]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-g600p5f3nb]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-g600p5f3nb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-g600p5f3nb] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-g600p5f3nb] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-g600p5f3nb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-g600p5f3nb] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-g600p5f3nb 1s linear infinite;
}

@keyframes spin-b-g600p5f3nb {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-g600p5f3nb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-g600p5f3nb] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-g600p5f3nb]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-g600p5f3nb]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-g600p5f3nb]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-g600p5f3nb]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-g600p5f3nb] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-g600p5f3nb] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-g600p5f3nb] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-g600p5f3nb] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Capital Date column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Amount column (data-col="2") */
.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Area column (data-col="3") */
.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-g600p5f3nb]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Right-align numeric column headers */
.header-cell.area-header[b-g600p5f3nb] {
    justify-content: flex-end;
}
/* /Components/CustomCapitalGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-rbdfvm0lhe] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-rbdfvm0lhe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-rbdfvm0lhe] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-rbdfvm0lhe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-rbdfvm0lhe] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-rbdfvm0lhe] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-rbdfvm0lhe] {
            color: white;
        }

    .toolbar-btn .material-icons[b-rbdfvm0lhe] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-rbdfvm0lhe] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-rbdfvm0lhe] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-rbdfvm0lhe] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-rbdfvm0lhe]::placeholder {
        color: #999;
    }

.clear-icon[b-rbdfvm0lhe] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-rbdfvm0lhe] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-rbdfvm0lhe] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-rbdfvm0lhe] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-rbdfvm0lhe] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-rbdfvm0lhe] {
        border-right: none;
    }

    .header-cell:hover[b-rbdfvm0lhe] {
        background: #e8e8e8;
    }

.sort-icon[b-rbdfvm0lhe] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-rbdfvm0lhe] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-rbdfvm0lhe] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-rbdfvm0lhe] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-rbdfvm0lhe] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-rbdfvm0lhe] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-rbdfvm0lhe] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-rbdfvm0lhe] {
            background-color: inherit;
        }

    .data-row.odd-row[b-rbdfvm0lhe] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-rbdfvm0lhe] {
            background-color: inherit;
        }

    .data-row.focused[b-rbdfvm0lhe] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-rbdfvm0lhe] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-rbdfvm0lhe] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-rbdfvm0lhe] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-rbdfvm0lhe] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-rbdfvm0lhe] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-rbdfvm0lhe] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-rbdfvm0lhe] {
                color: white !important;
            }

.custom-grid-cell[b-rbdfvm0lhe] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-rbdfvm0lhe] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-rbdfvm0lhe] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-rbdfvm0lhe] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-rbdfvm0lhe]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-rbdfvm0lhe]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-rbdfvm0lhe] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-rbdfvm0lhe] {
    display: flex;
    align-items: center;
}

.role-badge[b-rbdfvm0lhe] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-rbdfvm0lhe] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-rbdfvm0lhe] {
    font-weight: 700 !important;
}

.actions-cell[b-rbdfvm0lhe] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-rbdfvm0lhe] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.icon-with-badge[b-rbdfvm0lhe] {
    font-size: 20px;
    color: #E36F26 !important;
    transition: color 0.2s ease;
}

.custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-rbdfvm0lhe] {
    color: #E36F26 !important;
}

.data-row.focused .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-rbdfvm0lhe] {
    color: #E36F26 !important;
}

.data-row.selected .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-rbdfvm0lhe] {
    color: #E36F26 !important;
}

.badge[b-rbdfvm0lhe] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-rbdfvm0lhe] {
    color: #333;
    font-weight: 700;
}

.items-btn[b-rbdfvm0lhe] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
}

.data-row.selected .items-btn[b-rbdfvm0lhe] {
    font-weight: 700 !important;
}

.data-row.focused .items-btn[b-rbdfvm0lhe] {
    font-weight: 700 !important;
}

.items-btn:hover[b-rbdfvm0lhe] {
    color: #E36F26 !important;
}

.action-btn[b-rbdfvm0lhe] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-rbdfvm0lhe] {
        font-size: 16px;
    }

.delete-btn[b-rbdfvm0lhe] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-rbdfvm0lhe] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-rbdfvm0lhe] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-rbdfvm0lhe]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-rbdfvm0lhe]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-rbdfvm0lhe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-rbdfvm0lhe] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-rbdfvm0lhe] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-rbdfvm0lhe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-rbdfvm0lhe] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-rbdfvm0lhe 1s linear infinite;
}

@keyframes spin-b-rbdfvm0lhe {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-rbdfvm0lhe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-rbdfvm0lhe] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-rbdfvm0lhe]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-rbdfvm0lhe]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-rbdfvm0lhe]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-rbdfvm0lhe]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-rbdfvm0lhe] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-rbdfvm0lhe] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-rbdfvm0lhe] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-rbdfvm0lhe] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Capital Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Area column (data-col="4") - Read-only */
.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section column (data-col="6") */
.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Notes Badge column (data-col="7") */
.focusable-cell[data-col="7"].actions-cell:focus[b-rbdfvm0lhe]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].actions-cell:focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Dates Badge column (data-col="8") */
.focusable-cell[data-col="8"].actions-cell:focus[b-rbdfvm0lhe]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Details column (data-col="9") */
.focusable-cell[data-col="9"].actions-cell:focus[b-rbdfvm0lhe]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:focus[b-rbdfvm0lhe]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for all action cell tooltips */
.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-rbdfvm0lhe]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-rbdfvm0lhe]::after,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-rbdfvm0lhe]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-rbdfvm0lhe]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-rbdfvm0lhe]::before,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-rbdfvm0lhe]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Right-align numeric column headers */
.header-cell.area-header[b-rbdfvm0lhe] {
    justify-content: flex-end;
}
/* /Components/CustomChargeDetailPreviewGrid.razor.rz.scp.css */
/* Custom Grid Container - Preview Mode */
.custom-grid-container.preview-grid[b-is96nup1e6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Grid Header */
.custom-grid-header[b-is96nup1e6] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-is96nup1e6] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-is96nup1e6] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    user-select: none;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-is96nup1e6] {
        border-right: none;
    }

    /* Right-align numeric column headers */
    .header-cell.area-header[b-is96nup1e6] {
        justify-content: flex-end;
    }

/* Grid Body */
.custom-grid-body[b-is96nup1e6] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-is96nup1e6] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-is96nup1e6] {
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-is96nup1e6] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-is96nup1e6] {
            background-color: inherit;
        }

    .data-row.odd-row[b-is96nup1e6] {
        background-color: #f9f9f9;
    }

        .data-row.odd-row .custom-grid-cell[b-is96nup1e6] {
            background-color: inherit;
        }

/* Preview row - read-only styling */
.preview-row[b-is96nup1e6] {
    cursor: default;
    background-color: #fafafa;
}

    .preview-row:hover[b-is96nup1e6] {
        background-color: #f0f0f0 !important;
    }

    .preview-row .custom-grid-cell[b-is96nup1e6] {
        color: #555;
    }

.custom-grid-cell[b-is96nup1e6] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
    color: #333;
}

    .custom-grid-cell:last-child[b-is96nup1e6] {
        border-right: none;
    }

.cell-content[b-is96nup1e6] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
    color: inherit;
}

/* Special styling for preview cells */
.preview-term[b-is96nup1e6] {
    display: inline-block;
    font-weight: 700;
    color: #E36F26;
    background: #fff3e0;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.preview-amount[b-is96nup1e6] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 600;
    color: #2e7d32;
    font-size: 12px;
}

/* Grid Footer */
.custom-grid-footer[b-is96nup1e6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-is96nup1e6] {
    display: flex;
    gap: 12px;
    color: #666;
    font-weight: 600;
}

/* Loading & No Data */
.no-data-message[b-is96nup1e6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    padding: 2em;
}

    .no-data-message .material-icons[b-is96nup1e6] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    .no-data-message p[b-is96nup1e6] {
        margin: 0;
        font-size: 14px;
    }

/* Scrollbar Styling */
.custom-grid-body[b-is96nup1e6]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-is96nup1e6]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-is96nup1e6]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-is96nup1e6]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomChargeDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-45b0hyyevq] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-45b0hyyevq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-45b0hyyevq] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.toolbar-title[b-45b0hyyevq] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-45b0hyyevq] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.toolbar-btn[b-45b0hyyevq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-45b0hyyevq] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-45b0hyyevq] {
            color: white;
        }

    .toolbar-btn .material-icons[b-45b0hyyevq] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.back-btn[b-45b0hyyevq] {
    background: white;
    border: 1px solid #ccc;
}

    .back-btn:hover[b-45b0hyyevq] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

.wizard-btn[b-45b0hyyevq] {
    background: white;
    border: 1px solid #ccc;
    color: #333;
}

    .wizard-btn:hover[b-45b0hyyevq] {
        background: #E36F26;
        color: white;
    }

        .wizard-btn:hover .material-icons[b-45b0hyyevq] {
            color: white;
        }

    .wizard-btn .material-icons[b-45b0hyyevq] {
        color: #E36F26;
    }

.search-box[b-45b0hyyevq] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-45b0hyyevq] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-45b0hyyevq] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-45b0hyyevq]::placeholder {
        color: #999;
    }

.clear-icon[b-45b0hyyevq] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-45b0hyyevq] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-45b0hyyevq] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-45b0hyyevq] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-45b0hyyevq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-45b0hyyevq] {
        border-right: none;
    }

    .header-cell:hover[b-45b0hyyevq] {
        background: #e8e8e8;
    }

.sort-icon[b-45b0hyyevq] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-45b0hyyevq] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-45b0hyyevq] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-45b0hyyevq] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-45b0hyyevq] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-45b0hyyevq] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-45b0hyyevq] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-45b0hyyevq] {
            background-color: inherit;
        }

    .data-row.odd-row[b-45b0hyyevq] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-45b0hyyevq] {
            background-color: inherit;
        }

    .data-row.focused[b-45b0hyyevq] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-45b0hyyevq] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-45b0hyyevq] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-45b0hyyevq] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-45b0hyyevq] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-45b0hyyevq] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-45b0hyyevq] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-45b0hyyevq] {
                color: white !important;
            }

.custom-grid-cell[b-45b0hyyevq] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
    color: #333;
}

    .custom-grid-cell:last-child[b-45b0hyyevq] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-45b0hyyevq] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-45b0hyyevq] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-45b0hyyevq]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-45b0hyyevq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-45b0hyyevq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-45b0hyyevq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-45b0hyyevq]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-45b0hyyevq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-45b0hyyevq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-45b0hyyevq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-45b0hyyevq] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
    color: inherit;
}

.role-cell[b-45b0hyyevq] {
    display: flex;
    align-items: center;
}

.role-badge[b-45b0hyyevq] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-45b0hyyevq] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-45b0hyyevq] {
    font-weight: 700 !important;
}

.actions-cell[b-45b0hyyevq] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-45b0hyyevq] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.action-btn[b-45b0hyyevq] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-45b0hyyevq] {
        font-size: 16px;
    }

.delete-btn[b-45b0hyyevq] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-45b0hyyevq] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-45b0hyyevq] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-45b0hyyevq]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-45b0hyyevq]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-45b0hyyevq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-45b0hyyevq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-45b0hyyevq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-45b0hyyevq] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-45b0hyyevq] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-45b0hyyevq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-45b0hyyevq] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-45b0hyyevq 1s linear infinite;
}

@keyframes spin-b-45b0hyyevq {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-45b0hyyevq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-45b0hyyevq] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-45b0hyyevq]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-45b0hyyevq]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-45b0hyyevq]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-45b0hyyevq]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-45b0hyyevq] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-45b0hyyevq] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-45b0hyyevq] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-45b0hyyevq] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Begin Date column (data-col="0") - LEFT JUSTIFIED */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for End Date column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Amount column (data-col="3") */
.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-45b0hyyevq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Right-align numeric column headers */
.header-cell.area-header[b-45b0hyyevq] {
    justify-content: flex-end;
}

/* Highlight dates with gaps */
.date-gap-highlight .cell-content[b-45b0hyyevq] {
    color: #E36F26 !important;
    font-weight: 600;
}

.date-gap-highlight.focusable-cell:focus[b-45b0hyyevq] {
    border-color: #E36F26 !important;
}

.date-gap-highlight .inline-edit-input[b-45b0hyyevq] {
    color: #E36F26 !important;
    font-weight: 600;
    border-color: #E36F26 !important;
}

/* Add Rows Dialog Styles */
.dialog-overlay[b-45b0hyyevq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.dialog-container[b-45b0hyyevq] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 400px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-45b0hyyevq] {
    padding: 1em 1.5em;
    border-bottom: 2px solid #E36F26;
    background: #f9f9f9;
    border-radius: 8px 8px 0 0;
}

    .dialog-header h3[b-45b0hyyevq] {
        margin: 0;
        color: #E36F26;
        font-size: 18px;
        font-weight: 700;
    }

.dialog-body[b-45b0hyyevq] {
    padding: 1.5em;
}

.form-group[b-45b0hyyevq] {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

    .form-group label[b-45b0hyyevq] {
        font-weight: 600;
        color: #333;
        font-size: 14px;
    }

.form-input[b-45b0hyyevq] {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-45b0hyyevq] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.2);
    }

.dialog-footer[b-45b0hyyevq] {
    padding: 1em 1.5em;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.dialog-btn[b-45b0hyyevq] {
    padding: 0.5em 1.5em;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-btn[b-45b0hyyevq] {
    background: white;
    color: #666;
    border: 1px solid #ccc;
}

    .cancel-btn:hover[b-45b0hyyevq] {
        background: #f5f5f5;
        border-color: #999;
    }

.submit-btn[b-45b0hyyevq] {
    background: #E36F26;
    color: white;
}

    .submit-btn:hover[b-45b0hyyevq] {
        background: #d5641f;
    }

/* Preview Dialog Styles */
.preview-dialog-container[b-45b0hyyevq] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 800px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.preview-dialog-body[b-45b0hyyevq] {
    padding: 1.5em;
    overflow-y: auto;
    flex: 1;
}

.preview-grid[b-45b0hyyevq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .preview-grid thead[b-45b0hyyevq] {
        background: #f5f5f5;
        position: sticky;
        top: 0;
    }

    .preview-grid th[b-45b0hyyevq] {
        padding: 8px;
        text-align: left;
        font-weight: 700;
        border: 1px solid #ddd;
        white-space: nowrap;
    }

        .preview-grid th.numeric-header[b-45b0hyyevq] {
            text-align: right;
        }

    .preview-grid td[b-45b0hyyevq] {
        padding: 8px;
        border: 1px solid #ddd;
    }

        .preview-grid td.numeric-cell[b-45b0hyyevq] {
            text-align: right;
        }

    .preview-grid tbody tr:nth-child(even)[b-45b0hyyevq] {
        background-color: #f9f9f9;
    }

    .preview-grid tbody tr:hover[b-45b0hyyevq] {
        background-color: #e8e8e8;
    }

.close-btn[b-45b0hyyevq] {
    background: #E36F26;
    color: white;
}

    .close-btn:hover[b-45b0hyyevq] {
        background: #d5641f;
    }
/* /Components/CustomChargesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-t4mzmr7k29] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-t4mzmr7k29] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-t4mzmr7k29] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-t4mzmr7k29] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-t4mzmr7k29] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-t4mzmr7k29] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-t4mzmr7k29] {
            color: white;
        }

    .toolbar-btn .material-icons[b-t4mzmr7k29] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-t4mzmr7k29] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-t4mzmr7k29] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-t4mzmr7k29] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-t4mzmr7k29]::placeholder {
        color: #999;
    }

.clear-icon[b-t4mzmr7k29] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-t4mzmr7k29] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-t4mzmr7k29] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-t4mzmr7k29] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-t4mzmr7k29] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-t4mzmr7k29] {
        border-right: none;
    }

    .header-cell:hover[b-t4mzmr7k29] {
        background: #e8e8e8;
    }

.sort-icon[b-t4mzmr7k29] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-t4mzmr7k29] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-t4mzmr7k29] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-t4mzmr7k29] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-t4mzmr7k29] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-t4mzmr7k29] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-t4mzmr7k29] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-t4mzmr7k29] {
            background-color: inherit;
        }

    .data-row.odd-row[b-t4mzmr7k29] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-t4mzmr7k29] {
            background-color: inherit;
        }

    .data-row.focused[b-t4mzmr7k29] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-t4mzmr7k29] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-t4mzmr7k29] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-t4mzmr7k29] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-t4mzmr7k29] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-t4mzmr7k29] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-t4mzmr7k29] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-t4mzmr7k29] {
                color: white !important;
            }

.custom-grid-cell[b-t4mzmr7k29] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-t4mzmr7k29] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-t4mzmr7k29] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-t4mzmr7k29] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-t4mzmr7k29]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-t4mzmr7k29]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-t4mzmr7k29]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-t4mzmr7k29]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-t4mzmr7k29]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-t4mzmr7k29]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-t4mzmr7k29] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-t4mzmr7k29] {
    display: flex;
    align-items: center;
}

.role-badge[b-t4mzmr7k29] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-t4mzmr7k29] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-t4mzmr7k29] {
    font-weight: 700 !important;
}

.actions-cell[b-t4mzmr7k29] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-t4mzmr7k29] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.icon-with-badge[b-t4mzmr7k29] {
    font-size: 20px;
    color: #E36F26 !important;
    transition: color 0.2s ease;
}

.custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-t4mzmr7k29] {
    color: #E36F26 !important;
}

.data-row.focused .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-t4mzmr7k29] {
    color: #E36F26 !important;
}

.data-row.selected .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-t4mzmr7k29] {
    color: #E36F26 !important;
}

.badge[b-t4mzmr7k29] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-t4mzmr7k29] {
    color: #333;
    font-weight: 700;
}

.items-btn[b-t4mzmr7k29] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
}

.data-row.selected .items-btn[b-t4mzmr7k29] {
    font-weight: 700 !important;
}

.data-row.focused .items-btn[b-t4mzmr7k29] {
    font-weight: 700 !important;
}

.items-btn:hover[b-t4mzmr7k29] {
    color: #E36F26 !important;
}

.action-btn[b-t4mzmr7k29] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-t4mzmr7k29] {
        font-size: 16px;
    }

.delete-btn[b-t4mzmr7k29] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-t4mzmr7k29] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-t4mzmr7k29] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-t4mzmr7k29]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-t4mzmr7k29]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-t4mzmr7k29]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-t4mzmr7k29]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-t4mzmr7k29] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-t4mzmr7k29] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-t4mzmr7k29] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-t4mzmr7k29] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-t4mzmr7k29] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-t4mzmr7k29 1s linear infinite;
}

@keyframes spin-b-t4mzmr7k29 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-t4mzmr7k29] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-t4mzmr7k29] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-t4mzmr7k29]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-t4mzmr7k29]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-t4mzmr7k29]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-t4mzmr7k29]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-t4mzmr7k29] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-t4mzmr7k29] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-t4mzmr7k29] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-t4mzmr7k29] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Area column (data-col="4") - UPDATED FROM 3 TO 4 - Read-only */
.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section column (data-col="6") - UPDATED FROM 5 TO 6 */
.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-t4mzmr7k29]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Notes Badge column (data-col="7") - UPDATED FROM 6 TO 7 */
.focusable-cell[data-col="7"].actions-cell:focus[b-t4mzmr7k29]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].actions-cell:focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Dates Badge column (data-col="8") - UPDATED FROM 7 TO 8 */
.focusable-cell[data-col="8"].actions-cell:focus[b-t4mzmr7k29]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Details column (data-col="9") - UPDATED FROM 8 TO 9 */
.focusable-cell[data-col="9"].actions-cell:focus[b-t4mzmr7k29]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:focus[b-t4mzmr7k29]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for all tooltips */
.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-t4mzmr7k29]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-t4mzmr7k29]::after,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-t4mzmr7k29]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-t4mzmr7k29]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-t4mzmr7k29]::before,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-t4mzmr7k29]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Right-align numeric column headers */
.header-cell.area-header[b-t4mzmr7k29] {
    justify-content: flex-end;
}
/* /Components/CustomChartItemsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-z7e6yc7tq0] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-z7e6yc7tq0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-z7e6yc7tq0] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-title[b-z7e6yc7tq0] {
    margin-left: 12px;
    padding-left: 12px;
}

.title-text[b-z7e6yc7tq0] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.toolbar-btn[b-z7e6yc7tq0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-z7e6yc7tq0] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-z7e6yc7tq0] {
            color: white;
        }

    .toolbar-btn .material-icons[b-z7e6yc7tq0] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-z7e6yc7tq0] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-z7e6yc7tq0] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-z7e6yc7tq0] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-z7e6yc7tq0]::placeholder {
        color: #999;
    }

.clear-icon[b-z7e6yc7tq0] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-z7e6yc7tq0] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-z7e6yc7tq0] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-z7e6yc7tq0] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-z7e6yc7tq0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-z7e6yc7tq0] {
        border-right: none;
    }

    .header-cell:hover[b-z7e6yc7tq0] {
        background: #e8e8e8;
    }

.sort-icon[b-z7e6yc7tq0] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-z7e6yc7tq0] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-z7e6yc7tq0] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-z7e6yc7tq0] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-z7e6yc7tq0] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-z7e6yc7tq0] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-z7e6yc7tq0] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-z7e6yc7tq0] {
            background-color: inherit;
        }

    .data-row.odd-row[b-z7e6yc7tq0] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-z7e6yc7tq0] {
            background-color: inherit;
        }

    .data-row.focused[b-z7e6yc7tq0] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-z7e6yc7tq0] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-z7e6yc7tq0] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-z7e6yc7tq0] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-z7e6yc7tq0] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-z7e6yc7tq0] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-z7e6yc7tq0] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-z7e6yc7tq0] {
                color: white !important;
            }

.custom-grid-cell[b-z7e6yc7tq0] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-z7e6yc7tq0] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-z7e6yc7tq0] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-z7e6yc7tq0] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-z7e6yc7tq0]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-z7e6yc7tq0] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-z7e6yc7tq0] {
    display: flex;
    align-items: center;
}

.role-badge[b-z7e6yc7tq0] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-z7e6yc7tq0] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-z7e6yc7tq0] {
    font-weight: 700 !important;
}

.checkbox-cell[b-z7e6yc7tq0] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkbox Styling - Exactly like CustomRecoveryMatrixDetailsGrid */
.inline-checkbox[b-z7e6yc7tq0] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: white;
    position: relative;
    transition: all 0.2s;
}

    /* Checked state - Orange background with white checkmark */
    .inline-checkbox:checked[b-z7e6yc7tq0] {
        background: #E36F26;
        border-color: #E36F26;
    }

        .inline-checkbox:checked[b-z7e6yc7tq0]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

    /* Disabled state */
    .inline-checkbox:disabled[b-z7e6yc7tq0] {
        opacity: 0.6;
        cursor: default;
    }

.actions-cell[b-z7e6yc7tq0] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-z7e6yc7tq0] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-z7e6yc7tq0] {
        font-size: 16px;
    }

.delete-btn[b-z7e6yc7tq0] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-z7e6yc7tq0] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-z7e6yc7tq0] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-z7e6yc7tq0]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-z7e6yc7tq0]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-z7e6yc7tq0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-z7e6yc7tq0] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-z7e6yc7tq0] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-z7e6yc7tq0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-z7e6yc7tq0] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-z7e6yc7tq0 1s linear infinite;
}

@keyframes spin-b-z7e6yc7tq0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-z7e6yc7tq0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-z7e6yc7tq0] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-z7e6yc7tq0]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-z7e6yc7tq0]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-z7e6yc7tq0]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-z7e6yc7tq0]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-z7e6yc7tq0] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-z7e6yc7tq0] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-z7e6yc7tq0] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-z7e6yc7tq0] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") - LEFT JUSTIFIED */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Name column (data-col="1") - CENTER JUSTIFIED */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.checkbox-cell):focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Active checkbox (data-col="4") - RIGHT JUSTIFIED */
.focusable-cell[data-col="4"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Pending checkbox (data-col="5") - RIGHT JUSTIFIED */
.focusable-cell[data-col="5"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="5"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Include checkbox (data-col="6") - RIGHT JUSTIFIED */
.focusable-cell[data-col="6"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Exclude checkbox (data-col="7") - RIGHT JUSTIFIED */
.focusable-cell[data-col="7"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="7"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Silent checkbox (data-col="8") - RIGHT JUSTIFIED */
.focusable-cell[data-col="8"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="8"].checkbox-cell:focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="8"].checkbox-cell:focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Delete column (data-col="9") - RIGHT JUSTIFIED */
.focusable-cell[data-col="9"].actions-cell:focus[b-z7e6yc7tq0]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:focus[b-z7e6yc7tq0]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-z7e6yc7tq0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-z7e6yc7tq0]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.matrix-export-btn[b-z7e6yc7tq0] {
    /* Same as other toolbar buttons */
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .matrix-export-btn:hover[b-z7e6yc7tq0] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .matrix-export-btn:hover .material-icons[b-z7e6yc7tq0] {
            color: white;
        }

    .matrix-export-btn .material-icons[b-z7e6yc7tq0] {
        font-size: 18px;
        color: #E36F26; /* Orange icon by default */
        transition: color 0.2s;
    }
/* /Components/CustomChecklistItemDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-yg6q7496rd] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-yg6q7496rd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-yg6q7496rd] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.context-label[b-yg6q7496rd] {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    margin-left: 8px;
}

.toolbar-btn[b-yg6q7496rd] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-yg6q7496rd] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-yg6q7496rd] {
            color: white;
        }

    .toolbar-btn .material-icons[b-yg6q7496rd] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-yg6q7496rd] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-yg6q7496rd] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-yg6q7496rd] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-yg6q7496rd]::placeholder {
        color: #999;
    }

.clear-icon[b-yg6q7496rd] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-yg6q7496rd] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-yg6q7496rd] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-yg6q7496rd] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-yg6q7496rd] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-yg6q7496rd] {
        border-right: none;
    }

    .header-cell:hover[b-yg6q7496rd] {
        background: #e8e8e8;
    }

.sort-icon[b-yg6q7496rd] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-yg6q7496rd] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-yg6q7496rd] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-yg6q7496rd] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-yg6q7496rd] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-yg6q7496rd] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-yg6q7496rd] {
        background-color: white;
    }

    .data-row.odd-row[b-yg6q7496rd] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-yg6q7496rd] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-yg6q7496rd] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-yg6q7496rd] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-yg6q7496rd] {
                color: white !important;
            }

    .data-row.selected[b-yg6q7496rd] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-yg6q7496rd] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-yg6q7496rd] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-yg6q7496rd] {
                color: white !important;
            }

.custom-grid-cell[b-yg6q7496rd] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-yg6q7496rd] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-yg6q7496rd] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-yg6q7496rd] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):focus[b-yg6q7496rd]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):focus[b-yg6q7496rd]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-yg6q7496rd]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-yg6q7496rd]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-yg6q7496rd]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-yg6q7496rd]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-yg6q7496rd]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-yg6q7496rd]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-yg6q7496rd]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-yg6q7496rd]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-yg6q7496rd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-yg6q7496rd] {
    display: flex;
    align-items: center;
}

.role-badge[b-yg6q7496rd] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-yg6q7496rd] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-yg6q7496rd] {
    font-weight: 700 !important;
}

.actions-cell[b-yg6q7496rd] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-yg6q7496rd] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-yg6q7496rd] {
        font-size: 16px;
    }

.delete-btn[b-yg6q7496rd] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-yg6q7496rd] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-yg6q7496rd] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-yg6q7496rd]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-yg6q7496rd]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-yg6q7496rd]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-yg6q7496rd]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-yg6q7496rd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-yg6q7496rd] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-yg6q7496rd] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-yg6q7496rd] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-yg6q7496rd] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-yg6q7496rd] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-yg6q7496rd] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-yg6q7496rd] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-yg6q7496rd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-yg6q7496rd] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-yg6q7496rd 1s linear infinite;
}

@keyframes spin-b-yg6q7496rd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-yg6q7496rd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-yg6q7496rd] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-yg6q7496rd]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-yg6q7496rd]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-yg6q7496rd]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-yg6q7496rd]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-yg6q7496rd] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-yg6q7496rd] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-yg6q7496rd] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-yg6q7496rd] {
        background-color: #FFF9F5 !important;
    }

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-yg6q7496rd]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-yg6q7496rd]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-yg6q7496rd]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-yg6q7496rd]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-yg6q7496rd]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-yg6q7496rd]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-yg6q7496rd]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-yg6q7496rd]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomChecklistItemsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-a5a8ynedqs] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-a5a8ynedqs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-a5a8ynedqs] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.context-label[b-a5a8ynedqs] {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    margin-left: 8px;
}

.toolbar-btn[b-a5a8ynedqs] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-a5a8ynedqs] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-a5a8ynedqs] {
            color: white;
        }

    .toolbar-btn .material-icons[b-a5a8ynedqs] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-a5a8ynedqs] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-a5a8ynedqs] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-a5a8ynedqs] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-a5a8ynedqs]::placeholder {
        color: #999;
    }

.clear-icon[b-a5a8ynedqs] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-a5a8ynedqs] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-a5a8ynedqs] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-a5a8ynedqs] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-a5a8ynedqs] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-a5a8ynedqs] {
        border-right: none;
    }

    .header-cell:hover[b-a5a8ynedqs] {
        background: #e8e8e8;
    }

.sort-icon[b-a5a8ynedqs] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-a5a8ynedqs] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-a5a8ynedqs] {
        background: #f5f5f5;
    }

.provisions-header[b-a5a8ynedqs] {
    justify-content: flex-start !important;
}

    .provisions-header .material-icons[b-a5a8ynedqs] {
        font-size: 16px;
        color: #333;
    }

/* Grid Body */
.custom-grid-body[b-a5a8ynedqs] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-a5a8ynedqs] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-a5a8ynedqs] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-a5a8ynedqs] {
        background-color: white;
    }

    .data-row.odd-row[b-a5a8ynedqs] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-a5a8ynedqs] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-a5a8ynedqs] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-a5a8ynedqs] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-a5a8ynedqs] {
                color: white !important;
            }

    .data-row.selected[b-a5a8ynedqs] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-a5a8ynedqs] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-a5a8ynedqs] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-a5a8ynedqs] {
                color: white !important;
            }

.custom-grid-cell[b-a5a8ynedqs] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-a5a8ynedqs] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-a5a8ynedqs] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-a5a8ynedqs] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):focus[b-a5a8ynedqs]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):focus[b-a5a8ynedqs]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-a5a8ynedqs]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-a5a8ynedqs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-a5a8ynedqs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-a5a8ynedqs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-a5a8ynedqs]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:has(.provisions-btn):focus[b-a5a8ynedqs]::after {
    content: 'Click or space / enter to view';
}

.actions-cell.focusable-cell:focus[b-a5a8ynedqs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-a5a8ynedqs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-a5a8ynedqs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-a5a8ynedqs] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-a5a8ynedqs] {
    display: flex;
    align-items: center;
}

.role-badge[b-a5a8ynedqs] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-a5a8ynedqs] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-a5a8ynedqs] {
    font-weight: 700 !important;
}

.actions-cell[b-a5a8ynedqs] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .actions-cell:has(.provisions-btn)[b-a5a8ynedqs] {
        justify-content: flex-start !important;
    }

.action-btn[b-a5a8ynedqs] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-a5a8ynedqs] {
        font-size: 16px;
    }

.delete-btn[b-a5a8ynedqs] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-a5a8ynedqs] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-a5a8ynedqs] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-a5a8ynedqs]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-a5a8ynedqs]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-a5a8ynedqs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-a5a8ynedqs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-a5a8ynedqs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-a5a8ynedqs] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-a5a8ynedqs] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-a5a8ynedqs] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-a5a8ynedqs] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-a5a8ynedqs] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-a5a8ynedqs] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-a5a8ynedqs] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-a5a8ynedqs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-a5a8ynedqs] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-a5a8ynedqs 1s linear infinite;
}

@keyframes spin-b-a5a8ynedqs {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-a5a8ynedqs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-a5a8ynedqs] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-a5a8ynedqs]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-a5a8ynedqs]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-a5a8ynedqs]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-a5a8ynedqs]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-a5a8ynedqs] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-a5a8ynedqs] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-a5a8ynedqs] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-a5a8ynedqs] {
        background-color: #FFF9F5 !important;
    }

.provisions-btn[b-a5a8ynedqs] {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    position: relative;
    color: #333 !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s;
}

    .provisions-btn:hover[b-a5a8ynedqs] {
        background: transparent !important;
        border: none !important;
        opacity: 1;
    }

        .provisions-btn:hover[b-a5a8ynedqs]::after {
            content: 'Click or space / enter to view';
            position: absolute;
            bottom: 100%;
            left: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .provisions-btn:hover[b-a5a8ynedqs]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .provisions-btn:hover[b-a5a8ynedqs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .provisions-btn:hover[b-a5a8ynedqs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.focused .provisions-btn[b-a5a8ynedqs] {
    font-weight: 700 !important;
}

.data-row.selected .provisions-btn[b-a5a8ynedqs] {
    font-weight: 700 !important;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-a5a8ynedqs]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-a5a8ynedqs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-a5a8ynedqs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-a5a8ynedqs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-a5a8ynedqs]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-a5a8ynedqs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-a5a8ynedqs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-a5a8ynedqs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomChecklistItemTypesGrid.razor.rz.scp.css */
/* ===== CUSTOM CHECKLIST ITEM TYPES GRID ===== */

.custom-grid-container[b-snmevlbeu3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-snmevlbeu3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-snmevlbeu3] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-snmevlbeu3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-snmevlbeu3] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-snmevlbeu3] {
            color: white;
        }

    .toolbar-btn .material-icons[b-snmevlbeu3] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-snmevlbeu3] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-snmevlbeu3] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-snmevlbeu3] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
    flex-shrink: 0;
}

.search-input[b-snmevlbeu3] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-snmevlbeu3]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-snmevlbeu3] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-snmevlbeu3] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-snmevlbeu3] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-snmevlbeu3] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-snmevlbeu3] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.custom-grid-row[b-snmevlbeu3] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.header-cell[b-snmevlbeu3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-snmevlbeu3] {
        border-right: none;
    }

    .header-cell:hover[b-snmevlbeu3] {
        background: #e8e8e8;
    }

.sort-icon[b-snmevlbeu3] {
    font-size: 16px;
    color: #E36F26;
}

.custom-grid-cell[b-snmevlbeu3] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-snmevlbeu3] {
        border-right: none;
    }

.cell-content[b-snmevlbeu3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

/* Grid Body */
.custom-grid-body[b-snmevlbeu3] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-snmevlbeu3] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-snmevlbeu3] {
        background-color: white;
    }

    .data-row.odd-row[b-snmevlbeu3] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-snmevlbeu3] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-snmevlbeu3] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    /* Selected row styling - DARK GREY BACKGROUND WITH ORANGE LEFT BORDER */
    [b-snmevlbeu3] .source-grid .data-row.selected,
    .data-row.selected[b-snmevlbeu3] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-snmevlbeu3] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-snmevlbeu3] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-snmevlbeu3] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-snmevlbeu3] {
                padding-left: 2px;
            }

        /* Selected row hover - keep selection styling */
        .data-row.selected:hover[b-snmevlbeu3] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.5) !important;
            font-weight: 700 !important;
            transform: scale(1.01);
        }

            .data-row.selected:hover .custom-grid-cell[b-snmevlbeu3] {
                font-weight: 700 !important;
                color: #333 !important;
            }

    /* Tooltip */
    .data-row[b-snmevlbeu3]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-snmevlbeu3]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-snmevlbeu3]::after {
        opacity: 1;
    }

    /* Hide tooltip on selected rows */
    .data-row.selected[b-snmevlbeu3]::after {
        display: none;
    }

/* Grid Footer */
.custom-grid-footer[b-snmevlbeu3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
}

.footer-info[b-snmevlbeu3] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-snmevlbeu3] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-snmevlbeu3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-snmevlbeu3] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-snmevlbeu3 1s linear infinite;
}

@keyframes spin-b-snmevlbeu3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-snmevlbeu3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-snmevlbeu3] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-snmevlbeu3]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-snmevlbeu3]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-snmevlbeu3]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-snmevlbeu3]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-snmevlbeu3] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-snmevlbeu3] {
        cursor: not-allowed;
    }
/* /Components/CustomChecklistsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-s4d443mgx4] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-s4d443mgx4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-s4d443mgx4] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-s4d443mgx4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-s4d443mgx4] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-s4d443mgx4] {
            color: white;
        }

    .toolbar-btn .material-icons[b-s4d443mgx4] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-s4d443mgx4] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-s4d443mgx4] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-s4d443mgx4] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-s4d443mgx4]::placeholder {
        color: #999;
    }

.clear-icon[b-s4d443mgx4] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-s4d443mgx4] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-s4d443mgx4] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-s4d443mgx4] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-s4d443mgx4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-s4d443mgx4] {
        border-right: none;
    }

    .header-cell:hover[b-s4d443mgx4] {
        background: #e8e8e8;
    }

.sort-icon[b-s4d443mgx4] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-s4d443mgx4] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-s4d443mgx4] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-s4d443mgx4] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-s4d443mgx4] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-s4d443mgx4] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-s4d443mgx4] {
        background-color: white;
    }

    .data-row.odd-row[b-s4d443mgx4] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-s4d443mgx4] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-s4d443mgx4] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-s4d443mgx4] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-s4d443mgx4] {
                color: white !important;
            }

    .data-row.selected[b-s4d443mgx4] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-s4d443mgx4] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-s4d443mgx4] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-s4d443mgx4] {
                color: white !important;
            }

.custom-grid-cell[b-s4d443mgx4] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-s4d443mgx4] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-s4d443mgx4] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-s4d443mgx4] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):focus[b-s4d443mgx4]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):focus[b-s4d443mgx4]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-s4d443mgx4]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-s4d443mgx4]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-s4d443mgx4]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-s4d443mgx4]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-s4d443mgx4]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-s4d443mgx4]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-s4d443mgx4]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-s4d443mgx4]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-s4d443mgx4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-s4d443mgx4] {
    display: flex;
    align-items: center;
}

.role-badge[b-s4d443mgx4] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-s4d443mgx4] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-s4d443mgx4] {
    font-weight: 700 !important;
}

.actions-cell[b-s4d443mgx4] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .actions-cell:has(.items-btn)[b-s4d443mgx4] {
        justify-content: flex-start !important;
    }

.action-btn[b-s4d443mgx4] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-s4d443mgx4] {
        font-size: 16px;
    }

.delete-btn[b-s4d443mgx4] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-s4d443mgx4] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-s4d443mgx4] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-s4d443mgx4]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-s4d443mgx4]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-s4d443mgx4]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-s4d443mgx4]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-s4d443mgx4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-s4d443mgx4] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-s4d443mgx4] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-s4d443mgx4] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-s4d443mgx4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-s4d443mgx4] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-s4d443mgx4] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-s4d443mgx4] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-s4d443mgx4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-s4d443mgx4] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-s4d443mgx4 1s linear infinite;
}

@keyframes spin-b-s4d443mgx4 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-s4d443mgx4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-s4d443mgx4] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-s4d443mgx4]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-s4d443mgx4]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-s4d443mgx4]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-s4d443mgx4]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-s4d443mgx4] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-s4d443mgx4] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-s4d443mgx4] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-s4d443mgx4] {
        background-color: #FFF9F5 !important;
    }

.items-header[b-s4d443mgx4] {
    justify-content: flex-start !important;
}

    .items-header .material-icons[b-s4d443mgx4] {
        font-size: 16px;
        color: #333;
    }

.custom-grid-cell.items-badge-cell[b-s4d443mgx4] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 8px;
}

.items-badge-cell .action-btn.view-badge-btn[b-s4d443mgx4] {
    margin: 0;
}

.items-btn[b-s4d443mgx4] {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    position: relative;
    color: #333 !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s;
}

    .items-btn:hover[b-s4d443mgx4] {
        background: transparent !important;
        border: none !important;
        opacity: 1;
    }

        .items-btn:hover[b-s4d443mgx4]::after {
            content: 'Click or space / enter to view';
            position: absolute;
            bottom: 100%;
            left: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .items-btn:hover[b-s4d443mgx4]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .items-btn:hover[b-s4d443mgx4]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .items-btn:hover[b-s4d443mgx4]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.focused .items-btn[b-s4d443mgx4] {
    font-weight: 700 !important;
}

.data-row.selected .items-btn[b-s4d443mgx4] {
    font-weight: 700 !important;
}

.actions-cell.focusable-cell:has(.items-btn):focus[b-s4d443mgx4]::after {
    content: 'Click or space / enter to view';
    left: 0;
    right: auto;
}

.actions-cell.focusable-cell:has(.items-btn):focus[b-s4d443mgx4]::before {
    left: 10px;
    right: auto;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-s4d443mgx4]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-s4d443mgx4]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-s4d443mgx4]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-s4d443mgx4]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomClientPermissionsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-l0lwnz10yv] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-l0lwnz10yv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-l0lwnz10yv] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-l0lwnz10yv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-l0lwnz10yv] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-l0lwnz10yv] {
            color: white;
        }

    .toolbar-btn .material-icons[b-l0lwnz10yv] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-l0lwnz10yv] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 350px;
    height: 38px;
}

.search-icon[b-l0lwnz10yv] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-l0lwnz10yv] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-l0lwnz10yv]::placeholder {
        color: #999;
    }

.clear-icon[b-l0lwnz10yv] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-l0lwnz10yv] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-l0lwnz10yv] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-l0lwnz10yv] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-l0lwnz10yv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-l0lwnz10yv] {
        border-right: none;
    }

    .header-cell:hover[b-l0lwnz10yv] {
        background: #e8e8e8;
    }

.sort-icon[b-l0lwnz10yv] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-l0lwnz10yv] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-l0lwnz10yv] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-l0lwnz10yv] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-l0lwnz10yv] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-l0lwnz10yv] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-l0lwnz10yv] {
        background-color: white;
    }

    .data-row.odd-row[b-l0lwnz10yv] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-l0lwnz10yv] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-l0lwnz10yv] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-l0lwnz10yv] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-l0lwnz10yv] {
                color: white !important;
            }

    .data-row.selected[b-l0lwnz10yv] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-l0lwnz10yv] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-l0lwnz10yv] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-l0lwnz10yv] {
                color: white !important;
            }

.custom-grid-cell[b-l0lwnz10yv] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-l0lwnz10yv] {
        border-right: none;
    }

.focusable-cell[b-l0lwnz10yv] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-l0lwnz10yv] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):focus[b-l0lwnz10yv]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):focus[b-l0lwnz10yv]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-l0lwnz10yv]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-l0lwnz10yv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-l0lwnz10yv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-l0lwnz10yv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-l0lwnz10yv]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-l0lwnz10yv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-l0lwnz10yv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-l0lwnz10yv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-l0lwnz10yv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-l0lwnz10yv] {
    display: flex;
    align-items: center;
}

.role-badge[b-l0lwnz10yv] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-l0lwnz10yv] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-l0lwnz10yv] {
    font-weight: 700 !important;
}

.role-badge:hover[b-l0lwnz10yv]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-badge:hover[b-l0lwnz10yv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-badge:hover[b-l0lwnz10yv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-badge:hover[b-l0lwnz10yv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell[b-l0lwnz10yv] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-l0lwnz10yv] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-l0lwnz10yv] {
        font-size: 16px;
    }

.delete-btn[b-l0lwnz10yv] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-l0lwnz10yv] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-l0lwnz10yv] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-l0lwnz10yv]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-l0lwnz10yv]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-l0lwnz10yv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-l0lwnz10yv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-l0lwnz10yv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-l0lwnz10yv] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-l0lwnz10yv] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-l0lwnz10yv] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-l0lwnz10yv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-l0lwnz10yv] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-l0lwnz10yv] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-l0lwnz10yv] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-l0lwnz10yv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-l0lwnz10yv] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-l0lwnz10yv 1s linear infinite;
}

@keyframes spin-b-l0lwnz10yv {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-l0lwnz10yv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-l0lwnz10yv] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-l0lwnz10yv]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-l0lwnz10yv]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-l0lwnz10yv]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-l0lwnz10yv]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomClientsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-t6vgnoba2g] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-t6vgnoba2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-t6vgnoba2g] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-t6vgnoba2g] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-t6vgnoba2g] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-t6vgnoba2g] {
            color: white;
        }

    .toolbar-btn .material-icons[b-t6vgnoba2g] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-t6vgnoba2g] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-t6vgnoba2g] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-t6vgnoba2g] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-t6vgnoba2g]::placeholder {
        color: #999;
    }

.clear-icon[b-t6vgnoba2g] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-t6vgnoba2g] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-t6vgnoba2g] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-t6vgnoba2g] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-t6vgnoba2g] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-t6vgnoba2g] {
        border-right: none;
    }

    .header-cell:hover[b-t6vgnoba2g] {
        background: #e8e8e8;
    }

.actions-header[b-t6vgnoba2g] {
    cursor: default !important;
    justify-content: center;
}

    .actions-header:hover[b-t6vgnoba2g] {
        background: #f5f5f5 !important;
    }

.sort-icon[b-t6vgnoba2g] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-t6vgnoba2g] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-t6vgnoba2g] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-t6vgnoba2g] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-t6vgnoba2g] {
        background-color: white;
    }

    .data-row.odd-row[b-t6vgnoba2g] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-t6vgnoba2g] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-t6vgnoba2g] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-t6vgnoba2g] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-t6vgnoba2g] {
        border-right: none;
    }

.actions-cell[b-t6vgnoba2g] {
    justify-content: center;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.action-btn[b-t6vgnoba2g] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-t6vgnoba2g] {
        font-size: 16px;
    }

.delete-btn[b-t6vgnoba2g] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-t6vgnoba2g] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-t6vgnoba2g] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-t6vgnoba2g]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-t6vgnoba2g]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-t6vgnoba2g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-t6vgnoba2g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-t6vgnoba2g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Footer */
.custom-grid-footer[b-t6vgnoba2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-t6vgnoba2g] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-t6vgnoba2g] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-t6vgnoba2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-t6vgnoba2g] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-t6vgnoba2g 1s linear infinite;
}

@keyframes spin-b-t6vgnoba2g {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-t6vgnoba2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-t6vgnoba2g] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-t6vgnoba2g]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-t6vgnoba2g]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-t6vgnoba2g]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-t6vgnoba2g]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.data-row[b-t6vgnoba2g]::after {
    content: "Click to navigate to client";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-t6vgnoba2g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-t6vgnoba2g]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-t6vgnoba2g] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-t6vgnoba2g] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* First column (col 0) - left justified tooltip */
    .focusable-cell[data-col="0"]:focus[b-t6vgnoba2g]::after {
        content: 'Click or space / enter to navigate to client';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"]:focus[b-t6vgnoba2g]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Column 1 - centered tooltip */
    .focusable-cell[data-col="1"]:focus[b-t6vgnoba2g]::after {
        content: 'Click or space / enter to navigate to client';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="1"]:focus[b-t6vgnoba2g]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Column 2 (Actions) - right justified tooltip */
    .focusable-cell[data-col="2"]:focus[b-t6vgnoba2g]::after {
        content: 'Click or space / enter to delete';
        position: absolute;
        bottom: 100%;
        right: 0;
        left: auto;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="2"]:focus[b-t6vgnoba2g]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: auto;
        right: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

/* First row - tooltips below the cell */
.data-row.first-row .focusable-cell[data-col="0"]:focus[b-t6vgnoba2g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="0"]:focus[b-t6vgnoba2g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-t6vgnoba2g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-t6vgnoba2g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="2"]:focus[b-t6vgnoba2g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="2"]:focus[b-t6vgnoba2g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomContactAttributesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-7kigmlk101] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-7kigmlk101] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-7kigmlk101] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.context-label[b-7kigmlk101] {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    margin-left: 8px;
}

.toolbar-btn[b-7kigmlk101] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-7kigmlk101] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-7kigmlk101] {
            color: white;
        }

    .toolbar-btn .material-icons[b-7kigmlk101] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-7kigmlk101] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-7kigmlk101] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-7kigmlk101] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-7kigmlk101]::placeholder {
        color: #999;
    }

.clear-icon[b-7kigmlk101] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-7kigmlk101] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-7kigmlk101] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-7kigmlk101] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-7kigmlk101] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-7kigmlk101] {
        border-right: none;
    }

    .header-cell:hover[b-7kigmlk101] {
        background: #e8e8e8;
    }

.sort-icon[b-7kigmlk101] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-7kigmlk101] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-7kigmlk101] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-7kigmlk101] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-7kigmlk101] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-7kigmlk101] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-7kigmlk101] {
        background-color: white;
    }

    .data-row.odd-row[b-7kigmlk101] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-7kigmlk101] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-7kigmlk101] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-7kigmlk101] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-7kigmlk101] {
                color: white !important;
            }

    .data-row.selected[b-7kigmlk101] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-7kigmlk101] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-7kigmlk101] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-7kigmlk101] {
                color: white !important;
            }

.custom-grid-cell[b-7kigmlk101] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-7kigmlk101] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-7kigmlk101] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-7kigmlk101] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not(.system-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-7kigmlk101]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not(.system-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-7kigmlk101]::before {
        display: none !important;
    }

.actions-cell.focusable-cell:focus[b-7kigmlk101]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-7kigmlk101]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-7kigmlk101]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-7kigmlk101]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-7kigmlk101] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.actions-cell[b-7kigmlk101] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-7kigmlk101] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-7kigmlk101] {
        font-size: 16px;
    }

.delete-btn[b-7kigmlk101] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-7kigmlk101] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-7kigmlk101] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-7kigmlk101]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-7kigmlk101]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-7kigmlk101]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-7kigmlk101]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-7kigmlk101] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-7kigmlk101] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-7kigmlk101] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-7kigmlk101] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-7kigmlk101] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-7kigmlk101 1s linear infinite;
}

@keyframes spin-b-7kigmlk101 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-7kigmlk101] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-7kigmlk101] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-7kigmlk101]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-7kigmlk101]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-7kigmlk101]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-7kigmlk101]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-7kigmlk101] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-7kigmlk101] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-7kigmlk101] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-7kigmlk101] {
        background-color: #FFF9F5 !important;
    }

.system-cell[b-7kigmlk101] {
    position: relative;
}

    .system-cell.focusable-cell:focus[b-7kigmlk101]::after {
        content: 'This column cannot be edited, it is a system item';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .system-cell.focusable-cell:focus[b-7kigmlk101]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

.data-row:first-child .system-cell.focusable-cell:focus[b-7kigmlk101]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .system-cell.focusable-cell:focus[b-7kigmlk101]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.delete-btn:disabled[b-7kigmlk101] {
    opacity: 0.5;
    cursor: not-allowed;
}

    .delete-btn:disabled:hover[b-7kigmlk101]::after {
        content: 'This item cannot be deleted, it is a system item';
    }

.actions-cell.focusable-cell:has(.delete-btn:disabled):focus[b-7kigmlk101]::after {
    content: 'This item cannot be deleted, it is a system item';
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-7kigmlk101]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-7kigmlk101]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-7kigmlk101]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-7kigmlk101]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-7kigmlk101]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-7kigmlk101]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-7kigmlk101]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-7kigmlk101]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="2"]:not(.system-cell):focus[b-7kigmlk101]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.system-cell):focus[b-7kigmlk101]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.system-cell):focus[b-7kigmlk101]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.system-cell):focus[b-7kigmlk101]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="2"].system-cell:focus[b-7kigmlk101]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"].system-cell:focus[b-7kigmlk101]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"].system-cell:focus[b-7kigmlk101]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"].system-cell:focus[b-7kigmlk101]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.detail-badge[b-7kigmlk101] {
    cursor: pointer;
    text-decoration: underline;
    color: #333;
}

    .detail-badge:hover[b-7kigmlk101] {
        color: #E36F26;
    }
/* /Components/CustomContactsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-g02a23hink] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-g02a23hink] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-g02a23hink] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-g02a23hink] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-g02a23hink] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-g02a23hink] {
            color: white;
        }

    .toolbar-btn .material-icons[b-g02a23hink] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-g02a23hink] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-g02a23hink] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-g02a23hink] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-g02a23hink]::placeholder {
        color: #999;
    }

.clear-icon[b-g02a23hink] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-g02a23hink] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-g02a23hink] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-g02a23hink] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-g02a23hink] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-g02a23hink] {
        border-right: none;
    }

    .header-cell:hover[b-g02a23hink] {
        background: #e8e8e8;
    }

.sort-icon[b-g02a23hink] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-g02a23hink] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-g02a23hink] {
        background: #f5f5f5;
    }

.attributes-header[b-g02a23hink] {
    justify-content: flex-start !important;
}

    .attributes-header .material-icons[b-g02a23hink] {
        font-size: 16px;
        color: #333;
    }

/* Grid Body */
.custom-grid-body[b-g02a23hink] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-g02a23hink] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-g02a23hink] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-g02a23hink] {
        background-color: white;
    }

    .data-row.odd-row[b-g02a23hink] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-g02a23hink] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-g02a23hink] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-g02a23hink] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-g02a23hink] {
                color: white !important;
            }

        .data-row.focused .attributes-btn[b-g02a23hink] {
            font-weight: 700 !important;
        }

    .data-row.selected[b-g02a23hink] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-g02a23hink] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-g02a23hink] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-g02a23hink] {
                color: white !important;
            }

        .data-row.selected .attributes-btn[b-g02a23hink] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-g02a23hink] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-g02a23hink] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-g02a23hink] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-g02a23hink] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not(.system-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-g02a23hink]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not(.system-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-g02a23hink]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-g02a23hink]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-g02a23hink]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-g02a23hink]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-g02a23hink]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-g02a23hink]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:has(.attributes-btn):focus[b-g02a23hink]::after {
    content: 'Click or space / enter to view';
}

.actions-cell.focusable-cell:focus[b-g02a23hink]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-g02a23hink]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-g02a23hink]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-g02a23hink] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-g02a23hink] {
    display: flex;
    align-items: center;
}

.role-badge[b-g02a23hink] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-g02a23hink] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-g02a23hink] {
    font-weight: 700 !important;
}

.actions-cell[b-g02a23hink] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .actions-cell:has(.attributes-btn)[b-g02a23hink] {
        justify-content: flex-start !important;
    }

.action-btn[b-g02a23hink] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-g02a23hink] {
        font-size: 16px;
    }

.delete-btn[b-g02a23hink] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-g02a23hink] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-g02a23hink] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-g02a23hink]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-g02a23hink]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-g02a23hink]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-g02a23hink]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-g02a23hink] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-g02a23hink] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-g02a23hink] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-g02a23hink] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-g02a23hink] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-g02a23hink] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-g02a23hink] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-g02a23hink] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-g02a23hink] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-g02a23hink] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-g02a23hink 1s linear infinite;
}

@keyframes spin-b-g02a23hink {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-g02a23hink] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-g02a23hink] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-g02a23hink]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-g02a23hink]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-g02a23hink]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-g02a23hink]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-g02a23hink] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-g02a23hink] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-g02a23hink] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-g02a23hink] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Contact Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Phone column (data-col="2") */
.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-g02a23hink]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.custom-grid-cell.actions-cell[b-g02a23hink] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-with-badge[b-g02a23hink] {
    font-size: 20px;
    color: #E36F26;
    transition: color 0.2s ease;
}

.badge[b-g02a23hink] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.attributes-btn[b-g02a23hink] {
    display: inline-block;
    padding: 0 4px;
    border: none !important;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .attributes-btn[b-g02a23hink] {
    font-weight: 700 !important;
}

.data-row.focused .attributes-btn[b-g02a23hink] {
    font-weight: 700 !important;
}

.attributes-btn:hover[b-g02a23hink] {
    color: #E36F26 !important;
    text-decoration: underline;
}
/* /Components/CustomDatesDialog.razor.rz.scp.css */
/* Dialog Container */
.custom-dates-dialog-container[b-8g4u5qpt7v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
}

/* Custom Grid Container */
.custom-grid-container[b-8g4u5qpt7v] {
    display: flex;
    flex-direction: column;
    height: 50%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-8g4u5qpt7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-8g4u5qpt7v] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-8g4u5qpt7v] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-8g4u5qpt7v] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-8g4u5qpt7v] {
            color: white;
        }

    .toolbar-btn .material-icons[b-8g4u5qpt7v] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-8g4u5qpt7v] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-8g4u5qpt7v] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-8g4u5qpt7v] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-8g4u5qpt7v]::placeholder {
        color: #999;
    }

.clear-icon[b-8g4u5qpt7v] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-8g4u5qpt7v] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-8g4u5qpt7v] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-8g4u5qpt7v] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-8g4u5qpt7v] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-8g4u5qpt7v] {
        border-right: none;
    }

    .header-cell:hover[b-8g4u5qpt7v] {
        background: #e8e8e8;
    }

.sort-icon[b-8g4u5qpt7v] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-8g4u5qpt7v] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-8g4u5qpt7v] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-8g4u5qpt7v] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-8g4u5qpt7v] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.data-row[b-8g4u5qpt7v] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-8g4u5qpt7v] {
        background-color: white;
    }

    .data-row.odd-row[b-8g4u5qpt7v] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-8g4u5qpt7v] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-8g4u5qpt7v] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-8g4u5qpt7v] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-8g4u5qpt7v] {
                color: white !important;
            }

    .data-row.selected[b-8g4u5qpt7v] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-8g4u5qpt7v] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-8g4u5qpt7v] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-8g4u5qpt7v] {
                color: white !important;
            }

.custom-grid-cell[b-8g4u5qpt7v] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-8g4u5qpt7v] {
        border-right: none;
    }

.focusable-cell[b-8g4u5qpt7v] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-8g4u5qpt7v] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-8g4u5qpt7v]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-8g4u5qpt7v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-8g4u5qpt7v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-8g4u5qpt7v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-8g4u5qpt7v]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-8g4u5qpt7v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-8g4u5qpt7v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-8g4u5qpt7v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-8g4u5qpt7v] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-preview[b-8g4u5qpt7v] {
    font-style: italic;
    color: #666;
}

.role-cell[b-8g4u5qpt7v] {
    display: flex;
    align-items: center;
}

.role-badge[b-8g4u5qpt7v] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-8g4u5qpt7v] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-8g4u5qpt7v] {
    font-weight: 700 !important;
}

.actions-cell[b-8g4u5qpt7v] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-8g4u5qpt7v] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-8g4u5qpt7v] {
        font-size: 16px;
    }

.delete-btn[b-8g4u5qpt7v] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-8g4u5qpt7v] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-8g4u5qpt7v] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-8g4u5qpt7v]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-8g4u5qpt7v]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-8g4u5qpt7v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-8g4u5qpt7v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-8g4u5qpt7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-8g4u5qpt7v] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-8g4u5qpt7v] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-8g4u5qpt7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-8g4u5qpt7v] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-8g4u5qpt7v 1s linear infinite;
}

@keyframes spin-b-8g4u5qpt7v {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-8g4u5qpt7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-8g4u5qpt7v] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-8g4u5qpt7v]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-8g4u5qpt7v]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-8g4u5qpt7v]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-8g4u5qpt7v]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-8g4u5qpt7v] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-8g4u5qpt7v] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-8g4u5qpt7v] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-8g4u5qpt7v] {
        background-color: #FFF9F5 !important;
    }

/* Editor Section */
.dates-editor-section[b-8g4u5qpt7v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    overflow: hidden;
}

.editor-header[b-8g4u5qpt7v] {
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

    .editor-header h4[b-8g4u5qpt7v] {
        margin: 0;
        font-size: 14px;
        color: #E36F26;
        font-weight: 600;
    }

.no-selection-message[b-8g4u5qpt7v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-selection-message .material-icons[b-8g4u5qpt7v] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-8g4u5qpt7v]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-8g4u5qpt7v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-8g4u5qpt7v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-8g4u5qpt7v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-8g4u5qpt7v]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-8g4u5qpt7v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-8g4u5qpt7v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-8g4u5qpt7v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="2"]:not(.system-cell):focus[b-8g4u5qpt7v]::after {
    content: 'Double-click or enter to edit date';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.system-cell):focus[b-8g4u5qpt7v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.system-cell):focus[b-8g4u5qpt7v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.system-cell):focus[b-8g4u5qpt7v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomDepositDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-sdpxehbku3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-sdpxehbku3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-sdpxehbku3] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.toolbar-right[b-sdpxehbku3] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-sdpxehbku3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

    .toolbar-btn:hover[b-sdpxehbku3] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-sdpxehbku3] {
            color: white;
        }

    .toolbar-btn .material-icons[b-sdpxehbku3] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-sdpxehbku3] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-sdpxehbku3] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.search-box[b-sdpxehbku3] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-sdpxehbku3] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-sdpxehbku3] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-sdpxehbku3]::placeholder {
        color: #999;
    }

.clear-icon[b-sdpxehbku3] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-sdpxehbku3] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-sdpxehbku3] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-sdpxehbku3] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-sdpxehbku3] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-sdpxehbku3] {
        border-right: none;
    }

    .header-cell:hover[b-sdpxehbku3] {
        background: #e8e8e8;
    }

.sort-icon[b-sdpxehbku3] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-sdpxehbku3] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-sdpxehbku3] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-sdpxehbku3] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-sdpxehbku3] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-sdpxehbku3] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-sdpxehbku3] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-sdpxehbku3] {
            background-color: inherit;
        }

    .data-row.odd-row[b-sdpxehbku3] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-sdpxehbku3] {
            background-color: inherit;
        }

    .data-row.focused[b-sdpxehbku3] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-sdpxehbku3] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-sdpxehbku3] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-sdpxehbku3] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-sdpxehbku3] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-sdpxehbku3] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-sdpxehbku3] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-sdpxehbku3] {
                color: white !important;
            }

.custom-grid-cell[b-sdpxehbku3] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-sdpxehbku3] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-sdpxehbku3] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-sdpxehbku3] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-sdpxehbku3]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-sdpxehbku3]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-sdpxehbku3]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-sdpxehbku3]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-sdpxehbku3]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-sdpxehbku3]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-sdpxehbku3]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-sdpxehbku3]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-sdpxehbku3] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-sdpxehbku3] {
    display: flex;
    align-items: center;
}

.role-badge[b-sdpxehbku3] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-sdpxehbku3] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-sdpxehbku3] {
    font-weight: 700 !important;
}

.actions-cell[b-sdpxehbku3] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-sdpxehbku3] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-sdpxehbku3] {
        font-size: 16px;
    }

.delete-btn[b-sdpxehbku3] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-sdpxehbku3] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-sdpxehbku3] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-sdpxehbku3]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-sdpxehbku3]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-sdpxehbku3]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-sdpxehbku3]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-sdpxehbku3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-sdpxehbku3] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-sdpxehbku3] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-sdpxehbku3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-sdpxehbku3] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-sdpxehbku3 1s linear infinite;
}

@keyframes spin-b-sdpxehbku3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-sdpxehbku3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-sdpxehbku3] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-sdpxehbku3]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-sdpxehbku3]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-sdpxehbku3]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-sdpxehbku3]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-sdpxehbku3] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-sdpxehbku3] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-sdpxehbku3] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-sdpxehbku3] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Date column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Amount column (data-col="2") */
.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-sdpxehbku3]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Right-align numeric column headers */
.header-cell.area-header[b-sdpxehbku3] {
    justify-content: flex-end;
}

.dialog-overlay[b-sdpxehbku3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.dialog-container[b-sdpxehbku3] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 400px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-sdpxehbku3] {
    padding: 1em 1.5em;
    border-bottom: 2px solid #E36F26;
    background: #f9f9f9;
    border-radius: 8px 8px 0 0;
}

    .dialog-header h3[b-sdpxehbku3] {
        margin: 0;
        color: #E36F26;
        font-size: 18px;
        font-weight: 700;
    }

.dialog-body[b-sdpxehbku3] {
    padding: 1.5em;
}

.form-group[b-sdpxehbku3] {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

    .form-group label[b-sdpxehbku3] {
        font-weight: 600;
        color: #333;
        font-size: 14px;
    }

.form-input[b-sdpxehbku3] {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-sdpxehbku3] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.2);
    }

.dialog-footer[b-sdpxehbku3] {
    padding: 1em 1.5em;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.dialog-btn[b-sdpxehbku3] {
    padding: 0.5em 1.5em;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-btn[b-sdpxehbku3] {
    background: white;
    color: #666;
    border: 1px solid #ccc;
}

    .cancel-btn:hover[b-sdpxehbku3] {
        background: #f5f5f5;
        border-color: #999;
    }

.submit-btn[b-sdpxehbku3] {
    background: #E36F26;
    color: white;
}

    .submit-btn:hover[b-sdpxehbku3] {
        background: #d5641f;
    }
/* /Components/CustomDepositsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-pbqiyvg5ud] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-pbqiyvg5ud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-pbqiyvg5ud] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-pbqiyvg5ud] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-pbqiyvg5ud] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-pbqiyvg5ud] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-pbqiyvg5ud] {
            color: white;
        }

    .toolbar-btn .material-icons[b-pbqiyvg5ud] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-pbqiyvg5ud] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-pbqiyvg5ud] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-pbqiyvg5ud] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-pbqiyvg5ud]::placeholder {
        color: #999;
    }

.clear-icon[b-pbqiyvg5ud] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-pbqiyvg5ud] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-pbqiyvg5ud] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-pbqiyvg5ud] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-pbqiyvg5ud] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-pbqiyvg5ud] {
        border-right: none;
    }

    .header-cell:hover[b-pbqiyvg5ud] {
        background: #e8e8e8;
    }

.sort-icon[b-pbqiyvg5ud] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-pbqiyvg5ud] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-pbqiyvg5ud] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-pbqiyvg5ud] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-pbqiyvg5ud] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-pbqiyvg5ud] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-pbqiyvg5ud] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-pbqiyvg5ud] {
            background-color: inherit;
        }

    .data-row.odd-row[b-pbqiyvg5ud] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-pbqiyvg5ud] {
            background-color: inherit;
        }

    .data-row.focused[b-pbqiyvg5ud] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-pbqiyvg5ud] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-pbqiyvg5ud] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-pbqiyvg5ud] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-pbqiyvg5ud] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-pbqiyvg5ud] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-pbqiyvg5ud] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-pbqiyvg5ud] {
                color: white !important;
            }

.custom-grid-cell[b-pbqiyvg5ud] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-pbqiyvg5ud] {
        border-right: none;
    }

/* Disabled cell styling */
.disabled-cell[b-pbqiyvg5ud] {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-pbqiyvg5ud] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-pbqiyvg5ud] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-pbqiyvg5ud]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-pbqiyvg5ud]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-pbqiyvg5ud] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-pbqiyvg5ud] {
    display: flex;
    align-items: center;
}

.role-badge[b-pbqiyvg5ud] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-pbqiyvg5ud] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-pbqiyvg5ud] {
    font-weight: 700 !important;
}

.actions-cell[b-pbqiyvg5ud] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-pbqiyvg5ud] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.icon-with-badge[b-pbqiyvg5ud] {
    font-size: 20px;
    color: #E36F26 !important;
    transition: color 0.2s ease;
}

.custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-pbqiyvg5ud] {
    color: #E36F26 !important;
}

.data-row.focused .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-pbqiyvg5ud] {
    color: #E36F26 !important;
}

.data-row.selected .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-pbqiyvg5ud] {
    color: #E36F26 !important;
}

.badge[b-pbqiyvg5ud] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-pbqiyvg5ud] {
    color: #333;
    font-weight: 700;
}

.items-btn[b-pbqiyvg5ud] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
}

.data-row.selected .items-btn[b-pbqiyvg5ud] {
    font-weight: 700 !important;
}

.data-row.focused .items-btn[b-pbqiyvg5ud] {
    font-weight: 700 !important;
}

.items-btn:hover[b-pbqiyvg5ud] {
    color: #E36F26 !important;
}

.action-btn[b-pbqiyvg5ud] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-pbqiyvg5ud] {
        font-size: 16px;
    }

.delete-btn[b-pbqiyvg5ud] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-pbqiyvg5ud] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-pbqiyvg5ud] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-pbqiyvg5ud]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-pbqiyvg5ud]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-pbqiyvg5ud] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-pbqiyvg5ud] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-pbqiyvg5ud] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-pbqiyvg5ud] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-pbqiyvg5ud] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-pbqiyvg5ud 1s linear infinite;
}

@keyframes spin-b-pbqiyvg5ud {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-pbqiyvg5ud] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-pbqiyvg5ud] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-pbqiyvg5ud]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-pbqiyvg5ud]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-pbqiyvg5ud]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-pbqiyvg5ud]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-pbqiyvg5ud] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-pbqiyvg5ud] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-pbqiyvg5ud] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-pbqiyvg5ud] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Deposit Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for LOC Expiration column (data-col="4") - Enabled */
.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):not(.disabled-cell):focus[b-pbqiyvg5ud]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):not(.disabled-cell):focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for LOC Expiration column (data-col="4") - Disabled */
.focusable-cell[data-col="4"].disabled-cell:focus[b-pbqiyvg5ud]::after {
    content: 'Disabled';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"].disabled-cell:focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section column (data-col="6") */
.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Notes Badge column (data-col="7") */
.focusable-cell[data-col="7"].actions-cell:focus[b-pbqiyvg5ud]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].actions-cell:focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Dates Badge column (data-col="8") */
.focusable-cell[data-col="8"].actions-cell:focus[b-pbqiyvg5ud]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Details column (data-col="9") */
.focusable-cell[data-col="9"].actions-cell:focus[b-pbqiyvg5ud]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:focus[b-pbqiyvg5ud]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for all action cell tooltips */
.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-pbqiyvg5ud]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-pbqiyvg5ud]::after,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-pbqiyvg5ud]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-pbqiyvg5ud]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-pbqiyvg5ud]::before,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-pbqiyvg5ud]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomDocumentInventoryGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-udotg4rgzr] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-udotg4rgzr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-udotg4rgzr] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-udotg4rgzr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-udotg4rgzr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-udotg4rgzr] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-udotg4rgzr] {
            color: white;
        }

    .toolbar-btn .material-icons[b-udotg4rgzr] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-udotg4rgzr] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-udotg4rgzr] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-udotg4rgzr] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-udotg4rgzr]::placeholder {
        color: #999;
    }

.clear-icon[b-udotg4rgzr] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-udotg4rgzr] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-udotg4rgzr] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-udotg4rgzr] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-udotg4rgzr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-udotg4rgzr] {
        border-right: none;
    }

    .header-cell:hover[b-udotg4rgzr] {
        background: #e8e8e8;
    }

.sort-icon[b-udotg4rgzr] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-udotg4rgzr] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-udotg4rgzr] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-udotg4rgzr] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-udotg4rgzr] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-udotg4rgzr] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-udotg4rgzr] {
        background-color: white;
    }

    .data-row.odd-row[b-udotg4rgzr] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-udotg4rgzr] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-udotg4rgzr] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-udotg4rgzr] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-udotg4rgzr] {
                color: white !important;
            }

    .data-row.selected[b-udotg4rgzr] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-udotg4rgzr] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-udotg4rgzr] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-udotg4rgzr] {
                color: white !important;
            }

.custom-grid-cell[b-udotg4rgzr] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-udotg4rgzr] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-udotg4rgzr] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-udotg4rgzr] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-udotg4rgzr]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-udotg4rgzr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-udotg4rgzr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-udotg4rgzr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-udotg4rgzr]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-udotg4rgzr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-udotg4rgzr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-udotg4rgzr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-udotg4rgzr] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-udotg4rgzr] {
    display: flex;
    align-items: center;
}

.role-badge[b-udotg4rgzr] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-udotg4rgzr] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-udotg4rgzr] {
    font-weight: 700 !important;
}

.actions-cell[b-udotg4rgzr] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-udotg4rgzr] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-udotg4rgzr] {
        font-size: 16px;
    }

.delete-btn[b-udotg4rgzr] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-udotg4rgzr] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-udotg4rgzr] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-udotg4rgzr]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-udotg4rgzr]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-udotg4rgzr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-udotg4rgzr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-udotg4rgzr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-udotg4rgzr] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-udotg4rgzr] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-udotg4rgzr] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-udotg4rgzr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-udotg4rgzr] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-udotg4rgzr] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-udotg4rgzr] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-udotg4rgzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-udotg4rgzr] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-udotg4rgzr 1s linear infinite;
}

@keyframes spin-b-udotg4rgzr {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-udotg4rgzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-udotg4rgzr] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-udotg4rgzr]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-udotg4rgzr]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-udotg4rgzr]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-udotg4rgzr]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-udotg4rgzr] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-udotg4rgzr] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-udotg4rgzr] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-udotg4rgzr] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Document Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* ADD THIS AFTER THE data-col="1" TOOLTIP STYLES (around line 730) */

/* Tooltip for Execution Date column (data-col="5") */
.focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-udotg4rgzr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.custom-grid-cell.actions-cell[b-udotg4rgzr] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-with-badge[b-udotg4rgzr] {
    font-size: 20px;
    color: #E36F26;
    transition: color 0.2s ease;
}

.badge[b-udotg4rgzr] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-udotg4rgzr] {
    color: #333;
    font-weight: 700;
}

.description-link[b-udotg4rgzr] {
    text-decoration: underline;
    cursor: pointer;
    color: #E36F26;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .description-link:hover[b-udotg4rgzr] {
        color: #c55a1a;
    }

/* Attachment icon styling */
.attachment-icon[b-udotg4rgzr] {
    cursor: pointer;
    font-size: 20px !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

    .attachment-icon.has-attachment[b-udotg4rgzr] {
        color: #E36F26; /* Realogic orange */
    }

    .attachment-icon.no-attachment[b-udotg4rgzr] {
        color: #999999; /* Gray */
    }

    .attachment-icon:hover[b-udotg4rgzr] {
        transform: scale(1.1);
        opacity: 0.8;
    }

/* Make the cell center the icon */
.custom-grid-cell .attachment-icon[b-udotg4rgzr] {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Components/CustomDocumentInventorySimplifiedGrid.razor.rz.scp.css */
.custom-grid-container[b-hzxxbwezp4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 7pt;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Toolbar */
.custom-grid-toolbar[b-hzxxbwezp4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-hzxxbwezp4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-right[b-hzxxbwezp4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Document grid title */
.doc-grid-title[b-hzxxbwezp4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8pt;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

.doc-grid-title-icon[b-hzxxbwezp4] {
    font-size: 16px;
    color: #E36F26;
}

.doc-toggle-label[b-hzxxbwezp4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 7pt;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

    .doc-toggle-label input[type="checkbox"][b-hzxxbwezp4] {
        accent-color: #E36F26;
        cursor: pointer;
        width: 13px;
        height: 13px;
    }

.search-box[b-hzxxbwezp4] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 8px;
    min-width: 200px;
    max-width: 300px;
}

.search-icon[b-hzxxbwezp4] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-hzxxbwezp4] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-hzxxbwezp4]::placeholder {
        color: #999;
    }

.clear-icon[b-hzxxbwezp4] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-hzxxbwezp4] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-hzxxbwezp4] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow: hidden;
}

.header-row[b-hzxxbwezp4] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-hzxxbwezp4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 7pt;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-hzxxbwezp4] {
        border-right: none;
    }

    .header-cell:hover[b-hzxxbwezp4] {
        background: #e8e8e8;
    }

.sort-icon[b-hzxxbwezp4] {
    font-size: 16px;
    color: #E36F26;
    flex-shrink: 0;
}

.actions-header[b-hzxxbwezp4] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-hzxxbwezp4] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-hzxxbwezp4] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
    width: 100%;
}

.custom-grid-row[b-hzxxbwezp4] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
    width: 100%;
}

.data-row[b-hzxxbwezp4] {
    cursor: pointer;
    transition: background-color 0.1s ease;
    width: 100%;
    display: flex;
}

    .data-row.even-row[b-hzxxbwezp4] {
        background-color: white;
    }

    .data-row.odd-row[b-hzxxbwezp4] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-hzxxbwezp4] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-hzxxbwezp4] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-hzxxbwezp4] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-hzxxbwezp4] {
            padding-left: 4px;
        }

.custom-grid-cell[b-hzxxbwezp4] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 7pt;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-hzxxbwezp4] {
        border-right: none;
    }

/* Focusable cell base */
.focusable-cell[b-hzxxbwezp4] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-hzxxbwezp4] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

/* Read-Only tooltip - centered above */
.readonly-cell.focusable-cell:focus[b-hzxxbwezp4]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 7pt;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.readonly-cell.focusable-cell:focus[b-hzxxbwezp4]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .readonly-cell.focusable-cell:focus[b-hzxxbwezp4]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .readonly-cell.focusable-cell:focus[b-hzxxbwezp4]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* File cell tooltip - right-justified */
.file-cell.focusable-cell:focus[b-hzxxbwezp4]::after {
    content: 'Click or space / enter to view the document';
    position: absolute;
    bottom: 100%;
    right: 0;
    left: auto;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 7pt;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.file-cell.focusable-cell:focus[b-hzxxbwezp4]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    left: auto;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .file-cell.focusable-cell:focus[b-hzxxbwezp4]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .file-cell.focusable-cell:focus[b-hzxxbwezp4]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-hzxxbwezp4] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.readonly-cell[b-hzxxbwezp4] {
    display: flex;
    align-items: center;
}

.file-cell[b-hzxxbwezp4] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.actions-cell[b-hzxxbwezp4] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-hzxxbwezp4] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-hzxxbwezp4] {
        font-size: 16px;
    }

/* Grid Footer */
.custom-grid-footer[b-hzxxbwezp4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 7pt;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-hzxxbwezp4] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-hzxxbwezp4] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-hzxxbwezp4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-hzxxbwezp4] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-hzxxbwezp4 1s linear infinite;
}

@keyframes spin-b-hzxxbwezp4 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-hzxxbwezp4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-hzxxbwezp4] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-hzxxbwezp4]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-hzxxbwezp4]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-hzxxbwezp4]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-hzxxbwezp4]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.file-link[b-hzxxbwezp4] {
    color: #E36F26;
    text-decoration: underline;
    cursor: pointer;
    font-size: 7pt;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
    display: inline;
    transition: color 0.2s ease;
}

    .file-link:hover[b-hzxxbwezp4] {
        color: #c55a1a;
    }
/* /Components/CustomEncumberedFloorsGrid.razor.rz.scp.css */
.selection-dialog-multiple-container[b-nl64o1s6hu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.selection-dialog-actions[b-nl64o1s6hu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
    flex-shrink: 0;
}

.selection-dialog-search[b-nl64o1s6hu] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
}

.search-icon[b-nl64o1s6hu] {
    font-size: 20px;
    color: #666;
    margin-right: 8px;
}

.search-input[b-nl64o1s6hu] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
}

    .search-input:focus[b-nl64o1s6hu] {
        outline: none;
    }

.selection-dialog-search:focus-within[b-nl64o1s6hu] {
    border-color: #E36F26;
    box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.2);
}

.clear-icon[b-nl64o1s6hu] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    margin-left: 8px;
    transition: color 0.2s;
}

    .clear-icon:hover[b-nl64o1s6hu] {
        color: #E36F26;
    }

.action-btn[b-nl64o1s6hu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .action-btn:hover:not(:disabled)[b-nl64o1s6hu] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .action-btn:hover:not(:disabled) .material-icons[b-nl64o1s6hu] {
            color: white;
        }

    .action-btn:disabled[b-nl64o1s6hu] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .action-btn .material-icons[b-nl64o1s6hu] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.filter-toggle[b-nl64o1s6hu] {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin-left: 12px;
}

.filter-option[b-nl64o1s6hu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    border-right: 1px solid #ccc;
    transition: all 0.2s;
    user-select: none;
}

    .filter-option:last-child[b-nl64o1s6hu] {
        border-right: none;
    }

    .filter-option input[type="radio"][b-nl64o1s6hu] {
        margin: 0;
        cursor: pointer;
    }

    .filter-option:hover[b-nl64o1s6hu] {
        background: #f0f0f0;
    }

    .filter-option.active[b-nl64o1s6hu] {
        background: #E36F26;
        color: white;
    }

        .filter-option.active input[type="radio"][b-nl64o1s6hu] {
            accent-color: white;
        }

.selection-dialog-grid-wrapper[b-nl64o1s6hu] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.selection-dialog-grid[b-nl64o1s6hu] {
    display: flex;
    flex-direction: column;
}

.grid-header-row[b-nl64o1s6hu] {
    display: flex;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1;
}

.grid-header-cell[b-nl64o1s6hu] {
    padding: 8px 12px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
}

.grid-row[b-nl64o1s6hu] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .grid-row:nth-child(even)[b-nl64o1s6hu] {
        background-color: white;
    }

    .grid-row:nth-child(odd)[b-nl64o1s6hu] {
        background-color: #f5f5f5;
    }

    .grid-row:hover[b-nl64o1s6hu] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .grid-row:hover .cell-text[b-nl64o1s6hu] {
            font-weight: 700;
            color: #333;
        }

        .grid-row:hover .selection-icon[b-nl64o1s6hu] {
            color: #333;
        }

    .grid-row.selected[b-nl64o1s6hu] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #333 !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        .grid-row.selected .cell-text[b-nl64o1s6hu] {
            color: #333 !important;
            font-weight: 700 !important;
        }

        .grid-row.selected .selection-icon[b-nl64o1s6hu] {
            color: #E36F26 !important;
        }

        .grid-row.selected .grid-cell:first-child[b-nl64o1s6hu] {
            padding-left: 4px;
        }

        .grid-row.selected:hover[b-nl64o1s6hu] {
            background-color: #c0c0c0 !important;
            box-shadow: 0 2px 8px rgba(51, 51, 51, 0.3);
        }

    .grid-row:hover:not(.selected) .selection-icon[b-nl64o1s6hu] {
        color: #333;
    }

.grid-cell[b-nl64o1s6hu] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
}

.selection-icon[b-nl64o1s6hu] {
    font-size: 20px;
    color: #666;
    transition: color 0.2s;
}

.cell-text[b-nl64o1s6hu] {
    font-size: 12px;
    color: #333;
    transition: all 0.2s;
}

.no-data-message[b-nl64o1s6hu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    padding: 2em;
}

    .no-data-message .material-icons[b-nl64o1s6hu] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.grid-loading[b-nl64o1s6hu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #666;
}

.spinner[b-nl64o1s6hu] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-nl64o1s6hu 1s linear infinite;
}

@keyframes spin-b-nl64o1s6hu {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.selection-dialog-grid-wrapper[b-nl64o1s6hu]::-webkit-scrollbar {
    width: 8px;
}

.selection-dialog-grid-wrapper[b-nl64o1s6hu]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.selection-dialog-grid-wrapper[b-nl64o1s6hu]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .selection-dialog-grid-wrapper[b-nl64o1s6hu]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.custom-grid-footer[b-nl64o1s6hu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
}

.footer-info[b-nl64o1s6hu] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-nl64o1s6hu] {
    color: #E36F26;
    font-weight: 600;
}
/* /Components/CustomEstoppelsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-9sbltvmrj0] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-9sbltvmrj0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-9sbltvmrj0] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-9sbltvmrj0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-9sbltvmrj0] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-9sbltvmrj0] {
            color: white;
        }

    .toolbar-btn .material-icons[b-9sbltvmrj0] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-9sbltvmrj0] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-9sbltvmrj0] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-9sbltvmrj0] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-9sbltvmrj0]::placeholder {
        color: #999;
    }

.clear-icon[b-9sbltvmrj0] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-9sbltvmrj0] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-9sbltvmrj0] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-9sbltvmrj0] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-9sbltvmrj0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-9sbltvmrj0] {
        border-right: none;
    }

    .header-cell:hover[b-9sbltvmrj0] {
        background: #e8e8e8;
    }

.sort-icon[b-9sbltvmrj0] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-9sbltvmrj0] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-9sbltvmrj0] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-9sbltvmrj0] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-9sbltvmrj0] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.data-row[b-9sbltvmrj0] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-9sbltvmrj0] {
        background-color: white;
    }

    .data-row.odd-row[b-9sbltvmrj0] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-9sbltvmrj0] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-9sbltvmrj0] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-9sbltvmrj0] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-9sbltvmrj0] {
        border-right: none;
    }

.cell-content[b-9sbltvmrj0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Export Badge */
.export-badge[b-9sbltvmrj0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .export-badge .material-icons[b-9sbltvmrj0] {
        font-size: 18px;
    }

.export-true[b-9sbltvmrj0] {
    color: #28a745;
}

.export-false[b-9sbltvmrj0] {
    color: #dc3545;
}

/* Actions Cell */
.actions-cell[b-9sbltvmrj0] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-9sbltvmrj0] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-9sbltvmrj0] {
        font-size: 16px;
    }

.delete-btn[b-9sbltvmrj0] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-9sbltvmrj0] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-9sbltvmrj0] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

/* Grid Footer */
.custom-grid-footer[b-9sbltvmrj0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-9sbltvmrj0] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-9sbltvmrj0] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-9sbltvmrj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-9sbltvmrj0] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-9sbltvmrj0 1s linear infinite;
}

@keyframes spin-b-9sbltvmrj0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-9sbltvmrj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-9sbltvmrj0] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-9sbltvmrj0]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-9sbltvmrj0]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-9sbltvmrj0]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-9sbltvmrj0]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip for grid rows - CENTERED */
.data-row[b-9sbltvmrj0]::after {
    content: "Click to navigate to estoppel.";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

/* Tooltip for FIRST row - shows BELOW with higher specificity */
.data-row.first-row[b-9sbltvmrj0]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

/* Show tooltip on hover */
.data-row:hover[b-9sbltvmrj0]::after {
    opacity: 1;
}
/* /Components/CustomExportRecordsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-o5tmts42z9] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-o5tmts42z9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-o5tmts42z9] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-o5tmts42z9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover:not(:disabled)[b-o5tmts42z9] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover:not(:disabled) .material-icons[b-o5tmts42z9] {
            color: white;
        }

    .toolbar-btn:disabled[b-o5tmts42z9] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-o5tmts42z9] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-o5tmts42z9] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-o5tmts42z9] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-o5tmts42z9] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-o5tmts42z9]::placeholder {
        color: #999;
    }

.clear-icon[b-o5tmts42z9] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-o5tmts42z9] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-o5tmts42z9] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-o5tmts42z9] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-o5tmts42z9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-o5tmts42z9] {
        border-right: none;
    }

    .header-cell:hover[b-o5tmts42z9] {
        background: #e8e8e8;
    }

.sort-icon[b-o5tmts42z9] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-o5tmts42z9] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-o5tmts42z9] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.data-row[b-o5tmts42z9] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-o5tmts42z9] {
        background-color: white;
    }

    .data-row.odd-row[b-o5tmts42z9] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-o5tmts42z9] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-o5tmts42z9] {
            font-weight: 700 !important;
        }

    /* Selection styling - like CustomSource grids */
    .data-row.selected[b-o5tmts42z9] {
        background-color: #E36F26 !important;
        color: white !important;
        font-weight: 700 !important;
    }

        .data-row.selected .custom-grid-cell[b-o5tmts42z9] {
            color: white !important;
            font-weight: 700 !important;
        }

        .data-row.selected .export-badge .material-icons[b-o5tmts42z9] {
            color: white !important;
        }

        .data-row.selected:hover[b-o5tmts42z9] {
            background-color: #E36F26 !important;
            box-shadow: 0 2px 8px rgba(227, 111, 38, 0.5);
        }

.custom-grid-cell[b-o5tmts42z9] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-o5tmts42z9] {
        border-right: none;
    }

.cell-content[b-o5tmts42z9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Export Badge - GREEN/RED checkboxes */
.export-badge[b-o5tmts42z9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .export-badge .material-icons[b-o5tmts42z9] {
        font-size: 18px;
    }

.export-true .material-icons[b-o5tmts42z9] {
    color: #28a745;
}

.export-false .material-icons[b-o5tmts42z9] {
    color: #dc3545;
}

/* Grid Footer */
.custom-grid-footer[b-o5tmts42z9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-o5tmts42z9] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-o5tmts42z9] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-o5tmts42z9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-o5tmts42z9] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-o5tmts42z9 1s linear infinite;
}

@keyframes spin-b-o5tmts42z9 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-o5tmts42z9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-o5tmts42z9] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-o5tmts42z9]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-o5tmts42z9]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-o5tmts42z9]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-o5tmts42z9]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip for grid rows - "Click to select" */
.data-row[b-o5tmts42z9]::after {
    content: "Click to select.";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-o5tmts42z9]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-o5tmts42z9]::after {
    opacity: 1;
}

.data-row.selected[b-o5tmts42z9]::after {
    display: none;
}
/* /Components/CustomFileImportBatchDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-ftm2fk9und] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
    color: #333;
}

/* Toolbar */
.custom-grid-toolbar[b-ftm2fk9und] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-ftm2fk9und] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-title[b-ftm2fk9und] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-ftm2fk9und] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.toolbar-btn[b-ftm2fk9und] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-ftm2fk9und] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-ftm2fk9und] {
            color: white;
        }

    .toolbar-btn .material-icons[b-ftm2fk9und] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

    .toolbar-btn.back-btn[b-ftm2fk9und] {
        background: #f5f5f5;
    }

        .toolbar-btn.back-btn:hover[b-ftm2fk9und] {
            background: #E36F26;
            color: white;
        }

.toolbar-right[b-ftm2fk9und] {
    display: flex;
    gap: 8px;
}

.search-box[b-ftm2fk9und] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 200px;
    max-width: 250px;
    height: 32px;
}

.search-icon[b-ftm2fk9und] {
    font-size: 18px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-ftm2fk9und] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 4px;
    background: transparent;
    color: #333;
}

    .search-input[b-ftm2fk9und]::placeholder {
        color: #999;
    }

.clear-icon[b-ftm2fk9und] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-ftm2fk9und] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-ftm2fk9und] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-ftm2fk9und] {
    display: flex;
    background: #f5f5f5;
    min-height: 28px;
}

.header-cell[b-ftm2fk9und] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-ftm2fk9und] {
        border-right: none;
    }

    .header-cell:hover[b-ftm2fk9und] {
        background: #e8e8e8;
    }

.sort-icon[b-ftm2fk9und] {
    font-size: 14px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-ftm2fk9und] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
    background: white;
}

.custom-grid-row[b-ftm2fk9und] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 28px;
}

.data-row[b-ftm2fk9und] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-ftm2fk9und] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-ftm2fk9und] {
            background-color: inherit;
        }

    .data-row.odd-row[b-ftm2fk9und] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-ftm2fk9und] {
            background-color: inherit;
        }

    .data-row.focused[b-ftm2fk9und] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-ftm2fk9und] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-ftm2fk9und] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-ftm2fk9und] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-ftm2fk9und] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-ftm2fk9und] {
            background-color: #f5f5f5;
        }

.custom-grid-cell[b-ftm2fk9und] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 26px;
    flex-shrink: 0;
    box-sizing: border-box;
    color: #333;
}

    .custom-grid-cell:last-child[b-ftm2fk9und] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-ftm2fk9und] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-ftm2fk9und] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.cell-content[b-ftm2fk9und] {
    display: block;
    width: 100%;
    line-height: 1.3;
    color: #333;
    word-wrap: break-word;
    word-break: break-word;
}

/* Grid Footer */
.custom-grid-footer[b-ftm2fk9und] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-ftm2fk9und] {
    display: flex;
    gap: 8px;
    color: #666;
}

.selected-indicator[b-ftm2fk9und] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-ftm2fk9und] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-ftm2fk9und] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-ftm2fk9und 1s linear infinite;
}

@keyframes spin-b-ftm2fk9und {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-ftm2fk9und] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-ftm2fk9und] {
        font-size: 48px;
        margin-bottom: 8px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-ftm2fk9und]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-grid-body[b-ftm2fk9und]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-ftm2fk9und]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-ftm2fk9und]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip for Import File column (data-col="0") - Read-Only */
.focusable-cell[data-col="0"]:focus[b-ftm2fk9und]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:focus[b-ftm2fk9und]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:focus[b-ftm2fk9und]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:focus[b-ftm2fk9und]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Status column (data-col="1") - Read-Only */
.focusable-cell[data-col="1"]:focus[b-ftm2fk9und]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:focus[b-ftm2fk9und]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:focus[b-ftm2fk9und]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:focus[b-ftm2fk9und]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Date column (data-col="2") - Read-Only */
.focusable-cell[data-col="2"]:focus[b-ftm2fk9und]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:focus[b-ftm2fk9und]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:focus[b-ftm2fk9und]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:focus[b-ftm2fk9und]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Export File column (data-col="3") - Clickable */
.focusable-cell[data-col="3"]:focus[b-ftm2fk9und]::after {
    content: 'Click or space / enter to download';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:focus[b-ftm2fk9und]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"]:focus[b-ftm2fk9und]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"]:focus[b-ftm2fk9und]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomFileImportBatchesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-srqjjcd7mr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
    color: #333;
}

/* Toolbar */
.custom-grid-toolbar[b-srqjjcd7mr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-srqjjcd7mr] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-srqjjcd7mr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-srqjjcd7mr] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-srqjjcd7mr] {
            color: white;
        }

    .toolbar-btn .material-icons[b-srqjjcd7mr] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-right[b-srqjjcd7mr] {
    display: flex;
    gap: 8px;
}

.search-box[b-srqjjcd7mr] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 200px;
    max-width: 250px;
    height: 32px;
}

.search-icon[b-srqjjcd7mr] {
    font-size: 18px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-srqjjcd7mr] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 4px;
    background: transparent;
    color: #333;
}

    .search-input[b-srqjjcd7mr]::placeholder {
        color: #999;
    }

.clear-icon[b-srqjjcd7mr] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-srqjjcd7mr] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-srqjjcd7mr] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-srqjjcd7mr] {
    display: flex;
    background: #f5f5f5;
    min-height: 28px;
}

.header-cell[b-srqjjcd7mr] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-srqjjcd7mr] {
        border-right: none;
    }

    .header-cell:hover[b-srqjjcd7mr] {
        background: #e8e8e8;
    }

.sort-icon[b-srqjjcd7mr] {
    font-size: 14px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-srqjjcd7mr] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
    background: white;
}

.custom-grid-row[b-srqjjcd7mr] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 28px;
}

.data-row[b-srqjjcd7mr] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-srqjjcd7mr] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-srqjjcd7mr] {
            background-color: inherit;
        }

    .data-row.odd-row[b-srqjjcd7mr] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-srqjjcd7mr] {
            background-color: inherit;
        }

    .data-row.focused[b-srqjjcd7mr] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-srqjjcd7mr] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-srqjjcd7mr] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-srqjjcd7mr] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-srqjjcd7mr] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-srqjjcd7mr] {
            background-color: #f5f5f5;
        }

.custom-grid-cell[b-srqjjcd7mr] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: hidden;
    min-height: 26px;
    flex-shrink: 0;
    box-sizing: border-box;
    color: #333;
}

    .custom-grid-cell:last-child[b-srqjjcd7mr] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-srqjjcd7mr] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-srqjjcd7mr] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.cell-content[b-srqjjcd7mr] {
    display: block;
    width: 100%;
    line-height: 1.3;
    color: #333;
    word-wrap: break-word;
    word-break: break-word;
}

.actions-cell[b-srqjjcd7mr] {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

/* Items button - matches other grids */
.items-btn[b-srqjjcd7mr] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
    width: 100%;
}

    .items-btn:hover[b-srqjjcd7mr] {
        color: #E36F26 !important;
    }

    .items-btn:disabled[b-srqjjcd7mr] {
        color: #999 !important;
        text-decoration: none;
        cursor: default;
    }

.data-row.selected .items-btn[b-srqjjcd7mr],
.data-row.focused .items-btn[b-srqjjcd7mr] {
    font-weight: 700 !important;
}

/* Grid Footer */
.custom-grid-footer[b-srqjjcd7mr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-srqjjcd7mr] {
    display: flex;
    gap: 8px;
    color: #666;
}

.selected-indicator[b-srqjjcd7mr] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-srqjjcd7mr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-srqjjcd7mr] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-srqjjcd7mr 1s linear infinite;
}

@keyframes spin-b-srqjjcd7mr {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-srqjjcd7mr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-srqjjcd7mr] {
        font-size: 48px;
        margin-bottom: 8px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-srqjjcd7mr]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-grid-body[b-srqjjcd7mr]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-srqjjcd7mr]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-srqjjcd7mr]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip for Batch Name column (data-col="0") - Read-Only */
.focusable-cell[data-col="0"]:focus[b-srqjjcd7mr]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:focus[b-srqjjcd7mr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:focus[b-srqjjcd7mr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:focus[b-srqjjcd7mr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Status column (data-col="1") - Read-Only */
.focusable-cell[data-col="1"]:focus[b-srqjjcd7mr]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:focus[b-srqjjcd7mr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:focus[b-srqjjcd7mr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:focus[b-srqjjcd7mr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Date column (data-col="2") - Read-Only */
.focusable-cell[data-col="2"]:focus[b-srqjjcd7mr]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:focus[b-srqjjcd7mr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:focus[b-srqjjcd7mr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:focus[b-srqjjcd7mr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Zipped File column (data-col="3") */
.focusable-cell[data-col="3"].actions-cell:focus[b-srqjjcd7mr]::after {
    content: 'Click or space / enter to download';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"].actions-cell:focus[b-srqjjcd7mr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"].actions-cell:focus[b-srqjjcd7mr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"].actions-cell:focus[b-srqjjcd7mr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Files column (data-col="4") */
.focusable-cell[data-col="4"].actions-cell:focus[b-srqjjcd7mr]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"].actions-cell:focus[b-srqjjcd7mr]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"].actions-cell:focus[b-srqjjcd7mr]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"].actions-cell:focus[b-srqjjcd7mr]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomFloorsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-hazoqyn4rg] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 256px);
    min-height: 400px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-hazoqyn4rg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.toolbar-left[b-hazoqyn4rg] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-hazoqyn4rg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-hazoqyn4rg] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-hazoqyn4rg] {
            color: white;
        }

    .toolbar-btn .material-icons[b-hazoqyn4rg] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-hazoqyn4rg] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-hazoqyn4rg] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-hazoqyn4rg] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-hazoqyn4rg]::placeholder {
        color: #999;
    }

.clear-icon[b-hazoqyn4rg] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-hazoqyn4rg] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-hazoqyn4rg] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.header-row[b-hazoqyn4rg] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-hazoqyn4rg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-hazoqyn4rg] {
        border-right: none;
    }

    .header-cell:hover[b-hazoqyn4rg] {
        background: #e8e8e8;
    }

.sort-icon[b-hazoqyn4rg] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-hazoqyn4rg] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-hazoqyn4rg] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-hazoqyn4rg] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-hazoqyn4rg] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 30px;
}

.data-row[b-hazoqyn4rg] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-hazoqyn4rg] {
        background-color: white;
    }

    .data-row.odd-row[b-hazoqyn4rg] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-hazoqyn4rg] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-hazoqyn4rg] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-hazoqyn4rg] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-hazoqyn4rg] {
                color: white !important;
            }

    .data-row.selected[b-hazoqyn4rg] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-hazoqyn4rg] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-hazoqyn4rg] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-hazoqyn4rg] {
                color: white !important;
            }

.custom-grid-cell[b-hazoqyn4rg] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-hazoqyn4rg] {
        border-right: none;
    }

    /* Right-justify numeric columns - Rentable, Usable, User Defined */
    .custom-grid-cell[data-col="3"][b-hazoqyn4rg],
    .custom-grid-cell[data-col="4"]:not(.actions-cell)[b-hazoqyn4rg],
    .custom-grid-cell[data-col="5"]:not(.actions-cell)[b-hazoqyn4rg] {
        justify-content: flex-end;
    }

        .custom-grid-cell[data-col="3"] .cell-content[b-hazoqyn4rg],
        .custom-grid-cell[data-col="4"]:not(.actions-cell) .cell-content[b-hazoqyn4rg],
        .custom-grid-cell[data-col="5"]:not(.actions-cell) .cell-content[b-hazoqyn4rg] {
            text-align: right;
        }

        .custom-grid-cell[data-col="3"] .inline-edit-input[b-hazoqyn4rg],
        .custom-grid-cell[data-col="4"]:not(.actions-cell) .inline-edit-input[b-hazoqyn4rg],
        .custom-grid-cell[data-col="5"]:not(.actions-cell) .inline-edit-input[b-hazoqyn4rg] {
            text-align: right;
        }

/* Right-justify numeric column headers */
.header-cell:nth-child(4)[b-hazoqyn4rg],
.header-cell:nth-child(5):not(.items-header):not(.actions-header)[b-hazoqyn4rg],
.header-cell:nth-child(6):not(.items-header):not(.actions-header)[b-hazoqyn4rg] {
    justify-content: flex-end;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-hazoqyn4rg] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-hazoqyn4rg] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 100;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="3"]):not([data-col="4"]):not([data-col="5"]):focus[b-hazoqyn4rg]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="3"]):not([data-col="4"]):not([data-col="5"]):focus[b-hazoqyn4rg]::before {
        display: none !important;
    }

/* Show tooltip on role-cell focus only */
.role-cell.focusable-cell:focus[b-hazoqyn4rg]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-hazoqyn4rg]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-hazoqyn4rg]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-hazoqyn4rg]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Default actions-cell focus tooltip - for delete buttons */
.actions-cell.focusable-cell:focus[b-hazoqyn4rg]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-hazoqyn4rg]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-hazoqyn4rg]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-hazoqyn4rg]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Override focus tooltip for actions-cell with items-btn to show "view" message */
.actions-cell.focusable-cell:has(.items-btn):focus[b-hazoqyn4rg]::after {
    content: 'Click or space / enter to view' !important;
    left: 0;
    right: auto;
}

.actions-cell.focusable-cell:has(.items-btn):focus[b-hazoqyn4rg]::before {
    left: 10px;
    right: auto;
}

.cell-content[b-hazoqyn4rg] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Role Badge - Underlined text style */
.role-cell[b-hazoqyn4rg] {
    display: flex;
    align-items: center;
}

.role-badge[b-hazoqyn4rg] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-hazoqyn4rg] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-hazoqyn4rg] {
    font-weight: 700 !important;
}

/* Actions Cell */
.actions-cell[b-hazoqyn4rg] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .actions-cell:has(.items-btn)[b-hazoqyn4rg] {
        justify-content: flex-start !important;
    }

.action-btn[b-hazoqyn4rg] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-hazoqyn4rg] {
        font-size: 16px;
    }

.delete-btn[b-hazoqyn4rg] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-hazoqyn4rg] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-hazoqyn4rg] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-hazoqyn4rg]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-hazoqyn4rg]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-hazoqyn4rg]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-hazoqyn4rg]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-hazoqyn4rg] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-top: 2px solid #dee2e6;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    flex-grow: 0;
    min-height: 36px;
    position: relative;
    z-index: 1;
}

.footer-row[b-hazoqyn4rg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.floor-count[b-hazoqyn4rg] {
}

.footer-separator[b-hazoqyn4rg] {
    color: #adb5bd;
}

.footer-label[b-hazoqyn4rg] {
    color: #495057;
}

.footer-value[b-hazoqyn4rg] {
    color: #212529;
    min-width: 60px;
    text-align: right;
}

/* Loading & No Data */
.loading-overlay[b-hazoqyn4rg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-hazoqyn4rg] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-hazoqyn4rg 1s linear infinite;
}

@keyframes spin-b-hazoqyn4rg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-hazoqyn4rg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-hazoqyn4rg] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-hazoqyn4rg]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-hazoqyn4rg]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-hazoqyn4rg]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-hazoqyn4rg]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-hazoqyn4rg] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-hazoqyn4rg] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-hazoqyn4rg] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-hazoqyn4rg] {
        background-color: #FFF9F5 !important;
    }

.items-header[b-hazoqyn4rg] {
    justify-content: flex-start !important;
}

    .items-header .material-icons[b-hazoqyn4rg] {
        font-size: 16px;
        color: #333;
    }

.custom-grid-cell.items-badge-cell[b-hazoqyn4rg] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 8px;
}

.items-badge-cell .action-btn.view-badge-btn[b-hazoqyn4rg] {
    margin: 0;
}

.items-btn[b-hazoqyn4rg] {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    position: relative;
    color: #333 !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s;
}

    .items-btn:hover[b-hazoqyn4rg] {
        background: transparent !important;
        border: none !important;
        opacity: 1;
    }

        .items-btn:hover[b-hazoqyn4rg]::after {
            content: 'Click or space / enter to view';
            position: absolute;
            bottom: 100%;
            left: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .items-btn:hover[b-hazoqyn4rg]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .items-btn:hover[b-hazoqyn4rg]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .items-btn:hover[b-hazoqyn4rg]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.focused .items-btn[b-hazoqyn4rg] {
    font-weight: 700 !important;
}

.data-row.selected .items-btn[b-hazoqyn4rg] {
    font-weight: 700 !important;
}

/* Tooltip rules for editable columns - Sort, Floor, Rentable are ALWAYS data-col 0, 1, 3 */
.focusable-cell[data-col="0"]:not(.system-cell):focus[b-hazoqyn4rg]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-hazoqyn4rg]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-hazoqyn4rg]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-hazoqyn4rg]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* ONLY show "edit" tooltips for data-col 4 and 5 IF they are NOT actions-cell (i.e., they're Usable/UserDefined, not Suites/Delete) */
.focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::after,
.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::before,
.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-hazoqyn4rg]::after,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-hazoqyn4rg]::after,
.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::after,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::after,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-hazoqyn4rg]::before,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-hazoqyn4rg]::before,
.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::before,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::before,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-hazoqyn4rg]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomFloorsPreviewGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-chxky43h4s] {
    display: flex;
    flex-direction: column;
    height: 250px;
    min-height: 200px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
    user-select: none;
}

/* Grid Header */
.custom-grid-header[b-chxky43h4s] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.header-row[b-chxky43h4s] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-chxky43h4s] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-chxky43h4s] {
        border-right: none;
    }

    .header-cell:hover[b-chxky43h4s] {
        background: #e8e8e8;
    }

/* Grid Body */
.custom-grid-body[b-chxky43h4s] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-chxky43h4s] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 30px;
}

.data-row[b-chxky43h4s] {
    cursor: pointer;
    transition: background-color 0.1s ease;
    user-select: none;
}

    .data-row.even-row[b-chxky43h4s] {
        background-color: white;
    }

    .data-row.odd-row[b-chxky43h4s] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-chxky43h4s] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-chxky43h4s] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-chxky43h4s] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-chxky43h4s] {
            padding-left: 4px;
        }

.custom-grid-cell[b-chxky43h4s] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
    user-select: none;
}

    .custom-grid-cell:last-child[b-chxky43h4s] {
        border-right: none;
    }

    .custom-grid-cell[data-col="3"][b-chxky43h4s],
    .custom-grid-cell[data-col="4"][b-chxky43h4s],
    .custom-grid-cell[data-col="5"][b-chxky43h4s] {
        justify-content: flex-end;
    }

        .custom-grid-cell[data-col="3"] .cell-content[b-chxky43h4s],
        .custom-grid-cell[data-col="4"] .cell-content[b-chxky43h4s],
        .custom-grid-cell[data-col="5"] .cell-content[b-chxky43h4s] {
            text-align: right;
        }

        .custom-grid-cell[data-col="3"] .inline-edit-input[b-chxky43h4s],
        .custom-grid-cell[data-col="4"] .inline-edit-input[b-chxky43h4s],
        .custom-grid-cell[data-col="5"] .inline-edit-input[b-chxky43h4s] {
            text-align: right;
        }

.focusable-cell[b-chxky43h4s] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-chxky43h4s] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 100;
    }

.cell-content[b-chxky43h4s] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
    user-select: text;
}

.loading-overlay[b-chxky43h4s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-chxky43h4s] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-chxky43h4s 1s linear infinite;
}

@keyframes spin-b-chxky43h4s {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-chxky43h4s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-chxky43h4s] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.custom-grid-body[b-chxky43h4s]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-chxky43h4s]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-chxky43h4s]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-chxky43h4s]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-chxky43h4s] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-chxky43h4s] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-chxky43h4s] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-chxky43h4s] {
        background-color: #FFF9F5 !important;
    }

/* Validation error message for Floor Type */
.validation-error[b-chxky43h4s] {
    color: #d32f2f;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

/* Tooltip for Sort column (data-col="0") - Read-only */
.focusable-cell[data-col="0"]:focus[b-chxky43h4s]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:focus[b-chxky43h4s]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Type column (data-col="2") - Read-only */
.focusable-cell[data-col="2"]:focus[b-chxky43h4s]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:focus[b-chxky43h4s]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Floor Name column (data-col="1") - Centered */
.focusable-cell[data-col="1"]:not(.system-cell):focus[b-chxky43h4s]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-chxky43h4s]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltips for Area columns (data-col="3", "4", "5") - Right justified */
.focusable-cell[data-col="3"]:not(.system-cell):focus[b-chxky43h4s]::after,
.focusable-cell[data-col="4"]:not(.system-cell):focus[b-chxky43h4s]::after,
.focusable-cell[data-col="5"]:not(.system-cell):focus[b-chxky43h4s]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.system-cell):focus[b-chxky43h4s]::before,
.focusable-cell[data-col="4"]:not(.system-cell):focus[b-chxky43h4s]::before,
.focusable-cell[data-col="5"]:not(.system-cell):focus[b-chxky43h4s]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row tooltips - show below */
.data-row:first-child .focusable-cell[data-col="0"]:focus[b-chxky43h4s]::after,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-chxky43h4s]::after,
.data-row:first-child .focusable-cell[data-col="2"]:focus[b-chxky43h4s]::after,
.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):focus[b-chxky43h4s]::after,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):focus[b-chxky43h4s]::after,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):focus[b-chxky43h4s]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:focus[b-chxky43h4s]::before,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-chxky43h4s]::before,
.data-row:first-child .focusable-cell[data-col="2"]:focus[b-chxky43h4s]::before,
.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):focus[b-chxky43h4s]::before,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):focus[b-chxky43h4s]::before,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):focus[b-chxky43h4s]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Row with validation error */
.data-row.has-validation-error[b-chxky43h4s] {
    border-left: 3px solid #d32f2f !important;
}

/* Validation error message */
.validation-error-message[b-chxky43h4s] {
    background-color: #ffebee;
    color: #d32f2f;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 4px;
    border-top: 1px solid #d32f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.2;
    flex-shrink: 0;
}
/* /Components/CustomFloorSuitesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-w4ijqdnf6q] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 256px);
    min-height: 400px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-w4ijqdnf6q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.toolbar-left[b-w4ijqdnf6q] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-btn[b-w4ijqdnf6q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-w4ijqdnf6q] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-w4ijqdnf6q] {
            color: white;
        }

    .toolbar-btn .material-icons[b-w4ijqdnf6q] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-w4ijqdnf6q] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-w4ijqdnf6q] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-w4ijqdnf6q] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-w4ijqdnf6q]::placeholder {
        color: #999;
    }

.clear-icon[b-w4ijqdnf6q] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-w4ijqdnf6q] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-w4ijqdnf6q] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.header-row[b-w4ijqdnf6q] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-w4ijqdnf6q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-w4ijqdnf6q] {
        border-right: none;
    }

    .header-cell:hover[b-w4ijqdnf6q] {
        background: #e8e8e8;
    }

.sort-icon[b-w4ijqdnf6q] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-w4ijqdnf6q] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-w4ijqdnf6q] {
        background: #f5f5f5;
    }

/* Right-justify numeric column headers - Rentable, Usable, User Defined */
.header-cell:nth-child(6)[b-w4ijqdnf6q],
.header-cell:nth-child(7):not(.items-header):not(.actions-header)[b-w4ijqdnf6q],
.header-cell:nth-child(8):not(.items-header):not(.actions-header)[b-w4ijqdnf6q] {
    justify-content: flex-end;
}

/* Grid Body */
.custom-grid-body[b-w4ijqdnf6q] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-w4ijqdnf6q] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 28px;
}

.data-row[b-w4ijqdnf6q] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-w4ijqdnf6q] {
        background-color: white;
    }

    .data-row.odd-row[b-w4ijqdnf6q] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-w4ijqdnf6q] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-w4ijqdnf6q] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-w4ijqdnf6q] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-w4ijqdnf6q] {
                color: white !important;
            }

    .data-row.selected[b-w4ijqdnf6q] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-w4ijqdnf6q] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-w4ijqdnf6q] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-w4ijqdnf6q] {
                color: white !important;
            }

.custom-grid-cell[b-w4ijqdnf6q] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-w4ijqdnf6q] {
        border-right: none;
    }

    /* Right-justify numeric columns - Rentable, Usable, User Defined */
    .custom-grid-cell[data-col="5"]:not(.actions-cell):not(.items-badge-cell)[b-w4ijqdnf6q],
    .custom-grid-cell[data-col="6"]:not(.actions-cell):not(.items-badge-cell)[b-w4ijqdnf6q],
    .custom-grid-cell[data-col="7"]:not(.actions-cell):not(.items-badge-cell)[b-w4ijqdnf6q] {
        justify-content: flex-end;
    }

        .custom-grid-cell[data-col="5"]:not(.actions-cell):not(.items-badge-cell) .cell-content[b-w4ijqdnf6q],
        .custom-grid-cell[data-col="6"]:not(.actions-cell):not(.items-badge-cell) .cell-content[b-w4ijqdnf6q],
        .custom-grid-cell[data-col="7"]:not(.actions-cell):not(.items-badge-cell) .cell-content[b-w4ijqdnf6q] {
            text-align: right;
        }

        .custom-grid-cell[data-col="5"]:not(.actions-cell):not(.items-badge-cell) .inline-edit-input[b-w4ijqdnf6q],
        .custom-grid-cell[data-col="6"]:not(.actions-cell):not(.items-badge-cell) .inline-edit-input[b-w4ijqdnf6q],
        .custom-grid-cell[data-col="7"]:not(.actions-cell):not(.items-badge-cell) .inline-edit-input[b-w4ijqdnf6q] {
            text-align: right;
        }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-w4ijqdnf6q] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-w4ijqdnf6q] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 100;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not(.items-badge-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="3"]):not([data-col="4"]):not([data-col="5"]):not([data-col="6"]):not([data-col="7"]):focus[b-w4ijqdnf6q]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not(.items-badge-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="3"]):not([data-col="4"]):not([data-col="5"]):not([data-col="6"]):not([data-col="7"]):focus[b-w4ijqdnf6q]::before {
        display: none !important;
    }

/* Show tooltip on role-cell focus only */
.role-cell.focusable-cell:focus[b-w4ijqdnf6q]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-w4ijqdnf6q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-w4ijqdnf6q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-w4ijqdnf6q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-w4ijqdnf6q]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-w4ijqdnf6q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-w4ijqdnf6q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-w4ijqdnf6q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-w4ijqdnf6q] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Role Badge - Underlined text style */
.role-cell[b-w4ijqdnf6q] {
    display: flex;
    align-items: center;
}

.role-badge[b-w4ijqdnf6q] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-w4ijqdnf6q] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-w4ijqdnf6q] {
    font-weight: 700 !important;
}

/* Actions Cell */
.actions-cell[b-w4ijqdnf6q] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .actions-cell:has(.items-btn)[b-w4ijqdnf6q] {
        justify-content: flex-start !important;
    }

.action-btn[b-w4ijqdnf6q] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-w4ijqdnf6q] {
        font-size: 16px;
    }

.delete-btn[b-w4ijqdnf6q] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-w4ijqdnf6q] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-w4ijqdnf6q] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-w4ijqdnf6q]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-w4ijqdnf6q]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 10000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-w4ijqdnf6q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-w4ijqdnf6q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-w4ijqdnf6q] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-top: 2px solid #dee2e6;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    flex-grow: 0;
    min-height: 36px;
    position: relative;
    z-index: 1;
}

.footer-row[b-w4ijqdnf6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.floor-count[b-w4ijqdnf6q] {
}

.footer-separator[b-w4ijqdnf6q] {
    color: #adb5bd;
}

.footer-label[b-w4ijqdnf6q] {
    color: #495057;
}

.footer-value[b-w4ijqdnf6q] {
    color: #212529;
    min-width: 60px;
    text-align: right;
}

/* Loading & No Data */
.loading-overlay[b-w4ijqdnf6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-w4ijqdnf6q] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-w4ijqdnf6q 1s linear infinite;
}

@keyframes spin-b-w4ijqdnf6q {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-w4ijqdnf6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-w4ijqdnf6q] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-w4ijqdnf6q]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-w4ijqdnf6q]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-w4ijqdnf6q]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-w4ijqdnf6q]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-w4ijqdnf6q] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-w4ijqdnf6q] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-w4ijqdnf6q] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-w4ijqdnf6q] {
        background-color: #FFF9F5 !important;
    }

.items-header[b-w4ijqdnf6q] {
    justify-content: flex-start !important;
}

    .items-header .material-icons[b-w4ijqdnf6q] {
        font-size: 16px;
        color: #333;
    }

.custom-grid-cell.items-badge-cell[b-w4ijqdnf6q] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 8px;
}

.items-badge-cell .action-btn.view-badge-btn[b-w4ijqdnf6q] {
    margin: 0;
}

.items-btn[b-w4ijqdnf6q] {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    position: relative;
    color: #333 !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s;
}

    .items-btn:hover[b-w4ijqdnf6q] {
        background: transparent !important;
        border: none !important;
        opacity: 1;
    }

        .items-btn:hover[b-w4ijqdnf6q]::after {
            content: 'Click or space / enter to view';
            position: absolute;
            bottom: 100%;
            left: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .items-btn:hover[b-w4ijqdnf6q]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 10000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .items-btn:hover[b-w4ijqdnf6q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .items-btn:hover[b-w4ijqdnf6q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.focused .items-btn[b-w4ijqdnf6q] {
    font-weight: 700 !important;
}

.data-row.selected .items-btn[b-w4ijqdnf6q] {
    font-weight: 700 !important;
}

.items-badge-cell.focusable-cell:focus[b-w4ijqdnf6q]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.items-badge-cell.focusable-cell:focus[b-w4ijqdnf6q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .items-badge-cell.focusable-cell:focus[b-w4ijqdnf6q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .items-badge-cell.focusable-cell:focus[b-w4ijqdnf6q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-w4ijqdnf6q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-w4ijqdnf6q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-w4ijqdnf6q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-w4ijqdnf6q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip rules for editable columns - ONLY show "edit" tooltips if NOT actions-cell or items-badge-cell */
.focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-w4ijqdnf6q]::after,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-w4ijqdnf6q]::after,
.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.data-row:first-child .focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after,
.data-row:first-child .focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-w4ijqdnf6q]::before,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-w4ijqdnf6q]::before,
.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.data-row:first-child .focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before,
.data-row:first-child .focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-w4ijqdnf6q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.context-label[b-w4ijqdnf6q] {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* /Components/CustomLookupsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-l68g6f168v] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 400px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-l68g6f168v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.toolbar-left[b-l68g6f168v] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-l68g6f168v] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-l68g6f168v] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-l68g6f168v] {
            color: white;
        }

    .toolbar-btn .material-icons[b-l68g6f168v] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-l68g6f168v] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-l68g6f168v] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-l68g6f168v] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-l68g6f168v]::placeholder {
        color: #999;
    }

.clear-icon[b-l68g6f168v] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-l68g6f168v] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-l68g6f168v] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.header-row[b-l68g6f168v] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-l68g6f168v] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-l68g6f168v] {
        border-right: none;
    }

    .header-cell:hover[b-l68g6f168v] {
        background: #e8e8e8;
    }

.sort-icon[b-l68g6f168v] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-l68g6f168v] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-l68g6f168v] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-l68g6f168v] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-l68g6f168v] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-l68g6f168v] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-l68g6f168v] {
        background-color: white;
    }

    .data-row.odd-row[b-l68g6f168v] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-l68g6f168v] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-l68g6f168v] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-l68g6f168v] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-l68g6f168v] {
                color: white !important;
            }

    .data-row.selected[b-l68g6f168v] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-l68g6f168v] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-l68g6f168v] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-l68g6f168v] {
                color: white !important;
            }

.custom-grid-cell[b-l68g6f168v] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-l68g6f168v] {
        border-right: none;
    }

.col-sort[b-l68g6f168v] {
    display: none !important;
}

.mode-recovery-pool .col-name-recovery[b-l68g6f168v] {
    flex: 0 0 45%;
    min-width: 45%;
    max-width: 45%;
}

.mode-recovery-pool .col-code-recovery[b-l68g6f168v] {
    flex: 0 0 45%;
    min-width: 45%;
    max-width: 45%;
}

.mode-recovery-pool .col-delete[b-l68g6f168v] {
    flex: 0 0 10%;
    min-width: 10%;
    max-width: 10%;
}

.mode-charge-code .col-name-charge[b-l68g6f168v] {
    flex: 0 0 30%;
    min-width: 30%;
    max-width: 30%;
}

.mode-charge-code .col-code-charge[b-l68g6f168v] {
    flex: 0 0 30%;
    min-width: 30%;
    max-width: 30%;
}

.mode-charge-code .col-subtype[b-l68g6f168v] {
    flex: 0 0 30%;
    min-width: 30%;
    max-width: 30%;
}

.mode-charge-code .col-delete[b-l68g6f168v] {
    flex: 0 0 10%;
    min-width: 10%;
    max-width: 10%;
}

.mode-charge-code .col-type[b-l68g6f168v] {
    display: none !important;
}

.mode-all .col-name-all[b-l68g6f168v] {
    flex: 0 0 18%;
    min-width: 18%;
    max-width: 18%;
}

.mode-all .col-code-all[b-l68g6f168v] {
    flex: 0 0 18%;
    min-width: 18%;
    max-width: 18%;
}

.mode-all .col-type[b-l68g6f168v] {
    flex: 0 0 18%;
    min-width: 18%;
    max-width: 18%;
}

.mode-all .col-subtype[b-l68g6f168v] {
    flex: 0 0 18%;
    min-width: 18%;
    max-width: 18%;
}

.mode-all .col-status[b-l68g6f168v] {
    flex: 0 0 18%;
    min-width: 18%;
    max-width: 18%;
}

.mode-all .col-delete[b-l68g6f168v] {
    flex: 0 0 10%;
    min-width: 10%;
    max-width: 10%;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-l68g6f168v] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-l68g6f168v] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 100;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-l68g6f168v]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-l68g6f168v]::before {
        display: none !important;
    }

.cell-content[b-l68g6f168v] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Role Badge - Underlined text style for SubType */
.role-cell[b-l68g6f168v] {
    display: flex;
    align-items: center;
}

.role-badge[b-l68g6f168v] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-l68g6f168v] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-l68g6f168v] {
    font-weight: 700 !important;
}

/* Actions Cell */
.actions-cell[b-l68g6f168v] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-l68g6f168v] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-l68g6f168v] {
        font-size: 16px;
    }

.delete-btn[b-l68g6f168v] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-l68g6f168v] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-l68g6f168v] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-l68g6f168v]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-l68g6f168v]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-l68g6f168v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-l68g6f168v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.inline-edit-input[b-l68g6f168v] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    font-family: inherit;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-l68g6f168v] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-l68g6f168v] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
    margin: -2px 0 !important;
}

    .data-row.editing .custom-grid-cell[b-l68g6f168v] {
        background-color: #FFF9F5 !important;
    }

/* Grid Footer */
.custom-grid-footer[b-l68g6f168v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
    min-height: 36px;
    position: relative;
    z-index: 1;
}

.footer-info[b-l68g6f168v] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-l68g6f168v] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading */
.loading-overlay[b-l68g6f168v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-l68g6f168v] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-l68g6f168v 1s linear infinite;
}

@keyframes spin-b-l68g6f168v {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* No Data */
.no-data-message[b-l68g6f168v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-l68g6f168v] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-l68g6f168v]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-l68g6f168v]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-l68g6f168v]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-l68g6f168v]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* data-col="0" = Sort (hidden, no tooltip needed) */
/* data-col="1" = Lookup/Name - LEFT-ALIGNED tooltip */
.focusable-cell[data-col="1"]:focus[b-l68g6f168v]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:focus[b-l68g6f168v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* data-col="2" = Code - CENTERED tooltip */
.focusable-cell[data-col="2"]:focus[b-l68g6f168v]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:focus[b-l68g6f168v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* data-col="4" = SubType (only in ChargeCode mode) - CENTERED tooltip with role-cell styling */
.role-cell.focusable-cell:focus[b-l68g6f168v]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-l68g6f168v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Delete button (actions-cell) - RIGHT-ALIGNED tooltip */
.actions-cell.focusable-cell:focus[b-l68g6f168v]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-l68g6f168v]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row adjustments - flip tooltips below */
.data-row:first-child .focusable-cell[data-col="1"]:focus[b-l68g6f168v]::after,
.data-row:first-child .focusable-cell[data-col="2"]:focus[b-l68g6f168v]::after,
.data-row:first-child .role-cell.focusable-cell:focus[b-l68g6f168v]::after,
.data-row:first-child .actions-cell.focusable-cell:focus[b-l68g6f168v]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:focus[b-l68g6f168v]::before,
.data-row:first-child .focusable-cell[data-col="2"]:focus[b-l68g6f168v]::before,
.data-row:first-child .role-cell.focusable-cell:focus[b-l68g6f168v]::before,
.data-row:first-child .actions-cell.focusable-cell:focus[b-l68g6f168v]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomNotesDatesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-821b8n8fpz] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-821b8n8fpz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-821b8n8fpz] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-821b8n8fpz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-821b8n8fpz] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-821b8n8fpz] {
            color: white;
        }

    .toolbar-btn .material-icons[b-821b8n8fpz] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-821b8n8fpz] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-821b8n8fpz] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-821b8n8fpz] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-821b8n8fpz]::placeholder {
        color: #999;
    }

.clear-icon[b-821b8n8fpz] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-821b8n8fpz] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-821b8n8fpz] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-821b8n8fpz] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-821b8n8fpz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-821b8n8fpz] {
        border-right: none;
    }

    .header-cell:hover[b-821b8n8fpz] {
        background: #e8e8e8;
    }

.sort-icon[b-821b8n8fpz] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-821b8n8fpz] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-821b8n8fpz] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-821b8n8fpz] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-821b8n8fpz] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-821b8n8fpz] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-821b8n8fpz] {
        background-color: white;
    }

    .data-row.odd-row[b-821b8n8fpz] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-821b8n8fpz] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-821b8n8fpz] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-821b8n8fpz] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-821b8n8fpz] {
                color: white !important;
            }

    .data-row.selected[b-821b8n8fpz] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-821b8n8fpz] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-821b8n8fpz] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-821b8n8fpz] {
                color: white !important;
            }

.custom-grid-cell[b-821b8n8fpz] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-821b8n8fpz] {
        border-right: none;
    }

.focusable-cell[b-821b8n8fpz] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-821b8n8fpz] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Hide tooltips for cells that don't have specific rules */
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-821b8n8fpz]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):focus[b-821b8n8fpz]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-821b8n8fpz]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-821b8n8fpz]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-821b8n8fpz]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-821b8n8fpz]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-821b8n8fpz]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-821b8n8fpz]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-821b8n8fpz]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-821b8n8fpz]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-821b8n8fpz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-821b8n8fpz] {
    display: flex;
    align-items: center;
}

.role-badge[b-821b8n8fpz] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-821b8n8fpz] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-821b8n8fpz] {
    font-weight: 700 !important;
}

.actions-cell[b-821b8n8fpz] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-821b8n8fpz] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-821b8n8fpz] {
        font-size: 16px;
    }

.delete-btn[b-821b8n8fpz] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-821b8n8fpz] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-821b8n8fpz] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-821b8n8fpz]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-821b8n8fpz]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-821b8n8fpz]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-821b8n8fpz]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.custom-grid-footer[b-821b8n8fpz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-821b8n8fpz] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-821b8n8fpz] {
    color: #E36F26;
    font-weight: 600;
}

.loading-overlay[b-821b8n8fpz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-821b8n8fpz] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-821b8n8fpz 1s linear infinite;
}

@keyframes spin-b-821b8n8fpz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-821b8n8fpz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-821b8n8fpz] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.custom-grid-body[b-821b8n8fpz]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-821b8n8fpz]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-821b8n8fpz]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-821b8n8fpz]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-821b8n8fpz] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-821b8n8fpz] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-821b8n8fpz] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-821b8n8fpz] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Date column (data-col="2") - only in Date mode */
.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-821b8n8fpz]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Custom Selection Dialog Styles */
.custom-selection-dialog-container[b-821b8n8fpz] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
}

.custom-selection-dialog-header[b-821b8n8fpz] {
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.custom-selection-grid-container[b-821b8n8fpz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.custom-selection-grid-header[b-821b8n8fpz] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
}

.custom-selection-row[b-821b8n8fpz] {
    display: flex;
}

.custom-selection-cell[b-821b8n8fpz] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
}

    .custom-selection-cell.header-cell[b-821b8n8fpz] {
        font-weight: 700;
        color: #333;
    }

.custom-selection-grid-body[b-821b8n8fpz] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.custom-selection-row.data-row[b-821b8n8fpz] {
    cursor: pointer;
    transition: background-color 0.1s ease;
    height: 30px;
    border-bottom: 1px solid #e8e8e8;
}

    .custom-selection-row.data-row:hover[b-821b8n8fpz] {
        background-color: #E36F26 !important;
        color: white !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(227, 111, 38, 0.3);
    }

        .custom-selection-row.data-row:hover .custom-selection-cell[b-821b8n8fpz] {
            color: white !important;
        }

    .custom-selection-row.data-row.selected[b-821b8n8fpz] {
        background-color: #E36F26 !important;
        color: white !important;
        font-weight: 700 !important;
    }

        .custom-selection-row.data-row.selected .custom-selection-cell[b-821b8n8fpz] {
            color: white !important;
        }

.custom-selection-dialog-footer[b-821b8n8fpz] {
    padding: 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.footer-btn[b-821b8n8fpz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #E36F26;
    border: 1px solid #E36F26;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: white;
    transition: all 0.2s;
}

    .footer-btn:hover[b-821b8n8fpz] {
        background: #c45e1f;
        border-color: #c45e1f;
    }

.custom-selection-grid-body[b-821b8n8fpz]::-webkit-scrollbar {
    width: 8px;
}

.custom-selection-grid-body[b-821b8n8fpz]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-selection-grid-body[b-821b8n8fpz]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-selection-grid-body[b-821b8n8fpz]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.icon-with-badge.has-detail[b-821b8n8fpz] {
    color: #E36F26 !important;
}

.context-label[b-821b8n8fpz] {
    padding: 0;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* /Components/CustomNotesDialog.razor.rz.scp.css */
/* Dialog Container - Grid 40% / Editor 60% */
.custom-notes-dialog-container[b-rq7wrt18ns] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}

/* Custom Grid Container - 40% of dialog */
.custom-grid-container[b-rq7wrt18ns] {
    display: flex;
    flex-direction: column;
    height: 40%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-bottom: none;
    overflow: visible;
    flex-shrink: 0;
}

/* Toolbar */
.custom-grid-toolbar[b-rq7wrt18ns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-rq7wrt18ns] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-rq7wrt18ns] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-rq7wrt18ns] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-rq7wrt18ns] {
            color: white;
        }

    .toolbar-btn .material-icons[b-rq7wrt18ns] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-rq7wrt18ns] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-rq7wrt18ns] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-rq7wrt18ns] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-rq7wrt18ns]::placeholder {
        color: #999;
    }

.clear-icon[b-rq7wrt18ns] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-rq7wrt18ns] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-rq7wrt18ns] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-rq7wrt18ns] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-rq7wrt18ns] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-rq7wrt18ns] {
        border-right: none;
    }

    .header-cell:hover[b-rq7wrt18ns] {
        background: #e8e8e8;
    }

.sort-icon[b-rq7wrt18ns] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-rq7wrt18ns] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-rq7wrt18ns] {
        background: #f5f5f5;
    }

/* Grid Body - scrollable when needed */
.custom-grid-body[b-rq7wrt18ns] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-rq7wrt18ns] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.data-row[b-rq7wrt18ns] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-rq7wrt18ns] {
        background-color: white;
    }

    .data-row.odd-row[b-rq7wrt18ns] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-rq7wrt18ns] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-rq7wrt18ns] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-rq7wrt18ns] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-rq7wrt18ns] {
                color: white !important;
            }

    .data-row.selected[b-rq7wrt18ns] {
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 8px rgba(227, 111, 38, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-rq7wrt18ns] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-rq7wrt18ns] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-rq7wrt18ns] {
                color: white !important;
            }

.custom-grid-cell[b-rq7wrt18ns] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-rq7wrt18ns] {
        border-right: none;
    }

.focusable-cell[b-rq7wrt18ns] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-rq7wrt18ns] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-rq7wrt18ns]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-rq7wrt18ns]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-rq7wrt18ns]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-rq7wrt18ns]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-rq7wrt18ns]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-rq7wrt18ns]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-rq7wrt18ns]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-rq7wrt18ns]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-rq7wrt18ns] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-preview[b-rq7wrt18ns] {
    font-style: italic;
    color: #666;
}

.role-cell[b-rq7wrt18ns] {
    display: flex;
    align-items: center;
}

.role-badge[b-rq7wrt18ns] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-rq7wrt18ns] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-rq7wrt18ns] {
    font-weight: 700 !important;
}

.actions-cell[b-rq7wrt18ns] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-rq7wrt18ns] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-rq7wrt18ns] {
        font-size: 16px;
    }

.delete-btn[b-rq7wrt18ns] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-rq7wrt18ns] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-rq7wrt18ns] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-rq7wrt18ns]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-rq7wrt18ns]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-rq7wrt18ns]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-rq7wrt18ns]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-rq7wrt18ns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
}

.footer-info[b-rq7wrt18ns] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-rq7wrt18ns] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-rq7wrt18ns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-rq7wrt18ns] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-rq7wrt18ns 1s linear infinite;
}

@keyframes spin-b-rq7wrt18ns {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-rq7wrt18ns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-rq7wrt18ns] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-rq7wrt18ns]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-rq7wrt18ns]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-rq7wrt18ns]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-rq7wrt18ns]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-rq7wrt18ns] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-rq7wrt18ns] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-rq7wrt18ns] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-rq7wrt18ns] {
        background-color: #FFF9F5 !important;
    }

/* Editor Section - 60% of dialog */
.notes-editor-section[b-rq7wrt18ns] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    background: white;
    overflow: hidden;
    min-height: 0;
}

.editor-header[b-rq7wrt18ns] {
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

    .editor-header h4[b-rq7wrt18ns] {
        margin: 0;
        font-size: 14px;
        color: #E36F26;
        font-weight: 600;
    }

.no-selection-message[b-rq7wrt18ns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-selection-message .material-icons[b-rq7wrt18ns] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-rq7wrt18ns]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-rq7wrt18ns]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-rq7wrt18ns]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-rq7wrt18ns]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-rq7wrt18ns]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-rq7wrt18ns]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-rq7wrt18ns]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-rq7wrt18ns]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomNotificationEffectiveDatesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-3t393ahkcn] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-3t393ahkcn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-3t393ahkcn] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.toolbar-title[b-3t393ahkcn] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-3t393ahkcn] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.toolbar-btn[b-3t393ahkcn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-3t393ahkcn] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-3t393ahkcn] {
            color: white;
        }

    .toolbar-btn .material-icons[b-3t393ahkcn] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.back-btn[b-3t393ahkcn] {
    background: white;
    border: 1px solid #ccc;
}

    .back-btn:hover[b-3t393ahkcn] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-3t393ahkcn] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-3t393ahkcn] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-3t393ahkcn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    user-select: none;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-3t393ahkcn] {
        border-right: none;
    }

/* Grid Body */
.custom-grid-body[b-3t393ahkcn] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-3t393ahkcn] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-3t393ahkcn] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-3t393ahkcn] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-3t393ahkcn] {
            background-color: inherit;
        }

    .data-row.focused[b-3t393ahkcn] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-3t393ahkcn] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

.custom-grid-cell[b-3t393ahkcn] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
    color: #333;
}

    .custom-grid-cell:last-child[b-3t393ahkcn] {
        border-right: none;
    }

.focusable-cell[b-3t393ahkcn] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-3t393ahkcn] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-3t393ahkcn]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.cell-content[b-3t393ahkcn] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
    color: inherit;
}

.role-cell[b-3t393ahkcn] {
    display: flex;
    align-items: center;
}

.role-badge[b-3t393ahkcn] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.focused .role-badge[b-3t393ahkcn] {
    font-weight: 700 !important;
}

/* Grid Footer */
.custom-grid-footer[b-3t393ahkcn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-3t393ahkcn] {
    display: flex;
    gap: 12px;
    color: #666;
}

/* Loading & No Data */
.loading-overlay[b-3t393ahkcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-3t393ahkcn] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-3t393ahkcn 1s linear infinite;
}

@keyframes spin-b-3t393ahkcn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-3t393ahkcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-3t393ahkcn] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-3t393ahkcn]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-3t393ahkcn]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-3t393ahkcn]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-3t393ahkcn]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-3t393ahkcn] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-3t393ahkcn] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-3t393ahkcn] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-3t393ahkcn] {
        background-color: #FFF9F5 !important;
    }

.focusable-cell[data-col]:not(.role-cell):focus[b-3t393ahkcn]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col]:not(.role-cell):focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.disabled-cell[b-3t393ahkcn] {
    opacity: 0.5;
    cursor: not-allowed !important;
}

    .disabled-cell .cell-content[b-3t393ahkcn] {
        color: #999 !important;
    }

    /* Add after the existing .disabled-cell rule */

    .disabled-cell:hover[b-3t393ahkcn]::after {
        content: 'Disabled (Relative date type)';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #666;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .disabled-cell:hover[b-3t393ahkcn]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #666;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

/* Tooltip for Notification Type (col 0) */
.role-cell.focusable-cell[data-col="0"]:focus[b-3t393ahkcn]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell[data-col="0"]:focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Notification Begin Date (col 1) */
.focusable-cell[data-col="1"]:not(.role-cell):focus[b-3t393ahkcn]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Notification End Date (col 2) */
.focusable-cell[data-col="2"]:not(.role-cell):focus[b-3t393ahkcn]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.role-cell):focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Effective Type (col 3) */
.role-cell.focusable-cell[data-col="3"]:focus[b-3t393ahkcn]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell[data-col="3"]:focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Effective Begin Date (col 4) */
.focusable-cell[data-col="4"]:not(.role-cell):focus[b-3t393ahkcn]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.role-cell):focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Effective End Date (col 5) */
.focusable-cell[data-col="5"]:not(.role-cell):focus[b-3t393ahkcn]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"]:not(.role-cell):focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for date edit cells - centered by default */
.custom-grid-container[data-grid-name="notification-effective-dates"] .focusable-cell:not(.role-cell):focus[b-3t393ahkcn]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .focusable-cell:not(.role-cell):focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Notification Type (data-col="0") - LEFT JUSTIFIED */
.custom-grid-container[data-grid-name="notification-effective-dates"] .focusable-cell.role-cell[data-col="0"]:focus[b-3t393ahkcn]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .focusable-cell.role-cell[data-col="0"]:focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Effective Type - CENTERED (always) */
.custom-grid-container[data-grid-name="notification-effective-dates"] .focusable-cell.role-cell:not([data-col="0"]):focus[b-3t393ahkcn]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .focusable-cell.role-cell:not([data-col="0"]):focus[b-3t393ahkcn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Last visible column gets RIGHT JUSTIFIED tooltip */
/* We use :last-child selector to target the last visible column */
.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row > .focusable-cell:last-child:not(.role-cell):focus[b-3t393ahkcn]::after {
    left: auto;
    right: 0;
    transform: none;
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row > .focusable-cell:last-child:not(.role-cell):focus[b-3t393ahkcn]::before {
    left: auto;
    right: 10px;
    transform: none;
}

/* Position tooltip above for first row - date cells */
.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row:first-child .focusable-cell:not(.role-cell):focus[b-3t393ahkcn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row:first-child .focusable-cell:not(.role-cell):focus[b-3t393ahkcn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Position tooltip above for first row - type cells */
.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row:first-child .focusable-cell.role-cell:focus[b-3t393ahkcn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row:first-child .focusable-cell.role-cell:focus[b-3t393ahkcn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Input field styling */
.custom-grid-container[data-grid-name="notification-effective-dates"] .inline-edit-input[b-3t393ahkcn] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .inline-edit-input:focus[b-3t393ahkcn] {
    outline: none;
    border-color: #E36F26;
    box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
}

/* Editing row highlight */
.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row.editing[b-3t393ahkcn] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

.custom-grid-container[data-grid-name="notification-effective-dates"] .data-row.editing .custom-grid-cell[b-3t393ahkcn] {
    background-color: #FFF9F5 !important;
}
/* /Components/CustomNotificationsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-4rrn6x8rjn] {
    display: flex;
    flex-direction: column;
    height: 400px;
    max-height: 500px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-4rrn6x8rjn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-4rrn6x8rjn] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
}

.toolbar-right[b-4rrn6x8rjn] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-radio-group[b-4rrn6x8rjn] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.radio-label[b-4rrn6x8rjn] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    user-select: none;
}

    .radio-label span[b-4rrn6x8rjn] {
        color: #333;
        font-weight: 600;
    }

    .radio-label input[type="radio"][b-4rrn6x8rjn] {
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #E36F26;
    }

    .radio-label:hover[b-4rrn6x8rjn] {
        color: #E36F26;
    }

        .radio-label:hover span[b-4rrn6x8rjn] {
            color: #E36F26;
        }

.toolbar-btn[b-4rrn6x8rjn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

    .toolbar-btn:hover:not(:disabled)[b-4rrn6x8rjn] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover:not(:disabled) .material-icons[b-4rrn6x8rjn] {
            color: white;
        }

    .toolbar-btn:disabled[b-4rrn6x8rjn] {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f5f5f5;
    }

    .toolbar-btn .material-icons[b-4rrn6x8rjn] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.refresh-btn[b-4rrn6x8rjn] {
    padding: 6px 8px;
    min-width: auto;
}

    .refresh-btn .material-icons[b-4rrn6x8rjn] {
        font-size: 20px;
    }

.mark-read-btn[b-4rrn6x8rjn] {
    min-width: 120px;
}

/* Notifications Header */
.notifications-header[b-4rrn6x8rjn] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
    margin-left: 4px;
}

/* Grid Header */
.custom-grid-header[b-4rrn6x8rjn] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-4rrn6x8rjn] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-4rrn6x8rjn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-4rrn6x8rjn] {
        border-right: none;
    }

    .header-cell:hover[b-4rrn6x8rjn] {
        background: #e8e8e8;
    }

.checkbox-cell[b-4rrn6x8rjn] {
    justify-content: center;
    cursor: default;
}

    .checkbox-cell:hover[b-4rrn6x8rjn] {
        background: #f5f5f5;
    }

        /* Hide row tooltip when hovering over checkbox */
        .checkbox-cell:hover ~ *[b-4rrn6x8rjn] {
            pointer-events: none;
        }

    .checkbox-cell input[type="checkbox"][b-4rrn6x8rjn] {
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #E36F26;
    }

.sort-icon[b-4rrn6x8rjn] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-4rrn6x8rjn] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-4rrn6x8rjn] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-4rrn6x8rjn] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-4rrn6x8rjn] {
        background-color: white;
    }

    .data-row.odd-row[b-4rrn6x8rjn] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-4rrn6x8rjn] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-4rrn6x8rjn] {
            font-weight: 700 !important;
        }

    .data-row.focused[b-4rrn6x8rjn] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
    }

    /* Hide row tooltip when hovering over checkbox cell */
    .data-row:has(.checkbox-cell:hover)[b-4rrn6x8rjn]::after {
        display: none;
    }

.custom-grid-cell[b-4rrn6x8rjn] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
    color: #333;
    background: transparent;
}

    .custom-grid-cell:last-child[b-4rrn6x8rjn] {
        border-right: none;
    }

.cell-content[b-4rrn6x8rjn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

/* Tooltip on entire row */
.data-row[b-4rrn6x8rjn]::after {
    content: "Click to navigate to item";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-4rrn6x8rjn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-4rrn6x8rjn]::after {
    opacity: 1;
}

/* Grid Footer */
.custom-grid-footer[b-4rrn6x8rjn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-4rrn6x8rjn] {
    display: flex;
    gap: 12px;
    color: #666;
    font-weight: 600;
}

.selected-indicator[b-4rrn6x8rjn] {
    color: #E36F26;
    font-weight: 700;
}

.focused-indicator[b-4rrn6x8rjn] {
    color: #E36F26;
    font-weight: 700;
}

/* Loading & No Data */
.loading-overlay[b-4rrn6x8rjn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-4rrn6x8rjn] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-4rrn6x8rjn 1s linear infinite;
}

@keyframes spin-b-4rrn6x8rjn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-4rrn6x8rjn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-4rrn6x8rjn] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    .no-data-message p[b-4rrn6x8rjn] {
        font-size: 14px;
        font-weight: 600;
    }

/* Scrollbar Styling */
.custom-grid-body[b-4rrn6x8rjn]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-4rrn6x8rjn]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-4rrn6x8rjn]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-4rrn6x8rjn]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-4rrn6x8rjn] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-4rrn6x8rjn] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-4rrn6x8rjn]::after {
            content: 'Click or space / enter to navigate to item';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-4rrn6x8rjn]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row.first-row .focusable-cell:focus[b-4rrn6x8rjn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-4rrn6x8rjn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomOrganizationAssetsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-nqhpqrfzkp] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-nqhpqrfzkp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-nqhpqrfzkp] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-nqhpqrfzkp] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-nqhpqrfzkp] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-nqhpqrfzkp] {
            color: white;
        }

    .toolbar-btn .material-icons[b-nqhpqrfzkp] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-nqhpqrfzkp] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-nqhpqrfzkp] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-nqhpqrfzkp] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-nqhpqrfzkp]::placeholder {
        color: #999;
    }

.clear-icon[b-nqhpqrfzkp] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-nqhpqrfzkp] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-nqhpqrfzkp] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-nqhpqrfzkp] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-nqhpqrfzkp] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-nqhpqrfzkp] {
        border-right: none;
    }

    .header-cell:hover[b-nqhpqrfzkp] {
        background: #e8e8e8;
    }

.actions-header[b-nqhpqrfzkp] {
    cursor: default !important;
    justify-content: center;
}

    .actions-header:hover[b-nqhpqrfzkp] {
        background: #f5f5f5 !important;
    }

.sort-icon[b-nqhpqrfzkp] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-nqhpqrfzkp] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-nqhpqrfzkp] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-nqhpqrfzkp] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-nqhpqrfzkp] {
        background-color: white;
    }

    .data-row.odd-row[b-nqhpqrfzkp] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-nqhpqrfzkp] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-nqhpqrfzkp] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-nqhpqrfzkp] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-nqhpqrfzkp] {
        border-right: none;
    }

.actions-cell[b-nqhpqrfzkp] {
    justify-content: center;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.action-btn[b-nqhpqrfzkp] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-nqhpqrfzkp] {
        font-size: 16px;
    }

.delete-btn[b-nqhpqrfzkp] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-nqhpqrfzkp] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-nqhpqrfzkp] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-nqhpqrfzkp]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-nqhpqrfzkp]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-nqhpqrfzkp]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-nqhpqrfzkp]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-nqhpqrfzkp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Footer */
.custom-grid-footer[b-nqhpqrfzkp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-nqhpqrfzkp] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-nqhpqrfzkp] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-nqhpqrfzkp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-nqhpqrfzkp] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-nqhpqrfzkp 1s linear infinite;
}

@keyframes spin-b-nqhpqrfzkp {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-nqhpqrfzkp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-nqhpqrfzkp] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-nqhpqrfzkp]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-nqhpqrfzkp]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-nqhpqrfzkp]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-nqhpqrfzkp]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.data-row[b-nqhpqrfzkp]::after {
    content: "Click to navigate to asset";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-nqhpqrfzkp]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-nqhpqrfzkp]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-nqhpqrfzkp] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-nqhpqrfzkp] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* First column (col 0) - left justified tooltip */
    .focusable-cell[data-col="0"]:focus[b-nqhpqrfzkp]::after {
        content: 'Click or space / enter to navigate to asset';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"]:focus[b-nqhpqrfzkp]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Columns 1-5 - centered tooltip */
    .focusable-cell[data-col="1"]:focus[b-nqhpqrfzkp]::after,
    .focusable-cell[data-col="2"]:focus[b-nqhpqrfzkp]::after,
    .focusable-cell[data-col="3"]:focus[b-nqhpqrfzkp]::after,
    .focusable-cell[data-col="4"]:focus[b-nqhpqrfzkp]::after,
    .focusable-cell[data-col="5"]:focus[b-nqhpqrfzkp]::after {
        content: 'Click or space / enter to navigate to asset';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="1"]:focus[b-nqhpqrfzkp]::before,
    .focusable-cell[data-col="2"]:focus[b-nqhpqrfzkp]::before,
    .focusable-cell[data-col="3"]:focus[b-nqhpqrfzkp]::before,
    .focusable-cell[data-col="4"]:focus[b-nqhpqrfzkp]::before,
    .focusable-cell[data-col="5"]:focus[b-nqhpqrfzkp]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Column 6 (Actions) - right justified tooltip */
    .focusable-cell[data-col="6"]:focus[b-nqhpqrfzkp]::after {
        content: 'Click or space / enter to delete';
        position: absolute;
        bottom: 100%;
        right: 0;
        left: auto;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="6"]:focus[b-nqhpqrfzkp]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: auto;
        right: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

/* First row - tooltips below the cell */
.data-row.first-row .focusable-cell[data-col="0"]:focus[b-nqhpqrfzkp]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="0"]:focus[b-nqhpqrfzkp]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-nqhpqrfzkp]::after,
.data-row.first-row .focusable-cell[data-col="2"]:focus[b-nqhpqrfzkp]::after,
.data-row.first-row .focusable-cell[data-col="3"]:focus[b-nqhpqrfzkp]::after,
.data-row.first-row .focusable-cell[data-col="4"]:focus[b-nqhpqrfzkp]::after,
.data-row.first-row .focusable-cell[data-col="5"]:focus[b-nqhpqrfzkp]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-nqhpqrfzkp]::before,
.data-row.first-row .focusable-cell[data-col="2"]:focus[b-nqhpqrfzkp]::before,
.data-row.first-row .focusable-cell[data-col="3"]:focus[b-nqhpqrfzkp]::before,
.data-row.first-row .focusable-cell[data-col="4"]:focus[b-nqhpqrfzkp]::before,
.data-row.first-row .focusable-cell[data-col="5"]:focus[b-nqhpqrfzkp]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="6"]:focus[b-nqhpqrfzkp]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="6"]:focus[b-nqhpqrfzkp]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomOrganizationDocumentsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-ngjljcww99] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-ngjljcww99] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-ngjljcww99] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-ngjljcww99] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-ngjljcww99] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-ngjljcww99] {
            color: white;
        }

    .toolbar-btn .material-icons[b-ngjljcww99] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-ngjljcww99] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-ngjljcww99] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-ngjljcww99] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-ngjljcww99]::placeholder {
        color: #999;
    }

.clear-icon[b-ngjljcww99] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-ngjljcww99] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-ngjljcww99] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-ngjljcww99] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-ngjljcww99] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-ngjljcww99] {
        border-right: none;
    }

    .header-cell:hover[b-ngjljcww99] {
        background: #e8e8e8;
    }

.sort-icon[b-ngjljcww99] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-ngjljcww99] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-ngjljcww99] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-ngjljcww99] {
    cursor: default;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-ngjljcww99] {
        background-color: white;
    }

    .data-row.odd-row[b-ngjljcww99] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-ngjljcww99] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-ngjljcww99] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-ngjljcww99] {
    padding: 4px 6px;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: hidden;
    min-width: 0;
    min-height: 30px;
}

    .custom-grid-cell:last-child[b-ngjljcww99] {
        border-right: none;
    }

/* Cell content - WRAPPING ENABLED */
.cell-content[b-ngjljcww99] {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* File link button styling - with wrapping */
.file-link-button[b-ngjljcww99] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    max-width: 100%;
    transition: color 0.2s;
}

    .file-link-button:hover[b-ngjljcww99] {
        color: #E36F26;
        font-weight: 700;
    }

    .file-link-button:focus[b-ngjljcww99] {
        outline: none;
        color: #E36F26;
    }

.no-file[b-ngjljcww99] {
    color: #999;
    font-style: italic;
}

/* Grid Footer */
.custom-grid-footer[b-ngjljcww99] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-ngjljcww99] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-ngjljcww99] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-ngjljcww99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-ngjljcww99] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-ngjljcww99 1s linear infinite;
}

@keyframes spin-b-ngjljcww99 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-ngjljcww99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-ngjljcww99] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-ngjljcww99]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-ngjljcww99]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-ngjljcww99]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-ngjljcww99]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip - Read-only */
.data-row[b-ngjljcww99]::after {
    content: "Read-only";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-ngjljcww99]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-ngjljcww99]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-ngjljcww99] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-ngjljcww99] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-ngjljcww99]::after {
            content: 'Read-only';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-ngjljcww99]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

/* File cell focus - different tooltip */
.file-cell:focus[b-ngjljcww99]::after {
    content: 'Press Enter or Space to open file';
}

.data-row.first-row .focusable-cell:focus[b-ngjljcww99]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-ngjljcww99]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Include Inactive Checkbox */
.checkbox-label[b-ngjljcww99] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    transition: all 0.2s;
}

    .checkbox-label:hover[b-ngjljcww99] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .checkbox-label input[type="checkbox"][b-ngjljcww99] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #E36F26;
        margin: 0;
    }

    .checkbox-label:hover input[type="checkbox"][b-ngjljcww99] {
        accent-color: white;
    }
/* /Components/CustomOrganizationPermissionsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-luqzpodpoq] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-luqzpodpoq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-luqzpodpoq] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-luqzpodpoq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-luqzpodpoq] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-luqzpodpoq] {
            color: white;
        }

    .toolbar-btn .material-icons[b-luqzpodpoq] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-luqzpodpoq] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 350px;
    height: 38px;
}

.search-icon[b-luqzpodpoq] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-luqzpodpoq] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-luqzpodpoq]::placeholder {
        color: #999;
    }

.clear-icon[b-luqzpodpoq] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-luqzpodpoq] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-luqzpodpoq] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-luqzpodpoq] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-luqzpodpoq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-luqzpodpoq] {
        border-right: none;
    }

    .header-cell:hover[b-luqzpodpoq] {
        background: #e8e8e8;
    }

.sort-icon[b-luqzpodpoq] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-luqzpodpoq] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-luqzpodpoq] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-luqzpodpoq] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-luqzpodpoq] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-luqzpodpoq] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-luqzpodpoq] {
        background-color: white;
    }

    .data-row.odd-row[b-luqzpodpoq] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-luqzpodpoq] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-luqzpodpoq] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-luqzpodpoq] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-luqzpodpoq] {
                color: white !important;
            }

    .data-row.selected[b-luqzpodpoq] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-luqzpodpoq] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-luqzpodpoq] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-luqzpodpoq] {
                color: white !important;
            }

.custom-grid-cell[b-luqzpodpoq] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-luqzpodpoq] {
        border-right: none;
    }

.focusable-cell[b-luqzpodpoq] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-luqzpodpoq] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.clients-cell):not(.projects-cell):not(.assets-cell):not(.schedules-cell):not(.actions-cell):focus[b-luqzpodpoq]::after,
    .focusable-cell:not(.role-cell):not(.clients-cell):not(.projects-cell):not(.assets-cell):not(.schedules-cell):not(.actions-cell):focus[b-luqzpodpoq]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.clients-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view clients';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.clients-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .clients-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .clients-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.projects-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view projects';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.projects-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .projects-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .projects-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.assets-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view assets';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.assets-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .assets-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .assets-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.schedules-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view schedules';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.schedules-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .schedules-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .schedules-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-luqzpodpoq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-luqzpodpoq] {
    display: flex;
    align-items: center;
}

.role-badge[b-luqzpodpoq] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.role-badge:hover[b-luqzpodpoq]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-badge:hover[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-badge:hover[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-badge:hover[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.clients-cell[b-luqzpodpoq] {
    display: flex;
    align-items: center;
}

.clients-link[b-luqzpodpoq] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .clients-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.data-row.focused .clients-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.clients-link:hover[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view clients';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.clients-link:hover[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .clients-link:hover[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .clients-link:hover[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.projects-cell[b-luqzpodpoq] {
    display: flex;
    align-items: center;
}

.projects-link[b-luqzpodpoq] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .projects-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.data-row.focused .projects-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.projects-link:hover[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view projects';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.projects-link:hover[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .projects-link:hover[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .projects-link:hover[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.assets-cell[b-luqzpodpoq] {
    display: flex;
    align-items: center;
}

.assets-link[b-luqzpodpoq] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .assets-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.data-row.focused .assets-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.assets-link:hover[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view assets';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.assets-link:hover[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .assets-link:hover[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .assets-link:hover[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.schedules-cell[b-luqzpodpoq] {
    display: flex;
    align-items: center;
}

.schedules-link[b-luqzpodpoq] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .schedules-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.data-row.focused .schedules-link[b-luqzpodpoq] {
    font-weight: 700 !important;
}

.schedules-link:hover[b-luqzpodpoq]::after {
    content: 'Click or space / enter to view schedules';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.schedules-link:hover[b-luqzpodpoq]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .schedules-link:hover[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .schedules-link:hover[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell[b-luqzpodpoq] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-luqzpodpoq] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-luqzpodpoq] {
        font-size: 16px;
    }

.delete-btn[b-luqzpodpoq] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-luqzpodpoq] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-luqzpodpoq] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-luqzpodpoq]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-luqzpodpoq]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-luqzpodpoq]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-luqzpodpoq]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-luqzpodpoq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-luqzpodpoq] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-luqzpodpoq] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-luqzpodpoq] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-luqzpodpoq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-luqzpodpoq] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-luqzpodpoq] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-luqzpodpoq] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-luqzpodpoq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-luqzpodpoq] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-luqzpodpoq 1s linear infinite;
}

@keyframes spin-b-luqzpodpoq {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-luqzpodpoq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-luqzpodpoq] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-luqzpodpoq]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-luqzpodpoq]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-luqzpodpoq]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-luqzpodpoq]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomOrganizationPermissionSourcesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-s8enmgvskm] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-s8enmgvskm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-s8enmgvskm] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-s8enmgvskm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-s8enmgvskm] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-s8enmgvskm] {
            color: white;
        }

    .toolbar-btn .material-icons[b-s8enmgvskm] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-s8enmgvskm] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 350px;
    height: 38px;
}

.search-icon[b-s8enmgvskm] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-s8enmgvskm] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-s8enmgvskm]::placeholder {
        color: #999;
    }

.clear-icon[b-s8enmgvskm] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-s8enmgvskm] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-s8enmgvskm] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-s8enmgvskm] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-s8enmgvskm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-s8enmgvskm] {
        border-right: none;
    }

    .header-cell:hover[b-s8enmgvskm] {
        background: #e8e8e8;
    }

.sort-icon[b-s8enmgvskm] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-s8enmgvskm] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-s8enmgvskm] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-s8enmgvskm] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-s8enmgvskm] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-s8enmgvskm] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-s8enmgvskm] {
        background-color: white;
    }

    .data-row.odd-row[b-s8enmgvskm] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-s8enmgvskm] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-s8enmgvskm] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-s8enmgvskm] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-s8enmgvskm] {
                color: white !important;
            }

    .data-row.selected[b-s8enmgvskm] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-s8enmgvskm] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-s8enmgvskm] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-s8enmgvskm] {
                color: white !important;
            }

.custom-grid-cell[b-s8enmgvskm] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-s8enmgvskm] {
        border-right: none;
    }

.focusable-cell[b-s8enmgvskm] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-s8enmgvskm] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

/* Source Name Cell Tooltip (data-col="0") - Read-only */
.source-cell.focusable-cell:focus[b-s8enmgvskm]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.source-cell.focusable-cell:focus[b-s8enmgvskm]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .source-cell.focusable-cell:focus[b-s8enmgvskm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .source-cell.focusable-cell:focus[b-s8enmgvskm]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Role Cell Tooltip (data-col="1") */
.role-cell.focusable-cell:focus[b-s8enmgvskm]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-s8enmgvskm]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-s8enmgvskm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-s8enmgvskm]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Delete Button Tooltip (data-col="2") */
.actions-cell.focusable-cell:focus[b-s8enmgvskm]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-s8enmgvskm]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-s8enmgvskm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-s8enmgvskm]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-s8enmgvskm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Read-only cells */
.readonly-cell[b-s8enmgvskm] {
    cursor: default;
}

.readonly-text[b-s8enmgvskm] {
    color: #666;
    font-size: 12px;
}

.data-row.selected .readonly-text[b-s8enmgvskm],
.data-row.focused .readonly-text[b-s8enmgvskm] {
    font-weight: 700 !important;
    color: #333 !important;
}

/* Role Cell */
.role-cell[b-s8enmgvskm] {
    display: flex;
    align-items: center;
}

.role-badge[b-s8enmgvskm] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-s8enmgvskm] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-s8enmgvskm] {
    font-weight: 700 !important;
}

.role-badge:hover[b-s8enmgvskm]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-badge:hover[b-s8enmgvskm]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-badge:hover[b-s8enmgvskm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-badge:hover[b-s8enmgvskm]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell[b-s8enmgvskm] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-s8enmgvskm] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-s8enmgvskm] {
        font-size: 16px;
    }

.delete-btn[b-s8enmgvskm] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-s8enmgvskm] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-s8enmgvskm] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-s8enmgvskm]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-s8enmgvskm]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-s8enmgvskm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-s8enmgvskm]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-s8enmgvskm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-s8enmgvskm] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-s8enmgvskm] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-s8enmgvskm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-s8enmgvskm] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-s8enmgvskm 1s linear infinite;
}

@keyframes spin-b-s8enmgvskm {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-s8enmgvskm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-s8enmgvskm] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-s8enmgvskm]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-s8enmgvskm]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-s8enmgvskm]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-s8enmgvskm]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.bulk-operations-menu[b-s8enmgvskm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-op-btn[b-s8enmgvskm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.bulk-op-btn:hover:not(:disabled)[b-s8enmgvskm] {
    background: #E36F26;
    color: white;
    border-color: #E36F26;
}

.bulk-op-btn:hover:not(:disabled) .material-icons[b-s8enmgvskm] {
    color: white;
}

.bulk-op-btn:disabled[b-s8enmgvskm] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

.bulk-op-btn .material-icons[b-s8enmgvskm] {
    font-size: 18px;
}
/* /Components/CustomOrganizationProjectsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-ie4fug2r0g] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-ie4fug2r0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-ie4fug2r0g] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-ie4fug2r0g] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-ie4fug2r0g] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-ie4fug2r0g] {
            color: white;
        }

    .toolbar-btn .material-icons[b-ie4fug2r0g] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-ie4fug2r0g] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-ie4fug2r0g] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-ie4fug2r0g] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-ie4fug2r0g]::placeholder {
        color: #999;
    }

.clear-icon[b-ie4fug2r0g] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-ie4fug2r0g] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-ie4fug2r0g] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-ie4fug2r0g] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-ie4fug2r0g] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-ie4fug2r0g] {
        border-right: none;
    }

    .header-cell:hover[b-ie4fug2r0g] {
        background: #e8e8e8;
    }

.actions-header[b-ie4fug2r0g] {
    cursor: default !important;
    justify-content: center;
}

    .actions-header:hover[b-ie4fug2r0g] {
        background: #f5f5f5 !important;
    }

.sort-icon[b-ie4fug2r0g] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-ie4fug2r0g] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-ie4fug2r0g] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-ie4fug2r0g] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-ie4fug2r0g] {
        background-color: white;
    }

    .data-row.odd-row[b-ie4fug2r0g] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-ie4fug2r0g] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-ie4fug2r0g] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-ie4fug2r0g] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-ie4fug2r0g] {
        border-right: none;
    }

.actions-cell[b-ie4fug2r0g] {
    justify-content: center;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.action-btn[b-ie4fug2r0g] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-ie4fug2r0g] {
        font-size: 16px;
    }

.delete-btn[b-ie4fug2r0g] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-ie4fug2r0g] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-ie4fug2r0g] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-ie4fug2r0g]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-ie4fug2r0g]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-ie4fug2r0g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-ie4fug2r0g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-ie4fug2r0g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Footer */
.custom-grid-footer[b-ie4fug2r0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-ie4fug2r0g] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-ie4fug2r0g] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-ie4fug2r0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-ie4fug2r0g] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-ie4fug2r0g 1s linear infinite;
}

@keyframes spin-b-ie4fug2r0g {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-ie4fug2r0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-ie4fug2r0g] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-ie4fug2r0g]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-ie4fug2r0g]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-ie4fug2r0g]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-ie4fug2r0g]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.data-row[b-ie4fug2r0g]::after {
    content: "Click to navigate to project";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-ie4fug2r0g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-ie4fug2r0g]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-ie4fug2r0g] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-ie4fug2r0g] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* First column (col 0) - left justified tooltip */
    .focusable-cell[data-col="0"]:focus[b-ie4fug2r0g]::after {
        content: 'Click or space / enter to navigate to project';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"]:focus[b-ie4fug2r0g]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Columns 1-4 - centered tooltip */
    .focusable-cell[data-col="1"]:focus[b-ie4fug2r0g]::after,
    .focusable-cell[data-col="2"]:focus[b-ie4fug2r0g]::after,
    .focusable-cell[data-col="3"]:focus[b-ie4fug2r0g]::after,
    .focusable-cell[data-col="4"]:focus[b-ie4fug2r0g]::after {
        content: 'Click or space / enter to navigate to project';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="1"]:focus[b-ie4fug2r0g]::before,
    .focusable-cell[data-col="2"]:focus[b-ie4fug2r0g]::before,
    .focusable-cell[data-col="3"]:focus[b-ie4fug2r0g]::before,
    .focusable-cell[data-col="4"]:focus[b-ie4fug2r0g]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Column 5 (Actions) - right justified tooltip */
    .focusable-cell[data-col="5"]:focus[b-ie4fug2r0g]::after {
        content: 'Click or space / enter to delete';
        position: absolute;
        bottom: 100%;
        right: 0;
        left: auto;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="5"]:focus[b-ie4fug2r0g]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: auto;
        right: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

/* First row - tooltips below the cell */
.data-row.first-row .focusable-cell[data-col="0"]:focus[b-ie4fug2r0g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="0"]:focus[b-ie4fug2r0g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-ie4fug2r0g]::after,
.data-row.first-row .focusable-cell[data-col="2"]:focus[b-ie4fug2r0g]::after,
.data-row.first-row .focusable-cell[data-col="3"]:focus[b-ie4fug2r0g]::after,
.data-row.first-row .focusable-cell[data-col="4"]:focus[b-ie4fug2r0g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-ie4fug2r0g]::before,
.data-row.first-row .focusable-cell[data-col="2"]:focus[b-ie4fug2r0g]::before,
.data-row.first-row .focusable-cell[data-col="3"]:focus[b-ie4fug2r0g]::before,
.data-row.first-row .focusable-cell[data-col="4"]:focus[b-ie4fug2r0g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="5"]:focus[b-ie4fug2r0g]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="5"]:focus[b-ie4fug2r0g]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomOrganizationRecordsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-5seqkiqjxx] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-5seqkiqjxx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-5seqkiqjxx] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-5seqkiqjxx] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-5seqkiqjxx] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-5seqkiqjxx] {
            color: white;
        }

    .toolbar-btn .material-icons[b-5seqkiqjxx] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-5seqkiqjxx] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-5seqkiqjxx] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-5seqkiqjxx] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-5seqkiqjxx]::placeholder {
        color: #999;
    }

.clear-icon[b-5seqkiqjxx] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-5seqkiqjxx] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-5seqkiqjxx] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-5seqkiqjxx] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-5seqkiqjxx] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-5seqkiqjxx] {
        border-right: none;
    }

    .header-cell:hover[b-5seqkiqjxx] {
        background: #e8e8e8;
    }

.sort-icon[b-5seqkiqjxx] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-5seqkiqjxx] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-5seqkiqjxx] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 30px;
}

.data-row[b-5seqkiqjxx] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-5seqkiqjxx] {
        background-color: white;
    }

    .data-row.odd-row[b-5seqkiqjxx] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-5seqkiqjxx] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-5seqkiqjxx] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-5seqkiqjxx] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-5seqkiqjxx] {
        border-right: none;
    }

.cell-content[b-5seqkiqjxx] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Grid Footer */
.custom-grid-footer[b-5seqkiqjxx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-5seqkiqjxx] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-5seqkiqjxx] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-5seqkiqjxx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-5seqkiqjxx] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-5seqkiqjxx 1s linear infinite;
}

@keyframes spin-b-5seqkiqjxx {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-5seqkiqjxx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-5seqkiqjxx] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-5seqkiqjxx]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-5seqkiqjxx]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-5seqkiqjxx]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-5seqkiqjxx]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.data-row[b-5seqkiqjxx]::after {
    content: "Click to navigate to record";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-5seqkiqjxx]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-5seqkiqjxx]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-5seqkiqjxx] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-5seqkiqjxx] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* First column (col 0) - left justified tooltip */
    .focusable-cell[data-col="0"]:focus[b-5seqkiqjxx]::after {
        content: 'Click or space / enter to navigate to record';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"]:focus[b-5seqkiqjxx]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Middle columns (col 1-7) - centered tooltip */
    .focusable-cell[data-col="1"]:focus[b-5seqkiqjxx]::after,
    .focusable-cell[data-col="2"]:focus[b-5seqkiqjxx]::after,
    .focusable-cell[data-col="3"]:focus[b-5seqkiqjxx]::after,
    .focusable-cell[data-col="4"]:focus[b-5seqkiqjxx]::after,
    .focusable-cell[data-col="5"]:focus[b-5seqkiqjxx]::after,
    .focusable-cell[data-col="6"]:focus[b-5seqkiqjxx]::after,
    .focusable-cell[data-col="7"]:focus[b-5seqkiqjxx]::after {
        content: 'Click or space / enter to navigate to record';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="1"]:focus[b-5seqkiqjxx]::before,
    .focusable-cell[data-col="2"]:focus[b-5seqkiqjxx]::before,
    .focusable-cell[data-col="3"]:focus[b-5seqkiqjxx]::before,
    .focusable-cell[data-col="4"]:focus[b-5seqkiqjxx]::before,
    .focusable-cell[data-col="5"]:focus[b-5seqkiqjxx]::before,
    .focusable-cell[data-col="6"]:focus[b-5seqkiqjxx]::before,
    .focusable-cell[data-col="7"]:focus[b-5seqkiqjxx]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Last column (col 8) - right justified tooltip */
    .focusable-cell[data-col="8"]:focus[b-5seqkiqjxx]::after {
        content: 'Click or space / enter to navigate to record';
        position: absolute;
        bottom: 100%;
        right: 0;
        left: auto;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="8"]:focus[b-5seqkiqjxx]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 10px;
        left: auto;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

/* First row - tooltips below the cell */
.data-row.first-row .focusable-cell[data-col="0"]:focus[b-5seqkiqjxx]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="0"]:focus[b-5seqkiqjxx]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-5seqkiqjxx]::after,
.data-row.first-row .focusable-cell[data-col="2"]:focus[b-5seqkiqjxx]::after,
.data-row.first-row .focusable-cell[data-col="3"]:focus[b-5seqkiqjxx]::after,
.data-row.first-row .focusable-cell[data-col="4"]:focus[b-5seqkiqjxx]::after,
.data-row.first-row .focusable-cell[data-col="5"]:focus[b-5seqkiqjxx]::after,
.data-row.first-row .focusable-cell[data-col="6"]:focus[b-5seqkiqjxx]::after,
.data-row.first-row .focusable-cell[data-col="7"]:focus[b-5seqkiqjxx]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-5seqkiqjxx]::before,
.data-row.first-row .focusable-cell[data-col="2"]:focus[b-5seqkiqjxx]::before,
.data-row.first-row .focusable-cell[data-col="3"]:focus[b-5seqkiqjxx]::before,
.data-row.first-row .focusable-cell[data-col="4"]:focus[b-5seqkiqjxx]::before,
.data-row.first-row .focusable-cell[data-col="5"]:focus[b-5seqkiqjxx]::before,
.data-row.first-row .focusable-cell[data-col="6"]:focus[b-5seqkiqjxx]::before,
.data-row.first-row .focusable-cell[data-col="7"]:focus[b-5seqkiqjxx]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="8"]:focus[b-5seqkiqjxx]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="8"]:focus[b-5seqkiqjxx]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Include Inactive Checkbox */
.checkbox-label[b-5seqkiqjxx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    transition: all 0.2s;
}

    .checkbox-label:hover[b-5seqkiqjxx] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .checkbox-label input[type="checkbox"][b-5seqkiqjxx] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #E36F26;
        margin: 0;
    }

    .checkbox-label:hover input[type="checkbox"][b-5seqkiqjxx] {
        accent-color: white;
    }
/* /Components/CustomOrganizationsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-6q5n2673ne] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-6q5n2673ne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-6q5n2673ne] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-6q5n2673ne] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-6q5n2673ne] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-6q5n2673ne] {
            color: white;
        }

    .toolbar-btn .material-icons[b-6q5n2673ne] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-6q5n2673ne] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-6q5n2673ne] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-6q5n2673ne] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-6q5n2673ne]::placeholder {
        color: #999;
    }

.clear-icon[b-6q5n2673ne] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-6q5n2673ne] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-6q5n2673ne] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-6q5n2673ne] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-6q5n2673ne] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-6q5n2673ne] {
        border-right: none;
    }

    .header-cell:hover[b-6q5n2673ne] {
        background: #e8e8e8;
    }

.sort-icon[b-6q5n2673ne] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-6q5n2673ne] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-6q5n2673ne] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-6q5n2673ne] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-6q5n2673ne] {
        background-color: white;
    }

    .data-row.odd-row[b-6q5n2673ne] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-6q5n2673ne] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-6q5n2673ne] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-6q5n2673ne] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-6q5n2673ne] {
        border-right: none;
    }

.cell-content[b-6q5n2673ne] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Footer */
.custom-grid-footer[b-6q5n2673ne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-6q5n2673ne] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-6q5n2673ne] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-6q5n2673ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-6q5n2673ne] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-6q5n2673ne 1s linear infinite;
}

@keyframes spin-b-6q5n2673ne {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-6q5n2673ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-6q5n2673ne] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-6q5n2673ne]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-6q5n2673ne]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-6q5n2673ne]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-6q5n2673ne]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.data-row[b-6q5n2673ne]::after {
    content: "Click to navigate to organization";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-6q5n2673ne]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-6q5n2673ne]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-6q5n2673ne] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-6q5n2673ne] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* First column (col 0) - left justified tooltip */
    .focusable-cell[data-col="0"]:focus[b-6q5n2673ne]::after {
        content: 'Click or space / enter to navigate to organization';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"]:focus[b-6q5n2673ne]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Column 1 (Type) - centered tooltip */
    .focusable-cell[data-col="1"]:focus[b-6q5n2673ne]::after {
        content: 'Click or space / enter to navigate to organization';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="1"]:focus[b-6q5n2673ne]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

    /* Column 2 (Role) - right justified tooltip (last column) */
    .focusable-cell[data-col="2"]:focus[b-6q5n2673ne]::after {
        content: 'Click or space / enter to navigate to organization';
        position: absolute;
        bottom: 100%;
        right: 0;
        left: auto;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="2"]:focus[b-6q5n2673ne]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 10px;
        left: auto;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

/* First row - tooltips below the cell */
.data-row.first-row .focusable-cell[data-col="0"]:focus[b-6q5n2673ne]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="0"]:focus[b-6q5n2673ne]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-6q5n2673ne]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="1"]:focus[b-6q5n2673ne]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.first-row .focusable-cell[data-col="2"]:focus[b-6q5n2673ne]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell[data-col="2"]:focus[b-6q5n2673ne]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomPercentRentDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-pwdvjxvy63] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-pwdvjxvy63] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-pwdvjxvy63] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.toolbar-right[b-pwdvjxvy63] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-pwdvjxvy63] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

    .toolbar-btn:hover[b-pwdvjxvy63] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-pwdvjxvy63] {
            color: white;
        }

    .toolbar-btn .material-icons[b-pwdvjxvy63] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-pwdvjxvy63] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-pwdvjxvy63] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.search-box[b-pwdvjxvy63] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-pwdvjxvy63] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-pwdvjxvy63] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-pwdvjxvy63]::placeholder {
        color: #999;
    }

.clear-icon[b-pwdvjxvy63] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-pwdvjxvy63] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-pwdvjxvy63] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-pwdvjxvy63] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-pwdvjxvy63] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-pwdvjxvy63] {
        border-right: none;
    }

    .header-cell:hover[b-pwdvjxvy63] {
        background: #e8e8e8;
    }

.sort-icon[b-pwdvjxvy63] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-pwdvjxvy63] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-pwdvjxvy63] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-pwdvjxvy63] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-pwdvjxvy63] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-pwdvjxvy63] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-pwdvjxvy63] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-pwdvjxvy63] {
            background-color: inherit;
        }

    .data-row.odd-row[b-pwdvjxvy63] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-pwdvjxvy63] {
            background-color: inherit;
        }

    .data-row.focused[b-pwdvjxvy63] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-pwdvjxvy63] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

.custom-grid-cell[b-pwdvjxvy63] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-pwdvjxvy63] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-pwdvjxvy63] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-pwdvjxvy63] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-pwdvjxvy63]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-pwdvjxvy63]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-pwdvjxvy63]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-pwdvjxvy63]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-pwdvjxvy63]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-pwdvjxvy63]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-pwdvjxvy63]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-pwdvjxvy63]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-pwdvjxvy63] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-pwdvjxvy63] {
    display: flex;
    align-items: center;
}

.role-badge[b-pwdvjxvy63] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-pwdvjxvy63] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-pwdvjxvy63] {
    font-weight: 700 !important;
}

.actions-cell[b-pwdvjxvy63] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-pwdvjxvy63] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-pwdvjxvy63] {
        font-size: 16px;
    }

.delete-btn[b-pwdvjxvy63] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-pwdvjxvy63] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-pwdvjxvy63] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-pwdvjxvy63]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-pwdvjxvy63]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-pwdvjxvy63]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-pwdvjxvy63]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-pwdvjxvy63] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-pwdvjxvy63] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-pwdvjxvy63] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-pwdvjxvy63] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-pwdvjxvy63] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-pwdvjxvy63 1s linear infinite;
}

@keyframes spin-b-pwdvjxvy63 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-pwdvjxvy63] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-pwdvjxvy63] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-pwdvjxvy63]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-pwdvjxvy63]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-pwdvjxvy63]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-pwdvjxvy63]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-pwdvjxvy63] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-pwdvjxvy63] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-pwdvjxvy63] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-pwdvjxvy63] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Date column (data-col="0") - Specified only */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Overage column (data-col="1" for Specified) */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Minimum column (data-col="3" for Specified, data-col="2" for Tiered) */
.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after,
.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before,
.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after,
.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before,
.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Maximum column (data-col="4" for Tiered) */
.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-pwdvjxvy63]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Right-align numeric column headers */
.header-cell.area-header[b-pwdvjxvy63] {
    justify-content: flex-end;
}

.dialog-overlay[b-pwdvjxvy63] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.dialog-container[b-pwdvjxvy63] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 400px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-pwdvjxvy63] {
    padding: 1em 1.5em;
    border-bottom: 2px solid #E36F26;
    background: #f9f9f9;
    border-radius: 8px 8px 0 0;
}

    .dialog-header h3[b-pwdvjxvy63] {
        margin: 0;
        color: #E36F26;
        font-size: 18px;
        font-weight: 700;
    }

.dialog-body[b-pwdvjxvy63] {
    padding: 1.5em;
}

.form-group[b-pwdvjxvy63] {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

    .form-group label[b-pwdvjxvy63] {
        font-weight: 600;
        color: #333;
        font-size: 14px;
    }

.form-input[b-pwdvjxvy63] {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

    .form-input:focus[b-pwdvjxvy63] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.2);
    }

.dialog-footer[b-pwdvjxvy63] {
    padding: 1em 1.5em;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.dialog-btn[b-pwdvjxvy63] {
    padding: 0.5em 1.5em;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-btn[b-pwdvjxvy63] {
    background: white;
    color: #666;
    border: 1px solid #ccc;
}

    .cancel-btn:hover[b-pwdvjxvy63] {
        background: #f5f5f5;
        border-color: #999;
    }

.submit-btn[b-pwdvjxvy63] {
    background: #E36F26;
    color: white;
}

    .submit-btn:hover[b-pwdvjxvy63] {
        background: #d5641f;
    }
/* /Components/CustomPercentRentGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-lofjssb72a] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-lofjssb72a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-lofjssb72a] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-lofjssb72a] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-lofjssb72a] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-lofjssb72a] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-lofjssb72a] {
            color: white;
        }

    .toolbar-btn .material-icons[b-lofjssb72a] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-lofjssb72a] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-lofjssb72a] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-lofjssb72a] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-lofjssb72a]::placeholder {
        color: #999;
    }

.clear-icon[b-lofjssb72a] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-lofjssb72a] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-lofjssb72a] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-lofjssb72a] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-lofjssb72a] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-lofjssb72a] {
        border-right: none;
    }

    .header-cell:hover[b-lofjssb72a] {
        background: #e8e8e8;
    }

.sort-icon[b-lofjssb72a] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-lofjssb72a] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-lofjssb72a] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-lofjssb72a] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-lofjssb72a] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-lofjssb72a] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-lofjssb72a] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-lofjssb72a] {
            background-color: inherit;
        }

    .data-row.odd-row[b-lofjssb72a] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-lofjssb72a] {
            background-color: inherit;
        }

    .data-row.focused[b-lofjssb72a] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-lofjssb72a] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-lofjssb72a] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-lofjssb72a] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-lofjssb72a] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-lofjssb72a] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-lofjssb72a] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-lofjssb72a] {
                color: white !important;
            }

.custom-grid-cell[b-lofjssb72a] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-lofjssb72a] {
        border-right: none;
    }

/* Disabled cell styling */
.disabled-cell[b-lofjssb72a] {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-lofjssb72a] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-lofjssb72a] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-lofjssb72a]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-lofjssb72a]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-lofjssb72a] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-lofjssb72a] {
    display: flex;
    align-items: center;
}

.role-badge[b-lofjssb72a] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-lofjssb72a] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-lofjssb72a] {
    font-weight: 700 !important;
}

.actions-cell[b-lofjssb72a] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-lofjssb72a] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.icon-with-badge[b-lofjssb72a] {
    font-size: 20px;
    color: #E36F26 !important;
    transition: color 0.2s ease;
}

.custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-lofjssb72a] {
    color: #E36F26 !important;
}

.data-row.focused .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-lofjssb72a] {
    color: #E36F26 !important;
}

.data-row.selected .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-lofjssb72a] {
    color: #E36F26 !important;
}

.badge[b-lofjssb72a] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-lofjssb72a] {
    color: #333;
    font-weight: 700;
}

.items-btn[b-lofjssb72a] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
}

.data-row.selected .items-btn[b-lofjssb72a] {
    font-weight: 700 !important;
}

.data-row.focused .items-btn[b-lofjssb72a] {
    font-weight: 700 !important;
}

.items-btn:hover[b-lofjssb72a] {
    color: #E36F26 !important;
}

.disabled-btn[b-lofjssb72a] {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

.action-btn[b-lofjssb72a] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-lofjssb72a] {
        font-size: 16px;
    }

.delete-btn[b-lofjssb72a] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-lofjssb72a] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-lofjssb72a] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-lofjssb72a]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-lofjssb72a]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-lofjssb72a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-lofjssb72a] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-lofjssb72a] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-lofjssb72a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-lofjssb72a] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-lofjssb72a 1s linear infinite;
}

@keyframes spin-b-lofjssb72a {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-lofjssb72a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-lofjssb72a] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-lofjssb72a]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-lofjssb72a]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-lofjssb72a]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-lofjssb72a]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-lofjssb72a] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-lofjssb72a] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-lofjssb72a] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-lofjssb72a] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Percent Rent Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Natural % column (data-col="3") - Conditional */
.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):not(.disabled-cell):focus[b-lofjssb72a]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):not(.disabled-cell):focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"].disabled-cell:focus[b-lofjssb72a]::after {
    content: 'Disabled';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"].disabled-cell:focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section column (data-col="6") */
.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Notes Badge column (data-col="7") */
.focusable-cell[data-col="7"].actions-cell:focus[b-lofjssb72a]::after {
    content: 'Click or space / enter to view notes';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].actions-cell:focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Dates Badge column (data-col="8") */
.focusable-cell[data-col="8"].actions-cell:focus[b-lofjssb72a]::after {
    content: 'Click or space / enter to view dates';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Details column (data-col="9") - Enabled */
.focusable-cell[data-col="9"].actions-cell:not(.disabled-cell):focus[b-lofjssb72a]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:not(.disabled-cell):focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Details column (data-col="9") - Disabled */
.focusable-cell[data-col="9"].actions-cell.disabled-cell:focus[b-lofjssb72a]::after {
    content: 'Disabled';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell.disabled-cell:focus[b-lofjssb72a]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for all action cell tooltips */
.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-lofjssb72a]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-lofjssb72a]::after,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:not(.disabled-cell):focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-lofjssb72a]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-lofjssb72a]::before,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:not(.disabled-cell):focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row:first-child .focusable-cell[data-col="9"].actions-cell.disabled-cell:focus[b-lofjssb72a]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="9"].actions-cell.disabled-cell:focus[b-lofjssb72a]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Right-align numeric column headers */
.header-cell.area-header[b-lofjssb72a] {
    justify-content: flex-end;
}
/* /Components/CustomProjectPermissionsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-tolfo68abt] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-tolfo68abt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-tolfo68abt] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-tolfo68abt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-tolfo68abt] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-tolfo68abt] {
            color: white;
        }

    .toolbar-btn .material-icons[b-tolfo68abt] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-tolfo68abt] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 350px;
    height: 38px;
}

.search-icon[b-tolfo68abt] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-tolfo68abt] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-tolfo68abt]::placeholder {
        color: #999;
    }

.clear-icon[b-tolfo68abt] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-tolfo68abt] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-tolfo68abt] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-tolfo68abt] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-tolfo68abt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-tolfo68abt] {
        border-right: none;
    }

    .header-cell:hover[b-tolfo68abt] {
        background: #e8e8e8;
    }

.sort-icon[b-tolfo68abt] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-tolfo68abt] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-tolfo68abt] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-tolfo68abt] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-tolfo68abt] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-tolfo68abt] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-tolfo68abt] {
        background-color: white;
    }

    .data-row.odd-row[b-tolfo68abt] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-tolfo68abt] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-tolfo68abt] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-tolfo68abt] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-tolfo68abt] {
                color: white !important;
            }

    .data-row.selected[b-tolfo68abt] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-tolfo68abt] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-tolfo68abt] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-tolfo68abt] {
                color: white !important;
            }

.custom-grid-cell[b-tolfo68abt] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-tolfo68abt] {
        border-right: none;
    }

.focusable-cell[b-tolfo68abt] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-tolfo68abt] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):focus[b-tolfo68abt]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):focus[b-tolfo68abt]::before {
        display: none !important;
    }

.role-cell.focusable-cell:focus[b-tolfo68abt]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-tolfo68abt]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-tolfo68abt]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-tolfo68abt]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-tolfo68abt]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-tolfo68abt]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-tolfo68abt]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-tolfo68abt]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-tolfo68abt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-cell[b-tolfo68abt] {
    display: flex;
    align-items: center;
}

.role-badge[b-tolfo68abt] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-tolfo68abt] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-tolfo68abt] {
    font-weight: 700 !important;
}

.role-badge:hover[b-tolfo68abt]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-badge:hover[b-tolfo68abt]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-badge:hover[b-tolfo68abt]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-badge:hover[b-tolfo68abt]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell[b-tolfo68abt] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-tolfo68abt] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-tolfo68abt] {
        font-size: 16px;
    }

.delete-btn[b-tolfo68abt] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-tolfo68abt] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-tolfo68abt] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-tolfo68abt]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-tolfo68abt]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-tolfo68abt]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-tolfo68abt]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-tolfo68abt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-tolfo68abt] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-tolfo68abt] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-tolfo68abt] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-tolfo68abt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-tolfo68abt] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-tolfo68abt] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-tolfo68abt] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-tolfo68abt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-tolfo68abt] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-tolfo68abt 1s linear infinite;
}

@keyframes spin-b-tolfo68abt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-tolfo68abt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-tolfo68abt] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-tolfo68abt]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-tolfo68abt]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-tolfo68abt]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-tolfo68abt]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomProjectsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-52gt3ao81k] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px); /* Account for: main header (56px) + main footer (56px) + tab strip header (44px) + padding (44px) */
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-52gt3ao81k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0; /* Prevent toolbar from shrinking */
}

.toolbar-left[b-52gt3ao81k] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-52gt3ao81k] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-52gt3ao81k] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-52gt3ao81k] {
            color: white;
        }

    .toolbar-btn .material-icons[b-52gt3ao81k] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-52gt3ao81k] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-52gt3ao81k] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-52gt3ao81k] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-52gt3ao81k]::placeholder {
        color: #999;
    }

.clear-icon[b-52gt3ao81k] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-52gt3ao81k] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-52gt3ao81k] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.header-row[b-52gt3ao81k] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-52gt3ao81k] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-52gt3ao81k] {
        border-right: none;
    }

    .header-cell:hover[b-52gt3ao81k] {
        background: #e8e8e8;
    }

.sort-icon[b-52gt3ao81k] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-52gt3ao81k] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-52gt3ao81k] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-52gt3ao81k] {
    flex: 1 1 auto; /* Grow to fill available space, shrink if needed */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0; /* Critical for flex child with overflow */
}

.custom-grid-row[b-52gt3ao81k] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px; /* Ensure consistent row height for virtualization */
}

.data-row[b-52gt3ao81k] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative; /* CRITICAL - needed for tooltip positioning */
}

    /* Telerik-style alternating row colors */
    .data-row.even-row[b-52gt3ao81k] {
        background-color: white;
    }

    .data-row.odd-row[b-52gt3ao81k] {
        background-color: #f5f5f5;
    }

    /* ADD HOVER EFFECT - This is what makes the row turn dark gray on hover */
    .data-row:hover[b-52gt3ao81k] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-52gt3ao81k] {
            font-weight: 700 !important;
        }

    /* Focused row styling - only when cell has focus */
    .data-row.focused[b-52gt3ao81k] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-52gt3ao81k] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        /* Delete button styling for focused row */
        .data-row.focused .delete-btn[b-52gt3ao81k] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-52gt3ao81k] {
                color: white !important;
            }

    /* Selected row styling */
    .data-row.selected[b-52gt3ao81k] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell[b-52gt3ao81k] {
            /* Keep default text color based on row type */
        }

            .data-row.selected .custom-grid-cell:first-child[b-52gt3ao81k] {
                padding-left: 4px; /* Adjust for border width */
            }

        .data-row.selected .action-btn[b-52gt3ao81k] {
            /* Maintain default styling */
        }

        .data-row.selected .delete-btn[b-52gt3ao81k] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-52gt3ao81k] {
                color: white !important;
            }

.custom-grid-cell[b-52gt3ao81k] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-52gt3ao81k] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-52gt3ao81k] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-52gt3ao81k] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Suppress tooltips for cells that are not role-cell, actions-cell, or data-col editable cells */
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):focus[b-52gt3ao81k]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not([data-col="0"]):focus[b-52gt3ao81k]::before {
        display: none !important;
    }

/* Show tooltip on role-cell focus only */
.role-cell.focusable-cell:focus[b-52gt3ao81k]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-52gt3ao81k]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for FIRST row - shows BELOW */
.data-row:first-child .role-cell.focusable-cell:focus[b-52gt3ao81k]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-52gt3ao81k]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Show tooltip on actions-cell focus - LEFT ALIGNED */
.actions-cell.focusable-cell:focus[b-52gt3ao81k]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-52gt3ao81k]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for FIRST row actions - shows BELOW, LEFT ALIGNED */
.data-row:first-child .actions-cell.focusable-cell:focus[b-52gt3ao81k]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-52gt3ao81k]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-52gt3ao81k] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role Badge - Underlined text style */
.role-cell[b-52gt3ao81k] {
    display: flex;
    align-items: center;
}

.role-badge[b-52gt3ao81k] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

/* Bold when row is selected */
.data-row.selected .role-badge[b-52gt3ao81k] {
    font-weight: 700 !important;
}

/* Bold when row is focused */
.data-row.focused .role-badge[b-52gt3ao81k] {
    font-weight: 700 !important;
}

/* Actions Cell */
.actions-cell[b-52gt3ao81k] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Override for items button cell - left justify */
    .actions-cell:has(.items-btn)[b-52gt3ao81k] {
        justify-content: flex-start !important;
    }

.action-btn[b-52gt3ao81k] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-52gt3ao81k] {
        font-size: 16px;
    }

/* Delete button styling to match role badge */
.delete-btn[b-52gt3ao81k] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-52gt3ao81k] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-52gt3ao81k] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        /* Tooltip on delete button hover - LEFT ALIGNED */
        .delete-btn:hover[b-52gt3ao81k]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-52gt3ao81k]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

/* Tooltip for FIRST row delete button - shows BELOW, LEFT ALIGNED */
.data-row:first-child .delete-btn:hover[b-52gt3ao81k]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-52gt3ao81k]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-52gt3ao81k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0; /* Prevent footer from shrinking */
    flex-grow: 0; /* Prevent footer from growing */
}

.footer-info[b-52gt3ao81k] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-52gt3ao81k] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-52gt3ao81k] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-52gt3ao81k] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-52gt3ao81k] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-52gt3ao81k] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-52gt3ao81k] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-52gt3ao81k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-52gt3ao81k] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-52gt3ao81k 1s linear infinite;
}

@keyframes spin-b-52gt3ao81k {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-52gt3ao81k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-52gt3ao81k] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-52gt3ao81k]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-52gt3ao81k]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-52gt3ao81k]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-52gt3ao81k]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-52gt3ao81k] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-52gt3ao81k] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

/* Edit mode row styling */
.data-row.editing[b-52gt3ao81k] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-52gt3ao81k] {
        background-color: #FFF9F5 !important;
    }

/* Items header - left justified */
.items-header[b-52gt3ao81k] {
    justify-content: flex-start !important;
}

    .items-header .material-icons[b-52gt3ao81k] {
        font-size: 16px;
        color: #333;
    }

/* Items badge column - left justified */
.custom-grid-cell.items-badge-cell[b-52gt3ao81k] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 8px;
}

.items-badge-cell .action-btn.view-badge-btn[b-52gt3ao81k] {
    margin: 0; /* Override default margin */
}

/* Items button styling - UNDERLINED TEXT like role badges */
.items-btn[b-52gt3ao81k] {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    position: relative;
    color: #333 !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s;
}

    .items-btn:hover[b-52gt3ao81k] {
        background: transparent !important;
        border: none !important;
        opacity: 1;
    }

        /* Tooltip on items button hover - LEFT ALIGNED */
        .items-btn:hover[b-52gt3ao81k]::after {
            content: 'Click or space / enter to view';
            position: absolute;
            bottom: 100%;
            left: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .items-btn:hover[b-52gt3ao81k]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

/* Tooltip for FIRST row items button - shows BELOW */
.data-row:first-child .items-btn:hover[b-52gt3ao81k]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .items-btn:hover[b-52gt3ao81k]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Items button on focused row - bold */
.data-row.focused .items-btn[b-52gt3ao81k] {
    font-weight: 700 !important;
}

/* Items button on selected row - bold */
.data-row.selected .items-btn[b-52gt3ao81k] {
    font-weight: 700 !important;
}

/* Override tooltip for Items button cell on focus - LEFT ALIGNED */
.actions-cell.focusable-cell:has(.items-btn):focus[b-52gt3ao81k]::after {
    content: 'Click or space / enter to view';
    left: 0;
    right: auto;
}

.actions-cell.focusable-cell:has(.items-btn):focus[b-52gt3ao81k]::before {
    left: 10px;
    right: auto;
}

/* Editable cell tooltips - "Double-click or enter to edit" */
/* Name column (col 0) - CENTERED */
.focusable-cell[data-col="0"]:not(.system-cell):focus[b-52gt3ao81k]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-52gt3ao81k]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Name column first row - shows BELOW */
.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-52gt3ao81k]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-52gt3ao81k]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for grid rows - CENTERED like Recents - KEEP AT END OF FILE */
.data-row[b-52gt3ao81k]::after {
    content: "Click to navigate to project.";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

/* Tooltip for FIRST row - shows BELOW */
.data-row:first-child[b-52gt3ao81k]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

/* Show tooltip on hover */
.data-row:hover[b-52gt3ao81k]::after {
    opacity: 1;
}
/* /Components/CustomRecentsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-a6ycw549nh] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-a6ycw549nh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-a6ycw549nh] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-a6ycw549nh] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-a6ycw549nh] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-a6ycw549nh] {
            color: white;
        }

    .toolbar-btn .material-icons[b-a6ycw549nh] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-a6ycw549nh] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-a6ycw549nh] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-a6ycw549nh] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-a6ycw549nh]::placeholder {
        color: #999;
    }

.clear-icon[b-a6ycw549nh] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-a6ycw549nh] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-a6ycw549nh] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-a6ycw549nh] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-a6ycw549nh] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-a6ycw549nh] {
        border-right: none;
    }

    .header-cell:hover[b-a6ycw549nh] {
        background: #e8e8e8;
    }

.sort-icon[b-a6ycw549nh] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-a6ycw549nh] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-a6ycw549nh] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-a6ycw549nh] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-a6ycw549nh] {
        background-color: white;
    }

    .data-row.odd-row[b-a6ycw549nh] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-a6ycw549nh] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-a6ycw549nh] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-a6ycw549nh] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-a6ycw549nh] {
        border-right: none;
    }

.cell-content[b-a6ycw549nh] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Grid Footer */
.custom-grid-footer[b-a6ycw549nh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-a6ycw549nh] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-a6ycw549nh] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-a6ycw549nh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-a6ycw549nh] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-a6ycw549nh 1s linear infinite;
}

@keyframes spin-b-a6ycw549nh {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-a6ycw549nh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-a6ycw549nh] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-a6ycw549nh]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-a6ycw549nh]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-a6ycw549nh]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-a6ycw549nh]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.data-row[b-a6ycw549nh]::after {
    content: "Click to navigate to item";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-a6ycw549nh]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-a6ycw549nh]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-a6ycw549nh] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-a6ycw549nh] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-a6ycw549nh]::after {
            content: 'Click or space / enter to navigate to item';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-a6ycw549nh]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row.first-row .focusable-cell:focus[b-a6ycw549nh]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-a6ycw549nh]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomRecordChartItemsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-tn3w6ytxc2] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-tn3w6ytxc2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-tn3w6ytxc2] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-right[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-tn3w6ytxc2] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-tn3w6ytxc2] {
            color: white;
        }

    .toolbar-btn .material-icons[b-tn3w6ytxc2] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.wizard-btn[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .wizard-btn:hover[b-tn3w6ytxc2] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .wizard-btn:hover .material-icons[b-tn3w6ytxc2] {
            color: white;
        }

    .wizard-btn .material-icons[b-tn3w6ytxc2] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.title-text[b-tn3w6ytxc2] {
    font-size: 16px;
    font-weight: 700;
    color: #E36F26;
}

.toolbar-right[b-tn3w6ytxc2] {
    display: flex;
    gap: 8px;
}

.search-box[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-tn3w6ytxc2] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-tn3w6ytxc2] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-tn3w6ytxc2]::placeholder {
        color: #999;
    }

.clear-icon[b-tn3w6ytxc2] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-tn3w6ytxc2] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-tn3w6ytxc2] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-tn3w6ytxc2] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-tn3w6ytxc2] {
        border-right: none;
    }

    .header-cell:hover[b-tn3w6ytxc2] {
        background: #e8e8e8;
    }

.sort-icon[b-tn3w6ytxc2] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-tn3w6ytxc2] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-tn3w6ytxc2] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-tn3w6ytxc2] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-tn3w6ytxc2] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-tn3w6ytxc2] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-tn3w6ytxc2] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-tn3w6ytxc2] {
            background-color: inherit;
        }

    .data-row.odd-row[b-tn3w6ytxc2] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-tn3w6ytxc2] {
            background-color: inherit;
        }

    .data-row.focused[b-tn3w6ytxc2] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-tn3w6ytxc2] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-tn3w6ytxc2] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-tn3w6ytxc2] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-tn3w6ytxc2] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-tn3w6ytxc2] {
            background-color: #f5f5f5;
        }

.custom-grid-cell[b-tn3w6ytxc2] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-tn3w6ytxc2] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-tn3w6ytxc2] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-tn3w6ytxc2] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Tooltip for Sort (data-col="0") - Read-Only - LEFT JUSTIFIED */
    .focusable-cell[data-col="0"].readonly-cell:focus[b-tn3w6ytxc2]::after {
        content: 'Read-only';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"].readonly-cell:focus[b-tn3w6ytxc2]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

.data-row:first-child .focusable-cell[data-col="0"].readonly-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"].readonly-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Short Name (data-col="1") - Read-Only */
.focusable-cell[data-col="1"].readonly-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"].readonly-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Pool (data-col="2") - Role Badge */
.focusable-cell[data-col="2"].role-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"].role-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"].role-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"].role-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Document (data-col="3") - Role Badge */
.focusable-cell[data-col="3"].role-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"].role-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"].role-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"].role-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section (data-col="4") - Inline Edit */
.focusable-cell[data-col="4"]:focus[b-tn3w6ytxc2]::after {
    content: 'Double-click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Description (data-col="5") - Role Badge */
.focusable-cell[data-col="5"].role-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"].role-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="5"].role-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"].role-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Pending (data-col="6") - Checkbox */
.focusable-cell[data-col="6"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Include (data-col="7") - Checkbox */
.focusable-cell[data-col="7"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="7"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Exclude (data-col="8") - Checkbox */
.focusable-cell[data-col="8"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="8"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="8"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Silent (data-col="9") - Checkbox - RIGHT JUSTIFIED */
.focusable-cell[data-col="9"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="9"].checkbox-cell:focus[b-tn3w6ytxc2]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="9"].checkbox-cell:focus[b-tn3w6ytxc2]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-tn3w6ytxc2] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.readonly-cell[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
}

.readonly-text[b-tn3w6ytxc2] {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
}

.role-cell[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
}

.role-badge[b-tn3w6ytxc2] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-tn3w6ytxc2] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-tn3w6ytxc2] {
    font-weight: 700 !important;
}

.checkbox-cell[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-checkbox[b-tn3w6ytxc2] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: white;
    position: relative;
    transition: all 0.2s;
}

    /* Checked state - Orange background with white checkmark */
    .inline-checkbox:checked[b-tn3w6ytxc2] {
        background: #E36F26;
        border-color: #E36F26;
    }

        .inline-checkbox:checked[b-tn3w6ytxc2]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

    /* Disabled state */
    .inline-checkbox:disabled[b-tn3w6ytxc2] {
        opacity: 0.6;
        cursor: default;
    }

.actions-cell[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.action-btn[b-tn3w6ytxc2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .action-btn:hover[b-tn3w6ytxc2] {
        background: rgba(227, 111, 38, 0.1);
    }

    .action-btn .material-icons[b-tn3w6ytxc2] {
        font-size: 18px;
        color: #666;
        transition: color 0.2s;
    }

    .action-btn:hover .material-icons[b-tn3w6ytxc2] {
        color: #E36F26;
    }

.delete-btn:hover .material-icons[b-tn3w6ytxc2] {
    color: #dc3545;
}

/* Grid Footer */
.custom-grid-footer[b-tn3w6ytxc2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-tn3w6ytxc2] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-tn3w6ytxc2] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-tn3w6ytxc2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-tn3w6ytxc2] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-tn3w6ytxc2 1s linear infinite;
}

@keyframes spin-b-tn3w6ytxc2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-tn3w6ytxc2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-tn3w6ytxc2] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-tn3w6ytxc2]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-tn3w6ytxc2]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-tn3w6ytxc2]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-tn3w6ytxc2]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-tn3w6ytxc2] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-tn3w6ytxc2] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-tn3w6ytxc2] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-tn3w6ytxc2] {
        background-color: #FFF9F5 !important;
    }
/* /Components/CustomRecordItemDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-9tcm18u0ne] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-9tcm18u0ne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-9tcm18u0ne] {
    display: flex;
    gap: 8px;
}

.toolbar-title[b-9tcm18u0ne] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-9tcm18u0ne] {
    font-size: 14px;
    font-weight: 700;
    color: #E36F26;
}

.toolbar-btn[b-9tcm18u0ne] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-9tcm18u0ne] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-9tcm18u0ne] {
            color: white;
        }

    .toolbar-btn .material-icons[b-9tcm18u0ne] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-9tcm18u0ne] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-9tcm18u0ne] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-9tcm18u0ne] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-9tcm18u0ne]::placeholder {
        color: #999;
    }

.clear-icon[b-9tcm18u0ne] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-9tcm18u0ne] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-9tcm18u0ne] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-9tcm18u0ne] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-9tcm18u0ne] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    user-select: none;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-9tcm18u0ne] {
        border-right: none;
    }

.actions-header[b-9tcm18u0ne] {
    justify-content: center;
}

/* Grid Body */
.custom-grid-body[b-9tcm18u0ne] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
    background: white;
}

.custom-grid-row[b-9tcm18u0ne] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-9tcm18u0ne] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-9tcm18u0ne] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-9tcm18u0ne] {
            background-color: inherit;
        }

    .data-row.odd-row[b-9tcm18u0ne] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-9tcm18u0ne] {
            background-color: inherit;
        }

    .data-row.focused[b-9tcm18u0ne] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-9tcm18u0ne] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-9tcm18u0ne] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-9tcm18u0ne] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-9tcm18u0ne] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-9tcm18u0ne] {
            background-color: #f5f5f5;
        }

.custom-grid-cell[b-9tcm18u0ne] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-9tcm18u0ne] {
        border-right: none;
    }

/* Focusable cell styling */
.focusable-cell[b-9tcm18u0ne] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-9tcm18u0ne] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

/* Read-only cell styling */
.readonly-cell[b-9tcm18u0ne] {
    cursor: default;
}

.readonly-text[b-9tcm18u0ne] {
    color: #000 !important;
    font-weight: 400;
    text-decoration: none !important;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-row.selected .readonly-text[b-9tcm18u0ne] {
    font-weight: 700 !important;
    color: #000 !important;
}

.data-row.focused .readonly-text[b-9tcm18u0ne] {
    font-weight: 700 !important;
    color: #000 !important;
}

/* Preview text should wrap */
.preview-text[b-9tcm18u0ne] {
    white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
}

/* Tooltip for read-only cells */
.focusable-cell[data-col="0"].readonly-cell:focus[b-9tcm18u0ne]::after,
.focusable-cell[data-col="1"].readonly-cell:focus[b-9tcm18u0ne]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"].readonly-cell:focus[b-9tcm18u0ne]::before,
.focusable-cell[data-col="1"].readonly-cell:focus[b-9tcm18u0ne]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"].readonly-cell:focus[b-9tcm18u0ne]::after,
.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-9tcm18u0ne]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"].readonly-cell:focus[b-9tcm18u0ne]::before,
.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-9tcm18u0ne]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for editable Preview cell (column 2) */
.focusable-cell[data-col="2"]:focus[b-9tcm18u0ne]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:focus[b-9tcm18u0ne]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 20px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"]:focus[b-9tcm18u0ne]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"]:focus[b-9tcm18u0ne]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-9tcm18u0ne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-9tcm18u0ne] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-9tcm18u0ne] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading overlay */
.loading-overlay[b-9tcm18u0ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-9tcm18u0ne] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-9tcm18u0ne 1s linear infinite;
}

@keyframes spin-b-9tcm18u0ne {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* No data message */
.no-data-message[b-9tcm18u0ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-9tcm18u0ne] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-9tcm18u0ne]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-9tcm18u0ne]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-9tcm18u0ne]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-9tcm18u0ne]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomRecordItemsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-bxkuhoogqw] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-bxkuhoogqw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-bxkuhoogqw] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-bxkuhoogqw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-bxkuhoogqw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-bxkuhoogqw] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-bxkuhoogqw] {
            color: white;
        }

    .toolbar-btn .material-icons[b-bxkuhoogqw] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-bxkuhoogqw] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-bxkuhoogqw] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-bxkuhoogqw] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-bxkuhoogqw]::placeholder {
        color: #999;
    }

.clear-icon[b-bxkuhoogqw] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-bxkuhoogqw] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-bxkuhoogqw] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-bxkuhoogqw] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-bxkuhoogqw] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-bxkuhoogqw] {
        border-right: none;
    }

    .header-cell:hover[b-bxkuhoogqw] {
        background: #e8e8e8;
    }

.sort-icon[b-bxkuhoogqw] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-bxkuhoogqw] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-bxkuhoogqw] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-bxkuhoogqw] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
    background: white;
}

.custom-grid-row[b-bxkuhoogqw] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-bxkuhoogqw] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-bxkuhoogqw] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-bxkuhoogqw] {
            background-color: inherit;
        }

    .data-row.odd-row[b-bxkuhoogqw] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-bxkuhoogqw] {
            background-color: inherit;
        }

    .data-row.focused[b-bxkuhoogqw] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-bxkuhoogqw] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-bxkuhoogqw] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-bxkuhoogqw] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-bxkuhoogqw] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-bxkuhoogqw] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-bxkuhoogqw] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-bxkuhoogqw] {
                color: white !important;
            }

.custom-grid-cell[b-bxkuhoogqw] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-bxkuhoogqw] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-bxkuhoogqw] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-bxkuhoogqw] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-bxkuhoogqw]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-bxkuhoogqw]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-bxkuhoogqw] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-bxkuhoogqw] {
    display: flex;
    align-items: center;
}

.role-badge[b-bxkuhoogqw] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-bxkuhoogqw] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-bxkuhoogqw] {
    font-weight: 700 !important;
}

.actions-cell[b-bxkuhoogqw] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-bxkuhoogqw] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

/* Base icon styling without forced color */
.icon-with-badge[b-bxkuhoogqw] {
    font-size: 20px;
    transition: color 0.2s ease;
}

.badge[b-bxkuhoogqw] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-bxkuhoogqw] {
    color: #333;
    font-weight: 700;
}

.items-btn[b-bxkuhoogqw] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
}

.data-row.selected .items-btn[b-bxkuhoogqw] {
    font-weight: 700 !important;
}

.data-row.focused .items-btn[b-bxkuhoogqw] {
    font-weight: 700 !important;
}

.items-btn:hover[b-bxkuhoogqw] {
    color: #E36F26 !important;
}

.action-btn[b-bxkuhoogqw] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-bxkuhoogqw] {
        font-size: 16px;
    }

.delete-btn[b-bxkuhoogqw] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-bxkuhoogqw] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-bxkuhoogqw] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-bxkuhoogqw]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-bxkuhoogqw]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-bxkuhoogqw]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-bxkuhoogqw]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Reasoning Icon Styling - 16px to match delete icon */
.reasoning-icon[b-bxkuhoogqw] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: opacity 0.2s;
    display: block;
}

    .reasoning-icon:hover[b-bxkuhoogqw] {
        opacity: 0.6;
    }

/* Grid Footer */
.custom-grid-footer[b-bxkuhoogqw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-bxkuhoogqw] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-bxkuhoogqw] {
    color: #E36F26;
    font-weight: 600;
}

.loading-overlay[b-bxkuhoogqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-bxkuhoogqw] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-bxkuhoogqw 1s linear infinite;
}

@keyframes spin-b-bxkuhoogqw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-bxkuhoogqw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-bxkuhoogqw] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-bxkuhoogqw]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-bxkuhoogqw]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-bxkuhoogqw]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-bxkuhoogqw]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-bxkuhoogqw] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-bxkuhoogqw] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-bxkuhoogqw] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-bxkuhoogqw] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Name column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section column (data-col="4") */
.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):focus[b-bxkuhoogqw]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Notes Badge column (data-col="5") */
.focusable-cell[data-col="5"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Dates Badge column (data-col="6") */
.focusable-cell[data-col="6"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Provisions column (data-col="7") */
.focusable-cell[data-col="7"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Kolena Reasoning column (data-col="8" for Clauses, data-col="12" for Options) */
.focusable-cell[data-col="8"].actions-cell:has(.reasoning-icon):focus[b-bxkuhoogqw]::after,
.focusable-cell[data-col="12"].actions-cell:has(.reasoning-icon):focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:has(.reasoning-icon):focus[b-bxkuhoogqw]::before,
.focusable-cell[data-col="12"].actions-cell:has(.reasoning-icon):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Delete button - handles both Clauses (col 8/9) and Options (col 12/13) */
.focusable-cell[data-col="8"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::after,
.focusable-cell[data-col="9"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::after,
.focusable-cell[data-col="12"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::after,
.focusable-cell[data-col="13"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::before,
.focusable-cell[data-col="9"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::before,
.focusable-cell[data-col="12"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::before,
.focusable-cell[data-col="13"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Notification/Effective column (data-col="8") - Options only (no reasoning icon) */
.focusable-cell[data-col="8"].actions-cell:not(:has(.delete-btn)):not(:has(.reasoning-icon)):focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:not(:has(.delete-btn)):not(:has(.reasoning-icon)):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Encumbered Floors column (data-col="9") - Options only (no delete button) */
.focusable-cell[data-col="9"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Encumbered Desc column (data-col="10") - Options only */
.focusable-cell[data-col="10"].actions-cell:focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="10"].actions-cell:focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Superior Rights column (data-col="11") - Options only */
.focusable-cell[data-col="11"].actions-cell:focus[b-bxkuhoogqw]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="11"].actions-cell:focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for all tooltips */
.data-row:first-child .focusable-cell[data-col="5"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="6"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="7"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:not(:has(.reasoning-icon)):not(:has(.delete-btn)):focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:has(.reasoning-icon):focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="10"].actions-cell:focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="11"].actions-cell:focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="12"].actions-cell:focus[b-bxkuhoogqw]::after,
.data-row:first-child .focusable-cell[data-col="13"].actions-cell:focus[b-bxkuhoogqw]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="6"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="7"].actions-cell:not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:not(:has(.reasoning-icon)):not(:has(.delete-btn)):focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:has(.reasoning-icon):focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:has(.delete-btn):focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="10"].actions-cell:focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="11"].actions-cell:focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="12"].actions-cell:focus[b-bxkuhoogqw]::before,
.data-row:first-child .focusable-cell[data-col="13"].actions-cell:focus[b-bxkuhoogqw]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Read-only cell styling */
.readonly-cell[b-bxkuhoogqw] {
    cursor: default;
}

.readonly-text[b-bxkuhoogqw] {
    color: #E36F26 !important;
    font-weight: 400;
    text-decoration: none !important;
}

.data-row.selected .readonly-text[b-bxkuhoogqw] {
    font-weight: 700 !important;
    color: #E36F26 !important;
}

.data-row.focused .readonly-text[b-bxkuhoogqw] {
    font-weight: 700 !important;
    color: #E36F26 !important;
}

/* Tooltip for Type column (data-col="1") - Read-Only */
.focusable-cell[data-col="1"].readonly-cell:focus[b-bxkuhoogqw]::after {
    content: 'Read-Only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"].readonly-cell:focus[b-bxkuhoogqw]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-bxkuhoogqw]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-bxkuhoogqw]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Two-row header support */
.header-row-wrapper[b-bxkuhoogqw] {
    display: flex;
    flex-direction: column;
}

.header-row-top[b-bxkuhoogqw] {
    min-height: 20px;
    border-bottom: none;
}

.header-row-bottom[b-bxkuhoogqw] {
    min-height: 30px;
}

.header-row-top .header-cell[b-bxkuhoogqw] {
    padding: 2px 8px;
    font-size: 12px;
    border-bottom: none;
}

.header-cell-with-subheader[b-bxkuhoogqw] {
    display: flex;
    align-items: center;
    justify-content: left;
    font-weight: 700;
}

/* Merged header cell spanning two columns */
.header-cell-merged[b-bxkuhoogqw] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Notes and Dates badges - ALWAYS ORANGE (columns 5 and 6) */
.focusable-cell[data-col="5"] .material-icons.icon-with-badge[b-bxkuhoogqw],
.focusable-cell[data-col="6"] .material-icons.icon-with-badge[b-bxkuhoogqw] {
    color: #E36F26 !important;
}

/* Maintain orange in focused/selected states for Notes/Dates */
.data-row.focused .focusable-cell[data-col="5"] .material-icons.icon-with-badge[b-bxkuhoogqw],
.data-row.selected .focusable-cell[data-col="5"] .material-icons.icon-with-badge[b-bxkuhoogqw],
.data-row.focused .focusable-cell[data-col="6"] .material-icons.icon-with-badge[b-bxkuhoogqw],
.data-row.selected .focusable-cell[data-col="6"] .material-icons.icon-with-badge[b-bxkuhoogqw] {
    color: #E36F26 !important;
}

/* Icon colors based on data presence - ONLY for columns 10 and 11 (Encumbered/Superior) */
.focusable-cell[data-col="10"] .material-icons.icon-with-badge.no-data[b-bxkuhoogqw],
.focusable-cell[data-col="11"] .material-icons.icon-with-badge.no-data[b-bxkuhoogqw] {
    color: #000 !important;
}

.focusable-cell[data-col="10"] .material-icons.icon-with-badge.has-data[b-bxkuhoogqw],
.focusable-cell[data-col="11"] .material-icons.icon-with-badge.has-data[b-bxkuhoogqw] {
    color: #E36F26 !important;
}

/* Maintain colors in focused/selected states for columns 10 and 11 */
.data-row.focused .focusable-cell[data-col="10"] .material-icons.icon-with-badge.no-data[b-bxkuhoogqw],
.data-row.selected .focusable-cell[data-col="10"] .material-icons.icon-with-badge.no-data[b-bxkuhoogqw],
.data-row.focused .focusable-cell[data-col="11"] .material-icons.icon-with-badge.no-data[b-bxkuhoogqw],
.data-row.selected .focusable-cell[data-col="11"] .material-icons.icon-with-badge.no-data[b-bxkuhoogqw] {
    color: #000 !important;
}

.data-row.focused .focusable-cell[data-col="10"] .material-icons.icon-with-badge.has-data[b-bxkuhoogqw],
.data-row.selected .focusable-cell[data-col="10"] .material-icons.icon-with-badge.has-data[b-bxkuhoogqw],
.data-row.focused .focusable-cell[data-col="11"] .material-icons.icon-with-badge.has-data[b-bxkuhoogqw],
.data-row.selected .focusable-cell[data-col="11"] .material-icons.icon-with-badge.has-data[b-bxkuhoogqw] {
    color: #E36F26 !important;
}
/* /Components/CustomRecordsGrid.razor.rz.scp.css */
.custom-grid-container[b-my0ppubckm] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-my0ppubckm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-my0ppubckm] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-my0ppubckm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-my0ppubckm] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-my0ppubckm] {
            color: white;
        }

    .toolbar-btn .material-icons[b-my0ppubckm] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-my0ppubckm] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-my0ppubckm] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-my0ppubckm] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-my0ppubckm]::placeholder {
        color: #999;
    }

.clear-icon[b-my0ppubckm] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-my0ppubckm] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-my0ppubckm] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-my0ppubckm] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-my0ppubckm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-my0ppubckm] {
        border-right: none;
    }

    .header-cell:hover[b-my0ppubckm] {
        background: #e8e8e8;
    }

    .header-cell.left-aligned[b-my0ppubckm] {
        justify-content: flex-start;
    }

    .header-cell.centered[b-my0ppubckm] {
        justify-content: center;
    }

    .header-cell.right-aligned[b-my0ppubckm] {
        justify-content: flex-end;
    }

.sort-icon[b-my0ppubckm] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-my0ppubckm] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-my0ppubckm] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-my0ppubckm] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-my0ppubckm] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 30px;
}

.data-row[b-my0ppubckm] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-my0ppubckm] {
        background-color: white;
    }

    .data-row.odd-row[b-my0ppubckm] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-my0ppubckm] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-my0ppubckm] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-my0ppubckm] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
}

    .custom-grid-cell:last-child[b-my0ppubckm] {
        border-right: none;
    }

    .custom-grid-cell.left-aligned[b-my0ppubckm] {
        justify-content: flex-start;
    }

    .custom-grid-cell.centered[b-my0ppubckm] {
        justify-content: center;
    }

    .custom-grid-cell.right-aligned[b-my0ppubckm] {
        justify-content: flex-end;
    }

.cell-content[b-my0ppubckm] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Export Badge */
.export-badge[b-my0ppubckm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .export-badge .material-icons[b-my0ppubckm] {
        font-size: 18px;
    }

.export-true[b-my0ppubckm] {
    color: #28a745;
}

.export-false[b-my0ppubckm] {
    color: #dc3545;
}

/* Actions Cell */
.actions-cell[b-my0ppubckm] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-my0ppubckm] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-my0ppubckm] {
        font-size: 16px;
    }

.delete-btn[b-my0ppubckm] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-my0ppubckm] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-my0ppubckm] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

/* Grid Footer */
.custom-grid-footer[b-my0ppubckm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
    border-top: 1px solid var(--border-color, #ddd);
    background-color: var(--footer-bg, #f5f5f5);
}

.footer-row[b-my0ppubckm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.record-count[b-my0ppubckm] {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-status-group[b-my0ppubckm] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

.footer-label[b-my0ppubckm] {
    font-weight: 700;
    color: var(--label-color, #333);
}

.footer-value[b-my0ppubckm] {
    font-weight: 700;
    color: var(--value-color, #666);
}

.footer-separator[b-my0ppubckm] {
    color: var(--separator-color, #ccc);
    font-weight: 700;
    flex-shrink: 0;
}

.footer-info[b-my0ppubckm] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-my0ppubckm] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-my0ppubckm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-my0ppubckm] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-my0ppubckm 1s linear infinite;
}

@keyframes spin-b-my0ppubckm {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-my0ppubckm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-my0ppubckm] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-my0ppubckm]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-my0ppubckm]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-my0ppubckm]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-my0ppubckm]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip for grid rows - CENTERED */
.data-row[b-my0ppubckm]::after {
    content: "Click to navigate to record.";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

/* Tooltip for FIRST row - shows BELOW with higher specificity */
.data-row.first-row[b-my0ppubckm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

/* Show tooltip on hover */
.data-row:hover[b-my0ppubckm]::after {
    opacity: 1;
}

/* Include Inactive Checkbox */
.checkbox-label[b-my0ppubckm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    transition: all 0.2s;
}

    .checkbox-label:hover[b-my0ppubckm] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .checkbox-label input[type="checkbox"][b-my0ppubckm] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #E36F26;
        margin: 0;
    }

    .checkbox-label:hover input[type="checkbox"][b-my0ppubckm] {
        accent-color: white;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-my0ppubckm] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-my0ppubckm] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-my0ppubckm]::after {
            content: 'Click or enter to navigate to record';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-my0ppubckm]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row.first-row .focusable-cell:focus[b-my0ppubckm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-my0ppubckm]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Delete action cell tooltip - right justified */
.actions-cell.focusable-cell:focus[b-my0ppubckm]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    left: auto;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-my0ppubckm]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 5px;
    left: auto;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row.first-row .actions-cell.focusable-cell:focus[b-my0ppubckm]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .actions-cell.focusable-cell:focus[b-my0ppubckm]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomRecoveriesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-k5wei6nsyv] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-k5wei6nsyv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-k5wei6nsyv] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-k5wei6nsyv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-k5wei6nsyv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-k5wei6nsyv] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-k5wei6nsyv] {
            color: white;
        }

    .toolbar-btn .material-icons[b-k5wei6nsyv] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-k5wei6nsyv] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-k5wei6nsyv] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-k5wei6nsyv] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-k5wei6nsyv]::placeholder {
        color: #999;
    }

.clear-icon[b-k5wei6nsyv] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-k5wei6nsyv] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-k5wei6nsyv] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-k5wei6nsyv] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-k5wei6nsyv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-k5wei6nsyv] {
        border-right: none;
    }

    .header-cell:hover[b-k5wei6nsyv] {
        background: #e8e8e8;
    }

.sort-icon[b-k5wei6nsyv] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-k5wei6nsyv] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-k5wei6nsyv] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-k5wei6nsyv] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-k5wei6nsyv] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-k5wei6nsyv] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-k5wei6nsyv] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-k5wei6nsyv] {
            background-color: inherit;
        }

    .data-row.odd-row[b-k5wei6nsyv] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-k5wei6nsyv] {
            background-color: inherit;
        }

    .data-row.focused[b-k5wei6nsyv] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-k5wei6nsyv] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-k5wei6nsyv] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-k5wei6nsyv] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-k5wei6nsyv] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-k5wei6nsyv] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-k5wei6nsyv] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-k5wei6nsyv] {
                color: white !important;
            }

.custom-grid-cell[b-k5wei6nsyv] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-k5wei6nsyv] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-k5wei6nsyv] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-k5wei6nsyv] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-k5wei6nsyv]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-k5wei6nsyv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-k5wei6nsyv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-k5wei6nsyv]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-k5wei6nsyv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-k5wei6nsyv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-k5wei6nsyv] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-k5wei6nsyv] {
    display: flex;
    align-items: center;
}

.role-badge[b-k5wei6nsyv] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-k5wei6nsyv] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-k5wei6nsyv] {
    font-weight: 700 !important;
}

.actions-cell[b-k5wei6nsyv] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-k5wei6nsyv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.icon-with-badge[b-k5wei6nsyv] {
    font-size: 20px;
    color: #E36F26 !important;
    transition: color 0.2s ease;
}

.custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-k5wei6nsyv] {
    color: #E36F26 !important;
}

.data-row.focused .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-k5wei6nsyv] {
    color: #E36F26 !important;
}

.data-row.selected .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-k5wei6nsyv] {
    color: #E36F26 !important;
}

.badge[b-k5wei6nsyv] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-k5wei6nsyv] {
    color: #333;
    font-weight: 700;
}

.items-btn[b-k5wei6nsyv] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
}

.data-row.selected .items-btn[b-k5wei6nsyv] {
    font-weight: 700 !important;
}

.data-row.focused .items-btn[b-k5wei6nsyv] {
    font-weight: 700 !important;
}

.items-btn:hover[b-k5wei6nsyv] {
    color: #E36F26 !important;
}

.action-btn[b-k5wei6nsyv] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-k5wei6nsyv] {
        font-size: 16px;
    }

.delete-btn[b-k5wei6nsyv] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-k5wei6nsyv] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-k5wei6nsyv] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-k5wei6nsyv]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-k5wei6nsyv]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-k5wei6nsyv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-k5wei6nsyv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-k5wei6nsyv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-k5wei6nsyv] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-k5wei6nsyv] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-k5wei6nsyv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-k5wei6nsyv] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-k5wei6nsyv 1s linear infinite;
}

@keyframes spin-b-k5wei6nsyv {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-k5wei6nsyv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-k5wei6nsyv] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-k5wei6nsyv]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-k5wei6nsyv]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-k5wei6nsyv]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-k5wei6nsyv]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-k5wei6nsyv] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-k5wei6nsyv] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-k5wei6nsyv] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-k5wei6nsyv] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section column (data-col="6") */
.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):focus[b-k5wei6nsyv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Notes Badge column (data-col="7") */
.focusable-cell[data-col="7"].actions-cell:focus[b-k5wei6nsyv]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].actions-cell:focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Dates Badge column (data-col="8") */
.focusable-cell[data-col="8"].actions-cell:focus[b-k5wei6nsyv]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Details column (data-col="9") */
.focusable-cell[data-col="9"].actions-cell:focus[b-k5wei6nsyv]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:focus[b-k5wei6nsyv]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for all action cell tooltips */
.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-k5wei6nsyv]::after,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-k5wei6nsyv]::after,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-k5wei6nsyv]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].actions-cell:focus[b-k5wei6nsyv]::before,
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-k5wei6nsyv]::before,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-k5wei6nsyv]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Toggle Switch Styling */
.toolbar-switch[b-k5wei6nsyv] {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.switch-container[b-k5wei6nsyv] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.switch-label[b-k5wei6nsyv] {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    user-select: none;
}

.switch[b-k5wei6nsyv] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

    .switch input[b-k5wei6nsyv] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-k5wei6nsyv] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}

    .slider[b-k5wei6nsyv]:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

.switch input:checked + .slider[b-k5wei6nsyv] {
    background-color: #E36F26;
}

    .switch input:checked + .slider[b-k5wei6nsyv]:before {
        transform: translateX(16px);
    }
/* /Components/CustomRecoveryDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-a2owau9uf9] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-a2owau9uf9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-a2owau9uf9] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-btn[b-a2owau9uf9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-a2owau9uf9] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-a2owau9uf9] {
            color: white;
        }

    .toolbar-btn .material-icons[b-a2owau9uf9] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.btn-back-to-parent[b-a2owau9uf9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .btn-back-to-parent:hover[b-a2owau9uf9] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .btn-back-to-parent:hover .material-icons[b-a2owau9uf9] {
            color: white;
        }

    .btn-back-to-parent .material-icons[b-a2owau9uf9] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-a2owau9uf9] {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.title-text[b-a2owau9uf9] {
    font-size: 16px;
    font-weight: 700;
    color: #E36F26;
}

/* Grid Header */
.custom-grid-header[b-a2owau9uf9] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-a2owau9uf9] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-a2owau9uf9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-a2owau9uf9] {
        border-right: none;
    }

    .header-cell:hover[b-a2owau9uf9] {
        background: #e8e8e8;
    }

    /* Right-justify headers for numeric columns (Stop Amount, Pro Rata, Gross Up, Admin Fee) */
    .header-cell.area-header[b-a2owau9uf9] {
        justify-content: flex-end;
    }

.sort-icon[b-a2owau9uf9] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-a2owau9uf9] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-a2owau9uf9] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-a2owau9uf9] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-a2owau9uf9] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-a2owau9uf9] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-a2owau9uf9] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-a2owau9uf9] {
            background-color: inherit;
        }

    .data-row.odd-row[b-a2owau9uf9] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-a2owau9uf9] {
            background-color: inherit;
        }

    .data-row.focused[b-a2owau9uf9] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-a2owau9uf9] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-a2owau9uf9] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-a2owau9uf9] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-a2owau9uf9] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-a2owau9uf9] {
            background-color: #f5f5f5;
        }

.custom-grid-cell[b-a2owau9uf9] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-a2owau9uf9] {
        border-right: none;
    }

    /* Right-align numeric cell content */
    .custom-grid-cell.area-cell[b-a2owau9uf9] {
        justify-content: flex-end;
        text-align: right;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-a2owau9uf9] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-a2owau9uf9] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Tooltip for Charge Code (data-col="0") - Role Badge - LEFT JUSTIFIED */
    .focusable-cell[data-col="0"].role-cell:focus[b-a2owau9uf9]::after {
        content: 'Click or space / enter to edit';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"].role-cell:focus[b-a2owau9uf9]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

.data-row:first-child .focusable-cell[data-col="0"].role-cell:focus[b-a2owau9uf9]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"].role-cell:focus[b-a2owau9uf9]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Base Year (data-col="1") - Inline Edit */
.focusable-cell[data-col="1"]:not(.role-cell):focus[b-a2owau9uf9]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):focus[b-a2owau9uf9]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):focus[b-a2owau9uf9]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):focus[b-a2owau9uf9]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Stop Type (data-col="2") - Role Badge */
.focusable-cell[data-col="2"].role-cell:focus[b-a2owau9uf9]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"].role-cell:focus[b-a2owau9uf9]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"].role-cell:focus[b-a2owau9uf9]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"].role-cell:focus[b-a2owau9uf9]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltips for Stop Amount (data-col="3"), Pro Rata (data-col="4"), Gross Up (data-col="5"), Admin Fee (data-col="6") - Inline Edit */
.focusable-cell[data-col="3"]:not(.role-cell):focus[b-a2owau9uf9]::after,
.focusable-cell[data-col="4"]:not(.role-cell):focus[b-a2owau9uf9]::after,
.focusable-cell[data-col="5"]:not(.role-cell):focus[b-a2owau9uf9]::after,
.focusable-cell[data-col="6"]:not(.role-cell):focus[b-a2owau9uf9]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.role-cell):focus[b-a2owau9uf9]::before,
.focusable-cell[data-col="4"]:not(.role-cell):focus[b-a2owau9uf9]::before,
.focusable-cell[data-col="5"]:not(.role-cell):focus[b-a2owau9uf9]::before,
.focusable-cell[data-col="6"]:not(.role-cell):focus[b-a2owau9uf9]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):focus[b-a2owau9uf9]::after,
.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):focus[b-a2owau9uf9]::after,
.data-row:first-child .focusable-cell[data-col="5"]:not(.role-cell):focus[b-a2owau9uf9]::after,
.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):focus[b-a2owau9uf9]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.role-cell):focus[b-a2owau9uf9]::before,
.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):focus[b-a2owau9uf9]::before,
.data-row:first-child .focusable-cell[data-col="5"]:not(.role-cell):focus[b-a2owau9uf9]::before,
.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):focus[b-a2owau9uf9]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Cap (data-col="7") - Role Badge */
.focusable-cell[data-col="7"].role-cell:focus[b-a2owau9uf9]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"].role-cell:focus[b-a2owau9uf9]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="7"].role-cell:focus[b-a2owau9uf9]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"].role-cell:focus[b-a2owau9uf9]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-a2owau9uf9] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-a2owau9uf9] {
    display: flex;
    align-items: center;
}

.role-badge[b-a2owau9uf9] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-a2owau9uf9] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-a2owau9uf9] {
    font-weight: 700 !important;
}

/* Grid Footer */
.custom-grid-footer[b-a2owau9uf9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-a2owau9uf9] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-a2owau9uf9] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-a2owau9uf9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-a2owau9uf9] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-a2owau9uf9 1s linear infinite;
}

@keyframes spin-b-a2owau9uf9 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-a2owau9uf9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-a2owau9uf9] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-a2owau9uf9]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-a2owau9uf9]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-a2owau9uf9]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-a2owau9uf9]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-a2owau9uf9] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-a2owau9uf9] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-a2owau9uf9] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-a2owau9uf9] {
        background-color: #FFF9F5 !important;
    }
/* /Components/CustomRecoveryMatrixDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-hslb5yhlej] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-hslb5yhlej] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-hslb5yhlej] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-btn[b-hslb5yhlej] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-hslb5yhlej] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-hslb5yhlej] {
            color: white;
        }

    .toolbar-btn .material-icons[b-hslb5yhlej] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.wizard-btn[b-hslb5yhlej] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .wizard-btn:hover[b-hslb5yhlej] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .wizard-btn:hover .material-icons[b-hslb5yhlej] {
            color: white;
        }

    .wizard-btn .material-icons[b-hslb5yhlej] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-hslb5yhlej] {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.title-text[b-hslb5yhlej] {
    font-size: 16px;
    font-weight: 700;
    color: #E36F26;
}

.toolbar-right[b-hslb5yhlej] {
    display: flex;
    gap: 8px;
}

.search-box[b-hslb5yhlej] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-hslb5yhlej] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-hslb5yhlej] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-hslb5yhlej]::placeholder {
        color: #999;
    }

.clear-icon[b-hslb5yhlej] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-hslb5yhlej] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-hslb5yhlej] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-hslb5yhlej] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-hslb5yhlej] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-hslb5yhlej] {
        border-right: none;
    }

    .header-cell:hover[b-hslb5yhlej] {
        background: #e8e8e8;
    }

.sort-icon[b-hslb5yhlej] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-hslb5yhlej] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-hslb5yhlej] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-hslb5yhlej] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-hslb5yhlej] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-hslb5yhlej] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-hslb5yhlej] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-hslb5yhlej] {
            background-color: inherit;
        }

    .data-row.odd-row[b-hslb5yhlej] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-hslb5yhlej] {
            background-color: inherit;
        }

    .data-row.focused[b-hslb5yhlej] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-hslb5yhlej] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-hslb5yhlej] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-hslb5yhlej] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-hslb5yhlej] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-hslb5yhlej] {
            background-color: #f5f5f5;
        }

.custom-grid-cell[b-hslb5yhlej] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-hslb5yhlej] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-hslb5yhlej] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-hslb5yhlej] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

    /* Tooltip for Sort (data-col="0") - Inline Edit - LEFT JUSTIFIED */
    .focusable-cell[data-col="0"]:not(.role-cell):not(.checkbox-cell):focus[b-hslb5yhlej]::after {
        content: 'Double-click or space / enter to edit';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .focusable-cell[data-col="0"]:not(.role-cell):not(.checkbox-cell):focus[b-hslb5yhlej]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.checkbox-cell):focus[b-hslb5yhlej]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.checkbox-cell):focus[b-hslb5yhlej]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Name (data-col="1") - Read-Only */
.focusable-cell[data-col="1"].readonly-cell:focus[b-hslb5yhlej]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"].readonly-cell:focus[b-hslb5yhlej]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-hslb5yhlej]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"].readonly-cell:focus[b-hslb5yhlej]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Category (data-col="2") - Read-Only */
.focusable-cell[data-col="2"].readonly-cell:focus[b-hslb5yhlej]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"].readonly-cell:focus[b-hslb5yhlej]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="2"].readonly-cell:focus[b-hslb5yhlej]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="2"].readonly-cell:focus[b-hslb5yhlej]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Description (data-col="3") - Role Badge */
.focusable-cell[data-col="3"].role-cell:focus[b-hslb5yhlej]::after {
    content: 'Click or space /enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"].role-cell:focus[b-hslb5yhlej]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"].role-cell:focus[b-hslb5yhlej]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"].role-cell:focus[b-hslb5yhlej]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Pool (data-col="4") - Role Badge */
.focusable-cell[data-col="4"].role-cell:focus[b-hslb5yhlej]::after {
    content: 'Click or space /enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"].role-cell:focus[b-hslb5yhlej]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"].role-cell:focus[b-hslb5yhlej]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"].role-cell:focus[b-hslb5yhlej]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Include (data-col="5") - Checkbox */
.focusable-cell[data-col="5"].checkbox-cell:focus[b-hslb5yhlej]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"].checkbox-cell:focus[b-hslb5yhlej]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="5"].checkbox-cell:focus[b-hslb5yhlej]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"].checkbox-cell:focus[b-hslb5yhlej]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Extract (data-col="6") - Checkbox - RIGHT JUSTIFIED */
.focusable-cell[data-col="6"].checkbox-cell:focus[b-hslb5yhlej]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"].checkbox-cell:focus[b-hslb5yhlej]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"].checkbox-cell:focus[b-hslb5yhlej]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"].checkbox-cell:focus[b-hslb5yhlej]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-hslb5yhlej] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.readonly-cell[b-hslb5yhlej] {
    display: flex;
    align-items: center;
}

.readonly-text[b-hslb5yhlej] {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
}

.role-cell[b-hslb5yhlej] {
    display: flex;
    align-items: center;
}

.role-badge[b-hslb5yhlej] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-hslb5yhlej] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-hslb5yhlej] {
    font-weight: 700 !important;
}

.checkbox-cell[b-hslb5yhlej] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-checkbox[b-hslb5yhlej] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #E36F26;
}

/* Grid Footer */
.custom-grid-footer[b-hslb5yhlej] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-hslb5yhlej] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-hslb5yhlej] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-hslb5yhlej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-hslb5yhlej] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-hslb5yhlej 1s linear infinite;
}

@keyframes spin-b-hslb5yhlej {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-hslb5yhlej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-hslb5yhlej] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-hslb5yhlej]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-hslb5yhlej]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-hslb5yhlej]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-hslb5yhlej]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-hslb5yhlej] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-hslb5yhlej] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-hslb5yhlej] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-hslb5yhlej] {
        background-color: #FFF9F5 !important;
    }

/* Checkbox Styling - Orange when checked (matching CustomReportSchedulesGrid) */
.inline-checkbox[b-hslb5yhlej] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: white;
    position: relative;
    transition: all 0.2s;
}

    /* Checked state - Orange background with white checkmark */
    .inline-checkbox:checked[b-hslb5yhlej] {
        background: #E36F26;
        border-color: #E36F26;
    }

        .inline-checkbox:checked[b-hslb5yhlej]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

    /* Disabled state */
    .inline-checkbox:disabled[b-hslb5yhlej] {
        opacity: 0.6;
        cursor: default;
    }
/* /Components/CustomReportScheduleArchivesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-569k5b41wc] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-569k5b41wc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-569k5b41wc] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-569k5b41wc] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-569k5b41wc] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-569k5b41wc] {
            color: white;
        }

    .toolbar-btn .material-icons[b-569k5b41wc] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-569k5b41wc] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-569k5b41wc] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-569k5b41wc] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-569k5b41wc]::placeholder {
        color: #999;
    }

.clear-icon[b-569k5b41wc] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-569k5b41wc] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-569k5b41wc] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-569k5b41wc] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-569k5b41wc] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-569k5b41wc] {
        border-right: none;
    }

    .header-cell:hover[b-569k5b41wc] {
        background: #e8e8e8;
    }

.sort-icon[b-569k5b41wc] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-569k5b41wc] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-569k5b41wc] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-569k5b41wc] {
    cursor: default;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-569k5b41wc] {
        background-color: white;
    }

    .data-row.odd-row[b-569k5b41wc] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-569k5b41wc] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-569k5b41wc] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-569k5b41wc] {
    padding: 4px 6px;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: hidden;
    min-width: 0;
    min-height: 30px;
}

    .custom-grid-cell:last-child[b-569k5b41wc] {
        border-right: none;
    }

/* Cell content - WRAPPING ENABLED */
.cell-content[b-569k5b41wc] {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* File link button styling - with wrapping */
.file-link-button[b-569k5b41wc] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    max-width: 100%;
    transition: color 0.2s;
}

    .file-link-button:hover[b-569k5b41wc] {
        color: #E36F26;
        font-weight: 700;
    }

    .file-link-button:focus[b-569k5b41wc] {
        outline: none;
        color: #E36F26;
    }

.no-file[b-569k5b41wc] {
    color: #999;
    font-style: italic;
}

/* Grid Footer */
.custom-grid-footer[b-569k5b41wc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-569k5b41wc] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-569k5b41wc] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-569k5b41wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-569k5b41wc] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-569k5b41wc 1s linear infinite;
}

@keyframes spin-b-569k5b41wc {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-569k5b41wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-569k5b41wc] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-569k5b41wc]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-569k5b41wc]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-569k5b41wc]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-569k5b41wc]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip - Read-only */
.data-row[b-569k5b41wc]::after {
    content: "Read-only";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-569k5b41wc]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-569k5b41wc]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-569k5b41wc] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-569k5b41wc] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-569k5b41wc]::after {
            content: 'Read-only';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-569k5b41wc]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

/* File cell focus - different tooltip */
.file-cell:focus[b-569k5b41wc]::after {
    content: 'Press Enter or Space to open file';
}

.data-row.first-row .focusable-cell:focus[b-569k5b41wc]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-569k5b41wc]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomReportScheduleAssetsGrid.razor.rz.scp.css */
/* Reuse the same styles from CustomEncumberedFloorsGrid */
.selection-dialog-multiple-container[b-81gmqiqxv9] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.selection-dialog-actions[b-81gmqiqxv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
    flex-shrink: 0;
}

/* Fix search box - remove extra border, proper structure */
.selection-dialog-search[b-81gmqiqxv9] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 250px;
    gap: 4px;
}

.search-icon[b-81gmqiqxv9] {
    font-size: 20px;
    color: #666;
    flex-shrink: 0;
}

.search-input[b-81gmqiqxv9] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    padding: 4px;
    background: transparent;
}

    .search-input[b-81gmqiqxv9]::placeholder {
        color: #999;
    }

    .search-input:focus[b-81gmqiqxv9] {
        outline: none;
    }

.selection-dialog-search:focus-within[b-81gmqiqxv9] {
    border-color: #E36F26;
    box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.2);
}

.clear-icon[b-81gmqiqxv9] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s;
}

    .clear-icon:hover[b-81gmqiqxv9] {
        color: #E36F26;
    }

.action-btn[b-81gmqiqxv9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

    .action-btn:hover:not(:disabled)[b-81gmqiqxv9] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .action-btn:hover:not(:disabled) .material-icons[b-81gmqiqxv9] {
            color: white;
        }

    .action-btn:disabled[b-81gmqiqxv9] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .action-btn .material-icons[b-81gmqiqxv9] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.filter-toggle[b-81gmqiqxv9] {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    margin-left: 12px;
}

.filter-option[b-81gmqiqxv9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    border-right: 1px solid #ccc;
    transition: all 0.2s;
    user-select: none;
}

    .filter-option:last-child[b-81gmqiqxv9] {
        border-right: none;
    }

    .filter-option input[type="radio"][b-81gmqiqxv9] {
        margin: 0;
        cursor: pointer;
    }

    .filter-option:hover[b-81gmqiqxv9] {
        background: #f0f0f0;
    }

    .filter-option.active[b-81gmqiqxv9] {
        background: #E36F26;
        color: white;
    }

        .filter-option.active input[type="radio"][b-81gmqiqxv9] {
            accent-color: white;
        }

.selection-dialog-grid-wrapper[b-81gmqiqxv9] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.selection-dialog-grid[b-81gmqiqxv9] {
    display: flex;
    flex-direction: column;
}

.grid-header-row[b-81gmqiqxv9] {
    display: flex;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1;
}

.grid-header-cell[b-81gmqiqxv9] {
    padding: 8px 12px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
}

.grid-row[b-81gmqiqxv9] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .grid-row:nth-child(even)[b-81gmqiqxv9] {
        background-color: white;
    }

    .grid-row:nth-child(odd)[b-81gmqiqxv9] {
        background-color: #f5f5f5;
    }

    .grid-row:hover[b-81gmqiqxv9] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .grid-row:hover .cell-text[b-81gmqiqxv9] {
            font-weight: 700;
            color: #333;
        }

        .grid-row:hover .selection-icon[b-81gmqiqxv9] {
            color: #333;
        }

    .grid-row.selected[b-81gmqiqxv9] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #333 !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        .grid-row.selected .cell-text[b-81gmqiqxv9] {
            color: #333 !important;
            font-weight: 700 !important;
        }

        .grid-row.selected .selection-icon[b-81gmqiqxv9] {
            color: #E36F26 !important;
        }

        .grid-row.selected .grid-cell:first-child[b-81gmqiqxv9] {
            padding-left: 4px;
        }

        .grid-row.selected:hover[b-81gmqiqxv9] {
            background-color: #c0c0c0 !important;
            box-shadow: 0 2px 8px rgba(51, 51, 51, 0.3);
        }

    .grid-row:hover:not(.selected) .selection-icon[b-81gmqiqxv9] {
        color: #333;
    }

.grid-cell[b-81gmqiqxv9] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
}

.selection-icon[b-81gmqiqxv9] {
    font-size: 20px;
    color: #666;
    transition: color 0.2s;
}

.cell-text[b-81gmqiqxv9] {
    font-size: 12px;
    color: #333;
    transition: all 0.2s;
}

.no-data-message[b-81gmqiqxv9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    padding: 2em;
}

    .no-data-message .material-icons[b-81gmqiqxv9] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.grid-loading[b-81gmqiqxv9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #666;
}

.spinner[b-81gmqiqxv9] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-81gmqiqxv9 1s linear infinite;
}

@keyframes spin-b-81gmqiqxv9 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.selection-dialog-grid-wrapper[b-81gmqiqxv9]::-webkit-scrollbar {
    width: 8px;
}

.selection-dialog-grid-wrapper[b-81gmqiqxv9]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.selection-dialog-grid-wrapper[b-81gmqiqxv9]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .selection-dialog-grid-wrapper[b-81gmqiqxv9]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.custom-grid-container[b-81gmqiqxv9] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Toolbar - Fixed at top */
.custom-grid-toolbar[b-81gmqiqxv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    gap: 12px;
}

/* Header - Fixed, no scroll */
.custom-grid-header[b-81gmqiqxv9] {
    background: #f5f5f5;
    border-bottom: 2px solid #E36F26;
    flex-shrink: 0;
    overflow: hidden; /* ✅ Prevent header from scrolling */
}

/* Body - Scrollable area ONLY */
.custom-grid-body[b-81gmqiqxv9] {
    flex: 1;
    overflow-y: auto; /* ✅ Scroll ONLY in the body */
    overflow-x: hidden;
    position: relative;
    min-height: 0; /* ✅ Required for flex child scrolling */
}

/* Footer - Fixed at bottom */
.custom-grid-footer[b-81gmqiqxv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    color: #666;
    flex-shrink: 0;
}

.toolbar-left[b-81gmqiqxv9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-right[b-81gmqiqxv9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-81gmqiqxv9] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.toolbar-btn:hover[b-81gmqiqxv9] {
    background: #E36F26;
    color: white;
    border-color: #E36F26;
}

.toolbar-btn:hover .material-icons[b-81gmqiqxv9] {
    color: white;
}

.toolbar-btn .material-icons[b-81gmqiqxv9] {
    font-size: 18px;
    color: #E36F26;
    transition: color 0.2s;
}

.filter-tabs[b-81gmqiqxv9] {
    display: flex;
    gap: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.filter-tab[b-81gmqiqxv9] {
    padding: 6px 12px;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.filter-tab:hover[b-81gmqiqxv9] {
    background: #f0f0f0;
}

.filter-tab.active[b-81gmqiqxv9] {
    background: #E36F26;
    color: white;
}

/* Remove duplicate search-box styles that conflict */
.footer-info[b-81gmqiqxv9] {
    display: flex;
    gap: 16px;
}

.selected-count[b-81gmqiqxv9] {
    color: #E36F26;
    font-weight: 600;
}

.selected-indicator[b-81gmqiqxv9] {
    color: #E36F26;
    font-weight: 600;
}

.selected-names[b-81gmqiqxv9] {
    margin-top: 4px;
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/CustomReportScheduleParametersGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-gl8sv1vjci] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-gl8sv1vjci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-gl8sv1vjci] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-btn[b-gl8sv1vjci] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-gl8sv1vjci] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-gl8sv1vjci] {
            color: white;
        }

    .toolbar-btn .material-icons[b-gl8sv1vjci] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-gl8sv1vjci] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-gl8sv1vjci] {
    color: #E36F26;
    font-weight: 700;
    font-size: 14px;
}

/* Grid Header */
.custom-grid-header[b-gl8sv1vjci] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-gl8sv1vjci] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-gl8sv1vjci] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-gl8sv1vjci] {
        border-right: none;
    }

/* Grid Body */
.custom-grid-body[b-gl8sv1vjci] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-gl8sv1vjci] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-gl8sv1vjci] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-gl8sv1vjci] {
        background-color: white;
    }

    .data-row.focused[b-gl8sv1vjci] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-gl8sv1vjci] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .role-badge[b-gl8sv1vjci] {
            font-weight: 700 !important;
        }

    .data-row.editing[b-gl8sv1vjci] {
        background-color: #fff3e0 !important;
    }

.custom-grid-cell[b-gl8sv1vjci] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-gl8sv1vjci] {
        border-right: none;
    }

.focusable-cell[b-gl8sv1vjci] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-gl8sv1vjci] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

/* Role Cell Tooltips (Date Type & Date Term) */
.role-cell.focusable-cell:focus[b-gl8sv1vjci]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-gl8sv1vjci]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row adjustments (tooltip below instead of above) */
.data-row:first-child .role-cell.focusable-cell:focus[b-gl8sv1vjci]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-gl8sv1vjci]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-gl8sv1vjci] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role Badge - Match CustomOrganizationPermissionsGrid styling */
.role-cell[b-gl8sv1vjci] {
    display: flex;
    align-items: center;
}

.role-badge[b-gl8sv1vjci] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.focused .role-badge[b-gl8sv1vjci] {
    font-weight: 700 !important;
}

/* Grid Footer */
.custom-grid-footer[b-gl8sv1vjci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
}

.footer-info[b-gl8sv1vjci] {
    display: flex;
    gap: 12px;
    color: #666;
}

/* Loading & No Data */
.loading-overlay[b-gl8sv1vjci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-gl8sv1vjci] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-gl8sv1vjci 1s linear infinite;
}

@keyframes spin-b-gl8sv1vjci {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-gl8sv1vjci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-gl8sv1vjci] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-gl8sv1vjci]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-gl8sv1vjci]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-gl8sv1vjci]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-gl8sv1vjci]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomReportSchedulesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-ly9q86rywn] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-ly9q86rywn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-ly9q86rywn] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-ly9q86rywn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-ly9q86rywn] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-ly9q86rywn] {
            color: white;
        }

    .toolbar-btn .material-icons[b-ly9q86rywn] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-ly9q86rywn] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 350px;
    height: 38px;
}

.search-icon[b-ly9q86rywn] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-ly9q86rywn] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-ly9q86rywn]::placeholder {
        color: #999;
    }

.clear-icon[b-ly9q86rywn] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-ly9q86rywn] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-ly9q86rywn] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-ly9q86rywn] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-ly9q86rywn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-ly9q86rywn] {
        border-right: none;
    }

    .header-cell:hover[b-ly9q86rywn] {
        background: #e8e8e8;
    }

.sort-icon[b-ly9q86rywn] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-ly9q86rywn] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-ly9q86rywn] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-ly9q86rywn] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-ly9q86rywn] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-ly9q86rywn] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-ly9q86rywn] {
        background-color: white;
    }

    .data-row.odd-row[b-ly9q86rywn] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-ly9q86rywn] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-ly9q86rywn] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-ly9q86rywn] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-ly9q86rywn] {
                color: white !important;
            }

    .data-row.selected[b-ly9q86rywn] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-ly9q86rywn] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-ly9q86rywn] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-ly9q86rywn] {
                color: white !important;
            }

.custom-grid-cell[b-ly9q86rywn] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-ly9q86rywn] {
        border-right: none;
    }

.focusable-cell[b-ly9q86rywn] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-ly9q86rywn] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

/* Client Cell Tooltip (data-col="0") - Read-only */
.client-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.client-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .client-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .client-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Project Cell Tooltip (data-col="1") - Read-only */
.project-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.project-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .project-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .project-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Report Cell Tooltip (data-col="2") */
.report-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.report-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .report-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .report-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Enabled Cell Tooltip (data-col="3") */
.enabled-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Click or enter to toggle';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.enabled-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .enabled-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .enabled-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Asset Cell Tooltip (data-col="4") */
.asset-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Click or space / enter to view assets';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.asset-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .asset-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .asset-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Timing Cell Tooltip (data-col="5") */
.timing-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Click or space / enter to view timing';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.timing-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .timing-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .timing-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Parameters Cell Tooltip (data-col="6") */
.parameters-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Click or space / enter to view parameters';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.parameters-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .parameters-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .parameters-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Delete Button Tooltip (data-col="7") */
.actions-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-ly9q86rywn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clickable Link Cells */
.report-link[b-ly9q86rywn],
.timing-link[b-ly9q86rywn],
.parameters-link[b-ly9q86rywn] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .report-link[b-ly9q86rywn],
.data-row.selected .timing-link[b-ly9q86rywn],
.data-row.selected .parameters-link[b-ly9q86rywn] {
    font-weight: 700 !important;
}

.data-row.focused .report-link[b-ly9q86rywn],
.data-row.focused .timing-link[b-ly9q86rywn],
.data-row.focused .parameters-link[b-ly9q86rywn] {
    font-weight: 700 !important;
}

/* Read-only cells */
.readonly-cell[b-ly9q86rywn] {
    cursor: default;
}

.readonly-text[b-ly9q86rywn] {
    color: #666;
    font-size: 12px;
}

.data-row.selected .readonly-text[b-ly9q86rywn],
.data-row.focused .readonly-text[b-ly9q86rywn] {
    font-weight: 700 !important;
    color: #333 !important;
}

/* Enabled Checkbox Styling - Orange when checked */
.enabled-checkbox[b-ly9q86rywn] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: white;
    position: relative;
    transition: all 0.2s;
}

    /* Checked state - Orange background with white checkmark */
    .enabled-checkbox:checked[b-ly9q86rywn] {
        background: #E36F26;
        border-color: #E36F26;
    }

        .enabled-checkbox:checked[b-ly9q86rywn]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

    /* Disabled state */
    .enabled-checkbox:disabled[b-ly9q86rywn] {
        opacity: 0.6;
        cursor: default;
    }

.enabled-cell[b-ly9q86rywn] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.actions-cell[b-ly9q86rywn] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-ly9q86rywn] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-ly9q86rywn] {
        font-size: 16px;
    }

.delete-btn[b-ly9q86rywn] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-ly9q86rywn] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-ly9q86rywn] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-ly9q86rywn]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-ly9q86rywn]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-ly9q86rywn]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-ly9q86rywn]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-ly9q86rywn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-ly9q86rywn] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-ly9q86rywn] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-ly9q86rywn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-ly9q86rywn] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-ly9q86rywn 1s linear infinite;
}

@keyframes spin-b-ly9q86rywn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-ly9q86rywn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-ly9q86rywn] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-ly9q86rywn]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-ly9q86rywn]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-ly9q86rywn]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-ly9q86rywn]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.asset-link[b-ly9q86rywn] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .asset-link[b-ly9q86rywn],
.data-row.focused .asset-link[b-ly9q86rywn] {
    font-weight: 700 !important;
}
/* /Components/CustomReportScheduleTimingGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-mtkckfhfgt] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-mtkckfhfgt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-mtkckfhfgt] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-btn[b-mtkckfhfgt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-mtkckfhfgt] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-mtkckfhfgt] {
            color: white;
        }

    .toolbar-btn .material-icons[b-mtkckfhfgt] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.toolbar-title[b-mtkckfhfgt] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.title-text[b-mtkckfhfgt] {
    color: #E36F26;
    font-weight: 700;
    font-size: 14px;
}

/* Grid Header */
.custom-grid-header[b-mtkckfhfgt] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-mtkckfhfgt] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-mtkckfhfgt] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-mtkckfhfgt] {
        border-right: none;
    }

/* Grid Body */
.custom-grid-body[b-mtkckfhfgt] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-mtkckfhfgt] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-mtkckfhfgt] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-mtkckfhfgt] {
        background-color: white;
    }

    .data-row.focused[b-mtkckfhfgt] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-mtkckfhfgt] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .role-badge[b-mtkckfhfgt] {
            font-weight: 700 !important;
        }

        .data-row.focused .readonly-text[b-mtkckfhfgt] {
            font-weight: 700 !important;
        }

    .data-row.editing[b-mtkckfhfgt] {
        background-color: #fff3e0 !important;
    }

.custom-grid-cell[b-mtkckfhfgt] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-mtkckfhfgt] {
        border-right: none;
    }

.focusable-cell[b-mtkckfhfgt] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-mtkckfhfgt] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

/* Role Cell Tooltips (Interval & Run Day) */
.role-cell.focusable-cell:focus[b-mtkckfhfgt]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-mtkckfhfgt]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row adjustments (tooltip below instead of above) */
.data-row:first-child .role-cell.focusable-cell:focus[b-mtkckfhfgt]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-mtkckfhfgt]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Editable Cell Tooltips (Start Date & Time) */
.focusable-cell:not(.role-cell):not(.readonly-cell):focus[b-mtkckfhfgt]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell:not(.role-cell):not(.readonly-cell):focus[b-mtkckfhfgt]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row adjustments for editable cells */
.data-row:first-child .focusable-cell:not(.role-cell):not(.readonly-cell):focus[b-mtkckfhfgt]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell:not(.role-cell):not(.readonly-cell):focus[b-mtkckfhfgt]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Read-only Cell Tooltips (Last Run & Next Run) */
.readonly-cell.focusable-cell:focus[b-mtkckfhfgt]::after {
    content: 'Read-only';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.readonly-cell.focusable-cell:focus[b-mtkckfhfgt]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row adjustments for readonly cells */
.data-row:first-child .readonly-cell.focusable-cell:focus[b-mtkckfhfgt]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .readonly-cell.focusable-cell:focus[b-mtkckfhfgt]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Last cell (Next Run) - position tooltip on right */
.custom-grid-cell:last-child.readonly-cell.focusable-cell:focus[b-mtkckfhfgt]::after {
    left: auto;
    right: 0;
    transform: none;
}

.custom-grid-cell:last-child.readonly-cell.focusable-cell:focus[b-mtkckfhfgt]::before {
    left: auto;
    right: 10px;
    transform: none;
}

.cell-content[b-mtkckfhfgt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role Badge - Match CustomOrganizationPermissionsGrid styling */
.role-cell[b-mtkckfhfgt] {
    display: flex;
    align-items: center;
}

.role-badge[b-mtkckfhfgt] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.focused .role-badge[b-mtkckfhfgt] {
    font-weight: 700 !important;
}

/* Read-only cells */
.readonly-cell[b-mtkckfhfgt] {
    cursor: default;
}

.readonly-text[b-mtkckfhfgt] {
    color: #666;
    font-size: 12px;
}

.data-row.focused .readonly-text[b-mtkckfhfgt] {
    font-weight: 700 !important;
    color: #333 !important;
}

/* Inline Edit Input */
.inline-edit-input[b-mtkckfhfgt] {
    width: 100%;
    padding: 2px 4px;
    border: 2px solid #E36F26;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    background: white;
}

    .inline-edit-input:focus[b-mtkckfhfgt] {
        border-color: #E36F26;
        box-shadow: 0 0 4px rgba(227, 111, 38, 0.3);
    }

/* Grid Footer */
.custom-grid-footer[b-mtkckfhfgt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
}

.footer-info[b-mtkckfhfgt] {
    display: flex;
    gap: 12px;
    color: #666;
}

/* Loading & No Data */
.loading-overlay[b-mtkckfhfgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-mtkckfhfgt] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-mtkckfhfgt 1s linear infinite;
}

@keyframes spin-b-mtkckfhfgt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-mtkckfhfgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-mtkckfhfgt] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-mtkckfhfgt]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-mtkckfhfgt]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-mtkckfhfgt]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-mtkckfhfgt]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomSearchGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-quwkycokcg] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-quwkycokcg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-quwkycokcg] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-quwkycokcg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-quwkycokcg] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-quwkycokcg] {
            color: white;
        }

    .toolbar-btn .material-icons[b-quwkycokcg] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-quwkycokcg] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-quwkycokcg] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-quwkycokcg] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-quwkycokcg]::placeholder {
        color: #999;
    }

.clear-icon[b-quwkycokcg] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-quwkycokcg] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-quwkycokcg] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-quwkycokcg] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-quwkycokcg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    user-select: none;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-quwkycokcg] {
        border-right: none;
    }

/* Grid Body */
.custom-grid-body[b-quwkycokcg] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-quwkycokcg] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-quwkycokcg] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-quwkycokcg] {
        background-color: white;
    }

    .data-row.odd-row[b-quwkycokcg] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-quwkycokcg] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-quwkycokcg] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-quwkycokcg] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-quwkycokcg] {
        border-right: none;
    }

.cell-content[b-quwkycokcg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Footer */
.custom-grid-footer[b-quwkycokcg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-quwkycokcg] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-quwkycokcg] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-quwkycokcg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-quwkycokcg] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-quwkycokcg 1s linear infinite;
}

@keyframes spin-b-quwkycokcg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-quwkycokcg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-quwkycokcg] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-quwkycokcg]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-quwkycokcg]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-quwkycokcg]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-quwkycokcg]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.data-row[b-quwkycokcg]::after {
    content: "Click to navigate to item";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-quwkycokcg]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-quwkycokcg]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-quwkycokcg] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-quwkycokcg] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-quwkycokcg]::after {
            content: 'Click or space / enter to navigate to item';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-quwkycokcg]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row.first-row .focusable-cell:focus[b-quwkycokcg]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-quwkycokcg]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomSelectionDialog.razor.rz.scp.css */
/* Custom Selection Dialog Styles */
.custom-selection-dialog-container[b-3ofb6a8ibb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
}

.custom-selection-dialog-header[b-3ofb6a8ibb] {
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.search-box[b-3ofb6a8ibb] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    height: 38px;
}

.search-icon[b-3ofb6a8ibb] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-3ofb6a8ibb] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-3ofb6a8ibb]::placeholder {
        color: #999;
    }

.clear-icon[b-3ofb6a8ibb] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-3ofb6a8ibb] {
        color: #E36F26;
    }

.custom-selection-grid-container[b-3ofb6a8ibb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Grid Header */
.custom-selection-grid-header[b-3ofb6a8ibb] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
}

.custom-selection-row[b-3ofb6a8ibb] {
    display: flex;
}

.header-row[b-3ofb6a8ibb] {
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-3ofb6a8ibb] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
}

/* Grid Body */
.custom-selection-grid-body[b-3ofb6a8ibb] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.data-row[b-3ofb6a8ibb] {
    cursor: pointer;
    transition: background-color 0.1s ease;
    height: 30px;
    border-bottom: 1px solid #e8e8e8;
}

    /* Telerik-style alternating row colors */
    .data-row.even-row[b-3ofb6a8ibb] {
        background-color: white;
    }

    .data-row.odd-row[b-3ofb6a8ibb] {
        background-color: #f5f5f5;
    }

    /* Hover styling */
    .data-row:hover[b-3ofb6a8ibb] {
        background-color: #E36F26 !important;
        color: white !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(227, 111, 38, 0.3);
    }

        .data-row:hover .custom-selection-cell[b-3ofb6a8ibb] {
            color: white !important;
        }

    /* Selected row styling */
    .data-row.selected[b-3ofb6a8ibb] {
        background-color: #E36F26 !important;
        color: white !important;
        font-weight: 700 !important;
    }

        .data-row.selected .custom-selection-cell[b-3ofb6a8ibb] {
            color: white !important;
        }

.custom-selection-cell[b-3ofb6a8ibb] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
}

.cell-content[b-3ofb6a8ibb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No Data Message */
.no-data-message[b-3ofb6a8ibb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-3ofb6a8ibb] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Footer */
.custom-selection-dialog-footer[b-3ofb6a8ibb] {
    padding: 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.footer-btn[b-3ofb6a8ibb] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #E36F26;
    border: 1px solid #E36F26;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: white;
    transition: all 0.2s;
}

    .footer-btn:hover[b-3ofb6a8ibb] {
        background: #c45e1f;
        border-color: #c45e1f;
    }

/* Scrollbar Styling */
.custom-selection-grid-body[b-3ofb6a8ibb]::-webkit-scrollbar {
    width: 8px;
}

.custom-selection-grid-body[b-3ofb6a8ibb]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-selection-grid-body[b-3ofb6a8ibb]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-selection-grid-body[b-3ofb6a8ibb]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }
/* /Components/CustomSelectionDialogMultiple.razor.rz.scp.css */
/* Container */
.selection-dialog-multiple-container[b-z2b5ux0csq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

/* Search Box */
.selection-dialog-search[b-z2b5ux0csq] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
    flex-shrink: 0;
}

.search-icon[b-z2b5ux0csq] {
    font-size: 20px;
    color: #666;
    margin-right: 8px;
}

.search-input[b-z2b5ux0csq] {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    outline: none;
}

.search-input:focus[b-z2b5ux0csq] {
    border-color: #E36F26;
    box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.2);
}

.clear-icon[b-z2b5ux0csq] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    margin-left: 8px;
    transition: color 0.2s;
}

.clear-icon:hover[b-z2b5ux0csq] {
    color: #E36F26;
}

/* Action Buttons (Select All / Deselect All) */
.selection-dialog-actions[b-z2b5ux0csq] {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
    flex-shrink: 0;
}

.action-btn[b-z2b5ux0csq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.action-btn:hover[b-z2b5ux0csq] {
    background: #E36F26;
    color: white;
    border-color: #E36F26;
}

.action-btn:hover .material-icons[b-z2b5ux0csq] {
    color: white;
}

.action-btn .material-icons[b-z2b5ux0csq] {
    font-size: 18px;
    color: #E36F26;
    transition: color 0.2s;
}

/* Grid Wrapper */
.selection-dialog-grid-wrapper[b-z2b5ux0csq] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Grid */
.selection-dialog-grid[b-z2b5ux0csq] {
    display: flex;
    flex-direction: column;
}

/* Header Row */
.grid-header-row[b-z2b5ux0csq] {
    display: flex;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1;
}

.grid-header-cell[b-z2b5ux0csq] {
    padding: 8px 12px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    flex: 1;
}

/* Data Rows */
.grid-row[b-z2b5ux0csq] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.grid-row:hover[b-z2b5ux0csq] {
    background-color: #E36F26 !important;
    color: white !important;
}

.grid-row:hover .cell-text[b-z2b5ux0csq] {
    color: white !important;
    font-weight: 700;
}

.grid-row:hover .selection-icon[b-z2b5ux0csq] {
    color: white !important;
}

.grid-row.selected[b-z2b5ux0csq] {
    background-color: #E36F26 !important;
    color: white !important;
}

.grid-row.selected .cell-text[b-z2b5ux0csq] {
    color: white !important;
    font-weight: 700;
}

.grid-row.selected .selection-icon[b-z2b5ux0csq] {
    color: white !important;
}

/* Cell */
.grid-cell[b-z2b5ux0csq] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    flex: 1;
}

.selection-icon[b-z2b5ux0csq] {
    font-size: 20px;
    color: #E36F26;
    transition: color 0.2s;
}

.cell-text[b-z2b5ux0csq] {
    font-size: 12px;
    color: #333;
    transition: all 0.2s;
}

/* No Data Message */
.no-data-message[b-z2b5ux0csq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    padding: 2em;
}

.no-data-message .material-icons[b-z2b5ux0csq] {
    font-size: 64px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Footer */
.selection-dialog-footer[b-z2b5ux0csq] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #ddd;
    background: #f9f9f9;
    flex-shrink: 0;
}

.btn-cancel[b-z2b5ux0csq],
.btn-submit[b-z2b5ux0csq] {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #ccc;
}

.btn-cancel[b-z2b5ux0csq] {
    background: white;
    color: #333;
}

.btn-cancel:hover[b-z2b5ux0csq] {
    background: #f0f0f0;
    border-color: #999;
}

.btn-submit[b-z2b5ux0csq] {
    background: #E36F26;
    color: white;
    border-color: #E36F26;
}

.btn-submit:hover[b-z2b5ux0csq] {
    background: #c75d1f;
    border-color: #c75d1f;
}

/* Scrollbar Styling */
.selection-dialog-grid-wrapper[b-z2b5ux0csq]::-webkit-scrollbar {
    width: 8px;
}

.selection-dialog-grid-wrapper[b-z2b5ux0csq]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.selection-dialog-grid-wrapper[b-z2b5ux0csq]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.selection-dialog-grid-wrapper[b-z2b5ux0csq]::-webkit-scrollbar-thumb:hover {
    background: #E36F26;
}
/* /Components/CustomSourceAssetGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-mictnjfk8h] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-mictnjfk8h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-mictnjfk8h] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.toolbar-right[b-mictnjfk8h] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 280px;
}

.toolbar-btn[b-mictnjfk8h] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-mictnjfk8h] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-mictnjfk8h] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-mictnjfk8h] {
        font-size: 18px;
    }

.refresh-btn[b-mictnjfk8h] {
    padding: 6px 8px;
}

.search-box[b-mictnjfk8h] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 120px;
    max-width: 250px;
    width: 100%;
    flex: 1 1 auto;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-mictnjfk8h] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-mictnjfk8h] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-mictnjfk8h] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 60px;
}

    .search-input[b-mictnjfk8h]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-mictnjfk8h] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-mictnjfk8h] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-mictnjfk8h] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-mictnjfk8h] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-mictnjfk8h] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-mictnjfk8h] {
    background: #f5f5f5;
}

.custom-grid-cell[b-mictnjfk8h] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-mictnjfk8h] {
        border-right: none;
    }

.header-cell[b-mictnjfk8h] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-mictnjfk8h] {
        background: #e8e8e8;
    }

.sort-icon[b-mictnjfk8h] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-mictnjfk8h] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Body */
.custom-grid-body[b-mictnjfk8h] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-mictnjfk8h] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-mictnjfk8h] {
        background-color: white;
    }

    .data-row.odd-row[b-mictnjfk8h] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-mictnjfk8h] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-mictnjfk8h] {
            font-weight: 700 !important;
        }

    /* Use ::deep to penetrate CSS isolation for dynamically added classes */
    [b-mictnjfk8h] .source-grid .data-row.selected,
    .data-row.selected[b-mictnjfk8h] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-mictnjfk8h] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-mictnjfk8h] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-mictnjfk8h] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-mictnjfk8h] {
                padding-left: 2px;
            }

    .data-row[b-mictnjfk8h]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-mictnjfk8h]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-mictnjfk8h]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-mictnjfk8h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-mictnjfk8h] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-mictnjfk8h] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-mictnjfk8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-mictnjfk8h] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-mictnjfk8h 1s linear infinite;
}

@keyframes spin-b-mictnjfk8h {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-mictnjfk8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-mictnjfk8h] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-mictnjfk8h]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-mictnjfk8h]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-mictnjfk8h]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-mictnjfk8h]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-mictnjfk8h] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-mictnjfk8h] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceChargeCodesGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE CHARGE CODES GRID - COMPACT VERSION ===== */

.custom-grid-container[b-cxip9pl3h2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-cxip9pl3h2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-cxip9pl3h2] {
    display: flex;
    gap: 6px;
}

.toolbar-right[b-cxip9pl3h2] {
    display: flex;
    gap: 6px;
}

.toolbar-btn[b-cxip9pl3h2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-cxip9pl3h2] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-cxip9pl3h2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-cxip9pl3h2] {
        font-size: 18px;
    }

.refresh-btn[b-cxip9pl3h2] {
    padding: 6px 8px;
}

.search-box[b-cxip9pl3h2] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 180px;
    max-width: 100%;
    height: 32px;
}

.search-icon[b-cxip9pl3h2] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
}

.search-input[b-cxip9pl3h2] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    color: #333;
}

    .search-input[b-cxip9pl3h2]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-cxip9pl3h2] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-cxip9pl3h2] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-cxip9pl3h2] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-cxip9pl3h2] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-cxip9pl3h2] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-cxip9pl3h2] {
    background: #f5f5f5;
}

.custom-grid-cell[b-cxip9pl3h2] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-cxip9pl3h2] {
        border-right: none;
    }

.header-cell[b-cxip9pl3h2] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-cxip9pl3h2] {
        background: #e8e8e8;
    }

.sort-icon[b-cxip9pl3h2] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-cxip9pl3h2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

/* Grid Body */
.custom-grid-body[b-cxip9pl3h2] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-cxip9pl3h2] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-cxip9pl3h2] {
        background-color: white;
    }

    .data-row.odd-row[b-cxip9pl3h2] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-cxip9pl3h2] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-cxip9pl3h2] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    [b-cxip9pl3h2] .source-grid .data-row.selected,
    .data-row.selected[b-cxip9pl3h2] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-cxip9pl3h2] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-cxip9pl3h2] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-cxip9pl3h2] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-cxip9pl3h2] {
                padding-left: 2px;
            }

    .data-row[b-cxip9pl3h2]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-cxip9pl3h2]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-cxip9pl3h2]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-cxip9pl3h2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-cxip9pl3h2] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-cxip9pl3h2] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-cxip9pl3h2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-cxip9pl3h2] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-cxip9pl3h2 1s linear infinite;
}

@keyframes spin-b-cxip9pl3h2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-cxip9pl3h2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-cxip9pl3h2] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-cxip9pl3h2]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-cxip9pl3h2]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-cxip9pl3h2]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-cxip9pl3h2]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-cxip9pl3h2] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-cxip9pl3h2] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceChargeFrequencyGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE CHARGE FREQUENCY GRID - COMPACT VERSION ===== */

.custom-grid-container[b-nqu99m5ad1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-nqu99m5ad1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-nqu99m5ad1] {
    display: flex;
    gap: 6px;
}

.toolbar-right[b-nqu99m5ad1] {
    display: flex;
    gap: 6px;
}

.toolbar-btn[b-nqu99m5ad1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-nqu99m5ad1] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-nqu99m5ad1] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-nqu99m5ad1] {
        font-size: 18px;
    }

.refresh-btn[b-nqu99m5ad1] {
    padding: 6px 8px;
}

.search-box[b-nqu99m5ad1] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 180px;
    max-width: 100%;
    height: 32px;
}

.search-icon[b-nqu99m5ad1] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
}

.search-input[b-nqu99m5ad1] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    color: #333;
}

    .search-input[b-nqu99m5ad1]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-nqu99m5ad1] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-nqu99m5ad1] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-nqu99m5ad1] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-nqu99m5ad1] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-nqu99m5ad1] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-nqu99m5ad1] {
    background: #f5f5f5;
}

.custom-grid-cell[b-nqu99m5ad1] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-nqu99m5ad1] {
        border-right: none;
    }

.header-cell[b-nqu99m5ad1] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-nqu99m5ad1] {
        background: #e8e8e8;
    }

.sort-icon[b-nqu99m5ad1] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-nqu99m5ad1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

/* Grid Body */
.custom-grid-body[b-nqu99m5ad1] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-nqu99m5ad1] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-nqu99m5ad1] {
        background-color: white;
    }

    .data-row.odd-row[b-nqu99m5ad1] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-nqu99m5ad1] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-nqu99m5ad1] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    [b-nqu99m5ad1] .source-grid .data-row.selected,
    .data-row.selected[b-nqu99m5ad1] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-nqu99m5ad1] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-nqu99m5ad1] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-nqu99m5ad1] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-nqu99m5ad1] {
                padding-left: 2px;
            }

    .data-row[b-nqu99m5ad1]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-nqu99m5ad1]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-nqu99m5ad1]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-nqu99m5ad1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-nqu99m5ad1] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-nqu99m5ad1] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-nqu99m5ad1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-nqu99m5ad1] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-nqu99m5ad1 1s linear infinite;
}

@keyframes spin-b-nqu99m5ad1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-nqu99m5ad1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-nqu99m5ad1] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-nqu99m5ad1]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-nqu99m5ad1]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-nqu99m5ad1]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-nqu99m5ad1]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-nqu99m5ad1] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-nqu99m5ad1] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceChartItemsGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE CHART ITEMS GRID - MATCHES RECOVERY MATRIX DETAILS ===== */

.custom-source-grid-container[b-hnsodntvcu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* ===== HEADER ===== */
.custom-grid-header[b-hnsodntvcu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 2px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.header-left[b-hnsodntvcu] {
    flex: 0 1 auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-center[b-hnsodntvcu] {
    flex: 1;
    text-align: center;
}

.header-title[b-hnsodntvcu] {
    font-weight: 700;
    font-size: 1.1em;
    color: #E36F26;
}

.header-right[b-hnsodntvcu] {
    flex: 0 1 auto;
}

/* ===== ACTION BUTTONS (Refresh) ===== */
.action-btn[b-hnsodntvcu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .action-btn:hover:not(:disabled)[b-hnsodntvcu] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .action-btn:hover:not(:disabled) .material-icons[b-hnsodntvcu] {
            color: white;
        }

    .action-btn:disabled[b-hnsodntvcu] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .action-btn .material-icons[b-hnsodntvcu] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

/* ===== SEARCH ===== */
.search-container[b-hnsodntvcu] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-hnsodntvcu] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 34px 4px 10px;
    font-size: 11px;
    width: 200px;
    height: 32px;
    transition: border-color 0.2s;
}

    .search-input:focus[b-hnsodntvcu] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-hnsodntvcu] {
    position: absolute;
    right: 8px;
    color: #666;
    font-size: 18px;
    pointer-events: none;
}

.search-clear-btn[b-hnsodntvcu] {
    position: absolute;
    right: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-clear-btn .material-icons[b-hnsodntvcu] {
        font-size: 16px;
        color: #999;
    }

    .search-clear-btn:hover .material-icons[b-hnsodntvcu] {
        color: #E36F26;
    }

/* ===== GRID BODY ===== */
.custom-grid-body[b-hnsodntvcu] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.grid-loading[b-hnsodntvcu],
.grid-empty[b-hnsodntvcu] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-style: italic;
}

.custom-grid-table[b-hnsodntvcu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .custom-grid-table thead[b-hnsodntvcu] {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 10;
    }

    .custom-grid-table th[b-hnsodntvcu] {
        padding: 6px;
        text-align: left;
        font-weight: 700;
        color: #333;
        border-bottom: 2px solid #ddd;
        background: #f5f5f5;
        height: 28px;
    }

    .custom-grid-table tbody tr[b-hnsodntvcu] {
        cursor: pointer;
        transition: background-color 0.1s ease;
        border-bottom: 1px solid #e8e8e8;
        height: 28px;
        position: relative;
    }

        .custom-grid-table tbody tr:nth-child(even)[b-hnsodntvcu] {
            background-color: white;
        }

        .custom-grid-table tbody tr:nth-child(odd)[b-hnsodntvcu] {
            background-color: #f5f5f5;
        }

        .custom-grid-table tbody tr:hover[b-hnsodntvcu] {
            background-color: #e0e0e0 !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
        }

            .custom-grid-table tbody tr:hover td[b-hnsodntvcu] {
                font-weight: 700 !important;
            }

        .custom-grid-table tbody tr.selected[b-hnsodntvcu] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
            font-weight: 700 !important;
        }

            .custom-grid-table tbody tr.selected td[b-hnsodntvcu] {
                font-weight: 700 !important;
                color: #333 !important;
            }

                .custom-grid-table tbody tr.selected td:first-child[b-hnsodntvcu] {
                    padding-left: 2px;
                }

        .custom-grid-table tbody tr:focus[b-hnsodntvcu] {
            outline: 2px solid #E36F26;
            outline-offset: -2px;
        }

        .custom-grid-table tbody tr[b-hnsodntvcu]::after {
            content: "Click to select.";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 100%;
            margin-bottom: 3px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 1000;
        }

        .custom-grid-table tbody tr:first-child[b-hnsodntvcu]::after {
            bottom: auto;
            top: 100%;
            margin-bottom: 0;
            margin-top: 3px;
        }

        .custom-grid-table tbody tr:hover[b-hnsodntvcu]::after {
            opacity: 1;
        }

    .custom-grid-table td[b-hnsodntvcu] {
        padding: 3px 6px;
        color: #333;
        line-height: 1.3;
    }

.cell-content[b-hnsodntvcu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cell-content input[type="checkbox"][b-hnsodntvcu] {
        cursor: pointer;
        width: 14px;
        height: 14px;
        accent-color: #E36F26;
        flex-shrink: 0;
    }

    .cell-content span[b-hnsodntvcu] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ===== FOOTER ===== */
.custom-grid-footer[b-hnsodntvcu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.selection-count[b-hnsodntvcu] {
    color: #666;
    font-weight: 600;
}

/* ===== SCROLLBAR ===== */
.custom-grid-body[b-hnsodntvcu]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-hnsodntvcu]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-hnsodntvcu]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-hnsodntvcu]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* ===== DISABLED STATE ===== */
.custom-source-grid-container.disabled[b-hnsodntvcu] {
    pointer-events: none;
    opacity: 0.5;
}
/* /Components/CustomSourceChecklistGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-cn0v7e2sn1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Toolbar */
.custom-grid-toolbar[b-cn0v7e2sn1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}

.toolbar-left[b-cn0v7e2sn1] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}

.toolbar-right[b-cn0v7e2sn1] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    max-width: 250px;
    overflow: hidden;
}

.toolbar-btn[b-cn0v7e2sn1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
    flex-shrink: 0;
}

    .toolbar-btn:hover:not(:disabled)[b-cn0v7e2sn1] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-cn0v7e2sn1] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-cn0v7e2sn1] {
        font-size: 18px;
    }

.refresh-btn[b-cn0v7e2sn1] {
    padding: 6px 8px;
}

.search-box[b-cn0v7e2sn1] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    flex: 1 1 auto;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

    .search-box:focus-within[b-cn0v7e2sn1] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-cn0v7e2sn1] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-cn0v7e2sn1] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 0;
    max-width: 100%;
}

    .search-input[b-cn0v7e2sn1]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-cn0v7e2sn1] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-cn0v7e2sn1] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-cn0v7e2sn1] {
        color: #E36F26;
    }

/* Use Reference Row */
.use-reference-row[b-cn0v7e2sn1] {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

/* Grid Header */
.custom-grid-header[b-cn0v7e2sn1] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-cn0v7e2sn1] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 28px;
}

.header-row[b-cn0v7e2sn1] {
    background: #f5f5f5;
}

.custom-grid-cell[b-cn0v7e2sn1] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-cn0v7e2sn1] {
        border-right: none;
    }

.header-cell[b-cn0v7e2sn1] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-cn0v7e2sn1] {
        background: #e8e8e8;
    }

.sort-icon[b-cn0v7e2sn1] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-cn0v7e2sn1] {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
}

/* Grid Body */
.custom-grid-body[b-cn0v7e2sn1] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-cn0v7e2sn1] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-cn0v7e2sn1] {
        background-color: white;
    }

    .data-row.odd-row[b-cn0v7e2sn1] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-cn0v7e2sn1] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-cn0v7e2sn1] {
            font-weight: 700 !important;
        }

    [b-cn0v7e2sn1] .source-grid .data-row.selected,
    .data-row.selected[b-cn0v7e2sn1] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-cn0v7e2sn1] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-cn0v7e2sn1] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-cn0v7e2sn1] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-cn0v7e2sn1] {
                padding-left: 2px;
            }

    .data-row[b-cn0v7e2sn1]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-cn0v7e2sn1]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-cn0v7e2sn1]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-cn0v7e2sn1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-cn0v7e2sn1] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-cn0v7e2sn1] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-cn0v7e2sn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-cn0v7e2sn1] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-cn0v7e2sn1 1s linear infinite;
}

@keyframes spin-b-cn0v7e2sn1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-cn0v7e2sn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-cn0v7e2sn1] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-cn0v7e2sn1]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-cn0v7e2sn1]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-cn0v7e2sn1]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-cn0v7e2sn1]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-cn0v7e2sn1] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-cn0v7e2sn1] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceChecklistItemDetailsGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE CHECKLIST ITEM DETAILS GRID - COMPACT VERSION ===== */

.custom-grid-container[b-8wlhkq7r26] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-8wlhkq7r26] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-8wlhkq7r26] {
    display: flex;
    gap: 6px;
}

.toolbar-right[b-8wlhkq7r26] {
    display: flex;
    gap: 6px;
}

.toolbar-btn[b-8wlhkq7r26] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-8wlhkq7r26] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-8wlhkq7r26] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-8wlhkq7r26] {
        font-size: 18px;
    }

.refresh-btn[b-8wlhkq7r26] {
    padding: 6px 8px;
}

.search-box[b-8wlhkq7r26] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 180px;
    max-width: 100%;
    height: 32px;
}

.search-icon[b-8wlhkq7r26] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
}

.search-input[b-8wlhkq7r26] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    color: #333;
}

    .search-input[b-8wlhkq7r26]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-8wlhkq7r26] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-8wlhkq7r26] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-8wlhkq7r26] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-8wlhkq7r26] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-8wlhkq7r26] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 28px;
}

.header-row[b-8wlhkq7r26] {
    background: #f5f5f5;
}

.custom-grid-cell[b-8wlhkq7r26] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-8wlhkq7r26] {
        border-right: none;
    }

.header-cell[b-8wlhkq7r26] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-8wlhkq7r26] {
        background: #e8e8e8;
    }

.sort-icon[b-8wlhkq7r26] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-8wlhkq7r26] {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
}

/* Grid Body */
.custom-grid-body[b-8wlhkq7r26] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-8wlhkq7r26] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-8wlhkq7r26] {
        background-color: white;
    }

    .data-row.odd-row[b-8wlhkq7r26] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-8wlhkq7r26] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-8wlhkq7r26] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    [b-8wlhkq7r26] .source-grid .data-row.selected,
    .data-row.selected[b-8wlhkq7r26] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-8wlhkq7r26] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-8wlhkq7r26] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-8wlhkq7r26] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-8wlhkq7r26] {
                padding-left: 2px;
            }

    .data-row[b-8wlhkq7r26]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-8wlhkq7r26]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-8wlhkq7r26]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-8wlhkq7r26] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-8wlhkq7r26] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-8wlhkq7r26] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-8wlhkq7r26] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-8wlhkq7r26] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-8wlhkq7r26 1s linear infinite;
}

@keyframes spin-b-8wlhkq7r26 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-8wlhkq7r26] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-8wlhkq7r26] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-8wlhkq7r26]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-8wlhkq7r26]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-8wlhkq7r26]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-8wlhkq7r26]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-8wlhkq7r26] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-8wlhkq7r26] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceChecklistItemsGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE CHECKLIST ITEMS GRID - COMPACT VERSION ===== */

.custom-grid-container[b-z3w786h757] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-z3w786h757] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-z3w786h757] {
    display: flex;
    gap: 6px;
}

.toolbar-right[b-z3w786h757] {
    display: flex;
    gap: 6px;
}

.toolbar-btn[b-z3w786h757] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-z3w786h757] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-z3w786h757] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-z3w786h757] {
        font-size: 18px;
    }

.refresh-btn[b-z3w786h757] {
    padding: 6px 8px;
}

.search-box[b-z3w786h757] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 180px;
    max-width: 100%;
    height: 32px;
}

.search-icon[b-z3w786h757] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
}

.search-input[b-z3w786h757] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    color: #333;
}

    .search-input[b-z3w786h757]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-z3w786h757] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-z3w786h757] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-z3w786h757] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-z3w786h757] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-z3w786h757] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 28px;
}

.header-row[b-z3w786h757] {
    background: #f5f5f5;
}

.custom-grid-cell[b-z3w786h757] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-z3w786h757] {
        border-right: none;
    }

.header-cell[b-z3w786h757] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-z3w786h757] {
        background: #e8e8e8;
    }

.sort-icon[b-z3w786h757] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-z3w786h757] {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
}

/* Grid Body */
.custom-grid-body[b-z3w786h757] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-z3w786h757] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-z3w786h757] {
        background-color: white;
    }

    .data-row.odd-row[b-z3w786h757] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-z3w786h757] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-z3w786h757] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    [b-z3w786h757] .source-grid .data-row.selected,
    .data-row.selected[b-z3w786h757] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-z3w786h757] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-z3w786h757] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-z3w786h757] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-z3w786h757] {
                padding-left: 2px;
            }

    .data-row[b-z3w786h757]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-z3w786h757]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-z3w786h757]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-z3w786h757] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-z3w786h757] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-z3w786h757] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-z3w786h757] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-z3w786h757] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-z3w786h757 1s linear infinite;
}

@keyframes spin-b-z3w786h757 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-z3w786h757] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-z3w786h757] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-z3w786h757]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-z3w786h757]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-z3w786h757]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-z3w786h757]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-z3w786h757] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-z3w786h757] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceChecklistScopeGrid.razor.rz.scp.css */
/* ===== CUSTOM CHECKLIST SCOPE GRID ===== */

.custom-grid-container[b-lzk5v8ql49] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-lzk5v8ql49] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-lzk5v8ql49] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-lzk5v8ql49] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-lzk5v8ql49] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-lzk5v8ql49] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-lzk5v8ql49] {
            color: white;
        }

    .toolbar-btn .material-icons[b-lzk5v8ql49] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-lzk5v8ql49] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-lzk5v8ql49] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-lzk5v8ql49] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
    flex-shrink: 0;
}

.search-input[b-lzk5v8ql49] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-lzk5v8ql49]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-lzk5v8ql49] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-lzk5v8ql49] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-lzk5v8ql49] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-lzk5v8ql49] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-lzk5v8ql49] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.custom-grid-row[b-lzk5v8ql49] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.header-cell[b-lzk5v8ql49] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-lzk5v8ql49] {
        border-right: none;
    }

    .header-cell:hover[b-lzk5v8ql49] {
        background: #e8e8e8;
    }

.sort-icon[b-lzk5v8ql49] {
    font-size: 16px;
    color: #E36F26;
}

.custom-grid-cell[b-lzk5v8ql49] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-lzk5v8ql49] {
        border-right: none;
    }

.cell-content[b-lzk5v8ql49] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

/* Grid Body */
.custom-grid-body[b-lzk5v8ql49] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-lzk5v8ql49] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-lzk5v8ql49] {
        background-color: white;
    }

    .data-row.odd-row[b-lzk5v8ql49] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-lzk5v8ql49] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-lzk5v8ql49] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    /* Selected row styling - DARK GREY BACKGROUND WITH ORANGE LEFT BORDER */
    [b-lzk5v8ql49] .source-grid .data-row.selected,
    .data-row.selected[b-lzk5v8ql49] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-lzk5v8ql49] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-lzk5v8ql49] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-lzk5v8ql49] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-lzk5v8ql49] {
                padding-left: 2px;
            }

        /* Selected row hover - keep selection styling */
        .data-row.selected:hover[b-lzk5v8ql49] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.5) !important;
            font-weight: 700 !important;
            transform: scale(1.01);
        }

            .data-row.selected:hover .custom-grid-cell[b-lzk5v8ql49] {
                font-weight: 700 !important;
                color: #333 !important;
            }

    /* Tooltip */
    .data-row[b-lzk5v8ql49]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-lzk5v8ql49]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-lzk5v8ql49]::after {
        opacity: 1;
    }

    /* Hide tooltip on selected rows */
    .data-row.selected[b-lzk5v8ql49]::after {
        display: none;
    }

/* Grid Footer */
.custom-grid-footer[b-lzk5v8ql49] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
}

.footer-info[b-lzk5v8ql49] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-lzk5v8ql49] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-lzk5v8ql49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-lzk5v8ql49] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-lzk5v8ql49 1s linear infinite;
}

@keyframes spin-b-lzk5v8ql49 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-lzk5v8ql49] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-lzk5v8ql49] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-lzk5v8ql49]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-lzk5v8ql49]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-lzk5v8ql49]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-lzk5v8ql49]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-lzk5v8ql49] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-lzk5v8ql49] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceChecklistTypeGrid.razor.rz.scp.css */
/* ===== CUSTOM CHECKLIST TYPE GRID ===== */

.custom-grid-container[b-r6v05j2thz] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-r6v05j2thz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-r6v05j2thz] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-r6v05j2thz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-r6v05j2thz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-r6v05j2thz] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-r6v05j2thz] {
            color: white;
        }

    .toolbar-btn .material-icons[b-r6v05j2thz] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-r6v05j2thz] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-r6v05j2thz] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-r6v05j2thz] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
    flex-shrink: 0;
}

.search-input[b-r6v05j2thz] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-r6v05j2thz]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-r6v05j2thz] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-r6v05j2thz] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-r6v05j2thz] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-r6v05j2thz] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-r6v05j2thz] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.custom-grid-row[b-r6v05j2thz] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.header-cell[b-r6v05j2thz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-r6v05j2thz] {
        border-right: none;
    }

    .header-cell:hover[b-r6v05j2thz] {
        background: #e8e8e8;
    }

.sort-icon[b-r6v05j2thz] {
    font-size: 16px;
    color: #E36F26;
}

.custom-grid-cell[b-r6v05j2thz] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-r6v05j2thz] {
        border-right: none;
    }

.cell-content[b-r6v05j2thz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

/* Grid Body */
.custom-grid-body[b-r6v05j2thz] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-r6v05j2thz] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-r6v05j2thz] {
        background-color: white;
    }

    .data-row.odd-row[b-r6v05j2thz] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-r6v05j2thz] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-r6v05j2thz] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    /* Selected row styling - DARK GREY BACKGROUND WITH ORANGE LEFT BORDER */
    [b-r6v05j2thz] .source-grid .data-row.selected,
    .data-row.selected[b-r6v05j2thz] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-r6v05j2thz] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-r6v05j2thz] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-r6v05j2thz] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-r6v05j2thz] {
                padding-left: 2px;
            }

        /* Selected row hover - keep selection styling */
        .data-row.selected:hover[b-r6v05j2thz] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.5) !important;
            font-weight: 700 !important;
            transform: scale(1.01);
        }

            .data-row.selected:hover .custom-grid-cell[b-r6v05j2thz] {
                font-weight: 700 !important;
                color: #333 !important;
            }

    /* Tooltip */
    .data-row[b-r6v05j2thz]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-r6v05j2thz]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-r6v05j2thz]::after {
        opacity: 1;
    }

    /* Hide tooltip on selected rows */
    .data-row.selected[b-r6v05j2thz]::after {
        display: none;
    }

/* Grid Footer */
.custom-grid-footer[b-r6v05j2thz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
}

.footer-info[b-r6v05j2thz] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-r6v05j2thz] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-r6v05j2thz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-r6v05j2thz] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-r6v05j2thz 1s linear infinite;
}

@keyframes spin-b-r6v05j2thz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-r6v05j2thz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-r6v05j2thz] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-r6v05j2thz]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-r6v05j2thz]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-r6v05j2thz]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-r6v05j2thz]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-r6v05j2thz] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-r6v05j2thz] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceClientGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-23dhg5l0ke] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-23dhg5l0ke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-23dhg5l0ke] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.toolbar-right[b-23dhg5l0ke] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 280px;
}

.toolbar-btn[b-23dhg5l0ke] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-23dhg5l0ke] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-23dhg5l0ke] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-23dhg5l0ke] {
        font-size: 18px;
    }

.refresh-btn[b-23dhg5l0ke] {
    padding: 6px 8px;
}

.search-box[b-23dhg5l0ke] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 120px;
    max-width: 250px;
    width: 100%;
    flex: 1 1 auto;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-23dhg5l0ke] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-23dhg5l0ke] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-23dhg5l0ke] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 60px;
}

    .search-input[b-23dhg5l0ke]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-23dhg5l0ke] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-23dhg5l0ke] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-23dhg5l0ke] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-23dhg5l0ke] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-23dhg5l0ke] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-23dhg5l0ke] {
    background: #f5f5f5;
}

.custom-grid-cell[b-23dhg5l0ke] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-23dhg5l0ke] {
        border-right: none;
    }

.header-cell[b-23dhg5l0ke] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-23dhg5l0ke] {
        background: #e8e8e8;
    }

.sort-icon[b-23dhg5l0ke] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-23dhg5l0ke] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Body */
.custom-grid-body[b-23dhg5l0ke] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-23dhg5l0ke] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-23dhg5l0ke] {
        background-color: white;
    }

    .data-row.odd-row[b-23dhg5l0ke] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-23dhg5l0ke] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-23dhg5l0ke] {
            font-weight: 700 !important;
        }

    /* Use ::deep to penetrate CSS isolation for dynamically added classes */
    [b-23dhg5l0ke] .source-grid .data-row.selected,
    .data-row.selected[b-23dhg5l0ke] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-23dhg5l0ke] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-23dhg5l0ke] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-23dhg5l0ke] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-23dhg5l0ke] {
                padding-left: 2px;
            }

    .data-row[b-23dhg5l0ke]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-23dhg5l0ke]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-23dhg5l0ke]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-23dhg5l0ke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-23dhg5l0ke] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-23dhg5l0ke] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-23dhg5l0ke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-23dhg5l0ke] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-23dhg5l0ke 1s linear infinite;
}

@keyframes spin-b-23dhg5l0ke {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-23dhg5l0ke] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-23dhg5l0ke] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-23dhg5l0ke]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-23dhg5l0ke]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-23dhg5l0ke]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-23dhg5l0ke]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-23dhg5l0ke] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-23dhg5l0ke] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceEstoppelGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-r04txm6wes] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar - Now supports stacked layout in toolbar-right */
.custom-grid-toolbar[b-r04txm6wes] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Changed from center to flex-start */
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.toolbar-left[b-r04txm6wes] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
}

.toolbar-right[b-r04txm6wes] {
    display: flex;
    align-items: flex-end; /* Align to bottom */
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* NEW: Stacked container for search + checkbox */
.toolbar-right-stack[b-r04txm6wes] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    width: 100%;
    max-width: 220px;
}

.toolbar-btn[b-r04txm6wes] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-r04txm6wes] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-r04txm6wes] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-r04txm6wes] {
        font-size: 18px;
    }

.refresh-btn[b-r04txm6wes] {
    padding: 6px 8px;
    flex-shrink: 0;
}

/* Search box - now full width within stack */
.search-box[b-r04txm6wes] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    width: 100%;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-r04txm6wes] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-r04txm6wes] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-r04txm6wes] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 60px;
}

    .search-input[b-r04txm6wes]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-r04txm6wes] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-r04txm6wes] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-r04txm6wes] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-r04txm6wes] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-r04txm6wes] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-r04txm6wes] {
    background: #f5f5f5;
}

.custom-grid-cell[b-r04txm6wes] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-r04txm6wes] {
        border-right: none;
    }

.header-cell[b-r04txm6wes] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-r04txm6wes] {
        background: #e8e8e8;
    }

.sort-icon[b-r04txm6wes] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-r04txm6wes] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Body */
.custom-grid-body[b-r04txm6wes] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-r04txm6wes] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-r04txm6wes] {
        background-color: white;
    }

    .data-row.odd-row[b-r04txm6wes] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-r04txm6wes] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-r04txm6wes] {
            font-weight: 700 !important;
        }

    [b-r04txm6wes] .source-grid .data-row.selected,
    .data-row.selected[b-r04txm6wes] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-r04txm6wes] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-r04txm6wes] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-r04txm6wes] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-r04txm6wes] {
                padding-left: 2px;
            }

    .data-row[b-r04txm6wes]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-r04txm6wes]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-r04txm6wes]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-r04txm6wes] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-r04txm6wes] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-r04txm6wes] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-r04txm6wes] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-r04txm6wes] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-r04txm6wes 1s linear infinite;
}

@keyframes spin-b-r04txm6wes {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-r04txm6wes] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-r04txm6wes] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-r04txm6wes]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-r04txm6wes]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-r04txm6wes]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-r04txm6wes]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-r04txm6wes] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-r04txm6wes] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceFloorsGrid.razor.rz.scp.css */
.custom-grid-container[b-1suv5hp7vo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.custom-grid-toolbar[b-1suv5hp7vo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-1suv5hp7vo] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-1suv5hp7vo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-1suv5hp7vo] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

    .toolbar-btn:hover[b-1suv5hp7vo] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-1suv5hp7vo] {
            color: white;
        }

    .toolbar-btn .material-icons[b-1suv5hp7vo] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-1suv5hp7vo] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 180px;
    max-width: 250px;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-1suv5hp7vo] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-1suv5hp7vo] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-1suv5hp7vo] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 2px;
    background: transparent;
    min-width: 0;
}

    .search-input[b-1suv5hp7vo]::placeholder {
        color: #999;
        font-size: 11px;
    }

    .search-input:disabled[b-1suv5hp7vo] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-1suv5hp7vo] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-1suv5hp7vo] {
        color: #E36F26;
    }

.custom-grid-header[b-1suv5hp7vo] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-1suv5hp7vo] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.custom-grid-row[b-1suv5hp7vo] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.header-cell[b-1suv5hp7vo] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    min-width: 0;
    overflow: hidden;
}

    .header-cell:last-child[b-1suv5hp7vo] {
        border-right: none;
    }

    .header-cell:hover[b-1suv5hp7vo] {
        background: #e8e8e8;
    }

.sort-icon[b-1suv5hp7vo] {
    font-size: 16px;
    color: #E36F26;
    flex-shrink: 0;
}

.custom-grid-cell[b-1suv5hp7vo] {
    padding: 4px 8px;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    color: #333;
    min-width: 0;
    overflow: hidden;
}

    .custom-grid-cell:last-child[b-1suv5hp7vo] {
        border-right: none;
    }

.cell-content[b-1suv5hp7vo] {
    width: 100%;
    color: #333;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 2px 0;
}

.custom-grid-body[b-1suv5hp7vo] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-1suv5hp7vo] {
    cursor: pointer;
    transition: background-color 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-1suv5hp7vo] {
        background-color: white;
    }

    .data-row.odd-row[b-1suv5hp7vo] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-1suv5hp7vo] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-1suv5hp7vo] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    [b-1suv5hp7vo] .source-grid .data-row.selected,
    .data-row.selected[b-1suv5hp7vo] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-1suv5hp7vo] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-1suv5hp7vo] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-1suv5hp7vo] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-1suv5hp7vo] {
                padding-left: 2px;
            }

        .data-row.selected:hover[b-1suv5hp7vo] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.5) !important;
            font-weight: 700 !important;
        }

            .data-row.selected:hover .custom-grid-cell[b-1suv5hp7vo] {
                font-weight: 700 !important;
                color: #333 !important;
            }

    .data-row[b-1suv5hp7vo]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-1suv5hp7vo]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-1suv5hp7vo]::after {
        opacity: 1;
    }

    .data-row.selected[b-1suv5hp7vo]::after {
        display: none;
    }

.custom-grid-footer[b-1suv5hp7vo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
}

.footer-info[b-1suv5hp7vo] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-1suv5hp7vo] {
    color: #E36F26;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loading-overlay[b-1suv5hp7vo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-1suv5hp7vo] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-1suv5hp7vo 1s linear infinite;
}

@keyframes spin-b-1suv5hp7vo {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-1suv5hp7vo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-1suv5hp7vo] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.custom-grid-body[b-1suv5hp7vo]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-1suv5hp7vo]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-1suv5hp7vo]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-1suv5hp7vo]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.custom-grid-container.disabled[b-1suv5hp7vo] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-1suv5hp7vo] {
        cursor: not-allowed;
    }

.wizard-top-row .wizard-grid-section .source-grid .search-box[b-1suv5hp7vo] {
    min-width: 70px !important;
    max-width: 120px !important;
}

.wizard-top-row .wizard-grid-section .source-grid .search-input[b-1suv5hp7vo] {
    font-size: 14px !important;
    padding: 3px !important;
}

.wizard-top-row .wizard-grid-section .source-grid .search-icon[b-1suv5hp7vo],
.wizard-top-row .wizard-grid-section .source-grid .clear-icon[b-1suv5hp7vo] {
    font-size: 14px !important;
}

.wizard-top-row .custom-grid-body .data-row[b-1suv5hp7vo] {
    box-sizing: border-box;
}

    .wizard-top-row .custom-grid-body .data-row.selected[b-1suv5hp7vo] {
        box-shadow: inset 0 0 0 2px #E36F26 !important;
        border: none !important;
    }

    .wizard-top-row .custom-grid-body .data-row:not(.selected)[b-1suv5hp7vo] {
        box-shadow: none !important;
    }
/* /Components/CustomSourceOrganizationGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-fmm56m6pk4] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-fmm56m6pk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-fmm56m6pk4] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.toolbar-right[b-fmm56m6pk4] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 280px;
}

.toolbar-btn[b-fmm56m6pk4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-fmm56m6pk4] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-fmm56m6pk4] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-fmm56m6pk4] {
        font-size: 18px;
    }

.refresh-btn[b-fmm56m6pk4] {
    padding: 6px 8px;
}

.search-box[b-fmm56m6pk4] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 120px;
    max-width: 250px;
    width: 100%;
    flex: 1 1 auto;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-fmm56m6pk4] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-fmm56m6pk4] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-fmm56m6pk4] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 60px;
}

    .search-input[b-fmm56m6pk4]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-fmm56m6pk4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-fmm56m6pk4] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-fmm56m6pk4] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-fmm56m6pk4] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-fmm56m6pk4] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-fmm56m6pk4] {
    background: #f5f5f5;
}

.custom-grid-cell[b-fmm56m6pk4] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-fmm56m6pk4] {
        border-right: none;
    }

.header-cell[b-fmm56m6pk4] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-fmm56m6pk4] {
        background: #e8e8e8;
    }

.sort-icon[b-fmm56m6pk4] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-fmm56m6pk4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Body */
.custom-grid-body[b-fmm56m6pk4] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-fmm56m6pk4] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-fmm56m6pk4] {
        background-color: white;
    }

    .data-row.odd-row[b-fmm56m6pk4] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-fmm56m6pk4] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-fmm56m6pk4] {
            font-weight: 700 !important;
        }

    /* Use ::deep to penetrate CSS isolation for dynamically added classes */
    [b-fmm56m6pk4] .source-grid .data-row.selected,
    .data-row.selected[b-fmm56m6pk4] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-fmm56m6pk4] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-fmm56m6pk4] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-fmm56m6pk4] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-fmm56m6pk4] {
                padding-left: 2px;
            }

    .data-row[b-fmm56m6pk4]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-fmm56m6pk4]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-fmm56m6pk4]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-fmm56m6pk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-fmm56m6pk4] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-fmm56m6pk4] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-fmm56m6pk4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-fmm56m6pk4] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-fmm56m6pk4 1s linear infinite;
}

@keyframes spin-b-fmm56m6pk4 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-fmm56m6pk4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-fmm56m6pk4] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-fmm56m6pk4]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-fmm56m6pk4]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-fmm56m6pk4]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-fmm56m6pk4]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-fmm56m6pk4] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-fmm56m6pk4] {
        cursor: not-allowed;
    }
/* /Components/CustomSourcePoolsGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE REPORTS GRID - MATCHES OTHER CUSTOM GRIDS ===== */

.custom-source-grid-container[b-paj9zrtv04] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* ===== HEADER ===== */
.custom-grid-header[b-paj9zrtv04] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 2px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.header-left[b-paj9zrtv04] {
    flex: 0 1 auto;
}

.header-center[b-paj9zrtv04] {
    flex: 1;
    text-align: center;
}

.header-title[b-paj9zrtv04] {
    font-weight: 700;
    font-size: 1.1em;
    color: #E36F26;
}

.header-right[b-paj9zrtv04] {
    flex: 0 1 auto;
}

.icon-button[b-paj9zrtv04] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px;
    transition: all 0.2s;
    height: 32px;
    width: 32px;
}

    .icon-button:hover:not(:disabled)[b-paj9zrtv04] {
        background: #E36F26;
        border-color: #E36F26;
    }

        .icon-button:hover:not(:disabled) .material-icons[b-paj9zrtv04] {
            color: white;
        }

    .icon-button:disabled[b-paj9zrtv04] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .icon-button .material-icons[b-paj9zrtv04] {
        font-size: 18px;
        color: #E36F26;
    }

/* ===== SEARCH ===== */
.search-container[b-paj9zrtv04] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-paj9zrtv04] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 34px 4px 10px;
    font-size: 11px;
    width: 200px;
    height: 32px;
    transition: border-color 0.2s;
}

    .search-input:focus[b-paj9zrtv04] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-paj9zrtv04] {
    position: absolute;
    right: 8px;
    color: #666;
    font-size: 18px;
    pointer-events: none;
}

.search-clear-btn[b-paj9zrtv04] {
    position: absolute;
    right: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-clear-btn .material-icons[b-paj9zrtv04] {
        font-size: 16px;
        color: #999;
    }

    .search-clear-btn:hover .material-icons[b-paj9zrtv04] {
        color: #E36F26;
    }

/* ===== GRID BODY ===== */
.custom-grid-body[b-paj9zrtv04] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.grid-loading[b-paj9zrtv04],
.grid-empty[b-paj9zrtv04] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-style: italic;
}

.custom-grid-table[b-paj9zrtv04] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .custom-grid-table thead[b-paj9zrtv04] {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 10;
    }

    .custom-grid-table th[b-paj9zrtv04] {
        padding: 6px;
        text-align: left;
        font-weight: 700;
        color: #333;
        border-bottom: 2px solid #ddd;
        background: #f5f5f5;
        height: 28px;
    }

    .custom-grid-table tbody tr[b-paj9zrtv04] {
        cursor: pointer;
        transition: background-color 0.1s ease;
        border-bottom: 1px solid #e8e8e8;
        height: 28px;
        position: relative;
    }

        .custom-grid-table tbody tr:nth-child(even)[b-paj9zrtv04] {
            background-color: white;
        }

        .custom-grid-table tbody tr:nth-child(odd)[b-paj9zrtv04] {
            background-color: #f5f5f5;
        }

        .custom-grid-table tbody tr:hover[b-paj9zrtv04] {
            background-color: #e0e0e0 !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
        }

            .custom-grid-table tbody tr:hover td[b-paj9zrtv04] {
                font-weight: 700 !important;
            }

        .custom-grid-table tbody tr.selected[b-paj9zrtv04] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
            font-weight: 700 !important;
        }

            .custom-grid-table tbody tr.selected td[b-paj9zrtv04] {
                font-weight: 700 !important;
                color: #333 !important;
            }

                .custom-grid-table tbody tr.selected td:first-child[b-paj9zrtv04] {
                    padding-left: 2px;
                }

        .custom-grid-table tbody tr:focus[b-paj9zrtv04] {
            outline: 2px solid #E36F26;
            outline-offset: -2px;
        }

        .custom-grid-table tbody tr[b-paj9zrtv04]::after {
            content: "Click to select.";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 100%;
            margin-bottom: 3px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 1000;
        }

        .custom-grid-table tbody tr:first-child[b-paj9zrtv04]::after {
            bottom: auto;
            top: 100%;
            margin-bottom: 0;
            margin-top: 3px;
        }

        .custom-grid-table tbody tr:hover[b-paj9zrtv04]::after {
            opacity: 1;
        }

    .custom-grid-table td[b-paj9zrtv04] {
        padding: 3px 6px;
        color: #333;
        line-height: 1.3;
    }

.cell-content[b-paj9zrtv04] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cell-content input[type="checkbox"][b-paj9zrtv04] {
        cursor: pointer;
        width: 14px;
        height: 14px;
        accent-color: #E36F26;
        flex-shrink: 0;
    }

    .cell-content span[b-paj9zrtv04] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ===== FOOTER ===== */
.custom-grid-footer[b-paj9zrtv04] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.selection-count[b-paj9zrtv04] {
    color: #666;
    font-weight: 600;
}

/* ===== SCROLLBAR ===== */
.custom-grid-body[b-paj9zrtv04]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-paj9zrtv04]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-paj9zrtv04]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-paj9zrtv04]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* ===== DISABLED STATE ===== */
.custom-source-grid-container.disabled[b-paj9zrtv04] {
    pointer-events: none;
    opacity: 0.5;
}
/* /Components/CustomSourceProjectGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-h5exoz9ted] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-h5exoz9ted] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-h5exoz9ted] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.toolbar-right[b-h5exoz9ted] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 280px;
}

.toolbar-btn[b-h5exoz9ted] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-h5exoz9ted] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-h5exoz9ted] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-h5exoz9ted] {
        font-size: 18px;
    }

.refresh-btn[b-h5exoz9ted] {
    padding: 6px 8px;
}

.search-box[b-h5exoz9ted] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 120px;
    max-width: 250px;
    width: 100%;
    flex: 1 1 auto;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-h5exoz9ted] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-h5exoz9ted] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-h5exoz9ted] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 60px;
}

    .search-input[b-h5exoz9ted]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-h5exoz9ted] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-h5exoz9ted] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-h5exoz9ted] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-h5exoz9ted] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-h5exoz9ted] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-h5exoz9ted] {
    background: #f5f5f5;
}

.custom-grid-cell[b-h5exoz9ted] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-h5exoz9ted] {
        border-right: none;
    }

.header-cell[b-h5exoz9ted] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-h5exoz9ted] {
        background: #e8e8e8;
    }

.sort-icon[b-h5exoz9ted] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-h5exoz9ted] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Body */
.custom-grid-body[b-h5exoz9ted] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-h5exoz9ted] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-h5exoz9ted] {
        background-color: white;
    }

    .data-row.odd-row[b-h5exoz9ted] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-h5exoz9ted] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-h5exoz9ted] {
            font-weight: 700 !important;
        }

    /* Use ::deep to penetrate CSS isolation for dynamically added classes */
    [b-h5exoz9ted] .source-grid .data-row.selected,
    .data-row.selected[b-h5exoz9ted] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-h5exoz9ted] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-h5exoz9ted] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-h5exoz9ted] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-h5exoz9ted] {
                padding-left: 2px;
            }

    .data-row[b-h5exoz9ted]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-h5exoz9ted]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-h5exoz9ted]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-h5exoz9ted] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-h5exoz9ted] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-h5exoz9ted] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-h5exoz9ted] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-h5exoz9ted] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-h5exoz9ted 1s linear infinite;
}

@keyframes spin-b-h5exoz9ted {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-h5exoz9ted] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-h5exoz9ted] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-h5exoz9ted]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-h5exoz9ted]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-h5exoz9ted]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-h5exoz9ted]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-h5exoz9ted] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-h5exoz9ted] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceRecordChartItemsGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE RECORD CHART ITEMS GRID - MATCHES CUSTOM SOURCE CHART ITEMS ===== */

.custom-source-grid-container[b-l8jwqn71n8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* ===== HEADER ===== */
.custom-grid-header[b-l8jwqn71n8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 2px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.header-left[b-l8jwqn71n8] {
    flex: 0 1 auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-center[b-l8jwqn71n8] {
    flex: 1;
    text-align: center;
}

.header-title[b-l8jwqn71n8] {
    font-weight: 700;
    font-size: 1.1em;
    color: #E36F26;
}

.header-right[b-l8jwqn71n8] {
    flex: 0 1 auto;
}

/* ===== ACTION BUTTONS (Refresh) ===== */
.action-btn[b-l8jwqn71n8] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .action-btn:hover:not(:disabled)[b-l8jwqn71n8] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .action-btn:hover:not(:disabled) .material-icons[b-l8jwqn71n8] {
            color: white;
        }

    .action-btn:disabled[b-l8jwqn71n8] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .action-btn .material-icons[b-l8jwqn71n8] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

/* ===== SEARCH ===== */
.search-container[b-l8jwqn71n8] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-l8jwqn71n8] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 34px 4px 10px;
    font-size: 11px;
    width: 200px;
    height: 32px;
    transition: border-color 0.2s;
}

    .search-input:focus[b-l8jwqn71n8] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-l8jwqn71n8] {
    position: absolute;
    right: 8px;
    color: #666;
    font-size: 18px;
    pointer-events: none;
}

.search-clear-btn[b-l8jwqn71n8] {
    position: absolute;
    right: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-clear-btn .material-icons[b-l8jwqn71n8] {
        font-size: 16px;
        color: #999;
    }

    .search-clear-btn:hover .material-icons[b-l8jwqn71n8] {
        color: #E36F26;
    }

/* ===== GRID BODY ===== */
.custom-grid-body[b-l8jwqn71n8] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.grid-loading[b-l8jwqn71n8],
.grid-empty[b-l8jwqn71n8] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-style: italic;
}

.custom-grid-table[b-l8jwqn71n8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .custom-grid-table thead[b-l8jwqn71n8] {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 10;
    }

    .custom-grid-table th[b-l8jwqn71n8] {
        padding: 6px;
        text-align: left;
        font-weight: 700;
        color: #333;
        border-bottom: 2px solid #ddd;
        background: #f5f5f5;
        height: 28px;
    }

    .custom-grid-table tbody tr[b-l8jwqn71n8] {
        cursor: pointer;
        transition: background-color 0.1s ease;
        border-bottom: 1px solid #e8e8e8;
        height: 28px;
        position: relative;
    }

        .custom-grid-table tbody tr:nth-child(even)[b-l8jwqn71n8] {
            background-color: white;
        }

        .custom-grid-table tbody tr:nth-child(odd)[b-l8jwqn71n8] {
            background-color: #f5f5f5;
        }

        .custom-grid-table tbody tr:hover[b-l8jwqn71n8] {
            background-color: #e0e0e0 !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
        }

            .custom-grid-table tbody tr:hover td[b-l8jwqn71n8] {
                font-weight: 700 !important;
            }

        .custom-grid-table tbody tr.selected[b-l8jwqn71n8] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
            font-weight: 700 !important;
        }

            .custom-grid-table tbody tr.selected td[b-l8jwqn71n8] {
                font-weight: 700 !important;
                color: #333 !important;
            }

                .custom-grid-table tbody tr.selected td:first-child[b-l8jwqn71n8] {
                    padding-left: 2px;
                }

        .custom-grid-table tbody tr:focus[b-l8jwqn71n8] {
            outline: 2px solid #E36F26;
            outline-offset: -2px;
        }

        .custom-grid-table tbody tr[b-l8jwqn71n8]::after {
            content: "Click to select.";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 100%;
            margin-bottom: 3px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 1000;
        }

        .custom-grid-table tbody tr:first-child[b-l8jwqn71n8]::after {
            bottom: auto;
            top: 100%;
            margin-bottom: 0;
            margin-top: 3px;
        }

        .custom-grid-table tbody tr:hover[b-l8jwqn71n8]::after {
            opacity: 1;
        }

    .custom-grid-table td[b-l8jwqn71n8] {
        padding: 3px 6px;
        color: #333;
        line-height: 1.3;
    }

.cell-content[b-l8jwqn71n8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cell-content input[type="checkbox"][b-l8jwqn71n8] {
        cursor: pointer;
        width: 14px;
        height: 14px;
        accent-color: #E36F26;
        flex-shrink: 0;
    }

    .cell-content span[b-l8jwqn71n8] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ===== FOOTER ===== */
.custom-grid-footer[b-l8jwqn71n8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.selection-count[b-l8jwqn71n8] {
    color: #666;
    font-weight: 600;
}

/* ===== SCROLLBAR ===== */
.custom-grid-body[b-l8jwqn71n8]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-l8jwqn71n8]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-l8jwqn71n8]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-l8jwqn71n8]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* ===== DISABLED STATE ===== */
.custom-source-grid-container.disabled[b-l8jwqn71n8] {
    pointer-events: none;
    opacity: 0.5;
}

/* ===== LOADING OVERLAY ===== */
.loading-overlay[b-l8jwqn71n8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em;
    color: #666;
}

.spinner[b-l8jwqn71n8] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-l8jwqn71n8 1s linear infinite;
    margin-bottom: 1em;
}

@keyframes spin-b-l8jwqn71n8 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== NO DATA MESSAGE ===== */
.no-data-message[b-l8jwqn71n8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3em;
    color: #999;
}

    .no-data-message .material-icons[b-l8jwqn71n8] {
        font-size: 48px;
        margin-bottom: 0.5em;
        color: #ddd;
    }

    .no-data-message p[b-l8jwqn71n8] {
        font-size: 14px;
        font-style: italic;
    }
/* /Components/CustomSourceRecordGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-t4q358cbdf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    color: #333;
    /* Add these to ensure container respects parent bounds */
    min-width: 0;
    box-sizing: border-box;
}

/* Toolbar - Stacked layout - CONSTRAINED */
.custom-grid-toolbar[b-t4q358cbdf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.toolbar-left[b-t4q358cbdf] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
}

.toolbar-right[b-t4q358cbdf] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
    overflow: hidden;
}

/* Stacked container for search + checkboxes - FIXED WIDTH */
.toolbar-right-stack[b-t4q358cbdf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Checkbox label styling */
.toolbar-checkbox-label[b-t4q358cbdf] {
    display: flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
    font-size: 9px;
    white-space: nowrap;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .toolbar-checkbox-label input[type="checkbox"][b-t4q358cbdf] {
        cursor: pointer;
        margin: 0;
        flex-shrink: 0;
    }

.toolbar-btn[b-t4q358cbdf] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
}

    .toolbar-btn:hover:not(:disabled)[b-t4q358cbdf] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover:not(:disabled) .material-icons[b-t4q358cbdf] {
            color: white;
        }

    .toolbar-btn:disabled[b-t4q358cbdf] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-t4q358cbdf] {
        font-size: 16px;
        color: #E36F26;
        transition: color 0.2s;
    }

.refresh-btn[b-t4q358cbdf] {
    padding: 4px 6px;
    flex-shrink: 0;
}

/* Search box - FIXED WIDTH to prevent expansion */
.search-box[b-t4q358cbdf] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 6px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    height: 24px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .search-box:focus-within[b-t4q358cbdf] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-t4q358cbdf] {
    font-size: 14px;
    color: #666;
    margin-right: 3px;
    flex-shrink: 0;
}

.search-input[b-t4q358cbdf] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 10px;
    padding: 2px;
    background: transparent;
    min-width: 0;
    width: 100%;
    color: #333;
}

    .search-input[b-t4q358cbdf]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-t4q358cbdf] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-t4q358cbdf] {
    font-size: 14px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 3px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-t4q358cbdf] {
        color: #E36F26;
    }

/* Use Reference Row */
.use-reference-row[b-t4q358cbdf] {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

/* Grid Header */
.custom-grid-header[b-t4q358cbdf] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}

.custom-grid-row[b-t4q358cbdf] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 28px;
    min-width: 0;
}

.header-row[b-t4q358cbdf] {
    background: #f5f5f5;
}

.custom-grid-cell[b-t4q358cbdf] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    min-width: 0;
    overflow: hidden;
    color: #333;
}

    .custom-grid-cell:last-child[b-t4q358cbdf] {
        border-right: none;
    }

.header-cell[b-t4q358cbdf] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-t4q358cbdf] {
        background: #e8e8e8;
    }

.sort-icon[b-t4q358cbdf] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-t4q358cbdf] {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.3;
    color: #333;
    min-width: 0;
}

/* Grid Body */
.custom-grid-body[b-t4q358cbdf] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
    min-width: 0;
}

.data-row[b-t4q358cbdf] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-t4q358cbdf] {
        background-color: white;
    }

    .data-row.odd-row[b-t4q358cbdf] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-t4q358cbdf] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-t4q358cbdf] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    .data-row.selected[b-t4q358cbdf] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        .data-row.selected .custom-grid-cell[b-t4q358cbdf] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            .data-row.selected .custom-grid-cell:first-child[b-t4q358cbdf] {
                padding-left: 2px;
            }

        .data-row.selected:hover[b-t4q358cbdf] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.5) !important;
            font-weight: 700 !important;
        }

            .data-row.selected:hover .custom-grid-cell[b-t4q358cbdf] {
                font-weight: 700 !important;
                color: #333 !important;
            }

    .data-row[b-t4q358cbdf]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-t4q358cbdf]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-t4q358cbdf]::after {
        opacity: 1;
    }

    .data-row.selected[b-t4q358cbdf]::after {
        display: none;
    }

/* Grid Footer */
.custom-grid-footer[b-t4q358cbdf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}

.footer-info[b-t4q358cbdf] {
    display: flex;
    gap: 10px;
    color: #666;
    min-width: 0;
    overflow: hidden;
}

.selected-indicator[b-t4q358cbdf] {
    color: #E36F26;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Loading & No Data */
.loading-overlay[b-t4q358cbdf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-t4q358cbdf] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-t4q358cbdf 1s linear infinite;
}

@keyframes spin-b-t4q358cbdf {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-t4q358cbdf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-t4q358cbdf] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-t4q358cbdf]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-t4q358cbdf]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-t4q358cbdf]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-t4q358cbdf]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-t4q358cbdf] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-t4q358cbdf] {
        cursor: not-allowed;
    }

/* Include Inactive Checkbox */
.checkbox-label[b-t4q358cbdf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    transition: all 0.2s;
}

    .checkbox-label:hover[b-t4q358cbdf] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .checkbox-label input[type="checkbox"][b-t4q358cbdf] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #E36F26;
        margin: 0;
    }

    .checkbox-label:hover input[type="checkbox"][b-t4q358cbdf] {
        accent-color: white;
    }
/* /Components/CustomSourceRecordTypeGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE RECORD TYPE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-b6xoo20zzq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-b6xoo20zzq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-b6xoo20zzq] {
    display: flex;
    gap: 6px;
}

.toolbar-right[b-b6xoo20zzq] {
    display: flex;
    gap: 6px;
}

.toolbar-btn[b-b6xoo20zzq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-b6xoo20zzq] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-b6xoo20zzq] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-b6xoo20zzq] {
        font-size: 18px;
    }

.refresh-btn[b-b6xoo20zzq] {
    padding: 6px 8px;
}

.search-box[b-b6xoo20zzq] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 180px;
    max-width: 100%;
    height: 32px;
}

.search-icon[b-b6xoo20zzq] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
}

.search-input[b-b6xoo20zzq] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 11px;
    padding: 4px;
    background: transparent;
}

    .search-input[b-b6xoo20zzq]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-b6xoo20zzq] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-b6xoo20zzq] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-b6xoo20zzq] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-b6xoo20zzq] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-b6xoo20zzq] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-b6xoo20zzq] {
    background: #f5f5f5;
}

.custom-grid-cell[b-b6xoo20zzq] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-b6xoo20zzq] {
        border-right: none;
    }

.header-cell[b-b6xoo20zzq] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-b6xoo20zzq] {
        background: #e8e8e8;
    }

.sort-icon[b-b6xoo20zzq] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-b6xoo20zzq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Body */
.custom-grid-body[b-b6xoo20zzq] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-b6xoo20zzq] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-b6xoo20zzq] {
        background-color: white;
    }

    .data-row.odd-row[b-b6xoo20zzq] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-b6xoo20zzq] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-b6xoo20zzq] {
            font-weight: 700 !important;
        }

    /* Use ::deep to penetrate CSS isolation for dynamically added classes */
[b-b6xoo20zzq] .source-grid .data-row.selected,
.data-row.selected[b-b6xoo20zzq] {
    background-color: #d0d0d0 !important;
    border-left: 4px solid #E36F26 !important;
    box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
    font-weight: 700 !important;
    padding-left: 0 !important;
}

[b-b6xoo20zzq] .source-grid .data-row.selected .custom-grid-cell,
.data-row.selected .custom-grid-cell[b-b6xoo20zzq] {
    font-weight: 700 !important;
    color: #333 !important;
}

[b-b6xoo20zzq] .source-grid .data-row.selected .custom-grid-cell:first-child,
.data-row.selected .custom-grid-cell:first-child[b-b6xoo20zzq] {
    padding-left: 2px;
}

    .data-row[b-b6xoo20zzq]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-b6xoo20zzq]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-b6xoo20zzq]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-b6xoo20zzq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-b6xoo20zzq] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-b6xoo20zzq] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-b6xoo20zzq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-b6xoo20zzq] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-b6xoo20zzq 1s linear infinite;
}

@keyframes spin-b-b6xoo20zzq {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-b6xoo20zzq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-b6xoo20zzq] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-b6xoo20zzq]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-b6xoo20zzq]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-b6xoo20zzq]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-b6xoo20zzq]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-b6xoo20zzq] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-b6xoo20zzq] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceRecoveryMatrixDetailsGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE REPORTS GRID - MATCHES OTHER CUSTOM GRIDS ===== */

.custom-source-grid-container[b-n9hy9b82jo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* ===== HEADER ===== */
.custom-grid-header[b-n9hy9b82jo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 2px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.header-left[b-n9hy9b82jo] {
    flex: 0 1 auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-center[b-n9hy9b82jo] {
    flex: 1;
    text-align: center;
}

.header-title[b-n9hy9b82jo] {
    font-weight: 700;
    font-size: 1.1em;
    color: #E36F26;
}

.header-right[b-n9hy9b82jo] {
    flex: 0 1 auto;
}

/* ===== ACTION BUTTONS (Select All, Deselect All, Refresh) ===== */
.action-btn[b-n9hy9b82jo] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .action-btn:hover:not(:disabled)[b-n9hy9b82jo] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .action-btn:hover:not(:disabled) .material-icons[b-n9hy9b82jo] {
            color: white;
        }

    .action-btn:disabled[b-n9hy9b82jo] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .action-btn .material-icons[b-n9hy9b82jo] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

/* ===== LEGACY ICON BUTTON (kept for compatibility) ===== */
.icon-button[b-n9hy9b82jo] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px;
    transition: all 0.2s;
    height: 32px;
    width: 32px;
}

    .icon-button:hover:not(:disabled)[b-n9hy9b82jo] {
        background: #E36F26;
        border-color: #E36F26;
    }

        .icon-button:hover:not(:disabled) .material-icons[b-n9hy9b82jo] {
            color: white;
        }

    .icon-button:disabled[b-n9hy9b82jo] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .icon-button .material-icons[b-n9hy9b82jo] {
        font-size: 18px;
        color: #E36F26;
    }

/* ===== SEARCH ===== */
.search-container[b-n9hy9b82jo] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-n9hy9b82jo] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 34px 4px 10px;
    font-size: 11px;
    width: 200px;
    height: 32px;
    transition: border-color 0.2s;
}

    .search-input:focus[b-n9hy9b82jo] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-n9hy9b82jo] {
    position: absolute;
    right: 8px;
    color: #666;
    font-size: 18px;
    pointer-events: none;
}

.search-clear-btn[b-n9hy9b82jo] {
    position: absolute;
    right: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-clear-btn .material-icons[b-n9hy9b82jo] {
        font-size: 16px;
        color: #999;
    }

    .search-clear-btn:hover .material-icons[b-n9hy9b82jo] {
        color: #E36F26;
    }

/* ===== GRID BODY ===== */
.custom-grid-body[b-n9hy9b82jo] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.grid-loading[b-n9hy9b82jo],
.grid-empty[b-n9hy9b82jo] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-style: italic;
}

.custom-grid-table[b-n9hy9b82jo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .custom-grid-table thead[b-n9hy9b82jo] {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 10;
    }

    .custom-grid-table th[b-n9hy9b82jo] {
        padding: 6px;
        text-align: left;
        font-weight: 700;
        color: #333;
        border-bottom: 2px solid #ddd;
        background: #f5f5f5;
        height: 28px;
    }

    .custom-grid-table tbody tr[b-n9hy9b82jo] {
        cursor: pointer;
        transition: background-color 0.1s ease;
        border-bottom: 1px solid #e8e8e8;
        height: 28px;
        position: relative;
    }

        .custom-grid-table tbody tr:nth-child(even)[b-n9hy9b82jo] {
            background-color: white;
        }

        .custom-grid-table tbody tr:nth-child(odd)[b-n9hy9b82jo] {
            background-color: #f5f5f5;
        }

        .custom-grid-table tbody tr:hover[b-n9hy9b82jo] {
            background-color: #e0e0e0 !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
        }

            .custom-grid-table tbody tr:hover td[b-n9hy9b82jo] {
                font-weight: 700 !important;
            }

        .custom-grid-table tbody tr.selected[b-n9hy9b82jo] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
            font-weight: 700 !important;
        }

            .custom-grid-table tbody tr.selected td[b-n9hy9b82jo] {
                font-weight: 700 !important;
                color: #333 !important;
            }

                .custom-grid-table tbody tr.selected td:first-child[b-n9hy9b82jo] {
                    padding-left: 2px;
                }

        .custom-grid-table tbody tr:focus[b-n9hy9b82jo] {
            outline: 2px solid #E36F26;
            outline-offset: -2px;
        }

        .custom-grid-table tbody tr[b-n9hy9b82jo]::after {
            content: "Click to select.";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 100%;
            margin-bottom: 3px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 1000;
        }

        .custom-grid-table tbody tr:first-child[b-n9hy9b82jo]::after {
            bottom: auto;
            top: 100%;
            margin-bottom: 0;
            margin-top: 3px;
        }

        .custom-grid-table tbody tr:hover[b-n9hy9b82jo]::after {
            opacity: 1;
        }

    .custom-grid-table td[b-n9hy9b82jo] {
        padding: 3px 6px;
        color: #333;
        line-height: 1.3;
    }

.cell-content[b-n9hy9b82jo] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cell-content input[type="checkbox"][b-n9hy9b82jo] {
        cursor: pointer;
        width: 14px;
        height: 14px;
        accent-color: #E36F26;
        flex-shrink: 0;
    }

    .cell-content span[b-n9hy9b82jo] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ===== FOOTER ===== */
.custom-grid-footer[b-n9hy9b82jo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.selection-count[b-n9hy9b82jo] {
    color: #666;
    font-weight: 600;
}

/* ===== SCROLLBAR ===== */
.custom-grid-body[b-n9hy9b82jo]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-n9hy9b82jo]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-n9hy9b82jo]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-n9hy9b82jo]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* ===== DISABLED STATE ===== */
.custom-source-grid-container.disabled[b-n9hy9b82jo] {
    pointer-events: none;
    opacity: 0.5;
}
/* /Components/CustomSourceReportsGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE REPORTS GRID - MATCHES OTHER CUSTOM GRIDS ===== */

.custom-source-grid-container[b-v5l8ldx421] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* ===== HEADER ===== */
.custom-grid-header[b-v5l8ldx421] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 2px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.header-left[b-v5l8ldx421] {
    flex: 0 1 auto;
}

.header-center[b-v5l8ldx421] {
    flex: 1;
    text-align: center;
}

.header-title[b-v5l8ldx421] {
    font-weight: 700;
    font-size: 1.1em;
    color: #E36F26;
}

.header-right[b-v5l8ldx421] {
    flex: 0 1 auto;
}

.icon-button[b-v5l8ldx421] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px;
    transition: all 0.2s;
    height: 32px;
    width: 32px;
}

    .icon-button:hover:not(:disabled)[b-v5l8ldx421] {
        background: #E36F26;
        border-color: #E36F26;
    }

        .icon-button:hover:not(:disabled) .material-icons[b-v5l8ldx421] {
            color: white;
        }

    .icon-button:disabled[b-v5l8ldx421] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .icon-button .material-icons[b-v5l8ldx421] {
        font-size: 18px;
        color: #E36F26;
    }

/* ===== SEARCH ===== */
.search-container[b-v5l8ldx421] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-v5l8ldx421] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 34px 4px 10px;
    font-size: 11px;
    width: 200px;
    height: 32px;
    transition: border-color 0.2s;
}

    .search-input:focus[b-v5l8ldx421] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-v5l8ldx421] {
    position: absolute;
    right: 8px;
    color: #666;
    font-size: 18px;
    pointer-events: none;
}

.search-clear-btn[b-v5l8ldx421] {
    position: absolute;
    right: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-clear-btn .material-icons[b-v5l8ldx421] {
        font-size: 16px;
        color: #999;
    }

    .search-clear-btn:hover .material-icons[b-v5l8ldx421] {
        color: #E36F26;
    }

/* ===== GRID BODY ===== */
.custom-grid-body[b-v5l8ldx421] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.grid-loading[b-v5l8ldx421],
.grid-empty[b-v5l8ldx421] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-style: italic;
}

.custom-grid-table[b-v5l8ldx421] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .custom-grid-table thead[b-v5l8ldx421] {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 10;
    }

    .custom-grid-table th[b-v5l8ldx421] {
        padding: 6px;
        text-align: left;
        font-weight: 700;
        color: #333;
        border-bottom: 2px solid #ddd;
        background: #f5f5f5;
        height: 28px;
    }

    .custom-grid-table tbody tr[b-v5l8ldx421] {
        cursor: pointer;
        transition: background-color 0.1s ease;
        border-bottom: 1px solid #e8e8e8;
        height: 28px;
        position: relative;
    }

        .custom-grid-table tbody tr:nth-child(even)[b-v5l8ldx421] {
            background-color: white;
        }

        .custom-grid-table tbody tr:nth-child(odd)[b-v5l8ldx421] {
            background-color: #f5f5f5;
        }

        .custom-grid-table tbody tr:hover[b-v5l8ldx421] {
            background-color: #e0e0e0 !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
        }

            .custom-grid-table tbody tr:hover td[b-v5l8ldx421] {
                font-weight: 700 !important;
            }

        .custom-grid-table tbody tr.selected[b-v5l8ldx421] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
            font-weight: 700 !important;
        }

            .custom-grid-table tbody tr.selected td[b-v5l8ldx421] {
                font-weight: 700 !important;
                color: #333 !important;
            }

                .custom-grid-table tbody tr.selected td:first-child[b-v5l8ldx421] {
                    padding-left: 2px;
                }

        .custom-grid-table tbody tr:focus[b-v5l8ldx421] {
            outline: 2px solid #E36F26;
            outline-offset: -2px;
        }

        .custom-grid-table tbody tr[b-v5l8ldx421]::after {
            content: "Click to select.";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 100%;
            margin-bottom: 3px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 1000;
        }

        .custom-grid-table tbody tr:first-child[b-v5l8ldx421]::after {
            bottom: auto;
            top: 100%;
            margin-bottom: 0;
            margin-top: 3px;
        }

        .custom-grid-table tbody tr:hover[b-v5l8ldx421]::after {
            opacity: 1;
        }

    .custom-grid-table td[b-v5l8ldx421] {
        padding: 3px 6px;
        color: #333;
        line-height: 1.3;
    }

.cell-content[b-v5l8ldx421] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cell-content input[type="checkbox"][b-v5l8ldx421] {
        cursor: pointer;
        width: 14px;
        height: 14px;
        accent-color: #E36F26;
        flex-shrink: 0;
    }

    .cell-content span[b-v5l8ldx421] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ===== FOOTER ===== */
.custom-grid-footer[b-v5l8ldx421] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.selection-count[b-v5l8ldx421] {
    color: #666;
    font-weight: 600;
}

/* ===== SCROLLBAR ===== */
.custom-grid-body[b-v5l8ldx421]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-v5l8ldx421]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-v5l8ldx421]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-v5l8ldx421]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* ===== DISABLED STATE ===== */
.custom-source-grid-container.disabled[b-v5l8ldx421] {
    pointer-events: none;
    opacity: 0.5;
}
/* /Components/CustomSourceSpacesGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE SPACES GRID - COMPACT VERSION ===== */

.custom-grid-container[b-y152zvylxa] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-y152zvylxa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-y152zvylxa] {
    display: flex;
    gap: 6px;
}

.toolbar-right[b-y152zvylxa] {
    display: flex;
    gap: 6px;
}

.toolbar-btn[b-y152zvylxa] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-y152zvylxa] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-y152zvylxa] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-y152zvylxa] {
        font-size: 18px;
    }

.refresh-btn[b-y152zvylxa] {
    padding: 6px 8px;
}

.search-box[b-y152zvylxa] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 180px;
    max-width: 100%;
    height: 32px;
}

.search-icon[b-y152zvylxa] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
}

.search-input[b-y152zvylxa] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    color: #333;
}

    .search-input[b-y152zvylxa]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-y152zvylxa] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-y152zvylxa] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-y152zvylxa] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-y152zvylxa] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-y152zvylxa] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-y152zvylxa] {
    background: #f5f5f5;
}

.custom-grid-cell[b-y152zvylxa] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-y152zvylxa] {
        border-right: none;
    }

.header-cell[b-y152zvylxa] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-y152zvylxa] {
        background: #e8e8e8;
    }

.sort-icon[b-y152zvylxa] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-y152zvylxa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

/* Grid Body */
.custom-grid-body[b-y152zvylxa] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-y152zvylxa] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-y152zvylxa] {
        background-color: white;
    }

    .data-row.odd-row[b-y152zvylxa] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-y152zvylxa] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-y152zvylxa] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    [b-y152zvylxa] .source-grid .data-row.selected,
    .data-row.selected[b-y152zvylxa] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-y152zvylxa] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-y152zvylxa] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-y152zvylxa] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-y152zvylxa] {
                padding-left: 2px;
            }

    .data-row[b-y152zvylxa]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-y152zvylxa]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-y152zvylxa]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-y152zvylxa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-y152zvylxa] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-y152zvylxa] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-y152zvylxa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-y152zvylxa] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-y152zvylxa 1s linear infinite;
}

@keyframes spin-b-y152zvylxa {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-y152zvylxa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-y152zvylxa] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-y152zvylxa]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-y152zvylxa]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-y152zvylxa]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-y152zvylxa]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-y152zvylxa] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-y152zvylxa] {
        cursor: not-allowed;
    }
/* /Components/CustomSourceSuitesForCombinationGrid.razor.rz.scp.css */
.custom-grid-container[b-hnz5xknfst] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

.custom-grid-toolbar[b-hnz5xknfst] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-hnz5xknfst] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbar-right[b-hnz5xknfst] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-hnz5xknfst] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-hnz5xknfst] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-hnz5xknfst] {
            color: white;
        }

    .toolbar-btn .material-icons[b-hnz5xknfst] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.radio-group-container[b-hnz5xknfst] {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-left: 1em;
}

    .radio-group-container :deep(.k-radio-list)[b-hnz5xknfst] {
        display: flex !important;
        flex-direction: row !important;
        gap: 1em !important;
        border: none !important;
    }

    .radio-group-container :deep(.k-radio-item)[b-hnz5xknfst] {
        margin-right: 0 !important;
        border: none !important;
    }

    .radio-group-container :deep(.k-radio-label)[b-hnz5xknfst] {
        font-size: 12px !important;
        color: #424242 !important;
        cursor: pointer !important;
    }

    .radio-group-container :deep(.k-radio:checked)[b-hnz5xknfst],
    .radio-group-container :deep(.k-radio.k-checked)[b-hnz5xknfst] {
        border-color: #E36F26 !important;
        color: #E36F26 !important;
    }

    .radio-group-container :deep(.k-radio:checked::before)[b-hnz5xknfst],
    .radio-group-container :deep(.k-radio.k-checked::before)[b-hnz5xknfst] {
        background-color: #E36F26 !important;
    }

    .radio-group-container :deep(.k-radio:focus)[b-hnz5xknfst],
    .radio-group-container :deep(.k-radio.k-focus)[b-hnz5xknfst] {
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.3) !important;
    }

    .radio-group-container :deep(.k-radio-list.k-list-horizontal)[b-hnz5xknfst] {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

.search-box[b-hnz5xknfst] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-hnz5xknfst] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-hnz5xknfst] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
    flex-shrink: 0;
}

.search-input[b-hnz5xknfst] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-hnz5xknfst]::placeholder {
        color: #999;
    }

.clear-icon[b-hnz5xknfst] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-hnz5xknfst] {
        color: #E36F26;
    }

.custom-grid-header[b-hnz5xknfst] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-hnz5xknfst] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.custom-grid-row[b-hnz5xknfst] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 28px;
}

.header-cell[b-hnz5xknfst] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-hnz5xknfst] {
        border-right: none;
    }

    .header-cell:hover[b-hnz5xknfst] {
        background: #e8e8e8;
    }

.sort-icon[b-hnz5xknfst] {
    font-size: 16px;
    color: #E36F26;
}

.custom-grid-cell[b-hnz5xknfst] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-hnz5xknfst] {
        border-right: none;
    }

.cell-content[b-hnz5xknfst] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.custom-grid-body[b-hnz5xknfst] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-hnz5xknfst] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-hnz5xknfst] {
        background-color: white;
    }

    .data-row.odd-row[b-hnz5xknfst] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-hnz5xknfst] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-hnz5xknfst] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    .data-row.selected[b-hnz5xknfst] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        .data-row.selected .custom-grid-cell[b-hnz5xknfst] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            .data-row.selected .custom-grid-cell:first-child[b-hnz5xknfst] {
                padding-left: 2px;
            }

        .data-row.selected:hover[b-hnz5xknfst] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
            font-weight: 700 !important;
            transform: scale(1.01);
        }

            .data-row.selected:hover .custom-grid-cell[b-hnz5xknfst] {
                font-weight: 700 !important;
                color: #333 !important;
            }

.custom-grid-footer[b-hnz5xknfst] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
}

.footer-info[b-hnz5xknfst] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-hnz5xknfst] {
    color: #E36F26;
    font-weight: 600;
}

.loading-overlay[b-hnz5xknfst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-hnz5xknfst] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-hnz5xknfst 1s linear infinite;
}

@keyframes spin-b-hnz5xknfst {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-hnz5xknfst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-hnz5xknfst] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.custom-grid-body[b-hnz5xknfst]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-hnz5xknfst]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-hnz5xknfst]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-hnz5xknfst]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.wizard-top-row .custom-grid-body .data-row[b-hnz5xknfst] {
    box-sizing: border-box;
}

    .wizard-top-row .custom-grid-body .data-row.selected[b-hnz5xknfst] {
        box-shadow: inset 0 0 0 2px #E36F26 !important;
        border: none !important;
        border-left: none !important;
    }

    .wizard-top-row .custom-grid-body .data-row:not(.selected)[b-hnz5xknfst] {
        box-shadow: none !important;
    }

    .wizard-top-row .custom-grid-body .data-row input[type="checkbox"][b-hnz5xknfst] {
        margin: 0;
        vertical-align: middle;
    }
/* /Components/CustomSourceSuitesGrid.razor.rz.scp.css */
.custom-grid-container[b-7gbp660wah] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

.custom-grid-toolbar[b-7gbp660wah] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-7gbp660wah] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbar-right[b-7gbp660wah] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-7gbp660wah] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-7gbp660wah] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-7gbp660wah] {
            color: white;
        }

    .toolbar-btn .material-icons[b-7gbp660wah] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.radio-group-container[b-7gbp660wah] {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-left: 1em;
}

    .radio-group-container :deep(.k-radio-list)[b-7gbp660wah] {
        display: flex !important;
        flex-direction: row !important;
        gap: 1em !important;
        border: none !important;
    }

    .radio-group-container :deep(.k-radio-item)[b-7gbp660wah] {
        margin-right: 0 !important;
        border: none !important;
    }

    .radio-group-container :deep(.k-radio-label)[b-7gbp660wah] {
        font-size: 12px !important;
        color: #424242 !important;
        cursor: pointer !important;
    }

    .radio-group-container :deep(.k-radio:checked)[b-7gbp660wah],
    .radio-group-container :deep(.k-radio.k-checked)[b-7gbp660wah] {
        border-color: #E36F26 !important;
        color: #E36F26 !important;
    }

    .radio-group-container :deep(.k-radio:checked::before)[b-7gbp660wah],
    .radio-group-container :deep(.k-radio.k-checked::before)[b-7gbp660wah] {
        background-color: #E36F26 !important;
    }

    .radio-group-container :deep(.k-radio:focus)[b-7gbp660wah],
    .radio-group-container :deep(.k-radio.k-focus)[b-7gbp660wah] {
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.3) !important;
    }

    .radio-group-container :deep(.k-radio-list.k-list-horizontal)[b-7gbp660wah] {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

.search-box[b-7gbp660wah] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-7gbp660wah] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-7gbp660wah] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
    flex-shrink: 0;
}

.search-input[b-7gbp660wah] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-7gbp660wah]::placeholder {
        color: #999;
    }

.clear-icon[b-7gbp660wah] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-7gbp660wah] {
        color: #E36F26;
    }

.custom-grid-header[b-7gbp660wah] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-7gbp660wah] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.custom-grid-row[b-7gbp660wah] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 28px;
}

.header-cell[b-7gbp660wah] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-7gbp660wah] {
        border-right: none;
    }

    .header-cell:hover[b-7gbp660wah] {
        background: #e8e8e8;
    }

.sort-icon[b-7gbp660wah] {
    font-size: 16px;
    color: #E36F26;
}

.custom-grid-cell[b-7gbp660wah] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-7gbp660wah] {
        border-right: none;
    }

.cell-content[b-7gbp660wah] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.custom-grid-body[b-7gbp660wah] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-7gbp660wah] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-7gbp660wah] {
        background-color: white;
    }

    .data-row.odd-row[b-7gbp660wah] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-7gbp660wah] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-7gbp660wah] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    .data-row.selected[b-7gbp660wah] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        .data-row.selected .custom-grid-cell[b-7gbp660wah] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            .data-row.selected .custom-grid-cell:first-child[b-7gbp660wah] {
                padding-left: 2px;
            }

        .data-row.selected:hover[b-7gbp660wah] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
            font-weight: 700 !important;
            transform: scale(1.01);
        }

            .data-row.selected:hover .custom-grid-cell[b-7gbp660wah] {
                font-weight: 700 !important;
                color: #333 !important;
            }

.custom-grid-footer[b-7gbp660wah] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
}

.footer-info[b-7gbp660wah] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-7gbp660wah] {
    color: #E36F26;
    font-weight: 600;
}

.loading-overlay[b-7gbp660wah] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-7gbp660wah] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-7gbp660wah 1s linear infinite;
}

@keyframes spin-b-7gbp660wah {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-7gbp660wah] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-7gbp660wah] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.custom-grid-body[b-7gbp660wah]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-7gbp660wah]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-7gbp660wah]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-7gbp660wah]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.wizard-top-row .custom-grid-body .data-row[b-7gbp660wah] {
    box-sizing: border-box;
}

    .wizard-top-row .custom-grid-body .data-row.selected[b-7gbp660wah] {
        box-shadow: inset 0 0 0 2px #E36F26 !important;
        border: none !important;
        border-left: none !important;
    }

    .wizard-top-row .custom-grid-body .data-row:not(.selected)[b-7gbp660wah] {
        box-shadow: none !important;
    }

    .wizard-top-row .custom-grid-body .data-row input[type="checkbox"][b-7gbp660wah] {
        margin: 0;
        vertical-align: middle;
    }
/* /Components/CustomSourceSuiteTypesGrid.razor.rz.scp.css */
.custom-grid-container[b-16o85wlk1a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

.custom-grid-toolbar[b-16o85wlk1a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-16o85wlk1a] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-16o85wlk1a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-16o85wlk1a] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-16o85wlk1a] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-16o85wlk1a] {
            color: white;
        }

    .toolbar-btn .material-icons[b-16o85wlk1a] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-16o85wlk1a] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 120px; 
    max-width: 120px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-16o85wlk1a] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-16o85wlk1a] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
    flex-shrink: 0;
}

.search-input[b-16o85wlk1a] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-16o85wlk1a]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-16o85wlk1a] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-16o85wlk1a] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-16o85wlk1a] {
        color: #E36F26;
    }

.custom-grid-header[b-16o85wlk1a] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-16o85wlk1a] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.custom-grid-row[b-16o85wlk1a] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
}

.header-cell[b-16o85wlk1a] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-16o85wlk1a] {
        border-right: none;
    }

    .header-cell:hover[b-16o85wlk1a] {
        background: #e8e8e8;
    }

.sort-icon[b-16o85wlk1a] {
    font-size: 16px;
    color: #E36F26;
}

.custom-grid-cell[b-16o85wlk1a] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    color: #333;
}

    .custom-grid-cell:last-child[b-16o85wlk1a] {
        border-right: none;
    }

.cell-content[b-16o85wlk1a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.custom-grid-body[b-16o85wlk1a] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-16o85wlk1a] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-16o85wlk1a] {
        background-color: white;
    }

    .data-row.odd-row[b-16o85wlk1a] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-16o85wlk1a] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-16o85wlk1a] {
            font-weight: 700 !important;
            color: #333 !important;
        }

    [b-16o85wlk1a] .source-grid .data-row.selected,
    .data-row.selected[b-16o85wlk1a] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-16o85wlk1a] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-16o85wlk1a] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-16o85wlk1a] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-16o85wlk1a] {
                padding-left: 2px;
            }

        .data-row.selected:hover[b-16o85wlk1a] {
            background-color: #d0d0d0 !important;
            border-left: 4px solid #E36F26 !important;
            box-shadow: 0 0 12px rgba(227, 111, 38, 0.5) !important;
            font-weight: 700 !important;
            transform: scale(1.01);
        }

            .data-row.selected:hover .custom-grid-cell[b-16o85wlk1a] {
                font-weight: 700 !important;
                color: #333 !important;
            }

    .data-row[b-16o85wlk1a]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-16o85wlk1a]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-16o85wlk1a]::after {
        opacity: 1;
    }

    .data-row.selected[b-16o85wlk1a]::after {
        display: none;
    }

.custom-grid-footer[b-16o85wlk1a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
}

.footer-info[b-16o85wlk1a] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-16o85wlk1a] {
    color: #E36F26;
    font-weight: 600;
}

.loading-overlay[b-16o85wlk1a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-16o85wlk1a] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-16o85wlk1a 1s linear infinite;
}

@keyframes spin-b-16o85wlk1a {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-16o85wlk1a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-16o85wlk1a] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.custom-grid-body[b-16o85wlk1a]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-16o85wlk1a]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-16o85wlk1a]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-16o85wlk1a]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.custom-grid-container.disabled[b-16o85wlk1a] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-16o85wlk1a] {
        cursor: not-allowed;
    }

.wizard-top-row .wizard-grid-section .source-grid .search-box[b-16o85wlk1a] {
    min-width: 70px !important;
    max-width: 120px !important;
}

.wizard-top-row .wizard-grid-section .source-grid .search-input[b-16o85wlk1a] {
    font-size: 14px !important;
    padding: 3px !important;
}

.wizard-top-row .wizard-grid-section .source-grid .search-icon[b-16o85wlk1a],
.wizard-top-row .wizard-grid-section .source-grid .clear-icon[b-16o85wlk1a] {
    font-size: 14px !important;
}

.wizard-top-row .custom-grid-body .data-row[b-16o85wlk1a] {
    box-sizing: border-box;
}

    .wizard-top-row .custom-grid-body .data-row.selected[b-16o85wlk1a] {
        box-shadow: inset 0 0 0 2px #E36F26 !important;
        border: none !important;
    }

    .wizard-top-row .custom-grid-body .data-row:not(.selected)[b-16o85wlk1a] {
        box-shadow: none !important;
    }
/* /Components/CustomSourceWorkflowGrid.razor.rz.scp.css */
/* ===== CUSTOM SOURCE GRID - COMPACT VERSION ===== */

.custom-grid-container[b-zjh5slk2ed] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-zjh5slk2ed] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
}

.toolbar-left[b-zjh5slk2ed] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.toolbar-right[b-zjh5slk2ed] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 280px;
}

.toolbar-btn[b-zjh5slk2ed] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
}

    .toolbar-btn:hover:not(:disabled)[b-zjh5slk2ed] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-zjh5slk2ed] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-zjh5slk2ed] {
        font-size: 18px;
    }

.refresh-btn[b-zjh5slk2ed] {
    padding: 6px 8px;
}

.search-box[b-zjh5slk2ed] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 120px;
    max-width: 250px;
    width: 100%;
    flex: 1 1 auto;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .search-box:focus-within[b-zjh5slk2ed] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-zjh5slk2ed] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-zjh5slk2ed] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 60px;
}

    .search-input[b-zjh5slk2ed]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-zjh5slk2ed] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-zjh5slk2ed] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-zjh5slk2ed] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-zjh5slk2ed] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-zjh5slk2ed] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
}

.header-row[b-zjh5slk2ed] {
    background: #f5f5f5;
}

.custom-grid-cell[b-zjh5slk2ed] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
}

    .custom-grid-cell:last-child[b-zjh5slk2ed] {
        border-right: none;
    }

.header-cell[b-zjh5slk2ed] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-zjh5slk2ed] {
        background: #e8e8e8;
    }

.sort-icon[b-zjh5slk2ed] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-zjh5slk2ed] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid Body */
.custom-grid-body[b-zjh5slk2ed] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.data-row[b-zjh5slk2ed] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-zjh5slk2ed] {
        background-color: white;
    }

    .data-row.odd-row[b-zjh5slk2ed] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-zjh5slk2ed] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-zjh5slk2ed] {
            font-weight: 700 !important;
        }

    /* Use ::deep to penetrate CSS isolation for dynamically added classes */
    [b-zjh5slk2ed] .source-grid .data-row.selected,
    .data-row.selected[b-zjh5slk2ed] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-zjh5slk2ed] .source-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-zjh5slk2ed] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-zjh5slk2ed] .source-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-zjh5slk2ed] {
                padding-left: 2px;
            }

    .data-row[b-zjh5slk2ed]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-zjh5slk2ed]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-zjh5slk2ed]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-zjh5slk2ed] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
}

.footer-info[b-zjh5slk2ed] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-zjh5slk2ed] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-zjh5slk2ed] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-zjh5slk2ed] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-zjh5slk2ed 1s linear infinite;
}

@keyframes spin-b-zjh5slk2ed {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-zjh5slk2ed] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-zjh5slk2ed] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-zjh5slk2ed]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-zjh5slk2ed]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-zjh5slk2ed]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-zjh5slk2ed]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-zjh5slk2ed] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-zjh5slk2ed] {
        cursor: not-allowed;
    }
/* /Components/CustomSpaceDetailsGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-p21b5dpl6w] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-p21b5dpl6w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-p21b5dpl6w] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.context-label[b-p21b5dpl6w] {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    white-space: nowrap;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.toolbar-btn[b-p21b5dpl6w] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-p21b5dpl6w] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-p21b5dpl6w] {
            color: white;
        }

    .toolbar-btn .material-icons[b-p21b5dpl6w] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-p21b5dpl6w] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-p21b5dpl6w] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-p21b5dpl6w] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-p21b5dpl6w]::placeholder {
        color: #999;
    }

.clear-icon[b-p21b5dpl6w] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-p21b5dpl6w] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-p21b5dpl6w] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
}

.header-row[b-p21b5dpl6w] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-p21b5dpl6w] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-p21b5dpl6w] {
        border-right: none;
    }

    .header-cell:hover[b-p21b5dpl6w] {
        background: #e8e8e8;
    }

.sort-icon[b-p21b5dpl6w] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-p21b5dpl6w] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-p21b5dpl6w] {
        background: #f5f5f5;
    }

/* Area column right alignment */
.area-header[b-p21b5dpl6w] {
    text-align: right;
    justify-content: flex-end;
}

.area-cell[b-p21b5dpl6w] {
    text-align: right;
    justify-content: flex-end;
}

    .area-cell .cell-content[b-p21b5dpl6w] {
        text-align: right;
        width: 100%;
    }

    .area-cell .inline-edit-input[b-p21b5dpl6w] {
        text-align: right;
    }

/* Grid Body */
.custom-grid-body[b-p21b5dpl6w] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-p21b5dpl6w] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-p21b5dpl6w] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-p21b5dpl6w] {
        background-color: white;
    }

    .data-row.odd-row[b-p21b5dpl6w] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-p21b5dpl6w] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-p21b5dpl6w] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-p21b5dpl6w] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-p21b5dpl6w] {
                color: white !important;
            }

    .data-row.selected[b-p21b5dpl6w] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-p21b5dpl6w] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-p21b5dpl6w] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-p21b5dpl6w] {
                color: white !important;
            }

.custom-grid-cell[b-p21b5dpl6w] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-p21b5dpl6w] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-p21b5dpl6w] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-p21b5dpl6w] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.cell-content[b-p21b5dpl6w] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.actions-cell[b-p21b5dpl6w] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-p21b5dpl6w] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-p21b5dpl6w] {
        font-size: 16px;
    }

.delete-btn[b-p21b5dpl6w] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-p21b5dpl6w] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-p21b5dpl6w] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-p21b5dpl6w]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: -20px;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-p21b5dpl6w]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: -10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-p21b5dpl6w]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-p21b5dpl6w]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.delete-btn:disabled[b-p21b5dpl6w] {
    opacity: 0.5;
    cursor: not-allowed;
}

    .delete-btn:disabled:hover[b-p21b5dpl6w]::after {
        content: 'This item cannot be deleted, it is a system item';
    }

/* Grid Footer */
.custom-grid-footer[b-p21b5dpl6w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-p21b5dpl6w] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-p21b5dpl6w] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-p21b5dpl6w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-p21b5dpl6w] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-p21b5dpl6w 1s linear infinite;
}

@keyframes spin-b-p21b5dpl6w {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-p21b5dpl6w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-p21b5dpl6w] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-p21b5dpl6w]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-p21b5dpl6w]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-p21b5dpl6w]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-p21b5dpl6w]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-p21b5dpl6w] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-p21b5dpl6w] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-p21b5dpl6w] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-p21b5dpl6w] {
        background-color: #FFF9F5 !important;
    }

/* SYSTEM (READ-ONLY) CELLS - SHORT TOOLTIP */
.system-cell[b-p21b5dpl6w] {
    position: relative;
}

    .system-cell.focusable-cell:focus[b-p21b5dpl6w]::after {
        content: 'Read-only';
        position: absolute;
        bottom: 100%;
        left: 0;
        transform: none;
        background: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .system-cell.focusable-cell:focus[b-p21b5dpl6w]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 10px;
        transform: none;
        border: 5px solid transparent;
        border-top-color: #333;
        z-index: 1000;
        margin-bottom: -5px;
        pointer-events: none;
    }

.data-row:first-child .system-cell.focusable-cell:focus[b-p21b5dpl6w]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .system-cell.focusable-cell:focus[b-p21b5dpl6w]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:has(.delete-btn:disabled):focus[b-p21b5dpl6w]::after {
    content: 'This item cannot be deleted, it is a system item';
}

/* AREA COLUMN TOOLTIPS (DATA-COL 3, 4, 5) */
.focusable-cell[data-col="3"]:not(.system-cell):focus[b-p21b5dpl6w]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="3"]:not(.system-cell):focus[b-p21b5dpl6w]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):focus[b-p21b5dpl6w]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="3"]:not(.system-cell):focus[b-p21b5dpl6w]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="4"]:not(.system-cell):focus[b-p21b5dpl6w]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.system-cell):focus[b-p21b5dpl6w]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):focus[b-p21b5dpl6w]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):focus[b-p21b5dpl6w]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-p21b5dpl6w]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-p21b5dpl6w]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-p21b5dpl6w]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):focus[b-p21b5dpl6w]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Delete column */
/* When User Defined Area is shown: Delete is data-col="6" */
.focusable-cell[data-col="6"].actions-cell:focus[b-p21b5dpl6w]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"].actions-cell:focus[b-p21b5dpl6w]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* When User Defined Area is hidden: Delete is data-col="5" AND it's an actions-cell with delete-btn */
.focusable-cell[data-col="5"].actions-cell:has(.delete-btn):focus[b-p21b5dpl6w]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"].actions-cell:has(.delete-btn):focus[b-p21b5dpl6w]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for Delete columns */
.data-row:first-child .focusable-cell[data-col="5"].actions-cell:focus[b-p21b5dpl6w]::after,
.data-row:first-child .focusable-cell[data-col="6"].actions-cell:focus[b-p21b5dpl6w]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"].actions-cell:focus[b-p21b5dpl6w]::before,
.data-row:first-child .focusable-cell[data-col="6"].actions-cell:focus[b-p21b5dpl6w]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Footer calculations styling */
.footer-calculations[b-p21b5dpl6w] {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #333;
    font-weight: 600;
}

.calc-label[b-p21b5dpl6w] {
    color: #666;
    font-weight: 400;
}

.calc-value[b-p21b5dpl6w] {
    color: #E36F26;
    font-weight: 700;
}

.calc-separator[b-p21b5dpl6w] {
    color: #ccc;
    margin: 0 4px;
}
/* /Components/CustomSpacesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-zba6tmaq2q] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-zba6tmaq2q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-zba6tmaq2q] {
    display: flex;
    gap: 8px;
}

.toolbar-right[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-zba6tmaq2q] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-zba6tmaq2q] {
            color: white;
        }

    .toolbar-btn .material-icons[b-zba6tmaq2q] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-zba6tmaq2q] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-zba6tmaq2q] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-zba6tmaq2q]::placeholder {
        color: #999;
    }

.clear-icon[b-zba6tmaq2q] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-zba6tmaq2q] {
        color: #E36F26;
    }

/* Toggle Switch Styling */
.toolbar-switch[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.switch-container[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.switch-label[b-zba6tmaq2q] {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    user-select: none;
}

.switch[b-zba6tmaq2q] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

    .switch input[b-zba6tmaq2q] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-zba6tmaq2q] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}

    .slider[b-zba6tmaq2q]:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

.switch input:checked + .slider[b-zba6tmaq2q] {
    background-color: #E36F26;
}

    .switch input:checked + .slider[b-zba6tmaq2q]:before {
        transform: translateX(16px);
    }

/* Grid Header */
.custom-grid-header[b-zba6tmaq2q] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.header-row[b-zba6tmaq2q] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .header-cell:last-child[b-zba6tmaq2q] {
        border-right: none;
    }

    .header-cell:hover[b-zba6tmaq2q] {
        background: #e8e8e8;
    }

.sort-icon[b-zba6tmaq2q] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-zba6tmaq2q] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-zba6tmaq2q] {
        background: #f5f5f5;
    }

/* Grid Body */
.custom-grid-body[b-zba6tmaq2q] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

    .custom-grid-body.show-scroll[b-zba6tmaq2q] {
        overflow-x: auto;
    }

.custom-grid-row[b-zba6tmaq2q] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-zba6tmaq2q] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-zba6tmaq2q] {
        background-color: white;
    }

        .data-row.even-row .custom-grid-cell[b-zba6tmaq2q] {
            background-color: inherit;
        }

    .data-row.odd-row[b-zba6tmaq2q] {
        background-color: #f5f5f5;
    }

        .data-row.odd-row .custom-grid-cell[b-zba6tmaq2q] {
            background-color: inherit;
        }

    .data-row.focused[b-zba6tmaq2q] {
        background-color: #e0e0e0 !important;
    }

        .data-row.focused .custom-grid-cell[b-zba6tmaq2q] {
            background-color: #e0e0e0 !important;
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-zba6tmaq2q] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-zba6tmaq2q] {
            padding-left: 4px;
        }

        .data-row.selected:not(.focused).even-row .custom-grid-cell[b-zba6tmaq2q] {
            background-color: white;
        }

        .data-row.selected:not(.focused).odd-row .custom-grid-cell[b-zba6tmaq2q] {
            background-color: #f5f5f5;
        }

        .data-row.selected .delete-btn[b-zba6tmaq2q] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-zba6tmaq2q] {
                color: white !important;
            }

.custom-grid-cell[b-zba6tmaq2q] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-height: 28px;
    flex-shrink: 0;
    box-sizing: border-box;
}

    .custom-grid-cell:last-child[b-zba6tmaq2q] {
        border-right: none;
    }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-zba6tmaq2q] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-zba6tmaq2q] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

.role-cell.focusable-cell:focus[b-zba6tmaq2q]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-zba6tmaq2q] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

.role-cell[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
}

.role-badge[b-zba6tmaq2q] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-zba6tmaq2q] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-zba6tmaq2q] {
    font-weight: 700 !important;
}

.actions-cell[b-zba6tmaq2q] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.custom-grid-cell.actions-cell[b-zba6tmaq2q] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.icon-with-badge[b-zba6tmaq2q] {
    font-size: 20px;
    color: #E36F26 !important;
    transition: color 0.2s ease;
}

.custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-zba6tmaq2q] {
    color: #E36F26 !important;
}

.data-row.focused .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-zba6tmaq2q] {
    color: #E36F26 !important;
}

.data-row.selected .custom-grid-cell.actions-cell .material-icons.icon-with-badge[b-zba6tmaq2q] {
    color: #E36F26 !important;
}

.badge[b-zba6tmaq2q] {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    line-height: 1;
}

.badge-selected[b-zba6tmaq2q] {
    color: #333;
    font-weight: 700;
}

.items-btn[b-zba6tmaq2q] {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    cursor: pointer;
}

.data-row.selected .items-btn[b-zba6tmaq2q] {
    font-weight: 700 !important;
}

.data-row.focused .items-btn[b-zba6tmaq2q] {
    font-weight: 700 !important;
}

.items-btn:hover[b-zba6tmaq2q] {
    color: #E36F26 !important;
}

.action-btn[b-zba6tmaq2q] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-zba6tmaq2q] {
        font-size: 16px;
    }

.delete-btn[b-zba6tmaq2q] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-zba6tmaq2q] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-zba6tmaq2q] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-zba6tmaq2q]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-zba6tmaq2q]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-zba6tmaq2q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-zba6tmaq2q] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-zba6tmaq2q] {
    color: #E36F26;
    font-weight: 600;
}

.footer-actions[b-zba6tmaq2q] {
    display: flex;
    gap: 8px;
}

.footer-btn[b-zba6tmaq2q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

    .footer-btn:hover:not(:disabled)[b-zba6tmaq2q] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .footer-btn:disabled[b-zba6tmaq2q] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .footer-btn .material-icons[b-zba6tmaq2q] {
        font-size: 16px;
    }

/* Loading & No Data */
.loading-overlay[b-zba6tmaq2q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-zba6tmaq2q] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-zba6tmaq2q 1s linear infinite;
}

@keyframes spin-b-zba6tmaq2q {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-zba6tmaq2q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-zba6tmaq2q] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-zba6tmaq2q]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-grid-body[b-zba6tmaq2q]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-zba6tmaq2q]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-zba6tmaq2q]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-zba6tmaq2q] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-zba6tmaq2q] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-zba6tmaq2q] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-zba6tmaq2q] {
        background-color: #FFF9F5 !important;
    }

/* Tooltip for Sort column (data-col="0") */
.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Space Name column (data-col="1") */
.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="1"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Begin Date column (data-col="4") */
.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="4"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for End Date column (data-col="5") */
.focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="5"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Move-In Date column (data-col="6") */
.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="6"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Inactive Date column (data-col="7") */
.focusable-cell[data-col="7"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="7"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="7"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="7"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Section column (data-col="7" when toggle OFF, data-col="9" when toggle ON) */
.focusable-cell[data-col="9"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="9"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="9"]:not(.role-cell):not(.actions-cell):not(.system-cell):focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Tooltip for Notes Badge column - varies by ShowMoveInInactiveDates */
/* When Move-In/Inactive hidden: Notes is data-col="8" */
.focusable-cell[data-col="8"].actions-cell:focus[b-zba6tmaq2q]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="8"].actions-cell:focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* When Move-In/Inactive shown: Notes is data-col="10" */
.focusable-cell[data-col="10"].actions-cell:focus[b-zba6tmaq2q]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="10"].actions-cell:focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Dates Badge column */
/* When Move-In/Inactive hidden: Dates is data-col="9" */
.focusable-cell[data-col="9"].actions-cell:focus[b-zba6tmaq2q]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="9"].actions-cell:focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* When Move-In/Inactive shown: Dates is data-col="11" */
.focusable-cell[data-col="11"].actions-cell:focus[b-zba6tmaq2q]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="11"].actions-cell:focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Suites/Details column */
/* When Move-In/Inactive hidden: Suites is data-col="10" */
.focusable-cell[data-col="10"]:not(.actions-cell):focus[b-zba6tmaq2q]::after {
    content: 'Click or space / enter to view suites';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="10"]:not(.actions-cell):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* When Move-In/Inactive shown: Suites is data-col="12" */
.focusable-cell[data-col="12"].actions-cell:focus[b-zba6tmaq2q]::after {
    content: 'Click or space / enter to view suites';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="12"].actions-cell:focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip for Delete column */
/* When Move-In/Inactive hidden: Delete is data-col="11" */
.focusable-cell[data-col="11"].actions-cell:has(.delete-btn):focus[b-zba6tmaq2q]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="11"].actions-cell:has(.delete-btn):focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* When Move-In/Inactive shown: Delete is data-col="13" */
.focusable-cell[data-col="13"].actions-cell:focus[b-zba6tmaq2q]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="13"].actions-cell:focus[b-zba6tmaq2q]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* First row variations for all tooltip columns */
.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-zba6tmaq2q]::after,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-zba6tmaq2q]::after,
.data-row:first-child .focusable-cell[data-col="10"].actions-cell:focus[b-zba6tmaq2q]::after,
.data-row:first-child .focusable-cell[data-col="11"].actions-cell:focus[b-zba6tmaq2q]::after,
.data-row:first-child .focusable-cell[data-col="12"].actions-cell:focus[b-zba6tmaq2q]::after,
.data-row:first-child .focusable-cell[data-col="13"].actions-cell:focus[b-zba6tmaq2q]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="8"].actions-cell:focus[b-zba6tmaq2q]::before,
.data-row:first-child .focusable-cell[data-col="9"].actions-cell:focus[b-zba6tmaq2q]::before,
.data-row:first-child .focusable-cell[data-col="10"].actions-cell:focus[b-zba6tmaq2q]::before,
.data-row:first-child .focusable-cell[data-col="11"].actions-cell:focus[b-zba6tmaq2q]::before,
.data-row:first-child .focusable-cell[data-col="12"].actions-cell:focus[b-zba6tmaq2q]::before,
.data-row:first-child .focusable-cell[data-col="13"].actions-cell:focus[b-zba6tmaq2q]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Components/CustomSuitesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-3hq3umbmgs] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 256px);
    min-height: 400px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-3hq3umbmgs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.toolbar-left[b-3hq3umbmgs] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-btn[b-3hq3umbmgs] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-3hq3umbmgs] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-3hq3umbmgs] {
            color: white;
        }

    .toolbar-btn .material-icons[b-3hq3umbmgs] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-3hq3umbmgs] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-3hq3umbmgs] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-3hq3umbmgs] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-3hq3umbmgs]::placeholder {
        color: #999;
    }

.clear-icon[b-3hq3umbmgs] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-3hq3umbmgs] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-3hq3umbmgs] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.header-row[b-3hq3umbmgs] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-3hq3umbmgs] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-3hq3umbmgs] {
        border-right: none;
    }

    .header-cell:hover[b-3hq3umbmgs] {
        background: #e8e8e8;
    }

.sort-icon[b-3hq3umbmgs] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-3hq3umbmgs] {
    justify-content: center;
    cursor: default;
}

    .actions-header:hover[b-3hq3umbmgs] {
        background: #f5f5f5;
    }

/* Right-justify numeric column headers - Rentable, Usable, User Defined */
.header-cell:nth-child(7)[b-3hq3umbmgs],
.header-cell:nth-child(8):not(.items-header):not(.actions-header)[b-3hq3umbmgs],
.header-cell:nth-child(9):not(.items-header):not(.actions-header)[b-3hq3umbmgs] {
    justify-content: flex-end;
}

/* Grid Body */
.custom-grid-body[b-3hq3umbmgs] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-3hq3umbmgs] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 28px;
}

.data-row[b-3hq3umbmgs] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

    .data-row.even-row[b-3hq3umbmgs] {
        background-color: white;
    }

    .data-row.odd-row[b-3hq3umbmgs] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-3hq3umbmgs] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-3hq3umbmgs] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

        .data-row.focused .delete-btn[b-3hq3umbmgs] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.focused .delete-btn .material-icons[b-3hq3umbmgs] {
                color: white !important;
            }

    .data-row.selected[b-3hq3umbmgs] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-3hq3umbmgs] {
            padding-left: 4px;
        }

        .data-row.selected .delete-btn[b-3hq3umbmgs] {
            background: #E36F26 !important;
            border-color: #E36F26 !important;
        }

            .data-row.selected .delete-btn .material-icons[b-3hq3umbmgs] {
                color: white !important;
            }

.custom-grid-cell[b-3hq3umbmgs] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    .custom-grid-cell:last-child[b-3hq3umbmgs] {
        border-right: none;
    }

    /* Right-justify numeric columns - Rentable, Usable, User Defined */
    .custom-grid-cell[data-col="6"]:not(.actions-cell):not(.items-badge-cell)[b-3hq3umbmgs],
    .custom-grid-cell[data-col="7"]:not(.actions-cell):not(.items-badge-cell)[b-3hq3umbmgs],
    .custom-grid-cell[data-col="8"]:not(.actions-cell):not(.items-badge-cell)[b-3hq3umbmgs] {
        justify-content: flex-end;
    }

        .custom-grid-cell[data-col="6"]:not(.actions-cell):not(.items-badge-cell) .cell-content[b-3hq3umbmgs],
        .custom-grid-cell[data-col="7"]:not(.actions-cell):not(.items-badge-cell) .cell-content[b-3hq3umbmgs],
        .custom-grid-cell[data-col="8"]:not(.actions-cell):not(.items-badge-cell) .cell-content[b-3hq3umbmgs] {
            text-align: right;
        }

        .custom-grid-cell[data-col="6"]:not(.actions-cell):not(.items-badge-cell) .inline-edit-input[b-3hq3umbmgs],
        .custom-grid-cell[data-col="7"]:not(.actions-cell):not(.items-badge-cell) .inline-edit-input[b-3hq3umbmgs],
        .custom-grid-cell[data-col="8"]:not(.actions-cell):not(.items-badge-cell) .inline-edit-input[b-3hq3umbmgs] {
            text-align: right;
        }

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-3hq3umbmgs] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-3hq3umbmgs] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 100;
    }

    .focusable-cell:not(.role-cell):not(.actions-cell):not(.items-badge-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):not([data-col="4"]):not([data-col="5"]):not([data-col="6"]):not([data-col="7"]):not([data-col="8"]):focus[b-3hq3umbmgs]::after,
    .focusable-cell:not(.role-cell):not(.actions-cell):not(.items-badge-cell):not([data-col="0"]):not([data-col="1"]):not([data-col="2"]):not([data-col="4"]):not([data-col="5"]):not([data-col="6"]):not([data-col="7"]):not([data-col="8"]):focus[b-3hq3umbmgs]::before {
        display: none !important;
    }

/* Show tooltip on role-cell focus only */
.role-cell.focusable-cell:focus[b-3hq3umbmgs]::after {
    content: 'Click or space / enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.role-cell.focusable-cell:focus[b-3hq3umbmgs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-3hq3umbmgs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .role-cell.focusable-cell:focus[b-3hq3umbmgs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.actions-cell.focusable-cell:focus[b-3hq3umbmgs]::after {
    content: 'Click or enter to delete';
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.actions-cell.focusable-cell:focus[b-3hq3umbmgs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-3hq3umbmgs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .actions-cell.focusable-cell:focus[b-3hq3umbmgs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.cell-content[b-3hq3umbmgs] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Role Badge - Underlined text style */
.role-cell[b-3hq3umbmgs] {
    display: flex;
    align-items: center;
}

.role-badge[b-3hq3umbmgs] {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent !important;
    color: #333 !important;
    text-decoration: underline;
    position: relative;
    line-height: 1.4;
}

.data-row.selected .role-badge[b-3hq3umbmgs] {
    font-weight: 700 !important;
}

.data-row.focused .role-badge[b-3hq3umbmgs] {
    font-weight: 700 !important;
}

/* Actions Cell */
.actions-cell[b-3hq3umbmgs] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .actions-cell:has(.items-btn)[b-3hq3umbmgs] {
        justify-content: flex-start !important;
    }

.action-btn[b-3hq3umbmgs] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .action-btn .material-icons[b-3hq3umbmgs] {
        font-size: 16px;
    }

.delete-btn[b-3hq3umbmgs] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

    .delete-btn .material-icons[b-3hq3umbmgs] {
        color: white !important;
        font-size: 16px;
    }

    .delete-btn:hover[b-3hq3umbmgs] {
        background: #E36F26 !important;
        border-color: #E36F26 !important;
        opacity: 0.9;
    }

        .delete-btn:hover[b-3hq3umbmgs]::after {
            content: 'Click or enter to delete';
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .delete-btn:hover[b-3hq3umbmgs]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            right: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 10000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .delete-btn:hover[b-3hq3umbmgs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .delete-btn:hover[b-3hq3umbmgs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* Grid Footer */
.custom-grid-footer[b-3hq3umbmgs] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-top: 2px solid #dee2e6;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    flex-grow: 0;
    min-height: 36px;
    position: relative;
    z-index: 1;
}

.footer-row[b-3hq3umbmgs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.floor-count[b-3hq3umbmgs] {
}

.footer-separator[b-3hq3umbmgs] {
    color: #adb5bd;
}

.footer-label[b-3hq3umbmgs] {
    color: #495057;
}

.footer-value[b-3hq3umbmgs] {
    color: #212529;
    min-width: 60px;
    text-align: right;
}

/* Loading & No Data */
.loading-overlay[b-3hq3umbmgs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-3hq3umbmgs] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-3hq3umbmgs 1s linear infinite;
}

@keyframes spin-b-3hq3umbmgs {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-3hq3umbmgs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-3hq3umbmgs] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-3hq3umbmgs]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-3hq3umbmgs]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-3hq3umbmgs]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-3hq3umbmgs]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.inline-edit-input[b-3hq3umbmgs] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 2px solid #E36F26;
    border-radius: 3px;
    font-size: 12px;
    background: #FFF9F5;
    box-shadow: 0 0 8px rgba(227, 111, 38, 0.3);
}

    .inline-edit-input:focus[b-3hq3umbmgs] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.5);
    }

.data-row.editing[b-3hq3umbmgs] {
    background-color: #FFF9F5 !important;
    border: 2px solid #E36F26 !important;
    box-shadow: 0 4px 12px rgba(227, 111, 38, 0.3) !important;
}

    .data-row.editing .custom-grid-cell[b-3hq3umbmgs] {
        background-color: #FFF9F5 !important;
    }

.items-header[b-3hq3umbmgs] {
    justify-content: flex-start !important;
}

    .items-header .material-icons[b-3hq3umbmgs] {
        font-size: 16px;
        color: #333;
    }

.custom-grid-cell.items-badge-cell[b-3hq3umbmgs] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 8px;
}

.items-badge-cell .action-btn.view-badge-btn[b-3hq3umbmgs] {
    margin: 0;
}

.items-btn[b-3hq3umbmgs] {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    position: relative;
    color: #333 !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s;
}

    .items-btn:hover[b-3hq3umbmgs] {
        background: transparent !important;
        border: none !important;
        opacity: 1;
    }

        .items-btn:hover[b-3hq3umbmgs]::after {
            content: 'Click or space / enter to view';
            position: absolute;
            bottom: 100%;
            left: 0;
            transform: none;
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .items-btn:hover[b-3hq3umbmgs]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 10px;
            transform: none;
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 10000;
            margin-bottom: -5px;
            pointer-events: none;
        }

.data-row:first-child .items-btn:hover[b-3hq3umbmgs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .items-btn:hover[b-3hq3umbmgs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.data-row.focused .items-btn[b-3hq3umbmgs] {
    font-weight: 700 !important;
}

.data-row.selected .items-btn[b-3hq3umbmgs] {
    font-weight: 700 !important;
}

.items-badge-cell.focusable-cell:focus[b-3hq3umbmgs]::after {
    content: 'Click or space / enter to view';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.items-badge-cell.focusable-cell:focus[b-3hq3umbmgs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .items-badge-cell.focusable-cell:focus[b-3hq3umbmgs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .items-badge-cell.focusable-cell:focus[b-3hq3umbmgs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-3hq3umbmgs]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: none;
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="0"]:not(.system-cell):focus[b-3hq3umbmgs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Floor column (data-col="1") - Read-only field */
.focusable-cell[data-col="1"]:not(.system-cell):focus[b-3hq3umbmgs]::after {
    content: 'Read-only field';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="1"]:not(.system-cell):focus[b-3hq3umbmgs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

/* Tooltip rules for editable columns - ONLY show "edit" tooltips if NOT actions-cell or items-badge-cell */
.focusable-cell[data-col="2"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.focusable-cell[data-col="8"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after {
    content: 'Double-click or enter to edit';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 5px;
    pointer-events: none;
}

.focusable-cell[data-col="2"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.focusable-cell[data-col="8"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 10000;
    margin-bottom: -5px;
    pointer-events: none;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-3hq3umbmgs]::after,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-3hq3umbmgs]::after,
.data-row:first-child .focusable-cell[data-col="2"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.data-row:first-child .focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.data-row:first-child .focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after,
.data-row:first-child .focusable-cell[data-col="8"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row:first-child .focusable-cell[data-col="0"]:not(.system-cell):focus[b-3hq3umbmgs]::before,
.data-row:first-child .focusable-cell[data-col="1"]:not(.system-cell):focus[b-3hq3umbmgs]::before,
.data-row:first-child .focusable-cell[data-col="2"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.data-row:first-child .focusable-cell[data-col="4"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.data-row:first-child .focusable-cell[data-col="5"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.data-row:first-child .focusable-cell[data-col="6"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.data-row:first-child .focusable-cell[data-col="7"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before,
.data-row:first-child .focusable-cell[data-col="8"]:not(.system-cell):not(.actions-cell):not(.items-badge-cell):focus[b-3hq3umbmgs]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.context-label[b-3hq3umbmgs] {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* /Components/CustomSuiteSpacesGrid.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-z94wn437ug] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 256px);
    min-height: 400px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-z94wn437ug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.toolbar-left[b-z94wn437ug] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toolbar-btn[b-z94wn437ug] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-z94wn437ug] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-z94wn437ug] {
            color: white;
        }

    .toolbar-btn .material-icons[b-z94wn437ug] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-z94wn437ug] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-z94wn437ug] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-z94wn437ug] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-z94wn437ug]::placeholder {
        color: #999;
    }

.clear-icon[b-z94wn437ug] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-z94wn437ug] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-z94wn437ug] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.header-row[b-z94wn437ug] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-z94wn437ug] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-z94wn437ug] {
        border-right: none;
    }

    .header-cell:hover[b-z94wn437ug] {
        background: #e8e8e8;
    }

.sort-icon[b-z94wn437ug] {
    font-size: 16px;
    color: #E36F26;
}

/* Right-justify numeric column headers - Rentable, Leased, Variance */
.header-cell:nth-child(5)[b-z94wn437ug],
.header-cell:nth-child(6)[b-z94wn437ug],
.header-cell:nth-child(7)[b-z94wn437ug] {
    justify-content: flex-end;
}

/* Grid Body */
.custom-grid-body[b-z94wn437ug] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-z94wn437ug] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: auto;
    min-height: 30px;
}

.data-row[b-z94wn437ug] {
    cursor: pointer;
    transition: background-color 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-z94wn437ug] {
        background-color: white;
    }

    .data-row.odd-row[b-z94wn437ug] {
        background-color: #f5f5f5;
    }

    .data-row.focused[b-z94wn437ug] {
        background-color: #e0e0e0 !important;
        color: #333 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.focused .custom-grid-cell[b-z94wn437ug] {
            color: #333 !important;
            border-right-color: #ccc !important;
        }

    .data-row.selected[b-z94wn437ug] {
        border-left: 4px solid #333 !important;
        box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
    }

        .data-row.selected .custom-grid-cell:first-child[b-z94wn437ug] {
            padding-left: 4px;
        }

    .data-row[b-z94wn437ug]::after {
        content: "Click to navigate to record";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 4px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-z94wn437ug]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 4px;
    }

    .data-row:hover[b-z94wn437ug]::after {
        opacity: 1;
    }

    .data-row.selected[b-z94wn437ug]::after,
    .data-row.focused[b-z94wn437ug]::after {
        display: none;
    }

.custom-grid-cell[b-z94wn437ug] {
    padding: 4px 8px;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
}

    /* Right-justify numeric columns - Rentable, Leased, Variance */
    .custom-grid-cell[data-col="4"][b-z94wn437ug],
    .custom-grid-cell[data-col="5"][b-z94wn437ug],
    .custom-grid-cell[data-col="6"][b-z94wn437ug] {
        justify-content: flex-end;
    }

        .custom-grid-cell[data-col="4"] .cell-content[b-z94wn437ug],
        .custom-grid-cell[data-col="5"] .cell-content[b-z94wn437ug],
        .custom-grid-cell[data-col="6"] .cell-content[b-z94wn437ug] {
            text-align: right;
        }

.cell-content[b-z94wn437ug] {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: block;
    width: 100%;
    line-height: 1.3;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-z94wn437ug] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-z94wn437ug] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 100;
    }

/* Grid Footer */
.custom-grid-footer[b-z94wn437ug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
    min-height: 36px;
    position: relative;
    z-index: 1;
}

.footer-info[b-z94wn437ug] {
    display: flex;
    gap: 12px;
    color: #666;
    align-items: center;
}

.selected-indicator[b-z94wn437ug] {
    color: #E36F26;
    font-weight: 600;
}

.footer-calculations[b-z94wn437ug] {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #333;
    font-weight: 600;
}

.calc-label[b-z94wn437ug] {
    color: #666;
    font-weight: 400;
}

.calc-value[b-z94wn437ug] {
    color: #E36F26;
    font-weight: 700;
}

.calc-separator[b-z94wn437ug] {
    color: #ccc;
    margin: 0 4px;
}

/* Loading & No Data */
.loading-overlay[b-z94wn437ug] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-z94wn437ug] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-z94wn437ug 1s linear infinite;
}

@keyframes spin-b-z94wn437ug {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-z94wn437ug] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-z94wn437ug] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-z94wn437ug]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-z94wn437ug]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-z94wn437ug]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-z94wn437ug]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

.context-label[b-z94wn437ug] {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 700;
    color: #E36F26;
    white-space: nowrap;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* /Components/CustomUsersSearchGrid.razor.rz.scp.css */
/* ===== CUSTOM USERS SEARCH GRID - MULTI-SELECT VERSION ===== */

.custom-grid-container[b-47wayady5t] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-height: 260px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Toolbar */
.custom-grid-toolbar[b-47wayady5t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 8px;
    flex-shrink: 0;
    height: 44px;
}

.toolbar-left[b-47wayady5t] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.toolbar-right[b-47wayady5t] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 280px;
}

.toolbar-btn[b-47wayady5t] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    height: 32px;
    flex-shrink: 0;
}

    .toolbar-btn:hover:not(:disabled)[b-47wayady5t] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .toolbar-btn:disabled[b-47wayady5t] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .toolbar-btn .material-icons[b-47wayady5t] {
        font-size: 18px;
    }

.refresh-btn[b-47wayady5t] {
    padding: 6px 8px;
}

.search-box[b-47wayady5t] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    min-width: 120px;
    max-width: 250px;
    width: 100%;
    flex: 1 1 auto;
    height: 32px;
    transition: border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

    .search-box:focus-within[b-47wayady5t] {
        border-color: #E36F26;
        box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.1);
    }

.search-icon[b-47wayady5t] {
    font-size: 18px;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
}

.search-input[b-47wayady5t] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 11px;
    padding: 4px;
    background: transparent;
    min-width: 60px;
}

    .search-input[b-47wayady5t]::placeholder {
        color: #999;
    }

    .search-input:disabled[b-47wayady5t] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.clear-icon[b-47wayady5t] {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

    .clear-icon:hover[b-47wayady5t] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-47wayady5t] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.custom-grid-row[b-47wayady5t] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    flex-shrink: 0;
}

.header-row[b-47wayady5t] {
    background: #f5f5f5;
    flex-shrink: 0;
}

.custom-grid-cell[b-47wayady5t] {
    padding: 3px 6px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    border-right: 1px solid #ddd;
    overflow: hidden;
}

    .custom-grid-cell:last-child[b-47wayady5t] {
        border-right: none;
    }

.header-cell[b-47wayady5t] {
    gap: 3px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

    .header-cell:hover[b-47wayady5t] {
        background: #e8e8e8;
    }

.sort-icon[b-47wayady5t] {
    font-size: 14px;
    color: #E36F26;
}

.cell-content[b-47wayady5t] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Checkbox Styling */
.select-all-checkbox[b-47wayady5t],
.row-checkbox[b-47wayady5t] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #E36F26;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .select-all-checkbox:hover[b-47wayady5t],
    .row-checkbox:hover[b-47wayady5t] {
        transform: scale(1.1);
    }

    .select-all-checkbox:checked[b-47wayady5t],
    .row-checkbox:checked[b-47wayady5t] {
        background-color: #E36F26;
        border-color: #E36F26;
    }

/* Grid Body */
.custom-grid-body[b-47wayady5t] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 84px;
    max-height: 140px;
}

.data-row[b-47wayady5t] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    flex-shrink: 0;
}

    .data-row.even-row[b-47wayady5t] {
        background-color: white;
    }

    .data-row.odd-row[b-47wayady5t] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-47wayady5t] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-47wayady5t] {
            font-weight: 700 !important;
        }

    [b-47wayady5t] .users-search-grid .data-row.selected,
    .data-row.selected[b-47wayady5t] {
        background-color: #d0d0d0 !important;
        border-left: 4px solid #E36F26 !important;
        box-shadow: 0 0 12px rgba(227, 111, 38, 0.4) !important;
        font-weight: 700 !important;
        padding-left: 0 !important;
    }

        [b-47wayady5t] .users-search-grid .data-row.selected .custom-grid-cell,
        .data-row.selected .custom-grid-cell[b-47wayady5t] {
            font-weight: 700 !important;
            color: #333 !important;
        }

            [b-47wayady5t] .users-search-grid .data-row.selected .custom-grid-cell:first-child,
            .data-row.selected .custom-grid-cell:first-child[b-47wayady5t] {
                padding-left: 2px;
            }

    .data-row[b-47wayady5t]::after {
        content: "Click to select.";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 3px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1000;
    }

    .data-row:first-child[b-47wayady5t]::after {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 3px;
    }

    .data-row:hover[b-47wayady5t]::after {
        opacity: 1;
    }

/* Grid Footer */
.custom-grid-footer[b-47wayady5t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 10px;
    flex-shrink: 0;
    height: 32px;
}

.footer-info[b-47wayady5t] {
    display: flex;
    gap: 10px;
    color: #666;
}

.selected-indicator[b-47wayady5t] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-47wayady5t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-47wayady5t] {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-47wayady5t 1s linear infinite;
}

@keyframes spin-b-47wayady5t {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-47wayady5t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-47wayady5t] {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* Scrollbar */
.custom-grid-body[b-47wayady5t]::-webkit-scrollbar {
    width: 6px;
}

.custom-grid-body[b-47wayady5t]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-47wayady5t]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .custom-grid-body[b-47wayady5t]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Disabled State */
.custom-grid-container.disabled[b-47wayady5t] {
    pointer-events: none;
    opacity: 0.5;
}

    .custom-grid-container.disabled .data-row[b-47wayady5t] {
        cursor: not-allowed;
    }
/* /Components/CustomWorkflowsGrid.razor.rz.scp.css */
.custom-grid-container[b-i7ktoghyox] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

.custom-grid-toolbar[b-i7ktoghyox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-i7ktoghyox] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-i7ktoghyox] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.toolbar-btn:hover[b-i7ktoghyox] {
    background: #E36F26;
    color: white;
    border-color: #E36F26;
}

.toolbar-btn:hover .material-icons[b-i7ktoghyox] {
    color: white;
}

.toolbar-btn .material-icons[b-i7ktoghyox] {
    font-size: 18px;
    color: #E36F26;
    transition: color 0.2s;
}

.search-box[b-i7ktoghyox] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-i7ktoghyox] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-i7ktoghyox] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

.search-input[b-i7ktoghyox]::placeholder {
    color: #999;
}

.clear-icon[b-i7ktoghyox] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

.clear-icon:hover[b-i7ktoghyox] {
    color: #E36F26;
}

.custom-grid-header[b-i7ktoghyox] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-i7ktoghyox] {
    display: flex;
    background: #f5f5f5;
    height: 30px;
}

.header-cell[b-i7ktoghyox] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

.header-cell:last-child[b-i7ktoghyox] {
    border-right: none;
}

.header-cell:hover[b-i7ktoghyox] {
    background: #e8e8e8;
}

.sort-icon[b-i7ktoghyox] {
    font-size: 16px;
    color: #E36F26;
}

.actions-header[b-i7ktoghyox] {
    justify-content: center;
    cursor: default;
}

.actions-header:hover[b-i7ktoghyox] {
    background: #f5f5f5;
}

.custom-grid-body[b-i7ktoghyox] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-i7ktoghyox] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    height: 30px;
    min-height: 30px;
}

.data-row[b-i7ktoghyox] {
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

.data-row.even-row[b-i7ktoghyox] {
    background-color: white;
}

.data-row.odd-row[b-i7ktoghyox] {
    background-color: #f5f5f5;
}

.data-row:hover[b-i7ktoghyox] {
    background-color: #e0e0e0 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
}

.data-row:hover .custom-grid-cell[b-i7ktoghyox] {
    font-weight: 700 !important;
}

.custom-grid-cell[b-i7ktoghyox] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
}

.custom-grid-cell:last-child[b-i7ktoghyox] {
    border-right: none;
}

.cell-content[b-i7ktoghyox] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-cell[b-i7ktoghyox] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn[b-i7ktoghyox] {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.action-btn .material-icons[b-i7ktoghyox] {
    font-size: 16px;
}

.delete-btn[b-i7ktoghyox] {
    background: #E36F26 !important;
    border: 1px solid #E36F26 !important;
    border-radius: 10px;
    padding: 2px 6px;
    position: relative;
}

.delete-btn .material-icons[b-i7ktoghyox] {
    color: white !important;
    font-size: 16px;
}

.delete-btn:hover[b-i7ktoghyox] {
    background: #E36F26 !important;
    border-color: #E36F26 !important;
    opacity: 0.9;
}

.custom-grid-footer[b-i7ktoghyox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 11px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-i7ktoghyox] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-i7ktoghyox] {
    color: #E36F26;
    font-weight: 600;
}

.loading-overlay[b-i7ktoghyox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-i7ktoghyox] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-i7ktoghyox 1s linear infinite;
}

@keyframes spin-b-i7ktoghyox {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-i7ktoghyox] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

.no-data-message .material-icons[b-i7ktoghyox] {
    font-size: 64px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.custom-grid-body[b-i7ktoghyox]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-i7ktoghyox]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-i7ktoghyox]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.custom-grid-body[b-i7ktoghyox]::-webkit-scrollbar-thumb:hover {
    background: #E36F26;
}

.data-row[b-i7ktoghyox]::after {
    content: "Click to navigate to workflow.";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-i7ktoghyox]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-i7ktoghyox]::after {
    opacity: 1;
}
/* /Components/GlobalEditorPanel.razor.rz.scp.css */
.global-editor-overlay[b-j6v6j5ti3k] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    display: none;
    cursor: pointer; /* Add this line */
}

    .global-editor-overlay.open[b-j6v6j5ti3k] {
        display: block;
    }

.global-editor-panel[b-j6v6j5ti3k] {
    position: fixed;
    top: 0;
    right: -60%;
    width: 60%;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    cursor: default; /* Add this line to reset cursor inside the panel */
}

    .global-editor-panel.open[b-j6v6j5ti3k] {
        right: 0;
    }

.global-editor-header[b-j6v6j5ti3k] {
    background: #E36F26;
    color: white;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.global-editor-header-info[b-j6v6j5ti3k] {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

    .global-editor-header-info .header-line[b-j6v6j5ti3k] {
        font-size: 0.95em;
        line-height: 1.3;
    }

        .global-editor-header-info .header-line strong[b-j6v6j5ti3k] {
            font-weight: 700;
        }

    /* Header Row 1: 20px, underlined */
    .global-editor-header-info .header-line:nth-child(1)[b-j6v6j5ti3k] {
        font-size: 20px;
        text-decoration: underline;
    }

    /* Header Row 2: 18px */
    .global-editor-header-info .header-line:nth-child(2)[b-j6v6j5ti3k] {
        font-size: 18px;
    }

    /* Header Row 3: 16px */
    .global-editor-header-info .header-line:nth-child(3)[b-j6v6j5ti3k] {
        font-size: 16px;
    }

.global-editor-close-btn[b-j6v6j5ti3k] {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .global-editor-close-btn:hover[b-j6v6j5ti3k] {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

.global-editor-body[b-j6v6j5ti3k] {
    flex: 1;
    overflow: hidden;
    padding: 0;
}
/* /Components/GlobalPdfViewerPanel.razor.rz.scp.css */
.global-pdfviewer-overlay[b-7d8fes3q3p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
}

.global-pdfviewer-overlay.open[b-7d8fes3q3p] {
    display: block;
}

.global-pdfviewer-panel[b-7d8fes3q3p] {
    position: fixed;
    top: 0;
    right: -60vw; 
    width: 60vw; 
    height: 100vh;
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    visibility: hidden;
}

.global-pdfviewer-panel.open[b-7d8fes3q3p] {
    right: 0;
    visibility: visible;
}

.global-pdfviewer-header[b-7d8fes3q3p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    flex-shrink: 0;
    height: 60px;
    min-height: 60px;
}

.global-pdfviewer-header-info[b-7d8fes3q3p] {
    flex: 1;
}

.header-line[b-7d8fes3q3p] {
    margin: 0;
    font-size: 1rem;
}

.global-pdfviewer-close-btn[b-7d8fes3q3p] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.global-pdfviewer-close-btn:hover[b-7d8fes3q3p] {
    background: #e9ecef;
    color: #333;
}

.global-pdfviewer-body[b-7d8fes3q3p] {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    height: calc(100vh - 60px);
    background: white;
}

.pdf-loading[b-7d8fes3q3p] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    font-size: 1rem;
    color: #666;
}

.global-pdfviewer-body .k-pdfviewer[b-7d8fes3q3p] {
    width: 100% !important;
    height: 100% !important;
}
/* /Components/SourceSelectionBreadcrumb.razor.rz.scp.css */
.source-selection-layout[b-7ndrbe2hxs] {
    display: flex;
    height: 100%;
    gap: 1rem;
    overflow: hidden;
}

.source-breadcrumb-sidebar[b-7ndrbe2hxs] {
    width: 250px;
    min-width: 250px;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    padding: 1rem;
    overflow-y: auto;
    flex-shrink: 0;
}

.breadcrumb-vertical-container[b-7ndrbe2hxs] {
    display: flex;
    flex-direction: column;
}

.breadcrumb-vertical-item[b-7ndrbe2hxs] {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    border: 1.5px solid #dee2e6;
    margin-bottom: 0.5rem;
}

    .breadcrumb-vertical-item:hover:not(.disabled):not(.active)[b-7ndrbe2hxs] {
        background-color: #F5A76E;
        border-color: #F5A76E;
    }

    .breadcrumb-vertical-item.active[b-7ndrbe2hxs] {
        background-color: #E36F26;
        color: white;
        border-color: #E36F26;
    }

    .breadcrumb-vertical-item.disabled[b-7ndrbe2hxs] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
        border-color: #dee2e6;
    }

.breadcrumb-vertical-content[b-7ndrbe2hxs] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.breadcrumb-vertical-label[b-7ndrbe2hxs] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #E36F26;
    margin-bottom: 0.125rem;
}

.breadcrumb-vertical-item.active .breadcrumb-vertical-label[b-7ndrbe2hxs] {
    color: white;
}

.breadcrumb-vertical-value[b-7ndrbe2hxs] {
    font-size: 0.75rem;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    padding-left: 0.25em;
}

.breadcrumb-vertical-pending[b-7ndrbe2hxs] {
    font-size: 0.75rem;
    font-style: italic;
    opacity: 0.6;
    padding-left: 0.25em;
}

.source-grid-container[b-7ndrbe2hxs] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
/* /Components/TinyMCEEditor.razor.rz.scp.css */
.tinymce-editor-container[b-bjhbgr1fnj] {
    position: relative;
    width: 100%;
    height: 100%;
    background: white;
}

.editor-loading-overlay[b-bjhbgr1fnj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.editor-loading-overlay .spinner[b-bjhbgr1fnj] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-bjhbgr1fnj 1s linear infinite;
}

.editor-loading-overlay p[b-bjhbgr1fnj] {
    margin-top: 1em;
    color: #E36F26;
    font-weight: 600;
}

@keyframes spin-b-bjhbgr1fnj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Pages/Archives.razor.rz.scp.css */
/* Custom Grid Container */
.custom-grid-container[b-qfs8rww5k1] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    font-size: 12px;
    font-family: Arial, sans-serif;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: visible;
}

/* Toolbar */
.custom-grid-toolbar[b-qfs8rww5k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    gap: 12px;
    flex-shrink: 0;
}

.toolbar-left[b-qfs8rww5k1] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-qfs8rww5k1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-qfs8rww5k1] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .toolbar-btn:hover .material-icons[b-qfs8rww5k1] {
            color: white;
        }

    .toolbar-btn .material-icons[b-qfs8rww5k1] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }

.search-box[b-qfs8rww5k1] {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    min-width: 250px;
    max-width: 300px;
    height: 38px;
}

.search-icon[b-qfs8rww5k1] {
    font-size: 20px;
    color: #666;
    margin-right: 6px;
}

.search-input[b-qfs8rww5k1] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background: transparent;
}

    .search-input[b-qfs8rww5k1]::placeholder {
        color: #999;
    }

.clear-icon[b-qfs8rww5k1] {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    margin-left: 4px;
}

    .clear-icon:hover[b-qfs8rww5k1] {
        color: #E36F26;
    }

/* Grid Header */
.custom-grid-header[b-qfs8rww5k1] {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.header-row[b-qfs8rww5k1] {
    display: flex;
    background: #f5f5f5;
    min-height: 30px;
}

.header-cell[b-qfs8rww5k1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid #ccc;
}

    .header-cell:last-child[b-qfs8rww5k1] {
        border-right: none;
    }

    .header-cell:hover[b-qfs8rww5k1] {
        background: #e8e8e8;
    }

.sort-icon[b-qfs8rww5k1] {
    font-size: 16px;
    color: #E36F26;
}

/* Grid Body */
.custom-grid-body[b-qfs8rww5k1] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

.custom-grid-row[b-qfs8rww5k1] {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    min-height: 30px;
}

.data-row[b-qfs8rww5k1] {
    cursor: default;
    transition: background-color 0.1s ease, transform 0.1s ease;
    position: relative;
}

    .data-row.even-row[b-qfs8rww5k1] {
        background-color: white;
    }

    .data-row.odd-row[b-qfs8rww5k1] {
        background-color: #f5f5f5;
    }

    .data-row:hover[b-qfs8rww5k1] {
        background-color: #e0e0e0 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(51, 51, 51, 0.2);
    }

        .data-row:hover .custom-grid-cell[b-qfs8rww5k1] {
            font-weight: 700 !important;
        }

.custom-grid-cell[b-qfs8rww5k1] {
    padding: 4px 6px;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.4;
    border-right: 1px solid #ddd;
    overflow: hidden;
    min-width: 0;
    min-height: 30px;
}

    .custom-grid-cell:last-child[b-qfs8rww5k1] {
        border-right: none;
    }

/* Cell content - WRAPPING ENABLED */
.cell-content[b-qfs8rww5k1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* File link button styling - looks like a link with wrapping */
.file-link-button[b-qfs8rww5k1] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    transition: color 0.2s;
}

    .file-link-button:hover[b-qfs8rww5k1] {
        color: #E36F26;
        font-weight: 700;
    }

    .file-link-button:focus[b-qfs8rww5k1] {
        outline: none;
        color: #E36F26;
    }

.no-file[b-qfs8rww5k1] {
    color: #999;
    font-style: italic;
}

/* Grid Footer */
.custom-grid-footer[b-qfs8rww5k1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    font-size: 12px;
    flex-shrink: 0;
    flex-grow: 0;
}

.footer-info[b-qfs8rww5k1] {
    display: flex;
    gap: 12px;
    color: #666;
}

.selected-indicator[b-qfs8rww5k1] {
    color: #E36F26;
    font-weight: 600;
}

/* Loading & No Data */
.loading-overlay[b-qfs8rww5k1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.spinner[b-qfs8rww5k1] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #E36F26;
    border-radius: 50%;
    animation: spin-b-qfs8rww5k1 1s linear infinite;
}

@keyframes spin-b-qfs8rww5k1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.no-data-message[b-qfs8rww5k1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

    .no-data-message .material-icons[b-qfs8rww5k1] {
        font-size: 64px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

/* Scrollbar Styling */
.custom-grid-body[b-qfs8rww5k1]::-webkit-scrollbar {
    width: 8px;
}

.custom-grid-body[b-qfs8rww5k1]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-grid-body[b-qfs8rww5k1]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-grid-body[b-qfs8rww5k1]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }

/* Tooltip - Read-only */
.data-row[b-qfs8rww5k1]::after {
    content: "Read-only";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 4px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.data-row.first-row[b-qfs8rww5k1]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 4px;
}

.data-row:hover[b-qfs8rww5k1]::after {
    opacity: 1;
}

/* Focusable cell styling for keyboard navigation */
.focusable-cell[b-qfs8rww5k1] {
    outline: none;
    position: relative;
}

    .focusable-cell:focus[b-qfs8rww5k1] {
        outline: 2px solid #E36F26;
        outline-offset: -2px;
        z-index: 1;
    }

        .focusable-cell:focus[b-qfs8rww5k1]::after {
            content: 'Read-only';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 5px;
            pointer-events: none;
        }

        .focusable-cell:focus[b-qfs8rww5k1]::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #333;
            z-index: 1000;
            margin-bottom: -5px;
            pointer-events: none;
        }

/* File cell focus - different tooltip */
.file-cell:focus[b-qfs8rww5k1]::after {
    content: 'Press Enter or Space to open file';
}

.data-row.first-row .focusable-cell:focus[b-qfs8rww5k1]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

.data-row.first-row .focusable-cell:focus[b-qfs8rww5k1]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-top-color: transparent;
    border-bottom-color: #333;
}
/* /Pages/Asset.razor.rz.scp.css */
/* ...existing code... */
.grid-container[b-bcugj0bavj] {
    display: flex;
    height: calc(100vh - 230px);
}

.grid-wrapper[b-bcugj0bavj] {
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: hidden;
}

.splitter[b-bcugj0bavj] {
    flex: 0 0 4px;
    background: #e0e0e0;
    cursor: col-resize;
    z-index: 10;
}

    .splitter:hover[b-bcugj0bavj] {
        background: #ccc;
    }

.grid-wrapper:not(:last-child)[b-bcugj0bavj] {
    border-right: 1px solid #e0e0e0;
}

.dialog-content[b-bcugj0bavj] {
    padding: 20px;
}

.form-group[b-bcugj0bavj] {
    margin-bottom: 20px;
}

.form-label[b-bcugj0bavj] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.k-radio-list.k-list-horizontal[b-bcugj0bavj] {
    gap: 20px;
}

/* Smooth fade-in animation for grid transitions */
.custom-grid-container[b-bcugj0bavj] {
    animation: fadeIn-b-bcugj0bavj 0.2s ease-in;
}

@keyframes fadeIn-b-bcugj0bavj {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Back button styling */
.toolbar-btn.back-btn[b-bcugj0bavj] {
    background-color: #6c757d;
    color: white;
}

    .toolbar-btn.back-btn:hover[b-bcugj0bavj] {
        background-color: #5a6268;
    }

/* View button styling */
.action-btn.view-btn[b-bcugj0bavj] {
    background-color: #E36F26;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

    .action-btn.view-btn:hover[b-bcugj0bavj] {
        background-color: #C85E1F;
    }

/* View badge button styling - pill shaped badge */
.action-btn.view-badge-btn[b-bcugj0bavj] {
    background-color: #E36F26;
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.2s ease;
    margin-right: 8px;
}

    .action-btn.view-badge-btn:hover[b-bcugj0bavj] {
        background-color: #C85E1F;
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(227, 111, 38, 0.4);
    }

    .action-btn.view-badge-btn:active[b-bcugj0bavj] {
        transform: scale(0.98);
    }

/* Delete button - keep existing, just ensure spacing */
.action-btn.delete-btn[b-bcugj0bavj] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #dc3545;
    transition: all 0.2s ease;
}

    .action-btn.delete-btn:hover[b-bcugj0bavj] {
        color: #bd2130;
        transform: scale(1.1);
    }
/* Record Wizard Styling */
.wizard-container[b-bcugj0bavj] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 230px);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wizard-header[b-bcugj0bavj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

    .wizard-header h3[b-bcugj0bavj] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.wizard-actions[b-bcugj0bavj] {
    display: flex;
    gap: 10px;
}

.wizard-body[b-bcugj0bavj] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.form-group[b-bcugj0bavj] {
    margin-bottom: 20px;
}

.form-label[b-bcugj0bavj] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.custom-source-grid-container[b-bcugj0bavj] {
    height: 300px;
}

/* ===== LOADER/BADGE/ICON STYLES ===== */
.contacts-container[b-bcugj0bavj] {
    position: relative;
}

.k-loader-container[b-bcugj0bavj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.icon-badge-button[b-bcugj0bavj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: background 0.2s;
}

    .icon-badge-button:hover[b-bcugj0bavj] {
        background: #f0f0f0;
        border-radius: 4px;
    }

    .icon-badge-button img[b-bcugj0bavj] {
        width: 16px;
        height: 16px;
    }

.badge-count[b-bcugj0bavj] {
    color: #E36F26;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* ===== VERTICAL BREADCRUMB TABS ===== */
.checklists-content-wrapper[b-bcugj0bavj] {
    position: relative;
    height: calc(100vh - 200px);
}

    .checklists-content-wrapper.has-vertical-tabs[b-bcugj0bavj] {
        padding-left: 30px;
    }

.contacts-content-wrapper[b-bcugj0bavj] {
    position: relative;
    height: calc(100vh - 200px);
}

    .contacts-content-wrapper.has-vertical-tabs[b-bcugj0bavj] {
        padding-left: 30px;
    }

.vertical-breadcrumb-tabs[b-bcugj0bavj] {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
    z-index: 100;
    background: transparent;
}

.vertical-tab[b-bcugj0bavj] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: #fff;
    color: #E36F26;
    padding: 5px 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #c5c5c5;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 30px;
    position: relative;
    text-decoration: none;
    margin: 0;
}

    .vertical-tab:hover[b-bcugj0bavj] {
        background: #f5f5f5;
        text-decoration: none;
    }

    .vertical-tab:first-child[b-bcugj0bavj] {
        border-bottom-right-radius: 4px;
    }

    .vertical-tab:last-child[b-bcugj0bavj] {
        border-top-right-radius: 4px;
    }

    .vertical-tab:focus[b-bcugj0bavj] {
        outline: none;
        text-decoration: none;
    }

    .vertical-tab:active[b-bcugj0bavj] {
        text-decoration: none;
    }
/* ===== END VERTICAL BREADCRUMB TABS ===== */

.custom-toast[b-bcugj0bavj] {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: #323232;
    color: #fff;
    padding: 1em 2em;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    z-index: 9999;
    font-size: 1.1em;
    opacity: 0.95;
    transition: opacity 0.3s;
}

/* Asset Info Styles */
.asset-info-container[b-bcugj0bavj] {
    padding: 20px;
}

.asset-info-grid[b-bcugj0bavj] {
    max-width: 800px;
}

.asset-info-row[b-bcugj0bavj] {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.asset-info-row-split[b-bcugj0bavj] {
    display: flex;
    gap: 20px;
}

.asset-info-half[b-bcugj0bavj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.asset-info-label[b-bcugj0bavj] {
    min-width: 150px;
    font-weight: 500;
    color: #424242;
}

.asset-info-input[b-bcugj0bavj],
.asset-info-dropdown[b-bcugj0bavj] {
    flex: 1;
}

/* Notes and Dates Buttons */
.asset-info-notes-dates-row[b-bcugj0bavj] {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.notes-dates-buttons[b-bcugj0bavj] {
    display: flex;
    gap: 15px;
}

.notes-button[b-bcugj0bavj],
.dates-button[b-bcugj0bavj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

    .notes-button:hover[b-bcugj0bavj],
    .dates-button:hover[b-bcugj0bavj] {
        background-color: #f5f5f5;
        border-color: #1976d2;
    }

    .notes-button .k-icon[b-bcugj0bavj],
    .dates-button .k-icon[b-bcugj0bavj] {
        font-size: 18px;
        color: #1976d2;
    }

.button-text[b-bcugj0bavj] {
    font-weight: 500;
    color: #424242;
}

.count-badge[b-bcugj0bavj] {
    background-color: #1976d2;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Notes/Dates Panel */
.notes-dates-panel[b-bcugj0bavj] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notes-dates-header[b-bcugj0bavj] {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.back-button[b-bcugj0bavj] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

    .back-button:hover[b-bcugj0bavj] {
        background-color: #f5f5f5;
        border-color: #1976d2;
    }

    .back-button .k-icon[b-bcugj0bavj] {
        color: #1976d2;
    }

.notes-dates-header h3[b-bcugj0bavj] {
    margin: 0;
    font-size: 18px;
    color: #424242;
}

.notes-dates-content[b-bcugj0bavj] {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.loader-container[b-bcugj0bavj] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

#assetInfoDiv[b-bcugj0bavj] {
    background: #f5f5f5;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 1em;
}

/* Ensure inputs have white background on gray panel */
.k-input[b-bcugj0bavj],
.k-textbox[b-bcugj0bavj],
.k-picker[b-bcugj0bavj],
.k-numerictextbox[b-bcugj0bavj],
.k-input-inner[b-bcugj0bavj] {
    background: #fff !important;
}

.readonly-input-style[b-bcugj0bavj] {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.5em 0.75em;
    font-size: 1rem;
    color: #495057;
    min-height: 2.5em;
    box-sizing: border-box;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* ===== ASSET LOOKUPS CONTAINER ===== */
.asset-lookups-container[b-bcugj0bavj] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    width: 100%;
}

.lookup-type-selector[b-bcugj0bavj] {
    flex-shrink: 0;
    background: #f5f5f5;
    border-bottom: 2px solid #e36f26;
}

    .lookup-type-selector fieldset[b-bcugj0bavj] {
        border: 1px solid #e36f26;
        border-radius: 4px;
    }

.lookup-grid-wrapper[b-bcugj0bavj] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

    /* ===== CHARGE CODES MODE ===== */
    /* Charge Codes: Show Name (50%), Code (24%), SubType (24%), Actions (2%) */
    /* Hide: Sort, Type, Status */
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-header .header-row > div:nth-child(1))[b-bcugj0bavj],
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-body .data-row > div:nth-child(1))[b-bcugj0bavj] {
        display: none; /* Hide Sort */
    }

    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-header .header-row > div:nth-child(4))[b-bcugj0bavj],
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-body .data-row > div:nth-child(4))[b-bcugj0bavj] {
        display: none; /* Hide Type */
    }

    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-header .header-row > div:nth-child(6))[b-bcugj0bavj],
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-body .data-row > div:nth-child(6))[b-bcugj0bavj] {
        display: none; /* Hide Status */
    }

    /* Adjust widths for Charge Codes */
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-header .header-row > div:nth-child(2))[b-bcugj0bavj],
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-body .data-row > div:nth-child(2))[b-bcugj0bavj] {
        width: 50% !important; /* Name */
    }

    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-header .header-row > div:nth-child(3))[b-bcugj0bavj],
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-body .data-row > div:nth-child(3))[b-bcugj0bavj] {
        width: 24% !important; /* Charge Code */
    }

    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-header .header-row > div:nth-child(5))[b-bcugj0bavj],
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-body .data-row > div:nth-child(5))[b-bcugj0bavj] {
        width: 24% !important; /* SubType */
    }

    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-header .header-row > div:nth-child(7))[b-bcugj0bavj],
    .lookup-grid-wrapper.charge-codes-mode :deep(.custom-grid-body .data-row > div:nth-child(7))[b-bcugj0bavj] {
        width: 2% !important; /* Actions */
    }

    /* ===== RECOVERY POOLS MODE ===== */
    /* Recovery Pools: Show Name (70%), Code (28%), Actions (2%) */
    /* Hide: Sort, Type, SubType, Status */
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-header .header-row > div:nth-child(1))[b-bcugj0bavj],
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-body .data-row > div:nth-child(1))[b-bcugj0bavj] {
        display: none; /* Hide Sort */
    }

    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-header .header-row > div:nth-child(4))[b-bcugj0bavj],
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-body .data-row > div:nth-child(4))[b-bcugj0bavj] {
        display: none; /* Hide Type */
    }

    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-header .header-row > div:nth-child(5))[b-bcugj0bavj],
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-body .data-row > div:nth-child(5))[b-bcugj0bavj] {
        display: none; /* Hide SubType */
    }

    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-header .header-row > div:nth-child(6))[b-bcugj0bavj],
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-body .data-row > div:nth-child(6))[b-bcugj0bavj] {
        display: none; /* Hide Status */
    }

    /* Adjust widths for Recovery Pools */
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-header .header-row > div:nth-child(2))[b-bcugj0bavj],
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-body .data-row > div:nth-child(2))[b-bcugj0bavj] {
        width: 70% !important; /* Name */
    }

    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-header .header-row > div:nth-child(3))[b-bcugj0bavj],
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-body .data-row > div:nth-child(3))[b-bcugj0bavj] {
        width: 28% !important; /* Pool Code */
    }

    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-header .header-row > div:nth-child(7))[b-bcugj0bavj],
    .lookup-grid-wrapper.recovery-pools-mode :deep(.custom-grid-body .data-row > div:nth-child(7))[b-bcugj0bavj] {
        width: 2% !important; /* Actions */
    }
/* ===== END ASSET LOOKUPS ===== */

/* ===== DIV 7: COMBINE SUITES WIZARD - SIDE-BY-SIDE LAYOUT ===== */
.combine-suites-wizard-container[b-bcugj0bavj] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    background: white;
    padding: 6px;
    gap: 4px;
    box-sizing: border-box;
}

.wizard-header-simple[b-bcugj0bavj] {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    height: 18px;
    flex-shrink: 0;
}

.wizard-title-simple[b-bcugj0bavj] {
    color: #E36F26;
    font-weight: 700;
}

.wizard-form-row[b-bcugj0bavj] {
    display: flex;
    gap: 6px;
    padding: 3px 0;
    border-top: 1px solid #ddd;
    height: 50px;
    flex-shrink: 0;
}

.form-group[b-bcugj0bavj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .form-group label[b-bcugj0bavj] {
        font-size: 10px;
        font-weight: 600;
        color: #333;
        line-height: 1;
    }

    .form-group .required[b-bcugj0bavj] {
        color: #E36F26;
    }

.form-input[b-bcugj0bavj] {
    padding: 3px 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 28px;
    box-sizing: border-box;
}

    .form-input:focus[b-bcugj0bavj] {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 1px rgba(227, 111, 38, 0.1);
    }

    .form-input[readonly][b-bcugj0bavj] {
        background: #f5f5f5;
        cursor: not-allowed;
    }

.wizard-actions[b-bcugj0bavj] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    padding-top: 0.5em;
    border-top: 1px solid #ddd;
    flex-shrink: 0;
}

    .wizard-actions .k-button[b-bcugj0bavj] {
        min-height: 36px;
    }

/* Floors/Suites Radio Group - 14px font size */
.floors-suites-mode-selector[b-bcugj0bavj] {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 0.5em;
}

.floors-suites-mode-selector :deep(.k-radio-list)[b-bcugj0bavj] {
    display: flex !important;
    flex-direction: row !important;
    gap: 1em !important;
    border: none !important;
}

.floors-suites-mode-selector :deep(.k-radio-item)[b-bcugj0bavj] {
    margin-right: 0 !important;
    border: none !important;
}

.floors-suites-mode-selector :deep(.k-radio-label)[b-bcugj0bavj] {
    font-size: 14px !important; /* ✅ FIXED: Changed from 12px to 14px */
    color: #424242 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
}

.floors-suites-mode-selector :deep(.k-radio:checked)[b-bcugj0bavj],
.floors-suites-mode-selector :deep(.k-radio.k-checked)[b-bcugj0bavj] {
    border-color: #E36F26 !important;
    color: #E36F26 !important;
}

.floors-suites-mode-selector :deep(.k-radio:checked::before)[b-bcugj0bavj],
.floors-suites-mode-selector :deep(.k-radio.k-checked::before)[b-bcugj0bavj] {
    background-color: #E36F26 !important;
}

.floors-suites-mode-selector :deep(.k-radio:focus)[b-bcugj0bavj],
.floors-suites-mode-selector :deep(.k-radio.k-focus)[b-bcugj0bavj] {
    box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.3) !important;
}

.floors-suites-mode-selector :deep(.k-radio-list.k-list-horizontal)[b-bcugj0bavj] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

[b-bcugj0bavj] .import-filter-date-input {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1;
    color: #495057;
    height: auto;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out;
}

    [b-bcugj0bavj] .import-filter-date-input:focus {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 0.2rem rgba(227, 111, 38, 0.25);
    }

.btn-back-to-parent[b-bcugj0bavj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .btn-back-to-parent:hover[b-bcugj0bavj] {
        background: #E36F26;
        border-color: #E36F26;
        color: white;
        box-shadow: 0 2px 6px rgba(227, 111, 38, 0.3);
        transform: translateY(-1px);
    }

    .btn-back-to-parent .material-icons[b-bcugj0bavj] {
        font-size: 1.2rem;
    }
/* /Pages/Assets.razor.rz.scp.css */
/* ===== CONTAINER STYLES ===== */
.contacts-container[b-3808midbxi] {
    position: relative;
}

/* ===== LOADER STYLES ===== */
.k-loader-container[b-3808midbxi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

/* ===== WIZARD FIELDSET STYLES ===== */
.wizard-fieldset[b-3808midbxi] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 0;
}

    .wizard-fieldset legend[b-3808midbxi] {
        padding: 0 8px;
        font-size: 12px;
        color: #E36F26;
        font-weight: 600;
    }

/* ===== TELERIK WINDOW STYLES ===== */
.k-window[b-3808midbxi] {
    font-size: 12px;
}

.k-window-title[b-3808midbxi] {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #E36F26 !important;
}

.k-window-content[b-3808midbxi] {
    overflow-y: auto !important;
}

/* ===== TELERIK GRID STYLES ===== */
.k-grid[b-3808midbxi] {
    font-size: 12px;
}

    .k-grid td[b-3808midbxi] {
        padding: 4px 8px;
        line-height: 1.4;
        font-size: 12px;
    }

    .k-grid th[b-3808midbxi] {
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 600;
    }

    .k-grid .k-table-row[b-3808midbxi] {
        height: 30px;
    }

/* ===== TELERIK INPUT STYLES ===== */
.k-input[b-3808midbxi],
.k-textbox[b-3808midbxi],
.k-input-inner[b-3808midbxi] {
    font-size: 12px;
}

/* ===== TELERIK BUTTON STYLES ===== */
.k-button[b-3808midbxi] {
    font-size: 12px;
}

    .k-button:disabled[b-3808midbxi],
    .k-button.k-disabled[b-3808midbxi] {
        background-color: #d3d3d3 !important;
        color: #888 !important;
        border-color: #c0c0c0 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

/* ===== TELERIK SWITCH STYLES ===== */
.k-switch[b-3808midbxi] {
    font-size: 12px;
}

/* ===== TELERIK RADIO GROUP STYLES ===== */
.k-radio-label[b-3808midbxi] {
    font-size: 12px;
}

.k-radio-list[b-3808midbxi] {
    display: flex !important;
    flex-direction: row !important;
    gap: 1em !important;
}

.k-radio-item[b-3808midbxi] {
    margin-right: 0 !important;
}
/* /Pages/Client.razor.rz.scp.css */
/* ...existing code... */
.grid-container[b-22fh9z9y4t] {
    display: flex;
    height: calc(100vh - 230px);
}

.grid-wrapper[b-22fh9z9y4t] {
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: hidden;
}

.splitter[b-22fh9z9y4t] {
    flex: 0 0 4px;
    background: #e0e0e0;
    cursor: col-resize;
    z-index: 10;
}

.splitter:hover[b-22fh9z9y4t] {
    background: #ccc;
}

.grid-wrapper:not(:last-child)[b-22fh9z9y4t] {
    border-right: 1px solid #e0e0e0;
}

.dialog-content[b-22fh9z9y4t] {
    padding: 20px;
}

.form-group[b-22fh9z9y4t] {
    margin-bottom: 20px;
}

.form-label[b-22fh9z9y4t] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.k-radio-list.k-list-horizontal[b-22fh9z9y4t] {
    gap: 20px;
}

/* Smooth fade-in animation for grid transitions */
.custom-grid-container[b-22fh9z9y4t] {
    animation: fadeIn-b-22fh9z9y4t 0.2s ease-in;
}

@keyframes fadeIn-b-22fh9z9y4t {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Back button styling */
.toolbar-btn.back-btn[b-22fh9z9y4t] {
    background-color: #6c757d;
    color: white;
}

    .toolbar-btn.back-btn:hover[b-22fh9z9y4t] {
        background-color: #5a6268;
    }

/* View button styling */
.action-btn.view-btn[b-22fh9z9y4t] {
    background-color: #E36F26;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

    .action-btn.view-btn:hover[b-22fh9z9y4t] {
        background-color: #C85E1F;
    }

/* View badge button styling - pill shaped badge */
.action-btn.view-badge-btn[b-22fh9z9y4t] {
    background-color: #E36F26;
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.2s ease;
    margin-right: 8px;
}

    .action-btn.view-badge-btn:hover[b-22fh9z9y4t] {
        background-color: #C85E1F;
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(227, 111, 38, 0.4);
    }

    .action-btn.view-badge-btn:active[b-22fh9z9y4t] {
        transform: scale(0.98);
    }

/* Delete button - keep existing, just ensure spacing */
.action-btn.delete-btn[b-22fh9z9y4t] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #dc3545;
    transition: all 0.2s ease;
}

    .action-btn.delete-btn:hover[b-22fh9z9y4t] {
        color: #bd2130;
        transform: scale(1.1);
    }
/* Record Wizard Styling */
.wizard-container[b-22fh9z9y4t] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 230px);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wizard-header[b-22fh9z9y4t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.wizard-header h3[b-22fh9z9y4t] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.wizard-actions[b-22fh9z9y4t] {
    display: flex;
    gap: 10px;
}

.wizard-body[b-22fh9z9y4t] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.form-group[b-22fh9z9y4t] {
    margin-bottom: 20px;
}

.form-label[b-22fh9z9y4t] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.custom-source-grid-container[b-22fh9z9y4t] {
    height: 300px;
}
/* /Pages/Clients.razor.rz.scp.css */
/* Main wizard container - full height */
.wizard-main-container[b-4gkcebj6x3] {
    height: calc(100vh - 112px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    background: #f9f9f9;
}

/* Wizard card container */
.wizard-container[b-4gkcebj6x3] {
    width: 100%;
    max-width: 700px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Wizard header */
.wizard-header[b-4gkcebj6x3] {
    padding: 16px 20px;
    border-bottom: 2px solid #E36F26;
    background: #f5f5f5;
}

    .wizard-header h3[b-4gkcebj6x3] {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #E36F26;
    }

/* Wizard body - scrollable content area */
.wizard-body[b-4gkcebj6x3] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
}

/* Fieldset styling to match Organizations.razor */
.wizard-fieldset[b-4gkcebj6x3] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #E36F26;
}

    .wizard-fieldset:last-child[b-4gkcebj6x3] {
        margin-bottom: 0;
    }

    .wizard-fieldset legend[b-4gkcebj6x3] {
        font-size: 12px;
        font-weight: 700;
        color: #E36F26;
        padding: 0 8px;
    }

/* Field wrapper */
.wizard-field[b-4gkcebj6x3] {
    margin-top: 8px;
}

/* Actions footer */
.wizard-actions[b-4gkcebj6x3] {
    padding: 16px 20px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Telerik TextBox styling */
[b-4gkcebj6x3] .k-input,
[b-4gkcebj6x3] .k-textbox,
[b-4gkcebj6x3] .k-input-inner {
    font-size: 12px;
}

/* Telerik Button styling */
[b-4gkcebj6x3] .k-button {
    font-size: 12px;
}

    [b-4gkcebj6x3] .k-button:disabled,
    [b-4gkcebj6x3] .k-button.k-disabled {
        background-color: #d3d3d3 !important;
        color: #888 !important;
        border-color: #c0c0c0 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

/* Telerik Radio Group styling - HORIZONTAL */
[b-4gkcebj6x3] .k-radio-label {
    font-size: 12px;
}

[b-4gkcebj6x3] .k-radio-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 1em !important;
}

[b-4gkcebj6x3] .k-radio-item {
    margin-right: 0 !important;
}

/* Container for entire page */
.contacts-container[b-4gkcebj6x3] {
    position: relative;
}
/* /Pages/Documents.razor.rz.scp.css */
.row-layout[b-zve4daxpeg] {
    display: flex;
    flex-direction: column;
}

.contacts-container[b-zve4daxpeg] {
    height: 100%;
}

.documents-panes-container[b-zve4daxpeg] {
    display: flex;
    height: 98%;
    width: 100%;
}

.documents-left-pane[b-zve4daxpeg] {
    display: flex;
    flex-direction: column;
    height: 98%;
    width: 55%;
    padding: 0.5rem;
    overflow: hidden;
}

.documents-right-pane[b-zve4daxpeg] {
    display: flex;
    flex-direction: column;
    height: 98%;
    width: 45%;
    padding: 0.5rem;
    overflow: hidden;
}

.source-fieldset[b-zve4daxpeg] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

    .source-fieldset legend[b-zve4daxpeg] {
        padding: 0 0.5rem;
        font-size: 0.9rem;
        color: #333;
    }

.source-header[b-zve4daxpeg] {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

    .source-header span[b-zve4daxpeg] {
        display: block;
        margin-bottom: 0.25rem;
    }

.source-content[b-zve4daxpeg] {
    margin-top: 0.5rem;
    overflow: auto;
    flex: 1;
}

[b-zve4daxpeg] .k-radio-label {
    margin-right: 1rem;
    font-size: 0.9rem;
}

[b-zve4daxpeg] .k-splitter {
    border: none;
}

[b-zve4daxpeg] .k-splitter-vertical .k-splitbar {
    background-color: #e0e0e0;
    width: 4px;
}
/* /Pages/ImportWizard.razor.rz.scp.css */
/* ===== WIZARD CONTAINER ===== */
.wizard-container[b-0bo64qx0d5] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 112px);
    padding: 1em;
    background: #f5f5f5;
    overflow: hidden;
}

/* ===== MAIN 50/50 SPLIT LAYOUT ===== */
.wizard-main-layout[b-0bo64qx0d5] {
    display: flex;
    gap: 1em;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* LEFT SIDE: STEPPER + CONTENT (50%) */
.wizard-stepper-container[b-0bo64qx0d5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 1em;
}

.wizard-stepper[b-0bo64qx0d5] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75em;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.step[b-0bo64qx0d5] {
    display: flex;
    align-items: center;
    position: relative;
}

.step-circle[b-0bo64qx0d5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s ease;
}

    .step-circle.inactive[b-0bo64qx0d5] {
        background: #e0e0e0;
        color: #888;
    }

    .step-circle.active[b-0bo64qx0d5] {
        background: #E36F26;
        color: white;
        box-shadow: 0 2px 8px rgba(227, 111, 38, 0.4);
    }

    .step-circle.completed[b-0bo64qx0d5] {
        background: #4CAF50;
        color: white;
    }

.step-label[b-0bo64qx0d5] {
    margin-left: 0.5em;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

    .step-label.active[b-0bo64qx0d5] {
        color: #E36F26;
    }

.step-connector[b-0bo64qx0d5] {
    width: 50px;
    height: 3px;
    background: #e0e0e0;
    margin: 0 0.75em;
}

    .step-connector.completed[b-0bo64qx0d5] {
        background: #4CAF50;
    }

.wizard-stepper-container fieldset[b-0bo64qx0d5] {
    margin: 0;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* RIGHT SIDE: BATCHES GRID (50%) */
.wizard-batches-container[b-0bo64qx0d5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .wizard-batches-container fieldset[b-0bo64qx0d5] {
        margin: 0;
        overflow: hidden;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

/* ===== WIZARD CONTENT AREA (INSIDE LEFT 50%) ===== */
.wizard-content[b-0bo64qx0d5] {
    flex: 1;
    padding: 1em;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wizard-step-title[b-0bo64qx0d5] {
    color: #E36F26;
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #E36F26;
    flex-shrink: 0;
}

.wizard-content > p[b-0bo64qx0d5] {
    flex-shrink: 0;
    margin-bottom: 0.75em;
    font-size: 0.9em;
}

/* ===== WIZARD NAVIGATION (INSIDE LEFT FIELDSET) ===== */
.wizard-navigation[b-0bo64qx0d5] {
    display: flex;
    justify-content: space-between;
    padding: 0.75em 1em;
    border-top: 1px solid #ddd;
    flex-shrink: 0;
    background: white;
}

/* ===== TELERIK BUTTON OVERRIDES - REALOGIC ORANGE ===== */
[b-0bo64qx0d5] .k-button-solid-primary {
    background-color: #E36F26 !important;
    border-color: #E36F26 !important;
    color: white !important;
}

    [b-0bo64qx0d5] .k-button-solid-primary:hover {
        background-color: #c95d1e !important;
        border-color: #c95d1e !important;
    }

    [b-0bo64qx0d5] .k-button-solid-primary:active,
    [b-0bo64qx0d5] .k-button-solid-primary:focus {
        background-color: #b5521a !important;
        border-color: #b5521a !important;
    }

[b-0bo64qx0d5] .k-button-solid-base {
    border-color: #E36F26 !important;
    color: #E36F26 !important;
}

    [b-0bo64qx0d5] .k-button-solid-base:hover {
        background-color: #fff5f0 !important;
        border-color: #c95d1e !important;
        color: #c95d1e !important;
    }

/* ===== UPLOAD ZONE (STEP 1) ===== */
.upload-zone[b-0bo64qx0d5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2em;
    background: white;
    border: 2px dashed #E36F26;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .upload-zone:hover[b-0bo64qx0d5] {
        background: #fafafa;
        border-color: #d35a1a;
    }

.uploaded-files-summary-compact[b-0bo64qx0d5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
    overflow: hidden;
    min-height: 0;
    max-height: 200px;
}

.summary-header[b-0bo64qx0d5] {
    padding: 0.5em 0.75em;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.uploaded-files-list-inline[b-0bo64qx0d5] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-content: flex-start;
    min-height: 0;
}

.uploaded-file-chip[b-0bo64qx0d5] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.35em 0.5em;
    background: white;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 0.75em;
    transition: all 0.2s;
}

    .uploaded-file-chip:hover[b-0bo64qx0d5] {
        border-color: #E36F26;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

.file-name-chip[b-0bo64qx0d5] {
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size-chip[b-0bo64qx0d5] {
    color: #888;
    font-size: 0.9em;
}

.remove-chip[b-0bo64qx0d5] {
    font-size: 16px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}

    .remove-chip:hover[b-0bo64qx0d5] {
        color: #E36F26;
    }

.total-summary[b-0bo64qx0d5] {
    padding: 0.5em 0.75em;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    flex-shrink: 0;
}

    .total-summary strong[b-0bo64qx0d5] {
        color: #E36F26;
    }

/* ===== INVOICE GRID (STEP 2) ===== */
.invoice-grid-container[b-0bo64qx0d5] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.invoice-grid[b-0bo64qx0d5] {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

    .invoice-grid thead[b-0bo64qx0d5] {
        background: #f5f5f5;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .invoice-grid th[b-0bo64qx0d5] {
        padding: 0.75em;
        font-weight: 700;
        font-size: 12px;
        color: #333;
        border-bottom: 2px solid #ddd;
    }

    .invoice-grid tbody tr[b-0bo64qx0d5] {
        border-bottom: 1px solid #eee;
        transition: background 0.2s;
    }

        .invoice-grid tbody tr:hover[b-0bo64qx0d5] {
            background: #f9f9f9;
        }

    .invoice-grid td[b-0bo64qx0d5] {
        padding: 0.75em;
        font-size: 12px;
        color: #333;
    }

    .invoice-grid tfoot[b-0bo64qx0d5] {
        background: #f5f5f5;
        border-top: 2px solid #E36F26;
    }

.invoice-total-row td[b-0bo64qx0d5] {
    color: #E36F26 !important;
}

/* ===== PAYMENT CONTENT (STEP 3) ===== */
.payment-content[b-0bo64qx0d5] {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* Vertical Breadcrumb Tabs for Import Activity */
.import-activity-content-wrapper[b-0bo64qx0d5] {
    position: relative;
    height: 100%;
}

    .import-activity-content-wrapper.has-vertical-tabs[b-0bo64qx0d5] {
        padding-left: 30px;
    }

.vertical-breadcrumb-tabs[b-0bo64qx0d5] {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
    z-index: 100;
    background: transparent;
}

.vertical-tab[b-0bo64qx0d5] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: #fff;
    color: #E36F26;
    padding: 5px 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #c5c5c5;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 30px;
    position: relative;
    text-decoration: none;
    margin: 0;
}

    .vertical-tab:hover[b-0bo64qx0d5] {
        background: #f5f5f5;
        text-decoration: none;
    }

    .vertical-tab:first-child[b-0bo64qx0d5] {
        border-bottom-right-radius: 4px;
    }

    .vertical-tab:last-child[b-0bo64qx0d5] {
        border-top-right-radius: 4px;
    }

    .vertical-tab:focus[b-0bo64qx0d5] {
        outline: none;
        text-decoration: none;
    }

    .vertical-tab:active[b-0bo64qx0d5] {
        text-decoration: none;
    }
/* /Pages/Organization.razor.rz.scp.css */
/* Grid container and wrapper styles */
.grid-container[b-l8cnbz2v8n] {
    display: flex;
    height: calc(100vh - 230px);
}

.grid-wrapper[b-l8cnbz2v8n] {
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: hidden;
}

.splitter[b-l8cnbz2v8n] {
    flex: 0 0 4px;
    background: #e0e0e0;
    cursor: col-resize;
    z-index: 10;
}

    .splitter:hover[b-l8cnbz2v8n] {
        background: #ccc;
    }

.grid-wrapper:not(:last-child)[b-l8cnbz2v8n] {
    border-right: 1px solid #e0e0e0;
}

.dialog-content[b-l8cnbz2v8n] {
    padding: 20px;
}

.form-group[b-l8cnbz2v8n] {
    margin-bottom: 20px;
}

.form-label[b-l8cnbz2v8n] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.k-radio-list.k-list-horizontal[b-l8cnbz2v8n] {
    gap: 20px;
}

/* Smooth fade-in animation for grid transitions */
.custom-grid-container[b-l8cnbz2v8n] {
    animation: fadeIn-b-l8cnbz2v8n 0.2s ease-in;
}

@keyframes fadeIn-b-l8cnbz2v8n {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* View button styling */
.action-btn.view-btn[b-l8cnbz2v8n] {
    background-color: #E36F26;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

    .action-btn.view-btn:hover[b-l8cnbz2v8n] {
        background-color: #C85E1F;
    }

/* View badge button styling - pill shaped badge */
.action-btn.view-badge-btn[b-l8cnbz2v8n] {
    background-color: #E36F26;
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.2s ease;
    margin-right: 8px;
}

    .action-btn.view-badge-btn:hover[b-l8cnbz2v8n] {
        background-color: #C85E1F;
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(227, 111, 38, 0.4);
    }

    .action-btn.view-badge-btn:active[b-l8cnbz2v8n] {
        transform: scale(0.98);
    }

/* Delete button - keep existing, just ensure spacing */
.action-btn.delete-btn[b-l8cnbz2v8n] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #dc3545;
    transition: all 0.2s ease;
}

    .action-btn.delete-btn:hover[b-l8cnbz2v8n] {
        color: #bd2130;
        transform: scale(1.1);
    }

/* Wizard container styling */
.wizard-container[b-l8cnbz2v8n] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 230px);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wizard-header[b-l8cnbz2v8n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

    .wizard-header h3[b-l8cnbz2v8n] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.wizard-actions[b-l8cnbz2v8n] {
    display: flex;
    gap: 10px;
}

.wizard-body[b-l8cnbz2v8n] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.form-group[b-l8cnbz2v8n] {
    margin-bottom: 20px;
}

.form-label[b-l8cnbz2v8n] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.custom-source-grid-container[b-l8cnbz2v8n] {
    height: 300px;
}

/* ===== VERTICAL BREADCRUMB TABS (CORRECT PATTERN FROM RECORD.RAZOR) ===== */
.contacts-content-wrapper[b-l8cnbz2v8n] {
    position: relative;
    height: calc(100vh - 200px);
}

    .contacts-content-wrapper.has-vertical-tabs[b-l8cnbz2v8n] {
        padding-left: 30px;
    }

.vertical-breadcrumb-tabs[b-l8cnbz2v8n] {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
    z-index: 100;
    background: transparent;
}

.vertical-tab[b-l8cnbz2v8n] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: #fff;
    color: #E36F26;
    padding: 5px 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #c5c5c5;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 30px;
    position: relative;
    text-decoration: none;
    margin: 0;
}

    .vertical-tab:hover[b-l8cnbz2v8n] {
        background: #f5f5f5;
        text-decoration: none;
    }

    .vertical-tab:first-child[b-l8cnbz2v8n] {
        border-bottom-right-radius: 4px;
    }

    .vertical-tab:last-child[b-l8cnbz2v8n] {
        border-top-right-radius: 4px;
    }

    .vertical-tab:focus[b-l8cnbz2v8n] {
        outline: none;
        text-decoration: none;
    }

    .vertical-tab:active[b-l8cnbz2v8n] {
        text-decoration: none;
    }
/* ===== END VERTICAL BREADCRUMB TABS ===== */

/* ===== TOOLBAR BUTTON STYLES (for Report Schedule Wizard) ===== */
.toolbar-btn[b-l8cnbz2v8n] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
}

    .toolbar-btn:hover[b-l8cnbz2v8n] {
        background: #E36F26 !important;
        color: white !important;
        border-color: #E36F26 !important;
    }

        .toolbar-btn:hover .material-icons[b-l8cnbz2v8n] {
            color: white !important;
        }

    .toolbar-btn .material-icons[b-l8cnbz2v8n] {
        font-size: 18px;
        color: #E36F26;
        transition: color 0.2s;
    }
/* ===== END TOOLBAR BUTTON STYLES ===== */
/* /Pages/Organizations.razor.rz.scp.css */
/* Main wizard container - full height */
.wizard-main-container[b-2xj621inf9] {
    height: calc(100vh - 112px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    background: #f9f9f9;
}

/* Wizard card container */
.wizard-container[b-2xj621inf9] {
    width: 100%;
    max-width: 700px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Wizard header */
.wizard-header[b-2xj621inf9] {
    padding: 16px 20px;
    border-bottom: 2px solid #E36F26;
    background: #f5f5f5;
}

    .wizard-header h3[b-2xj621inf9] {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #E36F26;
    }

/* Wizard body - scrollable content area */
.wizard-body[b-2xj621inf9] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
}

/* Fieldset styling to match Organizations.razor */
.wizard-fieldset[b-2xj621inf9] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #E36F26;
}

    .wizard-fieldset:last-child[b-2xj621inf9] {
        margin-bottom: 0;
    }

    .wizard-fieldset legend[b-2xj621inf9] {
        font-size: 12px;
        font-weight: 700;
        color: #E36F26;
        padding: 0 8px;
    }

/* Field wrapper */
.wizard-field[b-2xj621inf9] {
    margin-top: 8px;
}

/* Actions footer */
.wizard-actions[b-2xj621inf9] {
    padding: 16px 20px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Telerik TextBox styling */
[b-2xj621inf9] .k-input,
[b-2xj621inf9] .k-textbox,
[b-2xj621inf9] .k-input-inner {
    font-size: 12px;
}

/* Telerik Button styling */
[b-2xj621inf9] .k-button {
    font-size: 12px;
}

    [b-2xj621inf9] .k-button:disabled,
    [b-2xj621inf9] .k-button.k-disabled {
        background-color: #d3d3d3 !important;
        color: #888 !important;
        border-color: #c0c0c0 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

/* Telerik Radio Group styling - HORIZONTAL */
[b-2xj621inf9] .k-radio-label {
    font-size: 12px;
}

[b-2xj621inf9] .k-radio-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 1em !important;
}

[b-2xj621inf9] .k-radio-item {
    margin-right: 0 !important;
}

/* Container for entire page */
.contacts-container[b-2xj621inf9] {
    position: relative;
}
/* /Pages/Project.razor.rz.scp.css */
/* ...existing code... */
.grid-container[b-5j939iqkns] {
    display: flex;
    height: calc(100vh - 230px);
}

.grid-wrapper[b-5j939iqkns] {
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: hidden;
}

.splitter[b-5j939iqkns] {
    flex: 0 0 4px;
    background: #e0e0e0;
    cursor: col-resize;
    z-index: 10;
}

    .splitter:hover[b-5j939iqkns] {
        background: #ccc;
    }

.grid-wrapper:not(:last-child)[b-5j939iqkns] {
    border-right: 1px solid #e0e0e0;
}

.dialog-content[b-5j939iqkns] {
    padding: 20px;
}

.form-group[b-5j939iqkns] {
    margin-bottom: 20px;
}

.form-label[b-5j939iqkns] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.k-radio-list.k-list-horizontal[b-5j939iqkns] {
    gap: 20px;
}

/* Smooth fade-in animation for grid transitions */
.custom-grid-container[b-5j939iqkns] {
    animation: fadeIn-b-5j939iqkns 0.2s ease-in;
}

@keyframes fadeIn-b-5j939iqkns {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Back button styling */
.toolbar-btn.back-btn[b-5j939iqkns] {
    background-color: #6c757d;
    color: white;
}

    .toolbar-btn.back-btn:hover[b-5j939iqkns] {
        background-color: #5a6268;
    }

/* View button styling */
.action-btn.view-btn[b-5j939iqkns] {
    background-color: #E36F26;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

    .action-btn.view-btn:hover[b-5j939iqkns] {
        background-color: #C85E1F;
    }

/* View badge button styling - pill shaped badge */
.action-btn.view-badge-btn[b-5j939iqkns] {
    background-color: #E36F26;
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.2s ease;
    margin-right: 8px;
}

    .action-btn.view-badge-btn:hover[b-5j939iqkns] {
        background-color: #C85E1F;
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(227, 111, 38, 0.4);
    }

    .action-btn.view-badge-btn:active[b-5j939iqkns] {
        transform: scale(0.98);
    }

/* Delete button - keep existing, just ensure spacing */
.action-btn.delete-btn[b-5j939iqkns] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #dc3545;
    transition: all 0.2s ease;
}

    .action-btn.delete-btn:hover[b-5j939iqkns] {
        color: #bd2130;
        transform: scale(1.1);
    }
/* Record Wizard Styling */
.wizard-container[b-5j939iqkns] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 230px);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wizard-header[b-5j939iqkns] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

    .wizard-header h3[b-5j939iqkns] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.wizard-actions[b-5j939iqkns] {
    display: flex;
    gap: 10px;
}

.wizard-body[b-5j939iqkns] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.form-group[b-5j939iqkns] {
    margin-bottom: 20px;
}

.form-label[b-5j939iqkns] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.custom-source-grid-container[b-5j939iqkns] {
    height: 300px;
}

/* ===== LOADER/BADGE/ICON STYLES ===== */
.contacts-container[b-5j939iqkns] {
    position: relative;
}

.k-loader-container[b-5j939iqkns] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.icon-badge-button[b-5j939iqkns] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: background 0.2s;
}

    .icon-badge-button:hover[b-5j939iqkns] {
        background: #f0f0f0;
        border-radius: 4px;
    }

    .icon-badge-button img[b-5j939iqkns] {
        width: 16px;
        height: 16px;
    }

.badge-count[b-5j939iqkns] {
    color: #E36F26;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* ===== VERTICAL BREADCRUMB TABS ===== */
.checklists-content-wrapper[b-5j939iqkns] {
    position: relative;
    height: calc(100vh - 200px);
}

    .checklists-content-wrapper.has-vertical-tabs[b-5j939iqkns] {
        padding-left: 30px;
    }

.contacts-content-wrapper[b-5j939iqkns] {
    position: relative;
    height: calc(100vh - 200px);
}

    .contacts-content-wrapper.has-vertical-tabs[b-5j939iqkns] {
        padding-left: 30px;
    }

.vertical-breadcrumb-tabs[b-5j939iqkns] {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
    z-index: 100;
    background: transparent;
}

.vertical-tab[b-5j939iqkns] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: #fff;
    color: #E36F26;
    padding: 5px 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #c5c5c5;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 30px;
    position: relative;
    text-decoration: none;
    margin: 0;
}

    .vertical-tab:hover[b-5j939iqkns] {
        background: #f5f5f5;
        text-decoration: none;
    }

    .vertical-tab:first-child[b-5j939iqkns] {
        border-bottom-right-radius: 4px;
    }

    .vertical-tab:last-child[b-5j939iqkns] {
        border-top-right-radius: 4px;
    }

    .vertical-tab:focus[b-5j939iqkns] {
        outline: none;
        text-decoration: none;
    }

    .vertical-tab:active[b-5j939iqkns] {
        text-decoration: none;
    }
/* ===== END VERTICAL BREADCRUMB TABS ===== */

.custom-toast[b-5j939iqkns] {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: #323232;
    color: #fff;
    padding: 1em 2em;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    z-index: 9999;
    font-size: 1.1em;
    opacity: 0.95;
    transition: opacity 0.3s;
}
/* /Pages/Projects.razor.rz.scp.css */
/* Main wizard container - full height */
.wizard-main-container[b-36f79ln1ti] {
    height: calc(100vh - 112px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    background: #f9f9f9;
}

/* Wizard card container */
.wizard-container[b-36f79ln1ti] {
    width: 100%;
    max-width: 700px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Wizard header */
.wizard-header[b-36f79ln1ti] {
    padding: 16px 20px;
    border-bottom: 2px solid #E36F26;
    background: #f5f5f5;
}

    .wizard-header h3[b-36f79ln1ti] {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #E36F26;
    }

/* Wizard body - scrollable content area */
.wizard-body[b-36f79ln1ti] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
}

/* Fieldset styling to match Organizations.razor */
.wizard-fieldset[b-36f79ln1ti] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

    .wizard-fieldset:last-child[b-36f79ln1ti] {
        margin-bottom: 0;
    }

    .wizard-fieldset legend[b-36f79ln1ti] {
        font-size: 12px;
        font-weight: 700;
        color: #E36F26;
        padding: 0 8px;
    }

    /* CRITICAL: Reset color inheritance inside fieldsets */
    .wizard-fieldset > *:not(legend)[b-36f79ln1ti] {
        color: initial;
    }

/* Field wrapper */
.wizard-field[b-36f79ln1ti] {
    margin-top: 8px;
}

/* Actions footer */
.wizard-actions[b-36f79ln1ti] {
    padding: 16px 20px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Telerik TextBox styling */
[b-36f79ln1ti] .k-input,
[b-36f79ln1ti] .k-textbox,
[b-36f79ln1ti] .k-input-inner {
    font-size: 12px;
}

/* Telerik Button styling */
[b-36f79ln1ti] .k-button {
    font-size: 12px;
}

    [b-36f79ln1ti] .k-button:disabled,
    [b-36f79ln1ti] .k-button.k-disabled {
        background-color: #d3d3d3 !important;
        color: #888 !important;
        border-color: #c0c0c0 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

/* Telerik Radio Group styling - HORIZONTAL */
[b-36f79ln1ti] .k-radio-label {
    font-size: 12px;
}

[b-36f79ln1ti] .k-radio-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 1em !important;
}

[b-36f79ln1ti] .k-radio-item {
    margin-right: 0 !important;
}

/* Container for entire page */
.contacts-container[b-36f79ln1ti] {
    position: relative;
}
/* /Pages/Record.razor.rz.scp.css */
.grid-container[b-9oct00a68j] {
    display: flex;
    height: calc(100vh - 230px);
}

.grid-wrapper[b-9oct00a68j] {
    min-width: 200px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow: hidden;
}

.splitter[b-9oct00a68j] {
    flex: 0 0 4px;
    background: #e0e0e0;
    cursor: col-resize;
    z-index: 10;
}

    .splitter:hover[b-9oct00a68j] {
        background: #ccc;
    }

.grid-wrapper:not(:last-child)[b-9oct00a68j] {
    border-right: 1px solid #e0e0e0;
}

.dialog-content[b-9oct00a68j] {
    padding: 20px;
}

.form-group[b-9oct00a68j] {
    margin-bottom: 20px;
}

.form-label[b-9oct00a68j] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.k-radio-list.k-list-horizontal[b-9oct00a68j] {
    gap: 20px;
}

/* Smooth fade-in animation for grid transitions */
.custom-grid-container[b-9oct00a68j] {
    animation: fadeIn-b-9oct00a68j 0.2s ease-in;
}

@keyframes fadeIn-b-9oct00a68j {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Back button styling */
.toolbar-btn.back-btn[b-9oct00a68j] {
    background-color: #6c757d;
    color: white;
}

    .toolbar-btn.back-btn:hover[b-9oct00a68j] {
        background-color: #5a6268;
    }

/* View button styling */
.action-btn.view-btn[b-9oct00a68j] {
    background-color: #E36F26;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

    .action-btn.view-btn:hover[b-9oct00a68j] {
        background-color: #C85E1F;
    }

/* View badge button styling - pill shaped badge */
.action-btn.view-badge-btn[b-9oct00a68j] {
    background-color: #E36F26;
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.2s ease;
    margin-right: 8px;
}

    .action-btn.view-badge-btn:hover[b-9oct00a68j] {
        background-color: #C85E1F;
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(227, 111, 38, 0.4);
    }

    .action-btn.view-badge-btn:active[b-9oct00a68j] {
        transform: scale(0.98);
    }

/* Delete button - keep existing, just ensure spacing */
.action-btn.delete-btn[b-9oct00a68j] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #E36F26;  /* Changed from #dc3545 to Realogic Orange */
    transition: all 0.2s ease;
}

    .action-btn.delete-btn:hover[b-9oct00a68j] {
        color: #C85E1F;  /* Darker orange on hover */
        transform: scale(1.1);
    }

    .action-btn.delete-btn .material-icons[b-9oct00a68j] {
        color: #E36F26;  /* Ensure icon inherits orange color */
    }

/* Record Wizard Styling */
.wizard-container[b-9oct00a68j] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 230px);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wizard-header[b-9oct00a68j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

    .wizard-header h3[b-9oct00a68j] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.wizard-actions[b-9oct00a68j] {
    display: flex;
    gap: 10px;
}

.wizard-body[b-9oct00a68j] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.form-group[b-9oct00a68j] {
    margin-bottom: 20px;
}

.form-label[b-9oct00a68j] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.custom-source-grid-container[b-9oct00a68j] {
    height: 300px;
}

/* ===== LOADER/BADGE/ICON STYLES ===== */
.contacts-container[b-9oct00a68j] {
    position: relative;
}

.k-loader-container[b-9oct00a68j] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

/* Icon badge button styles */
.icon-badge-button[b-9oct00a68j] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;  /* Reduced from 8px to 4px */
    transition: background 0.2s;
}

    .icon-badge-button:hover[b-9oct00a68j] {
        background: #f0f0f0;
        border-radius: 4px;
    }

    .icon-badge-button img[b-9oct00a68j] {
        width: 16px;
        height: 16px;
    }

.badge-count[b-9oct00a68j] {
    color: #E36F26;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* ===== VERTICAL BREADCRUMB TABS ===== */
.contacts-content-wrapper[b-9oct00a68j] {
    position: relative;
    height: calc(100vh - 200px);
}

    .contacts-content-wrapper.has-vertical-tabs[b-9oct00a68j] {
        padding-left: 30px;
    }

.vertical-breadcrumb-tabs[b-9oct00a68j] {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
    z-index: 100;
    background: transparent;
}

.vertical-tab[b-9oct00a68j] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    background: #fff;
    color: #E36F26;
    padding: 5px 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #c5c5c5;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 30px;
    position: relative;
    text-decoration: none;
    margin: 0;
}

    .vertical-tab:hover[b-9oct00a68j] {
        background: #f5f5f5;
        text-decoration: none;
    }

    .vertical-tab:first-child[b-9oct00a68j] {
        border-bottom-right-radius: 4px;
    }

    .vertical-tab:last-child[b-9oct00a68j] {
        border-top-right-radius: 4px;
    }

    .vertical-tab:focus[b-9oct00a68j] {
        outline: none;
        text-decoration: none;
    }

    .vertical-tab:active[b-9oct00a68j] {
        text-decoration: none;
    }
/* ===== END VERTICAL BREADCRUMB TABS ===== */

.custom-toast[b-9oct00a68j] {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: #323232;
    color: #fff;
    padding: 1em 2em;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    z-index: 9999;
    font-size: 1.1em;
    opacity: 0.95;
    transition: opacity 0.3s;
}

/* Record Info Styles */
.record-info-container[b-9oct00a68j] {
    padding: 20px;
}

.record-info-grid[b-9oct00a68j] {
    max-width: 800px;
}

.record-info-row[b-9oct00a68j] {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.record-info-row-split[b-9oct00a68j] {
    display: flex;
    gap: 20px;
}

.record-info-half[b-9oct00a68j] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.record-info-label[b-9oct00a68j] {
    min-width: 150px;
    font-weight: 500;
    color: #424242;
}

.record-info-input[b-9oct00a68j],
.record-info-dropdown[b-9oct00a68j] {
    flex: 1;
}

/* Notes and Dates Buttons */
.record-info-notes-dates-row[b-9oct00a68j] {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.notes-dates-buttons[b-9oct00a68j] {
    display: flex;
    gap: 15px;
}

.notes-button[b-9oct00a68j],
.dates-button[b-9oct00a68j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

    .notes-button:hover[b-9oct00a68j],
    .dates-button:hover[b-9oct00a68j] {
        background-color: #f5f5f5;
        border-color: #1976d2;
    }

    .notes-button .k-icon[b-9oct00a68j],
    .dates-button .k-icon[b-9oct00a68j] {
        font-size: 18px;
        color: #1976d2;
    }

.button-text[b-9oct00a68j] {
    font-weight: 500;
    color: #424242;
}

.count-badge[b-9oct00a68j] {
    background-color: #1976d2;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Notes/Dates Panel */
.notes-dates-panel[b-9oct00a68j] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notes-dates-header[b-9oct00a68j] {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.back-button[b-9oct00a68j] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

    .back-button:hover[b-9oct00a68j] {
        background-color: #f5f5f5;
        border-color: #1976d2;
    }

    .back-button .k-icon[b-9oct00a68j] {
        color: #1976d2;
    }

.notes-dates-header h3[b-9oct00a68j] {
    margin: 0;
    font-size: 18px;
    color: #424242;
}

.notes-dates-content[b-9oct00a68j] {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.loader-container[b-9oct00a68j] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/* Record Info Div styling */
#recordInfoDiv[b-9oct00a68j] {
    background: #f5f5f5;
    min-height: calc(100vh - 154px);
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 1em;
}

/* Read-only input style matching Telerik inputs */
.readonly-input-style[b-9oct00a68j] {
    display: block;
    width: 100%;
    background: #f5f5f5;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
    padding: 0.5em 0.75em;
    font-size: 14px;
    color: #424242;
    min-height: 32px;
    box-sizing: border-box;
    line-height: 1.5;
    margin-top: 0.25em;
}

/* Ensure inputs have white background on gray panel */
#recordInfoDiv .k-input[b-9oct00a68j],
#recordInfoDiv .k-textbox[b-9oct00a68j],
#recordInfoDiv .k-picker[b-9oct00a68j],
#recordInfoDiv .k-datepicker[b-9oct00a68j],
#recordInfoDiv .k-combobox[b-9oct00a68j],
#recordInfoDiv .k-input-inner[b-9oct00a68j] {
    background: #fff !important;
}

/* Add Record button - Realogic Orange plus icon */
.add-record-btn[b-9oct00a68j] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #E36F26;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .add-record-btn:hover[b-9oct00a68j] {
        background: #f0f0f0;
        border-radius: 4px;
        transform: scale(1.1);
    }

    .add-record-btn .material-icons[b-9oct00a68j] {
        color: #E36F26;
        font-size: 24px; /* Increased from 18px to 24px */
    }

.btn-back-to-parent[b-9oct00a68j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .btn-back-to-parent:hover[b-9oct00a68j] {
        background: #E36F26;
        border-color: #E36F26;
        color: white;
        box-shadow: 0 2px 6px rgba(227, 111, 38, 0.3);
        transform: translateY(-1px);
    }

    .btn-back-to-parent .material-icons[b-9oct00a68j] {
        font-size: 1.2rem;
    }

/* Space Detail Wizard Container */
.space-detail-wizard-container[b-9oct00a68j] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Wizard Header */
.wizard-header[b-9oct00a68j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #f9f9f9;
    border-bottom: 2px solid #ddd;
    flex-shrink: 0;
}

.wizard-header-left[b-9oct00a68j] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wizard-back-btn[b-9oct00a68j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

    .wizard-back-btn:hover[b-9oct00a68j] {
        background: #E36F26;
        color: white;
        border-color: #E36F26;
    }

        .wizard-back-btn:hover .material-icons[b-9oct00a68j] {
            color: white;
        }

    .wizard-back-btn .material-icons[b-9oct00a68j] {
        font-size: 20px;
        color: #E36F26;
        transition: color 0.2s;
    }

.wizard-title[b-9oct00a68j] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.wizard-header-right[b-9oct00a68j] {
    display: flex;
    align-items: center;
}

.wizard-space-id[b-9oct00a68j] {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    padding: 8px 16px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Wizard Body */
.wizard-body[b-9oct00a68j] {
    flex: 1 1 auto;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wizard-fieldset[b-9oct00a68j] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    background: #f9f9f9;
}

    .wizard-fieldset legend[b-9oct00a68j] {
        font-size: 14px;
        font-weight: 700;
        color: #333;
        padding: 0 8px;
    }

/* Existing Mode Content */
.wizard-content-existing[b-9oct00a68j] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* New Mode Content */
.wizard-content-new[b-9oct00a68j] {
    flex: 1;
    display: flex;
    gap: 24px;
}

.wizard-grids-container[b-9oct00a68j] {
    flex: 2;
    display: flex;
    gap: 24px;
}

.wizard-grid-wrapper[b-9oct00a68j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wizard-section-title[b-9oct00a68j] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.wizard-inputs-container[b-9oct00a68j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wizard-input-group[b-9oct00a68j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-label[b-9oct00a68j] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.required-indicator[b-9oct00a68j] {
    color: #E36F26;
    font-weight: 700;
}

.wizard-input[b-9oct00a68j] {
    width: 100%;
}

.wizard-validation-message[b-9oct00a68j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fff3e0;
    border: 1px solid #E36F26;
    border-radius: 4px;
    color: #E36F26;
    font-size: 14px;
    font-weight: 600;
}

    .wizard-validation-message .material-icons[b-9oct00a68j] {
        font-size: 20px;
    }

/* Wizard Footer */
.wizard-footer[b-9oct00a68j] {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 2px solid #ddd;
    flex-shrink: 0;
}

.wizard-submit-btn[b-9oct00a68j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #E36F26;
    color: white;
    border: 1px solid #E36F26;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s;
}

    .wizard-submit-btn:hover:not(:disabled)[b-9oct00a68j] {
        background: #c55d1f;
        border-color: #c55d1f;
    }

    .wizard-submit-btn:disabled[b-9oct00a68j] {
        background: #ccc;
        border-color: #ccc;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .wizard-submit-btn .material-icons[b-9oct00a68j] {
        font-size: 20px;
    }

/* ===== WIZARD BUTTON STYLES ===== */
.k-button.k-button-solid-light[b-9oct00a68j] {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    font-weight: 600 !important;
}

    .k-button.k-button-solid-light:hover[b-9oct00a68j] {
        background-color: #e0e0e0 !important;
        border-color: #999 !important;
    }

.k-button.k-button-solid-primary[b-9oct00a68j] {
    background-color: #E36F26 !important;
    color: white !important;
    border: 1px solid #E36F26 !important;
    font-weight: 600 !important;
}

    .k-button.k-button-solid-primary:hover:not(:disabled)[b-9oct00a68j] {
        background-color: #c85d1f !important;
        border-color: #c85d1f !important;
    }

    .k-button.k-button-solid-primary:disabled[b-9oct00a68j] {
        background-color: #d3d3d3 !important;
        color: #888 !important;
        border-color: #c0c0c0 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
/* ===== END WIZARD BUTTON STYLES ===== */

[b-9oct00a68j] .record-commencement-date-input {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1;
    color: #495057;
    height: auto;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out;
}

    [b-9oct00a68j] .record-commencement-date-input:focus {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 0.2rem rgba(227, 111, 38, 0.25);
    }

[b-9oct00a68j] .record-inactive-date-input {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1;
    color: #495057;
    height: auto;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out;
}

    [b-9oct00a68j] .record-inactive-date-input:focus {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 0.2rem rgba(227, 111, 38, 0.25);
    }

[b-9oct00a68j] .record-end-date-input {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1;
    color: #495057;
    height: auto;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out;
}

    [b-9oct00a68j] .record-end-date-input:focus {
        outline: none;
        border-color: #E36F26;
        box-shadow: 0 0 0 0.2rem rgba(227, 111, 38, 0.25);
    }

/* Add this style for the info button */
.action-btn.info-btn[b-9oct00a68j] {
    background-color: #17a2b8;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    padding: 0.5em 0.75em;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s;
}

    .action-btn.info-btn:hover[b-9oct00a68j] {
        background-color: #138496;
    }

    .action-btn.info-btn .material-icons[b-9oct00a68j] {
        font-size: 18px;
    }
/* /Pages/Records.razor.rz.scp.css */
.contacts-container[b-tozbws1iyr] {
    position: relative;
}

.k-loader-container[b-tozbws1iyr] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

/* Button styling - MUST use ::deep to penetrate child components */
[b-tozbws1iyr] .k-button.k-button-solid-primary,
[b-tozbws1iyr] .k-button[themecolor="primary"] {
    background-color: #E36F26 !important;
    border-color: #E36F26 !important;
    color: white !important;
}

    [b-tozbws1iyr] .k-button.k-button-solid-primary:hover,
    [b-tozbws1iyr] .k-button[themecolor="primary"]:hover {
        background-color: #C85E1F !important;
        border-color: #C85E1F !important;
    }

    [b-tozbws1iyr] .k-button.k-button-solid-primary:disabled,
    [b-tozbws1iyr] .k-button[themecolor="primary"]:disabled {
        background-color: #d3d3d3 !important;
        color: #888 !important;
        border-color: #c0c0c0 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

[b-tozbws1iyr] .k-radio:checked,
[b-tozbws1iyr] .k-radio.k-checked {
    border-color: #E36F26 !important;
    color: #E36F26 !important;
}

    [b-tozbws1iyr] .k-radio:checked::before,
    [b-tozbws1iyr] .k-radio.k-checked::before {
        background-color: #E36F26 !important;
    }

[b-tozbws1iyr] .k-radio:focus,
[b-tozbws1iyr] .k-radio.k-focus {
    box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.3) !important;
}

[b-tozbws1iyr] .k-radio-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 1em !important;
}

[b-tozbws1iyr] .k-radio-item {
    margin-right: 0 !important;
}

[b-tozbws1iyr] .k-input:focus,
[b-tozbws1iyr] .k-input.k-focus {
    border-color: #E36F26 !important;
    box-shadow: 0 0 0 2px rgba(227, 111, 38, 0.3) !important;
}

/* Fieldset - NO color on fieldset itself, only on legend */
fieldset[b-tozbws1iyr] {
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5em;
}

    fieldset legend[b-tozbws1iyr] {
        font-size: 0.85em;
        font-weight: 600;
        margin-bottom: 0.1em;
        padding: 0 0.5em;
        color: #E36F26;
    }

.upload-files-repositioned[b-tozbws1iyr] {
    position: relative;
    height: 50px;
}

    .upload-files-repositioned .k-upload-files[b-tozbws1iyr],
    .upload-files-repositioned .k-upload-status[b-tozbws1iyr] {
        position: absolute;
        top: -120px;
        left: 0;
        right: 0;
        max-height: 115px;
        overflow-y: auto;
        background: #f0f8ff;
        border: 1px solid #ddd;
        border-radius: 4px;
        border-left: 4px solid #E36F26;
        padding: 6px;
        z-index: 10;
        font-size: 12px;
        line-height: 1.3;
    }

    .upload-files-repositioned .k-upload-button[b-tozbws1iyr],
    .upload-files-repositioned .k-upload-zone[b-tozbws1iyr] {
        position: relative;
        z-index: 1;
    }

[b-tozbws1iyr] .k-window {
    font-size: 12px;
}

[b-tozbws1iyr] .k-window-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #E36F26 !important;
}

[b-tozbws1iyr] .k-window-content {
    overflow-y: auto !important;
}

[b-tozbws1iyr] .k-grid {
    font-size: 12px;
}

    [b-tozbws1iyr] .k-grid td {
        padding: 4px 8px;
        line-height: 1.4;
        font-size: 12px;
    }

    [b-tozbws1iyr] .k-grid th {
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 600;
    }

    [b-tozbws1iyr] .k-grid .k-table-row {
        height: 30px;
    }

    [b-tozbws1iyr] .k-grid tbody tr {
        cursor: pointer;
        transition: all 0.2s ease;
    }

        [b-tozbws1iyr] .k-grid tbody tr:hover {
            background-color: #E36F26 !important;
            color: white !important;
            font-weight: 700 !important;
        }

            [b-tozbws1iyr] .k-grid tbody tr:hover td {
                font-weight: 700 !important;
                color: white !important;
                border-color: #E36F26 !important;
            }

        [b-tozbws1iyr] .k-grid tbody tr.k-selected,
        [b-tozbws1iyr] .k-grid tbody tr.k-state-selected {
            background-color: #E36F26 !important;
            color: white !important;
            font-weight: 700 !important;
        }

            [b-tozbws1iyr] .k-grid tbody tr.k-selected td,
            [b-tozbws1iyr] .k-grid tbody tr.k-state-selected td {
                background-color: #E36F26 !important;
                color: white !important;
                font-weight: 700 !important;
                border-color: #E36F26 !important;
            }
/* /Pages/Reports.razor.rz.scp.css */
.row-layout[b-x75hfe3jzu] {
    height: 100%;
}

.contacts-container[b-x75hfe3jzu] {
    position: relative;
    height: 100%;
}

.reports-parameters-container[b-x75hfe3jzu] {
    display: grid;
    grid-template-columns: 70% 30%;
    height: calc(100vh - 165px);
    gap: 0.5rem;
    padding: 0.5rem;
}

.source-fieldset[b-x75hfe3jzu] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    min-height: 0;
}

    .source-fieldset legend[b-x75hfe3jzu] {
        color: #E36F26;
    }

.source-header[b-x75hfe3jzu] {
    flex-shrink: 0;
    padding: 0 0.5rem;
}

    .source-header > span[b-x75hfe3jzu] {
        color: #E36F26;
    }

.source-content[b-x75hfe3jzu] {
    flex: 1;
    overflow: hidden;
    margin-top: 1rem;
    min-height: 0;
}

.parameters-column[b-x75hfe3jzu] {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 0.5rem;
    overflow: hidden;
    min-height: 0;
}

.additional-parameters-fieldset[b-x75hfe3jzu] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 0;
}

    .additional-parameters-fieldset legend[b-x75hfe3jzu] {
        color: #E36F26;
    }

.parameters-scroll[b-x75hfe3jzu] {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem;
    min-height: 0;
}

    .parameters-scroll span[b-x75hfe3jzu] {
        color: #E36F26;
    }

    .parameters-scroll p[b-x75hfe3jzu] {
        color: #E36F26;
    }

.submit-fieldset[b-x75hfe3jzu] {
    margin: 0;
    padding: 0.5rem;
    flex-shrink: 0;
}

    .submit-fieldset legend[b-x75hfe3jzu] {
        color: #E36F26;
    }

.submit-content[b-x75hfe3jzu] {
    padding: 0 0.5rem;
}

.report-buttons-container[b-x75hfe3jzu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-button[b-x75hfe3jzu] {
    background-color: #E36F26;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
}

    .report-button:hover[b-x75hfe3jzu] {
        background-color: #c45d1e;
    }

.report-date-container[b-x75hfe3jzu] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.report-date-label[b-x75hfe3jzu] {
    color: #E36F26;
    font-weight: 600;
    margin-bottom: 0.5em;
}

.report-date-picker[b-x75hfe3jzu] {
    width: 100%;
}

.custom-date-input[b-x75hfe3jzu] {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    font-size: 14px;
}

.custom-button[b-x75hfe3jzu] {
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    cursor: pointer;
    font-size: 14px;
}

    .custom-button.primary[b-x75hfe3jzu] {
        background-color: #E36F26;
        color: white;
    }

        .custom-button.primary:hover[b-x75hfe3jzu] {
            background-color: #c45d1e;
        }
/* /Shared/MainLayout.razor.rz.scp.css */
.column-layout[master_view-scope] {
    display: flex;
    flex-direction: column;
}
.master-view-container[master_view-scope] {
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    height: 100%;
}
.row-layout[master_view-scope] {
    display: flex;
}
.group[master_view-scope] {
    background-color: var(--ig-gray-900);
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    overflow: hidden;
    position: relative;
    min-height: 56px;
}
.group_1[master_view-scope] {
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 50px;
    min-height: 50px;
}
.group_2[master_view-scope] {
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 1rem;
    overflow: auto;
}
.group_3[master_view-scope] {
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    position: relative;
    min-height: 50px;
    flex-grow: 1;
}
.group_4[master_view-scope] {
    justify-content: end;
    align-items: center;
    align-content: end;
    gap: 1rem;
    overflow: auto;
}
.icon[master_view-scope] {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--ig-surface-500);
}
.image[master_view-scope] {
    object-fit: none;
    width: 350px;
    height: 55px;
    min-width: 350px;
    flex-shrink: 0;  
}
.avatar[master_view-scope] {
    --background: none;
    --ig-gray-400: transparent;
}
.h6[master_view-scope] {
    margin: 0;
    flex-shrink: 0;
}
.avatar[master_view-scope]::part(base) {
    background-color: var(--ig-surface-500);
}
.icon-button[master_view-scope]::part(base) {
    color: var(--ig-surface-500);
}
.icon-button_1[master_view-scope]::part(base) {
    color: var(--ig-surface-500);
}
.icon-button_2[master_view-scope]::part(base) {
    color: var(--ig-surface-500);
}
.navbar[master_view-scope] {
    color: var(--ig-surface-500);
    background-color: var(--ig-primary-500);
    height: max-content;
    min-width: min-content;
    flex-grow: 1;
    flex-basis: 0;
}
.nav-drawer[master_view-scope] {
    min-width: min-content;
    min-height: 0;
    flex-shrink: 0;
}
.view-container[master_view-scope] {
    overflow: auto;
    position: relative;
    flex-grow: 1;
}
.navbar_1[master_view-scope] {
    color: var(--ig-surface-500);
    background-color: var(--ig-primary-500);
    height: max-content;
    min-width: min-content;
}
.nav-drawer[master_view-scope]::part(main) {
    min-width: 150px;
}
.nav-drawer[master_view-scope]::part(mini hidden) {
    display: none;
}
.list[master_view-scope] {
    height: max-content;
}
.loading-progress[master_view-scope] {
    position: relative;
    display: block;
    width: 10rem;
    height: 10rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle[master_view-scope] {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child[master_view-scope] {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text[master_view-scope] {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text[master_view-scope]:after {
        /*content: var(--blazor-load-percentage-text, "Loading");*/
    }

.custom-toast[master_view-scope] {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: #323232;
    color: #fff;
    padding: 1em 2em;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    z-index: 10000;
    font-size: 1.1em;
    opacity: 0.95;
    transition: opacity 0.3s;
}

.notification-icon-wrapper[master_view-scope] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-icon[master_view-scope] {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.notification-badge[master_view-scope] {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #E36F26;
    color: white;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 3px 4px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    line-height: 1;
}

    .notification-badge[style*="display: block"][master_view-scope] {
        display: flex;
    }

.notification-dropdown-backdrop[master_view-scope] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: transparent;
}

.notification-dropdown[master_view-scope] {
    position: fixed;
    top: 56px;
    right: 32px;
    width: 700px;
    max-width: calc(100vw - 64px);
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    max-height: 500px;
    font-family: Segoe UI, Helvetica Neue, sans-serif;
}

.notification-dropdown-header[master_view-scope] {
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    background: #ffffff;
    flex-shrink: 0;
}

    .notification-dropdown-header label[master_view-scope] {
        display: inline-block;
        margin-right: 24px;
        cursor: pointer;
        font-size: 12px;
        color: #333333;
        user-select: none;
    }

    .notification-dropdown-header input[type="radio"][master_view-scope] {
        margin-right: 6px;
        cursor: pointer;
    }

.notification-grid[master_view-scope] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #ffffff;
}

.notification-grid-header[master_view-scope] {
    display: grid;
    grid-template-columns: 120px 1fr 100px 150px;
    gap: 0;
    padding: 0;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    height: 30px;
}

    .notification-grid-header > div[master_view-scope] {
        padding: 4px 8px;
        border-right: 1px solid #ccc;
        display: flex;
        align-items: center;
    }

        .notification-grid-header > div:last-child[master_view-scope] {
            border-right: none;
        }

.notification-grid-body[master_view-scope] {
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
    position: relative;
    min-height: 0;
}

.notification-row[master_view-scope] {
    display: grid;
    grid-template-columns: 120px 1fr 100px 150px;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid #e8e8e8;
    font-size: 12px;
    color: #333;
    background: white;
    min-height: 30px;
}

    .notification-row:nth-child(odd)[master_view-scope] {
        background: white;
    }

    .notification-row:nth-child(even)[master_view-scope] {
        background: #f5f5f5;
    }

    .notification-row:hover[master_view-scope] {
        background: #e0e0e0 !important;
        cursor: pointer;
    }

    .notification-row > div[master_view-scope] {
        padding: 3px 8px;
        border-right: 1px solid #ddd;
        display: flex;
        align-items: center;
        overflow: hidden;
        line-height: 1.3;
        min-height: 28px;
    }

        .notification-row > div:last-child[master_view-scope] {
            border-right: none;
        }

.col-type[master_view-scope], .col-description[master_view-scope], .col-status[master_view-scope], .col-date[master_view-scope] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.notification-grid-body[master_view-scope]::-webkit-scrollbar {
    width: 8px;
}

.notification-grid-body[master_view-scope]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notification-grid-body[master_view-scope]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .notification-grid-body[master_view-scope]::-webkit-scrollbar-thumb:hover {
        background: #E36F26;
    }